/* Miras Works v24: restyled to match the printed business card.
   Navy field, white paper, thin blue contour lines, light wide-set wordmark type. */
:root{
  --navy:#0A214B;
  --navy-deep:#061633;
  --blue:#2F65B5;
  --blue-soft:#D5DFF2;
  --mist:#F3F5FA;
  --ink:#0A214B;
  --muted:#55648B;
  --white:#fff;
  --line:rgba(10,33,75,.16);
  --line-strong:rgba(10,33,75,.32);
  --card-line:rgba(255,255,255,.22);
  --display:"Jost","Montserrat",Arial,sans-serif;
  --text:"Inter","Montserrat",Arial,sans-serif;
  --arcs:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20600'%20fill='none'%20stroke='%232F65B5'%20stroke-width='1.2'%3E%3Ccircle%20cx='880'%20cy='300'%20r='250'%20opacity='.7'/%3E%3Ccircle%20cx='880'%20cy='300'%20r='330'%20opacity='.5'/%3E%3Ccircle%20cx='880'%20cy='300'%20r='420'%20opacity='.32'/%3E%3Cpath%20d='M740%200V600'%20opacity='.6'/%3E%3C/svg%3E");
  --arcs-left:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20600'%20fill='none'%20stroke='%232F65B5'%20stroke-width='1.2'%3E%3Ccircle%20cx='120'%20cy='300'%20r='250'%20opacity='.7'/%3E%3Ccircle%20cx='120'%20cy='300'%20r='330'%20opacity='.5'/%3E%3Ccircle%20cx='120'%20cy='300'%20r='420'%20opacity='.32'/%3E%3Cpath%20d='M260%200V600'%20opacity='.6'/%3E%3C/svg%3E");
  --corner-tr:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20fill='none'%20stroke='%232F65B5'%20stroke-width='1'%3E%3Ccircle%20cx='200'%20cy='0'%20r='90'%20opacity='.75'/%3E%3Ccircle%20cx='200'%20cy='0'%20r='130'%20opacity='.55'/%3E%3Ccircle%20cx='200'%20cy='0'%20r='170'%20opacity='.35'/%3E%3C/svg%3E");
  --corner-bl:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20fill='none'%20stroke='%232F65B5'%20stroke-width='1'%3E%3Ccircle%20cx='0'%20cy='200'%20r='90'%20opacity='.75'/%3E%3Ccircle%20cx='0'%20cy='200'%20r='130'%20opacity='.55'/%3E%3Ccircle%20cx='0'%20cy='200'%20r='170'%20opacity='.35'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:clip;
  background:var(--white);
  color:var(--ink);
  font-family:var(--text);
  line-height:1.65;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Header: the white back of the card ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  width:100%;
  height:84px;
  padding:0 clamp(20px,4vw,56px);
  display:flex;
  align-items:center;
  gap:30px;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--display);
  font-size:26px;
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy);
}
.nav{
  display:flex;
  gap:28px;
  margin-left:auto;
  font-size:14px;
  font-weight:500;
}
.header-actions{display:flex;align-items:center;gap:10px}
.lang-btn{
  border:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
  padding:8px 16px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.lang-btn:hover{background:var(--navy);color:#fff}
.menu-btn{
  display:none;
  border:0;
  background:transparent;
  color:var(--navy);
  font-size:24px;
  cursor:pointer;
}

/* ---------- Hero: the navy front of the card ---------- */
.hero{
  width:100%;
  min-height:680px;
  position:relative;
  overflow:hidden;
  background:var(--navy);
}
.hero>img{
  width:100%;
  height:680px;
  object-fit:cover;
  display:block;
}
.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,22,51,.62) 0%,rgba(6,22,51,.34) 40%,rgba(6,22,51,0) 72%);
}
.hero-content{
  position:absolute;
  z-index:2;
  left:max(6%,24px);
  top:50%;
  transform:translateY(-50%);
  width:min(640px,86%);
  color:#fff;
  text-shadow:0 1px 3px rgba(6,22,51,.45),0 2px 22px rgba(6,22,51,.6);
}
.hero-category{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 22px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--blue-soft);
}
.hero-category::before{
  content:"";
  width:56px;
  height:1px;
  background:var(--blue-soft);
}
.hero h1{
  margin:0;
  font-family:var(--display);
  font-size:clamp(34px,5vw,56px);
  line-height:1.12;
  font-weight:300;
  letter-spacing:.01em;
}
.hero-content>p:not(.hero-category){
  max-width:540px;
  font-size:17px;
  line-height:1.75;
  margin:24px 0 32px;
  color:rgba(255,255,255,.88);
}
.hero-button{
  display:inline-block;
  border:1px solid #fff;
  padding:14px 28px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  background:#fff;
  color:var(--navy);
  text-shadow:none;
}
.hero-button:hover{background:transparent;color:#fff}

/* ---------- Vision: typographic, same as the card front ---------- */
.vision-statement{
  position:relative;
  padding:96px 20px 104px;
  background:var(--navy);
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.vision-statement::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--arcs-left) left center/auto 100% no-repeat;
  pointer-events:none;
}
.vision-inner{position:relative;max-width:820px;margin:0 auto}
.vision-statement h2{
  color:#fff;
  font-size:clamp(34px,5.4vw,64px);
  font-weight:300;
  line-height:1.12;
  letter-spacing:.01em;
  text-transform:none;
}
.vision-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:34px auto 30px;
  max-width:420px;
}
.vision-rule::before,.vision-rule::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,.7);
}
.vision-rule i{
  width:6px;height:6px;
  border:1px solid #fff;
  transform:rotate(45deg);
}
.vision-statement p{
  margin:0 auto;
  max-width:620px;
  font-size:clamp(16px,1.9vw,20px);
  line-height:1.8;
  color:rgba(255,255,255,.86);
}

