/* =========================================================
   WADI AL SANNA - HOME PAGE
   Page-specific styles only
   Global design system remains in style.css
========================================================= */


/* =========================================================
   ABOUT
========================================================= */

.about-section{
  background:#fff;
  padding:clamp(40px,3.2vw,48px) 0;
}

.about-new-heading{
  max-width:610px;
  margin-bottom:20px;
}

.about-new-title{
  max-width:610px;
  margin:6px 0 0;
  color:var(--text);
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:var(--lh-heading);
  letter-spacing:-.025em;
  text-wrap:balance;
}

.about-new-grid{
  display:grid;
  grid-template-columns:
    minmax(0,1.35fr)
    minmax(500px,1fr);
  gap:clamp(30px,3.4vw,48px);
  align-items:start;
}

.about-new-left,
.about-new-right{
  min-width:0;
}

.about-new-left{
  display:block;
}

.about-new-right{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}

.about-intro-card{
  position:relative;
  display:block;
  min-height:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:none;
}

.about-intro-card:hover{
  transform:none;
  border-color:transparent;
  box-shadow:none;
}
.about-intro-content{
  max-width:500px;
}

.about-intro-main{
  max-width:500px;
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:600;
  line-height:1.6;
}

.about-intro-main strong{
  color:inherit;
  font-weight:700;
}

.about-intro-secondary{
  max-width:500px;
  margin:13px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.62;
}

.about-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,320px));
  gap:16px;
  margin-top:20px;
  justify-content:start;
}

.about-feature-card{
  position:relative;
  min-height:0;
  padding:16px 0 0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:none;
}

.about-feature-card:hover{
  transform:none;
  border-color:var(--line);
  box-shadow:none;
}

.about-feature-card::before{
  content:"";
  position:absolute;
  top:0;
  inset-inline-start:0;
  width:200px;
  height:1px;
  background:var(--line);
  display:block;
}

.about-feature-icon,
.about-feature-icon-orange{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  border-radius:8px;
  color:var(--orange);
  background:rgba(255,138,0,.10);
}

.about-feature-icon .ti{
  font-size:20px;
}

.about-feature-card h3{
  margin:0 0 6px;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.3;
}

.about-feature-accent{
  width:30px;
  height:2px;
  margin-bottom:9px;
  background:var(--orange);
}

.about-feature-card p{
  max-width:200px;
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
}

.about-image-card{
  width:min(100%,450px);
  min-width:0;
  height:auto;
  margin-inline-start:auto;
}

.about-image-wrap{
  position:relative;
  width:100%;
  height:405px;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(25,39,152,.12);
  border-radius:12px;
  background:var(--navy-deep);
}

.about-image-wrap img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center;
  transform-origin:center center;
}

.about-image-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(9,18,66,.78) 0%,
    rgba(9,18,66,.22) 42%,
    rgba(9,18,66,.04) 68%,
    transparent 100%
  );
}

.image-caption{
  position:absolute;
  z-index:3;
  inset-inline:16px;
  bottom:14px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  pointer-events:none;
}

.image-caption-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  min-height:24px;
  margin-bottom:6px;
  padding:4px 9px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(11,20,71,.72);
  color:var(--orange);
  font-family:var(--font-tech);
  font-size:9px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  backdrop-filter:blur(9px) saturate(1.12);
  -webkit-backdrop-filter:blur(9px) saturate(1.12);
  box-shadow:0 4px 14px rgba(8,16,58,.10);
}

.image-caption-kicker .status-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  box-shadow:0 0 0 3px rgba(255,138,0,.12);
}

.image-caption-title{
  display:block;
  max-width:100%;
  margin:0;
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
}

html[dir="rtl"] .image-caption-kicker{
  letter-spacing:0;
  text-transform:none;
}


/* =========================================================
   HOME SERVICES
========================================================= */

.services-section{
  position:relative;
  background:var(--surface);
  padding:clamp(40px,3.6vw,50px) 0;
}

.services-section .section-head{
  max-width:640px;
}

.services-section .section-head .intro{
  max-width:500px;
}

html[dir="rtl"] .services-section .section-head{
  max-width:500px;
}

.services-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  margin-top:20px;
}

.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:252px;
  padding:20px 18px 17px;
  overflow:hidden;
  border:1px solid rgba(25,39,152,.11);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:
    transform .28s var(--ease),
    border-color .28s ease,
    box-shadow .28s ease;
}

