/* TARJEEH 2026-11-04 — lossless-framing hero revision.
   Images remain original locally hosted photos, with responsive srcset.
   No object-fit:cover, artificial cropping, stretching or zoom on heroes.
   Copy overlays the original full-bleed image on desktop, with an overlap
   transition into a dark, readable caption surface on small screens. */

/* A standard 3:2 source photo cannot fill a short cinematic banner
   without cropping. Let its own width determine the height instead. */
.v1 .inner-hero,
.v2 .inner-hero,
.v3 .inner-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto;
  align-items:center;
  justify-items:stretch;
  aspect-ratio:3 / 2;
  min-height:0;
  height:auto;
  max-height:none;
  overflow:hidden;
  background:#14282d;
}
.v1 .inner-hero>img,
.v2 .inner-hero>img,
.v3 .inner-hero>img{
  position:relative;
  inset:auto;
  grid-area:1 / 1;
  display:block;
  order:0;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:3 / 2;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  transform:none;
  animation:none!important;
}
.v1 .inner-hero .inner-copy,
.v2 .inner-hero .inner-copy,
.v3 .inner-hero .inner-copy,
.v3 .full-bleed-inner .inner-copy{
  grid-area:1 / 1;
  position:relative;
  z-index:3;
  min-height:0;
  width:min(100%,900px);
  padding:clamp(35px,5vw,84px) 6vw;
  margin:0;
  align-self:center;
  justify-self:start;
  background:none;
}
.v1 .inner-hero::after,
.v2 .inner-hero::after,
.v3 .inner-hero::after{
  z-index:2;
  background:linear-gradient(90deg,rgba(9,25,29,.88),rgba(11,30,33,.74) 30%,rgba(13,32,36,.31) 69%,rgba(13,32,36,.08));
}
.v2 .inner-hero::after{background:linear-gradient(90deg,rgba(22,34,23,.87),rgba(25,38,28,.72) 30%,rgba(33,45,34,.3) 69%,rgba(33,45,34,.08))}
.v3 .inner-hero::after,.v3 .full-bleed-inner::after{background:linear-gradient(90deg,rgba(9,24,28,.88),rgba(10,28,32,.74) 30%,rgba(13,32,37,.31) 69%,rgba(13,32,37,.08))}
.v1 .inner-hero h1,.v2 .inner-hero h1,.v3 .inner-hero h1{max-width:19ch;text-wrap:balance}

/* Home V1 and V3: preserve image edge-to-edge rather than using a
   short fixed-height cover frame. The existing copy is still overlaid. */
.v1 .hero-one,.v3 .hero-three{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto;
  aspect-ratio:3 / 2;
  min-height:0;
  height:auto;
  max-height:none;
  align-items:center;
}
.v1 .hero-one>.hero-photo,.v3 .hero-three>.hero-three-photo{
  position:relative;
  grid-area:1 / 1;
  inset:auto;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:3 / 2;
  object-fit:contain;
  object-position:center;
  animation:none!important;
  transform:none!important;
}
.v1 .hero-one>.hero-content,.v3 .hero-three>.hero-content{
  grid-area:1 / 1;
  position:relative;
  z-index:3;
  align-self:center;
  max-width:min(1050px,100%);
}
.v1 .hero-one>.hero-shade,.v3 .hero-three>.hero-three-shade{z-index:2}
.v1 .hero-one>.hero-note{z-index:3}
/* V2 retains its distinctive split editorial hero; show its whole photo. */
.v2 .hero-two-image img{
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:3 / 2;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  animation:none!important;
}

/* Mobile: entire photo appears above the text. The copy panel overlaps
   the photo by 42px, retaining the approved photo/text-overlay language. */
