/* IRON CONSTRUCTION V3 — readable, confident typography.
   Load AFTER site.css and industrial-upgrade.css so every route and breakpoint benefits.
   Display faces remain distinctive; actual reading text stays wide and comfortable. */
:root {
  --ink: #172b48;
  --muted: #526780;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: "IBM Plex Sans Thai", "Manrope", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: auto;
}
p,li,dd,dt,small { overflow-wrap: anywhere; }
p { line-height: 1.85; }
/* Strong typography only for display and brand, never for reading paragraphs. */
.hero-panel h1, .intro-copy h2, .section-title, .cta-inner h2,
.page-hero h1, .service-card h2, .service-card h3, .contact-details h2,
.info-sheet h3, .empty-copy h3, .project-card h3, .empty-list h2 {
  letter-spacing: -.012em;
}
html[lang="th"] .section-kicker, html[lang="th"] .trust-head,
html[lang="th"] .eyebrow, html[lang="th"] .trust-fact strong {
  font-family: "IBM Plex Sans Thai", "Manrope", sans-serif;
  letter-spacing: .025em;
}
/* Main navigation: comfortable to scan at desktop widths. */
.topline { font-size: 13px; line-height: 1.55; letter-spacing: 0; }
.topflex { min-height: 42px; }
.brand-label strong { font-size: 22px; line-height: 1.08; }
.brand-label small { font-size: 10px; letter-spacing: .12em; line-height: 1.25; }
.desktop-nav { gap: 20px; }
.desktop-nav a { font-size: 15px; line-height: 1.45; letter-spacing: 0; }
.languages { font-size: 14px; }
.nav-cta { font-size: 15px; min-height: 52px; gap: 12px; padding: 13px 16px; }
.mobile-nav a { font-size: 17px; line-height: 1.7; padding: 14px 0; }
/* Above-the-fold reading experience. */
.hero-panel .eyebrow { font-size: 15px; letter-spacing: .07em; line-height: 1.45; }
.hero-stamp { font-size: clamp(19px, 2.25vw, 29px); }
.hero-panel h1 {
  font-size: clamp(49px, 5.0vw, 76px);
  line-height: 1.22;
  font-weight: 700;
  margin: 18px 0 24px;
}
html[lang="en"] .hero-panel h1 { letter-spacing: .012em; line-height: 1.06; }
.hero-panel .hero-content>p {
  font-size: 19px;
  line-height: 1.82;
  font-weight: 500;
  max-width: 605px;
  color: #f0f8ff;
  margin-bottom: 30px;
}
.btn, .hero-panel .btn { font-size: 16px; min-height: 56px; padding: 12px 24px; gap: 14px; line-height: 1.45; }
.hero-image-disclaimer { font-size: 12px; line-height: 1.5; }
.hero-count { font-size: 19px; }
.hero-count b { font-size: 28px; }
/* Trust content must be readable rather than tiny fine print. */
.trust-grid { gap: 18px; min-height: 132px; }
.trust-head { font-size: 16px; letter-spacing: .035em; line-height: 1.45; }
.trust-fact>span { font-size: 14px; line-height: 1.5; color: #526b87; }
.trust-fact strong { font-size: 22px; line-height: 1.35; }
.trust-fact strong span { font-size: 16px; color: #526c8a; }
.trust-source { font-size: 14px; line-height: 1.6; }
/* Sections and projects. */
.section-kicker { font-size: 15px; line-height: 1.5; letter-spacing: .035em; }
.small-accent { font-size: 14px; line-height: 1.5; }
.intro-copy h2, .section-title { font-size: clamp(39px, 4vw, 58px); line-height: 1.33; }
.intro-copy p, .about-body p, .about-body .lead, .policy-content p {
  font-size: 18px;
  line-height: 1.95;
  color: #4b607c;
}
.text-link { font-size: 16px; line-height: 1.6; }
.intro-badge small { font-size: 13px; letter-spacing: .025em; line-height: 1.55; }
.outline-btn { font-size: 15px; padding: 15px 22px; line-height: 1.5; }
.service-card { padding: 30px; }
.service-num { font-size: 14px; }
.service-card h2, .service-card h3 { font-size: 24px; line-height: 1.42; }
.service-card p { font-size: 17px; line-height: 1.86; color: #4c6079; }
.scope-note { font-size: 14px; line-height: 1.75; color: #576c85; }
.portfolio-head p { font-size: 16px; line-height: 1.75; color: #536d87; }
.project-meta { font-size: 14px; letter-spacing: .025em; line-height: 1.55; }
.portfolio-swiper .project-card h3, .project-card h3 { font-size: 23px; line-height: 1.4; }
.portfolio-swiper .project-card p, .project-card p { font-size: 16px; line-height: 1.72; color: #506781; }
.empty-copy h3 { font-size: 30px; line-height: 1.4; }
.empty-copy p, .empty-list p { font-size: 17px; line-height: 1.86; color: #556b84; }
.empty-art>span { font-size: 13px; }
.empty-list h2 { font-size: 30px; line-height: 1.45; }
.cta-inner h2 { font-size: clamp(40px, 4.3vw, 64px); line-height: 1.25; }
.cta-inner>p { font-size: 18px; line-height: 1.9; color: #eaf3ff; }
/* Inner-page headings and company info. */
.page-hero h1 { line-height: 1.19; }
.page-hero p { font-size: 19px; line-height: 1.85; color: #f0f5ff; }
.project-heading .back-link { font-size: 16px; }
.info-sheet h3 { font-size: 25px; }
.info-sheet dt { font-size: 15px; color: #536983; line-height: 1.6; }
.info-sheet dd { font-size: 17px; line-height: 1.75; }
.info-sheet .source-note { font-size: 14px; line-height: 1.75; color: #586e87; }
.muted-label { font-size: 14px; }
.detail-copy h3 { font-size: 21px; line-height: 1.6; }
.detail-copy p { font-size: 18px; line-height: 1.85; }
.policy-content h2 { font-size: 29px; line-height: 1.45; }
/* Contact must be readable; min 16px inputs prevent Safari zoom. */
.contact-details h2 { font-size: 41px; line-height: 1.28; }
.contact-details>p { font-size: 18px; line-height: 1.85; color: #516782; max-width: 450px; }
.contact-item small { font-size: 14px; letter-spacing: .03em; color: #536d88; line-height: 1.6; }
.contact-item strong,.contact-main { font-size: 17px; line-height: 1.75; }
.contact-item a:not(.contact-main) { font-size: 15px; line-height: 1.6; }
.social-links a { font-size: 15px; line-height: 1.5; }
.form-heading { font-size: 17px; line-height: 1.5; }
.contact-form label { font-size: 16px; line-height: 1.65; }
.contact-form input, .contact-form textarea, .contact-form select {
  font-size: 17px; line-height: 1.6; min-height: 54px; color: #1c334e;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #64778f; opacity: 1; }
.contact-form .privacy-note { font-size: 14px; line-height: 1.7; color: #51677e; }
.privacy-link { font-size: 14px; line-height: 1.5; }
.form-success,.form-error { font-size: 16px; line-height: 1.7; }
/* Footer copy is still copy, not decorative metadata. */
.footer-brand { font-size: 28px; }
.footer-brand i { font-size: 12px; }
.footer-top p { font-size: 16px; line-height: 1.8; color: #c0d1e5; }
.footer-links strong { font-size: 14px; line-height: 1.6; letter-spacing: .03em; }
.footer-links a, .footer-links span { font-size: 15px; line-height: 1.8; color: #d0dded; }
.footer-bottom { font-size: 13px; line-height: 1.75; color: #a9c0da; }
/* Keyboard accessibility and normal underline on links with no obvious affordance. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: 3px solid #59a9ff; outline-offset: 3px; }
/* More space at medium widths and switch to hamburger sooner with larger nav. */
@media (max-width: 1180px) {
  .desktop-nav, .nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .header { height: 78px; }
  .mobile-nav { display: none; position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; padding: 14px max(26px, calc((100vw - var(--max))/2));
    box-shadow: 0 20px 30px #052a6515; }
  .mobile-nav.open { display: flex; flex-direction: column; }
}
@media (max-width: 930px) {
  .hero-panel .hero-content>p { font-size: 18px; }
  .hero-panel h1 { font-size: clamp(44px, 5vw, 58px); }
  .trust-grid { min-height: 0; }
}
@media (max-width: 700px) {
  body { font-size: 17px; line-height: 1.75; }
  .topline { font-size: 12px; }
  .topflex { min-height: 40px; }
  .brand-label strong { font-size: 19px; }
  .brand-label small { font-size: 9px; letter-spacing: .09em; }
  .languages { font-size: 15px; }
  .menu-toggle { width: 42px; height: 42px; }
  .mobile-nav { padding: 14px 22px 24px; }
  .mobile-nav a { font-size: 17px; }
  .hero-swiper { height: 770px; }
  .hero-panel-layout { padding-top: 55px; padding-bottom: 40px; }
  .hero-panel .eyebrow { font-size: 13px; letter-spacing: .02em; margin-bottom: 16px; }
  .hero-stamp { font-size: 20px; }
  .hero-panel h1 { font-size: clamp(39px, 8.4vw, 52px); line-height: 1.25; margin: 16px 0 19px; }
  html[lang="en"] .hero-panel h1 { font-size: clamp(48px, 11vw, 72px); line-height: 1.06; }
  .hero-panel .hero-content>p { font-size: 17px; line-height: 1.75; margin-bottom: 21px; }
  .hero-panel .btn { font-size: 15px; min-height: 52px; padding: 10px 19px; }
  .hero-panel-art { opacity: .33; }
  .hero-image-disclaimer { font-size: 11px; line-height: 1.4; max-width: 95%; }
  .hero-control-wrap { height: 66px; }
  .hero-count { font-size: 16px; }
  .hero-count b { font-size: 23px; }
  .hero-nav button { width: 42px; height: 43px; }
  .trust-grid { gap: 22px; }
  .trust-head { font-size: 16px; }
  .trust-fact { padding-left: 14px; }
  .trust-fact>span { font-size: 13px; }
  .trust-fact strong { font-size: 19px; line-height: 1.45; }
  .trust-fact strong span { font-size: 14px; }
  .trust-source { font-size: 15px; }
  .section { padding: 80px 0; }
  .section-kicker { font-size: 14px; }
  .intro-copy h2,.section-title { font-size: clamp(34px, 8vw, 45px); line-height: 1.35; }
  .intro-copy p, .about-body p, .about-body .lead, .policy-content p { font-size: 17px; line-height: 1.88; }
  .text-link { font-size: 16px; }
  .service-card { padding: 27px 24px; min-height: 0; }
  .service-card h2,.service-card h3 { font-size: 23px; }
  .service-card p { font-size: 17px; }
  .scope-note { font-size: 14px; }
  .portfolio-head p { font-size: 15px; max-width: none; }
  .portfolio-swiper .project-card h3,.project-card h3 { font-size: 22px; }
  .portfolio-swiper .project-card p,.project-card p { font-size: 16px; }
  .page-hero h1 { font-size: clamp(39px, 10vw, 55px); }
  .page-hero p { font-size: 17px; }
  .contact-details h2 { font-size: 35px; }
  .contact-details>p { font-size: 17px; }
  .contact-form-wrap { padding: 26px 22px; }
  .footer-top p { font-size: 16px; }
  .footer-links a,.footer-links span { font-size: 15px; }
  .footer-bottom { font-size: 13px; }
}
@media (max-width: 430px) {
  .brand { gap: 8px; }
  .brand-icon { width: 36px; height: 36px; border-radius: 9px; }
  .brand-icon svg { width: 24px; height: 24px; }
  .brand-label strong { font-size: 17px; }
  .brand-label small { font-size: 8px; }
  .nav-actions { gap: 9px; }
  .languages { font-size: 14px; gap: 5px; }
  .hero-swiper { height: 800px; }
  .hero-panel h1 { font-size: clamp(38px, 8.5vw, 44px); }
  html[lang="en"] .hero-panel h1 { font-size: 50px; }
  .hero-panel .hero-content>p { font-size: 17px; }
  .hero-panel .hero-buttons { gap: 10px; }
  .hero-panel .btn { font-size: 15px; padding: 10px 16px; }
  .trust-fact strong { font-size: 18px; }
}
@media (max-width: 355px) {
  .hero-panel .hero-buttons { flex-direction: column; align-items: start; }
  .hero-swiper { height: 835px; }
  .brand-label strong { font-size: 16px; }
  .brand-label small { font-size: 7px; }
}