/* Company marketing site ("/") - completely separate from the driver/office apps (app.css /
   office.css). Nothing here is shared with those on purpose, so nothing here can ever affect the
   driver app's look, and vice versa. */
:root{
  --c-ink:#0f1b22; --c-muted:#5c6b74; --c-bg:#f6f8f9; --c-card:#fff; --c-line:#e2e7ea;
  --c-primary:#0b6e4f; --c-primary-dark:#074a35; --c-primary-soft:#e3f4ee;
  --c-accent:#c88a2b;
  --c-shadow:0 2px 10px rgba(15,27,34,.06), 0 10px 30px rgba(15,27,34,.06);
  --c-radius:18px;
  --c-maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-ink:#eef2f3; --c-muted:#a7b3ba; --c-bg:#0d1417; --c-card:#141d21; --c-line:#233036;
    --c-primary:#22a473; --c-primary-dark:#0b6e4f; --c-primary-soft:#12352b;
    --c-shadow:0 2px 10px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35);
  }
}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
html{scroll-behavior:smooth}
/* A calm, abstract backdrop across the whole site (roads/route-lines, very subtle) instead of flat
   white/empty space - two soft brand-colour glows plus a faint diagonal "route lines" texture,
   fixed so it never re-paints while scrolling. Kept extremely light (single-digit % mix) so it
   reads as depth, not decoration fighting the content. */
html,body{margin:0;color:var(--c-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;line-height:1.6;
  background-color:var(--c-bg);
  background-image:
    radial-gradient(900px 460px at 6% -10%, color-mix(in srgb, var(--c-primary) 9%, transparent), transparent 60%),
    radial-gradient(720px 420px at 100% 6%, color-mix(in srgb, var(--c-accent) 8%, transparent), transparent 55%),
    repeating-linear-gradient(118deg, color-mix(in srgb, var(--c-ink) 3%, transparent) 0 1px, transparent 1px 68px);
  background-attachment:fixed;background-repeat:no-repeat,no-repeat,repeat}
@media (max-width:900px){html,body{background-attachment:scroll}}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
/* Progressive-enhancement page transitions (native View Transitions API - see company.html's
   <meta name="view-transition">): a quick, reduced-motion-safe cross-fade between same-origin
   full navigations. Browsers without support just navigate normally - no JS, nothing to break
   Back/Forward or real URLs (office spec section 27: "يجب ألا يتحول الموقع إلى SPA"). */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
}
.c-container{max-width:var(--c-maxw);margin:0 auto;padding:0 20px}
.c-boot{min-height:100vh;display:grid;place-items:center}
.c-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--c-line);border-top-color:var(--c-primary);animation:c-spin .8s linear infinite}
@keyframes c-spin{to{transform:rotate(360deg)}}

/* ---------- reveal-on-scroll (IntersectionObserver toggles .in) ---------- */
.c-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.c-reveal.in{opacity:1;transform:translateY(0)}

/* ---------- header ---------- */
.c-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--c-line)}
.c-header-row{display:flex;align-items:center;gap:18px;padding:12px 20px;max-width:var(--c-maxw);margin:0 auto}
.c-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;text-decoration:none;
  flex:none;min-width:0}
