:root {
  --navy: #03142f;
  --ink: #0b2b55;
  --blue: #177be8;
  --sky: #44c8ff;
  --pale: #eef8ff;
  --muted: #526d84;
  --line: #d9eaf5;
  --gold: #f7b923;
  --shadow: 0 12px 32px rgba(18, 66, 103, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--navy);
  font-family: "DM Sans", "Noto Sans Thai", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.th { font-family: "Noto Sans Thai", "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, "Noto Sans Thai", sans-serif; }

.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip { position: fixed; z-index: 100; top: -80px; left: 16px; padding: 10px 16px; background: #fff; border-radius: 8px; }
.skip:focus { top: 12px; }

.site-header {
  position: absolute;
  z-index: 30;
  inset: 0 0 auto;
  height: clamp(74px, 7.4vw, 84px);
  background: transparent;
  border-bottom: 0;
}
.site-header .shell, .hero .shell, .partners .shell { width: calc(100% - clamp(88px, 11.5vw, 196px)); }
.nav { position: relative; height: 100%; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; min-width: 190px; }
.brand-lockup { display: block; width: clamp(164px, 12.4vw, 202px); height: auto; object-fit: contain; }
.brand > span:last-child { display: flex; flex-direction: column; font-family: Manrope, sans-serif; letter-spacing: .08em; }
.brand b { font-size: 15px; line-height: 1.05; letter-spacing: .11em; }
.brand small { margin-top: 4px; font-size: 8px; letter-spacing: .31em; }
.lotus { width: 40px; height: 40px; color: var(--blue); filter: drop-shadow(0 4px 12px rgba(11,115,230,.10)); }
.lotus svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-links { position: absolute; left: 46%; display: flex; width: clamp(440px, 44vw, 720px); align-items: center; justify-content: space-between; gap: 0; margin: 0; transform: translateX(-50%); }
.nav-links a { position: relative; white-space: nowrap; color: #092548; font-size: clamp(11px, .78vw, 13px); font-weight: 700; letter-spacing: .015em; text-shadow: 0 0 4px rgba(255,255,255,.95), 0 1px 14px rgba(255,255,255,.78); }
.nav-links a:first-child { color: var(--blue); }
.nav-links a:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--blue); border-radius: 99px; }
.lang { display: flex; margin-left: auto; border: 0; padding: 3px; background: rgba(237,245,251,.94); border-radius: 999px; box-shadow: 0 5px 18px rgba(9,37,72,.08); cursor: pointer; }
.lang span { padding: 4px 7px; border-radius: 99px; font-size: 9px; }
.lang .active { background: #fff; color: var(--blue); box-shadow: 0 2px 8px rgba(12,57,93,.08); }
.menu-button { display: none; min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer; }

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 22px rgba(11,115,230,.20);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); background: #075fc3; box-shadow: 0 12px 25px rgba(11,115,230,.26); }
.button:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(11,115,230,.34); outline-offset: 3px; }
.nav-cta { min-height: 42px; padding: 9px 19px; font-size: 11px; }

.hero {
  position: relative;
  height: clamp(590px, 60vw, 700px);
  overflow: hidden;
  padding-top: 0;
  border-radius: 0;
  background: #d9f4ff;
  isolation: isolate;
}
.hero-photo {
  position: absolute;
  inset: 0;
  background: url("hero-photo-extracted.webp") 68% 50% / cover no-repeat;
}
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.54) 8%, rgba(255,255,255,.16) 18%, transparent 31%), linear-gradient(90deg, #fff 0%, rgba(255,255,255,.985) 30%, rgba(255,255,255,.80) 43%, rgba(255,255,255,.17) 59%, transparent 72%), radial-gradient(ellipse 78% 31% at 17% 100%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.83) 38%, rgba(255,255,255,.24) 73%, transparent 100%); }
.hero-inner { position: relative; height: 100%; display: flex; align-items: flex-start; padding-top: clamp(108px, 12vw, 142px); }
.hero-copy { position: relative; z-index: 4; width: 54%; max-width: 820px; padding-bottom: 2px; }
.kicker { margin: 0 0 12px; color: var(--blue); font: 800 10px/1.2 Manrope, sans-serif; letter-spacing: .19em; }
.hero .kicker { margin-bottom: 18px; }
.hero h1 { margin-bottom: 9px; }
.kicker.light { color: #79dfff; }
h1 { margin: 0 0 15px; font-size: clamp(50px, 4.15vw, 74px); line-height: .94; letter-spacing: -.034em; text-wrap: balance; }
h1 em { color: var(--blue); font-style: normal; }
.hero-lead { max-width: 620px; margin-bottom: 0; color: #29455e; font-size: clamp(13px, .9vw, 15px); line-height: 1.5; font-weight: 500; }
.hero-actions { display: flex; align-items: center; gap: 17px; margin: 21px 0 27px; }
.hero-actions .button b { margin-left: 9px; font-size: 15px; }
.watch { display: flex; min-height: 44px; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.watch > span:first-child { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid #b7cedf; border-radius: 50%; color: var(--blue); font-size: 9px; }
.hero-points { display: grid; max-width: 590px; grid-template-columns: repeat(4, 1fr); gap: 12px; font-size: clamp(9px, .6vw, 10px); }
.hero-points span { display: inline-flex; align-items: flex-start; gap: 8px; }
.hero-points b { font-weight: 700; line-height: 1.35; }
.hero-points svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.signature-frame {
  position: relative;
  z-index: 4;
  display: flex;
  width: clamp(270px, 16vw, 302px);
  min-height: 130px;
  flex-direction: column;
  align-items: flex-start;
  margin: 7px 0 0 -2px;
  padding: 0 8px 18px;
  overflow: visible;
  color: #061b3d;
  transform: rotate(-3.2deg);
  transform-origin: left center;
}
.signature-line {
  display: block;
  font-family: "Oooh Baby", cursive;
  font-weight: 400;
  white-space: nowrap;
  text-shadow: 0 .5px 0 currentColor;
}
.signature-line-first { font-size: clamp(43px, 2.65vw, 50px); line-height: 1.05; }
.signature-line-second { margin: 3px 0 0 42px; font-size: clamp(45px, 2.8vw, 52px); line-height: 1.05; }
.signature-swoosh { position: absolute; left: 91px; bottom: 4px; width: 170px; height: 18px; overflow: visible; }
.signature-swoosh path { fill: none; stroke: #1477e8; stroke-width: 5; stroke-linecap: round; }
.hero-handnote { position: absolute; z-index: 3; top: clamp(102px, 8.5vw, 156px); right: 5.7%; width: clamp(154px, 10vw, 180px); height: auto; margin: 0; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(4,36,64,.18)); transform: rotate(-5deg); }
.mini-panel {
  position: absolute;
  z-index: 6;
  top: auto;
  bottom: clamp(50px, 5.1vw, 98px);
  left: 58.6%;
  right: auto;
  width: 160px;
  min-height: 220px;
  padding: 24px 22px 22px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.48);
  background: rgba(239,249,252,.91);
  box-shadow: 0 13px 30px rgba(18,65,92,.10);
  backdrop-filter: blur(10px) saturate(.92);
}
.mini-panel > span { display: block; color: #385878; font: 800 9px/1.25 Manrope, sans-serif; letter-spacing: .13em; }
.mini-panel h2 { margin: 3px 0 10px; color: #173653; font-size: 10px; font-weight: 800; line-height: 1.25; letter-spacing: .105em; }
.mini-panel ul { margin: 0; padding: 0; list-style: none; color: #213d59; font-size: 10px; line-height: 1.3; }
.mini-panel li { display: flex; align-items: center; gap: 9px; min-height: 26px; padding: 4px 0; font-weight: 650; white-space: nowrap; }
.mini-panel li svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: #355675; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.growth-note {
  position: absolute;
  z-index: 5;
  left: calc(58.6% + 130px);
  bottom: clamp(50px, 5.1vw, 98px);
  display: flex;
  width: 195px;
  min-height: 70px;
  align-items: center;
  margin: 0;
  padding: 11px 12px 11px 65px;
  border: 0;
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, rgba(218,243,248,.84) 0%, rgba(226,247,250,.68) 58%, rgba(238,250,252,.18) 100%);
  color: #092548;
  box-shadow: none;
  backdrop-filter: blur(7px) saturate(.94);
  font: 800 12px/1.35 Manrope, sans-serif;
  letter-spacing: .035em;
}
.cta-float { position: absolute; z-index: 7; display: grid; width: 36px; height: 36px; place-items: center; border: 2px solid rgba(255,255,255,.96); border-radius: 50%; background: linear-gradient(145deg, #278af2, #0869d8); color: #fff; box-shadow: 0 8px 24px rgba(7,55,99,.24), inset 0 1px 0 rgba(255,255,255,.28); font-size: 13px; font-weight: 800; }
.cta-float { right: 20px; bottom: 27px; }

.partners { padding: 23px 0 28px; border-bottom: 1px solid #edf4f8; background: #fff; }
.partners p { margin-bottom: 22px; color: #7c8fa1; text-align: center; font: 800 8px Manrope, sans-serif; letter-spacing: .17em; }
.logos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; gap: clamp(18px, 2vw, 34px); }
.client-logo { display: grid; min-width: 0; height: 58px; place-items: center; opacity: .9; transition: opacity .25s ease, transform .25s ease; }
.client-logo img { display: block; width: 100%; max-width: 168px; height: 54px; object-fit: contain; }
.client-logo-wide img { max-width: 178px; }
.client-logo-atmosphere img { max-width: 184px; height: 56px; }
.client-logo-climatsun img { max-width: 142px; height: 54px; }
.client-logo-lacasa img { max-width: 154px; height: 54px; }
.client-logo-varaya img { max-width: 170px; height: 54px; }
.client-logo:hover { opacity: 1; transform: translateY(-1px); }

.section { padding: 56px 0; }
.services { position: relative; overflow: hidden; padding-top: 78px; padding-bottom: 78px; border-radius: 0 62px 0 0; background: linear-gradient(180deg, #f5fbff 0%, #eaf6ff 100%); }
.services::before { content: ""; position: absolute; z-index: 0; top: -43px; left: -5%; width: 110%; height: 72px; border-radius: 0 0 54% 46% / 0 0 100% 100%; background: #fff; transform: rotate(-.35deg); transform-origin: center; }
.services .shell { position: relative; z-index: 1; }
.heading-row { display: grid; grid-template-columns: 1.1fr .78fr; align-items: end; gap: 72px; margin-bottom: 25px; }
.heading-row h2 { margin: 0; font-size: clamp(29px, 2.25vw, 36px); line-height: 1.03; letter-spacing: -.042em; text-wrap: balance; }
.heading-row > div:last-child > p, .heading-row > p { max-width: 450px; margin-bottom: 10px; color: #526d84; font-size: 13px; line-height: 1.55; }
.row-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.row-action a { color: var(--blue); font-size: 10px; font-weight: 800; }
.micro-controls { display: flex; gap: 6px; }
.micro-controls i, .micro-controls button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid #c9e1f1; border-radius: 50%; color: var(--blue); background: rgba(255,255,255,.82); font-size: 11px; font-style: normal; }
.micro-controls button { cursor: pointer; box-shadow: 0 5px 13px rgba(24,75,113,.06); transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.micro-controls button:hover, .micro-controls button:focus-visible { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 8px 18px rgba(13,107,196,.2); outline: none; }
.micro-controls button:active { background: #075fc8; }
.micro-controls button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.service-card { overflow: hidden; padding: 8px 8px 19px; border: 1px solid rgba(197,223,240,.9); border-radius: 17px; background: #fff; box-shadow: 0 10px 26px rgba(22,73,112,.09); transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(22,73,112,.13); }
.service-media { position: relative; }
.service-media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; box-shadow: inset 0 -16px 22px rgba(3,31,56,.06); pointer-events: none; }
.service-media img { display: block; width: 100%; height: auto; aspect-ratio: 1.48 / 1; border-radius: 13px; object-fit: cover; object-position: center; }
.service-icon { position: absolute; z-index: 2; left: 11px; bottom: -14px; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d8e9f5; border-radius: 50%; background: #fff; color: var(--blue); box-shadow: 0 5px 14px rgba(24,75,113,.16); }
.service-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { margin: 21px 8px 5px; font-size: 15px; line-height: 1.2; }
.service-card p { min-height: 52px; margin: 0 8px; color: #526d84; font-size: 12px; line-height: 1.5; }
.service-card a { display: inline-block; margin: 10px 8px 0; color: var(--blue); font-size: 11px; font-weight: 800; }

.impact { position: relative; height: 420px; overflow: visible; color: #fff; background: #0a477b; isolation: isolate; }
.impact .reveal { opacity: 1; transform: none; }
.impact::before, .impact::after { content: ""; position: absolute; z-index: 8; left: 0; width: 100%; height: 5px; pointer-events: none; }
.impact::before { top: -3px; background: #eaf6ff; }
.impact::after { bottom: -3px; background: #fff; }
.impact-photo, .cta-photo { position: absolute; inset: 0; background: url("bangkok-skyline.webp") center 60% / cover no-repeat; }
.impact-photo { background-color: #0b4c7d; background-image: url("impact-bangkok-ultrawide.webp"); background-position: center 54%; background-size: cover; background-repeat: no-repeat; }
.impact-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,38,76,.86) 0%, rgba(4,57,103,.68) 42%, rgba(4,55,96,.28) 69%, rgba(2,34,63,.20) 100%); }
.impact-curve { position: absolute; z-index: 4; left: 0; display: block; width: 100%; pointer-events: none; }
.impact-curve-top { z-index: 3; top: -2px; height: 88px; }
.impact-curve-top path { fill: #eaf6ff; }
.impact-curve-bottom { bottom: -2px; height: 88px; }
.impact-curve-bottom path { fill: #fff; }
.impact-tree { position: absolute; z-index: 9; top: 35px; right: -3px; width: 220px; height: auto; pointer-events: none; filter: drop-shadow(-7px 10px 14px rgba(2,38,55,.18)); }
.impact-inner { position: relative; z-index: 10; display: flex; height: 100%; flex-direction: column; justify-content: flex-start; padding: 94px 0 69px; }
.impact-kicker { margin: 0 0 10px; color: rgba(128,218,255,.9); font: 800 8px/1.2 Manrope, sans-serif; letter-spacing: .22em; }
.stats { display: flex; gap: clamp(54px, 5vw, 78px); }
.stats div { display: flex; flex-direction: column; }
.stats strong { font: 800 40px/.94 Manrope, sans-serif; letter-spacing: -.045em; }
.stats span { margin-top: 7px; font-size: 10px; font-weight: 500; line-height: 1.15; }
.impact-bottom { position: relative; display: flex; flex: 1; align-items: flex-start; justify-content: space-between; margin-top: 29px; }
.impact-bottom > div:first-child { max-width: 620px; }
.impact-bottom p { margin: 0; font-size: 15px; font-style: italic; font-weight: 600; line-height: 1.38; }
.impact-quote { position: relative; width: 620px; }
.impact-quote::after { content: ""; position: absolute; left: 405px; top: 59px; width: 70px; height: 1px; background: rgba(255,255,255,.58); transform: rotate(-10deg); }
.script { display: block; width: max-content; margin: -1px 0 0 350px; font-family: "Oooh Baby", cursive; font-size: 30px; line-height: 1; transform: rotate(-6deg); }
.location { position: absolute; top: 7px; right: 18px; isolation: isolate; display: flex; width: 156px; min-height: 154px; flex-direction: column; padding: 18px 17px 15px; border: 1px solid rgba(255,255,255,.24); border-radius: 23px 23px 34px 23px / 23px 23px 29px 23px; background: rgba(12,52,82,.74); box-shadow: 0 12px 27px rgba(1,28,53,.17); backdrop-filter: blur(9px) saturate(.88); }
.location::after { content: ""; position: absolute; z-index: -1; right: -1px; bottom: -5px; width: 56px; height: 34px; border-radius: 7px 0 31px 24px; background: rgba(12,52,82,.74); transform: skewX(-7deg); }
.location small { color: rgba(255,255,255,.9); font: 800 8px/1.1 Manrope, sans-serif; letter-spacing: .18em; }
.location b { margin-top: 5px; font: 800 12px/1.34 Manrope, sans-serif; letter-spacing: .095em; }
.location span { margin-top: auto; color: rgba(255,255,255,.66); font: 700 6.5px/1.2 Manrope, sans-serif; letter-spacing: .13em; }
.location i { position: absolute; z-index: 2; right: 10px; bottom: 5px; display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: #fff; color: #1777df; box-shadow: 0 4px 12px rgba(0,28,53,.2); font: 800 11px/1 Manrope, sans-serif; font-style: normal; }

@media (min-width: 1229px) {
  .location { right: calc((1180px - 100vw) / 2 + 90px); }
}

.work { padding-top: 56px; padding-bottom: 55px; background: #fff; }
.heading-row.compact { grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
.projects-viewport { overflow-x: auto; overflow-y: visible; margin: -14px -18px -22px; padding: 18px 18px 32px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
.projects-viewport::-webkit-scrollbar { display: none; }
.projects-viewport:focus-visible { border-radius: 16px; outline: 2px solid rgba(6,111,229,.48); outline-offset: -2px; }
.projects { display: flex; gap: 14px; }
.projects article { position: relative; flex: 0 0 calc((100% - 42px) / 4); scroll-snap-align: start; opacity: .76; filter: saturate(.84); transform: translateY(2px) scale(.984); transform-origin: center bottom; transition: opacity .38s ease, filter .38s ease, transform .48s cubic-bezier(.22,1,.36,1); }
.projects article.is-active { z-index: 2; opacity: 1; filter: saturate(1.05); transform: translateY(-6px) scale(1.012); }
.project-link { display: block; height: 100%; color: inherit; }
.project-photo { display: block; width: 100%; height: auto; aspect-ratio: 1.44 / 1; border: 1px solid rgba(218,234,245,.82); border-radius: 15px; object-fit: cover; object-position: center; background: #edf6fb; box-shadow: 0 8px 18px rgba(26,75,111,.09); transition: box-shadow .48s cubic-bezier(.22,1,.36,1), transform .48s cubic-bezier(.22,1,.36,1); }
.project-photo--contain { object-fit: contain; background: #122018; }
.projects article.is-active .project-photo { box-shadow: 0 24px 44px rgba(11,78,132,.22), 0 8px 18px rgba(13,107,196,.16); }
.projects article:hover { z-index: 3; opacity: 1; filter: saturate(1); transform: translateY(-6px) scale(1.012); }
.projects article:hover .project-photo { box-shadow: 0 24px 44px rgba(11,78,132,.2), 0 8px 18px rgba(13,107,196,.14); }
.projects h3 { margin: 9px 0 1px; font-size: 13px; }
.projects p { margin-bottom: 0; color: var(--muted); font-size: 10px; }
.portfolio-note { margin: 8px 0 0; color: #526d84; font-size: 10px; }

.reviews { position: relative; z-index: 2; overflow: hidden; margin-top: -24px; margin-bottom: -34px; padding-top: 88px; padding-bottom: 86px; border-radius: 52% 48% 0 74px / 34px 24px 0 36px; background: linear-gradient(180deg, #eff9ff, #f8fcff); }
.reviews .heading-row { margin-bottom: 32px; }
.review-grid { display: grid; grid-template-columns: .78fr 1.12fr 1.12fr; gap: 13px; }
.google-score, .review-grid blockquote { min-height: 214px; margin: 0; padding: 24px; border: 1px solid #d7eaf6; border-radius: 15px; background: #fff; box-shadow: 0 9px 24px rgba(37,89,125,.08); }
.google-score { padding: 12px 18px 12px 4px; border: 0; background: transparent; box-shadow: none; }
.google-score > span { font: 800 7px Manrope, sans-serif; letter-spacing: .17em; }
.google { margin-top: 17px; font: 700 29px Manrope, sans-serif; letter-spacing: -.06em; }
.google i { font-style: normal; }
.google i:nth-child(1), .google i:nth-child(4) { color: #4285f4; }
.google i:nth-child(2), .google i:nth-child(6) { color: #ea4335; }
.google i:nth-child(3) { color: #fbbc05; }
.google i:nth-child(5) { color: #34a853; }
.google-score strong { display: block; font: 700 18px Manrope, sans-serif; }
.google-score strong i { margin-left: 7px; color: var(--gold); font-size: 14px; font-style: normal; letter-spacing: -1px; }
.google-score p { margin: 7px 0 18px; color: var(--muted); font-size: 10px; }
.google-score > a { color: var(--blue); font-size: 10px; font-weight: 800; }
.review-grid blockquote { display: flex; flex-direction: column; justify-content: space-between; }
.review-grid blockquote > p { margin: 0 0 22px; font: 500 12px/1.58 Manrope, sans-serif; }
.review-grid blockquote > p::before { content: "“"; color: var(--blue); font-size: 24px; line-height: 0; }
.review-grid blockquote footer { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; color: var(--navy); }
.avatar { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 50%; background: #e6c09b; color: #fff; font-size: 11px; font-weight: 800; }
.avatar-2 { background: #7799ba; }
.review-grid footer > span:nth-child(2) { display: flex; flex-direction: column; }
.review-grid footer b { font-size: 10px; }
.review-grid footer small { color: var(--muted); font-size: 9px; }
.review-stars { margin-top: 3px; color: var(--gold); font-size: 9px; font-style: normal; letter-spacing: 1px; }
.verified { margin-left: auto; padding: 3px 6px; border-radius: 999px; background: #edf6ff; color: var(--blue); font: 700 7px Manrope, sans-serif; letter-spacing: .04em; }

.final-cta { position: relative; z-index: 1; height: 344px; overflow: hidden; padding-top: 34px; color: #fff; }
.cta-photo { background-image: url("bangkok-night.webp"); background-position: center top; }
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,21,40,.96), rgba(4,31,57,.68) 54%, rgba(2,19,36,.16)); }
.cta-layout { position: relative; z-index: 3; display: grid; height: 100%; grid-template-columns: 1fr .58fr; align-items: center; }
.cta-layout::before { content: ""; position: absolute; top: 35px; left: -5%; width: 320px; height: 155px; border: 1px solid rgba(107,220,255,.18); border-radius: 50%; transform: rotate(-12deg); }
.final-cta h2 { margin: 0 0 12px; font-size: clamp(35px, 2.7vw, 43px); line-height: .98; letter-spacing: -.045em; }
.final-cta h2 em { color: #76dcff; font-style: normal; }
.final-cta p:not(.kicker) { max-width: 545px; margin-bottom: 0; color: #d1dfeb; font-size: 12px; }
.cta-actions { display: flex; gap: 10px; margin-top: 17px; }
.lead-open { border: 0; font: inherit; cursor: pointer; }
.round { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #fff; border-radius: 50%; background: rgba(255,255,255,.06); font-size: 7px; }
.line-button { display: inline-flex; min-height: 48px; align-items: center; gap: 9px; padding: 7px 17px 7px 8px; border: 1px solid rgba(255,255,255,.44); border-radius: 999px; background: rgba(2,27,50,.34); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; backdrop-filter: blur(6px); }
.line-button span { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.96); color: #315b78; }
.line-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cta-script { justify-self: end; margin-right: 62px !important; color: #fff !important; font-family: "Oooh Baby", cursive; font-size: 28px !important; line-height: 1.06 !important; transform: rotate(-7deg); }
.cta-float { bottom: 20px; }

.lead-dialog { width: min(680px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; padding: 0; border: 0; border-radius: 25px; background: transparent; color: var(--navy); box-shadow: 0 28px 90px rgba(0,25,54,.38); }
.lead-dialog::backdrop { background: rgba(2,17,34,.68); backdrop-filter: blur(8px); }
.lead-dialog-card { position: relative; padding: 32px; border: 1px solid rgba(183,218,242,.88); border-radius: 25px; background: linear-gradient(145deg,#fff 0%,#f4fbff 100%); }
.lead-close { position: absolute; top: 14px; right: 14px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #d8e8f4; border-radius: 50%; background: #fff; color: var(--navy); font-size: 25px; line-height: 1; cursor: pointer; }
.lead-close:hover { border-color: #9dcaf0; background: #eef8ff; }
.lead-mark { display: block; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 13px; }
.lead-dialog h2 { margin: 4px 0 7px; font-size: clamp(29px,4vw,40px); line-height: 1.08; letter-spacing: -.035em; }
.lead-intro { margin: 0 0 21px; color: var(--muted); font-size: 14px; }
.lead-form { display: grid; gap: 13px; }
.lead-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.lead-form label:not(.lead-consent) { display: grid; gap: 6px; color: #29455e; font-size: 12px; font-weight: 700; }
.lead-form input:not([type="checkbox"]), .lead-form select, .lead-form textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #cfe1ee; border-radius: 11px; outline: none; background: rgba(255,255,255,.92); color: var(--navy); font: 500 14px/1.4 Manrope,sans-serif; transition: border-color .2s, box-shadow .2s; }
.lead-form textarea { min-height: 105px; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15,116,230,.12); }
.lead-consent { display: flex; align-items: flex-start; gap: 9px; color: #38536b; font-size: 11px; line-height: 1.45; cursor: pointer; }
.lead-consent input { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; accent-color: var(--blue); }
.lead-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.lead-error, .lead-status { min-height: 0; margin: 0; font-size: 12px; line-height: 1.4; }
.lead-error { display: none; color: #b42318; }
.lead-error.show { display: block; }
.lead-status { color: #146c43; font-weight: 700; }
.lead-submit-row { display: flex; align-items: center; gap: 14px; }
.lead-submit-row .button { border: 0; cursor: pointer; }
.lead-submit-row .button:disabled { cursor: wait; opacity: .7; transform: none; }

body > footer { padding: 31px 0 16px; border-top: 1px solid rgba(255,255,255,.08); background: #03172b; color: #b8c9d6; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .6fr .6fr 1fr; gap: 34px; }
.footer-brand { width: 155px; height: 64px; min-width: 155px; overflow: hidden; background: url("logo-siam-empire-premium-white.png") left center / contain no-repeat; color: #fff; }
.footer-brand > * { visibility: hidden; }
.footer-grid > div { display: flex; flex-direction: column; gap: 5px; }
.footer-grid p, .footer-grid a, .footer-grid span { margin-bottom: 0; font-size: 10px; }
.footer-title { margin-bottom: 3px; color: #fff; font-size: 10px; }
.social-links { display: flex !important; flex-direction: row !important; gap: 7px !important; margin-top: 8px; }
.social-links a, .social-links > span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; transition: border-color .2s ease, background .2s ease; }
.social-links a:hover { border-color: var(--sky); background: rgba(112,217,255,.1); }
.social-links svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social-links a:nth-child(2) svg, .social-links > span:nth-child(2) svg { fill: currentColor; stroke: none; }
.footer-pending { color: #7890a2; cursor: default; }

body.th .hero h1 { font-size: clamp(46px, 3.8vw, 68px); line-height: 1.03; }
body.th .hero-lead { line-height: 1.65; }
body.th .hero-points b { line-height: 1.5; }
body.th .mini-panel li { line-height: 1.45; }
body.th .heading-row h2 { line-height: 1.2; }
body.th .kicker,
body.th .mini-panel > span,
body.th .mini-panel h2,
body.th .growth-note,
body.th .partners p,
body.th .impact-kicker,
body.th .location small,
body.th .location b,
body.th .location span,
body.th .google-score > span,
body.th .price-box > span,
body.th .price-box.featured small { font-family: "Noto Sans Thai", sans-serif; letter-spacing: .05em; }
.footer-contact a, .footer-contact span { display: inline-flex; align-items: center; gap: 6px; }
.footer-contact svg { width: 12px; height: 12px; fill: none; stroke: var(--sky); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.copyright { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 12px; border-top: 1px solid #203447; font-size: 8px; }
.copyright i { color: #ff5d68; font-style: normal; }

.reveal { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Pricing route */
.price-page { background: #edf8ff; }
.price-header { position: relative; background: #fff; }
.price-page .nav-links a:first-child { color: inherit; }
.price-page .nav-links a:first-child::after { display: none; }
.price-page .nav-links a:nth-child(4) { color: var(--blue); }
.pricing-route { min-height: calc(100vh - 130px); padding: 70px 0 88px; background: radial-gradient(circle at 80% 5%, rgba(103,218,255,.30), transparent 26%), #edf8ff; }
.pricing-route-head { max-width: 710px; margin: 0 auto 42px; text-align: center; }
.pricing-route-head h1 { font-size: clamp(44px, 4.4vw, 64px); }
.pricing-route-head p:last-child { color: var(--muted); font-size: 14px; }
.price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.price-box { position: relative; padding: 24px; border: 1px solid #dcebf5; border-radius: 15px; background: #fff; box-shadow: 0 7px 25px rgba(31,86,126,.08); }
.price-box > span { color: var(--blue); font: 800 9px Manrope, sans-serif; letter-spacing: .14em; }
.price-box h3 { margin: 8px 0; font-size: 29px; }
.price-box p { color: var(--muted); font-size: 12px; }
.price-box a { display: inline-block; margin-top: 9px; color: var(--blue); font-size: 10px; font-weight: 800; }
.price-box.featured { color: #fff; border-color: var(--navy); background: var(--navy); transform: translateY(-7px); }
.price-box.featured p { color: #c3d5e4; }
.price-box.featured small { position: absolute; top: 16px; right: 16px; padding: 4px 7px; border-radius: 99px; background: var(--gold); color: #293b4c; font: 800 7px Manrope, sans-serif; }
.pricing-small { margin: 30px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.price-page > footer { padding: 20px 0; }
.price-page .copyright { margin-top: 0; }

@media (min-width: 681px) {
  body { font-size: 17px; }
  .nav-links a { font-size: clamp(12px, .86vw, 14px); }
  .button { min-height: 48px; padding: 12px 23px; font-size: 14px; }
  .nav-cta { min-height: 44px; padding: 10px 20px; font-size: 12px; }
  .kicker { font-size: 11px; }
  .hero-lead { max-width: 660px; font-size: clamp(15px, 1vw, 17px); }
  .watch { font-size: 13px; }
  .hero-points { max-width: 640px; font-size: clamp(10px, .72vw, 12px); }
  .hero-points svg { width: 21px; height: 21px; flex-basis: 21px; }
  .mini-panel { width: 172px; padding: 25px 22px 23px; }
  .mini-panel > span { font-size: 10px; }
  .mini-panel h2 { font-size: 11px; }
  .mini-panel ul { font-size: 11px; }
  .growth-note { font-size: 13px; }
  .partners { padding-top: 28px; padding-bottom: 33px; }
  .partners p { font-size: 9px; }
  .section { padding-top: 68px; padding-bottom: 68px; }
  .services { padding-top: 88px; padding-bottom: 90px; }
  .heading-row { margin-bottom: 31px; }
  .heading-row h2 { font-size: clamp(34px, 2.55vw, 42px); }
  .heading-row > div:last-child > p, .heading-row > p { font-size: 14px; }
  .row-action a { font-size: 12px; }
  .service-card { padding: 9px 9px 23px; }
  .service-card h3 { margin-top: 23px; font-size: 17px; }
  .service-card p { min-height: 62px; font-size: 13px; }
  .service-card a { margin-top: 12px; font-size: 12px; }
  .impact-kicker { font-size: 9px; }
  .stats strong { font-size: 43px; }
  .stats span { font-size: 11px; }
  .impact-bottom p { font-size: 16px; }
  .location small { font-size: 8.5px; }
  .location b { font-size: 12.5px; }
  .location span { font-size: 7px; }
  .work { padding-top: 72px; padding-bottom: 70px; }
  .projects h3 { font-size: 15px; }
  .projects p, .portfolio-note { font-size: 11px; }
  .reviews .heading-row { margin-bottom: 36px; }
  .google-score > span { font-size: 8px; }
  .google-score p, .google-score > a { font-size: 11px; }
  .review-grid blockquote > p { font-size: 13px; }
  .review-grid footer b { font-size: 11px; }
  .review-grid footer small { font-size: 10px; }
  .review-stars { font-size: 10px; }
  .final-cta { height: 430px; }
  .final-cta h2 { font-size: clamp(41px, 3vw, 48px); }
  .final-cta p:not(.kicker) { font-size: 14px; }
  .line-button { min-height: 48px; font-size: 12px; }
  .cta-script { margin-right: 38px !important; font-size: 38px !important; }
  body > footer { padding-top: 38px; padding-bottom: 20px; }
  .footer-grid p, .footer-grid a, .footer-grid span, .footer-title { font-size: 11px; }
  .copyright { font-size: 9px; }
  .pricing-route-head p:last-child { font-size: 16px; }
  .price-box { padding: 28px; }
  .price-box > span { font-size: 10px; }
  .price-box p { font-size: 14px; }
  .price-box a { font-size: 12px; }
  .pricing-small { font-size: 14px; }
}

@media (max-width: 960px) {
  .nav-links { display: none; position: absolute; top: 60px; left: 20px; right: 20px; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); transform: none; }
  .nav-links.open { display: flex; }
  .nav-links a { min-height: 44px; padding: 12px; }
  .nav-links a:first-child::after { display: none; }
  .menu-button { display: block; margin-left: auto; }
  .nav-cta { display: none; }
  .hero-copy { width: 67%; }
  .mini-panel { left: auto; right: 10px; }
  .growth-note { display: none; }
  .service-cards { grid-template-columns: repeat(2, 1fr); }
  .projects article { flex-basis: calc((100% - 14px) / 2); }
  .heading-row { gap: 34px; }
  .footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .shell { width: min(100% - 28px, 1180px); }
  .site-header .shell, .hero .shell, .partners .shell { width: min(100% - 28px, 1180px); }
  .site-header, .nav { height: 64px; }
  .site-header { background: transparent; }
  .brand { min-width: 0; }
  .lang { display: none; }
  .hero { height: 735px; padding-top: 64px; background: #fff; }
  .hero-photo { inset: 345px 0 0; clip-path: none; background-position: 55% center; }
  .hero-photo::after {
    background:
      linear-gradient(0deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.58) 7%, rgba(255,255,255,.16) 16%, transparent 27%),
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,.88) 7%, rgba(255,255,255,.36) 25%, transparent 48%);
  }
  .hero-inner { align-items: flex-start; padding-top: 0; }
  .hero-copy { width: 100%; padding-top: 38px; }
  h1 { font-size: 43px; line-height: .98; }
  body.th .hero h1 { font-size: 38px; line-height: 1.08; }
  .hero-lead { max-width: 95%; font-size: 14px; }
  .hero-actions { gap: 7px; margin: 17px 0 13px; }
  .hero-actions .button { padding-inline: 14px; font-size: 12px; }
  .watch { gap: 6px; font-size: 11px; }
  .hero-points { max-width: 92%; grid-template-columns: repeat(2, 1fr); gap: 7px 13px; }
  .hero-points { font-size: 10px; }
  .signature-frame { width: 202px; min-height: 100px; margin: 3px 0 0 -2px; padding: 0 4px 13px; transform: rotate(-2.6deg); }
  .signature-line-first { font-size: 34px; line-height: 1.05; }
  .signature-line-second { margin: 2px 0 0 27px; font-size: 36px; line-height: 1.05; }
  .signature-swoosh { left: 61px; bottom: 2px; width: 132px; height: 14px; }
  .signature-swoosh path { stroke-width: 4; }
  .hero-handnote { display: none; }
  .mini-panel { top: auto; right: 13px; bottom: 23px; width: 164px; }
  .partners { overflow: hidden; }
  .partners p { text-align: left; }
  .logos { display: flex; width: auto; margin-right: -14px; padding-right: 14px; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .logos::-webkit-scrollbar { display: none; }
  .client-logo { flex: 0 0 148px; height: 56px; scroll-snap-align: start; }
  .client-logo img, .client-logo-wide img { max-width: 148px; height: 52px; }
  .client-logo-atmosphere img { max-width: 158px; height: 54px; }
  .section { padding: 49px 0; }
  .services { padding-top: 61px; padding-bottom: 56px; }
  .heading-row, .heading-row.compact { grid-template-columns: 1fr; gap: 14px; margin-bottom: 21px; }
  .heading-row h2 { font-size: 33px; }
  .service-cards, .review-grid, .price-row { grid-template-columns: 1fr; }
  .projects-viewport { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; scroll-padding-inline: 14px; }
  .projects article { flex-basis: 84%; }
  .project-photo { aspect-ratio: 1.34 / 1; }
  .micro-controls button { width: 44px; height: 44px; }
  .service-media img { aspect-ratio: 1.72 / 1; }
  .service-card p { min-height: 0; }
  .service-card h3 { font-size: 17px; }
  .service-card p { font-size: 13px; }
  .service-card a { font-size: 12px; }
  .impact { height: 438px; }
  .impact-curve-top { height: 54px; }
  .impact-curve-bottom { height: 57px; }
  .impact-tree { top: -12px; right: -2px; width: 126px; }
  .impact-inner { padding: 66px 0 58px; }
  .impact-kicker { font-size: 7px; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
  .stats strong { font-size: 34px; }
  .stats span { font-size: 9px; }
  .impact-bottom { align-items: flex-start; margin-top: 28px; }
  .impact-bottom p { max-width: 285px; }
  .impact-quote { width: 100%; }
  .script { margin: 4px 0 0 126px; font-size: 27px; }
  .impact-quote::after { left: 250px; top: 60px; width: 50px; }
  .location { display: none; }
  .reviews { margin-top: 0; margin-bottom: -24px; border-radius: 0 0 0 42px / 0 0 0 24px; padding-top: 49px; }
  .google-score, .review-grid blockquote { min-height: 160px; }
  .review-grid blockquote > p { font-size: 13px; }
  .projects h3 { font-size: 15px; }
  .projects p, .portfolio-note { font-size: 11px; }
  .final-cta { height: 409px; padding-top: 24px; }
  .cta-layout { grid-template-columns: 1fr; }
  .cta-layout::before { display: none; }
  .cta-script { display: none; }
  .final-cta h2 { font-size: 37px; }
  .final-cta p:not(.kicker) { font-size: 13px; }
  .cta-actions { flex-wrap: wrap; }
  .line-button { min-height: 44px; font-size: 11px; }
  .line-button span { width: 29px; height: 29px; flex-basis: 29px; }
  .lead-dialog-card { padding: 26px 20px 22px; }
  .lead-dialog h2 { padding-right: 36px; font-size: 31px; }
  .lead-form-grid { grid-template-columns: 1fr; gap: 11px; }
  .lead-submit-row { align-items: stretch; flex-direction: column; }
  .lead-submit-row .button { width: 100%; justify-content: center; }
  .cta-float { right: 14px; }
  .footer-grid { grid-template-columns: 1.2fr 1fr; gap: 24px 18px; }
  .footer-grid p, .footer-grid a, .footer-grid span, .footer-title { font-size: 11px; }
  .copyright { flex-direction: column; gap: 5px; }
  .pricing-route { padding: 55px 0 70px; }
  .pricing-route-head h1 { font-size: 44px; }
  .price-box.featured { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .projects-viewport { scroll-behavior: auto; }
}