/* ===== Megahed Shipping & Transportation — Design System ===== */
:root{
  --cobalt:#1B4F91;
  --cobalt-deep:#123A6B;
  --azure:#2F8FE0;
  --coral:#E8734A;
  --coral-deep:#C85A34;
  --tint:#E8EFF9;
  --ink:#1A2332;
  --ink-soft:#5B6472;
  --bg:#F6F8FB;
  --line:#E2E8F0;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{background:var(--bg); color:var(--ink); font-family:'Cairo', sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.data-table{width:100%; border-collapse:collapse; margin-top:14px; min-width:480px; font-size:13.5px;}
.data-table th, .data-table td{padding:12px 16px; text-align:right; border-bottom:1px solid var(--line);}
[dir="ltr"] .data-table th, [dir="ltr"] .data-table td{text-align:left;}
.data-table th{background:var(--tint); color:var(--cobalt); font-weight:700; white-space:nowrap;}
.data-table td{color:var(--ink-soft);}
.data-table tr:last-child td{border-bottom:none;}
.sla-line{display:flex; align-items:flex-start; gap:10px; margin-top:16px; padding:12px 16px; background:var(--tint); border-radius:10px; font-size:13.5px; color:var(--ink-soft);}
.sla-line svg{width:18px; height:18px; flex-shrink:0; margin-top:1px; color:var(--cobalt);}
.sla-line strong{color:var(--ink);}
.section-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;}

/* Native charts — bar charts for stats pulled from the guide content,
   styled to match the site instead of embedding external widgets. */
