/* Base */
:root{
  --primary:#e53935;
  --primary-dark:#b71c1c;
  --accent:#ff9800;
  --bg:#ffffff;
  --ink:#1a1a1a;
  --muted:#666;
  --light:#f7f7f8;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
.container{width:min(var(--container),100% - 2rem);margin-inline:auto}
.section{padding:64px 0}
.section__title{font:800 34px/1.2 Montserrat,sans-serif;margin:0 0 24px}
.section__subtitle{font:700 24px/1.3 Montserrat,sans-serif;margin:0 0 12px}
.eyebrow{font:700 14px/1 Montserrat, sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.lead{font-size:18px;color:#333}
.highlight{color:var(--primary)}
.grid{display:grid}
.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-lg{gap:32px}
.gap-xl{gap:48px}
.align-start{align-items:start}
.mtop-xl{margin-top:48px}

/* Topbar */
.topbar{position:sticky;top:0;z-index:50;background:#000000;border-bottom:1px solid #000000}
.topbar__inner{display:flex;align-items:center;justify-content:flex-start;padding:12px 0;position:relative}
.topbar .container{width:100%;padding-inline:12px}
.brand{display:flex;align-items:center;gap:12px;color:inherit}
.brand__logo{height:88px;width:auto;object-fit:contain}
.brand__title{font:800 22px/1 Montserrat,sans-serif}
.brand__tag{font:600 10px/1.2 Montserrat,sans-serif;color:var(--muted)}
.topbar__contact{display:none}
.topbar__link{color:#222;font-weight:600;display:flex;gap:8px;align-items:center}
.hamburger{display:none;flex-direction:column;gap:4px;border:0;background:transparent;cursor:pointer}
.hamburger span{width:20px;height:2px;background:#222;display:block}

/* Main nav (desktop) */
.main-nav{display:flex;gap:30px;margin-left:auto}
.main-nav a{color:#ffffff;font-weight:500;text-decoration:none}
.main-nav a:hover{color:var(--primary)}

/* Language Switcher */
.language-switcher{display:flex;gap:4px;margin-left:20px}
.lang-btn{background:transparent;border:1px solid rgba(255,255,255,0.3);padding:6px 12px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s ease;border-radius:4px;color:#fff}
.lang-btn:hover{background:rgba(255,255,255,0.1);border-color:var(--primary)}
.lang-btn.active{background:var(--primary);color:white;border-color:var(--primary)}

/* Hero */
.hero{position:relative;isolation:isolate}
.hero__slides{position:relative;height:min(78vh,760px);overflow:hidden}
.hero{margin-top:0}
.hero__slide{position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.hero__slide::before{content:"";position:absolute;inset:0;background:radial-gradient(transparent, rgba(0,0,0,.45)),linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.45))}
.hero__slide.is-active{opacity:1}
.hero__content{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff}
.hero__title{max-width:900px;font:800 40px/1.25 Montserrat,sans-serif;margin:0;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero__title strong{color:#fff;border-bottom:3px solid var(--accent)}
.hero__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.7);display:grid;place-items:center;cursor:pointer}
.hero__nav:hover{background:#fff}
.hero__nav--prev{left:16px}
.hero__nav--next{right:16px}

/* Logo wall */
.logo-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0 8px}
.logo-item{border:1px solid #eee;border-radius:10px;padding:10px;text-align:center;background:#fff}
.logo-item img{width:auto;max-width:120px;max-height:48px;margin-inline:auto;filter:contrast(1.05) saturate(1.05)}
.logo-item figcaption{margin-top:6px;font-size:12px;color:#666}

/* Projects */
.columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.bullets{margin:0;padding-left:18px}
.bullets li{margin:6px 0}
.compact li{margin:2px 0}
.flame-mark{display:flex;justify-content:center;align-items:center}
.flame-mark svg{width:100%;max-width:320px;opacity:.9}

/* Who We Are */
.who__grid{align-items:center}
.who{background:#ffffff}
.who__media{position:relative}
.who__media img{border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.who__badge{position:absolute;left:18px;bottom:18px;background:#0b7a4b;color:#fff;border-radius:6px;padding:18px 22px;display:grid;place-items:center;text-align:center;min-width:140px}
.who__years{font:800 44px/1 Montserrat,sans-serif}
.who__label{font-weight:700}
.who__dots{display:flex;gap:10px;position:absolute;left:50%;transform:translateX(-50%);bottom:-28px}
.who__dots span{width:8px;height:8px;border-radius:999px;background:#cfd8dc;display:block}
.who__dots .is-active{background:#2e7d32}
.who__eyebrow{color:#2e7d32;font:800 12px/1.2 Montserrat,sans-serif;letter-spacing:.08em}
.who__title{font:800 36px/1.2 Montserrat,sans-serif;margin:8px 0 12px}
.who__actions{display:flex;align-items:center;gap:14px;margin-top:16px}
.btn--green{background:#2e7d32;color:#fff}
.who__more{font-weight:700;color:#2e7d32}

/* Page hero + prose */
.page-hero{background:#f4f6f8;padding:48px 0;border-bottom:1px solid #e9eef2;display:grid;place-items:center;min-height:320px}
.page-hero.has-bg{background-size:cover;background-position:center;color:#fff;position:relative;filter:none}
.page-hero.has-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45));backdrop-filter:blur(0px)}
.page-hero .container{text-align:center}
.page-hero.has-bg .container{position:relative}
.page-hero h1{font:800 36px/1.2 Montserrat,sans-serif;margin:0 0 8px}
.page-hero.has-bg h1,.page-hero.has-bg .lead{color:#fff}
.services-list{background:#fff;border:1px solid #eee;border-radius:10px;padding:18px;display:grid;gap:10px}
.services-list li{padding:10px 12px;border-radius:8px;background:#f9fafb}
.prose h2{font:800 26px/1.2 Montserrat,sans-serif}
.prose h3{font:800 20px/1.2 Montserrat,sans-serif}
.prose ul{margin:0 0 0 18px}
.blog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.blog-list .card{padding:0;border-radius:12px;background:#fff;border:1px solid #eee;overflow:hidden;display:flex;flex-direction:column}
.blog-list .card img{width:100%;height:180px;object-fit:cover}
.blog-list .card h3{padding:12px 14px 0;margin:0;font:800 18px/1.2 Montserrat,sans-serif}
.blog-list .card p{padding:8px 14px 0;margin:0 0 6px}
.blog-list .card a{padding:0 14px 14px;font-weight:700}

/* Media blocks (image + text) */
.media-block{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;margin:20px 0;background:#fff;border:1px solid #eee;border-radius:10px;padding:18px}
.media-block.reverse{grid-template-columns:1fr 1.1fr}
.media-block.stacked{grid-template-columns:1fr}
.media-block img{width:100%;height:280px;object-fit:cover;border-radius:8px}
.media-block img.logo-fit{object-fit:contain;background:#fff;padding:10px;height:200px}
.media-block.stacked img{height:320px;margin-bottom:12px}
.media-block h3{margin:0 0 8px;font:800 22px/1.2 Montserrat,sans-serif}
.media-block p{margin:0}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.why-list li{background:#f9fafb;border:1px solid #eee;border-radius:8px;padding:10px 12px}
.why-list li strong{display:block;margin-bottom:4px}

/* Why section styled like reference */
.why{background:#eef8f2;padding:56px 0}
.why__header{text-align:center;max-width:620px;margin:0 auto 28px}
.why__header h2{font:800 32px/1.3 Montserrat,sans-serif;margin:6px 0 12px}
.why__header p{margin:10px auto 0; line-height:1.75}
.features-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.feature-card{background:#fff;border:1px solid #e3f2ea;border-radius:12px;padding:22px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.02)}
.feature-card__icon{font-size:36px;color:#2e7d32;margin-bottom:10px}
.feature-card h4{margin:6px 0 6px;font:800 18px/1.2 Montserrat,sans-serif}
@media (max-width: 1000px){
  .features-grid{grid-template-columns:1fr}
}
@media (max-width: 1000px){
  .media-block,.media-block.reverse{grid-template-columns:1fr}
  .media-block img{height:220px}
  .media-block > img{order:-1}
  .media-block img.logo-fit{height:160px}
}

/* Products */
.products{background:#f9fafb;border-top:1px solid #eee}
.products__grid{display:flex;gap:24px;align-items:center}
.products__grid > div{flex:2}
.products__grid .product-visual{flex:1}
.product-grid{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.product-card{background:#fff;border:1px solid #eee;border-radius:10px;padding:18px;text-align:left;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.product-card__icon{font-size:28px;color:#2e7d32}
.product-card h4{margin:10px 0 6px;font:800 18px/1.2 Montserrat,sans-serif}
.product-card p{margin:0;color:#444}
.product-visual{text-align:center}
.product-visual img{max-width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.2))}

/* CTA strip */
.cta-strip{background:#121212;color:#fff;padding:36px 0}
.cta-strip__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta-strip__title{font:800 28px/1.2 Montserrat,sans-serif;margin:0}
.cta-strip__subtitle{margin:6px 0 0;color:#ddd}
.cta-strip__actions{display:flex;gap:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:6px;font-weight:700}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-dark)}
.btn--ghost{border:2px solid #fff;color:#fff}
.btn--ghost:hover{background:#fff;color:#000}

/* Gallery */
.gallery{background:var(--light)}
.carousel{position:relative;border-radius:10px;overflow:hidden}
.carousel__track{display:flex;transition:transform .5s ease}
.carousel img{width:100%;height:420px;object-fit:cover;flex:0 0 100%}
.carousel__nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;border:0;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.2);cursor:pointer}
.carousel__nav.prev{left:10px}
.carousel__nav.next{right:10px}

.sidebar .card{background:#fff;border-radius:10px;padding:18px;margin-bottom:16px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.sidebar h4{margin:0 0 8px;font:800 18px/1.2 Montserrat,sans-serif}

/* News */
.news{background:#f5c106;padding:42px 0}
.news__inner{display:grid;grid-template-columns:1.5fr .5fr;align-items:center;gap:32px}
.news__brand{text-align:right}
.news__brand img{max-width:320px}
.news__more{font-weight:700}

/* Footer */
.site-footer{background:#f3f3f3;padding:40px 0 0}
.site-footer h4{font:800 16px/1.2 Montserrat,sans-serif;margin:0 0 10px}
.links{list-style:none;margin:0;padding:0}
.links li{margin:6px 0}
.footer-base{background:#ffe7a0;margin-top:24px}
.footer-base__inner{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.footer-icons{display:flex;gap:12px;color:#b08900}

/* Floating CTAs */
.floating-cta{position:fixed;right:16px;z-index:60;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:30px;color:#fff;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.floating-cta.chat{bottom:24px;background:#25D366}
.floating-cta.phone{bottom:80px;background:#222;width:44px;height:44px;justify-content:center;border-radius:999px}
.floating-cta.lang{bottom:136px;background:var(--primary);width:auto;min-width:44px;height:44px;justify-content:center;border-radius:999px;display:flex;align-items:center;padding:0 12px;white-space:nowrap}
.floating-cta i{font-size:18px}

/* Utilities */
@media (max-width: 1000px){
  .two-col{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr 1fr}
  .hero__title{font-size:32px}
}
/* Tablet and Mobile Styles */
@media (max-width: 720px){
  /* Grid Layouts */
  .two-col{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr}
  .columns{grid-template-columns:1fr;gap:32px}
  
  /* Footer mobile layout */
  .site-footer .grid.three-col{grid-template-columns:1fr 1fr}
  .site-footer .grid.three-col > :first-child{grid-column:1 / -1}
  
  /* Hero Section - Better mobile sizing */
  .hero__slides{
    height:50vh;
    min-height:400px;
    max-height:500px;
  }
  .hero__slide{
    background-size:cover;
    background-position:center 30%;
  }
  .hero__title{
    font-size:24px;
    padding:0 20px;
    line-height:1.3;
  }
  .hero__nav{
    width:36px;
    height:36px;
  }
  .hero__nav--prev{left:10px}
  .hero__nav--next{right:10px}
  
  /* Typography scaling */
  .section__title{font-size:28px}
  .section__subtitle{font-size:20px}
  .lead{font-size:16px}
  
  /* Navigation */
  .hamburger{display:inline-flex;margin-left:auto;position:absolute;right:12px;top:50%;transform:translateY(-50%);}
  .hamburger span{background:#ffffff;width:26px;height:3px}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#000;padding:0;flex-direction:column;gap:0;border-bottom:1px solid #222;z-index:100}
  .main-nav a{display:block;padding:14px 16px;border-top:1px solid #EDCD37}
  .main-nav a:first-child{border-top:0}
  .topbar.is-open .main-nav{display:flex}
  
  /* Topbar adjustments */
  .topbar__inner{padding:8px 0}
  .brand__logo{height:60px;width:auto}
  .brand__title{font-size:18px}
  
  /* Logo wall - 2 columns on mobile */
  .logo-wall{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:0 10px;
  }
  .logo-item{
    padding:8px;
  }
  .logo-item img{
    max-width:90px;
    max-height:40px;
  }
  .logo-item figcaption{
    font-size:11px;
  }
  
  /* Product Cards - Button style on mobile */
  .product-card{
    background:#f8f8f8;
    border:2px solid #e0e0e0;
    border-radius:12px;
    padding:20px;
    text-align:center;
    transition:all 0.3s ease;
    cursor:pointer;
    display:block;
    text-decoration:none;
    color:inherit;
  }
  .product-card:active{
    transform:scale(0.98);
    background:#f0f0f0;
  }
  .product-card h3{
    font-size:18px;
    margin-bottom:10px;
  }
  
  /* Blog cards mobile */
  .blog-list{
    grid-template-columns:1fr;
    gap:20px;
    padding:0 15px;
  }
  .blog-list .card{
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transition:transform 0.3s ease;
  }
  .blog-list .card:active{
    transform:scale(0.98);
  }
  .blog-list .card img{
    height:200px;
  }
  .blog-list .card h3{
    font-size:16px;
    padding:14px 16px 0;
  }
  .blog-list .card p{
    padding:8px 16px 0;
    font-size:14px;
  }
  .blog-list .card a{
    padding:0 16px 16px;
    color:var(--primary);
    font-size:14px;
  }
  
  /* CTA strip */
  .cta-strip__inner{flex-direction:column;align-items:flex-start;gap:16px}
  
  /* News section */
  .news__inner{grid-template-columns:1fr}
  .news__brand{text-align:center}
  .news__brand img{max-width:240px;margin-inline:auto}
  
  /* Who We Are section */
  .who__grid{gap:24px}
  .who__title{font-size:24px}
  .who__years{font-size:32px}
  .who__badge{
    left:12px;
    bottom:12px;
    padding:12px 16px;
    min-width:120px;
  }
  
  /* Products section */
  .products__grid{flex-direction:column;gap:24px}
  .product-visual{order:-1;text-align:center}
  .product-visual img{max-width:280px;margin-inline:auto}
  
  /* General spacing */
  .section{padding:32px 0}
  .container{width:calc(100% - 1.5rem)}
  
  /* Carousel */
  .carousel img{height:220px;object-fit:cover}
}

/* Small Mobile Phones (max-width: 480px) */
@media (max-width: 480px){
  /* Hero adjustments for small screens */
  .hero__slides{
    height:60vh;
    min-height:350px;
    max-height:450px;
  }
  .hero__title{
    font-size:20px;
    padding:0 15px;
  }
  
  /* Even smaller typography */
  .section__title{font-size:24px}
  .section__subtitle{font-size:18px}
  
  /* Logo wall - single column on very small screens */
  .logo-wall{
    grid-template-columns:1fr;
    gap:6px;
  }
  
  /* Smaller brand logo */
  .brand__logo{height:60}
  .brand__title{font-size:16px}
  
  /* Product visual adjustments */
  .product-visual img{max-width:240px}
  
  /* Who section badge */
  .who__badge{
    position:static;
    margin-top:20px;
    width:100%;
    border-radius:8px;
  }
  
  /* Blog cards on small screens */
  .blog-list{
    padding:0 10px;
    gap:15px;
  }
  .blog-list .card img{
    height:160px;
  }
  .blog-list .card h3{
    font-size:15px;
  }
  .blog-list .card p{
    font-size:13px;
  }
  
  /* Page hero sections */
  .page-hero{
    padding:50px 20px;
  }
  .page-hero h1{
    font-size:24px;
  }
  .page-hero .lead{
    font-size:14px;
  }
  
  /* Footer - stack all columns */
  .site-footer .grid.three-col{
    grid-template-columns:1fr;
  }
  .site-footer .grid.three-col > :first-child{
    grid-column:1;
  }
}

/* Desktop-only: tune logo padding/position without affecting mobile */
@media (min-width: 721px){
  /* Desktop-only tweaks: adjust logo offset without touching mobile */
  .brand{margin-left:10px}
}

/* Desktop-only fine positioning */
@media (min-width: 992px){
  /* Kunlun logo spacing & size */
  .news__inner{column-gap:72px !important;}
  .news__brand{justify-self:end !important;text-align:right !important;padding-left:40px !important;}
  .news__brand img{max-width:380px !important;margin-right:16px !important;}

  /* Tin image placement */
  .products__grid{gap:10px !important;}
  .product-visual{margin-left:auto !important;text-align:right !important;padding-left:0 !important;}
  .product-visual img{width:460px !important;max-width:none !important;transform:translateX(140px);}/* nudge further right without shrinking */
  /* Desktop nav sizing */
  .main-nav a{font-size:20px}
  /* Add some breathing room on the right edge for the last nav item */
  .main-nav{padding-right:16px}
  .main-nav a:last-child{padding-right:6px}
}