/* =========================================================
   Mr. Polish (מיסטר פוליש) — Global Styles
   Palette: Deep Charcoal + Metallic Gold (OKLCH)
   Navy retained as a secondary accent for logo harmony.
   Mobile-first | RTL-first | Logical properties for LTR safety
   UI: high-converting hierarchy, entrance animations, rich hovers
   ========================================================= */

:root {
  /* --- Brand: Charcoal (dominant) --- */
  --char-950: oklch(0.17 0.006 264);
  --char-900: oklch(0.21 0.007 264);
  --char-850: oklch(0.25 0.008 264);
  --char-800: oklch(0.29 0.009 264);
  --char-700: oklch(0.37 0.009 264);
  --char-600: oklch(0.46 0.009 264);

  /* --- Brand: Gold (accent / CTA) --- */
  --gold-700: oklch(0.66 0.12 84);
  --gold-600: oklch(0.74 0.13 86);
  --gold-500: oklch(0.82 0.13 88);
  --gold-400: oklch(0.88 0.10 90);
  --gold-glow: oklch(0.78 0.14 88 / 0.45);
  /* Accessible gold: darkened for use as TEXT on light backgrounds
     (marble-50/100/white) — gold-700 only clears ~3:1 there, which fails
     WCAG 1.4.3 AA (4.5:1) for normal text. This hits ~4.7-4.9:1. */
  --gold-800: oklch(0.53 0.12 86);

  /* --- Secondary accent: Navy (logo harmony) --- */
  --navy-700: oklch(0.38 0.10 262);
  --navy-600: oklch(0.46 0.11 262);

  /* --- Neutrals / Marble --- */
  --marble-50: oklch(0.985 0.003 264);
  --marble-100: oklch(0.965 0.005 264);
  --marble-200: oklch(0.925 0.006 264);
  --ink-900: oklch(0.24 0.008 264);
  --ink-700: oklch(0.40 0.008 264);
  --ink-500: oklch(0.55 0.007 264);
  --white: oklch(0.99 0 0);

  /* --- Functional --- */
  --whatsapp: oklch(0.68 0.16 150);
  --whatsapp-dark: oklch(0.60 0.16 150);
  /* Accessible WhatsApp green: darkened for white TEXT on a solid fill
     (or as text on white) — the two colors above only clear 2.6-3.6:1
     there, which fails WCAG 1.4.3 AA (4.5:1). This hits ~4.9:1. */
  --whatsapp-a11y: oklch(0.52 0.16 150);

  /* --- Type --- */
  --font-base: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: "Playfair Display", "Heebo", serif;

  /* --- Layout tokens --- */
  --maxw: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px oklch(0.17 0.006 264 / 0.10);
  --shadow-md: 0 12px 32px oklch(0.17 0.006 264 / 0.16);
  --shadow-lg: 0 26px 64px oklch(0.17 0.006 264 / 0.24);
  --bar-h: 64px;

  --ease-out: cubic-bezier(0.22, 0.7, 0.25, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-base);
  font-weight: 400;
  color: var(--ink-900);
  background: var(--marble-50);
  line-height: 1.65;
  font-size: 1rem;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3 { line-height: 1.2; font-weight: 800; color: var(--char-900); }

/* =========================================================
   PRELOADER / SPLASH SCREEN
   Full-screen charcoal overlay with autoplaying video.
   Fades out + slides up on first play-through (JS-driven).
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* avoids mobile address-bar gap where supported */
  z-index: 9999;
  background: var(--char-950);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition:
    opacity .8s var(--ease-out),
    transform .8s var(--ease-out),
    visibility 0s linear .8s;
  will-change: opacity, transform;
}
.preloader.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}
/* Video fills the entire screen, no distortion (cropped via cover) */
.preloader-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--char-950);
}

/* Centered business-name layer over the video */
.preloader-content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 2;
  pointer-events: none;
  /* Soft vignette so the gold text stays legible over bright reflections */
  background: radial-gradient(ellipse at center, oklch(0.12 0 0 / 0.45) 0%, transparent 62%);
}
/* Branding container (logo + name) — starts fully invisible,
   fades in together when cued (~3s). */
.preloader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3.2vh, 30px);
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  will-change: opacity, transform;
}
.preloader.show-name .preloader-brand {
  opacity: 1;
  transform: none;
}

/* Logo — softly glowing, blended onto the dark video */
.preloader-logo {
  width: clamp(140px, 24vw, 230px);
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 18px 50px oklch(0.10 0 0 / 0.55),
    0 0 36px var(--gold-glow);
}

.preloader-title {
  direction: ltr; /* keeps order "Mr. Polish | מיסטר פוליש" */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 5.4vw, 3.3rem);
  line-height: 1.15;
  text-align: center;
  /* Gold metallic gradient text */
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 45%, var(--gold-400) 70%, var(--gold-500) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 2px 10px oklch(0.10 0 0 / 0.65))
    drop-shadow(0 0 18px var(--gold-glow));
}
.preloader-title .pt-he { direction: rtl; unicode-bidi: isolate; } /* strict RTL for Hebrew */
.preloader-title .pt-sep { color: var(--gold-500); -webkit-text-fill-color: var(--gold-500); opacity: 0.6; font-weight: 400; }

.preloader.show-name .preloader-title {
  animation: ptGlow 2.8s var(--ease-out) 1s infinite, ptShimmer 3.5s linear infinite;
}
@keyframes ptGlow {
  0%, 100% { filter: drop-shadow(0 2px 10px oklch(0.10 0 0 / 0.65)) drop-shadow(0 0 16px var(--gold-glow)); }
  50%      { filter: drop-shadow(0 2px 10px oklch(0.10 0 0 / 0.65)) drop-shadow(0 0 34px var(--gold-glow)); }
}
@keyframes ptShimmer { to { background-position: 200% center; } }

.preloader-skip {
  z-index: 3;
  position: absolute;
  inset-block-end: clamp(20px, 5vh, 44px);
  inset-inline-end: clamp(20px, 5vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: oklch(1 0 0 / 0.08);
  color: oklch(0.95 0.006 264);
  border: 1px solid oklch(1 0 0 / 0.25);
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
.preloader-skip:hover { background: oklch(1 0 0 / 0.16); border-color: oklch(1 0 0 / 0.45); transform: translateY(-2px); }
.preloader-skip:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}
.container-narrow { max-width: 800px; }

.section {
  padding-block: clamp(48px, 8vw, 96px);
  /* Perf: skip layout/paint/animation work for below-the-fold sections
     (several run infinite animations) until they near the viewport.
     "auto" remembers each section's real height after its first render,
     so the 600px guess only affects the very first scroll pass. */
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.section-alt { background: var(--marble-100); }
/* Taller than the shared 600px guess (12-card grid) — closer estimate
   avoids a visible scrollbar/layout jump on first visit to the section. */
.services { contain-intrinsic-size: auto 1200px; }

.section-head { text-align: center; max-width: 680px; margin-inline: auto; margin-block-end: clamp(28px, 5vw, 52px); }
.section-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin-block: 10px; }
.section-head p { color: var(--ink-700); font-size: 1.05rem; }

.eyebrow {
  display: inline-block;
  position: relative;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  /* gold-800: accessible on the light section backgrounds (marble-50/100)
     this class sits on by default (WCAG AA 4.5:1, was gold-700 ~3:1). */
  color: var(--gold-800);
  text-transform: uppercase;
  padding-inline: 30px;
}
/* Dark-background sections need the lighter gold-500 instead (already
   AA-compliant there, ~10.9:1) — gold-800 would be too dark on char-950. */
.skew-section .eyebrow,
.marquee-section .eyebrow { color: var(--gold-500); }
.eyebrow::before,
.eyebrow::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  width: 22px;
  height: 1.5px;
  background: var(--gold-500);
}
.eyebrow::before { inset-inline-start: 0; }
.eyebrow::after { inset-inline-end: 0; }

