/* ============================================================
   La Folie — Shared Stylesheet
   Source of truth: design-system.md + 17-point revision brief.
   Loaded by every page. Page-specific styles stay inline.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Core brand */
  --color-slate:         #556273;
  --color-slate-dark:    #3d4d5c;
  --color-slate-mid:     #6e7f8f;
  --color-slate-light:   #e8ecef;
  --color-grey:          #B0AFB0;
  --color-white:         #FFFFFF;
  --color-off-white:     #F8F7F6;

  /* Brand gradient */
  --gradient-brand:          linear-gradient(to right, #e094ff, #ae99ff, #7c9bf5, #4d99e3, #2594cb);
  --gradient-brand-diagonal: linear-gradient(to right bottom, #e094ff, #ae99ff, #7c9bf5, #4d99e3, #2594cb);
  --gradient-brand-vertical: linear-gradient(to bottom, #e094ff, #ae99ff, #7c9bf5, #4d99e3, #2594cb);

  /* Utility colours */
  --color-whatsapp:  #25D366;
  --color-instagram: #E1306C;
  --color-success:   #2ECC71;
  --color-error:     #E74C3C;

  /* Typography */
  --font-primary: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max:     1200px;
  --container-padding: clamp(1rem, 5vw, 3rem);
  --section-padding:   clamp(2.25rem, 8vw, 6rem);  /* floor trimmed 3rem→2.25rem for shorter mobile scroll; desktop unchanged (8vw caps at 6rem) */

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:       0 1px 3px rgba(85,98,115,0.08), 0 1px 2px rgba(85,98,115,0.04);
  --shadow-md:       0 4px 16px rgba(85,98,115,0.10), 0 2px 6px rgba(85,98,115,0.06);
  --shadow-lg:       0 12px 40px rgba(85,98,115,0.14), 0 4px 12px rgba(85,98,115,0.08);
  --shadow-xl:       0 24px 64px rgba(85,98,115,0.18);
  --shadow-gradient: 0 8px 30px rgba(124,155,245,0.35);

  /* Motion */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-height: 72px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Smooth, fast cross-fade between pages. Progressive enhancement: Chrome/Edge
   honour it natively; other browsers simply navigate as before. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-slate);
  background: var(--color-off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-slate);
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-weight: 700; font-size: clamp(1.875rem, 4vw, 2.5rem); }
h3 { font-weight: 700; font-size: var(--text-2xl); }
p  { margin: 0 0 var(--space-4); color: var(--color-slate-mid); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.section { padding-block: var(--section-padding); }
.section-eyebrow {
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin-bottom: var(--space-3);
}
.section-header { text-align: center; margin-bottom: var(--space-12); }
.section-header h2 { margin-bottom: var(--space-3); }
.section-header p { max-width: 640px; margin-inline: auto; }

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-base);
  padding: 14px 32px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--gradient-brand);
  color: var(--color-white);
  box-shadow: var(--shadow-gradient);
}
.btn-primary:hover { opacity: 0.92; transform: translateY(-2px); }
.btn-secondary {
  background: transparent;
  color: var(--color-slate);
  border: 2px solid var(--color-slate);
  padding: 12px 30px;
}
.btn-secondary:hover { background: var(--color-slate); color: var(--color-white); }
.btn-secondary-light {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid var(--color-white);
  padding: 12.5px 30px;
}
.btn-secondary-light:hover { background: var(--color-white); color: var(--color-slate); }
.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(37,211,102,0.25);
}
.btn-whatsapp:hover { opacity: 0.92; transform: translateY(-2px); }
.btn-instagram {
  background: var(--color-instagram);
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(225,48,108,0.25);
}
.btn-instagram:hover { opacity: 0.92; transform: translateY(-2px); }
.btn-on-gradient {
  background: var(--color-white);
  color: var(--color-slate);
  box-shadow: var(--shadow-lg);
  padding: 18px 44px;
  font-size: var(--text-lg);
}
.btn-on-gradient:hover { transform: translateY(-2px); }
.btn-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: transparent;
  position: relative;
  color: var(--color-slate);
  border: 1.5px solid transparent;
  background-image: linear-gradient(var(--color-white), var(--color-white)), var(--gradient-brand);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.btn-learn-more:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gradient);
}
.btn-learn-more .arrow { transition: transform var(--transition-base); }
.btn-learn-more:hover .arrow { transform: translateX(3px); }

/* Whole service card clickable on desktop/laptop (pointer devices); phones keep tapping the Learn More button */
@media (hover: hover) and (min-width: 768px) {
  .service-card { cursor: pointer; }
  .service-card .btn-learn-more { position: static; }
  .service-card .btn-learn-more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
}