.service-card:hover{
  transform:translateY(-3px);
  border-color:rgba(25,39,152,.19);
  box-shadow:var(--shadow-md);
}

.service-card-number{
  position:absolute;
  top:18px;
  inset-inline-end:18px;
  font-size:12px;
}

.service-card-icon{
  width:60px;
  height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:15px;
  border-radius:14px;
  color:var(--orange);
  background:rgba(255,138,0,.10);
}

.service-card-icon .ph{
  font-size:30px;
  line-height:1;
}

.service-card h3{
  max-width:245px;
  margin:0 0 8px;
  color:var(--brand-blue);
  font-size:15px;
  font-weight:700;
  line-height:1.3;
}

.service-card>p{
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.52;
}

.service-card-details{
  position:absolute;
  inset-inline:0;
  top:128px;
  bottom:0;
  z-index:3;
  display:flex;
  align-items:flex-start;
  padding:19px 18px 18px;
  background:rgba(25,39,152,.66);
  border-top:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(16px) saturate(1.18);
  -webkit-backdrop-filter:blur(16px) saturate(1.18);
  transform:translateY(102%);
  opacity:0;
  pointer-events:none;
  transition:
    transform .42s var(--ease),
    opacity .28s ease;
}

.service-detail-list{
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.service-detail-list li{
  position:relative;
  padding-inline-start:15px;
  color:#fff;
  font-size:11.5px;
  font-weight:600;
  line-height:1.35;
}

.service-detail-list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.52em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
}

.service-card:hover .service-card-details{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.service-card-toggle{
  display:none;
  color:var(--orange);
}

.services-link-wrap{
  margin-top:20px;
}




/* =========================================================
   HOME SECTION LINKS
========================================================= */

.section-link-wrap{
  display:flex;
  justify-content:flex-end;
  margin-top:20px;
}

.services-more-link,
.capability-more-link,
.industries-more-link{
  position:relative;

  display:inline-flex;
  align-items:center;

  gap:8px;

  width:max-content;
  max-width:100%;

  padding:4px 0 8px;

  color:var(--brand-blue);

  font-size:var(--fs-label);
  font-weight:800;

  letter-spacing:.045em;
  line-height:1.2;

  text-transform:uppercase;
}

.services-more-link::after,
.capability-more-link::after,
.industries-more-link::after{
  content:"";

  position:absolute;

  inset-inline-start:0;
  bottom:0;

  width:34px;
  height:2px;

  background:var(--orange);

  transition:width .35s var(--ease);
}

.services-more-link:hover::after,
.capability-more-link:hover::after,
.industries-more-link:hover::after{
  width:100%;
}

.services-more-link .direction-arrow,
.capability-more-link .direction-arrow,
.industries-more-link .direction-arrow{
  color:var(--orange);
}


/* =========================================================
   HOME MACHINING CAPABILITY
========================================================= */

.cap{
  background:var(--surface2);
  padding:clamp(40px,3.6vw,50px) 0;
}

.cap .section-head{
  max-width:640px;
  margin-bottom:20px;
}

.cap .section-head .intro{
  max-width:500px;
}

.cap .section-head .intro strong{
  color:var(--brand-blue);
  font-weight:700;
}

html[dir="rtl"] .cap .section-head{
  max-width:520px;
}

html[dir="rtl"] .cap .section-head .intro{
  max-width:500px;
}

.machine-showcase{
  display:grid;
  grid-template-columns:
    minmax(0,1.14fr)
    minmax(390px,.92fr);
  gap:clamp(135px,10vw,160px);
  align-items:start;
}

.machine-showcase-media{
  min-width:0;
}

.machine-showcase-image{
  position:relative;
  width:100%;
  height:388px;
  overflow:hidden;
  border:1px solid rgba(17,26,61,.1);
  border-radius:12px;
  background:#dfe3eb;
  box-shadow:0 9px 25px rgba(16,27,88,.07);
}

.machine-showcase-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform-origin:center center;
}

.machine-showcase-image-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(9,18,66,.78) 0%,
    rgba(9,18,66,.22) 42%,
    rgba(9,18,66,.04) 68%,
    transparent 100%
  );
}

.machine-showcase-content{
  min-width:0;
  min-height:350px;
  display:flex;
  flex-direction:column;
}

