@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
/* InfraOne corporate refresh: light surfaces and restrained orange accents. */
:root { --f-display: "Inter", "Noto Sans Thai", system-ui, sans-serif; --f-body: "Inter", "Noto Sans Thai", system-ui, sans-serif; --r-sm: 5px; --r-md: 6px; --r-lg: 8px; --r-xl: 8px; --focus: #A74408; }
html[lang="th"] { --f-display: "Noto Sans Thai", "Inter", Tahoma, sans-serif; --f-body: "Noto Sans Thai", "Inter", Tahoma, sans-serif; }
html[data-theme="light"] { --bg: #FFFFFF; --bg-raised: #F7F6F3; --surface: #F7F6F3; --surface-2: #EEECE8; --glass: #FFFFFF; --text-1: #08090C; --text-2: #52565C; --text-3: #5D6064; --border: #E4E2DD; --border-mid: #D3D1CC; --border-strong: #AAA8A3; --sunrise: #A74408; --accent: #A74408; --glow-dim: #FFF2E5; }
body::after, .aurora, .hero-canvas, .eyebrow::before, .card::before, .cta-band::before { display: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.site-header { padding: 0 24px; background: var(--bg); border-bottom: 1px solid var(--border); }
.nav-float, .site-header.scrolled .nav-float { margin-top: 0; padding: 12px 0; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); backdrop-filter: none; }
.brand-img, .footer-brand .brand-img { filter: drop-shadow(0 0 12px rgba(255,122,26,.55)); border-radius: 5px; }
.brand:hover .brand-img { filter: drop-shadow(0 0 20px rgba(255,122,26,.8)); }
.brand-img { height: 72px; width: auto; }
.brand-text { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: normal; }
.brand-sub { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 1.8px; margin-top: 5px; }
.footer-brand .brand-img { height: 56px; }
.footer-brand .brand-text { font-size: 24px; }
.nav-links { gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 46px; font-family: var(--f-body); font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: 0; padding: 10px 12px; color: var(--text-1); }
.nav-links a[aria-current="page"], .nav-links a[aria-current="true"] { box-shadow: inset 0 -3px 0 #FF9933; }
.mobile-drawer { overflow-y: auto; }
.mobile-drawer ul a { font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--text-1); }
.nav-toggle { min-width: 44px; min-height: 44px; }
@media (min-width: 1221px) { .nav-float { max-width: 1560px; flex-wrap: wrap; gap: 16px; } .primary-nav { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } }
@media (min-width: 1221px) and (max-width: 1439px) { .nav-float { justify-content: center; } .primary-nav { width: 100%; justify-content: center; margin-left: 0; } }
.primary-nav { gap: 12px; }
.theme-toggle, .lang-toggle { min-height: 40px; min-width: 40px; border-radius: 5px; color: var(--text-1); }
.btn, .mobile-drawer a, .label, .eyebrow, label, .card-link, .tag, .site-footer h4, .footer-bottom { font-family: var(--f-body); text-transform: none; letter-spacing: 0; }
.btn { border-radius: 5px; font-size: 14px; font-weight: 600; white-space: normal; text-align: center; line-height: 1.45; }
.btn-primary, .btn-primary:hover { background: #FF9933; color: #08090C; box-shadow: none; }
.btn-primary:hover { background: #FFAB57; filter: none; }
.btn-secondary { background: transparent; box-shadow: none; }
.btn-secondary:hover { color: var(--text-1); }
.copy-refresh .hero { padding: 64px 0; min-height: auto; background: var(--bg-raised); border-bottom: 1px solid var(--border); }
.copy-refresh .hero-inner { max-width: var(--max-w); display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 64px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.copy-refresh .hero h1 { font-size: clamp(2.6rem,4.2vw,3.8rem); line-height: 1.08; letter-spacing: -.045em; margin: 0; }
.grad-text { background: none; -webkit-text-fill-color: currentColor; color: var(--sunrise); }
.copy-refresh .hero-sub { font-size: 17px; line-height: 1.8; max-width: 64ch; }
.eyebrow, .section-head .label { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--sunrise); font-weight: 600; padding: 0; border: 0; background: none; line-height: 1.6; }
.section-head .label::before { background: #FF9933; box-shadow: none; }
.hero-proof { margin-top: 0; gap: 12px; align-items: center; }
.hero-proof .badge { border-radius: 4px; background: var(--bg); color: var(--text-1); border-color: var(--border-mid); font-family: var(--f-body); letter-spacing: 0; text-transform: none; }
.hero-cta { gap: 10px; }
.asus-feature { background: var(--bg); border: 1px solid var(--border-mid); border-top: 4px solid #FF9933; border-radius: 6px; overflow: hidden; align-self: stretch; display: flex; flex-direction: column; }
.asus-feature-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px 0; font-size: 13px; color: var(--text-2); }
.asus-feature-top img { width: 98px; height: 70px; object-fit: contain; background: white; border-radius: 3px; }
.asus-product { width: 100%; height: 244px; object-fit: cover; padding: 12px 60px; background: #FFFFFF; }
.asus-feature-copy { padding: 20px 26px 26px; border-top: 1px solid var(--border); }
.copy-refresh .asus-feature h2 { font-size: 30px; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 12px; }
.asus-feature p { color: var(--text-2); font-size: 15px; line-height: 1.75; margin: 0 0 20px; }
.asus-feature .btn { width: 100%; }
.copy-refresh .section { padding-top: 72px; padding-bottom: 72px; }
.copy-refresh .section + .section { border-top: 1px solid var(--border); }
.copy-refresh .section-head { max-width: 850px; margin-bottom: 32px; }
.copy-refresh h2 { font-size: clamp(1.8rem,3.1vw,2.7rem); line-height: 1.18; letter-spacing: -.035em; }
.copy-refresh .section-head .lead { font-size: 17px; line-height: 1.8; max-width: 76ch; }
.copy-refresh .card { padding: 28px; border: 1px solid var(--border); box-shadow: none; background: var(--bg); border-radius: 6px; }
.copy-refresh .card:hover { transform: none; border-color: var(--border-strong); box-shadow: none; }
.copy-refresh .card h3 { font-size: 20px; letter-spacing: -.02em; }
.copy-refresh .card p { font-size: 16px; line-height: 1.8; }
.case-result { background: var(--bg-raised); border-radius: 6px; border: 0; border-left: 4px solid #FF9933; }
.case-metric { letter-spacing: -.065em; }
.case-note { color: var(--text-2); font-size: 14px; line-height: 1.7; }
.breadcrumbs { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 28px; color: var(--text-2); font-size: 14px; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs + .page-hero { padding-top: 28px; }
.service-intro-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 40px; }
.service-entries { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 32px; border-top: 1px solid var(--border-mid); }
.service-entry { display: flex; align-items: flex-start; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--border-mid); }
.service-entry > div { flex: 1; } .service-entry > span:last-child { color: var(--sunrise); font-size: 22px; }
.service-number { color: var(--sunrise); font-size: 14px; padding-top: 4px; }
.copy-refresh .service-entry h3 { font-size: 19px; line-height: 1.4; margin-bottom: 8px; }
.service-entry p { color: var(--text-2); font-size: 15px; }
.service-entry:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.nav-links a[aria-current="true"] { color: var(--sunrise); background: var(--glow-dim); }
.card-link { color: var(--sunrise); font-size: 15px; text-decoration: underline; text-underline-offset: 5px; }
.copy-refresh .page-hero { padding-top: 64px; padding-bottom: 40px; }
.copy-refresh .page-hero h1 { font-size: clamp(2.4rem,4.4vw,3.7rem); line-height: 1.13; letter-spacing: -.04em; max-width: 1040px; }
.copy-refresh .quick-nav-glass { border-radius: 6px; background: var(--bg-raised); box-shadow: none; }
.quick-nav-glass a { font-family: var(--f-body); font-size: 14px; }
.copy-refresh .cta-band { background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: 6px; box-shadow: none; padding: 48px; }
.cta-band .lead { margin: 20px auto 24px; max-width: 65ch; }
.site-footer { background: var(--bg-raised); }
.site-footer h4 { font-size: 14px; color: var(--text-1); }
.site-footer p, .site-footer a, .footer-bottom { font-size: 14px; }
label { font-size: 14px; color: var(--text-1); }
input, textarea { background: var(--bg); color: var(--text-1); font-family: var(--f-body); border-color: var(--border-mid); border-radius: 5px; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
html[lang="th"] .copy-refresh .hero h1 { line-height: 1.35; letter-spacing: -.03em; }
html[lang="th"] .asus-feature h2 { font-size: 25px; }
@media (max-width: 1220px) { .copy-refresh .hero-inner { gap: 36px; } }
@media (max-width: 900px) { .copy-refresh .hero-inner { grid-template-columns: 1fr; gap: 40px; } .copy-refresh .hero h1 { font-size: clamp(2.6rem,7vw,3.8rem); } .asus-feature { max-width: 650px; width: 100%; } }
@media (max-width: 600px) {
  .service-entries { grid-template-columns: 1fr; } .service-intro-cta { gap: 18px; }
  .site-header { padding: 0 20px; } .nav-float { padding: 12px 0; } .brand-img { height: 56px; } .brand-text { font-size: 22px; }
  .primary-nav { gap: 8px; } .primary-nav .lang-toggle { display: inline-flex; padding: 5px; } .theme-toggle { min-width: 34px; width: 34px; } .brand-sub { font-size: 8px; }
  .copy-refresh .hero { padding: 40px 0; } .copy-refresh .hero-inner { gap: 32px; } .hero-copy { gap: 20px; }
  .copy-refresh .hero h1 { font-size: 2.65rem; } .copy-refresh .hero-sub { font-size: 16px; } .hero-proof { align-items: flex-start; gap: 8px; }
  .hero-cta { flex-direction: column; align-self: stretch; } .hero-cta .btn { width: 100%; }
  .asus-feature-top { padding: 16px 20px 0; } .asus-product { height: 180px; padding: 8px 24px; } .asus-feature-copy { padding: 20px; }
  .copy-refresh .section { padding-top: 48px; padding-bottom: 48px; } .copy-refresh .card { padding: 24px; }
  .copy-refresh .cta-band { padding: 28px 22px; } .copy-refresh .page-hero { padding-top: 40px; }
  .mobile-drawer { overflow-y: auto; } .mobile-drawer a { padding: 12px 8px; } .mobile-drawer .drawer-top { margin-bottom: 20px; }
}

/* Brand colour and location imagery requested in the visual review. */
#identity .card { overflow: hidden; }
#identity .card::before { content: ""; display: block; position: static; height: 126px; width: auto; margin: -28px -28px 26px; border-radius: 0; opacity: 1; transform: none; }
#identity .card:nth-child(1)::before { background: #FF9933; }
#identity .card:nth-child(2)::before { background: #D94A0E; }
#identity .card:nth-child(3)::before { background: linear-gradient(110deg,#FF9933,#D94A0E); }
.bangkok-view { margin: 32px 0; border-radius: 6px; overflow: hidden; background: var(--bg-raised); }
.bangkok-view img { display: block; width: 100%; height: clamp(240px,30vw,380px); object-fit: cover; object-position: 50% 43%; }
.bangkok-view figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; color: var(--text-2); font-size: 12px; }
.bangkok-view figcaption a { color: inherit; text-decoration: underline; }
.partner-heading { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: center; gap: 48px; margin-bottom: 32px; }
.partner-heading .section-head { margin-bottom: 0; }
.partner-logo { width: 100%; max-width: 300px; height: auto; object-fit: contain; background: #fff; border-radius: 6px; padding: 12px; }
.asus-feature-top { justify-content: center; flex-direction: column; gap: 12px; padding-top: 26px; }
.asus-feature-top img { width: min(280px,100%); height: auto; border-radius: 0; }
@media(max-width:800px) { .partner-heading { grid-template-columns: 1fr; gap: 24px; } .partner-logo { max-width: 280px; } }
@media(max-width:600px) { #identity .card::before { margin: -24px -24px 24px; height: 112px; } .asus-feature-top img { width: min(250px,100%); } }


/* Result first, company credit second. The numbers carry the visual emphasis. */
.milestone-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding-block:32px; }
.milestone-pair > .proof-card.section.container { width:100%; max-width:none; padding:32px; margin:0; background:var(--bg-raised); border:1px solid var(--border-mid); border-top:4px solid #FF9933; border-radius:8px; }
.milestone-pair > .proof-card + .proof-card { border-top-color:#D94A0E; }
.proof-card .case-metric { display:block; font-size:clamp(4.5rem,8vw,7rem); color:var(--sunrise); }
.proof-card h2 { font-size:clamp(1.25rem,2.2vw,1.65rem); margin:16px 0 10px; max-width:30ch; }
.proof-card .proof-credit { font-size:14px; color:var(--text-2); margin:0; }
@media(max-width:760px) { .milestone-pair { grid-template-columns:1fr; gap:16px; } .milestone-pair > .proof-card.section.container { padding:24px; } }

/* Homepage: ASUS partner feature at arrival, followed by service scope and project evidence. */
.home-positioning .hero { padding-block: 48px; }
.home-positioning .hero-inner { display: grid; width: 100%; }
.home-positioning .hero-copy { max-width: 880px; gap: 20px; }
.home-positioning .hero h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.home-positioning .hero-sub { max-width: 74ch; }
.home-positioning .home-services { padding-block: 48px 32px; }
.home-positioning .home-services .section-head { max-width: 960px; margin-bottom: 28px; }
.home-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.home-service-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 24px 22px; border: 1px solid var(--border-mid); border-radius: 6px; background: var(--bg); }
.home-service-icon { width: 28px; height: 28px; margin-bottom: 20px; color: var(--sunrise); flex: none; }
.home-positioning .home-service-card h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.02em; margin: 0 0 14px; }
.home-service-card p { font-size: 15px; line-height: 1.75; color: var(--text-2); margin: 0 0 22px; }
.home-service-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: auto; }
.home-service-links a, .home-experience-head > a { color: var(--sunrise); font-size: 14px; font-weight: 600; line-height: 1.55; text-decoration: underline; text-underline-offset: 4px; }
.home-service-links a { padding-block: 6px; }
.home-positioning .home-experience { padding-block: 28px 32px; border-top: 0; }
.home-experience-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 18px; }
.home-positioning .home-experience h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.35; margin: 0; }
.home-experience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-story-card { min-width: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-raised); padding: 20px 24px; }
.home-positioning .home-story-card h3 { font-size: 19px; line-height: 1.45; margin: 0 0 8px; letter-spacing: -.015em; }
.home-story-card h3 a { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.home-story-card p { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0; }
.home-positioning .home-campaign { display: grid; grid-template-columns: 160px minmax(0, 1fr) 150px; align-items: center; gap: 28px; padding: 28px; margin-block: 0 32px; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: 6px; }
.home-campaign-product { width: 160px; height: 130px; object-fit: contain; background: white; border-radius: 4px; }
.home-campaign-partner { width: 150px; height: auto; object-fit: contain; background: white; border-radius: 4px; }
.home-campaign-copy { min-width: 0; }
.home-positioning .home-campaign h2 { font-size: 25px; line-height: 1.35; margin: 0 0 10px; }
.home-campaign-copy p { font-size: 15px; line-height: 1.7; color: var(--text-2); margin: 0 0 14px; max-width: 68ch; }
.home-campaign-copy .home-campaign-label { font-size: 13px; font-weight: 600; color: var(--sunrise); margin-bottom: 8px; }
.home-campaign .btn { min-height: 44px; }
.home-campaign-note { display: inline-block; font-size: 12px; color: var(--text-2); margin: 8px 0 0 12px; }
@media (max-width: 1100px) { .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .home-positioning .home-campaign { grid-template-columns: 130px minmax(0, 1fr); gap: 20px; } .home-campaign-product { width: 130px; grid-row: 1; } .home-campaign-partner { width: 130px; grid-column: 1; grid-row: 2; } .home-campaign-copy { grid-column: 2; grid-row: 1 / 3; } .home-campaign-note { display: block; margin-left: 0; } }
@media (max-width: 639px) {
  .home-positioning .hero { padding-block: 36px; }
  .home-positioning .hero-copy { gap: 18px; }
  .home-positioning .home-services { padding-block: 36px 24px; }
  .home-services-grid, .home-experience-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-service-card { padding: 22px; }
  .home-service-icon { margin-bottom: 16px; }
  .home-service-card p { font-size: 16px; }
  .home-service-links { gap: 4px 16px; }
  .home-service-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .home-positioning .home-experience { padding-block: 20px 28px; }
  .home-positioning .home-campaign { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 22px; }
  .home-campaign-product { width: 100%; max-width: 150px; height: 110px; grid-column: 1; grid-row: 1; }
  .home-campaign-partner { width: 100%; max-width: 135px; grid-column: 2; grid-row: 1; }
  .home-campaign-copy { grid-column: 1 / -1; grid-row: 2; }
}

/* Match the embedded lead form to the website in both colour modes. */
form.form-grid[data-b2blead-form] { background: transparent; padding: 0; color: var(--text-1); font-family: var(--f-body); border-radius: 0; }
form.form-grid[data-b2blead-form] label { color: var(--text-1); }
form.form-grid[data-b2blead-form] .b2b-feedback,
form.form-grid[data-b2blead-form] .b2b-thanks { color: var(--text-2); }
form.form-grid[data-b2blead-form] .b2b-feedback:empty { display: none; }
form.form-grid[data-b2blead-form] button:disabled { opacity: .6; cursor: wait; }

/* Customer outcomes and long-term delivery records. */
.delivery-records { margin-top:28px; padding-top:24px; border-top:1px solid var(--border-mid); max-width:85ch; }
.copy-refresh .delivery-records h3 { font-size:20px; line-height:1.4; margin:0 0 10px; }
.delivery-records p { color:var(--text-2); font-size:16px; line-height:1.8; margin:0; }
.experience-credit { color:var(--text-2); font-size:14px; line-height:1.7; margin:20px 0 0; }