/* =========================================================
   BUTTONS — high-converting, animated
   ========================================================= */
.btn {
  --btn-bg: var(--char-800);
  --btn-fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 22px;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out), filter .2s ease;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
/* Sweeping shine on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 28%, oklch(1 0 0 / 0.38) 50%, transparent 72%);
  transform: translateX(-130%);
  transition: transform .6s var(--ease-out);
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(-1px) scale(0.99); }
.btn:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }

.btn-sm { padding: 9px 16px; min-height: 40px; font-size: 0.92rem; }
.btn-lg { padding: 16px 32px; min-height: 54px; font-size: 1.08rem; }
.btn-block { width: 100%; }

.btn-gold {
  --btn-bg: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  --btn-fg: var(--char-950);
}
.btn-gold:hover { box-shadow: 0 14px 34px var(--gold-glow); }

.btn-navy { --btn-bg: linear-gradient(135deg, var(--char-700), var(--char-900)); --btn-fg: var(--white); border: 1px solid oklch(0.82 0.13 88 / 0.3); }
.btn-navy:hover { box-shadow: 0 8px 26px var(--gold-glow); border-color: var(--gold-500); }

.btn-whatsapp { --btn-bg: var(--whatsapp-a11y); --btn-fg: var(--white); }
.btn-whatsapp:hover { filter: brightness(1.05); box-shadow: 0 14px 34px oklch(0.68 0.16 150 / 0.4); }

/* Subtle pulse to draw the eye to the primary CTA */
.btn-pulse { animation: ctaPulse 2.6s var(--ease-out) infinite; }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
  50% { box-shadow: 0 0 0 12px oklch(0.78 0.14 88 / 0); }
}

/* ---------------------------------------------------------
   SHIMMER BUTTON
   Converted from the 21st.dev <ShimmerButton> (Tailwind).
   The source animates a 200%-wide linear gradient with the
   `shimmer2` keyframe; here the dark variant becomes our
   charcoal base with a continuous sweeping GOLD band.
   Works in both LTR/RTL (purely visual horizontal sweep).
--------------------------------------------------------- */
.btn-shimmer {
  --shimmer-accent: var(--gold-500);
  --shimmer-border: oklch(0.74 0.13 86 / 0.55);
  --shimmer-glow: var(--gold-glow);
  color: var(--gold-400);
  border: 1px solid var(--shimmer-border);
  /* 110deg gradient with a bright accent band in the middle */
  background: linear-gradient(
    110deg,
    var(--char-950) 0%,
    var(--char-900) 42%,
    var(--shimmer-accent) 50%,
    var(--char-900) 58%,
    var(--char-950) 100%
  );
  background-size: 200% 100%;
  animation: shimmer2 2.6s linear infinite;
  box-shadow: var(--shadow-sm);
  text-shadow: 0 1px 8px oklch(0.10 0 0 / 0.6);
}
.btn-shimmer:hover {
  border-color: var(--shimmer-accent);
  box-shadow: 0 12px 34px var(--shimmer-glow);
}
/* Keep the gold gradient text crisp; drop the white hover sweep here
   so the continuous shimmer stays the focal effect. */
.btn-shimmer::after { display: none; }

/* WhatsApp accent — keeps the green identity while shimmering */
.btn-shimmer.is-wa {
  --shimmer-accent: var(--whatsapp);
  --shimmer-border: oklch(0.68 0.16 150 / 0.55);
  --shimmer-glow: oklch(0.68 0.16 150 / 0.4);
  color: oklch(0.93 0.06 150);
}

@keyframes shimmer2 {
  from { background-position: 0 0; }
  to   { background-position: -200% 0; }
}

/* ---------------------------------------------------------
   SHINY BUTTON
   Converted from Magic UI <ShinyButton> (React + Framer Motion).
   Framer animated a CSS var --x from 100% -> -100% on a loop
   (with repeatDelay). Here that's a registered @property driving
   a metallic GOLD streak across the text (mask-image) and the
   border (padding-box mask-composite trick), over a glassy
   backdrop-blur surface. RTL-safe; no uppercase (Hebrew).
--------------------------------------------------------- */
@property --x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