/* Icon-only round buttons (for nav) */
.btn-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}
.btn-icon:hover { transform: translateY(-2px); opacity: 0.92; }
.btn-icon.whatsapp  { background: var(--color-whatsapp);  box-shadow: 0 4px 14px rgba(37,211,102,0.25); }
.btn-icon.instagram { background: var(--color-instagram); box-shadow: 0 4px 14px rgba(225,48,108,0.25); }
.btn-icon svg { width: 20px; height: 20px; display: block; }

/* WhatsApp logo path is visually weighted to the bottom-left because of the
   speech-bubble tail. Nudge the SVG ~1px up and ~0.5px left so the icon reads
   as visually centered in the rounded button. Applies to all WhatsApp icons
   sitewide (nav, theme nav, and floating). */
.btn-icon.whatsapp svg,
.nav-icon-whatsapp svg,
.floating-whatsapp svg { transform: translate(-0.5px, -1px); }

/* Theme landing pages use .nav-icon (instead of .btn-icon). Mirror the same
   rounded-square button so the WhatsApp icon sits inside a real rectangle
   on those pages too. */
.nav-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
  text-decoration: none;
}
.nav-icon:hover { transform: translateY(-2px); opacity: 0.92; }
.nav-icon svg { width: 20px; height: 20px; display: block; }
.nav-icon-whatsapp  { background: var(--color-whatsapp);  box-shadow: 0 4px 14px rgba(37,211,102,0.25); }
.nav-icon-instagram { background: var(--color-instagram); box-shadow: 0 4px 14px rgba(225,48,108,0.25); }
/* Plain .nav-icon (no -whatsapp/-instagram suffix) — used for the Instagram link
   on theme landings that doesn't carry a colour modifier — defaults to brand pink. */
.nav-icon:not([class*="nav-icon-"]) {
  background: var(--color-instagram);
  box-shadow: 0 4px 14px rgba(225,48,108,0.25);
}

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transition-base), box-shadow var(--transition-base), height var(--transition-base);
}
.site-nav.scrolled {
  background: var(--color-slate);
  box-shadow: var(--shadow-md);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.nav-logo {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--color-white);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;            /* never let the logo get squeezed/distorted */
}
.nav-logo-img {
  height: 38px;             /* +~10% per Michel (was 34px) */
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;     /* preserve aspect even if the box is ever constrained */
}
@media (max-width: 600px) { .nav-logo-img { height: 30px; } }
.theme-card-emoji:empty, .type-emoji:empty { display: none; }
.nav-logo .accent {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav-links {
  display: none;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  position: relative;
  padding: 6px 2px;
  transition: color var(--transition-base);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }
/* Active page: highlight the current nav item WITHOUT moving anything. Using real
   bold (font-weight:700) widens the word ~2px and, because the nav row is balanced,
   shifts every title ~1px on each page change. -webkit-text-stroke thickens the
   glyphs visually (same "bolder" highlight) but does NOT change the box width, so
   every title stays perfectly still. No underline/dot, no dimming of the others. */
.nav-links a.is-active { font-weight: 500; -webkit-text-stroke: 0.6px currentColor; }
.nav-links a.is-active::after { display: none; }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.nav-actions .btn-cta {
  display: none;
  background: var(--gradient-brand);
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  padding: 11px 23px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-gradient);
  transition: opacity var(--transition-base), transform var(--transition-base);
  margin-left: var(--space-2);
}
.nav-actions .btn-cta:hover { opacity: 0.92; transform: translateY(-2px); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: transparent;
  border: none;
  color: var(--color-white);
  margin-left: var(--space-2);
}
.nav-toggle svg { width: 24px; height: 24px; }
/* Keep the white nav icons legible over light hero areas (e.g. homepage slides)
   while the nav is still transparent at the top of the page. Harmless once the
   nav turns solid slate on scroll. */
.nav-toggle svg,
.nav-actions .btn-icon svg,
.nav-actions .lang-toggle .lang-globe {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.40));
}
.site-nav.scrolled .nav-toggle svg,
.site-nav.scrolled .nav-actions .btn-icon svg,
.site-nav.scrolled .nav-actions .lang-toggle .lang-globe {
  filter: none;
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 360px);
  background: var(--color-slate);
  padding: calc(var(--nav-height) + var(--space-6)) var(--space-6) var(--space-8);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-xl);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
  color: var(--color-white);
  font-size: var(--text-lg);
  font-weight: 600;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-drawer .btn-primary { margin-top: var(--space-4); }
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  z-index: 98;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* Full horizontal nav only when the layout container hits its max (1200) and the
   bar fits one line; below this it collapses to the hamburger (was 1024 — raised
   2026-06-04 so narrow laptops never cramp/overflow the nav). */