.c-brand img{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:none}
.c-brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.c-nav{display:flex;align-items:center;gap:6px;flex:1;justify-content:center}
.c-nav a{padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--c-ink);white-space:nowrap}
.c-nav a:hover{background:var(--c-primary-soft);color:var(--c-primary-dark)}
.c-header-actions{display:flex;align-items:center;gap:10px;flex:none}
.c-lang-switch{display:flex;border:1px solid var(--c-line);border-radius:999px;overflow:hidden;font-size:.82rem;font-weight:700}
.c-lang-switch button{border:none;background:var(--c-card);color:var(--c-muted);padding:7px 13px;cursor:pointer;transition:background .15s ease,color .15s ease}
.c-lang-switch button.on{background:var(--c-primary);color:#fff}
.c-cta-drivers{background:var(--c-primary);color:#fff;padding:9px 16px;border-radius:999px;font-weight:700;
  font-size:.88rem;text-decoration:none;white-space:nowrap;box-shadow:var(--c-shadow);transition:background .15s ease,transform .15s ease}
.c-cta-drivers:hover{background:var(--c-primary-dark)}
.c-cta-drivers:active{transform:scale(.96)}
.c-burger{display:none;border:none;background:none;padding:8px;cursor:pointer;flex:none}
.c-burger span{display:block;width:22px;height:2px;background:var(--c-ink);margin:5px 0;border-radius:2px;transition:transform .15s ease}
.c-mobile-menu{display:none;flex-direction:column;gap:2px;padding:8px 20px 16px;border-bottom:1px solid var(--c-line)}
.c-mobile-menu a{padding:12px 8px;text-decoration:none;color:var(--c-ink);font-weight:600;border-radius:10px;transition:background .15s ease}
.c-mobile-menu a:hover{background:var(--c-primary-soft)}
.c-mobile-menu.open{display:flex}
.c-mobile-menu-utils{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--c-line)}
/* Below 900px the nav already collapses into the burger; the lang switch, sound toggle and driver
   CTA that used to stay inline in .c-header-actions are now ALSO tucked into the burger's mobile
   menu (see .c-mobile-menu-utils above and buildHeader() in company.js) - on a 320-430px phone
   those three inline no longer fit next to the brand without forcing horizontal scroll (measured:
   ~607px of content squeezed into a 320-430px viewport). The header row on mobile is just brand +
   burger, which always fits; everything else is one tap away. */
/* 1230px, not 900px: with 7 nav links + brand + lang-switch + sound toggle + driver CTA all inline,
   the header row's real content needs ~1235px (measured) - narrower than that (tablets/small
   laptops around 1024px included) genuinely can't fit it without wrapping or overflowing
   horizontally, so the burger takes over earlier than a phone-only breakpoint would suggest. */
@media (max-width:1230px){
  .c-nav{display:none}
  .c-burger{display:block}
  .c-header-actions{gap:0}
  .c-header-actions .c-sound-toggle,
  .c-header-actions .c-lang-switch,
  .c-cta-drivers{display:none}
  .c-brand{flex:1}
}

/* ---------- social profile icons (header/footer/contact) - only ever rendered when at least one
   active link exists; each icon is a real link to that admin-entered URL, never a placeholder. ---------- */