.btn-shiny {
  position: relative;
  color: oklch(1 0 0 / 0.95);
  font-weight: 700;
  border: 2px solid oklch(0.82 0.13 88 / 0.45);
  /* Subtle gold radial wash + glass blur over the charcoal hero */
  background: radial-gradient(circle at 50% 0%, oklch(0.82 0.13 88 / 0.18) 0%, transparent 60%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px oklch(0.10 0 0 / 0.35);
  overflow: hidden;
  animation: shinyX 3s linear infinite;
  transition: box-shadow .3s ease, border-color .3s ease, transform .15s var(--ease-out);
}
.btn-shiny:hover {
  border-color: var(--gold-500);
  box-shadow: 0 0 28px var(--gold-glow), 0 6px 20px oklch(0.10 0 0 / 0.35);
}
.btn-shiny::after { display: none; } /* drop the base hover sweep */

/* Metallic streak across the TEXT */
.btn-shiny .shiny-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-mask-image: linear-gradient(-75deg,
    #000 calc(var(--x) + 20%),
    transparent calc(var(--x) + 30%),
    #000 calc(var(--x) + 100%));
  mask-image: linear-gradient(-75deg,
    #000 calc(var(--x) + 20%),
    transparent calc(var(--x) + 30%),
    #000 calc(var(--x) + 100%));
}

/* Metallic streak across the BORDER (1px padding ring) */
.btn-shiny::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(-75deg,
    oklch(0.82 0.13 88 / 0.10) calc(var(--x) + 20%),
    oklch(0.82 0.13 88 / 0.55) calc(var(--x) + 25%),
    oklch(0.82 0.13 88 / 0.10) calc(var(--x) + 100%));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

@keyframes shinyX {
  0%   { --x: 100%; }
  60%  { --x: -100%; }
  100% { --x: -100%; } /* hold off-screen ≈ Framer's repeatDelay */
}

/* ---------------------------------------------------------
   GRADIENT BUTTON (rotating border)
   Converted from a 21st.dev React component. The element's
   background is a conic-gradient rotated by --r; an inset
   ::after fills the center, leaving an animated gradient
   BORDER ring. Source hardcoded 600x100 — dropped for full
   responsiveness (uses .btn sizing + .btn-block). Gradient
   cycles between glowing gold and deep charcoal (OKLCH).
--------------------------------------------------------- */
@property --r {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.btn-gradient {
  --gradient-inner: var(--char-900);
  border: 0;
  color: var(--gold-400);
  isolation: isolate;
  background: conic-gradient(from var(--r),
    var(--gold-500) 0%,
    var(--char-800) 25%,
    var(--gold-600) 50%,
    var(--char-900) 75%,
    var(--gold-500) 100%);
  animation: rotateR 4s linear infinite;
  transition: box-shadow .3s ease, transform .2s var(--ease-out);
}
/* Inner fill — leaves a 5px rotating gradient ring */
.btn-gradient::after {
  content: "";
  display: block;
  position: absolute;
  inset: 5px;
  z-index: 1;
  border-radius: inherit;
  background: var(--gradient-inner);
  transform: none;            /* override base .btn sweep */
  transition: background .3s ease;
}
.btn-gradient:hover::after { transform: none; }  /* cancel base hover sweep */
.btn-gradient:hover { box-shadow: 0 12px 34px var(--gold-glow); }
.btn-gradient:disabled { opacity: 0.5; cursor: not-allowed; }

/* Label sits above the inner fill */
.btn-gradient .label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

@keyframes rotateR { to { --r: 360deg; } }

/* =========================================================
   FLAGSHIP SKEW CARDS (glassmorphism + ambient glow)
   Converted from a 21st.dev React component. Neon palette →
   gold / bronze / charcoal metallic (OKLCH). Skew + offsets
   mirrored for RTL; auto-flips under [dir="ltr"].
   ========================================================= */
.skew-section { background: var(--char-950); color: var(--white); overflow: hidden; }
.skew-section .section-head h2 { color: var(--white); }
.skew-section .section-head p { color: oklch(0.82 0.01 264); }

.skew-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 56px 40px;
  padding-block-start: 16px;
}

.skew-card {
  --skew: -15deg;            /* RTL default */
  --shift: 25px;
  --from: var(--gold-400);
  --to: oklch(0.48 0.10 52);
  position: relative;
  width: min(320px, 100%);
}
[dir="ltr"] .skew-card { --skew: 15deg; --shift: -25px; }

.skew-card--1 { --from: var(--gold-400);     --to: oklch(0.48 0.10 52); } /* gold → bronze */
.skew-card--2 { --from: oklch(0.66 0.08 68); --to: var(--char-700);     } /* bronze → charcoal */
.skew-card--3 { --from: var(--gold-500);     --to: oklch(0.30 0.03 60); } /* gold → deep bronze */

/* Gradient panel + its blurred ambient-glow twin */
.skew-card__panel,
.skew-card__glow {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50px;
  width: 50%;
  border-radius: var(--radius);
  background: linear-gradient(315deg, var(--from), var(--to));
  transform: skewX(var(--skew));
  transition: all .5s var(--ease-out);
}
.skew-card__glow { filter: blur(30px); opacity: 0.65; }

.skew-card:hover .skew-card__panel,
.skew-card:hover .skew-card__glow {
  inset-inline-start: 20px;
  width: calc(100% - 90px);
  transform: skewX(0deg);
}

/* Floating glass bubbles (appear on hover) */
.skew-card__blobs { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.blob {
  position: absolute;
  width: 0; height: 0;
  border-radius: 50%;
  opacity: 0;
  background: oklch(1 0 0 / 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px oklch(0.10 0 0 / 0.2);
  transition: all .5s var(--ease-out);
}
.blob-1 { inset-block-start: 0; inset-inline-start: 0; }
.blob-2 { inset-block-end: 0; inset-inline-end: 0; transition-delay: .1s; }
.skew-card:hover .blob-1 {
  inset-block-start: -40px; inset-inline-start: 40px;
  width: 100px; height: 100px; opacity: 1;
  animation: blob 6s linear infinite;
}
.skew-card:hover .blob-2 {
  inset-block-end: -40px; inset-inline-end: 40px;
  width: 100px; height: 100px; opacity: 1;
  animation: blob 6s linear infinite; animation-delay: 1s;
}

/* Glass content */
.skew-card__content {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 400px;
  padding: 30px 40px;
  border-radius: var(--radius);
  background: oklch(1 0 0 / 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(1 0 0 / 0.12);
  box-shadow: var(--shadow-md);
  transition: transform .5s var(--ease-out), padding .5s var(--ease-out);
}
.skew-card:hover .skew-card__content {
  transform: translateX(var(--shift));
  padding-block: 50px;
}
.skew-card__content h3 { color: var(--gold-400); font-size: 1.5rem; }
.skew-card__content p { color: oklch(0.92 0.01 264); line-height: 1.7; }

.skew-card__cta {
  align-self: flex-start;
  margin-block-start: 6px;
  display: inline-block;
  font-weight: 700;
  color: var(--char-950);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  padding: 10px 18px;
  border-radius: 999px;
  transition: transform .2s var(--ease-out), box-shadow .25s ease;
}
.skew-card__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--gold-glow); }
.skew-card__cta:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }

@keyframes blob {
  0%, 100% { border-radius: 50% 50% 50% 50%; }
  50%      { border-radius: 60% 40% 55% 45% / 50% 60% 40% 55%; }
}

/* =========================================================
   FAQ ACCORDION WITH CATEGORY TABS
   Converted from a 21st.dev React/Framer Motion component.
   Vanilla toggle logic; smooth height via grid-rows 0fr→1fr.
   RTL: text-right, plus icon on the inline-end (left) side.
   ========================================================= */
.faq-tabs__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-block-end: 28px;
}
.faq-tab {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--marble-200);
  background: var(--white);
  color: var(--ink-700);
  cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .15s ease;
}
.faq-tab:hover { border-color: var(--gold-400); color: var(--char-800); transform: translateY(-1px); }
.faq-tab:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.faq-tab.is-active {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  color: var(--char-950);
  border-color: transparent;
  box-shadow: 0 8px 22px var(--gold-glow);
}

.faq-panel { display: none; }
.faq-panel.is-active { display: block; animation: faqFade .35s var(--ease-out); }
@keyframes faqFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.faq-acc { display: grid; gap: 12px; }
.faq-acc__item {
  background: var(--white);
  border: 1px solid var(--marble-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-acc__item.is-open { border-color: var(--gold-400); box-shadow: var(--shadow-sm); }

.faq-acc__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* text at start (right), icon at end (left) */
  gap: 14px;
  text-align: right;
  padding: 18px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--char-900);
  transition: color .2s ease;
}
.faq-acc__q:hover { color: var(--gold-800); }
.faq-acc__q:focus-visible { outline: 3px solid var(--gold-500); outline-offset: -3px; border-radius: var(--radius); }