@media (min-width: 1200px) {
  .nav-links { display: flex; }
  .nav-actions .btn-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* ---------- Services dropdown (desktop) ----------
   Collapses the old 7-tab nav into Home · Services ▾ · About · Gallery · Contact
   (2026-06-08). Pure CSS hover/focus menu; only visible where .nav-links shows
   (>=1200px). Themes + Corporate + the service anchors live inside the menu. */
.nav-has-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 5px; }
.nav-chevron {
  width: 13px; height: 13px; flex-shrink: 0; opacity: 0.8;
  transition: transform var(--transition-base);
}
.nav-has-dropdown:hover .nav-chevron,
.nav-has-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }
/* invisible bridge so the menu doesn't close while the cursor crosses the gap */
.nav-has-dropdown::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}
.nav-dropdown {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 232px;
  list-style: none; margin: 0; padding: 8px;
  background: var(--color-slate);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: var(--shadow-xl);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base),
              visibility var(--transition-base);
  z-index: 120;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
  display: block; padding: 9px 14px; border-radius: 9px;
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap; color: var(--color-white);
}
.nav-dropdown a::after { display: none; }   /* no underline animation inside the menu */
.nav-dropdown a:hover { background: rgba(255,255,255,0.10); }
.nav-dropdown a.is-active { background: rgba(255,255,255,0.06); font-weight: 700; }
[dir="rtl"] .nav-dropdown { left: auto; right: 0; }

/* ---------- Services group (mobile drawer) ---------- */
.nav-drawer .drawer-parent {
  opacity: 0.6; font-size: var(--text-base); border-bottom: none;
  padding-bottom: 2px; letter-spacing: 0.06em; text-transform: uppercase;
}
.nav-drawer .drawer-sub {
  display: flex; flex-direction: column;
  margin: 0 0 var(--space-3); padding-left: 14px;
  border-left: 2px solid rgba(255,255,255,0.12);
}
.nav-drawer .drawer-sub a {
  font-size: var(--text-base); font-weight: 500; padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-drawer .drawer-sub a:last-child { border-bottom: none; }
[dir="rtl"] .nav-drawer .drawer-sub {
  padding-left: 0; padding-right: 14px;
  border-left: none; border-right: 2px solid rgba(255,255,255,0.12);
}

/* ---------- Marquee (trust strip) ---------- */
.trust-strip {
  background: var(--gradient-brand);
  padding-block: var(--space-6);
  overflow: hidden;
  position: relative;
}
.trust-strip::before,
.trust-strip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.trust-strip::before { left: 0;  background: linear-gradient(to right, rgba(124,155,245,0.6), transparent); }
.trust-strip::after  { right: 0; background: linear-gradient(to left,  rgba(37,148,203,0.6), transparent); }
.marquee {
  display: flex;
  gap: var(--space-10);
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}
.trust-strip:hover .marquee { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-item svg { width: 18px; height: 18px; opacity: 0.85; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Service card ---------- */
.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-slate-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 2;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card:hover::before { opacity: 1; }
.service-card-image {
  aspect-ratio: 4 / 3;
  background: var(--gradient-brand-diagonal);
  background-size: cover;
  background-position: center;
  position: relative;
}
.service-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
}
.service-card-title {
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-slate);
  margin: 0;
}
.service-card-desc {
  font-size: var(--text-sm);
  color: var(--color-slate-mid);
  line-height: 1.6;
  margin: 0;
}
.service-card-cta { margin-top: auto; padding-top: var(--space-2); }
.service-card .geo-paragraph {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Mobile density: the service cards go 2-up on phones (grid set per page), so
   they need compact tiles — shorter images, tighter bodies, smaller title and a
   clamped 2-line description so every tile is short and even. Desktop/tablet
   unchanged. */
@media (max-width: 640px) {
  .service-card-image { aspect-ratio: 3 / 2; }
  .service-card-body { padding: var(--space-4); gap: var(--space-2); }
  .service-card-title { font-size: var(--text-lg); line-height: 1.25; }
  .service-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .service-card-cta { padding-top: var(--space-1); }
  .service-card .btn-learn-more { font-size: var(--text-sm); }
}

/* ---------- Stat ---------- */
.stat-number {
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat-label {
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-slate-mid);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-slate);
  color: var(--color-white);
  padding-block: var(--space-16) var(--space-6);
}
.site-footer .container { display: grid; gap: var(--space-10); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand p { color: rgba(255,255,255,0.65); max-width: 320px; }
.footer-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-list a {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
  transition: color var(--transition-base);
}
.footer-list a:hover { color: var(--color-white); }
.footer-contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255,255,255,0.75);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.footer-contact-row svg { width: 18px; height: 18px; color: var(--color-white); flex-shrink: 0; }
.footer-socials { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
}
.footer-bottom a { transition: color var(--transition-base); }
.footer-bottom a:hover { color: var(--color-white); }
.footer-bottom-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Accordion (FAQ) ---------- */
.faq-item {
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-slate-light);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.faq-item[open] { box-shadow: var(--shadow-md); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-6);
  font-weight: 600;
  color: var(--color-slate);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: background var(--transition-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--color-slate-light); }
