/* =========================================================
   Expand Franchise — Design tokens & base
   Palette from official brand guidelines:
   Trust navy #001E61, accent cyan #00BFFF, tint #A5C5ED
   ========================================================= */

/* NOTE: the brand guideline's display face "Arpona" is a paid Fontspring font.
   Only trial/watermarked demo files were available in the brand assets folder
   (they stamp "DEMO" glyphs into rendered text), so they are not used here.
   "Fraunces" (Google Fonts, open license) stands in as a close-spirited
   substitute — elegant, contemporary, soft-curved. Swap back to a licensed
   Arpona file in style.css + the Google Fonts <link> once purchased. */

:root {
  /* brand colors */
  --navy: #001E61;
  --navy-deep: #001238;
  --navy-soft: #0B2C7A;
  --cyan: #00BFFF;
  --cyan-deep: #0090C4;
  --cyan-text: #00789F; /* darker than --cyan-deep: passes 4.5:1 on white for small/bold text (WCAG AA); --cyan-deep stays for icons/borders where the 3:1 non-text threshold applies */
  --sky: #A5C5ED;
  --white: #FFFFFF;

  /* derived neutrals — hue-biased toward navy, never pure grey */
  --ink: #131C33;
  --muted: #566082;
  --muted-2: #8792AD;
  --surface: #F4F7FC;
  --surface-2: #E9EFFA;
  --line: #DEE6F5;
  --bg: #FFFFFF;

  /* type */
  --font-en-display: "Fraunces", "Georgia", serif;
  --font-en-body: "Montserrat", -apple-system, sans-serif;
  --font-ar: "Cairo", -apple-system, sans-serif;

  /* scale */
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  --step-5: clamp(3rem, 2.1rem + 4vw, 4.8rem);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-card: 0 12px 32px -16px rgba(0, 30, 97, 0.22);
  --shadow-lift: 0 20px 50px -20px rgba(0, 30, 97, 0.35);

  --container: 1180px;
  --gap: clamp(1.25rem, 1rem + 1vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* language roots */
html[dir="ltr"] body { font-family: var(--font-en-body); }
html[dir="rtl"] body { font-family: var(--font-ar); }

html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3,
html[dir="ltr"] .display {
  font-family: var(--font-en-display);
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .display {
  font-family: var(--font-ar);
  font-weight: 700;
}

/* Deterrents against casual image copying (drag-save, right-click-save).
   Not real protection — anything rendered in a browser can still be
   screenshotted or pulled from devtools/cache — but this stops the
   one-click cases. See DEPLOY.md for the server-side hotlink block,
   which is the part that actually matters. */
img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--navy); line-height: 1.15; text-wrap: balance; }
p { color: var(--muted); line-height: 1.75; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section { padding-block: clamp(3.5rem, 6vw, 6.5rem); }
.section-surface { background: var(--surface); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-text);
}
html[dir="rtl"] .eyebrow { letter-spacing: 0.02em; }

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--cyan);
  display: inline-block;
}

