/* ==========================================================================
   Planova - planova-company.com
   Main stylesheet (English LTR + Arabic RTL)
   Version 1.0 - 2026-09-29
   --------------------------------------------------------------------------
   - Mobile-first. Breakpoints: 640px (sm), 960px (md), 1200px (lg).
   - Uses CSS logical properties (margin-inline, padding-inline, inset-inline)
     so the same rules work for <html dir="ltr"> and <html dir="rtl">.
   - Language-specific typography is switched with :lang(ar).
   ========================================================================== */

/* 1. Design tokens -------------------------------------------------------- */
:root {
  /* Brand colours (sampled from the official PlaNova logo) */
  --c-navy: #0D385C;          /* primary brand navy */
  --c-navy-deep: #082640;     /* footer, hover */
  --c-navy-panel: #0A2F4F;    /* panels on navy */
  --c-navy-line: #2E5A80;     /* borders on navy */
  --c-yellow: #FFD100;        /* primary brand yellow (accent, CTAs) */
  --c-yellow-soft: #FFF4C2;   /* number badges */
  --c-yellow-note: #FFF6D1;   /* scope-note background */
  --c-yellow-note-line: #F0D466;

  /* Neutrals */
  --c-ground: #F7F5EF;        /* page background */
  --c-surface: #FFFFFF;       /* cards, header */
  --c-line: #E3DED2;          /* borders on light */
  --c-line-strong: #C9D3DD;   /* outline pills */
  --c-ink: #0B1F33;           /* body text */
  --c-ink-2: #2A3A4A;         /* lead text */
  --c-muted: #4B5B6B;         /* secondary text (AA on ground and white) */
  --c-on-navy: #D6E0EA;       /* body text on navy */
  --c-on-navy-muted: #C3D1DE; /* secondary text on navy */

  /* Typography */
  --f-display-en: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-body-en: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-display-ar: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --f-body-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-display: var(--f-display-en);
  --f-body: var(--f-body-en);

  /* Fluid type scale */
  --fs-h1-home: clamp(2.5rem, 1.2rem + 4.4vw, 4.5rem);    /* 40 to 72 (short slogan) */
  --fs-h1: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem);       /* 34 to 52 */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem);       /* 28 to 42 */
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 to 19 */
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --lh-body: 1.6;
  --lh-heading: 1.15;

  /* Spacing and shape */
  --gutter: clamp(16px, 5vw, 96px);
  --container: 1440px;
  --section-y: clamp(64px, 8vw, 104px);
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 20px;
  --radius-pill: 999px;
  --header-h: 76px;
  --shadow-focus: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--c-navy);
}

:lang(ar) {
  --f-display: var(--f-display-ar);
  --f-body: var(--f-body-ar);
  --lh-body: 1.8;
  --lh-heading: 1.3;
}

@media (min-width: 960px) {
  :root { --header-h: 88px; }
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}

[dir="rtl"] body { text-align: right; }

img, picture { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  line-height: var(--lh-heading);
  font-weight: 700;
}
:lang(ar) h1, :lang(ar) h2 { font-weight: 800; }
:lang(en) h1 { letter-spacing: -0.02em; }

p { margin: 0; }

a { color: var(--c-navy); }
a:hover { color: var(--c-navy-deep); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--c-yellow);
  color: var(--c-ink);
  font-weight: 600;
  border-radius: var(--radius-s);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* 3. Buttons, tags, eyebrows ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