.faq-item summary .toggle {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}
.faq-item[open] summary .toggle { transform: rotate(45deg); }
.faq-item .faq-answer {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-slate-mid);
  line-height: 1.7;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--gradient-brand-diagonal);
  color: var(--color-white);
  padding-block: var(--space-24);
  text-align: center;
}
.cta-band h2 {
  color: var(--color-white);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: var(--space-4);
}
.cta-band p {
  color: rgba(255,255,255,0.88);
  font-size: var(--text-lg);
  max-width: 600px;
  margin: 0 auto var(--space-8);
}
.cta-band .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero {
  position: relative;
  background: var(--color-slate);
  color: var(--color-white);
  padding: calc(var(--nav-height) + var(--space-16)) 0 var(--space-16);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -20%, rgba(124,155,245,0.35), transparent 60%);
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--color-white); margin-bottom: var(--space-4); }
.page-hero p { color: rgba(255,255,255,0.82); font-size: var(--text-lg); max-width: 680px; }
.page-hero .breadcrumb {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.page-hero .breadcrumb a { transition: color var(--transition-base); }
.page-hero .breadcrumb a:hover { color: var(--color-white); }

/* ---------- Form ---------- */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-slate);
  letter-spacing: 0.02em;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  padding: 14px 16px;
  border: 1.5px solid var(--color-slate-light);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-slate);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #7c9bf5;
  box-shadow: 0 0 0 4px rgba(124,155,245,0.15);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 95;
  background: var(--color-white);
  border: 1px solid var(--color-slate-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: 720px;
  transform: translateY(140%);
  transition: transform var(--transition-slow);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-brand);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.cookie-banner p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-slate);
  line-height: 1.55;
  flex: 1;
}
.cookie-banner p a { color: var(--color-slate-dark); font-weight: 600; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.cookie-banner button {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.cookie-banner .btn-accept {
  background: var(--gradient-brand);
  color: var(--color-white);
  box-shadow: var(--shadow-gradient);
}
.cookie-banner .btn-accept:hover { opacity: 0.92; transform: translateY(-1px); }
.cookie-banner .btn-decline {
  background: transparent;
  color: var(--color-slate-mid);
  padding: 10px 14px;
}
.cookie-banner .btn-decline:hover { color: var(--color-slate); }
@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    bottom: 90px;
    padding: var(--space-4);
  }
  .cookie-banner-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- Floating WhatsApp ---------- */
.floating-whatsapp {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: var(--color-whatsapp);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.1);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
}
.floating-whatsapp:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 32px rgba(37,211,102,0.55); }
.floating-whatsapp svg { width: 30px; height: 30px; }
.floating-whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-whatsapp);
  animation: wa-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (max-width: 640px) {
  .floating-whatsapp { width: 54px; height: 54px; bottom: 1rem; right: 1rem; }
  .floating-whatsapp svg { width: 26px; height: 26px; }
}

