/* tw/assets/style.css — small layer Tailwind can't easily express */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&family=JetBrains+Mono:wght@400;500;600;800&display=swap");

:root{
  --motion:1;
  --brand:#0A1F3D;
  --on-brand:#FAF7F2;
  --accent:#F58220;
}
html{scroll-behavior:smooth;}
/* Guard against horizontal overflow on mobile — `clip` keeps position:sticky working (unlike overflow:hidden) */
html,body{overflow-x:clip;}
body{font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;max-width:100%;}
/* No media element should ever push the page wider than the viewport */
img,svg,video,canvas{max-width:100%;}
::selection{background:#F58220;color:#fff;}

/* Unified typography — Tajawal covers Arabic + Latin in one family, every page */
body,.font-display,.font-body,.font-serif{
  font-family:"Tajawal",ui-sans-serif,system-ui,sans-serif;
}
/* Tajawal has no true italic — keep faux-italic off for the decorative serif accents */
.font-serif{font-style:normal;}
/* English (LTR) uses Inter for all text; Arabic (RTL) keeps Tajawal */
html[dir="ltr"] body,
html[dir="ltr"] .font-display,
html[dir="ltr"] .font-body,
html[dir="ltr"] .font-serif{
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
}

/* Reveal-on-scroll — fail-open: visible by default, only opacity:0 when JS marks document as ready */
.reveal{opacity:1;transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);}
.js-loaded .reveal:not(.in){opacity:0;transform:translateY(calc(20px * var(--motion)));}
.reveal.in{opacity:1;transform:none;}
.delay-1{transition-delay:.08s;}
.delay-2{transition-delay:.16s;}
.delay-3{transition-delay:.24s;}
.delay-4{transition-delay:.32s;}

/* Marquee — spacing lives on each item (not flex gap) so the two duplicated
   halves are identical width and translateX(-50%) loops seamlessly. */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-track{display:inline-flex;animation:marq 32s linear infinite;white-space:nowrap;will-change:transform;}
.marquee-track > span{margin-inline-end:56px;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* RTL overflows to the left, so scroll the track to the RIGHT (+50%). Starting at translateX(0)
   keeps content on screen the whole cycle — reversing the -50% keyframe left the bar empty. */
@keyframes marq-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
[dir="rtl"] .marquee-track{animation-name:marq-rtl;}

/* Floating hero stamps */
@keyframes float-0{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-8px)}}
@keyframes float-1{0%,100%{transform:rotate(1.5deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(8px)}}
@keyframes float-2{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(-1.2deg) translateY(-6px)}}
.float-0{animation:float-0 6s ease-in-out infinite;}
.float-1{animation:float-1 7s ease-in-out infinite;}
.float-2{animation:float-2 8s ease-in-out infinite;}

/* Image placeholder treatment */
.img-ph{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#0B2545,#0A1F3D);
  color:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
}
.img-ph::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:repeating-linear-gradient(45deg,rgba(245,130,32,.16) 0 1px,transparent 1px 14px);}
.img-ph::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 30% 30%,rgba(245,130,32,.25),transparent 55%);}
.img-ph .ph-label{position:relative;padding:8px 16px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15);border-radius:999px;backdrop-filter:blur(6px);}

/* Stripe motif */
.stripe-motif{background-image:repeating-linear-gradient(45deg,var(--accent) 0 2px,transparent 2px 8px);opacity:.18;}

/* Dotgrid */
.dotgrid{background-image:radial-gradient(currentColor 1px,transparent 1.4px);background-size:24px 24px;opacity:.18;}

/* Eyebrow */
.eyebrow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent);display:inline-block;}
[dir="rtl"] .eyebrow{font-family:"Tajawal",ui-sans-serif,sans-serif;letter-spacing:.04em;text-transform:none;}

/* Btn arrow */
.btn-arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.btn-link:hover .btn-arrow{transform:translateX(4px);}
[dir="rtl"] .btn-arrow{transform:scaleX(-1);}
[dir="rtl"] .btn-link:hover .btn-arrow{transform:scaleX(-1) translateX(4px);}

/* Nav link underline */
.nav-link{position:relative;}
.nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
[dir="rtl"] .nav-link::after{transform-origin:right;}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1);}

/* Accordion */
.acc-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1), padding .3s ease;}
.acc-item[data-open="true"] .acc-a{max-height:520px;padding-bottom:24px;}
.acc-item[data-open="true"] .acc-toggle{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg);}

/* Service item hover */
.svc-item{transition:padding .3s cubic-bezier(.2,.7,.2,1);}
.svc-item:hover{padding-left:12px;padding-right:12px;}

/* Modal */
.modal-overlay{opacity:0;pointer-events:none;transition:opacity .3s ease;}
.modal-overlay[data-open="true"]{opacity:1;pointer-events:auto;}
.modal-overlay .modal{transform:translateY(20px) scale(.96);transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.modal-overlay[data-open="true"] .modal{transform:none;}

/* Focus */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;}
  .marquee-track,.float-0,.float-1,.float-2{animation:none !important;}
}