/* Plus icon (rotates to × when open) — sits on the inline-end (left in RTL) */
.faq-acc__icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--gold-700);
  transition: transform .3s var(--ease-out), color .2s ease;
}
.faq-acc__icon::before,
.faq-acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.faq-acc__icon::before { inset-inline: 0; inset-block-start: 50%; height: 2px; transform: translateY(-50%); }
.faq-acc__icon::after  { inset-block: 0; inset-inline-start: 50%; width: 2px; transform: translateX(-50%); }
.faq-acc__item.is-open .faq-acc__icon { transform: rotate(45deg); color: var(--gold-700); }

/* Smooth height open/close */
.faq-acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.faq-acc__item.is-open .faq-acc__a { grid-template-rows: 1fr; }
.faq-acc__a-inner { overflow: hidden; }
.faq-acc__a-inner p { padding: 0 20px 18px; color: var(--ink-700); line-height: 1.7; }

/* =========================================================
   BEFORE / AFTER IMAGE COMPARISON (drag slider)
   Converted from a 21st.dev React component → vanilla JS +
   CSS var (--pos). Left = "before", right = "after".
   Gold divider + pulsing handle. Mouse + touch (pointer ev).
   ========================================================= */
.compare {
  --pos: 50%;
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  user-select: none;
  touch-action: pan-y; /* let the page scroll vertically; we handle horizontal */
  cursor: ew-resize;
  background: var(--char-900);
}
.compare__before,
.compare__after { position: absolute; inset: 0; transition: opacity .35s ease; }
.compare.is-swapping .compare__before,
.compare.is-swapping .compare__after { opacity: 0; }
.compare__before img,
.compare__after img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* Placeholder gradients (visible if the image files are missing) */
.compare__after {
  background:
    linear-gradient(135deg, oklch(0.40 0.02 60) 0%, oklch(0.74 0.10 86) 42%, oklch(0.55 0.06 78) 70%, oklch(0.38 0.02 60) 100%);
}
.compare__before {
  background:
    linear-gradient(135deg, oklch(0.48 0.012 60) 0%, oklch(0.36 0.010 60) 55%, oklch(0.29 0.008 60) 100%);
  /* clipped to the LEFT of the handle → before on the left, after on the right */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Floating badges (physical left/right so they don't flip in RTL) */
.compare__badge {
  position: absolute;
  z-index: 4;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.compare__badge--before { left: 16px; bottom: 16px; background: oklch(0.18 0 0 / 0.6); color: var(--white); }
.compare__badge--after  { right: 16px; top: 16px; background: linear-gradient(135deg, var(--gold-500), var(--gold-700)); color: var(--char-950); }

/* Divider + handle */
.compare__divider {
  position: absolute;
  inset-block: 0;
  left: var(--pos);
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(var(--gold-400), var(--gold-600));
  box-shadow: 0 0 14px var(--gold-glow);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare__handle {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border: 3px solid oklch(1 0 0 / 0.92);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-700));
  color: var(--char-950);
  display: grid;
  place-items: center;
  cursor: ew-resize;
  touch-action: none;
  animation: comparePulse 2.4s var(--ease-out) infinite;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.compare__handle:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.compare.is-dragging .compare__handle {
  transform: scale(1.12);
  box-shadow: 0 10px 28px oklch(0.10 0 0 / 0.5), 0 0 28px var(--gold-glow);
  animation: none;
}
@keyframes comparePulse {
  0%, 100% { box-shadow: 0 6px 20px oklch(0.10 0 0 / 0.4), 0 0 0 0 oklch(0.80 0.14 88 / 0.5); }
  50%      { box-shadow: 0 6px 20px oklch(0.10 0 0 / 0.4), 0 0 0 12px oklch(0.80 0.14 88 / 0); }
}

/* ---- Gallery: project tabs (horizontal scroll, hidden scrollbar) ---- */
.gallery-tabs {
  display: flex;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto 20px;
  padding-block-end: 4px;
  overflow-x: auto;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge */
  -webkit-overflow-scrolling: touch;
}
.gallery-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.gallery-tab {
  flex: 0 0 auto;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  color: var(--ink-700);
  background: var(--white);
  border: 1.5px solid var(--marble-200);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.gallery-tab:hover { color: var(--char-900); border-color: var(--gold-400); transform: translateY(-1px); }
.gallery-tab.active {
  color: var(--char-950);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  border-color: transparent;
  box-shadow: 0 8px 20px var(--gold-glow);
}
.gallery-tab:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

/* ---- Gallery: angle dots (only for multi-angle projects) ---- */
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-block-start: 18px;
}
.gallery-dot {
  width: 12px; height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gold-600);
  background: transparent;
  cursor: pointer;
  transition: transform .15s, background .2s, box-shadow .2s;
}
.gallery-dot:hover { transform: scale(1.15); }
.gallery-dot.active {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  border-color: transparent;
  box-shadow: 0 0 10px var(--gold-glow);
}
.gallery-dot:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

/* =========================================================
   TESTIMONIALS — INFINITE SCROLL MARQUEE (פס נע אינסופי)
   Pure CSS: a track holding two identical sets translates by
   -50% on a loop → seamless, GPU-only (transform) so no lag.
   Deep charcoal bg, glowing gold stars + text. RTL cards.
   ========================================================= */
.marquee-section { background: var(--char-950); color: var(--white); }
.marquee-section .section-head h2 { color: var(--white); }

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  direction: ltr; /* CRITICAL: keeps the track left-aligned so -50% scrolls left feeding from the right (no RTL void) */
  /* fade the edges so cards slide in/out elegantly */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  padding-block: 10px;
  animation: marqueeScroll 60s linear infinite;
  will-change: transform;
}
/* Pause on mouse hover and on touch press-hold */
.marquee:hover .marquee__track,
.marquee.is-held .marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* exactly one half → seamless */
}

.testi {
  flex: 0 0 auto;
  width: min(380px, 82vw);
  margin-inline-end: 24px; /* per-card spacing keeps -50% seamless */
  white-space: normal;        /* override the track's nowrap so text wraps */
  overflow-wrap: break-word;
  word-wrap: break-word;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: oklch(1 0 0 / 0.04);
  border: 1px solid oklch(0.82 0.13 88 / 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  direction: rtl;       /* Hebrew text RTL */
  text-align: right;
}
.testi__stars {
  color: var(--gold-500);
  font-size: 1.15rem;
  letter-spacing: 3px;
  margin-block-end: 12px;
  text-shadow: 0 0 12px var(--gold-glow);
}
.testi__quote {
  margin: 0 0 14px;
  color: oklch(0.95 0.01 264);
  line-height: 1.75;
  font-size: 1.02rem;
}
.testi__author { color: var(--gold-400); font-weight: 700; font-size: 0.92rem; }

/* "Read all reviews on Google" CTA under the marquee */
.reviews-cta-wrap { text-align: center; margin-block-start: clamp(26px, 4vw, 40px); }
.reviews-cta {
  display: inline-block;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold-400);
  background: oklch(1 0 0 / 0.04);
  border: 1.5px solid oklch(0.82 0.13 88 / 0.45);
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  transition: transform .2s var(--ease-out), background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.reviews-cta:hover {
  transform: scale(1.05);
  background: oklch(1 0 0 / 0.07);
  border-color: var(--gold-500);
  box-shadow: 0 10px 30px var(--gold-glow);
}
.reviews-cta:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }

