/* === responsive.css — generated; mobile spacing + grid + nav === */

/* base hamburger (hidden on desktop) */
.nav-toggle{display:none;background:none;border:0;color:var(--fg);cursor:pointer;padding:6px;align-items:center;justify-content:center}

/* mobile menu panel (built by app.js) — normal in-flow block under the bar,
   so it always paints (no absolute/sticky quirks) */
.m-menu{display:none;flex-direction:column;background:var(--ink-700);
  border-top:1px solid var(--ink-450);box-shadow:var(--shadow-lg);padding:8px;gap:2px}
header.nav-open .m-menu{display:flex!important}
.m-menu a{color:var(--fg);text-decoration:none;padding:14px 14px;border-radius:var(--r-sm);
  font-family:var(--font-sans);font-weight:600;font-size:15px}
.m-menu a:active,.m-menu a:hover{background:var(--ink-600);color:var(--gold-400)}

@media (min-width: 901px){ .m-menu{display:none!important} }

@media (max-width: 900px){
  .nav-toggle{display:inline-flex}
  html,body{overflow-x:hidden}
  .site-scroll{overflow-x:hidden}
  header{position:static!important}
  header,header > div{max-width:100vw}
  header > div{padding:12px 16px!important;gap:12px!important;flex-wrap:nowrap;justify-content:flex-start!important}
  header img{height:30px!important;width:auto!important}
  header .jbtn{margin-inline-start:auto!important;padding:9px 14px!important;font-size:13px!important}
  header nav{display:none!important}                 /* hide the desktop horizontal nav */
  .m-menu{width:100%;box-sizing:border-box}
  .m-menu a{text-align:start}
}

@media (max-width: 991px){
.x33{grid-template-columns:repeat(2,1fr)}
.x54{grid-template-columns:1fr}
.x88{grid-template-columns:repeat(2,1fr)}
.x136{grid-template-columns:repeat(2,1fr)}
.x175{grid-template-columns:repeat(2,1fr)}
.x199{grid-template-columns:repeat(3,1fr)}
.x215{grid-template-columns:1fr}
.x267{grid-template-columns:repeat(3,1fr)}
}

@media (max-width: 600px){
.service-more {
    display: none;
}

  .t-display {
    line-height: 45px;
}

.x188 {
    display: none;
}

.x184 {
    padding: 0;
}

.swiper-button-next, .swiper-button-prev {
  display: none;
}

.x133 {
    font-size: 11px;
}

.x134 {
    font-size: 13px;
}

.service-ring {
    width: 56px;
    height: 56px;
}

.service-title {
    font-size: 14px;
}

.service-card {
    padding: 5px 0px 8px;
}

.t-h2 {
    font-size: clamp(18px, 2vw, 33px);
}

.service-desc {
    font-size: 13.5px;
    line-height: 1.2;
}

.x155 {
    margin-top: 1px;
}

.t-lead {
    font-size: clamp(14px, 1.6vw, 22px);
}

.x168 {
    font-size: 15px;
}

.x167 {
    display: none;
}

.x178 {
    font-size: 11px;
}

.pj-projects {
    height: 87px;
}

.x187 {
    font-size: 13px;
}

.x189 {
    font-size: 8px;
}

.t-h3 {
    font-size: clamp(15px, 2vw, 26px);
}

.t-h1 {
    font-size: clamp(19px, 4vw, 52px);
}

.x169 {
    font-size: 11.5px;
}


.x25{grid-template-columns:1fr}
.x33{grid-template-columns:repeat(2,1fr)}
.x39{grid-template-columns:repeat(2,1fr)}
.x54{grid-template-columns:1fr}
.x63{grid-template-columns:repeat(2,1fr)}
.x78{grid-template-columns:1fr}
.x83{grid-template-columns:repeat(2,1fr)}
.x88{grid-template-columns:repeat(2,1fr)}
.x95{grid-template-columns:1fr}
.x97{grid-template-columns:1fr}
.x136{grid-template-columns:repeat(2,1fr)}
.x142{grid-template-columns:1fr}
.x157{grid-template-columns: repeat(3,1fr);}
.x162{grid-template-columns:repeat(2,1fr)}
.x175{grid-template-columns:repeat(2,1fr)}
.x199{grid-template-columns:repeat(2,1fr)}
.x215{grid-template-columns:1fr}
.x231{grid-template-columns:1fr}
.x237{grid-template-columns:1fr}
.x239{grid-template-columns:1fr}
.x267{grid-template-columns:repeat(2,1fr)}
.x277{grid-template-columns:repeat(2,1fr)}
.x308{grid-template-columns:1fr}
.x2{padding:15px 18px;gap:12px}
.x17{padding:40px 18px 30px}
.x24{padding:40px 18px}
.x25{gap:14px}
.x28{gap:12px}
.x33{padding:30px 18px;gap:14px}
.x37{margin-bottom:29px}
.x39{gap:12px}
.x46{padding:40px 18px}
.x53{padding:30px 18px 28px}
.x54{gap:14px}
.x61{margin-top:29px}
.x63{gap:12px}
.x77{gap:12px}
.x78{gap:14px}
.x83{gap:12px}
.x92{padding:30px 18px}
.x95{gap:14px}
.x96{gap:12px}
.x97{gap:12px}
.x109{padding:15px 18px;gap:12px}
.x122{min-height:384px}
.x126{padding:40px 18px 40px}
.x136{padding:26px 18px;gap:14px}
.x141{padding:40px 18px}
.x142{gap:14px}
.x152{margin-bottom:29px}
.x157{gap:12px}
.x162{gap:12px}
.x172{margin-top:24px}
.x175{padding:40px 18px;gap:12px}
.x179{margin-bottom:29px}
.x196{padding:30px 18px}
.x208{padding:40px 18px}
.x214{padding:30px 18px 28px}
.x215{gap:14px}
.x222{margin-top:29px}
.x225{gap:12px}
.x231{gap:12px}
.x237{gap:12px}
.x244{padding:30px 18px;gap:12px}
.x246{margin-bottom:29px}
.x262{padding:40px 18px 30px}
.x267{padding:26px 18px;gap:12px}
.x270{gap:12px}
.x271{gap:12px}
.x296{padding:30px 18px 40px}
.x308{gap:14px}
.x319{padding:40px 18px}
}