.section-head {
  max-width: 46rem;
  margin-block-end: clamp(2rem, 4vw, 3.25rem);
}
.section-head h2 { font-size: var(--step-3); margin-block-start: 0.5em; }
.section-head p { margin-block-start: 0.9em; font-size: var(--step-0); }
.section-head.center { margin-inline: auto; text-align: center; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.8em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--cyan); color: var(--navy-deep); box-shadow: 0 14px 30px -12px rgba(0,191,255,0.55); }
.btn-primary:hover { background: #22caff; }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-outline-navy { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-outline-navy:hover { border-color: var(--navy); background: var(--surface); }
.btn-ghost-cyan { background: rgba(0,191,255,0.12); color: var(--cyan-text); }
.btn-ghost-cyan:hover { background: rgba(0,191,255,0.2); }
.btn-sm { padding: 0.7em 1.4em; font-size: 0.85rem; }
/* the arrow icon points "forward"; in RTL, forward is visually left,
   so mirror it — every icon used inside a .btn is this arrow */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .svc-teaser-card .go svg,
html[dir="rtl"] .mall-card .go svg { transform: scaleX(-1); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.85rem;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand img { height: 40px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.2rem);
}
.nav-links a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  padding-block: 0.3rem;
  transition: color .2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.nav-links a:hover { color: var(--cyan-text); }
.nav-links a:hover::after,
.nav-links a.current::after { transform: scaleX(1); }
.nav-links a.current { color: var(--navy); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.lang-select { position: relative; }
.lang-select-btn {
  display: flex;
  align-items: center;
  gap: 0.4em;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--navy);
  padding: 0.5em 0.85em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.lang-select-btn svg:first-child { color: var(--cyan-deep); }
.lang-select-btn .chev { transition: transform .2s ease; color: var(--muted); }
.lang-select-btn:hover { border-color: var(--cyan); }
.lang-select.open .lang-select-btn { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,191,255,0.15); }
.lang-select.open .lang-select-btn .chev { transform: rotate(180deg); }

.lang-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 140px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-lift);
  padding: 6px;
  z-index: 110;
}
.lang-select.open .lang-menu { display: flex; }
.lang-menu a {
  padding: 0.55em 0.75em;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  transition: background .15s, color .15s;
}
.lang-menu a:hover { background: var(--surface); color: var(--cyan-text); }
.lang-menu a.active { background: rgba(0,191,255,0.12); color: var(--cyan-text); }

.nav-toggle {
  display: none;
  border: none;
  background: transparent;
  border-radius: var(--radius-s);
  padding: 0.5em 0.7em;
  cursor: pointer;
}
.nav-backdrop { display: none; }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  position: relative;
  transition: background-color .2s, transform .2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  position: absolute;
  inset-inline-start: 0;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* animate hamburger -> X when the mobile nav is open, so the icon
   itself signals "tap again to close" */
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-soft) 100%);
  color: var(--white);
  overflow: hidden;
  padding-block: clamp(4rem, 10vw, 8rem) clamp(3.5rem, 8vw, 6rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/office-handshake.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mix-blend-mode: luminosity;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 15% 20%, rgba(0,191,255,0.28), transparent 60%),
              linear-gradient(180deg, transparent 40%, var(--navy-deep) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero-inner { max-width: 44rem; }
.hero .eyebrow { color: var(--sky); }
.hero .eyebrow::before { background: var(--cyan); }
.hero h1 {
  color: var(--white);
  font-size: var(--step-5);
  margin-block: 0.4em 0.5em;
  font-weight: 500;
}
html[dir="rtl"] .hero h1 { font-weight: 800; }
.hero .lead {
  color: var(--sky);
  font-size: var(--step-1);
  max-width: 36rem;
  margin-block-end: 2.2rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.hero-stats {
  position: relative;
  z-index: 1;
  margin-block-start: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-block-start: clamp(2rem, 4vw, 2.75rem);
  border-block-start: 1px solid rgba(255,255,255,0.18);
}
.stat .num {
  font-family: var(--font-en-display);
  font-size: var(--step-3);
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  display: block;
}
html[dir="rtl"] .stat .num { font-family: var(--font-ar); }
.stat .label {
  color: var(--sky);
  font-size: 0.85rem;
  margin-block-start: 0.35em;
  display: block;
  line-height: 1.4;
}

/* =========================================================
   About
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-media { position: relative; }
.about-media img {
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
}
.about-media .badge {
  position: absolute;
  inset-block-end: -1.5rem;
  inset-inline-start: -1.5rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-m);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-card);
  max-width: 13rem;
}
.about-media .badge .num {
  font-family: var(--font-en-display);
  color: var(--cyan);
  font-size: var(--step-3);
  display: block;
}
html[dir="rtl"] .about-media .badge .num { font-family: var(--font-ar); }
.about-media .badge .txt { font-size: 0.82rem; color: var(--sky); line-height: 1.4; display: block; margin-block-start: .25em;}

.about-copy h2 { font-size: var(--step-3); margin-block-end: 0.6em; }
.about-copy > p { font-size: var(--step-0); margin-block-end: 1.75rem; }

.focus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-block-end: 2rem;
}
.focus-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--surface);
  border-radius: var(--radius-m);
  transition: transform .2s ease, box-shadow .2s ease;
}
.focus-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.focus-item .icon {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.focus-item:hover .icon { transform: rotate(-8deg) scale(1.08); }
.focus-item strong { color: var(--navy); font-size: 0.92rem; display: block; }

.vision-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.vm-card {
  padding: 1.5rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.vm-card:hover { border-color: var(--cyan); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.vm-card h3 { font-size: 1.05rem; margin-block-end: 0.5em; }
.vm-card p { font-size: 0.92rem; }

/* =========================================================
   Approach
   ========================================================= */
.approach-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.approach-list { display: grid; gap: 1rem; }
.approach-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.25rem 1.4rem;
  transition: border-color .2s, box-shadow .2s;
}
.approach-item:hover { border-color: var(--cyan); box-shadow: var(--shadow-card); }
.approach-item .check {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,191,255,0.14);
  color: var(--cyan-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.approach-item p { color: var(--ink); font-size: 0.98rem; }

/* =========================================================
   Services teaser (Home page — links out to services.html)
   ========================================================= */
.svc-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.svc-teaser-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.6rem 1.4rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-teaser-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--cyan); }
.svc-teaser-card .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  margin-block-end: 1rem;
  transition: transform .3s ease;
}
.svc-teaser-card:hover .icon { transform: rotate(-8deg) scale(1.08); }
.svc-teaser-card strong { color: var(--navy); font-size: 1rem; margin-block-end: .4em; }
.svc-teaser-card p { color: var(--muted); font-size: 0.88rem; margin-block-end: 1.1rem; flex-grow: 1; }
.svc-teaser-card .go {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: var(--cyan-text);
  font-weight: 700;
  font-size: 0.85rem;
  transition: gap .2s ease;
}
.svc-teaser-card:hover .go { gap: .65em; }