.c-social-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.c-social-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--c-primary-soft);color:var(--c-primary-dark);transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.c-social-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c-social-icon:hover{background:var(--c-primary);color:#fff;transform:translateY(-2px);box-shadow:var(--c-shadow)}
.c-social-icon:active{transform:scale(.92)}
.c-footer-social{margin-top:14px}
.c-footer .c-social-icon{background:rgba(255,255,255,.08);color:#cdd7db}
.c-footer .c-social-icon:hover{background:var(--c-primary);color:#fff}

/* ---------- sound on/off toggle (very light, optional interaction sounds - see company.js's
   playTick(); never plays before the visitor's own first interaction, never on hover) ---------- */
.c-sound-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--c-line);background:var(--c-card);
  color:var(--c-muted);display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s ease,transform .15s ease,color .15s ease}
.c-sound-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c-sound-toggle:hover{color:var(--c-primary-dark);border-color:var(--c-primary)}
.c-sound-toggle:active{transform:scale(.9)}

/* ---------- page wrapper (every non-home public page) ---------- */
.c-page{min-height:60vh}

/* ---------- home hero: ONE integrated dark "stage" (not two disconnected floating columns) ----------
   The whole hero is a full-bleed panel with its own background (industrial gradient + faint route-
   line/road texture + soft glows behind the video), so the identity text and the video read as one
   composition sharing a common backdrop, rather than "video on white" + "text on white" side by
   side. Height comes from content + generous clamp() padding - no forced min-height, so there's
   never dead vertical space below short content. A diagonal cut at the bottom transitions into the
   page's normal background, like a road receding into the next section. */
.c-hero-stage{position:relative;overflow:hidden;isolation:isolate;color:#f3f7f5;
  background:linear-gradient(150deg,var(--c-primary-dark) 0%,#0b2a1f 45%,#071a13 78%,#04120d 100%)}
.c-hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(640px 420px at 88% 12%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 62%),
    radial-gradient(520px 460px at 8% 92%, color-mix(in srgb, #22a473 28%, transparent), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 84px)}
.c-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr 1fr;align-items:center;
  gap:clamp(28px,4.5vw,64px);padding-block:clamp(52px,9vw,104px)}
.c-hero-stage::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(28px,5vw,58px);
  background:var(--c-bg);clip-path:polygon(0 100%, 100% 42%, 100% 100%);z-index:1}
.c-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.c-home-identity{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.c-home-logo{width:60px;height:60px;border-radius:16px;object-fit:cover;margin-bottom:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14)}
.c-home-identity h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 12px;font-weight:800;line-height:1.2;color:#fff;
  text-wrap:balance}
.c-home-slogan{font-size:clamp(1.08rem,1.8vw,1.35rem);color:var(--c-accent);font-weight:800;margin:0 0 12px}
.c-home-tagline{font-size:clamp(1rem,1.5vw,1.18rem);color:#c9d6d0;margin:0 0 26px;max-width:520px}
/* Real, derived trust strip (never invented numbers) - see buildHomeHero(): only ever shows counts
   the site actually has (active services / gallery photos), and only the ones that are non-zero. */
.c-hero-stat-bar{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,34px);margin-top:clamp(26px,4vw,42px);
  padding-top:clamp(18px,3vw,26px);border-top:1px solid rgba(255,255,255,.14)}
.c-hero-stat{display:flex;flex-direction:column;gap:2px}
.c-hero-stat b{font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:800;color:#fff}
.c-hero-stat span{font-size:.8rem;color:#a9bcb4}
/* Layered "premium" frame around the hero video (office spec section 20-21: never a plain black
   rectangle on white) - a soft gradient border wrapping the video with its own ambient glow, plus
   two small accent corner marks for a technical/industrial feel. On the dark stage this now reads
   as an intentional focal object instead of a disconnected floating box. */
.c-home-video-frame{position:relative;padding:9px;border-radius:calc(var(--c-radius) + 9px);
  background:linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 75%, transparent),
    color-mix(in srgb, #22a473 65%, transparent) 55%, transparent 88%);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08)}
.c-home-video,.c-home-video-empty{position:relative;border-radius:var(--c-radius);overflow:hidden;
  background:#000;aspect-ratio:16/10;width:100%}
.c-home-video-el{width:100%;height:100%;object-fit:cover;display:block}
.c-home-video.broken .c-home-video-el{display:none}
.c-home-video.broken::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--c-primary-dark),var(--c-ink) 120%)}
.c-home-video-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:#cfe0d8;background:linear-gradient(160deg,#0f2a20,#132018);text-align:center;padding:20px}
.c-home-video-empty svg{width:48px;height:48px;stroke:#cfe0d8;fill:none;stroke-width:1.6}
.c-home-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.c-home-video-corner{position:absolute;width:28px;height:28px;pointer-events:none;border-color:var(--c-accent)}
.c-home-video-corner.tl{top:-5px;inset-inline-start:-5px;border-top:3px solid;border-inline-start:3px solid;border-start-start-radius:12px}
.c-home-video-corner.br{bottom:-5px;inset-inline-end:-5px;border-bottom:3px solid;border-inline-end:3px solid;border-end-end-radius:12px}
.c-video-controls{position:absolute;inset-inline:0;bottom:0;display:flex;gap:10px;padding:14px;
  background:linear-gradient(0deg,rgba(0,0,0,.65),transparent)}
.c-video-ctrl{width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.18);
  color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s ease,transform .15s ease}
.c-video-ctrl:hover{background:rgba(255,255,255,.32)}
.c-video-ctrl:active{transform:scale(.92)}
.c-video-ctrl svg{width:18px;height:18px;fill:currentColor;stroke:none}
.c-sound-ctrl{width:auto;height:40px;border-radius:999px;padding:0 16px 0 14px;gap:8px}
.c-sound-ctrl svg{width:16px;height:16px;flex:none}
.c-sound-label{font-size:.82rem;font-weight:700;white-space:nowrap}
.c-sound-ctrl.attn{animation:c-sound-pulse 1.8s ease-in-out infinite}
@keyframes c-sound-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}
  50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}
}
@media (max-width:900px){
  .c-hero-inner{grid-template-columns:1fr}
  .c-home-identity{align-items:center;text-align:center}
  .c-home-tagline{max-width:none}
  .c-home-video,.c-home-video-empty{aspect-ratio:16/11}
  .c-hero-stat-bar{justify-content:center;text-align:center}
}
@media (max-width:420px){
  .c-hero-stat-bar{gap:16px 22px}
}
.c-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:700;
  text-decoration:none;font-size:.98rem;border:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