/* Two CTAs under the marquee: primary "write a review" + ghost "read on Google" */
.reviews-cta-wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.reviews-cta--write {
  color: var(--char-900);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  border-color: transparent;
}
.reviews-cta--write:hover { box-shadow: 0 14px 34px var(--gold-glow); }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; } /* let users scroll manually instead */
  .marquee__track { animation: none; }
}

/* =========================================================
   WRITE-A-REVIEW MODAL
   Self-contained overlay + dialog. Reuses .field / .btn.
   ========================================================= */
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.review-modal[hidden] { display: none; }
.review-modal__overlay {
  position: absolute;
  inset: 0;
  background: oklch(0.15 0.02 264 / 0.6);
  backdrop-filter: blur(3px);
  animation: reviewFade .2s var(--ease-out);
}
.review-modal__dialog {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--white);
  /* Reset the inherited white text from the dark .marquee-section so form
     labels (which have no explicit colour) don't render white-on-white. */
  color: var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 30px 80px rgba(0,0,0,0.35));
  padding: clamp(24px, 5vw, 40px);
  text-align: center;
  animation: reviewPop .25s var(--ease-out);
}
.review-modal__close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 14px;
  background: transparent;
  border: 0;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink-700);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.review-modal__close:hover { color: var(--ink-900); background: var(--marble-100); }
.review-modal__close:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.review-modal__title { font-size: clamp(1.35rem, 3vw, 1.7rem); color: var(--char-900); margin-block-end: 8px; }
.review-modal__sub { color: var(--ink-700); font-size: 0.98rem; margin-block-end: 20px; }
.review-form { display: grid; gap: 16px; text-align: start; }
.review-form .field label { font-weight: 600; }
.review-modal__dismiss {
  margin-block-start: 14px;
  background: transparent;
  border: 0;
  color: var(--ink-700);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: underline;
}
.review-modal__dismiss:hover { color: var(--ink-900); }

/* Success state */
.review-success__icon {
  width: 64px;
  height: 64px;
  margin: 4px auto 16px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  background: var(--whatsapp, oklch(0.68 0.16 150));
  border-radius: 50%;
  animation: reviewPop .35s var(--ease-out);
}
.review-success__msg { color: var(--ink-800, var(--ink-700)); font-size: 1.02rem; line-height: 1.7; margin-block-end: 22px; }
.review-success__cta { margin-block-end: 4px; }

@keyframes reviewFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reviewPop { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .review-modal__overlay,
  .review-modal__dialog,
  .review-success__icon { animation: none; }
}

/* =========================================================
   LEGAL / INFO PAGES (accessibility, privacy, terms)
   ========================================================= */
.legal-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: oklch(0.99 0 0 / 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--marble-200);
  box-shadow: var(--shadow-sm);
}
.legal-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
}
.legal-header .brand-logo { height: 48px; width: auto; }

.legal-hero {
  background: radial-gradient(circle at 50% 0%, oklch(0.30 0.02 264), var(--char-950) 72%);
  color: var(--white);
  text-align: center;
  padding-block: clamp(48px, 9vw, 88px);
}
.legal-hero .eyebrow { color: var(--gold-500); }
.legal-hero h1 { color: var(--white); font-size: clamp(1.9rem, 5vw, 3rem); margin-block: 10px 0; }
/* Blog hero title after it's demoted from <h1> on individual post pages
   (so the article title stays the single page <h1>) — keeps the same look. */
.legal-hero .blog-hero-heading { color: var(--white); font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; margin-block: 10px 0; }
.legal-hero p { color: oklch(0.85 0.01 264); margin-block-start: 12px; }

.legal-main { padding-block: clamp(40px, 7vw, 72px); }
.legal-content { max-width: 820px; margin-inline: auto; }
.legal-updated { color: var(--ink-500); font-size: 0.9rem; margin-block-end: 28px; }

.legal-content section { margin-block-end: 30px; }
.legal-content h2 {
  font-size: 1.4rem;
  color: var(--char-900);
  margin-block-end: 12px;
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--gold-500); /* accent on the start side (right in RTL) */
}
.legal-content p { color: var(--ink-700); line-height: 1.85; margin-block-end: 12px; }
.legal-content ul { padding-inline-start: 22px; margin-block-end: 12px; display: grid; gap: 8px; }
.legal-content li { color: var(--ink-700); line-height: 1.7; list-style: disc; }
.legal-content a { color: var(--navy-700); text-decoration: underline; }
.legal-content a:hover { color: var(--gold-800); }
.legal-content strong { color: var(--char-900); }

.legal-highlight {
  background: oklch(0.975 0.02 90);
  border: 1px solid var(--gold-400);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.legal-highlight h2 { margin-block-start: 0; }

.legal-back { text-align: center; margin-block-start: 44px; }

.legal-footer {
  background: var(--char-950);
  color: oklch(0.82 0.006 264);
  padding-block: 32px;
  text-align: center;
}
.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  margin-block-end: 14px;
}
.legal-footer a { color: oklch(0.85 0.01 264); transition: color .2s ease; }
.legal-footer a:hover { color: var(--gold-400); }
.legal-footer .copy { font-size: 0.85rem; color: oklch(0.7 0.006 264); }

/* ---------- Accessibility: skip link ---------- */
.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 12px;
  background: var(--char-950);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 1000;
  transition: inset-block-start .2s ease;
}
.skip-link:focus { inset-block-start: 0; }

/* Global keyboard-focus safety net (IS 5568 / WCAG 2.4.7): every
   interactive element gets a visible ring even if no component-specific
   :focus-visible rule above already covers it (nav/footer links, etc). */
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: transparent;          /* clear over the hero */
  border-block-end: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Solid translucent bar once scrolled — keeps dark nav text readable over any section */
.site-header.scrolled {
  background: oklch(0.99 0 0 / 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-end-color: var(--marble-200);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
}
.brand-logo { height: 52px; width: auto; transition: transform .3s var(--ease-out); }
.brand:hover .brand-logo { transform: scale(1.04); }

.main-nav { display: none; }
.main-nav ul { display: flex; gap: 24px; }
.main-nav a {
  font-weight: 500;
  color: var(--ink-900);
  padding-block: 6px;
  position: relative;
  transition: color .2s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transition: width .25s var(--ease-out);
}
.main-nav a:hover { color: var(--char-700); }
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Compact social pair in the header bar (matches lang-switch styling) */
.header-social { display: flex; align-items: center; gap: 6px; }
.header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--char-800);
  background: transparent;
  border: 1.5px solid var(--char-700);
  transition: transform .2s var(--ease-out), background .2s ease,
              border-color .2s ease, color .2s ease, box-shadow .25s ease;
}
.header-social a svg { width: 18px; height: 18px; display: block; }
.header-social a:hover,
.header-social a:focus-visible {
  color: var(--white);
  border-color: transparent;
  transform: translateY(-2px);
}
.header-social a:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
/* Hide only on the very smallest screens so the mobile bar stays uncluttered
   (it fits fine from ~360px up; footer + reviews cover narrower devices). */
