/* ISTEK V121 – mobile / tablet responsive pass
   Designed to keep the existing V3 visual language while making every page
   readable, tappable and stable from small phones through tablets. */
html{overflow-x:hidden}
body{overflow-x:hidden;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit}

@media (max-width:820px){
  /* Shared page width + type */
  .wrap,.container{width:min(100% - 32px,var(--max,1240px));margin-left:auto;margin-right:auto}
  p,li{overflow-wrap:break-word}
  a{overflow-wrap:break-word}
  .top{display:none!important}

  /* Shared mobile navigation */
  .site-nav{top:0!important;min-height:72px!important;height:72px!important;padding:9px 16px!important}
  .site-nav .brand{height:54px;min-width:56px}
  .site-nav .brand img{width:58px;height:54px;max-width:none}
  .site-nav .hamb{display:inline-flex!important;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:12px;font-size:24px;line-height:1;touch-action:manipulation}
  .site-nav .links{display:none;position:absolute;left:10px;right:10px;top:72px;padding:12px 12px 16px;flex-direction:column;align-items:stretch;gap:4px;background:rgba(5,13,19,.98);border:1px solid rgba(169,250,247,.14);border-radius:0 0 18px 18px;box-shadow:0 22px 45px rgba(0,0,0,.32);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .site-nav.open .links{display:flex}
  .site-nav .links a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;white-space:normal}
  .site-nav .links a:hover,.site-nav .links a.active{background:rgba(255,255,255,.06)}
  .site-nav .links a:not(.navcta):after{display:none}
  .site-nav .links .navcta{justify-content:center;margin-top:6px;min-height:46px}

  /* Home navigation sits over the hero on phones. */
  .home-site-nav{top:0!important;height:72px!important;min-height:72px!important;padding:9px 16px!important}
  .home-site-nav .brand img{width:92px;height:54px;max-width:none}
  .home-site-nav .links{top:72px}

  /* Home hero */
  .home-hero{height:auto;min-height:720px;align-items:flex-end}
  .home-inner{padding:105px 0 70px}
  .home-hero h1{font-size:clamp(52px,15vw,76px);line-height:.9;letter-spacing:-.06em;margin:20px 0 22px;max-width:100%}
  .home-lead{font-size:16px;line-height:1.55;max-width:34rem}
  .home-actions{gap:10px;margin-top:24px}
  .home-btn{min-height:46px;padding:13px 17px}
  .home-metrics{margin-top:42px;padding-top:18px;max-width:none}
  .home-metrics>div{padding-right:10px;margin-right:10px}
  .home-metrics strong{font-size:24px}
  .home-metrics label{font-size:9px;line-height:1.3}
  .home-scroll{display:none}

  /* Home sections */
  .home-section{padding:72px 0}
  .home-intro{display:block}
  .home-intro h2,.home-story h2{font-size:clamp(42px,11vw,58px);line-height:.95}
  .home-cards{grid-template-columns:1fr!important;gap:14px}
  .home-card{height:440px}
  .home-compare{height:360px;border-radius:22px}
  .home-handle{width:50px;height:50px}
  .home-caption{grid-template-columns:1fr;gap:7px;padding:14px 0}
  .home-story-grid{grid-template-columns:1fr;gap:38px}
  .home-visual{height:455px}
  .home-visual-main{width:88%;height:390px;border-radius:24px}
  .home-visual-small{width:54%;height:180px;border-width:7px;border-radius:22px}
  .home-float{right:10px;bottom:25px;padding:13px 15px}
  .home-gallery-row{grid-template-columns:1fr;gap:12px}
  .home-gallery-shot{height:290px;border-radius:22px}
  .home-cta{padding:48px 22px;border-radius:24px}
  .home-cta h2{font-size:clamp(44px,12vw,62px)}
  .home-footer{padding:52px 0 22px}
  .home-footer-grid{grid-template-columns:1fr!important;gap:30px}
  .home-footer .footer-brand{grid-column:auto}
  .home-foot-bottom{display:block;line-height:1.8}
  .home-foot-bottom span{display:block;margin-top:5px}

  /* Shared inner-page sections */
  .section{padding:72px 0}
  .heading{display:block;margin-bottom:34px}
  .heading h2,.center h2,.copy h2{font-size:clamp(42px,11vw,62px);line-height:.95}
  .heading>p{margin-top:18px}
  .split-grid{grid-template-columns:1fr!important;gap:38px!important}
  .copy>p{font-size:15px;line-height:1.75}
  .features{margin:28px 0}
  .visual{height:430px}
  .main-img{width:86%;height:365px;border-radius:24px}
  .small-img{width:54%;height:175px;border-width:7px;border-radius:20px}
  .badge{right:8px;bottom:12px;padding:12px 14px}
  .gallery-grid{grid-template-columns:1fr!important;grid-auto-rows:250px!important}
  .gitem.big,.gitem.wide{grid-column:auto!important;grid-row:auto!important}
  .contact-box{display:block;padding:48px 24px;border-radius:26px}
  .contact-box h2{font-size:clamp(44px,12vw,68px);line-height:.92}
  .contact-actions{margin-top:28px;min-width:0;width:100%}
  .contact-actions .btn{width:100%;min-height:46px}
  .contact-actions small{line-height:1.5}
  .foot{grid-template-columns:1fr!important;padding:52px 0 28px;gap:28px}
  .copyright{display:block;line-height:1.8}
  .copyright span{display:block;margin-top:7px}

  /* Services overview */
  .service-hero{min-height:58vh!important;padding:125px 0 58px!important}
  .service-hero h1{font-size:clamp(52px,14vw,76px);line-height:.9}
  .service-hero p{font-size:16px;line-height:1.65}
  .service-menu{padding-top:55px!important}
  .service-grid-three{grid-template-columns:1fr!important}
  .service-carousel{gap:0}
  .service-viewport{mask-image:none;-webkit-mask-image:none}
  .menu-service{flex-basis:260px!important;width:260px!important;min-width:260px!important;height:410px!important;border-radius:22px}
  .service-arrow{display:none!important}
  .extra-grid{grid-template-columns:1fr!important}

  /* Gallery comparison / before-after */
  .comparison-grid,.slider-grid,.normal-gallery-grid{grid-template-columns:1fr!important}
  .comparison-card,.slider-grid .comparison-card,.normal-gallery-grid .free-gallery-frame{height:300px!important;border-radius:22px!important}
  .comparison-card .ba-divider span{width:50px;height:50px;font-size:17px}
  .comparison-card .ba-label{top:12px;padding:7px 9px;font-size:7px}
  .comparison-card .ba-label-left{left:12px}.comparison-card .ba-label-right{right:12px}
  .comparison-projects{grid-template-columns:1fr!important;gap:28px!important}
  .project-gallery{border-radius:18px}
  .project-gallery-grid{grid-template-columns:repeat(3,1fr)!important}
  .project-photo{height:92px!important}
  .group-heading{display:block;margin-bottom:20px}
  .group-heading h3{font-size:32px}
  .group-heading p{margin-top:10px;font-size:13px}
  .free-gallery-frame{height:300px!important;border-radius:22px}

  /* Service detail pages */
  .page{overflow:hidden}
  .hero-service{min-height:0!important;display:block!important;padding:110px 16px 46px!important}
  .hero-service h1{font-size:clamp(48px,13vw,72px);line-height:.92;margin:16px 0 20px}
  .hero-service .lead{font-size:16px;line-height:1.65}
  .hero-img{height:300px;margin-top:30px;border-radius:22px}
  .back{position:relative;top:auto;left:auto;display:inline-flex;min-height:44px;align-items:center;margin:76px 16px 0}
  .hero-service{padding-top:28px!important}
  .content{padding:52px 16px 70px!important}
  .content-grid{grid-template-columns:1fr!important;gap:24px!important}
  .panel{padding:24px 20px;border-radius:20px}
  .panel h2{font-size:29px}
  .panel p,.panel li{font-size:15px;line-height:1.7}
  .cta{min-height:46px;padding:13px 18px}
  .facts{gap:14px}
  .fact-photo{height:260px}
  .fact{padding:16px}
  .other{padding:26px 16px 70px}
  .other h2{font-size:30px}
  .cards{grid-template-columns:1fr!important}

  /* About / local SEO pages */
  .local-landing-hero{padding:125px 0 62px!important;min-height:0!important}
  .local-landing-content{padding:72px 0!important}
  .local-service-grid{grid-template-columns:1fr!important}
  .local-service-card{min-width:0}
  .service-photo-grid{grid-template-columns:1fr!important;padding:0 16px}
  .service-photo-grid img{height:250px}

  /* Contact form */
  .contact-hero{padding:48px 0 65px}
  .contact-wrap{width:min(100% - 28px,1180px);grid-template-columns:1fr!important;gap:30px}
  .contact-intro{padding-top:0}
  .contact-intro h1{font-size:clamp(48px,13vw,70px);line-height:.92}
  .contact-intro>p{font-size:16px;line-height:1.65}
  .contact-direct a{min-height:58px}
  .contact-card{padding:21px;border-radius:18px}
  .form-grid{grid-template-columns:1fr!important}
  .contact-card input:not([type=checkbox]),.contact-card select,.contact-card textarea{font-size:16px;min-height:46px}
  .contact-card textarea{min-height:150px}
  .contact-submit{min-height:48px}

  /* Keep interactive controls comfortable for touch. */
  .btn,.home-btn,.cta,.navcta,.service-arrow,.lightbox button{touch-action:manipulation}
  .lightbox{padding:12px}
  .lightbox img{max-width:96vw;max-height:82vh;border-radius:12px}
  .lightbox button{right:12px;top:12px}
}

@media (max-width:480px){
  .wrap,.container{width:calc(100% - 28px)}
  .home-site-nav .brand img{width:86px}
  .home-inner{padding-top:100px}
  .home-hero{min-height:690px}
  .home-actions{flex-direction:column;align-items:stretch}
  .home-btn{width:100%;justify-content:center}
  .home-metrics>div{padding-right:7px;margin-right:7px}
  .home-metrics strong{font-size:21px}
  .home-metrics label{font-size:8px}
  .service-hero h1,.hero-service h1{font-size:clamp(46px,13vw,64px)}
  .comparison-card,.slider-grid .comparison-card,.normal-gallery-grid .free-gallery-frame{height:280px!important}
  .project-gallery-grid{gap:6px!important}
  .project-photo{height:86px!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}