/* =========================================================
   Services tabs
   ========================================================= */
.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-end: 2.25rem;
}
.tab-btn {
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--navy);
  padding: 0.75em 1.3em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all .2s ease, transform .15s ease;
}
.tab-btn:hover { border-color: var(--cyan); }
.tab-btn:active { transform: scale(0.96); }
.tab-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  max-width: 760px;
  animation: tab-fade-in .35s ease both;
}
@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-panel .panel-copy h2 { font-size: var(--step-2); margin-block-end: 0.6rem; }
.tab-panel .panel-copy p.tag { color: var(--cyan-text); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-block-end: .75rem;}
html[dir="rtl"] .tab-panel .panel-copy p.tag { letter-spacing: 0.01em; }
.tab-panel .panel-copy p:not(.tag) { color: var(--ink); font-size: 1.02rem; line-height: 1.75; }
.service-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin-block-start: 1.5rem; }
.service-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border-radius: var(--radius-s);
  font-size: 0.94rem;
  color: var(--ink);
}
.service-list li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-block-start: 0.5em;
  border-radius: 50%;
  background: var(--cyan);
}

/* =========================================================
   Differentiators
   ========================================================= */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.diff-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-m);
  padding: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.diff-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.diff-card::after {
  content: "";
  position: absolute;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(0,191,255,0.35), transparent 70%);
  inset-block-start: -40px;
  inset-inline-end: -40px;
}
.diff-card .n {
  font-family: var(--font-en-display);
  color: var(--cyan);
  font-size: var(--step-2);
  display: block;
  margin-block-end: 0.5rem;
}
html[dir="rtl"] .diff-card .n { font-family: var(--font-ar); }
.diff-card p { color: var(--sky); font-size: 0.9rem; position: relative; }
.diff-card strong { color: var(--white); display: block; margin-block-end: .35rem; font-size: 1rem;}

/* =========================================================
   Audience split (Home — "For Developers" / "For Brands")
   ========================================================= */