.c-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.c-btn:active{transform:scale(.96)}
.c-btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.c-btn-primary{background:var(--c-primary);color:#fff;box-shadow:0 6px 18px rgba(11,110,79,.4)}
.c-btn-primary:hover{background:#0e8560;box-shadow:0 8px 22px rgba(11,110,79,.48)}
/* On light backgrounds (the vast majority of uses) - a clean outlined button, not the old
   white-on-white ghost that used to vanish outside the dark hero overlay. */
.c-btn-ghost{background:var(--c-card);color:var(--c-ink);border:1.5px solid var(--c-line)}
.c-btn-ghost:hover{border-color:var(--c-primary);color:var(--c-primary-dark);background:var(--c-primary-soft)}
/* Explicit inverted variant for use ON a dark/video/overlay background. */
.c-btn-ghost-invert{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.5)}
.c-btn-ghost-invert:hover{background:rgba(255,255,255,.2)}
.c-btn-sm{padding:8px 14px;font-size:.86rem;border-radius:10px}
.c-btn-lg{padding:15px 26px;font-size:1.05rem;width:100%;justify-content:center}
@media (min-width:560px){.c-btn-lg{width:auto}}

/* ---------- generic section ---------- */
.c-section{padding-block:clamp(40px,7vw,80px)}
.c-section-head{text-align:center;max-width:720px;margin:0 auto clamp(26px,4vw,40px)}
.c-eyebrow{color:var(--c-primary);font-weight:800;font-size:.85rem;letter-spacing:.03em;margin-bottom:6px}
.c-section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 10px;font-weight:800}
.c-section-head p{color:var(--c-muted);margin:0}
.c-section.alt{background:var(--c-card);border-block:1px solid var(--c-line)}

/* ---------- home services teaser (shares the .c-services-grid / .c-service-card system below -
   see "services" block) ---------- */
.c-teaser-more{text-align:center;margin-top:6px}

/* ---------- media grid ---------- */
.c-media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.c-media-card{border-radius:14px;overflow:hidden;box-shadow:var(--c-shadow);background:#000;aspect-ratio:16/10;position:relative}
.c-media-card video{width:100%;height:100%;object-fit:cover}
.c-media-card .cap{position:absolute;inset-inline:0;bottom:0;padding:10px 12px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);
  color:#fff;font-weight:700;font-size:.88rem}
.c-video-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;overflow:hidden;box-shadow:var(--c-shadow)}
.c-video-card .c-media-card{border-radius:0;box-shadow:none}
.c-video-title{padding:12px 14px 0;font-weight:800;font-size:.96rem}
.c-video-desc{color:var(--c-muted);font-size:.88rem;margin:6px 14px 14px;white-space:pre-line}

/* ---------- about ---------- */
.c-about-block{max-width:820px;margin:0 auto 24px}
.c-about-block h2{font-size:1.3rem;font-weight:800;margin:0 0 10px}
.c-about-block p{font-size:1.05rem;color:var(--c-ink);white-space:pre-line;margin:0}
.c-empty-hint{text-align:center;color:var(--c-muted);padding:40px 20px;font-size:.98rem}

/* ---------- goals (dynamic ordered list) ---------- */
.c-goals-list{list-style:none;margin:0 auto;padding:0;max-width:760px;display:flex;flex-direction:column;gap:14px}
.c-goals-list li{display:flex;align-items:flex-start;gap:14px;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:14px;padding:16px 18px;box-shadow:var(--c-shadow);font-size:1rem}
.c-goal-icon{flex:none;width:34px;height:34px;border-radius:10px;background:var(--c-primary-soft);color:var(--c-primary-dark);
  display:grid;place-items:center;font-weight:800;font-size:1rem}

/* ---------- values (dynamic card grid) ---------- */
.c-values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.c-value-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-radius);
  padding:24px 20px;box-shadow:var(--c-shadow);text-align:center;transition:transform .2s ease,box-shadow .2s ease}
.c-value-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(15,27,34,.12)}
.c-value-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:14px;background:var(--c-primary-soft);
  color:var(--c-primary-dark);display:grid;place-items:center;font-size:1.3rem;font-weight:800}
