:root{--ink:#102d3b;--orange:#f56a2c;--paper:#f5f7f7;--muted:#66747c;--line:#dbe2e5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:Cairo,Arial,sans-serif;font-size:16px;color:var(--ink);background:white}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.container{width:min(1220px,calc(100% - 80px));margin-inline:auto}.topbar{background:var(--ink);color:#fff;font-size:13px}.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:38px}.topbar a{letter-spacing:1px;font-weight:700}.topbar a span{color:var(--orange);margin-left:12px}.header{background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}.nav-wrap{min-height:98px;display:flex;align-items:center;justify-content:space-between;gap:30px}.wordmark{display:flex;flex-direction:column;line-height:1.3;flex-shrink:0}.wordmark strong{font-size:27px;font-weight:900}.brand-dot{color:var(--orange)}.wordmark>span{font-family:Arial,sans-serif;font-size:11px;letter-spacing:3px;margin-top:6px;font-weight:700}nav{display:flex;gap:36px;font-size:15px;font-weight:700}nav a:hover,.text-link:hover,footer a:hover{color:var(--orange)}.nav-call{border:1px solid var(--ink);padding:10px 23px;font-size:15px;font-weight:700}.nav-call span{margin-right:26px}.menu-toggle{display:none}.hero{background:var(--paper);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;min-height:650px;align-items:center;padding-top:54px;padding-bottom:52px}.eyebrow{font-size:14px;font-weight:800;letter-spacing:.4px;margin:0 0 20px}.hero .eyebrow{display:flex;align-items:center;gap:10px}.eyebrow>span{width:24px;height:3px;background:var(--orange)}h1{font-size:clamp(42px,4.5vw,68px);font-weight:900;line-height:1.45;margin:0;letter-spacing:-1.7px}h1 em{font-style:normal;color:var(--orange)}.hero-description{max-width:470px;font-size:17px;line-height:1.95;color:#576771;margin:22px 0 27px}.hero-actions{display:flex;align-items:center;gap:30px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:44px;padding:14px 25px;min-height:54px;font-weight:800}.primary{background:var(--orange);color:var(--ink)}.primary:hover{background:#e8571a;color:#fff}.text-link{font-size:15px;font-weight:800}.text-link span{margin-right:14px}.hero-location{display:flex;gap:9px;align-items:center;margin-top:28px;font-size:14px;color:var(--muted)}.hero-location>span:first-child{font-size:24px}.hero-visual{height:510px;position:relative;background:var(--ink);overflow:hidden;isolation:isolate}.hero-visual>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:-2}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,29,40,.9),rgba(9,29,40,.04) 80%);z-index:-1}.visual-rule{position:absolute;right:0;top:0;height:7px;width:90px;background:var(--orange)}.visual-caption{position:absolute;right:32px;bottom:40px;color:#fff}.visual-caption>span{font:12px Arial,sans-serif;letter-spacing:3px;color:#ff996c}.visual-caption strong{display:block;font-size:34px;line-height:1.65;margin-top:12px}.image-index{position:absolute;left:25px;top:25px;font:12px Arial,sans-serif;letter-spacing:2px;color:white}.hero-bottom{display:flex;justify-content:space-between;border-top:1px solid #cdd6da;padding:22px 0;color:#5a6d77;font-weight:700;font-size:15px}.section{padding:88px 0}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:34px}h2{font-size:38px;line-height:1.6;letter-spacing:-.8px;margin:0;font-weight:900}.section-heading .eyebrow,.visit .eyebrow{color:#bf4714;margin-bottom:10px}.section-heading>p{margin:0;line-height:1.9;color:var(--muted);font-size:15px}.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-right:1px solid var(--line)}.filter-card{position:relative;padding:31px;min-height:215px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .2s}.filter-card:hover{background:var(--paper)}.number{font:13px Arial,sans-serif;color:#bf4714;letter-spacing:2px}.filter-card h3{font-size:22px;margin:17px 0 5px;font-weight:800}.filter-card p{font-size:15px;color:var(--muted);margin:0 0 19px}.english{font:11px Arial,sans-serif;letter-spacing:1.8px;color:#657782}.visit{background:var(--paper)}.visit-grid{display:grid;grid-template-columns: .85fr 1.15fr;gap:75px;align-items:center}.contact-item{margin:24px 0}.contact-label{font-size:13px;font-weight:700;color:#627781}.contact-item p{line-height:1.9;margin:7px 0}.phone{display:block;text-align:right;font:700 27px Arial,sans-serif;margin-top:10px}.map-wrap{height:470px;background:#dce5e6;display:flex;flex-direction:column;border:1px solid var(--line)}iframe{width:100%;height:100%;border:0;flex:1}.map-footer{background:white;padding:19px 22px;display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:700}.map-footer span:last-child{font-family:Arial,sans-serif;font-size:12px;color:#5c737d}footer{background:var(--ink);color:#fff;padding:40px 0 20px}.footer-main{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-bottom:35px}.footer-main p{color:#b8c7ce;font-size:14px}.footer-main>a:last-child{font:14px Arial,sans-serif}.footer-bottom{border-top:1px solid #36505d;padding-top:20px;display:flex;justify-content:space-between;color:#b8c7ce;font-size:12px}@media(min-width:1600px){.hero-grid{min-height:730px}}@media(max-width:1000px){.container{width:calc(100% - 48px)}.hero-grid{gap:30px}.hero-visual{height:480px}h1{font-size:47px}.hero-actions{gap:20px}.visit-grid{gap:35px}.filter-card{padding:24px}.nav-wrap{gap:20px}nav{gap:23px}}@media(max-width:700px){.container{width:calc(100% - 36px)}.topbar{font-size:11px}.topbar a{font-size:12px}.nav-wrap{min-height:81px;gap:15px}.wordmark strong{font-size:23px}.wordmark>span{font-size:9px;letter-spacing:2px}.nav-call{display:none}.menu-toggle{display:block;background:none;border:1px solid var(--line);font-size:23px;width:43px;height:43px;color:var(--ink)}nav{display:none;position:absolute;top:81px;right:0;left:0;padding:24px;background:white;border-bottom:1px solid var(--line);flex-direction:column}nav.is-open{display:flex}.hero-grid{grid-template-columns:1fr;gap:28px;padding-top:34px;padding-bottom:28px}.hero-copy h1{font-size:46px;line-height:1.45}.hero-description{font-size:16px}.hero .eyebrow{font-size:12px;margin-bottom:17px}.hero-visual{height:320px}.visual-caption strong{font-size:28px}.visual-caption{right:24px;bottom:25px}.hero-bottom{flex-wrap:wrap;gap:14px 30px;justify-content:center;font-size:12px}.section{padding:55px 0}.section-heading{display:block}.section-heading>p{margin-top:15px;font-size:14px}h2{font-size:31px}.filter-grid{grid-template-columns:repeat(2,1fr)}.filter-card{padding:20px 15px;min-height:218px}.filter-card h3{font-size:18px}.filter-card p{font-size:14px}.english{font-size:10px;letter-spacing:1px}.visit-grid{grid-template-columns:1fr;gap:35px}.map-wrap{height:360px}.map-footer{padding:16px 12px;font-size:11px}.footer-main{flex-direction:column;align-items:flex-start;gap:15px}.footer-main p{margin:0}.footer-bottom{gap:20px;font-size:11px}.hero-actions{gap:24px}.button{padding:13px 20px;gap:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.hero-visual>img{object-fit:contain;background:#fff;height:62%;top:0}.hero-visual:after{background:linear-gradient(0deg,#102d3b 0%,#102d3b 33%,transparent 49%)}.image-index{color:#102d3b;top:17px;left:18px}.visual-caption strong{font-size:30px}.visual-caption{bottom:25px}@media(max-width:700px){.visual-caption strong{font-size:23px;line-height:1.4}.visual-caption{bottom:18px}.visual-caption>span{font-size:10px}.hero-visual>img{height:65%}}

/* Bilingual navigation and contact emblems */
.language-toggle{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:9px 14px;min-height:44px;cursor:pointer;font-weight:800;font-size:14px;margin-inline-start:auto}.language-toggle:hover{border-color:var(--orange)}.nav-wrap{gap:24px}.icon{width:22px;height:22px;display:inline-block;flex-shrink:0;vertical-align:middle}.nav-call,.contact-label{display:inline-flex;align-items:center;gap:10px}.nav-call{white-space:nowrap}.hero-location .icon{color:var(--orange)}.contact-label .icon{color:var(--orange)}.contact-channels{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.channel{display:flex;align-items:center;gap:10px;min-height:48px;background:#fff;border:1px solid var(--line);padding:12px 16px;font-size:14px;font-weight:700}.channel[href]:hover{border-color:var(--orange);color:#b84412}.channel[data-icon="whatsapp"]>.icon{color:#168447}.email-channel{flex-basis:100%;color:var(--muted)}.email-channel small{display:block;font-size:12px;font-weight:400}.visit-grid{align-items:start}.phone{text-align:start;direction:ltr;width:fit-content}.visual-caption{right:auto;inset-inline-start:32px}.visual-rule{right:auto;inset-inline-start:0}html[lang="en"] h1{font-size:clamp(40px,4.4vw,62px);line-height:1.2;letter-spacing:-1.6px}html[lang="en"] .hero-description{line-height:1.8}html[lang="en"] .wordmark strong{font-size:24px}html[lang="en"] .hero-copy .eyebrow{letter-spacing:.5px}html[lang="en"] .filter-card h3{line-height:1.5}html[lang="en"] .filter-card p{line-height:1.7}html[lang="en"] .english{display:none}html[lang="en"] .visual-caption strong{line-height:1.45}html[lang="en"] .footer-main{gap:20px}html[lang="en"] nav{gap:24px}@media(max-width:1000px){.nav-wrap{gap:14px}.nav-call{padding:10px 14px}.language-toggle{padding:9px 10px}nav{gap:18px}html[lang="en"] nav{gap:18px}}@media(max-width:800px) and (min-width:701px){.nav-call{display:none}}@media(max-width:700px){.language-toggle{margin-inline-start:auto;min-height:43px;padding:7px 10px;font-size:12px}.nav-wrap{gap:10px}.nav-wrap .wordmark strong{font-size:21px}html[lang="en"] .nav-wrap .wordmark strong{font-size:21px}.nav-wrap .wordmark>span{font-size:8px;letter-spacing:1.5px}.visual-caption{inset-inline-start:24px}html[lang="en"] h1{font-size:44px}.channel{padding:11px 13px}.nav-call{display:none}}@media(max-width:360px){.nav-wrap .wordmark strong,html[lang="en"] .nav-wrap .wordmark strong{font-size:18px}.menu-toggle{width:37px}.nav-wrap{gap:7px}.language-toggle{padding:7px}}

/* Official supplied logo and second business phone */
.company-logo{display:block;width:210px;height:auto;max-height:88px;object-fit:contain}.wordmark{padding:5px 0}.footer-main .wordmark{background:#fff;padding:10px 14px}.footer-main .company-logo{width:200px;max-height:100px}.top-phones{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.top-phones>span{opacity:.4}.phone-entry{display:flex;align-items:center;gap:18px;margin-top:12px}.phone-entry>span{font-size:13px;color:var(--muted);min-width:55px}.phone-entry .phone{margin:0}.phone-entry .phone:hover{color:var(--orange)}@media(max-width:700px){.company-logo{width:164px;max-height:69px}.topbar .container{flex-wrap:wrap;justify-content:center;gap:3px 18px;padding:7px 0;text-align:center}.top-phones{gap:12px}.top-phones a{font-size:12px}.phone-entry .phone{font-size:24px}}@media(max-width:360px){.company-logo{width:135px}}

.email-channel .email-address{display:block;font-size:15px;color:var(--ink);direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}.email-channel:hover .email-address{color:#b84412}

/* v5: slimmer brand bars + transparent official logo */
.topbar .container{min-height:30px}
.nav-wrap{min-height:76px}
.company-logo{width:178px;max-height:64px}
.wordmark{padding:0}
.footer-main .wordmark{background:transparent;padding:0}
.footer-main .company-logo{width:190px;max-height:78px;filter:none}.footer-logo{display:block}.footer-socials{display:flex;align-items:center;gap:22px;font:14px Arial,sans-serif}
@media(max-width:700px){
  .topbar .container{min-height:28px;padding:4px 0}
  .nav-wrap{min-height:68px}
  nav{top:68px}
  .company-logo{width:145px;max-height:54px}
}
@media(max-width:360px){.company-logo{width:126px;max-height:48px}}

@media(max-width:700px){.footer-socials{display:flex;gap:20px;flex-wrap:wrap}.footer-main{align-items:flex-start}.footer-logo{width:190px!important;max-height:78px!important}}


/* v7 — streamlined Material-inspired refinement */
:root{
  --surface:#ffffff;
  --surface-soft:#f6f8f9;
  --surface-tint:#eef3f5;
  --ink:#173240;
  --ink-strong:#0d2734;
  --orange:#f36b2f;
  --orange-dark:#d95720;
  --muted:#687983;
  --line:#d9e1e5;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-1:0 2px 8px rgba(13,39,52,.08);
  --shadow-2:0 8px 24px rgba(13,39,52,.10);
  --shadow-3:0 16px 44px rgba(13,39,52,.13);
}

body{background:var(--surface);color:var(--ink);-webkit-font-smoothing:antialiased}
.topbar{background:var(--ink-strong)}
.header{box-shadow:0 1px 0 rgba(13,39,52,.06)}
.nav-wrap{min-height:72px}
.company-logo{width:168px;max-height:58px}
nav{gap:28px}
nav a{position:relative;padding:8px 2px}
nav a:after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .2s ease}
nav a:hover:after{transform:scaleX(1)}

.language-toggle,.nav-call,.menu-toggle,.button,.channel{
  border-radius:var(--radius-sm);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.language-toggle{background:var(--surface-soft);box-shadow:none}
.language-toggle:hover,.nav-call:hover,.channel:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}
.nav-call{background:#fff}
.primary{border-radius:var(--radius-sm);box-shadow:var(--shadow-1);color:#fff;background:var(--orange)}
.primary:hover{background:var(--orange-dark);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.text-link{padding:10px 2px}

.hero{background:linear-gradient(180deg,#f7fafb 0%,#f2f6f7 100%)}
.hero-grid{min-height:610px}
.hero-visual{border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}
.visual-rule{border-radius:0 0 0 8px}
.hero-location{
  width:fit-content;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 13px;box-shadow:var(--shadow-1)
}
.hero-bottom{border-top:0;gap:12px;justify-content:flex-start;flex-wrap:wrap;padding-top:18px}
.hero-bottom span{
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;
  box-shadow:0 1px 3px rgba(13,39,52,.05)
}

.filters.section{background:#fff}
.filter-grid{border:0;gap:18px}
.filter-card{
  border:1px solid var(--line)!important;border-radius:var(--radius-md);
  background:#fff;box-shadow:var(--shadow-1);min-height:205px
}
.filter-card:hover{background:#fff;transform:translateY(-3px);box-shadow:var(--shadow-2)}
.number{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:28px;padding:0 9px;border-radius:999px;background:#fff0e8;color:var(--orange-dark)
}

.visit{background:var(--surface-soft)}
.visit-copy{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow-2)
}
.contact-item{padding-bottom:18px;border-bottom:1px solid #edf1f3}
.contact-channels{gap:12px}
.channel{border-color:#e0e7ea;box-shadow:0 1px 3px rgba(13,39,52,.04)}
.map-wrap{border:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2)}
.map-footer{border-top:1px solid var(--line)}

footer{background:#071b2a;padding:44px 0 20px}
.footer-main{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:
  "brand tagline"
  "brand links";
  align-items:center;column-gap:40px;row-gap:14px;padding-bottom:30px
}
.footer-brand{grid-area:brand}
.footer-logo{width:185px!important;max-height:76px!important}
.footer-tagline{grid-area:tagline;margin:0!important;color:#c7d2d8!important;font-size:15px!important}
.footer-links{grid-area:links;display:flex;gap:10px;flex-wrap:wrap}
.footer-action{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:10px 14px;border:1px solid rgba(255,255,255,.16);
  border-radius:999px;background:rgba(255,255,255,.06);
  color:#fff;font:600 13px Cairo,Arial,sans-serif;
  transition:background .18s ease,border-color .18s ease,transform .18s ease
}
.footer-action:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fff;transform:translateY(-1px)}
.footer-icon{width:20px;height:20px;flex:0 0 20px}
.footer-location{max-width:520px}
.footer-bottom{border-color:rgba(255,255,255,.14);padding-top:18px;color:#95a8b2}

@media(max-width:700px){
  .topbar .container{padding:3px 0}
  .nav-wrap{min-height:64px}
  nav{top:64px;border:0;box-shadow:var(--shadow-2);padding:18px;border-radius:0 0 16px 16px}
  .company-logo{width:138px;max-height:50px}
  .menu-toggle{width:44px;height:44px;border-radius:12px;background:#fff;box-shadow:var(--shadow-1)}
  .language-toggle{border-radius:12px}
  .hero-grid{padding-top:28px}
  .hero-visual{border-radius:18px}
  .hero-bottom{justify-content:center}
  .filter-grid{gap:12px}
  .filter-card{border-radius:14px;padding:18px 15px;min-height:205px}
  .visit-copy{padding:22px;border-radius:18px}
  .map-wrap{border-radius:18px}
  .footer-main{
    display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:28px
  }
  .footer-logo{width:178px!important;max-height:72px!important}
  .footer-tagline{font-size:14px!important}
  .footer-links{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .footer-action{justify-content:center;border-radius:14px;min-height:48px;padding:11px 12px}
  .footer-location{grid-column:1/-1;justify-content:flex-start;line-height:1.8}
  .footer-bottom{align-items:center}
}
@media(max-width:420px){
  .footer-links{grid-template-columns:1fr}
  .footer-location{grid-column:auto}
  .footer-action{justify-content:flex-start}
}


/* v8 — improve mobile header logo visibility */
.header-logo{object-fit:contain}
@media(max-width:700px){
  .header .wordmark{padding:0;display:flex;align-items:center;justify-content:center}
  .header .header-logo{
    content:url("logo-footer-white.png");
    width:158px!important;
    max-width:40vw;
    max-height:58px!important;
    height:auto;
    object-fit:contain;
    filter:none!important;
  }
}
@media(max-width:420px){
  .header .header-logo{width:148px!important;max-width:42vw;max-height:54px!important}
}
@media(max-width:360px){
  .header .header-logo{width:128px!important;max-height:48px!important}
}


/* v9 — mobile hero CTA layout refinement */
@media(max-width:700px){
  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%;
    margin-top:20px;
  }

  .hero-actions .button,
  .hero-actions .text-link{
    width:100%!important;
    min-height:54px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:0!important;
    padding:13px 18px!important;
    border-radius:14px!important;
    box-sizing:border-box;
    font-size:17px!important;
    line-height:1.3;
    text-align:center;
  }

  .hero-actions .primary{
    order:1;
    background:var(--orange)!important;
    color:#fff!important;
    box-shadow:var(--shadow-1);
    border:1px solid transparent!important;
  }

  .hero-actions .primary:hover{
    background:var(--orange-dark)!important;
  }

  .hero-actions .text-link{
    order:2;
    background:#fff!important;
    color:var(--ink-strong)!important;
    border:1px solid var(--line)!important;
    box-shadow:0 1px 3px rgba(13,39,52,.05);
    text-decoration:none!important;
  }

  .hero-actions .text-link:hover{
    background:var(--surface-soft)!important;
  }

  .hero-location{
    margin-top:14px!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box;
    justify-content:center;
    text-align:center;
    border-radius:14px!important;
    min-height:50px;
  }
}

@media(min-width:701px){
  .hero-actions{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }
}


/* =========================================================
   v10 — streamlined Material 3 inspired visual refresh
   ========================================================= */

:root{
  --md-primary:#f36a2f;
  --md-primary-hover:#db5720;
  --md-primary-container:#fff0e9;
  --md-on-primary:#ffffff;

  --md-surface:#ffffff;
  --md-surface-1:#f8fafb;
  --md-surface-2:#f1f5f6;
  --md-surface-3:#e9eff1;

  --md-text:#132f3d;
  --md-text-2:#5d707a;
  --md-outline:#d7e0e4;
  --md-outline-strong:#c4d0d5;

  --md-radius-xs:10px;
  --md-radius-sm:14px;
  --md-radius-md:20px;
  --md-radius-lg:28px;

  --md-elev-1:0 1px 2px rgba(11,34,46,.06),0 2px 7px rgba(11,34,46,.06);
  --md-elev-2:0 4px 12px rgba(11,34,46,.08),0 8px 28px rgba(11,34,46,.06);
  --md-elev-3:0 10px 30px rgba(11,34,46,.12);

  --md-speed:180ms;
}

html{scroll-padding-top:88px}
body{
  color:var(--md-text);
  background:var(--md-surface);
  text-rendering:optimizeLegibility;
}

.container{width:min(1180px,calc(100% - 64px))}

/* Top information strip */
.topbar{
  background:#0a2432;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .container{
  min-height:30px;
  gap:18px;
}
.topbar span,
.topbar a{line-height:1.3}

/* Header / navigation */
.header{
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(18,48,62,.08);
  box-shadow:0 2px 10px rgba(15,41,54,.04);
}
.nav-wrap{
  min-height:70px;
  gap:18px;
}
.header-logo{
  width:158px;
  max-height:55px;
}
nav{
  gap:8px;
  padding:4px;
  background:var(--md-surface-1);
  border:1px solid #eef2f4;
  border-radius:999px;
}
nav a{
  padding:9px 16px;
  border-radius:999px;
  transition:background var(--md-speed) ease,color var(--md-speed) ease;
}
nav a:after{display:none}
nav a:hover{
  background:var(--md-primary-container);
  color:#b94a1c;
}

.language-toggle,
.nav-call,
.menu-toggle{
  min-height:42px;
  border-radius:999px;
  border:1px solid var(--md-outline);
}
.language-toggle{
  padding:8px 16px;
  background:var(--md-surface-1);
}
.nav-call{
  padding:9px 18px;
  background:var(--md-text);
  color:#fff;
  border-color:var(--md-text);
  box-shadow:var(--md-elev-1);
}
.nav-call:hover{
  color:#fff;
  background:#0b2532;
  box-shadow:var(--md-elev-2);
}

/* Hero */
.hero{
  position:relative;
  background:
    radial-gradient(circle at 8% 0%,rgba(243,106,47,.07),transparent 28%),
    linear-gradient(180deg,#f8fafb 0%,#f2f6f7 100%);
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(18,48,62,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(18,48,62,.025) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 70%);
}
.hero-grid{
  position:relative;
  z-index:1;
  min-height:590px;
  gap:48px;
  padding-top:46px;
  padding-bottom:44px;
}
.hero-copy{
  max-width:540px;
}
.hero .eyebrow{
  width:max-content;
  padding:7px 12px;
  margin-bottom:18px;
  border:1px solid var(--md-outline);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  box-shadow:0 1px 2px rgba(13,39,52,.04);
}
.hero .eyebrow>span{
  width:8px;
  height:8px;
  border-radius:50%;
}
h1{
  line-height:1.32;
  letter-spacing:-1.2px;
}
.hero-description{
  max-width:520px;
  margin:20px 0 24px;
  color:var(--md-text-2);
  line-height:1.9;
}

.button,
.text-link{
  border-radius:999px!important;
}
.button{
  min-height:52px;
  padding:12px 22px;
  box-shadow:none;
}
.primary{
  background:var(--md-primary)!important;
  color:var(--md-on-primary)!important;
  box-shadow:var(--md-elev-1);
}
.primary:hover{
  background:var(--md-primary-hover)!important;
  box-shadow:var(--md-elev-2);
  transform:translateY(-1px);
}
.text-link{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border:1px solid var(--md-outline);
  background:rgba(255,255,255,.75);
}
.text-link:hover{
  background:#fff;
  color:var(--md-text);
  border-color:var(--md-outline-strong);
}
.text-link span{margin:0}

.hero-location{
  margin-top:18px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--md-outline);
  box-shadow:none;
}
.hero-location>span:first-child{
  color:var(--md-primary);
  font-size:20px;
}

.hero-visual{
  height:470px;
  border-radius:var(--md-radius-lg);
  border:1px solid rgba(17,46,59,.08);
  box-shadow:var(--md-elev-3);
}
.visual-rule{
  width:72px;
  height:5px;
  border-radius:0 0 8px 8px;
}
.visual-caption{
  inset-inline-start:28px;
  bottom:28px;
}
.visual-caption strong{
  font-size:28px;
  line-height:1.5;
}
.hero-bottom{
  position:relative;
  z-index:1;
  justify-content:flex-start;
  gap:10px;
  padding:0 0 30px;
  border:0;
}
.hero-bottom span{
  padding:7px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--md-outline);
  box-shadow:none;
  color:var(--md-text-2);
  font-size:13px;
}

/* Section rhythm */
.section{
  padding:78px 0;
}
.section-heading{
  margin-bottom:28px;
  align-items:flex-end;
}
.section-heading .eyebrow,
.visit .eyebrow{
  display:inline-flex;
  width:max-content;
  margin-bottom:8px;
  padding:5px 10px;
  color:#b94a1c;
  background:var(--md-primary-container);
  border-radius:999px;
}
h2{
  font-size:clamp(30px,3.2vw,42px);
  line-height:1.42;
  letter-spacing:-.5px;
}
.section-heading>p{
  max-width:390px;
  color:var(--md-text-2);
}

/* Filter cards */
.filters.section{
  background:var(--md-surface);
}
.filter-grid{
  gap:14px;
}
.filter-card{
  min-height:190px;
  padding:26px;
  border:1px solid var(--md-outline)!important;
  border-radius:var(--md-radius-md);
  background:var(--md-surface);
  box-shadow:var(--md-elev-1);
  overflow:hidden;
  transition:
    transform var(--md-speed) ease,
    box-shadow var(--md-speed) ease,
    border-color var(--md-speed) ease;
}
.filter-card:before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:20px;
  bottom:20px;
  width:3px;
  border-radius:3px;
  background:var(--md-primary);
  opacity:.8;
}
.filter-card:hover{
  transform:translateY(-3px);
  border-color:#f0b89d!important;
  box-shadow:var(--md-elev-2);
}
.number{
  min-width:36px;
  height:28px;
  padding:0 10px;
  background:var(--md-primary-container);
  color:#b94a1c;
  letter-spacing:1px;
}
.filter-card h3{
  margin:15px 0 6px;
  font-size:21px;
}
.filter-card p{
  margin-bottom:16px;
  color:var(--md-text-2);
  line-height:1.75;
}
.english{color:#7a8a92}

/* Visit / contact */
.visit{
  background:var(--md-surface-2);
}
.visit-grid{
  gap:24px;
  align-items:stretch;
}
.visit-copy,
.map-wrap{
  border:1px solid var(--md-outline);
  border-radius:var(--md-radius-lg);
  box-shadow:var(--md-elev-2);
  background:#fff;
}
.visit-copy{
  padding:30px;
}
.contact-item{
  margin:20px 0;
  padding-bottom:18px;
}
.contact-item:last-of-type{
  border-bottom:0;
}
.phone-entry{
  justify-content:space-between;
  gap:16px;
}
.phone-entry .phone{
  font-size:24px;
}
.contact-channels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.channel{
  min-height:50px;
  justify-content:center;
  border-radius:var(--md-radius-sm);
  background:var(--md-surface-1);
  box-shadow:none;
}
.channel:hover{
  transform:translateY(-1px);
  background:#fff;
  box-shadow:var(--md-elev-1);
}
.email-channel{
  grid-column:1/-1;
}
.visit-copy>.button{
  width:100%;
  justify-content:center;
  margin-top:4px;
}
.map-wrap{
  height:auto;
  min-height:500px;
  overflow:hidden;
}
.map-footer{
  padding:16px 18px;
  background:#fff;
}

/* Footer */
footer{
  padding:36px 0 18px;
  background:#071b29;
}
.footer-main{
  column-gap:34px;
  row-gap:10px;
  padding-bottom:24px;
}
.footer-logo{
  width:170px!important;
  max-height:70px!important;
}
.footer-tagline{
  color:#c9d5da!important;
}
.footer-links{
  gap:8px;
}
.footer-action{
  min-height:42px;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
}
.footer-action:hover{
  background:rgba(255,255,255,.11);
}
.footer-bottom{
  padding-top:16px;
}

/* Tablet */
@media(max-width:1000px){
  .container{width:calc(100% - 44px)}
  nav a{padding:8px 11px}
  .hero-grid{gap:30px}
  .hero-visual{height:440px}
  .visit-grid{gap:18px}
}

/* Mobile */
@media(max-width:700px){
  html{scroll-padding-top:74px}
  .container{width:calc(100% - 28px)}

  .topbar .container{
    min-height:0;
    padding:6px 0;
    gap:3px 14px;
  }

  .header{
    background:#171b1d;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:none;
  }
  .nav-wrap{
    min-height:64px;
    gap:10px;
  }
  .header .header-logo{
    width:150px!important;
    max-width:42vw;
    max-height:52px!important;
  }
  .menu-toggle,
  .language-toggle{
    min-height:44px;
    border-radius:14px;
    background:#303537;
    color:#e9f0f3;
    border-color:#4c5559;
    box-shadow:none;
  }
  .menu-toggle{
    width:46px;
  }
  nav{
    top:64px;
    right:10px;
    left:10px;
    padding:10px;
    gap:5px;
    background:#fff;
    border:1px solid var(--md-outline);
    border-radius:0 0 18px 18px;
    box-shadow:var(--md-elev-3);
  }
  nav a{
    padding:11px 14px;
    border-radius:12px;
  }

  .hero{
    background:#171c1f;
  }
  .hero:before{
    background-image:
      radial-gradient(circle at 70% 12%,rgba(243,106,47,.10),transparent 24%),
      linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:auto,28px 28px,28px 28px;
    mask-image:none;
  }
  .hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
    gap:24px;
    padding-top:34px;
    padding-bottom:28px;
  }
  .hero-copy{
    max-width:none;
  }
  .hero .eyebrow{
    color:#dce8ed;
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.12);
  }
  .hero-copy h1{
    font-size:clamp(40px,12vw,56px);
    line-height:1.43;
    color:#dff2fb;
  }
  .hero-description{
    margin:20px 0 18px;
    color:#aebcc3;
    font-size:16px;
    line-height:1.9;
  }

  .hero-actions{
    gap:10px!important;
    margin-top:16px;
  }
  .hero-actions .button,
  .hero-actions .text-link{
    min-height:52px;
    border-radius:14px!important;
    font-size:16px!important;
  }
  .hero-actions .primary{
    box-shadow:none;
  }
  .hero-actions .text-link{
    background:rgba(255,255,255,.04)!important;
    color:#dce8ed!important;
    border-color:rgba(255,255,255,.15)!important;
    box-shadow:none;
  }

  .hero-location{
    min-height:48px;
    margin-top:10px!important;
    color:#b8c4c9;
    background:rgba(255,255,255,.035);
    border-color:rgba(255,255,255,.16);
    box-shadow:none;
  }

  .hero-visual{
    height:300px;
    border-radius:20px;
    border-color:rgba(255,255,255,.12);
    box-shadow:0 8px 28px rgba(0,0,0,.22);
  }

  .hero-bottom{
    padding-bottom:26px;
    gap:8px;
    justify-content:center;
  }
  .hero-bottom span{
    color:#c9d5da;
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.12);
    font-size:12px;
  }

  .section{
    padding:54px 0;
  }
  .section-heading{
    margin-bottom:22px;
  }
  .section-heading>p{
    margin-top:12px;
  }

  /* One-column material cards are easier to scan on phones */
  .filter-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .filter-card{
    min-height:0;
    padding:20px 20px 18px;
    border-radius:16px;
  }
  .filter-card:before{
    top:16px;
    bottom:16px;
  }
  .filter-card h3{
    font-size:19px;
    margin-top:12px;
  }

  .visit-grid{
    gap:16px;
  }
  .visit-copy{
    padding:21px;
    border-radius:18px;
  }
  .phone-entry{
    align-items:flex-start;
  }
  .phone-entry .phone{
    font-size:22px;
  }
  .contact-channels{
    grid-template-columns:1fr 1fr;
  }
  .map-wrap{
    min-height:390px;
    height:390px;
    border-radius:18px;
  }

  footer{
    padding-top:30px;
  }
  .footer-main{
    gap:14px;
    padding-bottom:24px;
  }
  .footer-logo{
    width:164px!important;
    max-height:67px!important;
  }
  .footer-links{
    gap:8px;
  }
  .footer-action{
    min-height:46px;
    border-radius:14px;
  }
}

@media(max-width:420px){
  .topbar span{font-size:10px}
  .top-phones a{font-size:11px}
  .header .header-logo{
    width:140px!important;
  }
  .hero-copy h1{
    font-size:42px;
  }
  .contact-channels{
    grid-template-columns:1fr;
  }
  .email-channel{
    grid-column:auto;
  }
  .footer-links{
    grid-template-columns:1fr;
  }
}

/* Keep animation restrained */
@media(prefers-reduced-motion:no-preference){
  .filter-card,
  .button,
  .channel,
  .footer-action,
  .language-toggle,
  .nav-call{
    transition-duration:var(--md-speed);
  }
}


/* =========================================================
   v12 — cleaner mobile / landline contact presentation
   ========================================================= */
.phone-contact{
  padding-bottom:20px;
}

.phone-contact>.contact-label{
  display:block;
  margin-bottom:12px;
}

.phone-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.phone-card{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  min-height:76px;
  padding:12px 14px;
  border:1px solid var(--md-outline);
  border-radius:16px;
  background:var(--md-surface-1);
  box-shadow:0 1px 2px rgba(11,34,46,.03);
  transition:
    transform var(--md-speed) ease,
    background var(--md-speed) ease,
    border-color var(--md-speed) ease,
    box-shadow var(--md-speed) ease;
}

.phone-card:hover{
  transform:translateY(-1px);
  background:#fff;
  border-color:#efb69b;
  box-shadow:var(--md-elev-1);
}

.phone-card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:13px;
  background:var(--md-primary-container);
  color:var(--md-primary);
}

.phone-card-icon svg{
  width:22px;
  height:22px;
}

.phone-card-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.phone-card-copy small{
  color:var(--md-text-2);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.phone-card-copy strong{
  color:var(--md-text);
  font:700 20px/1.2 Arial,sans-serif;
  letter-spacing:.35px;
  white-space:nowrap;
}

@media(max-width:700px){
  .phone-cards{
    grid-template-columns:1fr;
    gap:9px;
  }

  .phone-card{
    min-height:70px;
    padding:11px 13px;
    border-radius:14px;
  }

  .phone-card-icon{
    flex-basis:40px;
    width:40px;
    height:40px;
    border-radius:12px;
  }

  .phone-card-copy strong{
    font-size:21px;
  }
}


/* v13 — clickable homepage showroom location card */
a.hero-location{
  text-decoration:none;
  cursor:pointer;
  transition:
    transform var(--md-speed,180ms) ease,
    border-color var(--md-speed,180ms) ease,
    background var(--md-speed,180ms) ease,
    box-shadow var(--md-speed,180ms) ease;
}

a.hero-location:hover{
  transform:translateY(-1px);
  border-color:#efb69b;
  background:#fff;
  box-shadow:var(--md-elev-1,0 1px 2px rgba(11,34,46,.06),0 2px 7px rgba(11,34,46,.06));
}

a.hero-location:focus-visible{
  outline:3px solid rgba(243,106,47,.28);
  outline-offset:3px;
}

@media(max-width:700px){
  a.hero-location:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.28);
    box-shadow:none;
  }
}


/* ==========================================================
   MEF HERO IMAGE FINAL POSITION FIX
   Keep filters.png exactly as designed.
   Same composition in Arabic and English.
   ========================================================== */

.hero-visual {
    position: relative !important;
    overflow: hidden !important;
    background: #1c3042 !important;
}


/*
 * filters.png already contains the complete 4-picture layout.
 * Treat the entire PNG as ONE centered object.
 */
.hero-visual > img {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: contain !important;
    object-position: 50% 50% !important;

    background: transparent !important;

    transform: none !important;

    margin: 0 !important;
}


/* Arabic — NEVER mirror or move the image */
html[lang="ar"] .hero-visual > img,
html[dir="rtl"] .hero-visual > img {
    left: 0 !important;
    right: 0 !important;

    transform: none !important;

    object-position: 50% 50% !important;
}


/* English — exactly the same picture position */
html[lang="en"] .hero-visual > img,
html[dir="ltr"] .hero-visual > img {
    left: 0 !important;
    right: 0 !important;

    transform: none !important;

    object-position: 50% 50% !important;
}


/* Desktop */
@media (min-width: 701px) {

    .hero-visual > img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center center !important;
    }

}


/* Mobile */
@media (max-width: 700px) {

    .hero-visual > img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center center !important;
    }

}