.audience-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.audience-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-l);
  padding: clamp(2rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.audience-card:nth-child(2) { background: var(--navy-soft); }
.audience-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.audience-card::after {
  content: "";
  position: absolute;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(0,191,255,0.28), transparent 70%);
  inset-block-start: -50px;
  inset-inline-end: -50px;
  pointer-events: none;
}
.audience-card .icon {
  position: relative; z-index: 1;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(0,191,255,0.18);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  margin-block-end: 1.25rem;
}
.audience-card h3 { position: relative; z-index: 1; color: var(--white); font-size: var(--step-2); margin-block-end: .6em; }
.audience-card p { position: relative; z-index: 1; color: var(--sky); font-size: 0.98rem; margin-block-end: 1.75rem; }
.audience-card .btn { position: relative; z-index: 1; }

/* =========================================================
   Success partners
   ========================================================= */
.partners-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.5rem;
  flex-wrap: wrap;
}
.partners-sub h2 { font-size: var(--step-1); }

.developer-icon {
  width: 84px; height: 84px;
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: transform .3s ease;
}
/* when a project card/hero has a real developer logo instead of the
   generic building icon, keep it inset within the same badge shape */
.developer-icon img { max-width: 92%; max-height: 92%; object-fit: contain; border-radius: 4px; }

/* individual mall/project cards — "Our Mall Projects" */
.mall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-block-end: 3rem;
}
/* the project's own photo as the card background, with the site's
   signature navy gradient overlay (same treatment as .hero and the
   mall-gallery caption) so the white text stays readable over it
   regardless of what the photo looks like underneath */
.mall-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 15rem;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-m);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--white);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mall-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 18, 56, 0.15) 0%, rgba(0, 18, 56, 0.55) 55%, rgba(0, 18, 56, 0.92) 100%);
}
.mall-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.mall-card:hover .developer-icon { transform: scale(1.08) rotate(-4deg); }
/* most developer logo files are plain crops with their own white
   background baked in (not transparent), so the badge can't fully
   disappear into the photo - instead of the base .developer-icon's flat
   light-surface fill (which read as a random floating rectangle here),
   give it a deliberate small white chip with a shadow, so it reads as an
   intentional logo badge rather than a UI glitch */
.mall-card .developer-icon {
  width: 44px; height: 44px;
  margin-block-end: 1rem;
  background: var(--white);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 18px -6px rgba(0, 12, 40, 0.5);
}
.mall-card .developer-icon img { border-radius: 6px; }
.mall-card .developer-icon svg { width: 24px; height: 24px; }
.mall-card h3 { color: var(--white); font-size: 1.05rem; margin-block-end: .35em; }
.mall-card p { color: var(--sky); font-size: 0.86rem; margin: 0 0 .75rem; }
.mall-card .go {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.82rem;
  transition: gap .2s ease;
}
.mall-card:hover .go { gap: .65em; }
.mall-card.mall-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  background-color: var(--surface);
  background-image: none;
}
.mall-card.mall-more::before { content: none; }
.mall-card.mall-more:hover { transform: none; box-shadow: none; }

/* individual mall page — placeholder body until real content/photos land */
.mall-detail-empty {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mall-detail-empty .developer-icon { width: 72px; height: 72px; margin-block-end: 1.5rem; }
.mall-detail-empty .developer-icon svg { width: 30px; height: 30px; }
.mall-detail-empty h2 { font-size: var(--step-2); margin-block-end: .75rem; }
.mall-detail-empty p { margin-block-end: 2rem; }
.mall-detail-empty .hero-ctas { justify-content: center; }

/* project photo gallery on mall detail pages — a horizontally-swipeable
   strip (native CSS scroll-snap, no JS required for touch/trackpad),
   with optional prev/next buttons and dots for pointer/keyboard users */
.mall-gallery { position: relative; max-width: 44rem; margin: 0 auto 2rem; }
.mall-gallery-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-m);
  scrollbar-width: none;
}
.mall-gallery-track::-webkit-scrollbar { display: none; }
.mall-gallery-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  border-radius: var(--radius-m);
  overflow: hidden;
}
.mall-gallery-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface);
}
/* the site's signature dark-navy overlay (also used on .hero/.cta-band),
   here carrying the project name and developer logo over the photo */