.machine-identity{
  padding-bottom:14px;
  border-bottom:1px solid rgba(17,26,61,.12);
}

.machine-model{
  display:block;
  margin-bottom:5px;
  color:var(--orange);
  font-family:var(--font-tech);
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.07em;
}

.machine-identity h3{
  margin:0;
  color:var(--brand-blue);
  font-size:clamp(17px,1.4vw,20px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.018em;
}

.machine-spec-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:28px;
  margin-top:2px;
}

.machine-spec-row{
  min-width:0;
  padding:12px 0 11px;
  border-bottom:1px solid rgba(17,26,61,.11);
}

.machine-spec-value{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:3px;
  width:max-content;
  max-width:100%;
  color:var(--text);
  font-family:var(--font-tech);
  font-size:18px;
  font-weight:600;
  line-height:1.18;
  white-space:nowrap;
}

.machine-spec-value-long{
  font-size:15px;
}

.machine-count{
  display:inline-block;
  min-width:1ch;
}

.machine-dimension-symbol{
  display:inline-block;
  margin-inline:1px;
  color:var(--muted-light);
  font-size:.82em;
  font-weight:500;
}

.machine-spec-unit{
  display:inline-block;
  margin-inline-start:3px;
  color:var(--orange);
  font-family:var(--font-tech);
  font-size:9.5px;
  font-weight:600;
  line-height:1;
}

.machine-spec-label{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:600;
  line-height:1.35;
}

.machine-technology{
  margin-top:20px;
}

.machine-technology-label{
  display:block;
  margin-bottom:8px;
  color:var(--brand-blue);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.machine-technology-list{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 9px;
  color:var(--text);
  font-size:10.5px;
  font-weight:600;
  line-height:1.35;
}

.machine-tech-dot{
  width:4px;
  height:4px;
  flex:0 0 4px;
  border-radius:50%;
  background:var(--orange);
}

.machine-showcase-link-wrap{
  display:flex;
  justify-content:flex-end;
  margin-top:auto;
  padding-top:20px;
}
/* =========================================================
   HOME INDUSTRIES
========================================================= */

.industries-section{
  background:#fff;
  padding:clamp(42px,3.8vw,52px) 0;
}

.industries-section .section-head{
  max-width:640px;
}

.industries-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  margin-top:20px;
}

.industry-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(25,39,152,.1);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:
    transform .28s var(--ease),
    border-color .28s ease,
    box-shadow .28s ease;
}

.industry-card:hover{
  transform:translateY(-3px);
  border-color:rgba(25,39,152,.18);
  box-shadow:var(--shadow-md);
}

.industry-card-media{
  position:relative;
  height:220px;
  overflow:hidden;
  background:var(--navy-deep);
}

.industry-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform-origin:center center;
  transition:transform .42s var(--ease);
}

.industry-card:hover .industry-card-media img{
  transform:scale(1.015);
}

.industry-card-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(9,18,66,.78) 0%,
    rgba(9,18,66,.22) 42%,
    rgba(9,18,66,.04) 68%,
    transparent 100%
  );
}


.industry-card-body{
  padding:14px 16px 16px;
}

.industry-card-body p{
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.52;
}

.industries-link-wrap{
  margin-top:20px;
}
/* =========================================================
   WHY / LOCALIZATION
========================================================= */

.why-section{
  background:var(--surface);
  padding:clamp(40px,3.6vw,50px) 0;
}

.why-section .section-head{
  max-width:660px;
}

.why-section .section-head .intro{
  max-width:500px;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin-top:20px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

.why-item{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  background:#fff;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  transition:
    background .25s ease,
    transform .25s ease;
}

.why-item:hover{
  position:relative;
  z-index:2;
  transform:translateY(-2px);
  background:var(--surface-blue);
  box-shadow:0 7px 18px rgba(16,27,88,.055);
}

.check{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--orange);
  background:rgba(255,138,0,.10);
  border-radius:8px;
}

.check .ti{
  font-size:18px;
}
/* ========================================================= 
   HOME RTL 
========================================================= */ 
#home .hero-image-ar{
  display:none;
}

html[dir="rtl"] #home .hero-image-en{
  display:none;
}