:lang(ar) .btn { font-size: 1.0625rem; }
.btn--primary { background: var(--c-yellow); color: var(--c-ink); }
.btn--primary:hover { background: #F2C400; color: var(--c-ink); }
.btn--dark { background: var(--c-navy); color: #FFFFFF; }
.btn--dark:hover { background: var(--c-navy-deep); color: #FFFFFF; }
.btn--outline { border-color: var(--c-navy); color: var(--c-navy); background: transparent; }
.btn--outline:hover { background: var(--c-navy); color: #FFFFFF; }
.btn--outline-light { border-color: #FFFFFF; color: #FFFFFF; background: transparent; }
.btn--outline-light:hover { background: #FFFFFF; color: var(--c-navy); }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: var(--fs-small); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; }

.eyebrow {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-navy);
}
:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; font-size: 1.0625rem; }

.tag {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-navy);
}
.tag--accent { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-ink); }
:lang(ar) .tag { font-size: 0.875rem; padding-inline: 14px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* 4. Header and navigation ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 42px; width: auto; }
@media (min-width: 960px) { .site-logo img { height: 50px; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  color: var(--c-navy);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px var(--gutter) 24px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 16px 32px rgba(11, 31, 51, .08);
}
.site-nav.is-open { display: flex; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav__list a {
  display: block;
  padding: 12px 0;
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--c-line);
}
.site-nav__list a[aria-current="page"] { color: var(--c-navy); font-weight: 700; }
.site-nav__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 16px; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  color: var(--c-navy);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.lang-switch:hover { border-color: var(--c-navy); }
.lang-switch[lang="ar"] { font-family: var(--f-body-ar); }
.lang-switch[lang="en"] { font-family: var(--f-body-en); }

@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    flex-grow: 1;
    justify-content: flex-end;
  }
  .site-nav__list { flex-direction: row; gap: 32px; margin-inline-end: auto; margin-inline-start: 48px; }
  .site-nav__list a { padding: 8px 0; border: 0; font-size: var(--fs-small); border-bottom: 2px solid transparent; }
  .site-nav__list a:hover, .site-nav__list a[aria-current="page"] { border-bottom-color: var(--c-yellow); }
  .site-nav__actions { padding: 0; flex-wrap: nowrap; }
}

/* 5. Breadcrumb ----------------------------------------------------------- */
.breadcrumb { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding-block: 14px;
  padding-inline: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.875rem;
  color: var(--c-muted);
}
.breadcrumb li { display: flex; gap: 10px; }
.breadcrumb li + li::before { content: "/"; color: var(--c-muted); }
.breadcrumb a { text-decoration: none; }
.breadcrumb [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

/* 6. Home hero ------------------------------------------------------------ */
.home-hero { background: var(--c-navy); color: #FFFFFF; display: grid; }
.home-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: clamp(48px, 7vw, 96px) var(--gutter);
}
.home-hero__kicker {
  color: var(--c-yellow);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);   /* 18 to 22: company name */
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}
:lang(ar) .home-hero__kicker { font-family: var(--f-display-ar); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.6; }
.home-hero h1 { font-size: var(--fs-h1-home); line-height: 1.1; }
:lang(ar) .home-hero h1 { line-height: 1.2; font-size: clamp(2.75rem, 1.3rem + 4.6vw, 4.75rem); }
.home-hero__lead { font-size: var(--fs-lead); color: var(--c-on-navy); max-width: 36em; }
.home-hero__media { position: relative; min-height: 280px; }
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__media::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 220px;
  height: 12px;
  background: var(--c-yellow);
}
@media (min-width: 960px) {
  .home-hero { grid-template-columns: minmax(0, 53%) minmax(0, 1fr); min-height: 640px; }
  .home-hero__text { padding-inline-end: 72px; }
}