.c-value-card h3{margin:0 0 6px;font-size:1.04rem;font-weight:800}
.c-value-card p{margin:0;color:var(--c-muted);font-size:.9rem}
@media (max-width:600px){
  .c-goals-list li{padding:14px 16px;font-size:.95rem}
  .c-values-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
}

/* ---------- services: cards (shared by home teaser + /services grid) ----------
   "Stretched link" pattern: .c-service-card-hit is an absolutely-positioned, invisible <a> covering
   the whole card and carrying the real navigation - so tapping anywhere on the card opens the
   service page. The media image and text body are normal (static) boxes, which the CSS painting
   order already places ABOVE an absolutely-positioned sibling with no z-index, so they stay fully
   visible; the quick-action icons get position:relative + z-index so THEY win the tap over the
   stretched link beneath them. This gets "whole card clickable" + "one or two quick icon actions"
   without any button row / without JS stopPropagation tricks beyond the belt-and-braces one in JS. */
.c-services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.c-service-card{position:relative;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-radius);
  overflow:hidden;box-shadow:var(--c-shadow);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column}
.c-service-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(15,27,34,.14)}
.c-service-card-hit{position:absolute;inset:0;z-index:1}
.c-service-card-media{position:relative;aspect-ratio:16/10;background:var(--c-primary-soft);overflow:hidden}
.c-service-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.c-service-card:hover .c-service-card-media img{transform:scale(1.06)}
.c-service-card-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,20,15,.55) 0%,transparent 42%)}
.c-service-card-icon{width:100%;height:100%;display:grid;place-items:center;color:var(--c-primary-dark)}
.c-service-card-icon svg{width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:1.5}
.c-service-card-quick{position:absolute;z-index:2;inset-inline-end:10px;bottom:10px;
  display:flex;gap:8px}
.c-service-card-quick-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--c-primary-dark);box-shadow:0 4px 14px rgba(0,0,0,.28);
  backdrop-filter:blur(2px);transition:transform .15s ease}
.c-service-card-quick-btn:hover{transform:scale(1.08)}
.c-service-card-quick-btn.wa{background:#25d366;color:#fff}
.c-service-card-quick-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-service-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.c-service-card-body h3{margin:0;font-size:1.08rem;font-weight:800}
.c-service-card-body p{margin:0;color:var(--c-muted);font-size:.9rem;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-service-card-more{margin-top:4px;display:inline-flex;align-items:center;gap:4px;font-weight:800;
  font-size:.84rem;color:var(--c-primary)}
.c-service-card-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ---------- fleet gallery ---------- */
.c-fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.c-fleet-item{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--c-shadow);cursor:pointer;
  aspect-ratio:4/3;border:none;padding:0;background:var(--c-card)}
.c-fleet-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.c-fleet-item:hover img{transform:scale(1.06)}
.c-fleet-item .cap{position:absolute;inset-inline:0;bottom:0;padding:8px 10px;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);
  color:#fff;font-size:.82rem;font-weight:700;text-align:start}
.c-lightbox{position:fixed;inset:0;background:rgba(6,12,15,.92);z-index:60;display:flex;align-items:center;
  justify-content:center;padding:26px}
.c-lightbox img{max-width:88vw;max-height:86vh;border-radius:10px}
.c-lightbox-close{position:absolute;top:18px;inset-inline-end:22px;background:rgba(255,255,255,.15);
  color:#fff;border:none;border-radius:50%;width:42px;height:42px;font-size:1.3rem;cursor:pointer;z-index:2}
.c-lightbox-close:hover{background:rgba(255,255,255,.28)}
.c-lightbox-cap{position:absolute;bottom:24px;color:#fff;font-weight:700;background:rgba(0,0,0,.5);
  padding:8px 16px;border-radius:999px;max-width:80vw;text-align:center}
.c-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  border:none;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2;
  transition:background .15s ease}
.c-lightbox-nav:hover{background:rgba(255,255,255,.3)}
.c-lightbox-nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-lightbox-nav.prev{inset-inline-start:16px}
.c-lightbox-nav.next{inset-inline-end:16px}
.c-lightbox .c-share-btn{position:absolute;top:18px;inset-inline-start:22px;z-index:2;
  background:rgba(255,255,255,.15);color:#fff;border-color:transparent}
.c-lightbox .c-share-btn:hover{background:rgba(255,255,255,.28)}
@media (max-width:600px){
  .c-lightbox-nav{width:40px;height:40px}
  .c-lightbox-nav.prev{inset-inline-start:6px}
  .c-lightbox-nav.next{inset-inline-end:6px}
  .c-lightbox .c-share-btn span{display:none}
}

/* ---------- share button (Web Share API + fallback menu) - distinct from the social PROFILE
   icons: this shares the current page/item, never the company's own accounts. ---------- */
.c-share-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--c-line);
  background:var(--c-card);color:var(--c-muted);padding:8px 14px;border-radius:999px;font-weight:700;
  font-size:.84rem;cursor:pointer;transition:border-color .15s ease,color .15s ease,transform .15s ease}