html[dir="rtl"] #home .hero-image-ar{
  display:block;
}
#home .hero-background img{
  transform:scale(1);
}
html[dir="rtl"] .section-link-wrap{ 
  width:100%; 
  display:flex; 
  justify-content:flex-end; 
}
/* Arabic typography: compact, balanced and intentionally narrower than English. */
html[dir="rtl"] #home .hero-title{
  max-width:620px;
  font-size:clamp(2.05rem,3vw,3rem);
  line-height:1.18;
  letter-spacing:0;
  text-wrap:balance;
}

html[dir="rtl"] .section-title{
  width:min(100%,500px);
  max-width:500px;
  font-size:clamp(1.6rem,2vw,2rem);
  line-height:1.28;
  letter-spacing:0;
  text-wrap:balance;
}

html[dir="rtl"] .about-new-title{
  width:min(100%,570px);
  max-width:570px;
  font-size:clamp(1.6rem,2vw,2rem);
  line-height:1.28;
  letter-spacing:0;
  text-wrap:balance;
}

html[dir="rtl"] .machine-showcase-content{
  text-align:right;
}

html[dir="rtl"] .machine-model{
  direction:ltr;
  text-align:right;
}

html[dir="rtl"] .machine-spec-value{
  direction:ltr;
}


html[dir="rtl"] .machine-technology-list{
  justify-content:flex-start;
}

html[dir="rtl"] .machine-technology-list .ltr-text{
  direction:ltr!important;
}