/* ---------- Utility ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.no-scroll { overflow: hidden; }

/* ---------- Skip link (WCAG 2.4.1 Bypass Blocks) ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  background: var(--color-slate-dark, #3d4d5c);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 3px solid #ae99ff;
  outline-offset: 2px;
}

/* ---------- Global focus-visible ring (WCAG 2.4.7) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #7c9bf5;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Language Toggle (EN <-> AR) — appears in nav on every page
   ============================================================ */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
}
.lang-toggle:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-1px);
}
.lang-toggle .lang-globe {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.lang-toggle .lang-current {
  opacity: 0.6;
  font-weight: 500;
}
.lang-toggle .lang-sep {
  opacity: 0.35;
}
.nav-drawer .lang-toggle {
  align-self: flex-start;
  margin-top: var(--space-3);
  background: rgba(255,255,255,0.08);
}

/* ============================================================
   RTL — Arabic direction handling
   All rules below scoped to [dir="rtl"]. LTR pages unaffected.
   ============================================================ */
[dir="rtl"] {
  text-align: right;
}
/* Arabic font stack — applied to every element that explicitly declares
   font-family in LTR mode, so the Arabic glyphs render in Cairo/Tajawal.
   .nav-logo is intentionally NOT in this list — it always reads "La Folie"
   in Latin and stays in Montserrat for brand consistency. */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a,
[dir="rtl"] button, [dir="rtl"] input,
[dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] .btn,
[dir="rtl"] .nav-links a,
[dir="rtl"] .nav-drawer a,
[dir="rtl"] .form-field input,
[dir="rtl"] .form-field select,
[dir="rtl"] .form-field textarea,
[dir="rtl"] .cookie-banner button {
  font-family: 'Cairo', 'Tajawal', var(--font-primary);
}

/* Nav mirrors */
[dir="rtl"] .site-nav .container {
  flex-direction: row-reverse;
}
[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}
[dir="rtl"] .nav-actions {
  flex-direction: row-reverse;
}
[dir="rtl"] .nav-links a {
  letter-spacing: 0;
}
[dir="rtl"] .nav-links a::after {
  transform-origin: right center;
}
[dir="rtl"] .nav-actions .btn-cta {
  margin-left: 0;
  margin-right: var(--space-2);
}
[dir="rtl"] .nav-toggle {
  margin-left: 0;
  margin-right: var(--space-2);
}

/* Drawer slides in from the LEFT in RTL */
[dir="rtl"] .nav-drawer {
  inset: 0 auto 0 0;
  transform: translateX(-100%);
  box-shadow: 0 -24px 64px rgba(85,98,115,0.18);
}
[dir="rtl"] .nav-drawer.open {
  transform: translateX(0);
}
[dir="rtl"] .nav-drawer a {
  text-align: right;
}

/* Hero overlay gradient mirrors so text-side stays dark */
[dir="rtl"] .hero::before {
  background: linear-gradient(to left, rgba(85,98,115,0.92) 40%, rgba(85,98,115,0.4) 100%);
}
[dir="rtl"] .hero-badge {
  right: auto;
  left: var(--container-padding);
}
[dir="rtl"] .hero-content {
  text-align: right;
}

/* Floating WhatsApp button moves to the LEFT in RTL */
[dir="rtl"] .floating-whatsapp {
  right: auto;
  left: var(--space-6);
}

/* Footer flip */
[dir="rtl"] .footer-grid,
[dir="rtl"] .footer-bottom,
[dir="rtl"] .footer-bottom-row,
[dir="rtl"] .footer-contact-row {
  text-align: right;
}
[dir="rtl"] .footer-contact-row {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
[dir="rtl"] .footer-socials {
  justify-content: flex-end;
}

/* Letter-spacing is meaningless (and ugly) in Arabic */
[dir="rtl"] .section-eyebrow,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .breadcrumb,
[dir="rtl"] .footer-heading,
[dir="rtl"] .lang-toggle {
  letter-spacing: 0;
}

/* Forms: align labels and inputs to the right */
[dir="rtl"] .form-field label,
[dir="rtl"] .form-field input,
[dir="rtl"] .form-field select,
[dir="rtl"] .form-field textarea {
  text-align: right;
}
[dir="rtl"] .form-field select {
  background-position: left 12px center;
}

/* Lists with bullets: keep markers on the right */
[dir="rtl"] ul:not(.nav-links):not(.footer-list):not(.contact-list) {
  padding-right: var(--space-6);
  padding-left: 0;
}

/* FAQ toggles still float to the trailing edge */
[dir="rtl"] .faq-item summary {
  flex-direction: row-reverse;
}

/* Marketing strip / marquee — animation direction can stay; content reads RTL */
[dir="rtl"] .trust-strip {
  direction: rtl;
}

/* Cookie banner reads RTL */
[dir="rtl"] .cookie-banner {
  text-align: right;
}
[dir="rtl"] .cookie-banner-actions {
  flex-direction: row-reverse;
}

/* Skip link — keep top-left for keyboard users globally */
[dir="rtl"] .skip-link:focus {
  right: auto;
  left: var(--space-4);
}

/* Numerals stay LTR inside Arabic text (phone numbers, prices, dates) */
[dir="rtl"] .ltr-num,
[dir="rtl"] [data-ltr] {
  direction: ltr;
  display: inline-block;
  unicode-bidi: embed;
}