.c-share-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c-share-btn:hover{border-color:var(--c-primary);color:var(--c-primary-dark)}
.c-share-btn:active{transform:scale(.95)}
.c-share-overlay{position:fixed;inset:0;background:rgba(6,12,15,.55);z-index:70;display:flex;
  align-items:flex-end;justify-content:center;padding:0}
@media (min-width:560px){.c-share-overlay{align-items:center;padding:20px}}
.c-share-menu{background:var(--c-card);border-radius:18px 18px 0 0;padding:10px;width:100%;max-width:360px;
  box-shadow:var(--c-shadow);display:flex;flex-direction:column;gap:2px}
@media (min-width:560px){.c-share-menu{border-radius:16px}}
.c-share-menu a,.c-share-menu button{display:flex;align-items:center;gap:12px;padding:13px 14px;border:none;
  background:none;color:var(--c-ink);text-decoration:none;font-weight:700;font-size:.94rem;border-radius:10px;
  cursor:pointer;width:100%;text-align:start;font-family:inherit}
.c-share-menu a:hover,.c-share-menu button:hover{background:var(--c-primary-soft)}
.c-share-menu svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- toast (form/copy-link feedback) ---------- */
/* ---------- floating site-wide share rail (2026-10-01 office redesign) - a vertical STACK of
   separate per-platform buttons pinned to the PHYSICAL left edge (`left`, not a logical/RTL-aware
   property - the office explicitly said "يسار الصفحة"), below the sticky header; present on EVERY
   page (see floatingShareRail() in company.js, wired into render()) so any visitor can share
   whatever page they're on straight to one platform, no extra menu click. Kept below the header's
   own z-index so it never fights the mobile burger menu for a tap - it's simply hidden (via
   body.c-menu-open) while that menu is open. Deliberately its own element, never part of
   .c-header-row/.c-header-actions. ---------- */