html[dir="rtl"] .machine-showcase-link-wrap,
html[dir="rtl"] .services-link-wrap,
html[dir="rtl"] .industries-link-wrap{
  width:100%;
  display:flex;
  justify-content:flex-end;
}
html[dir="rtl"] #home .hero-description{
  width:min(100%,500px);
  max-width:500px;
  text-wrap:balance;
}
/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width:1199.98px){

  .services-card-grid,
  .industries-grid{
    gap:12px;
  }

  .service-card{
    min-height:248px;
    padding:19px 17px 16px;
  }

  .service-card-icon{
    width:58px;
    height:58px;
  }

  .service-card-icon .ph{
    font-size:30px;
  }

  .machine-showcase{
    grid-template-columns:
      minmax(0,1.08fr)
      minmax(360px,.9fr);
    gap:48px;
  }

  .machine-showcase-image{
    height:368px;
  }

  .machine-showcase-content{
    min-height:368px;
  }

  .machine-spec-list{
    column-gap:22px;
  }

  .machine-spec-value{
    font-size:17px;
  }

  .machine-spec-value-long{
    font-size:14.5px;
  }
  .industry-card-media{
    height:205px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:991.98px){

  .about-new-heading,
  .about-new-title,
  .services-section .section-head,
  .services-section .section-head .intro,
  .cap .section-head,
  .cap .section-head .intro,
  .industries-section .section-head,
  .why-section .section-head,
  .why-section .section-head .intro,
  .about-intro-content,
  .about-intro-main,
  .about-intro-secondary{
    max-width:100%;
  }

  .about-new-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .about-new-right{
    justify-content:flex-start;
  }

  .about-image-card{
    width:min(100%,405px);
    margin-inline-start:0;
  }

  .about-image-wrap{
    height:340px;
  }

  .services-card-grid,
  .industries-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .service-card{
    min-height:242px;
  }

  .machine-showcase{
    grid-template-columns:1fr;
    gap:22px;
  }

  .machine-showcase-image{
    width:100%;
    height:auto;
    aspect-ratio:16 / 8.7;
  }

  .machine-showcase-content{
    min-height:0;
    max-width:720px;
  }

  .machine-spec-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:24px;
  }

  .machine-spec-value{
    font-size:18px;
  }

  .machine-spec-value-long{
    font-size:15px;
  }

  .machine-showcase-link-wrap{
    margin-top:15px;
  }
  .why-grid{
    grid-template-columns:repeat(2,1fr);
  }

  html[dir="rtl"] #home .hero-title{
    max-width:560px;
    font-size:clamp(1.95rem,4.8vw,2.55rem);
    line-height:1.19;
  }

  html[dir="rtl"] .section-title{
    width:min(100%,480px);
    max-width:480px;
    font-size:clamp(1.5rem,3.4vw,1.85rem);
    line-height:1.30;
  }

  html[dir="rtl"] .about-new-title{
    width:min(100%,540px);
    max-width:540px;
    font-size:clamp(1.5rem,3.4vw,1.85rem);
    line-height:1.30;
  }

}
/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767.98px){

  .image-caption{
    inset-inline:13px;
    bottom:12px;
  }

  .image-caption-kicker{
    gap:6px;
    margin-bottom:4px;
    font-size:8.5px;
  }

  .image-caption-kicker .status-dot{
    width:5px;
    height:5px;
    flex-basis:5px;
  }

  .image-caption-title{
    font-size:12.5px;
  }

  .about-section,
  .services-section,
  .cap,
  .industries-section,
  .why-section{
    padding:28px 0;
  }

  .about-new-heading{
    margin-bottom:16px;
  }

  .about-intro-card{
    padding:0;
    min-height:0;
  }

  .about-feature-grid{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:20px;
  }

  .about-feature-card{
    min-height:0;
    padding:14px 0 0;
  }

  .about-image-card{
    width:100%;
    max-width:405px;
  }

  .about-image-wrap{
    height:300px;
  }

  .services-card-grid,
  .industries-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
  }

  .service-card{
    min-height:236px;
    padding:16px 14px 15px;
  }

  .service-card-number{
    top:14px;
    inset-inline-end:14px;
  }

  .service-card-icon{
    width:58px;
    height:58px;
    margin-bottom:12px;
    border-radius:12px;
  }

  .service-card-icon .ph{
    font-size:30px;
  }

  .service-card h3{
    margin-bottom:7px;
    font-size:13px;
    line-height:1.28;
  }

  .service-card>p{
    font-size:11px;
    line-height:1.5;
  }

  .service-card:hover .service-card-details{
    transform:translateY(102%);
    opacity:0;
  }

  .service-card.is-open .service-card-details{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .service-card-toggle{
    position:absolute;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    z-index:4;
    inset-inline-end:12px;
    bottom:11px;
    width:28px;
    height:28px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--orange);
  }

  .service-card-toggle .ti{
    font-size:18px;
    transition:
      transform .28s ease,
      color .28s ease;
  }

  .service-card.is-open .service-card-toggle .ti{
    transform:rotate(180deg);
    color:var(--orange);
  }

  .service-card-details{
    top:126px;
    padding:16px 14px 44px;
  }

  .cap .section-head{
    margin-bottom:18px;
  }

  .machine-showcase{
    gap:16px;
  }

  .machine-showcase-image{
    aspect-ratio:16 / 9.4;
    height:auto;
    border-radius:11px;
  }

  .machine-identity{
    padding-bottom:12px;
  }

  .machine-model{
    margin-bottom:4px;
    font-size:10px;
  }

  .machine-identity h3{
    font-size:18px;
  }

  .machine-spec-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:20px;
  }

  .machine-spec-row{
    padding:10px 0;
  }

  .machine-spec-value{
    font-size:16px;
  }

  .machine-spec-value-long{
    font-size:13px;
  }

  .machine-spec-label{
    margin-top:4px;
    font-size:10px;
  }

  .machine-technology{
    margin-top:12px;
  }

  .machine-technology-list{
    gap:6px 8px;
    font-size:10px;
  }

  .machine-showcase-link-wrap{
    padding-top:13px;
  }
  .industry-card-media{
    height:185px;
  }

  .industry-card-body{
    padding:15px 13px 16px;
  }
  .why-grid{
    grid-template-columns:1fr;
  }

  .why-item{
    min-height:60px;
  }

  html[dir="rtl"] #home .hero-title{
    max-width:100%;
    font-size:clamp(1.8rem,6.8vw,2.2rem);
    line-height:1.20;
  }

  html[dir="rtl"] .section-title,
  html[dir="rtl"] .about-new-title{
    width:min(100%,460px);
    max-width:460px;
    font-size:clamp(1.4rem,5vw,1.7rem);
    line-height:1.32;
  }

}


/* =========================================================
   HOME - MOBILE HERO STANDARD
   Matches the approved Services mobile Hero
========================================================= */

@media (max-width:575.98px){

  html[dir="ltr"] #home .hero-background img{
    object-position:58% center;
  }

  html[dir="rtl"] #home .hero-background img{
    object-position:42% center;
  }
#home .hero-description{
  width:min(100%,340px);
  max-width:340px;
  text-wrap:balance;
}