.mall-gallery-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 2.5rem 1.1rem .9rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 18, 56, 0.82) 100%);
}
.mall-gallery-logo {
  flex: none;
  height: 30px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--white);
  padding: 3px 6px;
}
.mall-gallery-name { color: var(--white); font-weight: 700; font-size: 1rem; }
.mall-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  color: var(--navy);
  transition: transform .2s, box-shadow .2s;
}
.mall-gallery-nav:hover { box-shadow: var(--shadow-lift); transform: translateY(-50%) scale(1.06); }
.mall-gallery-prev { inset-inline-start: .6rem; }
.mall-gallery-next { inset-inline-end: .6rem; }
.mall-gallery-prev svg { transform: scaleX(-1); }
html[dir="rtl"] .mall-gallery-prev svg { transform: scaleX(1); }
html[dir="rtl"] .mall-gallery-next svg { transform: scaleX(-1); }
.mall-gallery-dots { display: flex; justify-content: center; gap: .4rem; margin-block-start: .85rem; }
.mall-gallery-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background .2s, transform .2s;
}
.mall-gallery-dots span.active { background: var(--cyan); transform: scale(1.3); }
@media (max-width: 640px) { .mall-gallery-nav { display: none; } }

/* project fact sheet on mall detail pages — a fixed set of labeled
   fields (developer/location/services/status), read as a clean list of
   label/value lines separated by thin rules, deliberately not styled as
   a boxed grid/table — so each fact still reads as its own item instead
   of one run-on sentence, without looking like a data table */
.mall-overview { max-width: 44rem; margin-inline: auto; text-align: center; }
.mall-overview .mall-alt-name { color: var(--sky); font-size: 0.92rem; margin-block: 1rem 1.5rem; }
.mall-facts { margin-block-end: 2rem; text-align: start; }
.mall-facts .fact { padding-block: 1rem; border-block-end: 1px solid var(--line); }
.mall-facts .fact:first-child { border-block-start: 1px solid var(--line); }
.mall-facts .fact-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cyan-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: .35rem;
}
html[dir="rtl"] .mall-facts .fact-label { letter-spacing: 0.01em; text-transform: none; }
.mall-facts .fact-value { display: block; color: var(--ink); font-size: 0.98rem; line-height: 1.6; }
.mall-overview .mall-description { color: var(--ink); font-size: 0.98rem; line-height: 1.75; text-align: start; margin-block-end: 2rem; }
.mall-overview .hero-ctas { justify-content: center; }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-block-end: 3rem;
}
/* a shorter logo list — tiles stretch to fill the row instead of
   leaving a dead gap on one side (which auto-fill with a fixed track
   size does whenever the item count doesn't exactly tile the
   container — and in RTL that leftover gap lands on the left) */
/* tracks cap out at 180px instead of stretching to 1fr — with very few
   items (e.g. a single-entry Partners teaser) auto-fit would otherwise
   blow that one tile up to the full row width; capped + packed to the
   start avoids that without reintroducing the dead-gap auto-fit was
   chosen to prevent for longer short-lists */
.logo-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(120px, 180px));
  justify-content: start;
}
.logo-grid a, .logo-grid div.logo-cell {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--white);
  display: block;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.logo-grid a:hover, .logo-grid div.logo-cell:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--cyan);
  transform: translateY(-3px);
}
.logo-grid img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(45%);
  transition: filter .25s ease, transform .25s ease;
}
.logo-grid a:hover img, .logo-grid div.logo-cell:hover img { filter: grayscale(0%); transform: scale(1.04); }

.partners-more { text-align: center; margin-block-start: 2.5rem; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../images/partners-handshake.jpg");
  background-size: cover; background-position: center 25%;
  opacity: 0.18;
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--navy-deep) 20%, rgba(0,18,56,0.55) 100%);
}
.cta-inner {
  position: relative; z-index: 1;
  max-width: 40rem;
}
.cta-inner .eyebrow { color: var(--cyan); }
.cta-inner h2 { color: var(--white); font-size: var(--step-3); margin-block: .5em .6em; }
.cta-inner .quote {
  color: var(--sky);
  font-size: var(--step-1);
  border-inline-start: 3px solid var(--cyan);
  padding-inline-start: 1rem;
  margin-block: 1.5rem 2rem;
}
html[dir="rtl"] .cta-inner .quote { border-inline-start: none; border-inline-end: 3px solid var(--cyan); padding-inline-start: 0; padding-inline-end: 1rem; }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.contact-cards { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.contact-card {
  padding: 1.5rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--white);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.contact-card:hover { box-shadow: var(--shadow-card); border-color: var(--cyan); transform: translateY(-3px); }
.contact-card:hover .icon { transform: scale(1.1); }
.contact-card .icon { transition: transform .25s ease; }
.contact-card .icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(0,191,255,0.14);
  color: var(--cyan-deep);
  display: flex; align-items: center; justify-content: center;
  margin-block-end: 1rem;
}
.contact-card strong { display: block; color: var(--navy); margin-block-end: .3em; font-size: 0.95rem; }
.contact-card span, .contact-card a.value { color: var(--muted); font-size: 0.92rem; direction: ltr; unicode-bidi: isolate; display: inline-block; }