.c-share-rail{position:fixed;top:84px;left:14px;z-index:25;display:flex;flex-direction:column;gap:10px}
.c-share-rail-btn{display:flex;align-items:center;gap:7px;background:var(--c-primary);color:#fff;
  border:none;padding:10px 16px;border-radius:999px;box-shadow:var(--c-shadow);cursor:pointer;
  font-weight:700;font-size:.84rem;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.c-share-rail-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
/* real filled brand glyphs (WhatsApp bubble / Facebook "f") swap from outline to filled rendering -
   see BRAND_GLYPHS + floatingShareRail() in company.js, 2026-10-01: "اظهر شعار وسيلة التواصل بشكل
   افضل". Higher specificity (two classes) wins over the plain `.c-share-rail-btn svg` rule above. */
.c-share-rail-btn svg.c-brand-glyph{fill:currentColor;stroke:none}
/* each share button now carries its own platform's real brand color instead of one shared site-green
   background, so WhatsApp/Facebook read at a glance - "غير اللون واظهر شعار وسيلة التواصل بشكل
   افضل". The copy-link button (no platform of its own) gets a distinct darker shade of the site's
   own green so it still visually separates from the two platform buttons. */
.c-share-rail-btn--whatsapp{background:#25d366}
.c-share-rail-btn--whatsapp:hover{background:#1ebc5a}
.c-share-rail-btn--facebook{background:#1877f2}
.c-share-rail-btn--facebook:hover{background:#1466d1}
.c-share-rail-btn--copy{background:var(--c-primary-dark)}
.c-share-rail-btn span{white-space:nowrap}
.c-share-rail-btn:hover{transform:translateX(2px);box-shadow:0 10px 26px rgba(15,27,34,.18)}
.c-share-rail-btn:active{transform:scale(.96)}
body.c-menu-open .c-share-rail{display:none}
@media (max-width:560px){
  .c-share-rail{top:70px;left:10px;gap:8px}
  .c-share-rail-btn{padding:8px 13px;font-size:.76rem;gap:6px}
  .c-share-rail-btn svg{width:15px;height:15px}
}
/* Stay clear of the mobile sticky bottom contact bar on service-detail pages (bottom:0, its own
   z-index:40) - the rail lives near the TOP-LEFT only, so no bottom-edge collision is possible. */

.c-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--c-ink);
  color:var(--c-bg);padding:12px 20px;border-radius:999px;font-weight:700;font-size:.9rem;box-shadow:var(--c-shadow);
  z-index:90;opacity:0;transition:opacity .25s ease,transform .25s ease}
.c-toast.in{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- service detail: contact (desktop card vs. mobile sticky bar - two different UIs on
   purpose, not the desktop layout shrunk down) ---------- */
.c-service-contact-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-radius);
  padding:20px 22px;box-shadow:var(--c-shadow);margin:0 0 32px;display:flex;flex-direction:column;gap:12px}
.c-service-contact-name{font-weight:700;font-size:.92rem;color:var(--c-muted)}
.c-service-contact-actions{display:flex;flex-wrap:wrap;gap:10px}
.c-service-stickybar{display:none}
@media (max-width:720px){
  .c-service-contact-card{display:none}
  .c-page-has-stickybar{padding-bottom:74px}
  .c-service-stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--c-card);border-top:1px solid var(--c-line);
    box-shadow:0 -6px 20px rgba(15,27,34,.1);padding:8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom))}
  .c-service-stickybar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 4px;border-radius:12px;text-decoration:none;color:var(--c-ink);font-size:.74rem;font-weight:700;
    transition:background .15s ease,transform .15s ease}
  .c-service-stickybar-item svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .c-service-stickybar-item:active{transform:scale(.94);background:var(--c-bg)}
  .c-service-stickybar-item.primary{color:var(--c-primary-dark)}
}

/* ---------- service detail page ---------- */
.c-service-hero{position:relative;min-height:280px;display:flex;align-items:flex-end;background-size:cover;
  background-position:center;background-color:var(--c-primary-dark)}
.c-service-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,15,.15),rgba(7,20,15,.82))}
.c-service-hero .c-container{position:relative;z-index:1;padding-bottom:30px}
.c-service-hero h1{color:#fff;margin:0;font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800}
.c-back-link{display:inline-block;margin-bottom:20px;color:var(--c-primary-dark);font-weight:700;
  text-decoration:none;font-size:.92rem}
.c-back-link:hover{text-decoration:underline}
.c-service-desc{font-size:1.05rem;color:var(--c-ink);white-space:pre-line;max-width:820px;margin:0 0 32px}

/* ---------- gallery page ---------- */
.c-gallery-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.c-gallery-tabs button{border:1px solid var(--c-line);background:var(--c-card);color:var(--c-muted);
  padding:8px 16px;border-radius:999px;font-weight:700;font-size:.86rem;cursor:pointer;transition:all .15s ease}
.c-gallery-tabs button:hover{border-color:var(--c-primary)}
.c-gallery-tabs button.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

/* ---------- contact ---------- */
.c-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;max-width:960px;margin:0 auto}
.c-contact-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:16px;padding:20px;
  display:flex;align-items:flex-start;gap:14px;box-shadow:var(--c-shadow);transition:transform .2s ease,box-shadow .2s ease}
.c-contact-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,27,34,.12)}
.c-contact-icon{width:42px;height:42px;border-radius:12px;background:var(--c-primary-soft);color:var(--c-primary-dark);
  display:grid;place-items:center;flex:none}
.c-contact-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c-contact-card-body{min-width:0;flex:1}
.c-contact-card .lbl{font-size:.78rem;color:var(--c-muted);font-weight:700;margin-bottom:6px}
.c-contact-card .val{font-size:1.02rem;font-weight:700;word-break:break-word}
.c-contact-card a.val{text-decoration:none;color:var(--c-primary-dark)}
.c-contact-card a.val:hover{text-decoration:underline}
.c-contact-card .c-phone-actions{margin-top:2px}
.c-contact-empty{text-align:center;color:var(--c-muted);padding:20px}
.c-contact-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.c-contact-social{justify-content:center}

