:root{
--color-primary:#0C71B5;--color-secondary:#004D81;--color-accent:#AB0406;
--color-bg:#FFFFFF;--color-surface:#F7F9FC;--color-text-primary:#0F1720;
--color-text-secondary:#64748B;--color-border:#E2E8F0;
--font-ar-display:'El Messiri',sans-serif;--font-ar-body:'Cairo',sans-serif;
--font-en:'Inter',sans-serif;--font-mono:'IBM Plex Mono',monospace;
--shadow-soft:0 2px 8px rgba(15,23,32,.06),0 8px 24px rgba(15,23,32,.08);
--shadow-deep:0 4px 16px rgba(15,23,32,.10),0 16px 48px rgba(15,23,32,.14);

  --primary:#0C71B5; --secondary:#004D81; --accent:#AB0406;
  --bg:#FFFFFF; --surface:#F7F9FC; --ink:#08131C; --ink-2:#0F2A3D;
  --text:#0F1720; --text-2:#64748B; --border:#E2E8F0;
  --radius-sm:8px; --radius-md:16px; --radius-lg:28px; --radius-pill:999px;
  --shadow:0 2px 8px rgba(15,23,32,.06), 0 8px 24px rgba(15,23,32,.08);
  --font-disp:'El Messiri', serif; --font-body:'Cairo', sans-serif; --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);direction:rtl;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-disp);margin:0;font-weight:700;line-height:1.25}
p{margin:0}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--secondary)}
.mono{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.wrap{max-width:1280px;margin:0 auto}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:600;white-space:nowrap;border:none;cursor:pointer}
.btn svg{flex-shrink:0}
.btn-accent{background:var(--accent);color:#fff}
.btn-outline{background:#fff;color:var(--text);border:1.5px solid var(--border)}
.btn-outline-ink{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.pill-tag{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--text-2);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.photo-slot{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);border-radius:var(--radius-lg)}
.photo-slot .note{position:absolute;inset:16px auto auto 16px;color:rgba(255,255,255,.72);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;line-height:1.6}
.section-ink{background:var(--ink);color:#fff}
.section-ink .muted{color:rgba(255,255,255,.62)}
.placeholder-note{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em}
.divider{height:1px;background:var(--border);border:none}
/* The artboard's fixed frame width becomes a fluid page. */
.sa-page{width:100%;max-width:none;background:var(--bg);container-type:inline-size}
img{max-width:100%}

/* Header: one markup, breakpoint behaviour from the artboards.
 * <834px  - inline nav hides, hamburger appears, WhatsApp label drops
 * <1000px - the phone number label drops (icon-only button) */
@media (max-width:833.98px){
  .sa-nav-inline{display:none !important}
  .sa-hide-narrow{display:none !important}
}
@media (max-width:999.98px){
  .sa-hide-mid{display:none !important}
}

.photo-slot{
  margin:0 !important;
  border-radius:0 !important;
  padding:clamp(48px,6.2cqw,104px) clamp(20px,5.5cqw,96px) !important;
  min-height:0 !important;
  background:#08131C !important;
}
/* Fleet anchors its hero photo to the right edge so the subject stays in the
 * uncovered half of the scrim. */
.photo-slot > img{object-position:center right !important}
/* The scrim ships at every breakpoint now, matching Fleet, rather than only
 * at 1440 as the artboards had it. */
.sa-hero-overlay{
  display:block !important;
  background:linear-gradient(90deg, rgba(8,19,28,0.85) 0%, rgba(8,19,28,0.7) 45%, rgba(8,19,28,0.3) 100%) !important;
}
/* Fleet's copy column: capped width, no top offset. */
.photo-slot > div:not(.sa-hero-overlay){
  margin-top:0 !important;
  max-width:38ch;
}
/* Fleet scales its hero type fluidly rather than in fixed per-breakpoint
 * steps; these match its clamps exactly so the two heroes size identically. */
.photo-slot h1{
  font-family:var(--font-ar-display) !important;
  font-size:clamp(32px,4.8cqw,58px) !important;
  line-height:1.22 !important;
  letter-spacing:-.015em !important;
}
.photo-slot p{
  font-size:clamp(16px,1.92cqw,17px) !important;
  line-height:1.85 !important;
  color:rgba(255,255,255,.88) !important;
  max-width:44ch !important;
}
.photo-slot .mono{
  font-size:clamp(10px,.85cqw,12px) !important;
  letter-spacing:.3em !important;
  color:rgba(255,255,255,.75) !important;
}

@media (max-width:833.98px) and (min-width:390.01px){
.r4{padding:0 40px !important}
}

@media (max-width:390px){
.r4{padding:0 20px !important;margin-top:40px !important;margin-bottom:56px !important}
.r5{max-width:100% !important;margin:revert !important}
.r6{gap:14px !important;padding:20px 0 !important}
.r7{font-size:13px !important}
.r8{font-size:16px !important}
.r9{gap:14px !important;padding:20px 0 !important}
.r10{font-size:13px !important}
.r11{font-size:16px !important}
.r12{gap:14px !important;padding:20px 0 !important}
.r13{font-size:13px !important}
.r14{font-size:16px !important}
.r15{gap:14px !important;padding:20px 0 !important}
.r16{font-size:13px !important}
.r17{font-size:16px !important}
.r18{gap:14px !important;padding:20px 0 !important}
.r19{font-size:13px !important}
.r20{font-size:16px !important}
}

/* --- standalone mobile navigation ---------------------------------- *
 * The Mobile artboard draws a hamburger with no panel behind it (it is a
 * static mockup). The standalone page keeps that exact button and hangs the
 * desktop nav links off it as a slide-in panel, closed by default so the
 * first paint — and therefore any Figma import — matches the artboard. */
/* !important is required: the button carries an inline display:flex copied
 * verbatim from the Mobile artboard, which a bare class rule cannot beat. */
.sa-navtoggle{display:none !important}
.sa-menu{display:none}
@media (max-width:833.98px){
  .sa-navtoggle{display:flex !important}
  .sa-menu{
    display:block;position:absolute;inset-inline:0;top:100%;
    background:var(--color-bg);
    overflow:hidden;max-height:0;transition:max-height .25s ease;
  }
  /* Border and shadow only while open — otherwise the collapsed panel leaves
   * a 1px hairline under the header. */
  .sa-menu[data-open="true"]{
    max-height:70vh;
    border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-deep);
  }
  .sa-menu nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(20px,5.5cqw,96px) 16px;margin-inline-start:0 !important;
  }
  .sa-menu nav a{
    padding:14px 0 !important;font-size:16px !important;
    border-bottom:1px solid var(--color-border) !important;
  }
  .sa-menu nav a:last-child{border-bottom:0 !important}
}