.social-row { display: flex; gap: 0.75rem; margin-block-start: 1.5rem; grid-column: 1 / -1; }
.social-row a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  transition: background .2s, color .2s, border-color .2s;
}
.social-row a:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

.contact-panel {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-l);
  padding: clamp(2rem, 4vw, 2.75rem);
  position: relative;
  overflow: hidden;
}
.contact-panel::after {
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,191,255,0.3), transparent 70%);
  inset-inline-end: -60px; inset-block-start: -60px;
}
.contact-panel h3 { color: var(--white); font-size: var(--step-2); position: relative; }
.contact-panel p { color: var(--sky); position: relative; margin-block: 1rem 1.75rem; }
.contact-panel .btn-primary { position: relative; }

/* contact form */
.contact-form { position: relative; display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: grid; gap: .4rem; text-align: start; }
.form-field label { color: var(--sky); font-size: 0.82rem; font-weight: 600; }
.form-field input, .form-field textarea {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-s);
  padding: 0.75em 1em;
  color: var(--white);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color .2s ease, background .2s ease;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255,255,255,0.4); }
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(255,255,255,0.12);
}
.form-field textarea { resize: vertical; min-height: 6.5rem; }
.form-honey { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-submit { justify-self: start; }
.form-submit[disabled] { opacity: .7; cursor: default; transform: none; }
.form-status {
  font-size: 0.88rem;
  border-radius: var(--radius-s);
  padding: 0.75em 1em;
  display: none;
}
.form-status.show { display: block; }
.form-status.ok { background: rgba(0,191,255,0.16); color: var(--white); }
.form-status.err { background: rgba(255,99,99,0.16); color: #ffd7d7; }

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--navy-deep);
  color: var(--sky);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-block-end: 2.5rem;
  border-block-end: 1px solid rgba(255,255,255,0.14);
}
.footer-brand img { height: 40px; width: auto; margin-block-end: 1rem; }
.footer-brand p { color: var(--sky); font-size: 0.88rem; max-width: 20rem; }
.footer-col h4 { color: var(--white); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-block-end: 1.1rem; }
html[dir="rtl"] .footer-col h4 { letter-spacing: 0.01em; }
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col a, .footer-col span { color: var(--sky); font-size: 0.88rem; transition: color .2s; }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block-start: 1.75rem;
  font-size: 0.82rem;
  color: var(--muted-2);
}
.footer-bottom .social-row a { border-color: rgba(255,255,255,0.2); color: var(--sky); }
.footer-bottom .social-row a:hover { background: var(--cyan); color: var(--navy-deep); border-color: var(--cyan); }

/* =========================================================
   Partners page
   ========================================================= */
.page-hero {
  background: linear-gradient(160deg, var(--navy-deep), var(--navy));
  color: var(--white);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem);
}
.page-hero h1 { color: var(--white); font-size: var(--step-4); margin-block: .4em 0; }
.page-hero .eyebrow { color: var(--sky); }
.breadcrumb { font-size: 0.85rem; color: var(--sky); }
.breadcrumb a { color: var(--sky); }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb-back { display: inline-flex; align-items: center; gap: 0.35rem; }
.breadcrumb-back svg { flex: none; }
/* the arrow icon points right by default; flip it to point left for LTR
   pages (back = left in LTR reading order) and leave it as-is for RTL
   pages (back = right in RTL reading order, which is its natural direction) */