@media (max-width: 359px) { .header-social { display: none; } }

.lang-switch {
  background: transparent;
  border: 1.5px solid var(--char-700);
  color: var(--char-800);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.lang-switch:hover { background: var(--char-800); color: var(--white); transform: translateY(-1px); }

.header-call { display: none; }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--char-900);
  border-radius: 2px;
  transition: transform .25s var(--ease-out), opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  border-block-start: 1px solid var(--marble-200);
  background: var(--white);
  animation: slideDown .25s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { padding: 8px 0; }
.mobile-menu a {
  display: block;
  padding: 15px 24px;
  font-weight: 600;
  border-block-end: 1px solid var(--marble-100);
  transition: background .2s ease, padding-inline-start .2s ease, color .2s ease;
}
.mobile-menu a:hover { background: var(--marble-100); color: var(--char-700); padding-inline-start: 32px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 88vh, 760px);
  color: var(--white);
  /* static fallback (first paint, video blocked, or reduced-motion) */
  background: var(--char-900)
    url("assets/hero-poster.jpg") center/cover no-repeat;
  text-align: center;
  padding-block: 80px 100px;
  overflow: hidden;
}
/* Looping interior cinemagraph background */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
/* Soft gold radial glow accent */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -10%;
  width: 60vmax; height: 60vmax;
  background: radial-gradient(circle, oklch(0.78 0.13 88 / 0.16), transparent 60%);
  pointer-events: none;
}
/* Readability overlay above the video — darkens toward the right (RTL copy) */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* lighter overlay so the video reads bright; still enough depth (with the
     text-shadow stack) to keep the copy readable — darker toward bottom/right */
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.05) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.35) 100%);
}
.hero-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; }

.badge-experience {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  color: var(--char-950);
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  margin-block-end: 22px;
}
.badge-experience strong { font-size: 1.5rem; line-height: 1; }

.hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 6.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  max-width: 14ch;
  /* soft dark shadow for legibility over bright floor reflections */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.7);
}
.hero-sub {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: oklch(0.95 0.006 264);
  max-width: 56ch;
  margin-block: 18px 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.7);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Hero phone CTA — gold capsule with the SAME infinite shimmer sweep as the
   green WhatsApp button (reuses the .btn-shimmer `shimmer2` keyframe).
   Inherits .btn / .btn-lg shape, height & padding → matches WhatsApp exactly. */
.hero-call-btn {
  position: relative;
  overflow: hidden;
  border: none;
  color: #1e1e1e;
  /* solid premium gold base with one bright highlight band that sweeps across */
  background: linear-gradient(110deg,
    oklch(0.70 0.15 88) 0%,
    oklch(0.70 0.15 88) 42%,
    oklch(0.95 0.06 95) 50%,
    oklch(0.70 0.15 88) 58%,
    oklch(0.70 0.15 88) 100%);
  background-size: 200% 100%;
  animation: shimmer2 2.6s linear infinite;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 22px oklch(0.72 0.15 88 / 0.45);
  transition: transform .2s var(--ease-out), box-shadow .25s ease, filter .2s ease;
}
.hero-call-btn > span { position: relative; z-index: 2; } /* text above the sweep */
.hero-call-btn .icon-phone { color: #1e1e1e; }
.hero-call-btn::after { display: none; }                  /* drop base hover-sweep */
.hero-call-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32), 0 0 30px oklch(0.72 0.15 88 / 0.6);
  filter: brightness(1.04);
}

.hero-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 20px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust span[aria-hidden] { color: var(--gold-400); font-weight: 900; }

/* =========================================================
   CARDS / SERVICES
   ========================================================= */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--marble-200);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s ease;
}
/* Gold top accent bar grows on hover */
.service-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transform: scaleX(0);
  transform-origin: var(--logical-start, right);
  transition: transform .3s var(--ease-out);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-400);
}
.card-icon {
  font-size: 2rem;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--marble-100), var(--marble-200));
  border-radius: 16px;
  margin-block-end: 16px;
  transition: transform .3s var(--ease-out), background .3s ease;
}
.service-card:hover .card-icon { transform: scale(1.08) rotate(-4deg); }
.card h3 { font-size: 1.25rem; margin-block-end: 8px; }
.card p { color: var(--ink-700); }

.card-cta {
  background: linear-gradient(150deg, var(--char-800), var(--char-950));
  border: 0;
  color: var(--white);
}
.card-cta::before { display: none; }
.card-cta h3 { color: var(--white); }
.card-cta p { color: oklch(0.9 0.006 264); margin-block-end: 16px; }

/* =========================================================
   ABOUT
   ========================================================= */
.about-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
/* Prevent grid items from forcing tracks wider than the viewport */
.about-inner > *,
.contact-inner > *,
.cards-grid > * { min-width: 0; }

.about-media {
  position: relative;
  background: linear-gradient(150deg, var(--marble-100), var(--marble-200));
  border-radius: var(--radius-lg);
  padding: clamp(24px, 6vw, 40px);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.about-media img { max-width: min(320px, 100%); }
.about-badge {
  position: absolute;
  inset-block-end: -18px;
  inset-inline-start: 24px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  color: var(--char-950);
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  animation: floaty 4s var(--ease-out) infinite;
}
.about-badge strong { font-size: 1.3rem; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.about-text h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin-block: 10px 18px; }
/* subtle gold accent line under the heading */
.about-heading::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin-block-start: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, oklch(0.7 0.15 88), var(--gold-400));
}
/* Opening sentence — slightly larger, airy lead-in */
.about-lead {
  color: var(--ink-900);
  line-height: 1.8;
  font-size: clamp(1.05rem, 2.4vw, 1.18rem);
  font-weight: 500;
  margin-block: 4px 30px;
}
/* Three key highlights — spaced vertical list with gold dots */
.about-highlights {
  display: grid;
  gap: 24px;
  margin-block: 0 34px;
}
.about-highlights li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--ink-700);
  line-height: 1.75;
  font-size: 1.02rem;
}
.about-highlights li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.7 0.15 88), var(--gold-400));
  box-shadow: 0 0 0 4px oklch(0.7 0.15 88 / 0.14);
}
.about-highlights strong {
  display: block;
  color: var(--ink-900);
  font-weight: 700;
  margin-block-end: 2px;
}

/* =========================================================
   CONTACT / LEAD FORM
   ========================================================= */
.contact-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.contact-info h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin-block: 10px 14px; }
.contact-info p { color: var(--ink-700); margin-block-end: 22px; }
.contact-list { display: grid; gap: 14px; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.contact-list a { transition: color .2s ease; }
.contact-list a:hover { color: var(--gold-800); }
.ci-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  color: oklch(0.7 0.15 88);   /* premium gold icons (was pink/magenta emoji) */
}
.ci-icon svg { width: 22px; height: 22px; }