@media (max-width:700px){
  .v1 .inner-hero,.v2 .inner-hero,.v3 .inner-hero,
  .v3 .full-bleed-inner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    aspect-ratio:auto;
    min-height:0;
    height:auto;
    max-height:none;
    overflow:hidden;
  }
  .v1 .inner-hero>img,.v2 .inner-hero>img,.v3 .inner-hero>img,
  .v3 .full-bleed-inner>img{
    position:relative;
    flex:none;
    order:1;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:3 / 2;
    object-fit:contain;
    object-position:center;
    animation:none!important;
  }
  .v1 .inner-hero .inner-copy,.v2 .inner-hero .inner-copy,
  .v3 .inner-hero .inner-copy,.v3 .full-bleed-inner .inner-copy{
    order:2;
    flex:none;
    min-height:0;
    width:100%;
    margin-top:-42px;
    padding:64px 6vw 35px;
    align-self:stretch;
    justify-self:stretch;
    background:linear-gradient(to bottom,rgba(10,27,33,0),rgba(10,27,33,.96) 35%,#102930 80%);
  }
  .v2 .inner-hero .inner-copy{background:linear-gradient(to bottom,rgba(25,41,29,0),rgba(25,41,29,.96) 35%,#1b3429 80%)}
  .v3 .inner-hero .inner-copy,.v3 .full-bleed-inner .inner-copy{background:linear-gradient(to bottom,rgba(11,29,31,0),rgba(11,29,31,.96) 35%,#10272b 80%)}
  .v1 .inner-hero::after,.v2 .inner-hero::after,.v3 .inner-hero::after{
    background:linear-gradient(180deg,transparent 0%,transparent 27%,rgba(6,18,20,.14) 53%,rgba(6,18,20,.37) 68%,rgba(6,18,20,0) 82%);
  }
  .v1 .hero-one,.v3 .hero-three{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    min-height:0;
    aspect-ratio:auto;
    height:auto;
    max-height:none;
    overflow:hidden;
  }
  .v1 .hero-one>.hero-photo,.v3 .hero-three>.hero-three-photo{
    position:relative;
    order:1;
    flex:none;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:3 / 2;
    object-fit:contain;
    object-position:center;
    transform:none!important;
  }
  .v1 .hero-one>.hero-content,.v3 .hero-three>.hero-content{
    order:2;
    margin-top:-42px;
    width:100%;
    max-width:none;
    padding:64px 6vw 35px;
    flex:none;
    background:linear-gradient(180deg,rgba(15,36,41,0),rgba(15,36,41,.96) 30%,#102a2e 75%);
    animation:none;
  }
  .v1 .hero-one>.hero-shade,.v3 .hero-three>.hero-three-shade{
    background:linear-gradient(180deg,transparent 0%,transparent 32%,rgba(7,21,24,.29) 58%,transparent 73%);
  }
  .v1 .hero-one>.hero-note{
    position:relative;
    order:3;
    left:auto;
    right:auto;
    bottom:auto;
    padding:0 6vw 24px;
    background:#102a2e;
    text-align:left;
    color:#e9dec0;
  }
  .v2 .hero-two-image img{aspect-ratio:3 / 2;height:auto;max-height:none;object-fit:contain;border-radius:0}
}

@media (prefers-reduced-motion:reduce){
  .v1 .inner-hero>img,.v2 .inner-hero>img,.v3 .inner-hero>img,
  .v1 .hero-one>.hero-photo,.v3 .hero-three>.hero-three-photo{animation:none!important;transform:none!important}
}

/* 2026-11-04 — requested compact INNER-page heroes only.
   The entire original 3:2 photograph remains visible at its true aspect ratio.
   Home heroes and all other site blocks are intentionally untouched. */
@media (min-width:701px){
  .v1 .inner-hero,
  .v2 .inner-hero,
  .v3 .inner-hero{
    grid-template-rows:minmax(0,1fr);
    aspect-ratio:auto;
    height:clamp(340px,36vw,505px);
    min-height:0;
    max-height:505px;
  }
  .v1 .inner-hero>img,
  .v2 .inner-hero>img,
  .v3 .inner-hero>img{
    position:relative;
    grid-area:1 / 1;
    width:auto;
    max-width:100%;
    height:100%;
    min-height:0;
    max-height:100%;
    aspect-ratio:3 / 2;
    object-fit:contain;
    object-position:right center;
    justify-self:end;
    align-self:center;
    transform:none!important;
  }
  .v1 .inner-hero .inner-copy,
  .v2 .inner-hero .inner-copy,
  .v3 .inner-hero .inner-copy,
  .v3 .full-bleed-inner .inner-copy{
    height:100%;
    min-height:0;
    padding-block:clamp(22px,3vw,48px);
  }
}
@media (max-width:700px){
  .v1 .inner-hero>img,
  .v2 .inner-hero>img,
  .v3 .inner-hero>img,
  .v3 .full-bleed-inner>img{
    width:auto;
    max-width:100%;
    height:clamp(185px,55vw,230px);
    max-height:230px;
    min-height:0;
    aspect-ratio:3 / 2;
    object-fit:contain;
    object-position:center;
    align-self:center;
  }
}


/* TARJEEH — approved compact spacing and responsive V3 hero adjustment.
   Follow-up to the non-cropping hero treatment; all images, HTML and content
   are unchanged. Only section spacing and hero framing are affected. */

/* Reduce excessive whitespace consistently, not to the point of crowding. */
.wrap{padding-top:clamp(42px,4.7vw,65px);padding-bottom:clamp(42px,4.7vw,65px)}
.process{padding-top:clamp(44px,5vw,68px);padding-bottom:clamp(44px,5vw,68px)}
.about-pillars{padding-top:clamp(22px,2.5vw,34px)}
.related{padding-top:clamp(12px,2.4vw,30px)}
.section-heading{margin-bottom:clamp(22px,2.5vw,34px)}
.eyebrow{margin-bottom:clamp(13px,1.35vw,19px)}
.rail-top{margin-bottom:clamp(16px,1.8vw,23px)}
.detail-body{gap:clamp(22px,5vw,67px)}
.contact-layout{gap:clamp(26px,5vw,70px)}
.story{gap:clamp(20px,4.5vw,53px)}
.closing{padding-block:clamp(43px,4.5vw,60px)}
footer{padding-top:clamp(42px,4vw,56px);gap:clamp(18px,2.3vw,30px)}

/* A modest reduction of V3 homepage hero height, preserving its whole 3:2
   image through proportional contain sizing; no crop/zoom/distortion. */
@media (min-width:701px){
  .v3.page-home .hero-three{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    height:clamp(450px,55vw,800px);
    min-height:0;
    max-height:800px;
    aspect-ratio:auto;
    align-items:center;
    background:#172a2d;
  }
  .v3.page-home .hero-three>.hero-three-photo{
    position:relative;
    inset:auto;
    grid-area:1 / 1;
    display:block;
    height:100%;
    width:auto;
    max-width:100%;
    max-height:100%;
    aspect-ratio:3 / 2;
    object-fit:contain;
    object-position:right center;
    align-self:center;
    justify-self:end;
    transform:none!important;
    animation:none!important;
  }
  .v3.page-home .hero-three>.hero-content{
    position:relative;
    grid-area:1 / 1;
    z-index:3;
    align-self:center;
    justify-self:start;
    width:min(100%,1020px);
    max-width:100%;
    padding:clamp(45px,6vw,82px) 6vw;
  }
  .v3.page-home .hero-three>.hero-three-shade{z-index:2}
}

/* Mobile: retain the entire source photo and pull the introductory copy
   onto its lower edge. Extra title space continues in the matching dark
   overlay rather than hiding photo content or forcing a stretched crop. */
@media (max-width:700px){
  .wrap{padding-top:clamp(35px,7vw,47px);padding-bottom:clamp(35px,7vw,47px)}
  .process{padding-top:38px;padding-bottom:38px}
  .about-pillars{padding-top:22px}
  .related{padding-top:15px}
  .section-heading{margin-bottom:23px}
  .eyebrow{margin-bottom:13px}
  .closing{padding-block:40px}
  footer{padding-top:39px}
  .v1 .inner-hero .inner-copy,
  .v2 .inner-hero .inner-copy,
  .v3 .inner-hero .inner-copy,
  .v3 .full-bleed-inner .inner-copy{
    margin-top:-80px;
    padding:45px 6vw 30px;
  }
  .v1 .hero-one>.hero-content,
  .v3 .hero-three>.hero-content{
    margin-top:-80px;
    padding:45px 6vw 30px;
  }
  .v3.page-home .hero-three{min-height:0;height:auto;max-height:none;aspect-ratio:auto}
  .v3.page-home .hero-three>.hero-three-photo{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:3 / 2;
    object-fit:contain;
    transform:none!important;
    animation:none!important;
  }
  .v3.page-home .hero-three h1{
    font-size:clamp(39px,10vw,53px);
    line-height:1.03;
  }
  .v1 .inner-hero .inner-copy,.v2 .inner-hero .inner-copy,.v3 .inner-hero .inner-copy{
    max-width:100%;
  }
}
@media (min-width:701px) and (max-width:1024px){
  .wrap{padding-top:52px;padding-bottom:52px}
  .process{padding-block:56px}
  .v3.page-home .hero-three>.hero-content{padding:42px 5.5vw}
  .v3.page-home .hero-three h1{font-size:clamp(49px,6.9vw,75px)}
}


/* Mobile inner heroes: use the full viewport image width without trimming any
   part of the image. The increased overlap balances the previous compact
   overall hero height and keeps introductory text on the photo. */
@media (max-width:700px){
  .v1 .inner-hero>img,
  .v2 .inner-hero>img,
  .v3 .inner-hero>img,
  .v3 .full-bleed-inner>img{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:3 / 2;
    object-fit:contain;
    align-self:stretch;
  }
  .v1 .inner-hero .inner-copy,
  .v2 .inner-hero .inner-copy,
  .v3 .inner-hero .inner-copy,
  .v3 .full-bleed-inner .inner-copy{
    margin-top:-108px;
    padding:43px 6vw 28px;
  }
}

/* TARJEEH — focused correction 2026-11-04.
   V1/V3 mobile hero text overlays; V3 desktop full-bleed home and inner
   heroes; compact 3:2 V3 service images. Unaffected sections stay intact. */
@media(min-width:701px){
  .v3.page-home .hero-three,.v3 .inner-hero{
    display:block;position:relative;width:100%;height:clamp(450px,55vw,800px);
    min-height:0;max-height:800px;aspect-ratio:auto;overflow:hidden;background:#10272b;
  }
  .v3 .inner-hero{height:clamp(340px,36vw,505px);max-height:505px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}
  .v3.page-home .hero-three>.hero-three-photo,.v3 .inner-hero>img{
    position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;
    aspect-ratio:auto;object-fit:cover;object-position:center 48%;transform:none!important;animation:none!important;
  }
  .v3.page-home .hero-three>.hero-three-shade,.v3 .inner-hero::after{
    position:absolute;inset:0;z-index:2;
    background:linear-gradient(90deg,rgba(8,24,29,.85),rgba(8,24,29,.7) 35%,rgba(8,24,29,.18) 85%);
  }
  .v3.page-home .hero-three>.hero-content{
    position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    height:100%;width:min(100%,1060px);max-width:1060px;margin:0;padding:clamp(42px,5.5vw,80px) 6vw;
  }
  .v3.page-home .hero-three h1{font-size:clamp(52px,7vw,97px);line-height:1.04;max-width:100%;margin-bottom:25px}
  .v3.page-home .hero-three .hero-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:14px 24px;width:100%}
  .v3.page-home .hero-three .hero-bottom p{flex:0 0 100%;max-width:640px;margin-bottom:12px}
  .v3 .inner-hero .inner-copy,.v3 .full-bleed-inner .inner-copy{
    grid-area:1/1;position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;
    height:100%;width:min(100%,950px);max-width:950px;min-height:0;margin:0;padding:clamp(26px,4vw,58px) 6vw;background:none;
  }
}
@media(max-width:700px){
  .v1.page-home .hero-one,.v3.page-home .hero-three{
    position:relative;display:block;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto;
    overflow:hidden;background:#102a2e;
  }
  .v1.page-home .hero-one>.hero-photo,.v3.page-home .hero-three>.hero-three-photo{
    position:absolute;inset:0 0 auto;display:block;width:100%;height:auto;min-height:0;max-height:none;
    aspect-ratio:3/2;object-fit:contain;object-position:top center;transform:none!important;animation:none!important;
  }
  .v1.page-home .hero-one>.hero-shade,.v3.page-home .hero-three>.hero-three-shade{
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,24,29,.56) 0%,rgba(8,24,29,.72) 37%,#102a2e 70%,#102a2e 100%);
  }
  .v3.page-home .hero-three>.hero-three-shade{
    background:linear-gradient(180deg,rgba(8,24,27,.56) 0%,rgba(8,24,27,.73) 37%,#10272b 70%,#10272b 100%);
  }
  .v1.page-home .hero-one>.hero-content,.v3.page-home .hero-three>.hero-content{
    position:relative;z-index:3;display:block;width:100%;max-width:100%;height:auto;margin:0;
    padding:26px 6vw 36px;background:none;animation:none;
  }
  .v1.page-home .hero-one .eyebrow,.v3.page-home .hero-three .eyebrow{margin-bottom:14px;font-size:10px;line-height:1.5}
  .v1.page-home .hero-one h1,.v3.page-home .hero-three h1{
    font-size:clamp(37px,9.3vw,47px);line-height:1.05;letter-spacing:-.045em;margin:0 0 18px;
    max-width:100%;text-wrap:balance;
  }
  .v1.page-home .hero-one p,.v3.page-home .hero-three .hero-bottom p{
    font-size:14px;line-height:1.6;margin:0 0 20px;color:#edf1ee;
  }
  .v1.page-home .hero-one .hero-actions,.v3.page-home .hero-three .hero-bottom{
    display:flex;align-items:flex-start;flex-direction:column;justify-content:flex-start;flex-wrap:nowrap;
    gap:13px;margin-top:14px;
  }
  .v1.page-home .hero-one .hero-actions .button,.v3.page-home .hero-three .hero-bottom .button{
    min-height:50px;padding:12px 20px;margin:0;font-size:13px;
  }
  .v1.page-home .hero-one>.hero-note{
    position:relative;z-index:3;left:auto;right:auto;bottom:auto;margin:0;
    padding:0 6vw 24px;background:none;
  }
  .v1 .inner-hero .inner-copy,.v3 .inner-hero .inner-copy,.v3 .full-bleed-inner .inner-copy{
    position:relative;z-index:3;margin-top:clamp(-220px,-51vw,-184px);padding:32px 6vw 30px;
    min-height:0;background:linear-gradient(180deg,rgba(8,23,27,.55),rgba(10,28,32,.93) 52%,#102930 88%);
  }
  .v3 .inner-hero .inner-copy,.v3 .full-bleed-inner .inner-copy{
    background:linear-gradient(180deg,rgba(8,22,25,.57),rgba(10,27,30,.94) 52%,#10272b 88%);
  }
}
/* Original service photographs are 3:2. Never force portrait framing. */
.v3 .service-grid .card-image{width:100%;min-width:0;overflow:hidden}
.v3 .service-grid .card-image img{
  display:block;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:3/2;
  object-fit:contain;object-position:center;filter:none;transform:none;image-rendering:auto;
}
.v3 .service-grid .service-card:hover img{transform:none}
.v3 .service-grid .card-text{padding:16px 0 18px;gap:12px}
.v3 .service-grid .card-text h3{font-size:clamp(15px,1.5vw,19px)!important;line-height:1.36}
.v3 .industrial-grid .service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.v3 .industrial-grid .service-card{
  display:flex;flex-direction:column;align-items:stretch;min-width:0;gap:0;padding-bottom:0;border-bottom:0;
}
.v3 .industrial-grid .service-card .card-text{
  display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line);
}
.v3 .gallery-rail .gallery-slide{flex-basis:clamp(250px,27vw,365px)}
.v3 .gallery-rail .gallery-slide img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;transform:none;filter:none;
}
@media(min-width:701px) and (max-width:1024px){
  .v3 .industrial-grid .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .v3 .industrial-grid .service-grid{grid-template-columns:1fr;gap:20px}
  .v3 .industrial-grid .service-card{display:flex;flex-direction:column;gap:0}
  .v3 .gallery-rail .gallery-slide{flex-basis:min(80vw,340px)}
  .v3 .service-grid .card-text h3{font-size:16px!important}
}

/* TARJEEH — 2026-11-04 follow-up.
   Make V1 and V2 inner-page heroes full-width like V3.
   Only V1/V2 inner heroes are affected; all other sections remain unchanged. */
@media (min-width:701px){
  .v1 .inner-hero,
  .v2 .inner-hero{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    width:100%;
    height:clamp(340px,36vw,505px);
    min-height:0;
    max-height:505px;
    aspect-ratio:auto;
    overflow:hidden;
    background:#102930;
  }
  .v1 .inner-hero>img,
  .v2 .inner-hero>img{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    min-height:0;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center 48%;
    justify-self:stretch;
    align-self:stretch;
    transform:none!important;
    animation:none!important;
  }
  .v1 .inner-hero::after,
  .v2 .inner-hero::after{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }
  .v1 .inner-hero::after{
    background:linear-gradient(90deg,rgba(8,24,29,.85),rgba(8,24,29,.70) 35%,rgba(8,24,29,.18) 85%);
  }
  .v2 .inner-hero::after{
    background:linear-gradient(90deg,rgba(23,37,25,.85),rgba(23,37,25,.70) 35%,rgba(23,37,25,.18) 85%);
  }
  .v1 .inner-hero .inner-copy,
  .v2 .inner-hero .inner-copy{
    grid-area:1/1;
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    height:100%;
    width:min(100%,950px);
    max-width:950px;
    min-height:0;
    margin:0;
    padding:clamp(26px,4vw,58px) 6vw;
    background:none;
  }
}
@media (max-width:700px){
  .v1 .inner-hero,
  .v2 .inner-hero{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:auto;
    overflow:hidden;
    background:#102930;
  }
  .v1 .inner-hero>img,
  .v2 .inner-hero>img{
    position:absolute;
    inset:0 0 auto;
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:3/2;
    object-fit:contain;
    object-position:top center;
    align-self:auto;
    transform:none!important;
    animation:none!important;
  }
  .v1 .inner-hero::after,
  .v2 .inner-hero::after{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }
  .v1 .inner-hero::after{
    background:linear-gradient(180deg,rgba(8,24,29,.56) 0%,rgba(8,24,29,.72) 37%,#102a2e 70%,#102a2e 100%);
  }
  .v2 .inner-hero::after{
    background:linear-gradient(180deg,rgba(25,41,29,.56) 0%,rgba(25,41,29,.72) 37%,#1b3429 70%,#1b3429 100%);
  }
  .v1 .inner-hero .inner-copy,
  .v2 .inner-hero .inner-copy{
    position:relative;
    z-index:3;
    width:100%;
    max-width:100%;
    min-height:0;
    margin-top:clamp(-220px,-51vw,-184px);
    padding:32px 6vw 30px;
  }
  .v1 .inner-hero .inner-copy{
    background:linear-gradient(180deg,rgba(8,23,27,.55),rgba(10,28,32,.93) 52%,#102930 88%);
  }
  .v2 .inner-hero .inner-copy{
    background:linear-gradient(180deg,rgba(20,36,23,.55),rgba(27,52,41,.93) 52%,#1b3429 88%);
  }
}

/* TARJEEH | responsive repair (2026-11-04)
   V1/V2 inner-page heroes had a collapsed height below 701px after the
   full-bleed desktop update. Stack the original full-resolution image and
   HTML text in one grid cell: readable overlay, full image, no distortion.
   This patch deliberately avoids desktop and V3 changes. */
@media (max-width:700px) {
  .v1 .inner-hero,
  .v2 .inner-hero {
    position:relative;
    isolation:isolate;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    align-items:stretch;
    justify-items:stretch;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:auto;
    overflow:hidden;
  }
  .v1 .inner-hero>img,
  .v2 .inner-hero>img {
    position:relative;
    inset:auto;
    display:block;
    grid-area:1 / 1;
    order:initial;
    z-index:0;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:3 / 2;
    object-fit:contain;
    object-position:center;
    align-self:start;
    justify-self:stretch;
    transform:none!important;
    animation:none!important;
  }
  .v1 .inner-hero::after,
  .v2 .inner-hero::after {
    content:"";
    position:absolute;
    z-index:2;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(10,26,31,.84),rgba(10,26,31,.61) 60%,rgba(10,26,31,.40));
  }
  .v2 .inner-hero::after {
    background:linear-gradient(90deg,rgba(23,40,27,.84),rgba(23,40,27,.61) 60%,rgba(23,40,27,.40));
  }
  .v1 .inner-hero .inner-copy,
  .v2 .inner-hero .inner-copy {
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    grid-area:1 / 1;
    order:initial;
    align-self:stretch;
    justify-self:stretch;
    width:100%;
    max-width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:clamp(24px,6.3vw,34px) 6vw;
    background:none;
  }
  .v1 .inner-hero .inner-copy h1,
  .v2 .inner-hero .inner-copy h1 {
    font-size:clamp(29px,8vw,38px);
    line-height:1.12;
    max-width:100%;
    overflow-wrap:break-word;
    text-wrap:balance;
    color:#fff;
  }
  .v1 .inner-hero .inner-copy p,
  .v2 .inner-hero .inner-copy p {
    color:#f3f7f2;
    line-height:1.55;
    max-width:95%;
  }
}

/* TARJEEH | V3 mobile homepage service-card size correction.
   Compact horizontal cards with complete 3:2 images; desktop, tablet,
   V1/V2, other service sections, and all content remain unchanged. */
@media (max-width:700px){
  .v3 .industrial-grid .service-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  .v3 .industrial-grid .service-card{
    display:grid;
    grid-template-columns:minmax(0,42%) minmax(0,1fr);
    align-items:center;
    gap:14px;
    min-height:112px;
    padding:0 0 12px;
    border-bottom:1px solid var(--line);
  }
  .v3 .industrial-grid .service-card .card-image{
    width:100%;
    min-width:0;
    overflow:hidden;
  }
  .v3 .industrial-grid .service-card .card-image img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:3/2;
    object-fit:contain;
    object-position:center;
    filter:none;
    transform:none!important;
  }
  .v3 .industrial-grid .service-card .card-text{
    min-width:0;
    padding:0;
    border:0;
    align-items:center;
    gap:8px;
  }
  .v3 .industrial-grid .service-card .card-text h3{
    min-width:0;
    margin:0;
    font-size:clamp(14px,3.7vw,16px)!important;
    line-height:1.32;
    overflow-wrap:anywhere;
  }
  .v3 .industrial-grid .service-card .card-text span{
    flex:none;
    font-size:19px;
  }
}