/* ---------- Sections ---------- */
.section{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:92px 0;
  position:relative;
}
h2{
  margin:0;
  text-align:center;
  font-family:var(--display);
  font-size:40px;
  line-height:1.15;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);
}
.sectors-section h2,
.process-copy h2{
  letter-spacing:.02em;
  text-transform:none;
  font-size:38px;
}

/* corner contour arcs, as on the card back */
.services{overflow:visible}
.services::before{
  content:"";
  position:absolute;
  top:0;right:calc(50% - 50vw);
  width:200px;height:200px;
  background:var(--corner-tr) no-repeat right top/contain;
  pointer-events:none;
}
.requests::after{
  content:"";
  position:absolute;
  bottom:0;left:calc(50% - 50vw);
  width:200px;height:200px;
  background:var(--corner-bl) no-repeat left bottom/contain;
  pointer-events:none;
  z-index:0;
}
.requests>*{position:relative;z-index:1}

.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  margin-top:52px;
}
.services-image img{
  width:100%;
  height:410px;
  object-fit:cover;
  display:block;
}
.services-copy{text-align:left}
.services-copy h3{
  margin:0 0 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--navy);
  color:var(--navy);
  font-family:var(--display);
  font-size:26px;
  font-weight:400;
  line-height:1.25;
}
.services-copy p{
  margin:0;
  font-size:16px;
  line-height:1.8;
  color:#2B3C63;
}

.service-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:64px;
  border:1px solid var(--navy);
}
.service-card{
  min-height:250px;
  padding:26px 24px;
  border-right:1px solid var(--card-line);
  background:var(--navy);
  display:flex;
  flex-direction:column;
}
.service-card:last-child{border-right:0}
.service-card>span{display:none}
.service-card h3{
  margin:44px 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.7);
  color:#fff;
  font-family:var(--display);
  font-size:22px;
  font-weight:400;
  line-height:1.25;
}
.service-card p{
  margin:0;
  font-size:14px;
  font-weight:500;
  color:#fff;
}