/* 7. Credentials strip ---------------------------------------------------- */
.credentials { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.credentials__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px 32px;
  padding-block: 28px;
  margin: 0;
}
@media (min-width: 640px) { .credentials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .credentials__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.credentials dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
:lang(ar) .credentials dt { letter-spacing: 0; text-transform: none; font-size: var(--fs-small); }
.credentials dd { margin: 4px 0 0; font-family: var(--f-display); font-size: 1.125rem; font-weight: 600; color: var(--c-navy); line-height: 1.35; }
:lang(ar) .credentials dd { font-size: 1.25rem; font-weight: 700; }

/* 8. Sections ------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight-top { padding-top: 24px; }
.section-head { display: grid; gap: 16px; margin-bottom: 48px; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { color: var(--c-muted); font-size: 1.0625rem; max-width: 30em; }
@media (min-width: 960px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: end; gap: 64px; }
}

/* 9. Activity cards (home) ------------------------------------------------ */
.card-grid { display: grid; gap: 24px; grid-template-columns: repeat(1, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.activity-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  overflow: hidden;
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.activity-card:hover { border-color: var(--c-navy); color: var(--c-ink); transform: translateY(-2px); }
.activity-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.activity-card__body { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; padding: 24px; }
.activity-card__meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
:lang(ar) .activity-card__meta { font-size: 0.875rem; }
.activity-card h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
:lang(ar) .activity-card h3 { font-size: 1.375rem; font-weight: 700; }
.activity-card p { color: var(--c-muted); font-size: var(--fs-small); flex-grow: 1; }
.activity-card__more { align-self: flex-start; padding-bottom: 2px; border-bottom: 2px solid var(--c-yellow); color: var(--c-navy); font-weight: 600; font-size: var(--fs-small); }

/* 10. Registry band (home) ------------------------------------------------ */
.band-navy { background: var(--c-navy); color: #FFFFFF; }
.band-navy .eyebrow { color: var(--c-yellow); }
.registry { display: grid; gap: 48px 80px; }
@media (min-width: 960px) { .registry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.registry h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); margin-block: 16px 24px; }
.code-list { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.code-row { display: flex; gap: 24px; align-items: flex-start; padding: 20px 24px; background: var(--c-navy-panel); border-radius: var(--radius-s); }
.code-row__code { font-family: var(--f-display); font-size: 1.375rem; font-weight: 700; color: var(--c-yellow); min-width: 96px; }
.code-row__label { font-weight: 600; font-size: 1.0625rem; }
.code-row__date { color: var(--c-on-navy-muted); font-size: var(--fs-small); }
.pillars { display: grid; gap: 16px; grid-template-columns: repeat(1, minmax(0, 1fr)); list-style: none; margin: 20px 0 0; padding: 0; }
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pillar { padding: 24px; border: 1px solid var(--c-navy-line); border-radius: var(--radius-s); }
.pillar strong { display: block; font-family: var(--f-display); font-size: 1.125rem; font-weight: 600; }
:lang(ar) .pillar strong { font-size: 1.25rem; font-weight: 700; }
.pillar span { color: var(--c-on-navy-muted); font-size: var(--fs-small); }
.registry__intro { color: var(--c-on-navy); font-size: 1.0625rem; }
.registry__side { display: flex; flex-direction: column; justify-content: center; }

/* 11. Method steps (home, light) ------------------------------------------ */
.method { display: grid; gap: 24px; grid-template-columns: repeat(1, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .method { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .method { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.method li { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--c-surface); border-top: 4px solid var(--c-yellow); border-radius: 4px 4px var(--radius-s) var(--radius-s); }
.method__num { font-family: var(--f-display); font-size: 2rem; font-weight: 700; color: var(--c-navy); line-height: 1; }
.method h3 { font-size: var(--fs-h3); font-weight: 600; }
.method p { color: var(--c-muted); font-size: var(--fs-small); }

/* 12. CTA band ------------------------------------------------------------ */
.cta-band {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px);
  background: var(--c-yellow);
  border-radius: var(--radius-l);
}
@media (min-width: 960px) { .cta-band { flex-direction: row; justify-content: space-between; align-items: center; gap: 48px; } }
.cta-band h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); color: var(--c-ink); }
.cta-band p { margin-top: 12px; color: var(--c-ink-2); font-size: 1.0625rem; }
.cta-band .btn-row { flex-shrink: 0; }

/* 13. Activity page hero -------------------------------------------------- */
.page-hero { display: grid; gap: 40px 64px; align-items: center; padding-block: clamp(40px, 6vw, 72px); }
@media (min-width: 960px) { .page-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-hero__text { display: flex; flex-direction: column; gap: 24px; }
.page-hero h1 { font-size: var(--fs-h1); line-height: 1.12; }
:lang(ar) .page-hero h1 { line-height: 1.25; }
.page-hero__lead { font-size: var(--fs-lead); color: var(--c-ink-2); }
.page-hero__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius-l); }

/* 14. Service cards ------------------------------------------------------- */
.service-grid { display: grid; gap: 24px; grid-template-columns: repeat(1, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-card { display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.service-card__num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-s);
  background: var(--c-yellow-soft);
  color: var(--c-navy);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
}
.service-card h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
:lang(ar) .service-card h3 { font-size: 1.375rem; font-weight: 700; }
.service-card p { color: var(--c-muted); font-size: var(--fs-small); }
:lang(ar) .service-card p, :lang(ar) .activity-card p, :lang(ar) .method p { font-size: 1rem; }

/* 15. Delivery process (navy band) ---------------------------------------- */
.process h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); margin-bottom: 40px; }
.process ol { display: grid; gap: 32px; grid-template-columns: repeat(1, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .process ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.process li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--c-yellow); }
.process__step { font-family: var(--f-display); color: var(--c-yellow); font-weight: 700; font-size: var(--fs-small); }
.process h3 { font-size: var(--fs-h3); font-weight: 600; }
:lang(ar) .process h3 { font-size: 1.375rem; font-weight: 700; }
.process p { color: var(--c-on-navy-muted); font-size: var(--fs-small); }
:lang(ar) .process p { font-size: 1rem; }

/* 16. Scope note ---------------------------------------------------------- */
.scope-note { display: grid; gap: 10px; padding: 32px clamp(24px, 4vw, 40px); background: var(--c-yellow-note); border: 1px solid var(--c-yellow-note-line); border-radius: var(--radius-m); }
.scope-note h2 { font-size: 1.125rem; }
:lang(ar) .scope-note h2 { font-size: 1.25rem; }
.scope-note p { font-size: var(--fs-small); color: var(--c-ink-2); }
:lang(ar) .scope-note p { font-size: 1rem; }

/* 17. Activity chips ------------------------------------------------------ */
.chip-grid { display: grid; gap: 12px; grid-template-columns: repeat(1, minmax(0, 1fr)); list-style: none; margin: 24px 0 0; padding: 0; }
@media (min-width: 640px) { .chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chip { display: block; height: 100%; padding: 16px 20px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-s); color: var(--c-navy); font-weight: 600; font-size: var(--fs-small); text-decoration: none; }
.chip:hover { border-color: var(--c-navy); }
.chip[aria-current="page"] { background: var(--c-navy); border-color: var(--c-navy); color: #FFFFFF; }
.other-activities h2 { font-size: 1.625rem; }

/* 18. Contact page and form ----------------------------------------------- */
.contact-layout { display: grid; gap: 48px; }
@media (min-width: 960px) { .contact-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; } }
.form { display: grid; gap: 20px; padding: clamp(24px, 4vw, 40px); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.form__row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; }
.field label, .field .label { font-weight: 600; font-size: var(--fs-small); }
.field .req { color: #A4262C; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--c-ink);
  font: inherit;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(13, 56, 92, .18); }
.field [aria-invalid="true"] { border-color: #A4262C; }
.field__error { display: block; color: #A4262C; font-size: var(--fs-xs); line-height: 1.6; min-height: 1.6em; } /* fixed height: avoids layout shift that swallows clicks */
:lang(ar) .field__error { font-size: 0.875rem; }
.field--check { display: flex; gap: 12px; align-items: flex-start; }
.field--check input { width: 20px; height: 20px; min-height: 0; margin-top: 4px; flex-shrink: 0; accent-color: var(--c-navy); }
.field--check label { font-weight: 400; }
.hp-field { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: 14px 16px; border-radius: 10px; font-size: var(--fs-small); display: none; }
.form__status.is-visible { display: block; }
.form__status--ok { background: #E7F4EA; color: #1E5B2C; border: 1px solid #B7DDBF; }
.form__status--info { background: var(--c-yellow-note); color: var(--c-ink); border: 1px solid var(--c-yellow-note-line); }
.form__status--error { background: #FBEAEA; color: #7A1C21; border: 1px solid #EBC0C2; }
.contact-card { display: grid; gap: 20px; align-content: start; padding: clamp(24px, 4vw, 40px); background: var(--c-navy); color: var(--c-on-navy); border-radius: var(--radius-m); }
.contact-card h2 { color: #FFFFFF; font-size: 1.5rem; }
.contact-card dl { margin: 0; display: grid; gap: 14px; }
.contact-card dt { color: var(--c-yellow); font-weight: 600; font-size: var(--fs-small); }
.contact-card dd { margin: 2px 0 0; }
.contact-card a { color: #FFFFFF; }

/* 19. Prose (privacy page) ------------------------------------------------ */
.prose { max-width: 780px; display: grid; gap: 16px; }
.prose h2 { font-size: 1.5rem; margin-top: 16px; }
.prose ul { margin: 0; padding-inline-start: 1.25em; }
.placeholder-note { padding: 16px 20px; background: var(--c-yellow-note); border: 1px dashed #C9A400; border-radius: var(--radius-s); font-weight: 600; }

/* 20. Footer -------------------------------------------------------------- */
.site-footer { background: var(--c-navy-deep); color: var(--c-on-navy); font-size: var(--fs-small); }
:lang(ar) .site-footer { font-size: 1rem; }
.site-footer a { color: #FFFFFF; text-decoration: none; }
.site-footer a:hover { color: var(--c-yellow); text-decoration: underline; }
.site-footer__grid { display: grid; gap: 40px 48px; padding-block: 64px 40px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__brand { display: grid; gap: 16px; align-content: start; }
.site-footer__brand img { height: 52px; width: auto; }
.site-footer h2 { font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; color: var(--c-yellow); margin-bottom: 12px; }
:lang(ar) .site-footer h2 { font-size: 1.0625rem; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer address { font-style: normal; }
.site-footer__legal { display: flex; flex-direction: column; gap: 8px 32px; padding-block: 20px 28px; border-top: 1px solid #1E4A70; color: #A9BACB; font-size: var(--fs-xs); }
:lang(ar) .site-footer__legal { font-size: 0.875rem; }
@media (min-width: 960px) { .site-footer__legal { flex-direction: row; justify-content: space-between; } }

/* 21. Utility ------------------------------------------------------------- */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.mt-0 { margin-top: 0 !important; }
.pb-section { padding-bottom: var(--section-y); }

/* 22. Print --------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .cta-band, .other-activities, .form { display: none !important; }
  body { background: #FFFFFF; }
  .band-navy, .site-footer { background: #FFFFFF !important; color: #000000 !important; }
}

/* 23. Late additions ------------------------------------------------------ */
.home-hero__media picture { height: 100%; }
.page-hero__media picture, .activity-card picture { display: block; }