html[dir="ltr"] .breadcrumb-back svg { transform: scaleX(-1); }
.full-logo-grid { grid-template-columns: repeat(6, 1fr); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .nav-links {
    display: flex;
    position: fixed;
    inset-block-start: 68px;
    inset-inline: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
    gap: 0.25rem;
    box-shadow: var(--shadow-lift);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .about-grid, .approach-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; margin-block-end: 1rem; }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-split { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .logo-grid, .full-logo-grid { grid-template-columns: repeat(4, 1fr); }
  .mall-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-cards { grid-template-columns: 1fr; }

  /* dims the page behind the open drawer and gives the mobile nav a
     tap-outside-to-close target, since the drawer itself only covers
     its own content height, not the full viewport */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset-block-start: 68px;
    inset-inline: 0;
    inset-block-end: 0;
    background: rgba(0, 18, 56, 0.35);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  /* locks background scroll while the drawer is open, so the page
     underneath doesn't scroll/rubber-band behind it */
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;
  }
  body.nav-open .nav-links a {
    padding-block: 0.85rem;
    border-block-end: 1px solid var(--line);
    animation: nav-link-in .3s ease both;
  }
  /* stagger each link's fade-in so the drawer feels alive instead of
     popping in as one flat block */
  body.nav-open .nav-links a:nth-child(1) { animation-delay: .05s; }
  body.nav-open .nav-links a:nth-child(2) { animation-delay: .09s; }
  body.nav-open .nav-links a:nth-child(3) { animation-delay: .13s; }
  body.nav-open .nav-links a:nth-child(4) { animation-delay: .17s; }
  body.nav-open .nav-links a:nth-child(5) { animation-delay: .21s; }
  body.nav-open .nav-links a:nth-child(6) { animation-delay: .25s; }
}

@keyframes nav-link-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .vision-mission { grid-template-columns: 1fr; }
  .focus-grid { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .service-list { grid-template-columns: 1fr; }
  .mall-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .logo-grid, .full-logo-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { text-align: center; }
  /* the badge's desktop position deliberately overlaps the image corner
     via a negative inset; that offset plus its max-width pushes it past
     the viewport edge on narrow phones, so pull it back on-image here */
  .about-media .badge { inset-inline-start: 0.75rem; max-width: calc(100% - 1.5rem); }
  /* .btn is nowrap by default (most labels are short and stay on one
     line by design); this one CTA's EN copy — "View All Success
     Partners (34+ Brands)" — is long enough to overflow a narrow phone
     screen, so let it wrap here instead */
  .partners-more .btn { white-space: normal; }
}

/* Skip link — hidden off-screen until keyboard focus reaches it, so
   keyboard/screen-reader users can bypass the header nav on every page. */
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -60px;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 0.85em 1.4em;
  border-radius: var(--radius-s);
  font-weight: 700;
  font-size: 0.9rem;
  transition: inset-block-start .2s ease;
}
.skip-link:focus {
  inset-block-start: 1rem;
}

/* without this, jumping to #main-content lands it flush at the very
   top of the viewport, right under the sticky header — this keeps the
   heading visible instead of hidden behind the header bar */
#main-content { scroll-margin-top: 84px; }

/* Branded keyboard-focus ring — only for keyboard/AT navigation, never
   shown on mouse click, so it doesn't fight the pointer-driven hover
   states above. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   Scroll-reveal + entrance animation
   Progressive enhancement: elements are fully visible by default;
   JS (if it runs, and the visitor hasn't asked for reduced motion)
   adds .reveal, which starts them hidden/offset, then .in-view
   brings them in once they scroll into frame. Content never depends
   on JS to become visible.
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in-view { opacity: 1; transform: none; }

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-inner > * { animation: hero-fade-in .7s ease both; }
.hero-inner > *:nth-child(2) { animation-delay: .08s; }
.hero-inner > *:nth-child(3) { animation-delay: .16s; }
.hero-inner > *:nth-child(4) { animation-delay: .24s; }
.hero-stats { animation: hero-fade-in .7s ease .3s both; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}