/* ---------- Gallery on navy ---------- */
.inspiration{
  position:relative;
  padding:92px 20px 96px;
  background:var(--navy);
  overflow:hidden;
}
.inspiration::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--arcs) right center/auto 100% no-repeat;
  pointer-events:none;
}
.inspiration .inner{
  position:relative;
  width:min(1120px,100%);
  margin:0 auto;
}
.inspiration h2{margin-bottom:46px;color:#fff}
.gallery-feature{
  width:100%;
  height:540px;
  overflow:hidden;
  background:var(--navy-deep);
}
.gallery-feature img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gallery-thumbs{
  display:flex;
  gap:10px;
  margin-top:14px;
  overflow-x:auto;
  padding-bottom:5px;
}
.thumb{
  width:78px;
  height:62px;
  flex:0 0 78px;
  padding:0;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  opacity:.6;
}
.thumb.active,.thumb:hover{opacity:1}
.thumb.active{border-color:#fff}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- Who we serve ---------- */
.section-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:var(--blue);
  font-size:15px;
  font-weight:700;
  letter-spacing:.28em;
  margin-bottom:18px;
}
.section-label::before,.section-label::after{
  content:"";
  width:44px;
  height:1px;
  background:var(--blue);
}
.sectors-section h2{margin-bottom:48px}
.sectors-layout{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
.sectors-list{background:var(--navy);padding:0 28px}
.sectors-list>div{
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.sectors-list strong{
  color:#fff;
  font-family:var(--display);
  font-size:20px;
  font-weight:500;
}
.sectors-list span{
  color:#fff;
  font-size:13px;
  font-weight:500;
  text-align:right;
}
.sectors-images{
  min-height:460px;
  position:relative;
}
.sectors-images img{object-fit:cover;display:block}
.sector-main{width:82%;height:420px}
.sector-small{
  position:absolute;
  right:0;
  bottom:0;
  width:42%;
  height:220px;
  border:8px solid #fff;
}

/* ---------- Process ---------- */
.process-section{
  padding:92px 20px;
  background:var(--mist);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.process-inner{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
.process-photo img{
  width:100%;
  height:540px;
  object-fit:cover;
  display:block;
}
.process-copy .section-label{justify-content:flex-start}
.process-copy .section-label::after{display:none}
.process-copy h2{
  text-align:left;
  margin-bottom:32px;
}
.process-list{background:var(--navy);padding:0 28px}
.process-list>div:last-child,.sectors-list>div:last-child{border-bottom:0}
.process-list>div{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.process-list>div>span{
  color:var(--blue-soft);
  font-family:var(--display);
  font-size:15px;
  font-weight:500;
  letter-spacing:.1em;
}
.process-list strong{
  color:#fff;
  font-family:var(--display);
  font-size:18px;
  font-weight:500;
}
.process-list p{
  margin:4px 0 0;
  color:#fff;
  font-size:14px;
  font-weight:500;
}

/* ---------- Request forms ---------- */
.requests{padding-top:92px}
.request-heading h2{margin-bottom:40px}
.request-box{
  width:min(850px,100%);
  margin:0 auto;
  background:#fff;
  box-shadow:0 18px 50px rgba(10,33,75,.10);
}
.request-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--mist);
  border:1px solid var(--line);
}
.request-tab{
  min-height:54px;
  border:0;
  background:transparent;
  color:var(--navy);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}
.request-tab:hover{background:var(--blue-soft)}
.request-tab.active{background:var(--navy);color:#fff}
.request-form{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:30px;
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
}
.request-form.active{display:grid}
.request-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.request-form label span,.field-title{
  font-size:13px;
  font-weight:600;
  color:var(--navy);
}
.request-form input,.request-form select,.request-form textarea{
  width:100%;
  padding:12px 13px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--ink);
  outline:none;
  border-radius:0;
}
.request-form input:focus,.request-form select:focus,.request-form textarea:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(47,101,181,.18);
}
.full{grid-column:1 / -1}
.submit-button{
  min-height:50px;
  border:0;
  background:var(--navy);
  color:#fff;
  font-weight:600;
  letter-spacing:.06em;
  cursor:pointer;
}
.submit-button:hover{background:var(--blue)}
.submit-button:disabled{opacity:.6;cursor:wait}
.form-status{
  min-height:22px;
  font-size:13px;
  font-weight:600;
}
.form-status.sending{color:var(--blue)}
.form-status.success{color:#1f6b45}
.form-status.error{color:#a12f2f}
.honeypot{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  opacity:0!important;
  pointer-events:none!important;
}

.location-field{
  border:1px solid var(--line-strong);
  background:var(--mist);
}
.location-head{
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.location-head small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}
.location-button{
  border:1px solid var(--navy);
  background:#fff;
  color:var(--navy);
  padding:9px 14px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.location-button:hover{background:var(--navy);color:#fff}
.measurement-map{
  width:100%;
  height:330px;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
}
.location-result{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 14px;
  font-size:12px;
  color:var(--muted);
}
.location-result a{
  color:var(--blue);
  text-decoration:underline;
  font-weight:600;
}

/* ---------- Contact: navy again, wordmark centered ---------- */
.contact{
  position:relative;
  text-align:center;
  min-height:360px;
  padding:96px 20px 104px;
  background:var(--navy);
  color:#fff;
  overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--arcs) right center/auto 100% no-repeat;
  pointer-events:none;
}
.contact>*{position:relative}
.contact h2{margin-bottom:40px;color:#fff}
.contact h3{
  margin:0 0 26px;
  color:#fff;
  font-family:var(--display);
  font-size:clamp(34px,6vw,60px);
  font-weight:300;
  letter-spacing:.14em;
  line-height:1.1;
}
.contact a{
  display:inline-block;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.6);
  font-size:20px;
  letter-spacing:.06em;
}
.contact a:hover{border-bottom-color:#fff}
.contact-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.contact-phone{
  direction:ltr;
  unicode-bidi:isolate;
}
.contact-email{font-size:17px!important}

footer{
  width:100%;
  margin:0;
  padding:22px 20px 26px;
  background:var(--navy-deep);
  color:rgba(255,255,255,.7);
  text-align:center;
  font-size:13px;
}

.floating-whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  width:54px;
  height:54px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:grid;
  place-items:center;
  z-index:50;
  box-shadow:0 6px 18px rgba(6,22,51,.28);
}
.floating-whatsapp svg{width:28px;height:28px;display:block}

/* ---------- Map ---------- */
.maplibregl-map{font-family:var(--text)}
.maplibregl-ctrl-group{border-radius:0!important;overflow:hidden}
.miras-map-marker{
  width:32px;
  height:44px;
  position:relative;
  cursor:grab;
  filter:drop-shadow(0 4px 7px rgba(6,22,51,.3));
}
.miras-map-marker::before{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:24px;
  height:24px;
  background:var(--navy);
  border:3px solid #fff;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
}
.miras-map-marker span{
  position:absolute;
  left:14px;
  top:11px;
  width:6px;
  height:6px;
  background:#fff;
  border-radius:50%;
  z-index:2;
}

/* ---------- Arabic / RTL ---------- */
html[dir="rtl"] body{font-family:"Tajawal","Inter",sans-serif}
html[dir="rtl"] .brand,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h1,
html[dir="rtl"] strong,
html[dir="rtl"] .process-list>div>span{font-family:"Tajawal","Jost",sans-serif}
/* tracked letters break Arabic joining, so turn tracking off */
html[dir="rtl"] *{letter-spacing:0!important}
html[dir="rtl"] .nav{margin-left:0;margin-right:auto}
html[dir="rtl"] .hero-content{left:auto;right:max(6%,24px)}
html[dir="rtl"] .hero-shade{
  background:linear-gradient(270deg,rgba(6,22,51,.62) 0%,rgba(6,22,51,.34) 40%,rgba(6,22,51,0) 72%);
}
html[dir="rtl"] .inspiration::before,
html[dir="rtl"] .contact::before{transform:scaleX(-1)}
html[dir="rtl"] .vision-statement::before{transform:scaleX(-1)}
html[dir="rtl"] .services::before{right:auto;left:calc(50% - 50vw);transform:scaleX(-1)}
html[dir="rtl"] .requests::after{left:auto;right:calc(50% - 50vw);transform:scaleX(-1)}
html[dir="rtl"] .services-copy{text-align:right}
html[dir="rtl"] .sectors-list span{text-align:left}
html[dir="rtl"] .sector-small{right:auto;left:0}
html[dir="rtl"] .process-copy .section-label{justify-content:flex-start}
html[dir="rtl"] .process-copy h2{text-align:right}
html[dir="rtl"] .service-card{border-right:0;border-left:1px solid var(--card-line)}
html[dir="rtl"] .service-card:last-child{border-left:0}
html[dir="rtl"] .maplibregl-control-container{direction:ltr}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .service-cards{grid-template-columns:1fr 1fr}
  .service-card:nth-child(2){border-right:0}
  .service-card:nth-child(-n+2){border-bottom:1px solid var(--card-line)}
  html[dir="rtl"] .service-card:nth-child(2){border-left:0}
  html[dir="rtl"] .service-card:nth-child(odd){border-left:1px solid var(--card-line)}
  .sectors-layout,.process-inner{grid-template-columns:1fr}
  .sectors-images{min-height:400px}
}
@media(max-width:850px){
  .site-header{height:72px}
  .nav{
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:10px 20px 16px;
    box-shadow:0 14px 30px rgba(10,33,75,.10);
  }
  .nav.open{display:flex}
  .nav a{padding:13px 4px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .menu-btn{display:block}
  .services-grid{grid-template-columns:1fr;gap:32px}
  .services-image img{height:330px}
  .gallery-feature{height:420px}
}
@media(max-width:620px){
  .hero-category,.section-label{font-size:14px}
  .brand{font-size:20px}
  .hero,.hero>img{min-height:560px;height:560px}
  .hero-content{left:24px;width:calc(100% - 48px)}
  html[dir="rtl"] .hero-content{right:24px}
  .hero-content>p:not(.hero-category){font-size:16px}
  .vision-statement{padding:70px 20px 76px}
  .section{width:calc(100% - 32px);padding:66px 0}
  h2{font-size:30px}
  .sectors-section h2,.process-copy h2{font-size:28px}
  .services-image img{height:250px}
  .services-copy h3{font-size:22px}
  .gallery-feature{height:300px}
  .service-cards{grid-template-columns:1fr}
  .service-card{min-height:190px;border-right:0!important;border-left:0!important;border-bottom:1px solid var(--card-line)}
  .service-card:last-child{border-bottom:0}
  .sectors-list>div{align-items:flex-start;flex-direction:column;gap:4px}
  .sectors-list span{text-align:left!important}
  html[dir="rtl"] .sectors-list span{text-align:right!important}
  .sectors-images{min-height:330px}
  .sector-main{height:300px}
  .sector-small{height:165px}
  .process-section{padding:66px 16px}
  .process-photo img{height:320px}
  .request-tabs{grid-template-columns:1fr}
  .request-form{grid-template-columns:1fr;padding:20px}
  .full{grid-column:auto}
  .location-head{align-items:flex-start;flex-direction:column}
  .measurement-map{height:280px}
  .contact{padding:72px 20px 80px}
  .services::before,.requests::after{width:130px;height:130px}
}

/* ---------- Motion: one hero entrance, hover and state changes only ---------- */
.hero-category,.hero h1,.hero-content>p:not(.hero-category),.hero-button{
  animation:heroTextEnter .8s ease-out both;
}
.hero h1{animation-delay:.14s}
.hero-content>p:not(.hero-category){animation-delay:.28s}
.hero-button{animation-delay:.4s}

.hero-button,.lang-btn,.submit-button,.location-button,.request-tab,.thumb,.floating-whatsapp,.contact a{
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,opacity .22s ease,transform .22s ease;
}
.floating-whatsapp:hover{transform:translateY(-3px)}
.nav a{position:relative;transition:color .2s ease}
.nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:-6px;
  width:100%;height:1px;
  background:var(--navy);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.nav a:hover::after{transform:scaleX(1)}

.reveal-on-scroll{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.reveal-on-scroll.from-left{transform:translateX(-24px)}
.reveal-on-scroll.from-right{transform:translateX(24px)}
.reveal-on-scroll.is-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

.gallery-feature img{transition:opacity .24s ease,transform .48s ease}
.gallery-feature img.gallery-switching{opacity:.18;transform:scale(1.015)}
.request-form.active{animation:formEnter .32s ease-out both}
.miras-map-marker.location-pulse{animation:markerPulse .5s ease}
.form-status.success{animation:statusPop .4s ease-out both}

@keyframes heroTextEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes formEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes markerPulse{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-7px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
@keyframes statusPop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

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


/* ---------- v33: Larger, consistent lined section labels ---------- */
.lined-section-title,
.section-label,
.hero-category{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  width:100%;
  font-family:var(--display);
  font-size:40px;
  line-height:1.15;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.lined-section-title::before,
.lined-section-title::after,
.section-label::before,
.section-label::after,
.hero-category::before,
.hero-category::after{
  content:"";
  width:64px;
  height:1px;
  flex:0 0 64px;
  background:currentColor;
  opacity:.8;
}

/* Keep hero label readable over the photo while matching the same visual system. */
.hero-category{
  justify-content:flex-start;
  width:max-content;
  max-width:100%;
  margin-bottom:22px;
  color:#fff;
  font-size:clamp(28px,3.2vw,40px);
  letter-spacing:.12em;
}
.hero-category::before,
.hero-category::after{
  background:#fff;
}

/* Standard section-labels (Who We Serve / How We Work). */
.section-label{
  margin-bottom:24px;
  color:var(--navy);
}
.process-copy .section-label{
  justify-content:center;
  text-align:center;
}
.process-copy .section-label::after{display:block;}

/* Lined top-level titles on both light and navy sections. */
.lined-section-title{
  margin-left:auto;
  margin-right:auto;
}
.inspiration .lined-section-title,
.contact .lined-section-title{
  color:#fff;
}
.services .lined-section-title,
.request-heading .lined-section-title{
  color:var(--navy);
}

/* Contact icons */
.contact-link-row{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:11px;
}
.contact-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  color:#fff;
}
.contact-phone span{
  direction:ltr;
  unicode-bidi:isolate;
}

html[dir="rtl"] .hero-category{
  justify-content:flex-start;
}
html[dir="rtl"] .contact-phone{
  direction:ltr;
  unicode-bidi:isolate;
}

@media(max-width:760px){
  .lined-section-title,
  .section-label{
    font-size:28px;
    gap:12px;
    letter-spacing:.1em;
  }
  .hero-category{
    font-size:26px;
    gap:12px;
  }
  .lined-section-title::before,
  .lined-section-title::after,
  .section-label::before,
  .section-label::after,
  .hero-category::before,
  .hero-category::after{
    width:30px;
    flex-basis:30px;
  }
}

@media(max-width:480px){
  .lined-section-title,
  .section-label{
    font-size:23px;
    letter-spacing:.08em;
  }
  .hero-category{
    font-size:22px;
    letter-spacing:.08em;
  }
}

/* v34: keep Arabic section-label typography consistent */
html[dir="rtl"] .lined-section-title,
html[dir="rtl"] .section-label,
html[dir="rtl"] .hero-category{
  font-family:"Tajawal","Inter",Arial,sans-serif;
  font-weight:400;
  letter-spacing:0;
}


/* Keep footer phone/email icons on the left in both LTR and RTL */
.force-ltr-contact{
  direction:ltr !important;
}
.force-ltr-contact .contact-icon{
  order:0 !important;
  flex:0 0 auto;
}
.force-ltr-contact .contact-text,
.force-ltr-contact a,
.force-ltr-contact span{
  direction:ltr;
  unicode-bidi:isolate;
}


/* v36: lock footer contact icon order in Arabic */
.contact-email,
.contact-phone{
  direction:ltr !important;
  flex-direction:row !important;
  unicode-bidi:isolate;
}
.contact-email .contact-icon,
.contact-phone .contact-icon{
  order:0 !important;
}
.contact-email span,
.contact-phone span{
  order:1 !important;
  direction:ltr !important;
  unicode-bidi:isolate;
}
html[dir="rtl"] .contact-email,
html[dir="rtl"] .contact-phone{
  direction:ltr !important;
  flex-direction:row !important;
}


/* ---------- v37 Vision artwork: exact website typography ---------- */
.vision-statement{
  position:relative;
  padding:0;
  background:#f8f9fb;
  color:var(--navy);
  text-align:left;
  overflow:hidden;
}
.vision-statement::before{display:none!important;content:none!important;}
.vision-shell{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  min-height:620px;
  max-width:1600px;
  margin:0 auto;
  border-top:1px solid rgba(10,33,75,.28);
  border-bottom:1px solid rgba(10,33,75,.28);
}
.vision-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:72px clamp(34px,5vw,82px);
  background:#f8f9fb;
}
.vision-copy::before,
.vision-copy::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border:1px solid rgba(27,94,154,.34);
  border-radius:50%;
  pointer-events:none;
}
.vision-copy::before{left:-115px;top:-115px;box-shadow:0 0 0 38px rgba(27,94,154,.12);}
.vision-copy::after{left:-120px;bottom:-120px;box-shadow:0 0 0 42px rgba(27,94,154,.10);}
.vision-quote{
  width:92px;
  height:92px;
  border:1.5px solid var(--navy);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-size:48px;
  line-height:1;
  color:var(--navy);
  margin-bottom:34px;
}
.vision-copy h2{
  margin:0;
  max-width:620px;
  color:var(--navy);
  font-family:var(--display); /* Jost on English */
  font-size:clamp(42px,4.4vw,72px);
  line-height:1.08;
  font-weight:300;
  letter-spacing:.005em;
  text-transform:none;
}
.vision-divider{
  width:92px;
  height:1.5px;
  background:var(--blue);
  margin:34px auto 30px;
}
.vision-copy p{
  margin:0;
  max-width:610px;
  color:var(--navy);
  font-family:var(--text); /* Inter on English */
  font-size:clamp(18px,1.75vw,27px);
  line-height:1.55;
  font-weight:400;
}
.vision-media{position:relative;overflow:hidden;background:#eef1f5;min-height:620px;}
.vision-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.vision-art-clean{object-position:center center;}

html[dir="rtl"] .vision-shell{direction:rtl;}
html[dir="rtl"] .vision-copy{
  text-align:center;
  font-family:"Tajawal",sans-serif;
}
html[dir="rtl"] .vision-copy h2,
html[dir="rtl"] .vision-copy p,
html[dir="rtl"] .vision-quote{
  font-family:"Tajawal",sans-serif;
}
html[dir="rtl"] .vision-copy h2{
  font-size:clamp(44px,4.7vw,74px);
  font-weight:400;
  line-height:1.25;
}
html[dir="rtl"] .vision-copy p{
  font-size:clamp(19px,1.85vw,27px);
  line-height:1.75;
}
html[dir="rtl"] .vision-copy::before{left:auto;right:-115px;}
html[dir="rtl"] .vision-copy::after{left:auto;right:-120px;}
html[dir="rtl"] .vision-art-clean{transform:scaleX(-1);}

@media(max-width:900px){
  .vision-shell{grid-template-columns:1fr;min-height:0;}
  .vision-copy{padding:58px 24px 54px;min-height:520px;}
  .vision-media{min-height:460px;}
  html[dir="rtl"] .vision-shell{direction:rtl;}
}
@media(max-width:620px){
  .vision-copy{padding:46px 20px 44px;min-height:440px;}
  .vision-quote{width:68px;height:68px;font-size:38px;margin-bottom:26px;}
  .vision-copy h2{font-size:40px;}
  html[dir="rtl"] .vision-copy h2{font-size:40px;}
  .vision-copy p{font-size:18px;}
  html[dir="rtl"] .vision-copy p{font-size:18px;}
  .vision-media{min-height:340px;}
}


/* v38 vision fix: clean artwork only, no baked text/logo */
.vision-art-clean{
  transform-origin:center center;
}
html[dir="ltr"] .vision-art-clean{transform:none;}
html[dir="rtl"] .vision-art-clean{transform:scaleX(-1);}