.chart{max-width:520px; margin:26px 0; padding:28px 26px 24px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(18,25,35,0.06);}
.chart.chart-wide{max-width:640px;}
.chart-title{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:26px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.chart-title:before{content:''; width:9px; height:9px; border-radius:3px; background:var(--coral); flex-shrink:0;}
.chart-bars{display:flex; align-items:flex-end; justify-content:center; gap:15%; height:180px; padding:0 8px 3px; border-bottom:2px solid var(--ink); position:relative;}
.chart-bar-col{flex:0 1 130px; max-width:130px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.chart-bar{width:100%; max-width:76px; background:var(--cobalt); border-radius:10px 10px 3px 3px; position:relative; display:flex; justify-content:center; min-height:3px; box-shadow:inset 0 -10px 14px -8px rgba(0,0,0,0.18);}
.chart-bar.is-accent{background:var(--coral);}
.chart-bar-value{position:absolute; top:-30px; font-weight:800; font-size:17px; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums;}
.chart-bar.is-accent .chart-bar-value{color:var(--coral-deep);}
.chart-bar-label{margin-top:12px; font-size:12.5px; font-weight:600; color:var(--ink-soft); text-align:center; line-height:1.4;}
.chart-hbars{display:flex; flex-direction:column; gap:16px;}
.chart-hbar-row{display:flex; align-items:center; gap:14px;}
.chart-hbar-label{width:auto; min-width:78px; flex-shrink:0; font-size:13px; font-weight:700; color:var(--ink);}
.chart-hbar-track{flex:1; background:var(--bg); border:1px solid var(--line); border-radius:8px; height:34px; position:relative; overflow:hidden;}
.chart-hbar-fill{height:100%; border-radius:7px; display:flex; align-items:center; padding:0 14px; background:var(--cobalt); box-shadow:inset 0 -8px 12px -6px rgba(0,0,0,0.15); transition:width 0.2s ease;}
.chart-hbar-row:first-child .chart-hbar-fill{background:var(--coral);}
[dir="rtl"] .chart-hbar-fill{justify-content:flex-start;}
.chart-hbar-value{color:#fff; font-weight:700; font-size:12.5px; white-space:nowrap;}
.chart-source{margin-top:20px; font-size:12px; color:var(--ink-soft); opacity:0.75;}
@media (max-width:640px){
  .chart{padding:22px 16px 20px;}
  .chart-bars{gap:8%; height:150px;}
  .chart-bar-col{flex-basis:90px;}
  .chart-bar-value{font-size:14.5px; top:-25px;}
  .chart-hbar-label{min-width:64px; font-size:12px;}
  .chart-hbar-value{font-size:11.5px;}
}
.wrap{max-width:1510px;margin:0 auto;padding:0 28px;}
a{color:inherit;} img{max-width:100%; display:block;}
h1,h2,h3{font-family:'Cairo', sans-serif; font-weight:700; color:var(--ink);}
.eyebrow{display:inline-block; background:var(--tint); color:var(--cobalt); font-weight:600; font-size:13px; padding:6px 14px; border-radius:20px;}
.eyebrow.on-photo{background:rgba(255,255,255,0.92);}

/* NAV */
header{background:var(--bg); position:sticky; top:0; z-index:20; border-bottom:2px solid var(--line);}
nav{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 0;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0;}
.brand-mark{width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg, var(--cobalt), var(--azure)); display:flex; align-items:center; justify-content:center; font-family:'Cairo', sans-serif; font-weight:800; color:#fff; font-size:17px; flex-shrink:0;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}

.brand-name{font-family:'Cairo', sans-serif; font-weight:900; font-size:25px; line-height:1.1; color:var(--cobalt); text-transform:uppercase; letter-spacing:0.005em; white-space:nowrap;}
.brand-name-small{font-weight:600; font-size:11px; color:var(--cobalt); margin-left:3px; text-transform:uppercase;}
.brand-a{color:var(--coral);}

.brand-sub{font-family:'Cairo', sans-serif; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.09em; font-weight:600; margin-top:3px;}

.nav-links{display:flex; align-items:center; gap:14px; font-size:13.5px; font-weight:600; flex-wrap:wrap;}
.nav-links a{text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap;}
.nav-links a.active{border-color:var(--cobalt); color:var(--cobalt);}
.nav-right{display:flex; align-items:center; gap:10px; min-width:0;}
.nav-right .btn{flex-shrink:0; white-space:nowrap;}
.nav-phone{flex-shrink:0;}
.menu-btn{display:none; background:none; border:2px solid var(--cobalt); border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer;}
.menu-btn span, .menu-btn span:before, .menu-btn span:after{content:""; display:block; width:18px; height:2px; background:var(--cobalt); position:relative;}
.menu-btn span:before{position:absolute; top:-6px;} .menu-btn span:after{position:absolute; top:6px;}
.mobile-menu{display:none; flex-direction:column; gap:2px; background:#fff; border-top:2px solid var(--line); padding:6px 0;}
.mobile-menu.open{display:flex; max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.mobile-menu a{padding:13px 28px; font-weight:600; font-size:14px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); transition:background 0.15s ease, color 0.15s ease;}
.mobile-menu a:hover, .mobile-menu a:active{background:var(--tint); color:var(--cobalt);}
.mobile-menu a.mobile-submenu-link{padding-left:44px; font-weight:500; font-size:13px; color:var(--ink-soft);}

/* Services dropdown */
.nav-dropdown{position:relative;}
.nav-dropdown > a{display:inline-flex; align-items:center; gap:5px;}
.nav-dropdown .caret{width:10px; height:10px; flex-shrink:0; transition:transform 0.18s ease;}
.nav-dropdown:hover .caret, .nav-dropdown:focus-within .caret{transform:rotate(180deg);}
.dropdown-panel{position:absolute; top:100%; left:0; background:#fff; border:2px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(18,25,35,0.16); padding:8px; min-width:230px; opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity 0.16s ease, transform 0.16s ease; z-index:30;}
.nav-dropdown:hover > .dropdown-panel, .nav-dropdown:focus-within > .dropdown-panel{opacity:1; pointer-events:auto; transform:translateY(0);}
.dropdown-panel a{display:block; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:none; white-space:nowrap;}
.dropdown-divider{height:1px; background:var(--line); margin:6px 4px;}
.dropdown-heading{display:block; padding:8px 12px 4px; font-size:12px; font-weight:800; color:var(--cobalt); letter-spacing:0.2px; pointer-events:none; user-select:none;}
.dropdown-panel a.dropdown-sub{padding-inline-start:24px;}
.dropdown-panel a:hover{background:var(--tint); color:var(--cobalt);}

/* Nested flyout: any nav-dropdown living inside a dropdown-panel opens a
   second panel to the side instead of below, so multi-level menus (e.g.
   Services > Regional Shipping > country) work generically. */
.dropdown-panel .nav-dropdown{width:100%;}
.dropdown-panel .nav-dropdown > a{display:flex; justify-content:space-between; width:100%;}
.dropdown-panel .nav-dropdown .caret{transform:rotate(-90deg);}
.dropdown-panel .nav-dropdown:hover .caret, .dropdown-panel .nav-dropdown:focus-within .caret{transform:rotate(-90deg);}
.dropdown-panel .dropdown-panel{top:-8px; left:100%; margin-left:6px;}
[dir="rtl"] .dropdown-panel .dropdown-panel{left:auto; right:100%; margin-left:0; margin-right:6px;}
/* RTL: flyout opens to the left, so the caret should point left too. */
[dir="rtl"] .dropdown-panel .nav-dropdown .caret{transform:rotate(90deg);}
[dir="rtl"] .dropdown-panel .nav-dropdown:hover .caret, [dir="rtl"] .dropdown-panel .nav-dropdown:focus-within .caret{transform:rotate(90deg);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Cairo', sans-serif; font-weight:600; font-size:14px; line-height:1; padding:12px 22px; border-radius:10px; text-decoration:none; border:2px solid transparent; transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;}
.btn-primary{background:var(--coral); color:#fff;} .btn-primary:hover{background:var(--coral-deep);}
.btn-outline{border-color:var(--cobalt); color:var(--cobalt);}
.btn-outline:hover{background:var(--cobalt); color:#fff;}
.btn-white{background:#fff; color:var(--cobalt-deep); border-color:#fff;}
.btn-white:hover{background:var(--cobalt); color:#fff; border-color:var(--cobalt);}
/* Hero CTAs sit over a photo and need the outline button to start solid
   white (an inline style used to do this, but inline styles beat the
   :hover rule's specificity and left the button permanently white on
   hover). Also replicate the header WhatsApp button's cobalt hover
   (.nav-whatsapp:hover below) so both "primary" buttons match exactly. */
.hero-ctas .btn-outline{background:#fff;}
.hero-ctas .btn-outline:hover{background:var(--cobalt); color:#fff;}
.hero-ctas .btn-primary:hover{background:var(--cobalt);}

/* PHOTO HERO (general template) */
.photo-hero{position:relative; border-radius:0 0 24px 24px; overflow:hidden; min-height:300px; display:flex; align-items:flex-end; background-size:cover; background-position:center;}
.photo-hero:before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,25,35,0.15) 0%, rgba(18,25,35,0.8) 100%);}
.photo-hero .wrap{position:relative; z-index:1; padding-bottom:40px; padding-top:40px;}
.photo-hero h1{color:#fff; font-size:34px; margin:14px 0 0;}
.photo-hero p{color:#E7ECF5; font-size:16px; max-width:560px; margin:14px 0 24px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

section:not(.carousel){padding-top:56px; padding-bottom:56px;} .section-tight{padding-top:32px; padding-bottom:32px;}
.card-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:28px;}
.card-grid.two{grid-template-columns:repeat(2, 1fr);}
.card-grid.four{grid-template-columns:repeat(4, 1fr);}
.feature-card{padding:24px 20px; background:#fff; border-radius:16px; border:2px solid var(--line);}
.feature-icon{width:46px; height:46px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; font-size:21px; background:var(--tint);}
.feature-card h3{font-size:17px; margin-bottom:8px;} .feature-card p{font-size:13.5px; color:var(--ink-soft);}

.photo-card{background:#fff; border-radius:16px; border:2px solid var(--line); overflow:hidden; text-decoration:none; display:block; color:var(--ink);}
.photo-card img{height:170px; object-fit:cover; width:100%;}
.photo-card-body{padding:18px;} .photo-card-body h3{font-size:16px; margin-bottom:5px;} .photo-card-body p{font-size:13px; color:var(--ink-soft);}

.route-strip{padding:20px 0; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;}
.route-pill{display:flex; align-items:center; gap:8px; background:#fff; border:2px solid var(--line); border-radius:30px; padding:7px 14px; font-weight:600; font-size:12.5px;}
.route-arrow{color:var(--coral); font-size:16px;}

.video-box{background:var(--ink); border-radius:20px; aspect-ratio:16/9; max-width:760px; margin:26px auto 0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; gap:10px; border:2px dashed #3E4A5C;}
.video-play{width:56px; height:56px; border-radius:50%; background:var(--coral); display:flex; align-items:center; justify-content:center; font-size:20px;}
.video-box p{font-size:13px; color:#B7C0D1; max-width:380px; text-align:center;}

.service-detail{display:flex; gap:20px; align-items:flex-start; padding:24px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);}
.service-detail img{width:170px; height:120px; object-fit:cover; border-radius:12px; flex-shrink:0;}
.service-detail h3{font-size:18px; margin-bottom:6px;} .service-detail p{font-size:13.5px; color:var(--ink-soft); max-width:560px;}
.service-detail .arrow{margin-left:auto; align-self:center; color:var(--coral); font-size:20px; flex-shrink:0;}

.approach-list{margin-top:28px; display:flex; flex-direction:column; gap:0;}
.approach-item{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line);}
.approach-num{font-family:'Cairo', sans-serif; font-weight:800; font-size:20px; color:var(--azure); width:36px; flex-shrink:0;}
.approach-item h3{font-size:16px; margin-bottom:4px;} .approach-item p{font-size:13.5px; color:var(--ink-soft);}

details{background:#fff; border:2px solid var(--line); border-radius:14px; padding:16px 20px; margin-bottom:10px;}
summary{font-family:'Cairo', sans-serif; font-weight:600; font-size:15px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;}
summary::-webkit-details-marker{display:none;} summary:after{content:"+"; color:var(--coral); font-size:19px; font-weight:700;}
details[open] summary:after{content:"\2013";} details p{font-size:13.5px; color:var(--ink-soft); margin-top:10px;}
.placeholder{color:var(--ink-soft); font-style:italic;}

.contact-box{background:linear-gradient(120deg, var(--cobalt), var(--cobalt-deep)); border-radius:22px; padding:40px 36px; color:#fff; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;}
.contact-box h2{color:#fff; font-size:24px; margin-bottom:8px;} .contact-box p{color:#D9E4F5; font-size:13.5px; max-width:400px;}
.contact-methods{font-size:13px; color:#C7D6EE; margin-top:14px; line-height:2;}

.contact-form{background:#fff; border-radius:16px; border:2px solid var(--line); padding:26px; margin-top:24px; max-width:520px;}
.contact-form label{display:block; font-size:13px; font-weight:600; margin:13px 0 6px;} .contact-form label:first-child{margin-top:0;}
.contact-form input, .contact-form textarea{width:100%; padding:11px 14px; border-radius:8px; border:2px solid var(--line); font-family:'Cairo', sans-serif; font-size:14px; background:var(--bg);}
.contact-form textarea{resize:vertical; min-height:90px;} .contact-form button{margin-top:16px; width:100%; justify-content:center;}
.map-box{margin-top:24px; border-radius:16px; border:2px solid var(--line); overflow:hidden; min-height:260px;}
.map-box iframe{display:block; width:100%; height:260px; border:0;}

.price-table{width:100%; border-collapse:collapse; margin-top:24px; background:#fff; border-radius:14px; overflow:hidden; border:2px solid var(--line);}
.price-table th{background:var(--cobalt); color:#fff; text-align:left; padding:14px 16px; font-size:13px; font-weight:600;}
.price-table td{padding:14px 16px; border-top:1px solid var(--line); font-size:13.5px;}
.price-table tr:nth-child(even) td{background:#FAFBFD;}
.price-table td.amount{font-weight:700; color:var(--coral); white-space:nowrap;}
.price-note{margin-top:14px; font-size:13px; color:var(--ink-soft);}
.featured-offer{margin-top:24px; background:linear-gradient(120deg, var(--tint), #fff); border:2px solid var(--azure); border-radius:18px; padding:26px; display:flex; gap:20px; align-items:center; flex-wrap:wrap;}
.featured-offer .icon{width:56px; height:56px; border-radius:14px; background:var(--azure); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0;}
.featured-offer h3{font-size:18px; margin-bottom:6px;} .featured-offer p{font-size:13.5px; color:var(--ink-soft);}
.featured-offer .price-tag{font-size:26px; font-weight:800; color:var(--coral); margin-left:auto;}
.insurance-callout{margin-top:24px; background:var(--tint); border-radius:16px; padding:22px; display:flex; gap:16px; align-items:flex-start;}
.insurance-callout .icon{font-size:26px; flex-shrink:0;}
.insurance-callout h3{font-size:16px; margin-bottom:6px;} .insurance-callout p{font-size:13.5px; color:var(--ink-soft);}

.city-strip{display:flex; gap:16px; margin-top:28px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
.city-card{flex:0 0 230px; scroll-snap-align:start; background:#fff; border:2px solid var(--line); border-radius:16px; padding:20px;}
.city-card h3{font-size:16px; margin-bottom:8px; color:var(--cobalt);}
.city-card p{font-size:13px; color:var(--ink-soft); line-height:1.7;}

.process-split{display:grid; grid-template-columns:1fr 1fr; gap:20px 40px; margin-top:28px;}
.process-track h3{font-size:16px; color:var(--cobalt);}
.process-track .approach-list{margin-top:10px;}

.track-box{background:#fff; border:2px solid var(--line); border-radius:16px; padding:30px; max-width:520px; margin-top:26px;}
.track-box label{display:block; font-size:13px; font-weight:600; margin:13px 0 6px;} .track-box label:first-child{margin-top:0;}
.track-box input{width:100%; padding:11px 14px; border-radius:8px; border:2px solid var(--line); font-family:'Cairo', sans-serif; font-size:14px; background:var(--bg);}
.track-box button{margin-top:18px; width:100%; justify-content:center;}
.track-steps{display:flex; flex-direction:column; gap:16px; margin-top:30px;}
.track-step{display:flex; gap:14px; align-items:flex-start;}
.track-step .dot{width:28px; height:28px; border-radius:50%; background:var(--cobalt); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0;}
.track-step p{font-size:13.5px; color:var(--ink-soft);}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px;}
.blog-card{background:#fff; border-radius:16px; border:2px solid var(--line); overflow:hidden; text-decoration:none; color:var(--ink); display:block;}
.blog-card img{height:160px; object-fit:cover; width:100%;}
.blog-card-body{padding:18px;} .blog-date{font-size:11.5px; color:var(--coral); font-weight:600; text-transform:uppercase;}
.blog-card h3{font-size:16px; margin:6px 0;} .blog-card p{font-size:13px; color:var(--ink-soft);}
.blog-tag{display:inline-block; background:var(--tint); color:var(--cobalt); font-size:11px; font-weight:700; padding:3px 10px; border-radius:10px; margin-bottom:8px;}

/* FOOTER */
footer{background:linear-gradient(160deg, var(--cobalt-deep), #0E2547); color:#fff; margin-top:48px;}
.footer-top{max-width:1100px; margin:0 auto; padding:48px 28px 32px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px 24px;}
.footer-logo{width:72px; height:auto; margin-bottom:14px;}
.footer-brand-name{font-family:'Cairo', sans-serif; font-weight:800; font-size:19px; color:#fff;}
.footer-brand-sub{display:inline-block; font-size:12px; font-weight:600; color:#8FA6D1; text-transform:uppercase; letter-spacing:0.06em; margin-top:5px;}
.footer-brand-name-small{font-weight:600; font-size:11px; color:#8FA6D1; margin-left:5px; text-transform:uppercase;}
[dir="rtl"] .footer-brand-name-small{margin-left:0; margin-right:5px;}
.footer-brand-name .brand-a{color:var(--coral);}
.footer-brand p{color:#B7C6E3; font-size:13.5px; line-height:1.7; margin-top:10px; max-width:280px;}
.footer-phone{display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:700; font-size:14.5px; margin-top:14px; white-space:nowrap;}
.footer-phone svg{width:17px; height:17px; flex-shrink:0;}
.footer-col h4{font-size:12px; text-transform:uppercase; letter-spacing:0.07em; color:#8FA6D1; font-weight:700; margin-bottom:14px;}
.footer-col a{display:block; color:#D9E4F5; text-decoration:none; font-size:13.5px; padding:5px 0;}
.footer-col a:hover{color:#fff;}
.footer-icon-link{display:flex !important; align-items:center; gap:7px;}
.footer-icon-link svg{flex-shrink:0;}
button.footer-icon-link{background:none; border:none; font:inherit; color:#D9E4F5; padding:5px 0; cursor:pointer; text-align:start; width:100%;}
button.footer-icon-link:hover{color:#fff;}
.add-home-ios-hint:not([hidden]){display:flex; align-items:flex-start; gap:6px; background:rgba(255,255,255,0.06); border-radius:8px; padding:8px 10px; color:#9FB2D4; font-size:12px; font-style:italic; line-height:1.45; margin:6px 0 0; max-width:230px;}
.add-home-ios-hint svg{flex-shrink:0; margin-top:1px; opacity:0.8;}
.footer-col p{color:#AEC0DE; font-size:13px; line-height:1.7;}
.footer-social{display:flex; gap:10px; margin:8px 0 4px;}
.footer-social a{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:8px; background:rgba(255,255,255,0.08); color:#D9E4F5;}
.footer-social a:hover{background:rgba(255,255,255,0.16); color:#fff;}
.footer-keywords{max-width:1100px; margin:0 auto; padding:18px 28px; border-top:1px solid rgba(255,255,255,0.12); display:flex; flex-wrap:wrap; gap:8px 20px;}
.footer-keywords a{color:#8FA3C6; font-size:12px; text-decoration:none;}
.footer-keywords a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); text-align:center; padding:16px 20px; font-size:12px; color:#7690BD;}
@media (max-width:1200px){
  .footer-top{grid-template-columns:1fr 1fr; padding:36px 20px 24px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-keywords{padding:16px 20px;}
}
@media (max-width:420px){
  .footer-top{grid-template-columns:1fr;}
}

/* HOME — carousel + updates overlay */
.page-shell{max-width:1320px; margin:0 auto; padding:0 36px;}
.carousel{position:relative; height:calc(100vh - 150px); min-height:520px; max-height:900px; overflow:hidden; border-radius:28px; background:var(--bg); border:3px solid rgba(0, 0, 0,0.01); margin-top: 10px;}
.carousel-track{position:relative; width:100%; height:100%;}
.carousel-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.07); transition:opacity 1.3s ease-in-out, transform 7s ease-out; display:flex; align-items:stretch; text-decoration:none; z-index:0;}
.carousel-slide:before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,25,35,0.05) 0%, rgba(18,25,35,0.72) 100%);}
.carousel-slide.active{opacity:1; transform:scale(1); z-index:1;}
.carousel-caption{position:relative; z-index:1; height:100%; width:100%; box-sizing:border-box;}
.carousel-note{
  position:absolute; left:10%; top:15%; height:32%; width:55%; max-width:460px;
  padding:26px 30px;
  background:rgba(18,58,107,0.24);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:28px;
  box-shadow:0 14px 34px rgba(9,29,54,0.35);
  color:#fff; font-size:14px; font-weight:500; line-height:1.5;
  box-sizing:border-box; overflow:hidden; z-index:2;
}
.carousel-note h2{margin:0 0 12px 0;}
.carousel-note-text{margin:0;}
.carousel-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,0.88); color:var(--ink); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.carousel-arrow.prev{left:18px;} .carousel-arrow.next{right:18px;}
.carousel-dots{position:absolute; bottom:16px; left:0; right:0; z-index:4; display:flex; justify-content:center; gap:8px;}
/* .carousel-dot{width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,0.5); cursor:pointer; padding:0;}
.carousel-dot.active{background:#fff; width:22px; border-radius:4px;} */
.carousel-dot{width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.65); background:rgba(255,255,255,0.15); cursor:pointer; padding:0; transition:all 0.25s ease;}
.carousel-dot.active{background:rgba(255,255,255,0.9); width:9px; border-color:#fff;}

.updates-overlay{position:absolute; top:0; right:0; bottom:0; width:480px; z-index:3; height:100%;
  background:linear-gradient(90deg, rgba(18,25,35,0) 0%, rgba(18,25,35,0.30) 30%, rgba(15,21,30,0.66) 55%, rgba(13,19,28,0.85) 78%, rgba(13,19,28,0.90) 100%);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  padding:32px 34px 24px; display:flex; flex-direction:column; color:#fff;}
.updates-label{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#BFD2EF; font-weight:700; margin-bottom:6px;}
.update-link{display:block; text-decoration:none; color:#fff; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.12);}
.update-link .u-date{display:block; font-size:11px; color:#AEC2E3; margin-bottom:4px;}
.update-link .u-title{display:block; font-size:14px; font-weight:600; line-height:1.35;}
.update-link.seeall{margin-top:auto; padding-top:16px; padding-bottom:0; font-size:13px; font-weight:700; color:var(--coral); border-bottom:none;}

.nav-phone{white-space:nowrap; padding:12px 12px; height:40px;}
[dir="rtl"] .nav-phone{direction:ltr;}
.nav-phone svg{width:16px; height:16px; color:var(--coral); flex-shrink:0;}
.nav-whatsapp{border-color:var(--coral); padding:12px 16px; height:40px;}
.nav-whatsapp:hover{background:var(--cobalt) !important; border-color:var(--cobalt) !important;}

.brand-logo-img{height:44px; width:auto;}


@media (max-width:1300px){
  .nav-quote{display:none;}
}
@media (max-width:900px){
  .carousel{height:calc(100vh - 68px); min-height:560px;}
  .updates-overlay{top:auto; left:0; right:0; bottom:0; width:100%; height:auto; max-height:280px;
    background:linear-gradient(180deg, rgba(18,25,35,0) 0%, rgba(18,25,35,0.5) 22%, rgba(15,21,30,0.86) 55%, rgba(13,19,28,0.95) 100%);
    padding:22px 22px 18px; overflow:hidden;}
  .update-link{padding:9px 0;}
  .carousel-note{font-size:12.5px; padding:14px 18px; width:78%; max-width:78%; height:auto; overflow:visible;}
  .carousel-arrow.next{right:18px;}
  .carousel-dots{right:0; bottom:16px; top:auto;}
}
@media (max-width:1200px){
  .carousel{height:400px; min-height:400px;}
  .carousel-caption h2{font-size:20px;}
  .page-shell{padding:0 18px;}
  .updates-overlay{max-height:230px; padding:18px 18px 14px;}
  .update-link .u-title{font-size:13px;}

  nav{display:flex; flex-wrap:wrap; align-items:center; row-gap:10px;}
  .menu-btn{order:1;}
  .brand{order:2; flex:0 1 auto; margin-inline:auto;}
  .nav-utility{order:3;}
  .nav-utility .staff-login{display:none;}
  .nav-utility .nav-icon-box, a.nav-telegram{width:40px;}
  .nav-right{order:4; width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px;}
  .nav-whatsapp{font-size:13px; padding:9px 22px; height:40px;}
  .nav-phone{font-size:13px; padding:9px 17px; height:40px;}
  .nav-phone svg{width:16px; height:16px;}
  .nav-telegram{height:40px;}
}

@media (max-width:1200px){
  .wrap{padding:0 20px;} .nav-links{display:none;} .menu-btn{display:flex;}
  .photo-hero{min-height:260px;} .photo-hero h1{font-size:26px;}
  .card-grid, .card-grid.two, .card-grid.four, .blog-grid{grid-template-columns:1fr;}
  .hero-ctas{flex-direction:column; align-items:stretch;} .hero-ctas .btn{justify-content:center;}
  section:not(.carousel){padding-top:36px; padding-bottom:36px;} .service-detail{flex-direction:column;} .service-detail img{width:100%; height:160px;}
  .service-detail .arrow{display:none;}
  .contact-box{flex-direction:column; align-items:flex-start; padding:28px 22px;} .contact-box .btn{width:100%; justify-content:center;}
  .price-table{font-size:12px;} .price-table th, .price-table td{padding:10px 10px;}
  .featured-offer .price-tag{margin-left:0;}
  .process-split{grid-template-columns:1fr;}
  .city-card{flex:0 0 200px;}
}
@media (max-width:420px){ .wrap{padding:0 16px;} .brand-sub{display:none;} .nav-phone{padding:9px 11px;} .nav-whatsapp{padding:9px 13px;} }

/* @media (max-width:820px){
  .nav-phone{display:none;}
} */

/* ========================================= */
/* the stats section  */

.stats-strip{
  position:relative; margin-top:0px; overflow:hidden;
  background:#fff; border-radius:22px; padding:44px 36px;
  border:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3, 1fr);
}
.stat-card{text-align:center; padding:14px 16px; position:relative;}
.stat-card:not(:nth-child(3n))::after{
  content:""; position:absolute; top:10%; bottom:10%; inset-inline-end:0; width:1px; background:var(--line);
}
.stat-card:nth-child(n+4)::before{
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px; background:var(--line);
}
.stat-icon-photo{width:115px; height:115px; border-radius:50%; object-fit:cover; border:7px solid var(--tint); margin:0 auto 14px; display:block;}
.stat-number{font-family:'Cairo', sans-serif; font-weight:700; font-size:27px; color:var(--cobalt); line-height:1.15;}
.stat-label{font-size:13px; color:var(--ink-soft); margin-top:6px; line-height:1.4;}

.road-line{position:absolute; bottom:16px; left:5%; right:5%; height:2px; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 20px); opacity:0.35;}

@media (max-width:1200px){
  .stats-strip{grid-template-columns:1fr; padding:32px 20px;}
  .stat-card:not(:nth-child(3n))::after{display:none;}
  .stat-card:nth-child(even)::after{display:none;}
.stat-card:not(:first-child)::before{content:""; position:absolute; top:0; left:15%; right:15%; height:1px; background:var(--line);}
  .stat-icon-photo{width:80px; height:80px; border-width:4px;}
  .stat-number{font-size:22px;}
}

/* ================================================== */
/* About section Home page  */

.about-teaser{max-width:720px; margin:0 auto; text-align:center;}
.about-teaser-icon{width:64px; height:64px; border-radius:50%; background:var(--tint); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 18px;}
.about-teaser h2{margin-top:14px; font-size:34px;}
.about-teaser p{color:var(--ink-soft); font-size:17px; margin-top:16px; line-height:1.75;}
.about-teaser .btn{margin-top:22px;}

/* ===================================================== */

.split-banner{background:linear-gradient(120deg, var(--cobalt), var(--cobalt-deep)); border-radius:24px; padding:40px; display:flex; align-items:center; gap:40px; flex-wrap:wrap;}
.split-banner-text{flex:1; min-width:280px;}
.split-banner-text h2{font-size:28px; margin:12px 0 14px; color:#fff;}
.split-banner-text p{color:#D9E4F5; font-size:15.5px; line-height:1.7;}
.split-banner-text .btn{margin-top:20px;}
.split-banner-visual{flex:0 0 220px;}
.split-banner-visual img{width:220px; height:220px; object-fit:cover; border-radius:20px; display:block;}

.journey-strip{display:flex; align-items:stretch; justify-content:space-between; gap:18px; margin-top:40px;}
.journey-mode{flex:1; position:relative; display:block; min-height:230px; border-radius:20px; overflow:hidden; background-size:cover; background-position:center; text-decoration:none; color:#fff; box-shadow:0 6px 20px rgba(18,25,35,0.12); transition:transform 0.25s ease, box-shadow 0.25s ease;}
.journey-mode:hover, .journey-mode:focus-visible{transform:translateY(-6px) scale(1.015); box-shadow:0 18px 36px rgba(18,25,35,0.24);}
.journey-mode-overlay{position:absolute; inset:0; background:linear-gradient(190deg, rgba(20,30,48,0.1) 0%, rgba(14,20,32,0.88) 78%);}
.journey-mode-content{position:relative; z-index:1; height:100%; padding:22px 18px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center;}
.journey-badge{width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px; background:rgba(255,255,255,0.14); border:1.5px solid rgba(255,255,255,0.45); backdrop-filter:blur(3px); color:#fff; transition:transform 0.25s ease, background 0.25s ease;}
.journey-mode:hover .journey-badge{transform:scale(1.08); background:var(--coral); border-color:var(--coral);}
.journey-badge svg{width:28px; height:28px; flex-shrink:0;}
.journey-mode h3{font-size:18px; margin-bottom:6px; color:#fff;}
.journey-mode p{font-size:13px; color:rgba(255,255,255,0.85); max-width:190px; margin:0 auto;}

@media (max-width:1200px){
  .split-banner{flex-direction:column; padding:28px 22px; text-align:center;}
  .split-banner-visual{order:-1;}
  .journey-strip{flex-direction:column; gap:16px;}
  .journey-mode{min-height:180px;}
}

/* =================================================================== */
/* Pulsing coverage maps (Egypt + Gulf) */

.coverage-section{background:linear-gradient(180deg, var(--bg), #fff); border-radius:24px; padding:48px 20px; text-align:center; position:relative; overflow:hidden;}
.coverage-section h2{font-size:30px; max-width:520px; margin:14px auto 8px;}
.coverage-section > p{color:var(--ink-soft); font-size:15px; max-width:480px; margin:0 auto 20px;}
.coverage-section + .coverage-section{margin-top:28px;}

.egypt-map-wrap{position:relative; max-width:340px; margin:0 auto;}
.egypt-map-real{width:100%; display:block;}

/* Gulf map: no literal country outline (deliberate -- see project notes on
   why a geopolitically precise Gulf border SVG was avoided). A soft tinted
   panel stands in for a "map" backdrop; the dots carry the geography. */
/* A real OpenStreetMap screenshot (c OpenStreetMap contributors, ODbL --
   attribution added in the markup right below the panel), not a hand-drawn
   or composited shape -- two earlier abstract attempts (a dot-grid panel,
   then a blob shape) both failed to read as "a map" to an actual viewer.
   Using the real map image sidesteps the border-accuracy risk that made
   us avoid this originally: we're not drawing anything ourselves, just
   showing an accurate third-party map, the same way Egypt already does
   with its own hotlinked country SVG. */
.gulf-map-wrap{position:relative; max-width:560px; aspect-ratio:1568/607; margin:0 auto; border-radius:20px; overflow:hidden;
  background-image:url('../images/maps/gulf-region.jpg');
  background-size:cover; background-position:center;
  border:2px solid var(--line);
  box-shadow:0 6px 20px rgba(18,25,35,0.1);
}
.gulf-map-attribution{text-align:center; font-size:11px; color:var(--ink-soft); opacity:0.7; margin-top:8px;}
.gulf-map-attribution a{color:inherit;}

/* Duration and delay are set per-dot inline (see markup) with deliberately
   uncommon values, so dots drift in and out of phase with each other --
   some fading down while others brighten -- instead of pulsing as one
   synchronized wave. */
.map-pulse-dot{position:absolute; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:var(--cobalt); border:2px solid #fff; box-shadow:0 2px 8px rgba(18,25,35,0.3); cursor:pointer; text-decoration:none; display:block; animation-name:dotBreathe; animation-timing-function:ease-in-out; animation-iteration-count:infinite;}
.map-pulse-dot:hover, .map-pulse-dot:focus-visible{animation-play-state:paused; background:var(--coral); transform:scale(1.25); opacity:1;}
@keyframes dotBreathe{
  0%, 100%{ opacity:0.18; transform:scale(0.8); box-shadow:0 0 0 0 rgba(27,79,145,0.35), 0 2px 8px rgba(18,25,35,0.2); }
  50%{ opacity:1; transform:scale(1.15); box-shadow:0 0 0 7px rgba(27,79,145,0), 0 2px 8px rgba(18,25,35,0.3); }
}
.map-pulse-dot-tooltip{position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px) scale(0.92); white-space:nowrap; background:var(--ink); color:#fff; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity 0.15s ease, transform 0.15s ease; z-index:5;}
.map-pulse-dot-tooltip::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--ink);}
.map-pulse-dot:hover .map-pulse-dot-tooltip, .map-pulse-dot:focus-visible .map-pulse-dot-tooltip, .map-pulse-dot.is-tapped .map-pulse-dot-tooltip{opacity:1; transform:translateX(-50%) translateY(0) scale(1);}

/* Gulf-only: a permanently visible name under each dot (unlike the Egypt
   map's hover-only tooltip), since there's no landmass shape here to give
   the dots context on its own -- the label does that job instead. */
.map-pulse-dot.has-label .map-pulse-dot-label{position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:12px; font-weight:700; color:var(--ink); background:rgba(255,255,255,0.9); padding:2px 9px; border-radius:7px; box-shadow:0 2px 6px rgba(18,25,35,0.1); pointer-events:none;}
.map-pulse-dot.has-label:hover .map-pulse-dot-label{color:var(--coral);}

@media (prefers-reduced-motion: reduce){
  .map-pulse-dot{animation:none; opacity:0.85;}
}

/* =================================================================== */
/* Homepage sourced-stats strip (distinct from the pre-existing
   .stats-strip/.stat-card component above, which is a different layout
   with its own numbers -- kept fully separate to avoid colliding with it) */

.real-stats-strip{display:flex; justify-content:center; gap:48px; flex-wrap:wrap; text-align:center; margin-top:8px;}
.real-stats-strip .real-stat-num{font-family:'Cairo', sans-serif; font-weight:800; font-size:32px; color:var(--cobalt); line-height:1.1;}
.real-stats-strip .real-stat-label{font-size:13px; color:var(--ink-soft); max-width:190px; margin:6px auto 0;}
.real-stats-source{text-align:center; font-size:12px; color:var(--ink-soft); opacity:0.75; margin-top:18px;}
@media (max-width:640px){ .real-stats-strip{gap:28px;} }

/* =================================================================== */
/* Homepage guides teaser */

.guide-teaser-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px;}
.guide-teaser-card{display:block; border:2px solid var(--line); border-radius:16px; padding:20px 18px; text-decoration:none; color:var(--ink); background:#fff; transition:border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;}
.guide-teaser-card:hover{border-color:var(--coral); transform:translateY(-3px); box-shadow:0 10px 24px rgba(18,25,35,0.1);}
.guide-teaser-card h3{font-size:14.5px; margin-bottom:6px;}
.guide-teaser-card span.arrow{color:var(--coral); font-size:13px; font-weight:600;}
@media (max-width:900px){ .guide-teaser-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .guide-teaser-grid{grid-template-columns:1fr;} }

/* =================================================================== */
/* Homepage prices teaser */

.prices-teaser-table{max-width:640px; margin:28px auto 0; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 4px 16px rgba(18,25,35,0.06);}
.prices-teaser-table .data-table{margin-top:0;}

/* ===================================================== */
/* Language switcher */
.nav-utility{display:flex; align-items:center; gap:10px;}
.nav-icon-box{display:inline-flex; align-items:center; justify-content:center; width:32px; height:40px; border:2px solid var(--cobalt); border-radius:10px; color:var(--cobalt); text-decoration:none; flex-shrink:0;}
.nav-icon-box:hover{color:#fff; background:var(--cobalt);}
.nav-telegram{background:var(--cobalt-deep); border-color:var(--cobalt-deep); color:#fff;}
.nav-telegram:hover{background:#fff; color:var(--cobalt-deep);}
.nav-telegram svg{width:18px; height:18px;}
.lang-switch{font-weight:700; white-space:nowrap;}
.lang-glyph{display:inline-block;}
.lang-switch[lang="ar"]{font-family:'Aref Ruqaa', 'Noto Naskh Arabic', 'Cairo', sans-serif; font-size:26px; font-weight:700;}
.lang-switch[lang="ar"] .lang-glyph{transform:translateY(-9px);}
.lang-switch[lang="en"]{font-family:'Cinzel', 'Cairo', Arial, sans-serif; font-size:20px; font-weight:700;}
.lang-switch[lang="en"] .lang-glyph{transform:translateY(3px);}
.staff-login svg{width:18px; height:18px;}
.ltr{direction:ltr; unicode-bidi:isolate; display:inline-block;}

/* ===================================================== */
/* Floating callback/WhatsApp widget — injected by js/main.js on every page */
.wa-fab-wrap{position:fixed; bottom:22px; right:22px; z-index:900; display:flex; flex-direction:column; align-items:flex-end; gap:12px;}
.wa-fab{width:58px; height:58px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(232,115,74,0.45); border:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;}
.wa-fab:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(232,115,74,0.55);}
.wa-fab svg{width:26px; height:26px;}
.wa-fab-panel{background:#fff; border-radius:14px; box-shadow:0 12px 34px rgba(26,35,50,0.18); padding:10px; display:none; flex-direction:column; gap:6px; min-width:230px; border:1px solid var(--line);}
.wa-fab-panel.open{display:flex;}
.wa-fab-panel a, .wa-fab-panel button{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:9px; font-size:14.5px; font-weight:600; color:var(--ink); background:none; border:none; text-align:left; cursor:pointer; width:100%; font-family:inherit;}
.wa-fab-panel a:hover, .wa-fab-panel button:hover{background:var(--bg);}
.wa-fab-panel svg{width:19px; height:19px; flex-shrink:0; color:var(--coral);}
.wa-fab-backdrop{position:fixed; inset:0; background:rgba(15,20,30,0.55); z-index:950; display:none; align-items:center; justify-content:center; padding:20px;}
.wa-fab-backdrop.open{display:flex;}
.wa-modal{background:#fff; border-radius:16px; padding:28px; max-width:380px; width:100%; position:relative; box-shadow:0 20px 50px rgba(0,0,0,0.3);}
.wa-modal h3{margin-bottom:8px;}
.wa-modal p{color:var(--ink-soft); font-size:14px; margin-bottom:16px;}
.wa-modal-close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:22px; line-height:1; color:var(--ink-soft); cursor:pointer;}
.wa-modal .contact-form{display:flex; flex-direction:column; gap:10px;}
.wa-modal-success{display:none; text-align:center; padding:10px 0;}
.wa-modal-success.show{display:block;}
.wa-modal-success .big-check{font-size:38px; margin-bottom:6px;}

/* Get a Quote calculator page */
.quote-tabs{display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap;}
.quote-tab{flex:1; min-width:200px; padding:16px 18px; border-radius:12px; border:2px solid var(--line); background:#fff; cursor:pointer; text-align:left; font-family:inherit;}
.quote-tab strong{display:block; font-size:15.5px; color:var(--ink); margin-bottom:3px;}
.quote-tab span{font-size:13px; color:var(--ink-soft);}
.quote-tab.active{border-color:var(--coral); background:var(--tint);}
.quote-panel{display:none;}
.quote-panel.active{display:block;}
.quote-item-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line);}
.quote-item-row:last-child{border-bottom:none;}
.quote-item-name{font-weight:600; color:var(--ink); font-size:15px;}
.quote-item-sub{font-size:13px; color:var(--ink-soft); margin-top:2px;}
.qty-stepper{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.qty-stepper button{width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--bg); font-size:18px; cursor:pointer; color:var(--ink);}
.qty-stepper button:hover{background:var(--tint); border-color:var(--coral);}
.qty-stepper output{min-width:24px; text-align:center; font-weight:700;}
.quote-select-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.quote-select-row select{padding:9px 12px; border-radius:8px; border:1px solid var(--line); font-family:inherit; font-size:14px; background:#fff;}
.quote-summary-box{background:var(--tint); border-radius:14px; padding:24px; margin-top:22px; position:sticky; top:20px;}
.quote-summary-box h4{font-size:14px; color:var(--ink-soft); margin-bottom:10px; text-transform:uppercase; letter-spacing:.4px;}
.quote-total{font-size:30px; font-weight:800; color:var(--cobalt); margin-bottom:4px;}
.quote-total .egp{font-size:14px; color:var(--ink-soft); font-weight:600; display:block; margin-top:4px;}
.quote-note{font-size:12.5px; color:var(--ink-soft); margin-top:12px; line-height:1.6;}
.quote-summary-box .btn{width:100%; margin-top:10px; justify-content:center;}
.quote-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:start;}
@media (max-width:800px){ .quote-grid{grid-template-columns:1fr;} .quote-summary-box{position:static;} }

/* ===================================================== */
/* RTL (Arabic) overrides — direction itself comes from the html[dir="rtl"] attribute;
   these are only the spots that use hardcoded left/right or don't auto-mirror. */
[dir="rtl"] .dropdown-panel{left:auto; right:0;}
[dir="rtl"] .price-table th{text-align:right;}
[dir="rtl"] .featured-offer .price-tag{margin-left:0; margin-right:auto;}
[dir="rtl"] .service-detail .arrow{margin-left:0; margin-right:auto;}
[dir="rtl"] .mobile-menu a.mobile-submenu-link{padding-left:28px; padding-right:44px;}
[dir="rtl"] .brand-name-small{margin-left:0; margin-right:3px;}
[dir="rtl"] .journey-strip::before{left:60px; right:60px;}
[dir="rtl"] .carousel-note{left:auto; right:10%;}

/* Arabic body font — confirmed direction, Cairo kept for the brand lockup specifically */
[dir="rtl"] body{font-family:'Noto Naskh Arabic', 'Cairo', sans-serif; font-weight:500;}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .approach-num,
[dir="rtl"] summary,
[dir="rtl"] .stat-number{
  font-family:'Noto Naskh Arabic', 'Cairo', sans-serif;
  font-weight:700;
}
[dir="rtl"] .btn,
[dir="rtl"] .contact-form input, [dir="rtl"] .contact-form textarea,
[dir="rtl"] .track-box input{
  font-family:'Noto Naskh Arabic', 'Cairo', sans-serif;
}
[dir="rtl"] a.nav-phone{font-family:'Cairo', sans-serif;}
[dir="rtl"] .wa-fab-wrap{align-items:flex-start;}
[dir="rtl"] .wa-fab-panel a, [dir="rtl"] .wa-fab-panel button{text-align:right;}
[dir="rtl"] .wa-modal-close{right:auto; left:16px;}
[dir="rtl"] .quote-tab{text-align:right;}
[dir="rtl"] .quote-total .egp{direction:ltr; unicode-bidi:isolate;}

/* ================================================================ */
/* PAGE-SCOPED: UAE-to-Egypt visual redesign (body.svc-redesign only) */
/* ================================================================ */

/* Typography — bigger contrast between headings and body text.
   Bare `p`/`h3` selectors here deliberately carry no inline font-size
   overrides in the HTML anymore — keep it that way, or these rules lose
   the cascade to inline styles again. */
body.svc-redesign .photo-hero h1{font-size:42px;}
body.svc-redesign h2{font-size:30px; font-weight:800;}
body.svc-redesign p, body.svc-redesign details p, body.svc-redesign .feature-card p,
body.svc-redesign .city-slide-body p, body.svc-redesign .approach-item p,
body.svc-redesign .method-card p, body.svc-redesign li{
  font-size:17px; line-height:1.75;
}
body.svc-redesign summary{font-size:18px;}
body.svc-redesign .feature-card h3, body.svc-redesign .city-slide-body h3,
body.svc-redesign .process-track h3, body.svc-redesign .method-card h3{font-size:19px;}
body.svc-redesign .approach-num{font-size:28px;}
body.svc-redesign .price-table td, body.svc-redesign .price-table th{font-size:15px;}
body.svc-redesign .price-table td.amount{font-size:16.5px;}
body.svc-redesign .featured-offer .price-tag{font-size:32px;}
@media (max-width:1200px){
  body.svc-redesign .photo-hero h1{font-size:30px;}
  body.svc-redesign h2{font-size:24px;}
}

/* Chapter backgrounds — alternate white / soft-gray / full-bleed photo */
body.svc-redesign section.chapter-white{background:#fff;}
body.svc-redesign section.chapter-soft{background:var(--bg);}
body.svc-redesign section.chapter-photo{position:relative; background-size:cover; background-position:center; padding:0; overflow:hidden;}
body.svc-redesign section.chapter-photo::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,18,28,0.4), rgba(12,18,28,0.8));}
body.svc-redesign .chapter-photo-inner{position:relative; z-index:1; padding:64px 0; text-align:center;}
body.svc-redesign section.chapter-photo h2{color:#fff;}
body.svc-redesign section.chapter-photo p{color:#E7ECF5; max-width:560px; margin:10px auto 0;}

/* Icon badges — single line-style icon set, single accent color */
body.svc-redesign .icon-badge{width:48px; height:48px; border-radius:50%; background:var(--tint); color:var(--coral); display:flex; align-items:center; justify-content:center; margin-bottom:12px; flex-shrink:0;}
body.svc-redesign .icon-badge svg{width:24px; height:24px;}
body.svc-redesign .insurance-callout .icon-badge, body.svc-redesign .featured-offer .icon-badge{margin-bottom:0;}
body.svc-redesign .featured-offer .icon-badge{background:var(--coral); color:#fff;}

/* Agenda navigation — persistent section nav, reused identically across
   every service page that adopts this pattern. Desktop: a slim vertical
   rail of dots pinned to the trailing edge (left in RTL, right in LTR —
   opposite the side body text hugs), fixed through the whole scroll. Each
   dot expands independently, on its own hover/focus, into a small solid
   (non-translucent) tooltip pill with an icon and label — never all six
   rows at once — so the footprint over page content stays minimal and
   nothing bleeds through underneath it. Mobile: a floating round button
   (opposite corner from the WhatsApp fab) that opens a bottom sheet
   listing the same sections. Both surfaces share a progress indicator —
   the rail's connecting line fills, the fab's ring fills — tracking how
   far down the page the visitor has scrolled. */
body.svc-redesign .agenda-rail{position:fixed; top:50%; inset-inline-end:18px; transform:translateY(-50%); z-index:60;}
body.svc-redesign .agenda-rail-line{position:absolute; inset-inline-start:13px; top:4px; bottom:4px; width:2px; background:var(--line); border-radius:2px;}
body.svc-redesign .agenda-rail-line-fill{position:absolute; top:0; inset-inline-start:0; width:100%; height:0%; background:var(--coral); border-radius:2px; transition:height 0.1s linear;}
body.svc-redesign .agenda-rail-items{position:relative; display:flex; flex-direction:column; gap:16px; padding:14px 9px;}
/* The dot never moves — it's the only thing in normal flow. The tooltip is
   pulled OUT of flow and pinned by its inline-end edge to the item's own
   inline-start edge, so it always grows toward inline-start: away from the
   viewport edge the rail is anchored to, on both RTL and LTR pages, using
   the same rule. */
body.svc-redesign .agenda-rail-item{position:relative; display:block; text-decoration:none; color:var(--ink); padding:7px 8px;}
body.svc-redesign .agenda-dot{display:block; width:9px; height:9px; border-radius:50%; background:var(--line); transition:background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;}
body.svc-redesign .agenda-rail-tooltip{
  position:absolute;
  top:50%; inset-inline-end:calc(100% + 6px);
  transform:translateY(-50%) scale(0.92);
  display:flex; align-items:center; gap:8px;
  padding:9px 16px;
  border-radius:10px;
  background:linear-gradient(160deg, #fff, var(--tint));
  border:1px solid rgba(232,115,74,0.3);
  box-shadow:0 10px 26px rgba(18,25,35,0.18);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.15s ease, transform 0.15s ease;
}
body.svc-redesign .agenda-rail-item:hover .agenda-rail-tooltip,
body.svc-redesign .agenda-rail-item:focus .agenda-rail-tooltip{opacity:1; transform:translateY(-50%) scale(1);}
body.svc-redesign .agenda-rail-icon{display:flex; align-items:center; justify-content:center; color:var(--coral); flex-shrink:0;}
body.svc-redesign .agenda-rail-icon svg{width:16px; height:16px; flex-shrink:0;}
body.svc-redesign .agenda-rail-label{font-size:13.5px; font-weight:700; color:var(--ink);}
body.svc-redesign .agenda-rail-item:hover .agenda-dot{background:var(--coral-deep);}
body.svc-redesign .agenda-rail-item.is-active .agenda-dot{background:var(--coral); transform:scale(1.2); box-shadow:0 0 0 5px rgba(232,115,74,0.22); animation:agendaPulse 2.2s ease-in-out infinite;}
body.svc-redesign .agenda-rail-item.is-active .agenda-rail-label,
body.svc-redesign .agenda-rail-item.is-active .agenda-rail-icon{color:var(--coral);}
@keyframes agendaPulse{0%,100%{box-shadow:0 0 0 5px rgba(232,115,74,0.22);} 50%{box-shadow:0 0 0 8px rgba(232,115,74,0.1);}}
@media (prefers-reduced-motion: reduce){
  body.svc-redesign .agenda-rail-item.is-active .agenda-dot{animation:none;}
}

body.svc-redesign .agenda-fab, body.svc-redesign .agenda-sheet, body.svc-redesign .agenda-sheet-backdrop{display:none;}
@media (max-width:900px){
  body.svc-redesign .agenda-rail{display:none;}
  body.svc-redesign .agenda-fab{display:flex; position:fixed; bottom:22px; left:22px; z-index:900; width:52px; height:52px; padding:0; border:none; border-radius:50%; background:var(--coral); color:#fff; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 22px rgba(232,115,74,0.45);}
  body.svc-redesign .agenda-fab-icon{width:20px; height:20px; position:relative; z-index:1;}
  body.svc-redesign .agenda-fab-progress{position:absolute; inset:0; width:52px; height:52px; transform:rotate(-90deg);}
  body.svc-redesign .agenda-fab-progress-track{fill:none; stroke:rgba(255,255,255,0.35); stroke-width:3;}
  body.svc-redesign .agenda-fab-progress-fill{fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-dasharray:138.23; stroke-dashoffset:138.23; transition:stroke-dashoffset 0.1s linear;}

  body.svc-redesign .agenda-sheet-backdrop{display:block; position:fixed; inset:0; z-index:940; background:rgba(15,20,30,0.5); opacity:0; pointer-events:none; transition:opacity 0.25s ease;}
  body.svc-redesign .agenda-sheet-backdrop.is-open{opacity:1; pointer-events:auto;}
  body.svc-redesign .agenda-sheet{display:block; position:fixed; left:0; right:0; bottom:0; z-index:950; background:#fff; border-radius:22px 22px 0 0; padding:10px 10px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -14px 40px rgba(18,25,35,0.22); transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);}
  body.svc-redesign .agenda-sheet.is-open{transform:translateY(0);}
  body.svc-redesign .agenda-sheet-handle{width:40px; height:4px; border-radius:2px; background:var(--line); margin:6px auto 14px;}
  body.svc-redesign .agenda-sheet-items{display:flex; flex-direction:column;}
  body.svc-redesign .agenda-sheet-item{display:flex; align-items:center; gap:14px; padding:16px 14px; border-radius:14px; text-decoration:none; color:var(--ink); font-weight:700; font-size:16px;}
  body.svc-redesign .agenda-sheet-item:active{background:var(--bg);}
  body.svc-redesign .agenda-sheet-item.is-active{color:var(--coral); background:var(--tint);}
  body.svc-redesign .agenda-sheet-item.is-active .agenda-dot{background:var(--coral);}
}

/* Why choose us — photo-split layout, more visual weight than a plain 4-up grid */
body.svc-redesign section.chapter-tint{background:var(--tint);}
body.svc-redesign .why-us-split{display:flex; gap:40px; align-items:stretch; margin-top:28px;}
body.svc-redesign .why-us-photo{flex:0 0 40%; border-radius:20px; overflow:hidden; min-height:440px; background-size:cover; background-position:center;}
body.svc-redesign .why-us-points{flex:1; display:flex; flex-direction:column; justify-content:center; gap:26px;}
body.svc-redesign .why-us-point{display:flex; gap:18px; align-items:flex-start;}
body.svc-redesign .why-us-point .icon-badge{margin-bottom:0;}
body.svc-redesign .why-us-point h3{font-size:19px; margin-bottom:4px;}
body.svc-redesign .why-us-point p{margin:0;}
@media (max-width:1200px){
  body.svc-redesign .why-us-split{flex-direction:column; gap:24px;}
  body.svc-redesign .why-us-photo{flex:none; min-height:220px; width:100%;}
}

/* Method cards — shipping-by-method redesign */
body.svc-redesign .method-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px;}
body.svc-redesign .method-card{position:relative; border-radius:20px; overflow:hidden; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; padding:24px 22px; background-size:cover; background-position:center; color:#fff;}
body.svc-redesign .method-card::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,18,28,0.1) 0%, rgba(12,18,28,0.92) 80%);}
body.svc-redesign .method-card > *{position:relative; z-index:1;}
body.svc-redesign .method-badge{width:50px; height:50px; border-radius:14px; background:var(--coral); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
body.svc-redesign .method-badge svg{width:26px; height:26px; color:#fff;}
body.svc-redesign .method-stat{font-size:32px; font-weight:800; line-height:1.15; margin-bottom:2px;}
body.svc-redesign .method-stat-label{font-size:12px; color:#D9E4F5; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px;}
body.svc-redesign .method-card h3{color:#fff; font-size:19px; margin-bottom:6px;}
body.svc-redesign .method-card p{color:#D9E4F5; line-height:1.6;}
body.svc-redesign .method-card a{color:#fff; font-weight:700;}
@media (max-width:1200px){ body.svc-redesign .method-grid{grid-template-columns:1fr;} }

/* Method comparison — speed / cost / best-suited-for, side by side */
body.svc-redesign .compare-grid{margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch;}
body.svc-redesign .compare-block{background:#fff; border:2px solid var(--line); border-radius:16px; padding:22px 22px;}
body.svc-redesign .compare-block-title{font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:18px;}
body.svc-redesign .speed-row{display:flex; align-items:center; gap:10px; margin-bottom:15px;}
body.svc-redesign .speed-row:last-child{margin-bottom:0;}
body.svc-redesign .speed-method{width:44px; flex-shrink:0; font-weight:700; font-size:13.5px;}
body.svc-redesign .speed-track{flex:1; height:11px; border-radius:6px; background:var(--bg); overflow:hidden;}
body.svc-redesign .speed-fill{height:100%; border-radius:6px; background:linear-gradient(90deg, var(--coral-deep), var(--coral));}
body.svc-redesign .speed-fill.cost{background:linear-gradient(90deg, var(--cobalt-deep), var(--azure));}
body.svc-redesign .speed-time{width:auto; flex-shrink:0; font-size:12.5px; color:var(--ink-soft); text-align:left;}
body.svc-redesign .suited-row{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px;}
body.svc-redesign .suited-row:last-child{margin-bottom:0;}
body.svc-redesign .suited-icon{width:34px; height:34px; border-radius:50%; background:var(--tint); color:var(--coral); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
body.svc-redesign .suited-icon svg{width:18px; height:18px;}
body.svc-redesign .suited-method{font-weight:700; font-size:14px; margin-bottom:2px;}
body.svc-redesign .suited-label{font-size:13px; color:var(--ink-soft); line-height:1.5;}
@media (max-width:1200px){
  body.svc-redesign .compare-grid{grid-template-columns:1fr;}
}
[dir="rtl"] body.svc-redesign .speed-time{text-align:right;}

/* City / destination photo slider — shared by "coverage" and "where we deliver".
   The whole carousel (arrows included) sits inside a bordered frame whose
   side padding is the arrows' dedicated margin — they never sit on top of
   a card/photo, they sit in the frame's own reserved gutter. */
body.svc-redesign .city-slider-frame{position:relative; margin-top:28px; border:2px solid var(--line); border-radius:24px; background:#fff; padding:22px 76px;}
body.svc-redesign .city-slider{position:relative;}
body.svc-redesign .city-slider-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding:10px max(16px, calc(50% - 130px)) 16px; scrollbar-width:none; -ms-overflow-style:none;}
body.svc-redesign .city-slider-track::-webkit-scrollbar{display:none; height:0;}
body.svc-redesign .city-slide{flex:0 0 260px; scroll-snap-align:center; background:#fff; border:2px solid var(--line); border-radius:18px; overflow:hidden; opacity:0.55; transform:scale(0.92); transition:opacity 0.3s ease, transform 0.3s ease;}
body.svc-redesign .city-slide.is-active{opacity:1; transform:scale(1.07); box-shadow:0 20px 40px rgba(18,25,35,0.18); z-index:2;}
body.svc-redesign .city-slide-photo{height:150px; background-size:cover; background-position:center;}
body.svc-redesign .city-slide-body{padding:16px 18px;}
body.svc-redesign .city-slide-body h3{font-size:19px; margin-bottom:6px; color:var(--cobalt);}
body.svc-redesign .city-slide-body p{line-height:1.65; color:var(--ink-soft);}
body.svc-redesign .city-slider-dots{display:flex; justify-content:center; gap:7px; margin-top:16px;}
body.svc-redesign .city-slider-dot{width:8px; height:8px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:all 0.2s ease;}
body.svc-redesign .city-slider-dot.active{background:var(--coral); width:22px; border-radius:4px;}
body.svc-redesign .city-slider-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:42px; height:42px; border-radius:50%; border:2px solid var(--line); background:#fff; box-shadow:0 8px 20px rgba(18,25,35,0.12); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s ease;}
body.svc-redesign .city-slider-arrow:hover{background:var(--tint);}
body.svc-redesign .city-slider-arrow svg{width:20px; height:20px;}
body.svc-redesign .city-slider-arrow.prev{inset-inline-start:18px;}
body.svc-redesign .city-slider-arrow.next{inset-inline-end:18px;}
@media (max-width:1200px){
  body.svc-redesign .city-slider-frame{padding:18px 54px;}
  body.svc-redesign .city-slide{flex:0 0 220px;}
  body.svc-redesign .city-slider-track{padding-inline:max(16px, calc(50% - 110px));}
  body.svc-redesign .city-slider-arrow{width:36px; height:36px;}
  body.svc-redesign .city-slider-arrow svg{width:17px; height:17px;}
  body.svc-redesign .city-slider-arrow.prev{inset-inline-start:8px;}
  body.svc-redesign .city-slider-arrow.next{inset-inline-end:8px;}
}
/* Phone widths: the arrow gutter has no room left next to a comfortably
   sized card — drop to swipe-only navigation (looping still works via
   touch/scroll) rather than cramming the buttons in. */
@media (max-width:640px){
  body.svc-redesign .city-slider-arrow{display:none;}
  body.svc-redesign .city-slider-frame{padding:16px 8px;}
}

/* Compact photo gallery — real work photos, caption overlay, opens a lightbox */
body.svc-redesign .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px;}
body.svc-redesign .gallery-item{position:relative; margin:0; border-radius:14px; overflow:hidden; aspect-ratio:1/1; border:2px solid var(--line); cursor:pointer;}
body.svc-redesign .gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.25s ease;}
body.svc-redesign .gallery-item:hover img{transform:scale(1.06);}
body.svc-redesign .gallery-item figcaption{position:absolute; inset-inline:0; bottom:0; padding:10px 12px 8px; background:linear-gradient(180deg, rgba(12,18,28,0) 0%, rgba(12,18,28,0.85) 100%); color:#fff; font-size:12.5px; font-weight:600; line-height:1.4;}
@media (max-width:1200px){
  body.svc-redesign .gallery-grid{grid-template-columns:repeat(2,1fr);}
}

/* Gallery lightbox */
body.svc-redesign .lightbox{position:fixed; inset:0; z-index:200; background:rgba(8,12,18,0.94); display:flex; align-items:center; justify-content:center; padding:60px 24px;}
body.svc-redesign .lightbox-content{max-width:920px; width:100%; display:flex; flex-direction:column; align-items:center;}
body.svc-redesign .lightbox-content img{max-width:100%; max-height:72vh; border-radius:14px; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,0.4);}
body.svc-redesign .lightbox-content p{color:#fff; font-size:16px; font-weight:600; margin-top:16px; text-align:center;}
body.svc-redesign .lightbox-close{position:absolute; top:20px; inset-inline-end:20px; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,0.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s ease;}
body.svc-redesign .lightbox-close:hover{background:rgba(255,255,255,0.28);}
body.svc-redesign .lightbox-arrow{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:none; background:rgba(255,255,255,0.14); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s ease;}
body.svc-redesign .lightbox-arrow:hover{background:rgba(255,255,255,0.28);}
body.svc-redesign .lightbox-arrow svg{width:24px; height:24px;}
body.svc-redesign .lightbox-arrow.prev{inset-inline-start:16px;}
body.svc-redesign .lightbox-arrow.next{inset-inline-end:16px;}
@media (max-width:640px){
  body.svc-redesign .lightbox{padding:70px 12px 24px;}
  body.svc-redesign .lightbox-arrow{width:40px; height:40px;}
  body.svc-redesign .lightbox-close{top:12px; width:38px; height:38px;}
}

/* Vertical process timeline */
body.svc-redesign .process-track{margin-top:28px;}
body.svc-redesign .process-track + .process-track{margin-top:36px; padding-top:36px; border-top:2px solid var(--line);}
body.svc-redesign .timeline{margin-top:18px; display:flex; flex-direction:column;}
body.svc-redesign .timeline-item{display:flex; gap:18px;}
body.svc-redesign .timeline-marker{position:relative; display:flex; flex-direction:column; align-items:center; flex-shrink:0;}
body.svc-redesign .timeline-icon{width:48px; height:48px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; z-index:1; flex-shrink:0;}
body.svc-redesign .timeline-icon svg{width:22px; height:22px;}
body.svc-redesign .timeline-marker::after{content:""; position:absolute; top:48px; bottom:-28px; left:50%; width:2px; margin-left:-1px; background:var(--line);}
body.svc-redesign .timeline-item:last-child .timeline-marker::after{display:none;}
body.svc-redesign .timeline-content{flex:1; padding-bottom:32px;}
body.svc-redesign .timeline-item:last-child .timeline-content{padding-bottom:0;}
body.svc-redesign .timeline-num{display:block; font-weight:800; font-size:13px; color:var(--coral); margin-bottom:4px; letter-spacing:0.04em;}
body.svc-redesign .timeline-content p{margin:0;}

/* Included-items checklist — simple bordered grid, used for "what's included" */
body.svc-redesign .included-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px;}
body.svc-redesign .included-item{display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; background:#fff;}
body.svc-redesign .included-item .icon-badge{margin-bottom:0; width:40px; height:40px; flex-shrink:0;}
body.svc-redesign .included-item .icon-badge svg{width:20px; height:20px;}
body.svc-redesign .included-item p{margin:0; font-weight:600; font-size:14.5px;}
@media (max-width:1200px){
  body.svc-redesign .included-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  body.svc-redesign .included-grid{grid-template-columns:1fr;}
}
/* Photo-paired variant: a supporting photo alongside the checklist grid,
   which then drops to 2 columns to make room. */
body.svc-redesign .included-body{display:flex; gap:24px; align-items:stretch; margin-top:22px;}
body.svc-redesign .included-body .included-grid{flex:1; margin-top:0; grid-template-columns:repeat(2,1fr);}
body.svc-redesign .included-photo{flex:0 0 260px; border-radius:16px; background-size:cover; background-position:center; min-height:240px;}
@media (max-width:900px){
  body.svc-redesign .included-body{flex-direction:column;}
  body.svc-redesign .included-photo{width:100%; flex:none; min-height:200px;}
}

/* Trust bridge — a brief reassurance line + supporting photo between the
   Agenda Nav and the first detailed section, so the page doesn't jump
   straight from the hero into logistics. Shares the same photo size as
   the other paired-photo sections below for a consistent look. */
body.svc-redesign .trust-bridge{display:flex; align-items:center; gap:24px;}
body.svc-redesign .trust-bridge-photo{flex:0 0 260px; min-height:240px; border-radius:16px; background-size:cover; background-position:center;}
body.svc-redesign .trust-bridge p{margin:0; font-size:17px; color:var(--ink); line-height:1.7; max-width:640px;}
@media (max-width:700px){
  body.svc-redesign .trust-bridge{flex-direction:column; text-align:center;}
  body.svc-redesign .trust-bridge-photo{width:100%; max-width:320px; min-height:200px;}
}

/* Pricing tier cards — 4-up grid, replaces a bare price table where a page
   wants tiers to read as distinct plans rather than table rows */
body.svc-redesign .price-tier-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:32px;}
body.svc-redesign .price-tier-card{position:relative; border:2px solid var(--line); border-radius:18px; padding:26px 20px; text-align:center; background:linear-gradient(165deg, #fff, var(--bg)); box-shadow:0 4px 16px rgba(18,25,35,0.06); transition:border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;}
body.svc-redesign .price-tier-card:hover{border-color:var(--coral); transform:translateY(-3px); box-shadow:0 12px 28px rgba(18,25,35,0.12);}
body.svc-redesign .price-tier-card.is-featured{border-color:var(--coral); background:linear-gradient(165deg, #fff, rgba(232,115,74,0.09)); box-shadow:0 8px 24px rgba(232,115,74,0.16);}
body.svc-redesign .price-tier-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--coral); color:#fff; font-size:11px; font-weight:700; padding:5px 14px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 10px rgba(232,115,74,0.35);}
body.svc-redesign .price-tier-card .icon-badge{margin:0 auto 14px;}
body.svc-redesign .price-tier-card h3{font-size:15.5px; margin-bottom:12px; min-height:42px;}
body.svc-redesign .price-tier-amount{font-size:19px; font-weight:800; color:var(--coral); line-height:1.3;}
body.svc-redesign .price-tier-amount span{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-top:2px;}
body.svc-redesign a.country-card{display:block; text-decoration:none; color:inherit; padding:0; overflow:hidden;}
body.svc-redesign .country-card-photo{display:block; width:calc(100% + 40px); height:110px; margin:-26px -20px 16px; background-size:cover; background-position:center;}
body.svc-redesign .country-card-link{display:inline-block; margin-top:12px; color:var(--coral); font-weight:700; font-size:13px;}
body.svc-redesign a.country-card:hover .country-card-link{text-decoration:underline;}
@media (max-width:1200px){
  body.svc-redesign .price-tier-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  body.svc-redesign .price-tier-grid{grid-template-columns:1fr;}
}

/* Residential / Commercial toggle tabs */
body.svc-redesign .toggle-tabs{margin-top:24px;}
body.svc-redesign .toggle-tab-buttons{display:flex; gap:8px; border-bottom:2px solid var(--line); flex-wrap:wrap;}
body.svc-redesign .toggle-tab-btn{padding:12px 22px; border:none; background:none; font-family:'Cairo', sans-serif; font-weight:700; font-size:15px; color:var(--ink-soft); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color 0.15s ease, border-color 0.15s ease;}
body.svc-redesign .toggle-tab-btn:hover{color:var(--coral);}
body.svc-redesign .toggle-tab-btn.is-active{color:var(--coral); border-color:var(--coral);}
body.svc-redesign .toggle-tab-panel{padding:26px 2px 4px;}
body.svc-redesign .toggle-tab-panel p{margin:0; color:var(--ink-soft); font-size:16px; line-height:1.75;}
body.svc-redesign .toggle-tab-body{display:flex; align-items:stretch; gap:28px;}
body.svc-redesign .toggle-tab-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; justify-content:center; gap:16px; flex:1;}
body.svc-redesign .toggle-tab-list li{display:flex; align-items:flex-start; gap:12px; font-size:15.5px; color:var(--ink); font-weight:600;}
body.svc-redesign .toggle-tab-list .icon-badge{margin-bottom:0; width:36px; height:36px; flex-shrink:0;}
body.svc-redesign .toggle-tab-list .icon-badge svg{width:18px; height:18px;}
body.svc-redesign .toggle-tab-list-text{display:flex; flex-direction:column; gap:2px; padding-top:2px;}
body.svc-redesign .toggle-tab-note{font-weight:500; font-size:13px; color:var(--ink-soft);}
body.svc-redesign .toggle-tab-photo{flex:0 0 260px; min-height:240px; border-radius:16px; background-size:cover; background-position:center;}
@media (max-width:900px){
  body.svc-redesign .toggle-tab-body{flex-direction:column;}
  body.svc-redesign .toggle-tab-photo{width:100%; flex:none; max-width:320px; min-height:200px;}
}

/* Scroll-triggered reveal */
body.svc-redesign .reveal{opacity:0; transform:translateY(24px); transition:opacity 0.35s ease, transform 0.35s ease;}
body.svc-redesign .reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  body.svc-redesign .reveal{opacity:1; transform:none; transition:none;}
}

/* Safe-area padding for notch/home-indicator devices */
body.svc-redesign{padding-bottom:env(safe-area-inset-bottom);}

[hidden]{display:none !important;}
/* Visually hidden but read by search engines and screen readers */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* Round photo badge with rotating text ring (moving page trust bridge) */
body.svc-redesign .trust-badge{position:relative; flex:0 0 280px; width:280px; height:280px;}
body.svc-redesign .trust-badge-ring{position:absolute; inset:0; width:100%; height:100%; animation:trustSpin 40s linear infinite; overflow:visible;}
body.svc-redesign .trust-badge-ring text{fill:var(--cobalt); font-size:17px; font-weight:700; font-family:inherit;}
body.svc-redesign .trust-badge img{position:absolute; top:40px; left:40px; width:200px; height:200px; border-radius:50%; object-fit:cover; border:5px solid var(--coral); box-shadow:0 10px 28px rgba(18,25,35,0.18);}
@keyframes trustSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ body.svc-redesign .trust-badge-ring{animation:none;} }
@media (max-width: 760px){ body.svc-redesign .trust-badge{flex:0 0 auto; margin:0 auto;} }

/* Updates articles */
.article-body{max-width:780px;}
.article-body p{color:var(--ink); font-size:16.5px; line-height:1.85; margin:0 0 16px;}
.article-body p.lead{font-size:19px; color:var(--ink); line-height:1.8;}
.article-body h2{font-size:24px; margin:34px 0 12px; color:var(--cobalt);}
.article-body ul{margin:0 0 18px; padding-inline-start:22px;}
.article-body li{font-size:16px; line-height:1.8; margin-bottom:8px; color:var(--ink);}
.article-body a{color:var(--coral); font-weight:600;}
.article-sources{margin-top:30px; padding:18px 22px; background:var(--tint); border-radius:14px;}
.article-sources h3{font-size:15px; margin:0 0 8px; color:var(--cobalt);}
.article-sources ol{margin:0; padding-inline-start:20px;}
.article-sources li{font-size:13.5px; line-height:1.7; margin:0;}
.article-sources a{direction:ltr; unicode-bidi:isolate;}

/* Service notice banner (e.g. sea freight paused) */
.service-notice{display:flex; gap:14px; align-items:flex-start; background:#FFF4EE; border:1px solid #F6CDB9; border-inline-start:6px solid var(--coral); border-radius:14px; padding:16px 20px;}
.service-notice p{margin:0; color:var(--ink); font-size:15px; line-height:1.7;}
.service-notice a{color:var(--coral-deep); font-weight:700; white-space:nowrap;}
.service-notice-tag{flex:0 0 auto; background:var(--coral); color:#fff; font-size:12.5px; font-weight:700; padding:4px 12px; border-radius:999px; margin-top:2px;}
@media (max-width:640px){ .service-notice{flex-direction:column; gap:8px;} }

/* Intro video (home + UAE-to-Egypt pages) */
.intro-video{text-align:center;}
.intro-video h2{margin:0 0 10px;}
.intro-video-sub{color:var(--ink-soft); font-size:16px; margin:0 auto 26px; max-width:560px; line-height:1.7;}
.video-frame{max-width:960px; margin:0 auto; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(15,42,77,.08); aspect-ratio:16/9; background:#0F2A4D;}
.video-frame video{width:100%; height:100%; display:block;}

/* New pyramid mark is wider than tall: slightly smaller on phones so it balances the brand text */
@media (max-width:760px){ .brand-logo-img{height:38px;} }