/* Service page isolated styles (scoped) */
/* Scope: body.page-service and <main class="page page-service"> */

body.page-service .page-service .h1{
  /* Keep page title for SEO, but hide visually to match static design */
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Match original Service section layout from main.css */
body.page-service .page-service .service-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 426px));
  column-gap:49px;
  row-gap:49px;
  justify-content:center;
}

@media (max-width: 1024px){
  body.page-service .page-service .service-grid{
    grid-template-columns: repeat(2, minmax(0, 426px));
    column-gap:36px;
    row-gap:36px;
    justify-content:center;
  }
}

/* Keep each card from stretching in 2-col responsive */
body.page-service .page-service .service-card{
  max-width:426px;
}


@media (max-width: 560px){
  body.page-service .page-service .service-grid{
    grid-template-columns: 1fr;
  }
}

body.page-service .page-service .service-card .thumb{
  margin-bottom:18px;
  /* Prevent global img rules from blowing up */
  width:100%;
  aspect-ratio: 1.618 / 1; /* golden ratio (W:H) */
  overflow:hidden;
}

body.page-service .page-service .service-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

body.page-service .page-service .service-card .title{
  font-size:11px;
  letter-spacing:.14em;
  font-weight:500;
  margin:0;
}

body.page-service .page-service .service-card .desc{
  margin-top:10px;
  font-size:11px;
  line-height:2.1;
  color:rgba(0,0,0,.68);
}

/* Subpages: hard-hide slider UI and any arrow glyphs if they appear */
body.page-service .swiper,
body.page-service .swiper-container,
body.page-service .swiper-wrapper,
body.page-service .swiper-slide,
body.page-service .swiper-button-prev,
body.page-service .swiper-button-next,
body.page-service .swiper-pagination,
body.page-service .hero-slider,
body.page-service .slider,
body.page-service .slide-nav,
body.page-service .slide-controls,
body.page-service .cursor-arrow,
body.page-service .nav-arrow{
  display:none !important;
  visibility:hidden !important;
}

/* v12 fix (Service only):
   Force Service content start to match Works exactly.
   - Enforce main padding-top to 140px (same as .page in main.css)
   - Ensure no extra top offset from container/service-grid
   - Hide the SERVICE title completely (no visual footprint)
*/
@media (min-width: 769px){
  body.page-service main.page.page-service{
    padding-top: 140px !important;
  }
  body.page-service main.page.page-service > .container{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.page-service main.page.page-service .service-grid{
    margin-top: 0 !important;
  }
}
/* Always hide the page title on Service */
body.page-service main.page.page-service .h1{
  display:none !important;
}