/* Contact form submit — solid premium gold with charcoal text */
.form-submit-btn {
  background: oklch(0.7 0.15 88);
  color: #1e1e1e;
  border: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform .2s var(--ease-out), box-shadow .25s ease, filter .2s ease;
}
.form-submit-btn:hover {
  transform: translateY(-2px);   /* subtle lift (no scale → no full-width overflow) */
  box-shadow: 0 10px 26px var(--gold-glow);
  filter: brightness(1.05);
}
.form-submit-btn::after { display: none; }

.lead-form {
  position: relative;
  background: var(--white);
  border: 1px solid var(--marble-200);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 16px;
}
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field input,
.field select,
.field textarea {
  font-family: var(--font-base);
  font-size: 1rem;
  padding: 13px 14px;
  border: 1.5px solid var(--marble-200);
  border-radius: var(--radius);
  background: var(--marble-50);
  color: var(--ink-900);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  background: var(--white);
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px oklch(0.82 0.13 88 / 0.28);
}
.field textarea { resize: vertical; }

.field-check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.field-check input { width: 20px; height: 20px; margin-block-start: 3px; accent-color: var(--gold-700); }
.field-check label { font-weight: 400; font-size: 0.9rem; color: var(--ink-700); }
.field-check a { color: var(--char-700); text-decoration: underline; }

.hp-field { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-weight: 600; text-align: center; min-height: 1.2em; }
.form-status.ok { color: var(--whatsapp-a11y); }
.form-status.err { color: oklch(0.55 0.2 25); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--char-950); color: oklch(0.9 0.006 264); padding-block: 48px 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-block-end: 36px;
}
.footer-logo { height: 60px; background: var(--white); padding: 6px 10px; border-radius: 10px; margin-block-end: 14px; }
.footer-col h3 { color: var(--gold-500); font-size: 1.05rem; margin-block-end: 14px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { transition: color .2s ease, padding-inline-start .2s ease; }
.footer-col a:hover { color: var(--gold-400); padding-inline-start: 4px; }

/* =========================================================
   SOCIAL PROFILE BUTTONS (footer + reviews section)
   Circular gold-outlined badges on the dark brand surface;
   fill with the native brand colour + lift on hover.
   ========================================================= */
.social-follow-label {
  display: block;
  color: var(--gold-500);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}
.footer-social { margin-block-start: 20px; }
.footer-social .social-follow-label { margin-block-end: 12px; }
.social-links { display: flex; align-items: center; gap: 12px; }
/* Target the anchors directly so footer's generic `.footer-col a` rules
   (colour + padding shift + transition) never override these. */
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  color: var(--white);
  background: oklch(1 0 0 / 0.06);
  border: 1.5px solid oklch(0.82 0.13 88 / 0.42);
  transition: transform .25s var(--ease-out), background .25s ease,
              border-color .25s ease, box-shadow .3s ease, color .25s ease;
}
.social-links a svg { width: 22px; height: 22px; display: block; }
.social-links a:hover,
.social-links a:focus-visible {
  color: var(--white);
  padding-inline-start: 0;                 /* cancel footer link hover shift */
  transform: translateY(-4px) scale(1.08);
  border-color: transparent;
}
.social-links a:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }
.social-btn--fb:hover,
.social-btn--fb:focus-visible { background: #1877F2; box-shadow: 0 12px 30px oklch(0.55 0.2 264 / 0.55); }
.social-btn--ig:hover,
.social-btn--ig:focus-visible {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 12px 30px oklch(0.55 0.22 5 / 0.55);
}

/* Social row under the reviews marquee — centred, reinforces social proof */
.reviews-social-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-block-start: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .social-links a:hover, .social-links a:focus-visible { transform: none; }
}
.footer-bottom {
  border-block-start: 1px solid oklch(0.35 0.01 264 / 0.6);
  padding-block: 20px;
  text-align: center;
  font-size: 0.88rem;
  color: oklch(0.78 0.006 264);
}

/* =========================================================
   STICKY MOBILE ACTION BAR
   ========================================================= */
/* Floating glassmorphism pill */
.mobile-bar {
  position: fixed;
  inset-block-end: calc(12px + env(safe-area-inset-bottom));
  inset-inline: 12px;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: oklch(0.19 0.01 264 / 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid oklch(0.82 0.13 88 / 0.32);
  box-shadow: 0 12px 32px oklch(0.10 0 0 / 0.45);
}
.mobile-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-400);
  transition: background .15s ease, transform .1s ease;
}
.mobile-bar-btn span[aria-hidden] { font-size: 1.2rem; }
.mobile-bar-btn:active { background: oklch(1 0 0 / 0.12); transform: scale(0.97); }

/* ===== Quick share floating button ===== */
.share-fab {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 20px;
  z-index: 190;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  color: var(--char-950);
  box-shadow: 0 8px 24px var(--gold-glow);
  cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.share-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px var(--gold-glow); }
.share-fab:active { transform: scale(0.96); }
.share-fab:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }

.share-toast {
  position: fixed;
  inset-block-end: 84px;
  inset-inline-start: 20px;
  z-index: 191;
  background: var(--char-900);
  color: var(--white);
  font-size: 0.85rem; font-weight: 600;
  padding: 10px 16px; border-radius: 12px;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.share-toast.show { opacity: 1; transform: none; }

@media (max-width: 859px) {
  /* lift the share button above the floating action bar */
  .share-fab { inset-block-end: calc(88px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  .share-toast { inset-block-end: calc(144px + env(safe-area-inset-bottom)); }
}

@media (max-width: 859px) {
  /* clearance for the floating action bar (height + gap + safe area) */
  body { padding-block-end: calc(96px + env(safe-area-inset-bottom)); }
  /* Disable fixed background-attachment on mobile (jank + perf) */
  .hero { background-attachment: scroll; }
}

/* =========================================================
   HONEYPOT — keep in the DOM for bots, hide from humans.
   (Was rendering as a stray visible field on every viewport.)
   ========================================================= */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   MOBILE UX AUDIT — overflow, touch targets & spacing
   Phones 320–600px.
   ========================================================= */
@media (max-width: 600px) {
  /* Hero CTAs stack full-width so the long phone label can't overflow */
  .hero-cta { width: 100%; flex-direction: column; gap: 12px; }
  .hero-cta .btn { width: 100%; }
  .btn-lg { padding-inline: 22px; } /* room for "חייגו עכשיו: 052-9534540" */

  /* Comfortable ≥48px tap targets */
  .lang-switch { min-width: 48px; min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .gallery-tab { min-height: 44px; display: inline-flex; align-items: center; }

  /* Gallery pagination dots: keep the dot small, enlarge the tap area */
  .gallery-dots { gap: 4px; }
  .gallery-dot,
  .gallery-dot.active {
    width: 44px; height: 44px;
    border: 0; background: transparent; box-shadow: none;
    position: relative;
  }
  .gallery-dot::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px solid var(--gold-600);
    transition: background .2s, box-shadow .2s;
  }
  .gallery-dot.active::before {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
    border-color: transparent; box-shadow: 0 0 10px var(--gold-glow);
  }

  /* Consent: larger checkbox + thumb-friendly label row */
  .field-check { gap: 12px; align-items: center; }
  .field-check input { width: 24px; height: 24px; margin-block-start: 0; }
  .field-check label { min-height: 44px; display: flex; align-items: center; }

  /* Footer & contact text links: pad to a thumb-friendly height.
     Footer nav links go full-column-width so short words (FAQ/About)
     still present a wide tap target. */
  .footer-col a { display: block; padding-block: 11px; width: fit-content; min-width: 44px; }
  .contact-info a { display: inline-block; padding-block: 11px; }
}

/* =========================================================
   ENTRANCE ANIMATIONS
   Hidden state only applies when JS is active (.js on <html>),
   so no-JS users always see content.
   ========================================================= */
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.js .reveal {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(30px);
  transition:
    opacity .8s cubic-bezier(0.16, 1, 0.3, 1),
    transform .8s cubic-bezier(0.16, 1, 0.3, 1),
    filter .8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
.js .reveal.active {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Staggered children inside the services grid */
.js .cards-grid > .card:nth-child(2) { transition-delay: 80ms; }
.js .cards-grid > .card:nth-child(3) { transition-delay: 160ms; }
.js .cards-grid > .card:nth-child(4) { transition-delay: 80ms; }
.js .cards-grid > .card:nth-child(5) { transition-delay: 160ms; }
.js .cards-grid > .card:nth-child(6) { transition-delay: 240ms; }

/* Hero loads immediately (above the fold) with a stagger */
.js .hero .badge-experience { animation: fadeUp .7s .10s both, floaty 4s 1.2s var(--ease-out) infinite; }
.js .hero h1 { animation: fadeUp .7s .24s both; }
.js .hero-sub { animation: fadeUp .7s .38s both; }
.js .hero-cta { animation: fadeUp .7s .52s both; }
.js .hero-trust { animation: fadeIn .9s .8s both; }

/* =========================================================
   RESPONSIVE — Tablet & Desktop
   ========================================================= */
@media (min-width: 600px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-trust { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .main-nav { display: block; }
  .header-call { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
  .mobile-bar { display: none; }

  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .about-inner { grid-template-columns: 1fr 1.1fr; }
  .contact-inner { grid-template-columns: 1fr 1.2fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* =========================================================
   REDUCED MOTION — disable all motion, keep content visible
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  /* No background motion — show the static fallback image instead of the video */
  .hero-video { display: none; }
}

/* =========================================================
   ACCESSIBILITY WIDGET (IS 5568 / WCAG AA)
   Floating toggle + panel: text size, high contrast, pause
   animations. Markup is injected by main.js on every page that
   loads it. Positioned opposite the share-fab (inline-end = left
   in RTL) and lifted above the mobile action bar on small screens.
   ========================================================= */
.a11y-widget {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 20px;
  z-index: 500;
}
@media (max-width: 859px) {
  .a11y-widget { inset-block-end: calc(88px + env(safe-area-inset-bottom)); }
}
.a11y-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--char-950);
  color: var(--gold-500);
  box-shadow: var(--shadow-md);
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.a11y-toggle svg { width: 28px; height: 28px; }
.a11y-toggle:hover { transform: translateY(-3px); box-shadow: 0 12px 30px var(--gold-glow); }
.a11y-toggle:active { transform: scale(0.96); }

.a11y-panel {
  position: absolute;
  inset-block-end: calc(100% + 12px);
  inset-inline-end: 0;
  width: 268px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  color: var(--ink-900);
  border: 1px solid var(--marble-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  display: grid;
  gap: 14px;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1rem; }
.a11y-panel__close {
  border: 0; background: none; cursor: pointer; padding: 4px;
  font-size: 1.3rem; line-height: 1; color: var(--ink-700);
}
.a11y-panel__close:hover { color: var(--gold-800); }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.9rem; font-weight: 600; }
.a11y-btns { display: flex; gap: 6px; }
.a11y-btns button {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--marble-200);
  background: var(--marble-50);
  color: var(--ink-900);
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease;
}
.a11y-btns button:hover { border-color: var(--gold-600); }
.a11y-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  border: 1.5px solid var(--marble-200);
  background: var(--marble-50);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.a11y-toggle-row[aria-pressed="true"] { border-color: var(--gold-600); background: oklch(0.82 0.13 88 / 0.15); }
.a11y-toggle-row .a11y-state { font-weight: 700; color: var(--ink-700); }
.a11y-toggle-row[aria-pressed="true"] .a11y-state { color: var(--gold-800); }
.a11y-reset {
  border: 1.5px dashed var(--marble-200);
  background: none;
  border-radius: 10px;
  padding: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
}
.a11y-reset:hover { border-color: var(--gold-600); color: var(--gold-800); }
.a11y-statement-link { font-size: 0.82rem; text-align: center; color: var(--char-700); text-decoration: underline; }

/* --- High contrast mode --- */
html.a11y-contrast,
html.a11y-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-contrast section,
html.a11y-contrast header,
html.a11y-contrast footer,
html.a11y-contrast nav,
html.a11y-contrast div,
html.a11y-contrast article,
html.a11y-contrast main,
html.a11y-contrast form {
  background: #000 !important;
  background-image: none !important;
}
html.a11y-contrast * { text-shadow: none !important; box-shadow: none !important; border-color: #fff !important; }
html.a11y-contrast a { color: #ffd400 !important; text-decoration: underline !important; }
html.a11y-contrast .btn,
html.a11y-contrast button,
html.a11y-contrast input,
html.a11y-contrast select,
html.a11y-contrast textarea {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
html.a11y-contrast img,
html.a11y-contrast video { filter: grayscale(1) contrast(1.2); opacity: .9; }
html.a11y-contrast .a11y-toggle { border: 2px solid #fff !important; }

/* --- Pause animations (same effect as prefers-reduced-motion, user-triggered) --- */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.a11y-reduce-motion .js .reveal { opacity: 1; transform: none; filter: none; }
html.a11y-reduce-motion .hero-video { display: none; }

/* =========================================================
   COOKIE CONSENT BANNER
   ========================================================= */
.cookie-banner {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 900;
  background: var(--char-950);
  color: oklch(0.9 0.006 264);
  padding: 18px clamp(16px, 4vw, 32px);
  box-shadow: 0 -8px 24px oklch(0.17 0.006 264 / 0.3);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.cookie-banner p { font-size: 0.9rem; max-width: 62ch; }
.cookie-banner a { color: var(--gold-500); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner__actions button {
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid oklch(1 0 0 / 0.35);
  background: none;
  color: var(--white);
  transition: transform .15s ease, background .15s ease;
}
.cookie-banner__actions button:hover { transform: translateY(-2px); }
.cookie-banner__accept { background: var(--gold-500) !important; color: var(--char-950) !important; border-color: var(--gold-500) !important; }
@media (max-width: 859px) {
  .cookie-banner { padding-block-end: calc(18px + env(safe-area-inset-bottom)); }
}