/* Loaded only at <= 768px. Desktop image sources and composition are preserved. */
.responsive-photo img{aspect-ratio:4/3;object-fit:cover}
.photo--hero{object-position:90% 15%}
.photo--architecture{aspect-ratio:16/10!important;object-position:65% 50%}
.photo--camera-exterior{object-position:50% 40%}
.photo--electrical{aspect-ratio:3/2!important;object-fit:contain!important;object-position:50% 50%}
.photo--alarm{object-position:50% 25%}
.photo--fire{object-position:15% 5%}
.photo--baby-camera{object-position:55% 40%}
.photo--sound{object-fit:contain!important;object-position:50% 50%}
.photo--barrier{aspect-ratio:1/1!important;object-position:50% 50%}
.photo--barcode{aspect-ratio:1/1!important;object-position:50% 30%}

/* A dedicated visual area keeps hero copy clear of the camera on narrow screens. */
.hero{--mobile-hero-height:clamp(300px,82vw,420px)}
.hero .hero-inner{min-height:0;padding-bottom:calc(var(--mobile-hero-height) + 48px)}
.hero .hero-background{top:auto;bottom:0;height:var(--mobile-hero-height)}
.hero .hero-background img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover;object-position:90% 15%}
.hero .hero-background:after{background:linear-gradient(180deg,#081525 0%,#08152522 20%,#08152500 50%,#081525a8 100%)}
.hero .hero-copy{max-width:700px}
.hero .hero-side-note{display:none}
.hero .hero-glass{left:auto;right:0;bottom:53px;width:min(260px,100%);padding:10px 12px;gap:10px;border-radius:10px;background:#081525bd;backdrop-filter:blur(8px)}
.hero .hero-glass .glass-icon{width:32px;height:32px;border-radius:8px}
.hero .hero-glass .glass-icon .icon{width:18px;height:18px}
.hero .hero-glass>div:nth-child(2){min-width:0}
.hero .hero-glass span{font-size:7px;line-height:1.25;letter-spacing:.07em;margin-bottom:4px}
.hero .hero-glass strong.hero-glass-detail{display:none}
.hero .hero-glass strong.hero-glass-action{display:block;font-size:11px;line-height:1.35}
.hero .hero-glass>.icon{width:15px;height:15px;align-self:center}
.hero .hero-image-note{bottom:21px}

/* Service photos have their own space instead of sitting behind the title. */
.service-card,.service-card.featured,.small-grid .service-card,.catalog-grid .service-card,.related-grid .service-card{display:flex;flex-direction:column;min-height:0}
.service-card:after{display:none}
.service-card img{position:relative;inset:auto;width:100%;height:auto;z-index:0;flex-shrink:0;transform:none}
.service-card:hover img,.project-card:hover .project-image img,.product-card:hover .product-image img{transform:none}
.service-card>.image-note{position:static;align-self:flex-start;margin:12px 20px 0;padding:3px 0;background:transparent;backdrop-filter:none;color:#a7bfd4;font-size:8px}
.service-card-content{position:relative;z-index:1;min-height:0;flex:1;justify-content:flex-start;padding:12px 20px 22px}
.service-card .card-more{margin-top:auto}
.small-grid .service-card img{aspect-ratio:4/5!important;object-fit:cover!important}
.small-grid .service-card>.image-note{margin:9px 14px 0;font-size:7px}
.small-grid .service-card-content{padding:10px 14px 18px}
.small-grid .service-card h3{margin-bottom:17px;line-height:1.2}
.small-grid .card-more{gap:6px}

/* The image itself defines each frame; no forced portrait crop for panel photos. */
.audience-image,.about-visual,.project-image,.product-image,.address-visual,.quote-image{height:auto;background:#0e2238}
.audience-image img,.about-visual img,.project-image img,.product-image img,.address-visual img,.quote-image img{position:relative;width:100%;height:auto}
.about-visual{margin-right:0}
.about-visual .experience-badge{position:relative;right:auto;bottom:auto;width:max-content;margin:-12px 15px 0 auto;padding:16px 22px}
.about-visual .experience-badge strong{font-size:54px}
.about-visual .experience-badge span{font-size:9px}
.project-image:after{background:linear-gradient(transparent 75%,#0815258c)}
.subhero.with-photo{min-height:0;padding-bottom:30px}
.subhero.with-photo .subhero-copy{width:100%}
.subhero.with-photo .subhero-copy>p:last-child{max-width:600px}
.subhero-photo{position:relative;inset:auto;width:100%;height:auto;margin-top:30px;background:#0e2238}
.subhero-photo img{width:100%;height:auto}

@media (min-width:701px){
  .small-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .small-grid .service-card h3{font-size:23px}
  .small-grid .service-card p{display:none}
  .subhero.with-photo .breadcrumb{margin-bottom:37px}
  .subhero.with-photo{min-height:470px;padding-bottom:75px}
  .subhero.with-photo .subhero-copy{width:49%}
  .subhero-photo{position:absolute;left:auto;right:0;top:45px;width:43%;margin-top:0}
}
@media (max-width:380px){
  .small-grid .service-card-content{padding:10px 12px 16px}
  .small-grid .service-card>.image-note{margin-inline:12px}
}