html[dir="rtl"] #home .hero-description{
  width:min(100%,290px);
  max-width:290px;
  text-wrap:balance;
}
  html[dir="rtl"] #home .hero-title{
    max-width:100%;
    font-size:clamp(1.7rem,7.2vw,2.05rem);
    line-height:1.22;
  }

  html[dir="rtl"] .section-title,
  html[dir="rtl"] .about-new-title{
    width:100%;
    max-width:430px;
    font-size:clamp(1.32rem,5.7vw,1.58rem);
    line-height:1.34;
  }

  /* Home Hero CTAs */
  #home .hero-main{
    align-items:center;
    padding-top:54px;
    padding-bottom:6px;
  }

  #home .hero-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    align-items:stretch;
    margin-top:16px;
  }

  #home .hero-buttons .btn{
    width:100%;
    min-width:0;
    min-height:39px;
    padding:8px 9px;
    font-size:9.5px;
    line-height:1.2;
    white-space:nowrap;
  }

  html[dir="rtl"] #home .hero-buttons{
    width:min(100%,310px);
    margin-inline-end:auto;
  }

  #home .hero-spec-panel{
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:calc(100% + 16px);
    min-height:72px;
    margin-inline:-8px;
  }

  #home .hero-spec-panel .hero-spec-item{
    min-width:0;
    min-height:72px;
    padding:7px 5px 8px;
    gap:5px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-bottom:0;
    overflow:hidden;
  }

  #home .hero-spec-panel .hero-spec-item:not(:last-child){
    border-inline-end:1px solid rgba(255,255,255,.14);
  }

  #home .hero-spec-panel .hero-spec-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    margin:0;
    border-radius:8px;
  }

  #home .hero-spec-panel .hero-spec-icon .ti{
    font-size:16px;
  }

  #home .hero-spec-panel .hero-spec-content{
    min-width:0;
    width:100%;
    text-align:center;
  }

  #home .hero-spec-panel .hero-spec-content strong{
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    font-size:8.7px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    text-wrap:balance;
  }

  #home .hero-spec-panel .hero-spec-content span{
    display:none;
  }

  html[dir="ltr"] #home .hero-spec-panel .hero-spec-item,
  html[dir="rtl"] #home .hero-spec-panel .hero-spec-item,
  html[dir="ltr"] #home .hero-spec-panel .hero-spec-content,
  html[dir="rtl"] #home .hero-spec-panel .hero-spec-content{
    text-align:center;
  }

  /* Home final CTA: keep both buttons side-by-side like Gantry */
  .cta .cta-buttons{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:min(100%,300px);
    margin-inline:auto;
    align-items:stretch!important;
  }

  .cta .cta-buttons .btn{
    width:100%;
    min-width:0;
    min-height:39px;
    padding:8px 9px;
    font-size:9.5px;
    line-height:1.2;
    white-space:nowrap;
    justify-content:center;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:575.98px){

  .about-section,
  .services-section,
  .cap,
  .industries-section,
  .why-section{
    padding:26px 0;
  }

  .image-caption-title{
    font-size:12px;
  }

  .about-image-wrap{
    height:260px;
  }

  .services-card-grid,
  .industries-grid{
    gap:8px;
  }

  .service-card{
    min-height:184px;
    padding:13px 10px 38px;
  }

  .service-card-number{
    top:11px;
    inset-inline-end:11px;
    font-size:10px;
  }

  .service-card-icon{
    width:44px;
    height:44px;
    margin-bottom:9px;
    border-radius:10px;
  }

  .service-card-icon .ph{
    font-size:25px;
  }

  .service-card h3{
    margin-bottom:5px;
    font-size:11px;
    line-height:1.25;
  }

  .service-card>p{
    font-size:10px;
    line-height:1.42;
  }

  .service-detail-list{
    gap:6px;
  }

  .service-detail-list li{
    padding-inline-start:12px;
    font-size:9.5px;
    line-height:1.3;
  }

  .service-detail-list li::before{
    width:5px;
    height:5px;
  }

  .service-card-details{
    top:96px;
    padding:12px 10px 34px;
  }

  .service-card-toggle{
    inset-inline-end:8px;
    bottom:7px;
    width:24px;
    height:24px;
  }

  .service-card-toggle .ti{
    font-size:16px;
  }

  .machine-showcase-image{
    aspect-ratio:16 / 10;
    height:auto;
  }

  .machine-spec-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:14px;
  }

  .machine-spec-value{
    font-size:14px;
  }

  .machine-spec-value-long{
    font-size:12px;
  }

  .machine-spec-unit{
    font-size:8.5px;
  }

  .machine-spec-label{
    font-size:9.4px;
  }

  .machine-technology-label{
    font-size:9px;
  }

  .machine-technology-list{
    font-size:9.5px;
  }
  .industry-card-media{
    height:160px;
  }

  .industry-card-body p{
    font-size:11px;
  }

}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:420px){

  .about-section,
  .services-section,
  .cap,
 
  .industries-section,

  .why-section{
    padding:24px 0;
  }

  html[dir="rtl"] #home .hero-title{
    font-size:clamp(1.58rem,7.4vw,1.85rem);
    line-height:1.24;
  }

  html[dir="rtl"] .section-title,
  html[dir="rtl"] .about-new-title{
    max-width:100%;
    font-size:clamp(1.25rem,5.9vw,1.48rem);
    line-height:1.36;
  }

  .services-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .industries-grid{
    grid-template-columns:1fr;
  }

  .service-card{
    min-height:178px;
    padding:12px 9px 36px;
  }

  .service-card-icon{
    width:42px;
    height:42px;
    margin-bottom:8px;
  }

  .service-card-icon .ph{
    font-size:24px;
  }

  .service-card h3{
    font-size:11px;
    line-height:1.22;
  }

  .service-card>p{
    font-size:10px;
    line-height:1.42;
  }

  .service-card-details{
    top:92px;
    padding:11px 9px 32px;
  }

  .service-detail-list li{
    font-size:9.2px;
  }

  .machine-showcase-image{
    aspect-ratio:16 / 10.5;
  }

  .machine-identity h3{
    font-size:16px;
  }

  .machine-spec-list{
    grid-template-columns:1fr 1fr;
    column-gap:12px;
  }

  .machine-spec-row{
    padding:9px 0;
  }

  .machine-spec-value{
    font-size:13px;
  }

  .machine-spec-value-long{
    font-size:11px;
  }

  .machine-spec-label{
    font-size:9px;
  }

  .machine-technology-list{
    gap:6px;
    font-size:9px;
  }
  .industry-card-media{
    height:210px;
  }

  .industry-card-body p{
    font-size:11px;
    line-height:1.5;
  }
}
/* =========================================================
   HOME REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .service-card-details{
    transition:none!important;
  }

}

/* =========================================================
   HOME — BUTTON ARROW CLEANUP
   Remove CTA arrows in Hero and Final CTA only
========================================================= */

