/* ============================================================
   Techno public site — conversion layer over the design tokens.

   The design export styles elements inline; this file carries only
   what inline styles cannot express:
     1. hover / focus states (extracted from the export's
        style-hover / style-focus attributes — values unchanged)
     2. responsive collapses (approved derivations; the export
        is 1280px-only)
     3. RTL: Arabic typeface + logical-property helpers
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); font-family: var(--font-sans); color: var(--text-body); }
a { color: var(--green-600); }
a:hover { color: var(--green-700); }
[x-cloak] { display: none !important; }

html[dir="rtl"] body { font-family: var(--font-arabic); }

/* ── Hover states (verbatim from the export) ─────────────────── */
.hov-green:hover { background: var(--green-600) !important; }
.hov-navy:hover { background: var(--navy-800) !important; }
.hov-white-border:hover { border-color: var(--white) !important; }
.hov-white-bg:hover { background: rgba(255, 255, 255, 0.08) !important; }
.hov-white-bg-10:hover { background: rgba(255, 255, 255, 0.1) !important; }
.hov-link:hover { color: var(--green-600) !important; }
.hov-link-700:hover { color: var(--green-700) !important; }
.hov-underline:hover { border-color: var(--green-600) !important; }
.hov-card:hover { border-color: var(--green-500) !important; box-shadow: var(--shadow-md); }
.hov-lift:hover { box-shadow: var(--shadow-xl); }
.hov-item:hover { background: var(--grey-50) !important; }
.hov-light:hover { color: var(--white) !important; }
.hov-outline:hover { border-color: var(--green-500) !important; }
.hov-outline-text:hover { border-color: var(--green-500) !important; color: var(--green-700) !important; }

/* ── Focus states (verbatim from the export) ─────────────────── */
.foc-green:focus { border-color: var(--green-500) !important; outline: none; }
.foc-green-light:focus { border-color: var(--green-400) !important; outline: none; }

/* ── Responsive derivations (approved) ───────────────────────── */
/* The export is a fixed 1280px canvas. Collapses below follow the
   grid structure: 4 → 2 → 1, splits stack, section padding eases. */

@media (max-width: 1023px) {
  .r-cols-4, .r-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-split { grid-template-columns: 1fr !important; }
  .r-split { gap: 40px !important; }
  .r-footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .r-nav-desktop { display: none !important; }
  .r-nav-mobile { display: flex !important; }
  .r-timeline { padding-inline-start: 92px !important; }
  .r-timeline-rail { inset-inline-start: 64px !important; }
  .r-timeline-year { inset-inline-start: -92px !important; width: 56px !important; font-size: 20px !important; }
  .r-timeline-dot { inset-inline-start: -34px !important; }
}

@media (max-width: 639px) {
  .r-cols-4, .r-cols-5, .r-cols-3, .r-cols-2 { grid-template-columns: 1fr !important; }
  .r-sec { padding-block: 64px !important; padding-inline: 20px !important; }
  .r-pad { padding-inline: 20px !important; }
  .r-hero { padding-block: 64px 48px !important; padding-inline: 20px !important; }
  .r-card-pad { padding: 28px !important; }
  .r-stack { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  .r-footer-grid { grid-template-columns: 1fr !important; }
  .r-span-2 { grid-column: span 1 !important; }
  .r-hide-sm { display: none !important; }
}

/* Mobile navigation panel (new — no mobile nav exists in the export;
   derived from the design system: navy field, white type, capsule CTA). */
.mobile-panel { position: fixed; inset: 0; z-index: 90; background: var(--navy-700); color: var(--white); overflow-y: auto; }
.mobile-panel a { text-decoration: none; }
.mobile-panel .m-link { display: block; padding: 16px 24px; font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-panel .m-sub { display: block; padding: 10px 24px 10px 40px; font-size: 15px; color: var(--navy-100); }
.mobile-panel .m-sub:hover { color: var(--white); }

/* Reduced motion: freeze the hero video and skip counter animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-video { display: none !important; }
  .hero-poster-fallback { display: block !important; }
}

/* Multi-paragraph rich bodies rendered with |linebreaks */
.rich p { margin: 18px 0 0; }
.rich p:first-child { margin-top: 0; }

/* Accessibility: skip link + visible keyboard focus */
.skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--navy-700); color: var(--white); padding: 12px 20px; font-weight: 700;
  border-radius: 0 0 var(--radius-md) 0; text-decoration: none; }
.skip-link:focus { inset-inline-start: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px;
}

/* Bidi: phone numbers always read left-to-right, even in RTL context */
a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* Mobile: key/value table rows stack, values start-aligned and wrapping */
@media (max-width: 639px) {
  .r-kv { flex-direction: column !important; gap: 4px !important; }
  .r-kv > span:last-child { text-align: start !important; white-space: normal !important; }
}