/* ---------- call/WhatsApp split action pair - wherever a phone number is shown (office spec
   section 7: two SEPARATE, clearly labelled buttons, never one icon that assumes WhatsApp). ---------- */
.c-phone-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- manager/contact-person card (General Manager + Operations Manager) ---------- */
.c-ops-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-radius);
  padding:24px;box-shadow:var(--c-shadow);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  position:relative;transition:transform .2s ease,box-shadow .2s ease}
.c-ops-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,27,34,.12)}
.c-ops-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;margin-bottom:12px;box-shadow:var(--c-shadow)}
.c-ops-photo.empty{display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary-dark)}
.c-ops-photo.empty svg{width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:1.6}
.c-ops-name{font-weight:800;font-size:1.12rem}
.c-ops-title{color:var(--c-muted);font-size:.9rem;margin-bottom:14px}
.c-ops-actions,.c-ops-info .c-phone-actions{justify-content:center;margin-bottom:4px}
.c-ops-email{color:var(--c-primary-dark);font-size:.88rem;text-decoration:none;margin-top:6px}
.c-ops-email:hover{text-decoration:underline}
/* Small role badge (icon + label) distinguishing "المدير العام" from "مدير العمليات" when both
   cards are shown together on /contact - borders/shading/small icons, per the office's request. */
.c-ops-role{display:inline-flex;align-items:center;gap:6px;background:var(--c-primary-soft);
  color:var(--c-primary-dark);border:1px solid var(--c-line);font-size:.74rem;font-weight:800;
  padding:4px 12px;border-radius:999px;margin-bottom:12px}
.c-ops-role svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
/* Side-by-side (stacked on narrow screens) row for General Manager + Operations Manager on /contact. */
.c-managers-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;
  max-width:720px;margin:34px auto 0}

/* ---------- lead forms (contact + request-service) ---------- */
.c-form{max-width:640px;margin:0 auto;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--c-radius);padding:28px;box-shadow:var(--c-shadow)}
.c-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:560px){.c-form-grid{grid-template-columns:1fr}}
.c-form-field{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:700;color:var(--c-muted)}
.c-form-field.full{grid-column:1/-1}
.c-form-field input,.c-form-field textarea,.c-form-field select{font-family:inherit;font-size:1rem;font-weight:500;
  color:var(--c-ink);background:var(--c-bg);border:1.5px solid var(--c-line);border-radius:10px;padding:11px 13px;
  transition:border-color .15s ease,box-shadow .15s ease}
.c-form-field textarea{resize:vertical;min-height:90px}
.c-form-field input:focus,.c-form-field textarea:focus,.c-form-field select:focus{outline:none;
  border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-soft)}
.c-form > .c-form-field{margin-bottom:18px}
.c-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.c-form-status{min-height:1.3em;font-weight:700;font-size:.9rem;margin-bottom:6px}
.c-form-status.ok{color:var(--c-primary-dark)}
.c-form-status.err{color:#c0392b}

/* ---------- request-service page layout (form + operations-manager card side by side) ---------- */
.c-request-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
@media (max-width:820px){.c-request-layout{grid-template-columns:1fr}}
.c-request-side-label{font-size:.82rem;font-weight:800;color:var(--c-muted);margin-bottom:10px;text-align:center}
@media (min-width:821px){.c-request-side{position:sticky;top:90px}}

/* ---------- small layout helpers used by service-detail / videos ---------- */
.c-service-toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.c-service-toprow .c-back-link{margin-bottom:0}
.c-video-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 0}
.c-video-head .c-video-title{padding:0}

/* ---------- footer ---------- */
.c-footer{background:var(--c-ink);color:#cdd7db;padding:44px 0 22px}
.c-footer .c-container{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.c-footer-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;margin-bottom:10px}
.c-footer-brand img{width:34px;height:34px;border-radius:8px}
.c-footer p{color:#9fb0b7;font-size:.9rem;margin:0}
.c-footer h4{color:#fff;font-size:.88rem;margin:0 0 12px}
.c-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.c-footer a{color:#cdd7db;text-decoration:none;font-size:.9rem}
.c-footer a:hover{color:#fff}
.c-footer-bottom{max-width:var(--c-maxw);margin:28px auto 0;padding:18px 20px 0;border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem;color:#8ea0a8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (max-width:720px){
  .c-footer .c-container{grid-template-columns:1fr;gap:22px}
}