[hidden] { display: none !important; }
.language-switch { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.language-switch a, .language-switch span { padding: 2px 8px; border-radius: 4px; }
.language-switch a { border: 1px solid #ffffff65; }
.language-switch span { background: #fff; color: #700013; font-weight: 700; }
.wordmark { color: #a80019; font-weight: 800; text-align: center; line-height: 1.05; letter-spacing: -.02em; font-size: clamp(16px, 2.1vw, 28px); }
.footer-brand .wordmark { background: #fff; padding: 10px; border-radius: 6px; flex-shrink: 0; font-size: 16px; }
.btn-line, .line-bg { background: #08743b; color: #fff; }
.hero-actions .btn-outline { border-radius: 7px; }
.phone-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.phone-list .btn-call { font-size: 17px; padding: 8px 13px; min-height: 42px; }
.line-number { font-size: 25px; font-weight: 700; user-select: all; }
#line { scroll-margin-top: 100px; }
#line .btn-line { margin-top: 10px; }
.copy-status:empty { display: none; }
.channel-copy { padding: 20px; overflow-wrap: anywhere; }
.coverage-brand { color: #a80019; }
.coverage-brand .icon { width: 34px; height: 34px; }
.contact-actions .btn-outline { border-radius: 7px; }
.experience-number small { white-space: nowrap; }
:lang(en) .brand-title small { font-family: Thai, Arial, sans-serif; }
@media (max-width: 700px) {
 .utility > .container { gap: 10px; justify-content: space-between; }
 .utility > .container > span { display: none; }
 .language-switch a, .language-switch span { padding-inline: 6px; }
 .hero-actions .btn { padding-inline: 13px; }
 .mobile-contact .btn { min-width: 0; padding-inline: 7px; }
 .mobile-contact .btn .icon { width: 14px; }
 .experience-number small { font-size: .3em; }
}

.hero-art {
 background: #800017;
}
.hero-art::before {
 content: '';
 position: absolute;
 inset: 0 0 0 36%;
 background: url('assets/project-site-32.webp') center 41% / cover no-repeat;
 filter: brightness(1.13) saturate(1.05);
}
.hero-art::after {
 background: linear-gradient(90deg, #58000d 0%, #720014 32%, #8d0017ea 41%, #90001773 57%, transparent 76%),
             linear-gradient(0deg, #7600115c, transparent 42%);
}
.banner-net {
 background: linear-gradient(90deg, #850013 10%, #a0001ac9 58%, #84001922),
             url('assets/project-site-37.webp') right 43% / cover no-repeat;
}
.coverage-backdrop {
 background: linear-gradient(90deg, #fff8f9f8 5%, #fff4f6e8 50%, #ffedf0ce),
             url('assets/project-site-26.webp') center 57% / cover no-repeat;
}
.coverage-brand .wordmark { font-size: clamp(10px, 1.25vw, 16px); }
.location strong { white-space: nowrap; }
.service-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-regions .region-tile { height: clamp(100px, 15vw, 190px); }
.service-card[id], #service-areas { scroll-margin-top: 105px; }
.service-card .service-body > p { margin-bottom: 12px; }
:lang(en) .hero-title { font-size: clamp(52px, 5.55vw, 83px); }
:lang(en) .experience-number small { font-size: clamp(17px, 2.3vw, 34px); }
@media (max-width: 700px) {
 .hero-art::before { inset: 0; background-position: 61% center; }
 .hero-art::after { background: linear-gradient(90deg, #610010ed, #82001bc9 38%, #98001936 100%), linear-gradient(0deg,#820015d0,transparent 60%); }
 :lang(en) .hero-title { font-size: clamp(49px, 10.5vw, 72px); }
 .service-regions { gap: 7px; }
 .service-regions .region-tile > span { left: 4px; bottom: 5px; font-size: 9px; gap: 2px; padding: 4px; }
 .service-regions .region-tile .icon { width: 11px; height: 11px; }
}
.experience-number small { letter-spacing: 0; }
@media (max-width: 420px) {
 .nav-wrap { gap: 10px; }
 .nav-wrap .brand { width: 116px; padding-right: 9px; }
 .brand-title { margin-left: 11px; }
 .experience-message { overflow-wrap: normal; }
}

.nav-wrap .brand-logo { width: min(184px, 100%); height: auto; }
.coverage-brand .brand-logo { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 700px) {
 .nav-wrap .brand-logo { width: min(128px, 100%); }
}

/* Keep the uploaded photographs intact and improve legibility in the gallery. */
.work-shot img, .lightbox figure img {
 filter: brightness(1.04) saturate(1.04);
}
.work-shot img:is([src$="project-site-16.webp"], [src$="project-site-20.webp"], [src$="project-site-39.webp"], [src$="project-site-44.webp"]),
.lightbox figure img:is([src$="project-site-16.webp"], [src$="project-site-20.webp"], [src$="project-site-39.webp"], [src$="project-site-44.webp"]) {
 filter: brightness(1.12) saturate(1.04);
}
.work-shot[data-category="buildings"] img { object-position: center 40%; }
.work-shot[data-category="roads"] img { object-position: center 58%; }

/* Keep the wedge inside its own space at every header breakpoint. */
.nav-wrap .brand { --brand-slant: 24px; }
.nav-wrap .brand::before {
 right: calc(-1 * var(--brand-slant));
 transform: none;
 clip-path: polygon(0 0, calc(100% - var(--brand-slant)) 0, 100% 100%, 0 100%);
}
@media (max-width: 700px) {
 .nav-wrap .brand { --brand-slant: 14px; }
}