@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Sinhala:wght@400;500;600;700&display=swap');
.language-switcher{position:relative;flex-shrink:0;color:var(--ink)}
.language-toggle{display:flex;align-items:center;gap:7px;min-height:46px;padding:9px 10px;border:1px solid var(--line);background:#fff;color:inherit;font-size:14px;white-space:nowrap}
.language-toggle[aria-expanded=true]{border-color:#168e8c}
.language-code{display:none}
.language-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:100;min-width:245px;padding:12px;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 35px #051b2c26;max-height:70vh;overflow:auto}
.language-menu[hidden]{display:none}
.language-menu>p{font-size:12px;color:var(--muted);padding:6px 10px 12px;font-weight:500}
.language-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:18px;text-align:start;background:#fff;border:0;border-radius:0;padding:11px 10px;color:var(--ink);font-size:15px;line-height:1.5;min-height:46px}
.language-menu button:hover,.language-menu button:focus-visible{background:var(--pale)}
.language-menu button[aria-checked=true]{background:#e5f7f6;color:#076a68;font-weight:700}
.language-name{font-size:11px;color:var(--muted);font-weight:400}
.screen-reader-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav{gap:23px}.navlinks{gap:23px}
@media(min-width:801px){
 body{font-size:18px}
 .hero p,.section-head p,.solution-content p,.about-content p,.detail-content p,.contact-info p,.page-hero p,.editorial-grid p,.application-card p,.recommended>div>p,.global-section p,.calculator-layout>div>p,.planning-banner p,.article p,.article li,.product-card p,.products-page .product-card p,.guide p,.journey p,.download-grid p,.faq p,.setting-list li{font-size:17px;line-height:1.8}
 .navlinks a{font-size:15px}.nav>.button{font-size:15px}.button,.text-link,.product-card .text-link,.filter,.solution-tabs button{font-size:16px}
 .spec-row,.checklist li,.callout,.notice{font-size:16px}.footer p,.footer ul,.footer .contact{font-size:16px}.footer h4{font-size:16px}
 .eyebrow,.guide .meta,.product-card .number{font-size:13px}
}
.product-photo{height:260px!important;overflow:hidden}
.product-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.product-photo .tag{z-index:1;background:#061c32d9;color:#fff;padding:5px 8px;right:auto;max-width:calc(100% - 32px);font-size:11px}
.products-page .product-photo{height:350px!important}
.detail-art{height:auto;overflow:hidden}
.detail-art img{height:auto;aspect-ratio:4/3;object-fit:cover}
.product-photo img[src*="poster"],.detail-art img[src*="poster"]{width:100%;aspect-ratio:4/3;object-fit:cover}
.product-photo img[src*="poster"]{transform:scale(1.6)}
.about-visual{overflow:hidden;min-height:440px;background:#0b2436}
.about-visual>img{width:100%;height:440px;object-fit:cover;object-position:50% 60%;filter:none}
.about-visual:after{content:'';position:absolute;inset:70% 0 0;background:linear-gradient(transparent,#061c32d9)}
.about-visual .visual-label{z-index:1;color:#fff;font-size:12px;letter-spacing:.08em}
html[lang=ar] body,html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4,html[lang=ar] .calculator-output strong{font-family:'Noto Sans Arabic',Arial,sans-serif;letter-spacing:0}
html[lang=si] body,html[lang=si] h1,html[lang=si] h2,html[lang=si] h3,html[lang=si] h4,html[lang=si] .calculator-output strong{font-family:'Noto Sans Sinhala',Arial,sans-serif;letter-spacing:0}
html[lang=ar] .wordmark,html[lang=si] .wordmark{font-family:Manrope,Arial,sans-serif}
html[lang=ar] .eyebrow,html[lang=ar] .guide .meta,html[lang=si] .eyebrow,html[lang=si] .guide .meta{letter-spacing:0}
html[lang=ar] h1,html[lang=si] h1{line-height:1.4}
html[lang=ar] h2,html[lang=si] h2{line-height:1.5}
html[lang=ar] .logo{margin-right:0;margin-left:auto;direction:ltr}
html[lang=ar] .wordmark{direction:ltr;text-align:left}
html[lang=ar] .language-menu{right:auto;left:0}
html[lang=ar] .hero:before{background:linear-gradient(270deg,rgba(4,19,34,.94),rgba(4,19,34,.72) 55%,rgba(4,19,34,.15))}
html[lang=ar] .table-scroll table{text-align:right}
html[lang=ar] .comparison tbody th{padding-left:22px;padding-right:0}
html[lang=ar] .checkbox{text-align:right}
html[lang=ar] .quicklinks b{margin-left:0;margin-right:auto}
html[lang=ar] .hero-bottom .wrap{direction:ltr}
html[lang=si] .navlinks a{font-size:13px}
html:not([lang=en]) .nav{gap:15px}html:not([lang=en]) .navlinks{gap:16px}
html:not([lang=en]) .navlinks a{line-height:1.4}
@media(min-width:801px) and (max-width:1200px){
 .nav{gap:12px}.navlinks{gap:12px}.navlinks a{font-size:13px}.nav>.button{font-size:13px;padding:11px 12px;gap:8px}.language-toggle{font-size:12px;padding:9px 7px}.wordmark{font-size:21px}.wordmark small{letter-spacing:.2em}
}
@media(max-width:1050px){
 .nav{height:76px;gap:12px}
 .navlinks{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;padding:20px;box-shadow:0 15px 25px #091e3020}
 .navlinks.open{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .navlinks a,html[lang=si] .navlinks a{padding:14px;font-size:18px}
 .menu{display:block;font-size:16px;min-height:46px}
 .nav>.button{display:none}
 .logo{margin-right:auto}
 html[lang=ar] .logo{margin-left:auto;margin-right:0}
 #language-current{display:none}.language-code{display:inline}
 .language-toggle{min-height:46px;font-size:13px}
 html[lang=ar] .menu{margin-left:0;margin-right:0}
}
@media(max-width:800px){
 .product-photo{height:300px!important}.products-page .product-photo{height:300px!important}
 .about-visual{min-height:350px}.about-visual>img{height:350px}
 html:not([lang=en]) .nav{gap:10px}
 .language-menu{min-width:240px;max-width:calc(100vw - 40px)}
 .language-menu button{font-size:16px}
 html[lang=ar] .hero:before{background:linear-gradient(270deg,#041322eb,#041322b0)}
}
@media(max-width:480px){
 .wordmark{font-size:18px}.wordmark small{font-size:6.5px;letter-spacing:.18em}.logo{gap:7px}.logo img{width:28px;height:28px}
 .menu{padding:9px 11px;font-size:15px;margin-left:0}
 .language-toggle{padding:9px 7px;gap:5px;min-width:65px}
 .language-toggle svg{width:15px;height:15px}
 .nav{gap:9px}.wrap{width:calc(100% - 32px)}
 html[lang=ar] .menu,html[lang=si] .menu{font-size:14px;padding:9px}
 html[lang=si] .hero h1{font-size:36px}
 html:not([lang=en]) .hero .actions{flex-direction:column;align-items:flex-start}
}