#home .hero-buttons .direction-arrow,
.cta .cta-buttons .direction-arrow {
  display: none;
}


/* =========================================================
   HOME - MOBILE FOOTER TAGLINE ALIGNMENT
   EN: two centered lines | AR: one centered line
========================================================= */
@media (max-width:575.98px){
  .foot-bottom,
  html[dir="rtl"] .foot-bottom{
    align-items:center;
    text-align:center;
  }

  .foot-bottom strong{
    display:block;
    margin-inline:auto;
    text-align:center;
  }

  html[dir="ltr"] .foot-bottom strong{
    width:220px;
    max-width:100%;
    font-size:10px;
    line-height:1.35;
    letter-spacing:.04em;
    white-space:normal;
  }

  html[dir="rtl"] .foot-bottom strong{
    width:auto;
    max-width:100%;
    font-size:10px;
    line-height:1.35;
    letter-spacing:0;
    text-transform:none;
    white-space:nowrap;
  }

  .foot-bottom .copyright{
    width:100%;
    text-align:center;
  }
}

/* =========================================================
   HOME - MOBILE INDUSTRIES GRID 2x2
   Keep sector cards compact and consistent on small screens
========================================================= */
@media (max-width:575.98px){
  .industries-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .industry-card-media{
    height:145px;
  }

  .industry-card-body{
    padding:11px 10px 12px;
  }

  .industry-card-body p{
    font-size:10.5px;
    line-height:1.42;
  }
}

@media (max-width:420px){
  .industries-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .industry-card-media{
    height:132px;
  }

  .industry-card-body{
    padding:10px 9px 11px;
  }

  .industry-card-body p{
    font-size:10px;
    line-height:1.4;
  }
}