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

/* ── Global mobile touch improvements ─────────────────── */
html { -webkit-text-size-adjust: 100%; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }

:root {
  --dir-multiplier: 1;   /* 1 = LTR,  -1 = RTL  (set by main.js) */
}

body {
  font-family: "Oswald", system-ui, sans-serif;
  background: #f5f0e8;
  color: #2d1810;
  /* clip, not hidden – avoids creating a scroll container that fights GSAP pin */
  overflow-x: clip;
  /* iOS: keep vertical document scroll predictable (avoid accidental scroll traps) */
  -webkit-overflow-scrolling: touch;
}

/* ── Scroll progress bar ─────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #C8926A, #7A3E2C);
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── Section reveal covers ───────────────────────────────── */
.reveal-cover {
  position: absolute;
  inset: 0;
  z-index: 50;
  transform-origin: top;
  pointer-events: none;
  will-change: transform;
}
.reveal-cover--light { background: #f5f0e8; }
.reveal-cover--tan   { background: #C8926A; }
.reveal-cover--dark  { background: #2d1810; }

/* ── Header ─────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
}
.header__logo { display: flex; align-items: center; }
.header__logo img { height: 56px; width: auto; }
.header__menu {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.header__menu-line { display: block; width: 28px; height: 2px; background: #2d1810; }
.header__cta {
  display: inline-block; padding: 0.5rem 1.5rem;
  background: #fff; color: #2d1810;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; text-decoration: none;
  border-radius: 999px; transition: opacity 0.2s;
}
.header__cta:hover { opacity: 0.9; }

/* ── Nav Overlay ─────────────────────────────────────────── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
  visibility: hidden;
}

.nav-overlay.is-open {
  pointer-events: all;
  visibility: visible;
}

/* Left panel */
.nav-overlay__lhs {
  background: #F5EDE0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5rem, 8vw, 8rem) clamp(2.5rem, 6vw, 7rem);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1);
}

.nav-overlay.is-open .nav-overlay__lhs {
  clip-path: inset(0 0% 0 0);
}

/* Right panel */
.nav-overlay__rhs {
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1) 0.05s;
}

.nav-overlay.is-open .nav-overlay__rhs {
  clip-path: inset(0 0 0 0%);
}

.nav-overlay__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nav links */
.nav-overlay__nav {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin-bottom: 3rem;
}

.nav-overlay__link {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-size: clamp(2.8rem, 6vw, 6rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: #2d1810;
  line-height: 1.05;
  display: block;
  opacity: 0;
  transform: translateY(30px);
  transition: color 0.2s;
}
.nav-overlay__link:hover { color: #C8926A; }

.nav-overlay.is-open .nav-overlay__link {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger each link */
.nav-overlay.is-open .nav-overlay__link:nth-child(1) { transition: opacity 0.45s 0.35s ease, transform 0.45s 0.35s ease, color 0.2s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(2) { transition: opacity 0.45s 0.42s ease, transform 0.45s 0.42s ease, color 0.2s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(3) { transition: opacity 0.45s 0.49s ease, transform 0.45s 0.49s ease, color 0.2s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(4) { transition: opacity 0.45s 0.56s ease, transform 0.45s 0.56s ease, color 0.2s; }

/* Socials */
.nav-overlay__socials {
  display: flex;
  gap: 2rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s 0.3s ease, transform 0.35s 0.3s ease;
}

.nav-overlay.is-open .nav-overlay__socials {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s 0.65s ease, transform 0.4s 0.65s ease;
}

.nav-overlay__social {
  font-family: "Oswald", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #2d1810;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.nav-overlay__social:hover { opacity: 1; }

/* Close (×) button */
.nav-overlay__close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s 0.4s ease;
  z-index: 10;
}

.nav-overlay.is-open .nav-overlay__close { opacity: 1; }

.nav-overlay__close span {
  position: absolute;
  width: 26px;
  height: 2px;
  background: #2d1810;
  border-radius: 2px;
}
.nav-overlay__close span:first-child { transform: rotate(45deg); }
.nav-overlay__close span:last-child  { transform: rotate(-45deg); }
.nav-overlay__close:hover span { background: #C8926A; }

/* Hamburger → animates to X when open */
.header__menu.is-open .header__menu-line:first-child {
  transform: translateY(4px) rotate(45deg);
  transition: transform 0.3s ease;
}
.header__menu.is-open .header__menu-line:last-child {
  transform: translateY(-4px) rotate(-45deg);
  transition: transform 0.3s ease;
}
.header__menu-line {
  transition: transform 0.3s ease;
}

/* Mobile: stack panels */
@media (max-width: 700px) {
  .nav-overlay { grid-template-columns: 1fr; }
  .nav-overlay__rhs { display: none; }
  .nav-overlay__link { font-size: clamp(2.2rem, 12vw, 3.5rem); }
}

/* ── Hero block ─────────────────────────────────────────── */
.hero-block { position: relative; height: 100vh; overflow: hidden; }

.video-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1; will-change: transform; overflow: hidden; transform-origin: center center;
}
.hero-bottle {
  position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
  z-index: 5; pointer-events: none; will-change: transform;
}
.hero-bottle__img { max-height: 50vh; width: auto; object-fit: contain; display: block; }
.video-layer__placeholder { position: absolute; inset: 0; background: #ebe5dc; }
.video-layer__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-layer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.25); pointer-events: none; }

.hero-content {
  position: relative; z-index: 10; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8rem 2rem 5rem;
}
.hero-reveal {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 400; letter-spacing: -2px; line-height: 0.9;
  text-transform: uppercase; color: #f5f0e8;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4); margin-bottom: 0.75rem;
}
.hero-reveal .hero-reveal__word { opacity: 0.1; display: inline-block; will-change: opacity; }

.hero-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 10vw, 12rem);
  font-weight: 400; letter-spacing: -2px; line-height: 0.9;
  text-transform: uppercase; color: #f5f0e8;
  -webkit-text-stroke: 2px #2d1810; text-stroke: 2px #2d1810;
  paint-order: stroke fill; margin: 0; will-change: transform, opacity;
}
.hero-highlight {
  display: inline-block; background: #7a3e2c;
  padding: 0.85rem 2.25rem; margin-top: 1rem;
  width: 48%; min-width: 280px; max-width: 560px;
  transform: rotate(-3deg); will-change: transform, opacity;
}
.hero-highlight__text {
  color: #f5f0e8; font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  font-weight: 400; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase;
}
.hero-cta {
  display: inline-block; margin-top: 2.5rem;
  padding: 0.75rem 2.5rem; background: #c99b68; color: #2d1810;
  font-family: "Oswald", sans-serif; font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  border-radius: 999px; transition: background 0.2s, transform 0.2s;
  will-change: transform, opacity;
}
.hero-cta:hover { background: #d4a574; transform: scale(1.02); }

/* ═══════════════════════════════════════════════════════════
   SERVICES SECTION – single scroll-wrapper, overflow: clip
   ═══════════════════════════════════════════════════════════ */

/* (floating-chunk keyframe removed – chunks replaced by corner buttons) */

/* ── Section shell ──────────────────────────────────────────
   overflow: clip  → hides out-of-bounds content without
   creating a scroll container (overflow: hidden would fight
   GSAP pin and create the "white box" clipping artifact).
   z-index: 20     → sits above sections below it.
   ────────────────────────────────────────────────────────── */
.sv {
  position: relative;
  z-index: 20;
  background: #F9F4EE;
  height: 100vh;
  overflow: clip;
  cursor: grab;
}
.sv:active { cursor: grabbing; }

/* ── scroll-wrapper: ONE container for text + ALL cards ────
   position: relative  → GSAP translateX anchor
   overflow: visible   → never clips its own children
   width: 100%         → fills section; cards overflow to right
   (overflow is handled by the parent .sv using clip)
   ────────────────────────────────────────────────────────── */
.scroll-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: visible;
  will-change: transform;
  user-select: none;
}

/* ── Left: heading + CTA ──────────────────────────────────
   flex-shrink: 0  → never compress below declared width
   ────────────────────────────────────────────────────────── */
.sv__lhs {
  flex: 0 0 clamp(280px, 38vw, 500px);
  width: clamp(280px, 38vw, 500px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 0 2.5rem 0 clamp(2rem, 4.5vw, 4.5rem);
  height: 100%;
}

/* Heading: Anton, bold, condensed */
.sv__heading {
  font-family: "Anton", "Bebas Neue", Impact, sans-serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #3D2010;
  margin: 0;
  margin-top: 1cm;
}
.sv__hl { display: block; }

/* "PRIMARY" – dark brown sticker, -3° */
.sv__badge {
  display: inline-block;
  background: #7B4F28;
  color: #fff;
  padding: 0.04em 0.24em 0.1em;
  transform: rotate(-3deg);
  border-radius: 3px;
  line-height: 1;
}

/* GET IT NOW pill */
.sv__btn {
  display: inline-block;
  padding: 0.95rem 2.85rem;
  background: #E5A96F;
  color: #3D2010;
  font-family: "Oswald", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.2s, transform 0.2s;
}
.sv__btn:hover { background: #d99a5a; transform: scale(1.02); }

/* ── Card track: display flex, NOT position absolute ───────
   No overflow hidden here – clipping happens at .sv level.
   ────────────────────────────────────────────────────────── */
.sv__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4rem;
  height: 100%;
  flex-shrink: 0;
  overflow: visible;
}

/* ── Card ──────────────────────────────────────────────────
   will-change: transform  → GPU compositing, smooth animation
   NOT position: absolute  → stays in normal flex flow
   ────────────────────────────────────────────────────────── */
.sv__card {
  flex: 0 0 clamp(250px, 22vw, 330px);
  width: clamp(250px, 22vw, 330px);
  height: clamp(380px, 52vh, 520px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  will-change: transform;
  overflow: visible; /* allow image to break out of card boundaries */
}

/* ── Tilted card background – Medium Light Blue, all 6 cards ──
   Same colour family; differentiation comes from the image inside.
   ─────────────────────────────────────────────────────────────── */
.sv__card-bg {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: linear-gradient(145deg, #C8E8F8 0%, #A3D1E5 55%, #88C0D8 100%);
  box-shadow:
    0 18px 52px rgba(80, 160, 210, 0.40),
    0  6px 20px rgba(0, 0, 0, 0.10);
  transform: rotate(7deg);
  transition: opacity 0.3s ease;
  z-index: 0;
  opacity: 0.9;
}


/* ── Card body: image bursts out of card top and sides ────── */
.sv__card-body {
  position: relative;
  z-index: 6;
  width: 100%;
  height: 76%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin-top: -5rem; /* pull image area up so it breaks above the card top */
}

/* 3-D pop-out */
.sv__card-img {
  width: 130%;
  height: 130%;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: rotate(7deg) translateY(-10%) scale(1.05);
  filter:
    drop-shadow(0 30px 20px rgba(0, 0, 0, 0.32))
    drop-shadow(0 10px  8px rgba(0, 0, 0, 0.20));
  will-change: transform;
}

/* Card 2 – Food Technology R&D: narrower but same height */
.sv__card:nth-child(2) .sv__card-img {
  width: 88%;
  height: 130%;
}

/* Card 5 – Analytical Services: bigger pop-out */
.sv__card:nth-child(5) .sv__card-img {
  width: 160%;
  height: 160%;
}

/* Card 6 – Innovation Consulting: slightly smaller */
.sv__card:nth-child(6) .sv__card-img {
  width: 105%;
  height: 105%;
}

/* ── Per-service placeholder gradients ──────────────────────
   Shown when the real image is absent (onerror swap).
   Each palette is chosen to evoke the service's domain.
   ─────────────────────────────────────────────────────────── */
.sv__card-ph {
  width: 70%;
  height: 78%;
  border-radius: 14px;
  display: none; /* shown by onerror */
  flex-shrink: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}
/* 1 – Product Development: industrial steel blue → deep navy */
.sv__card-ph--1 { background: linear-gradient(160deg, #A8C8E8 0%, #5890C8 55%, #1A4A80 100%); }
/* 2 – Food Technology R&D: warm lab amber → rich gold */
.sv__card-ph--2 { background: linear-gradient(160deg, #F7E0A8 0%, #E8A830 55%, #B87010 100%); }
/* 3 – Regulatory & Compliance: trustworthy slate blue → indigo */
.sv__card-ph--3 { background: linear-gradient(160deg, #B8C8E8 0%, #6878C0 55%, #303880 100%); }
/* 4 – Quality & Food Safety: clean mint → teal */
.sv__card-ph--4 { background: linear-gradient(160deg, #A8ECD8 0%, #30C8A0 55%, #0A8870 100%); }
/* 5 – Analytical Services: precise graphite → charcoal */
.sv__card-ph--5 { background: linear-gradient(160deg, #C8D0D8 0%, #7888A0 55%, #384050 100%); }
/* 6 – Innovation Consulting: vibrant coral → creative magenta */
.sv__card-ph--6 { background: linear-gradient(160deg, #F8C0B8 0%, #E85870 55%, #A01840 100%); }

/* ── Service name label ────────────────────────────────────
   Dark navy text – high contrast against the light blue card.
   ─────────────────────────────────────────────────────────── */
.sv__card-name {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  font-family: "Bebas Neue", "Anton", sans-serif;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  letter-spacing: 0.12em;
  color: #1C3D5A;
  z-index: 7;
  line-height: 1.15;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(-50%) rotate(7deg);
  transform-origin: center bottom;
}

/* ── Responsive: stack on mobile, native scroll ─────────── */
@media (max-width: 860px) {
  .sv {
    height: auto;
    overflow-x: clip;
    overflow-y: visible;
    cursor: default;
  }
  .scroll-wrapper {
    flex-direction: column;
    height: auto;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    user-select: auto;
  }
  .scroll-wrapper::-webkit-scrollbar { display: none; }
  .sv__lhs {
    flex: none;
    width: 100%;
    padding: 4rem clamp(1.5rem, 4vw, 3rem) 2rem;
    height: auto;
  }
  .sv__track {
    padding: 0 clamp(1.5rem, 4vw, 3rem) 3rem;
    height: clamp(440px, 60vw, 560px);
  }
  .sv__card  { transform: none !important; }
  .sv__card-bg { opacity: 0.92 !important; }
}

@media (max-width: 520px) {
  .sv__heading { font-size: clamp(2.5rem, 12vw, 4rem); }
  .sv__card {
    flex: 0 0 82vw;
    width: 82vw;
    height: clamp(340px, 56vw, 460px);
  }
}

/* ═══════════════════════════════════════════════════════════
   Section 2 – Spylt scroll-reveal
   ═══════════════════════════════════════════════════════════ */
.section {
  position: relative;
  z-index: 20;
  min-height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem 10rem;
  margin-top: -2px;
  background: #7a3e2c;
}
.section__content { width: 80%; max-width: 1400px; text-align: center; }
.section__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 14vw, 10rem);
  font-weight: 400; line-height: 0.82;
  letter-spacing: -0.02em; color: #f5f0e8;
  margin: 0 0 2rem; text-transform: uppercase; will-change: opacity;
}
.section__line { display: block; opacity: 1; }
.section__line--highlight { display: inline-block; margin: 0.08em 0; }

/* Blinking cursor during typewriter animation */
@keyframes type-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.section__line .type-cursor {
  display: inline-block;
  width: 3px;
  background: currentColor;
  animation: type-cursor-blink 0.6s step-end infinite;
  vertical-align: baseline;
  margin-left: 2px;
}
.section__highlight-box {
  display: inline-block;
  background-color: #dcc59c; color: #7a3e2c;
  font-size: clamp(2rem, 8vw, 12rem);
  padding: 0.1em 0.6em; line-height: 1;
  white-space: nowrap; border-radius: 2px;
  transform: rotate(-2.5deg); letter-spacing: -0.02em;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
.section__cta {
  display: inline-block; padding: 0.75rem 2rem;
  background: #fff; color: #7a3e2c;
  font-family: "Oswald", sans-serif; font-size: 0.85rem;
  font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none;
  border-radius: 999px; transition: background 0.2s, transform 0.2s;
}
.section__cta:hover { background: #f5f0e8; transform: scale(1.02); }

/* ═══════════════════════════════════════════════════════════
   SPOTLIGHT SECTION  –  Spylt "body good" layout
   ═══════════════════════════════════════════════════════════ */
.sp {
  position: relative;
  z-index: 10;
  background: #F5EDE0;
  background-image: url("images/Servicescard/shelflife.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 5rem 0 0;
}

/* Dark overlay so text stays readable over the background image */
.sp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 237, 224, 0.55);
  z-index: 1;
  pointer-events: none;
}

/* ── Background blobs ─────────────────────────────────────── */
.sp__blob {
  position: absolute;
  border-radius: 50% 60% 40% 55% / 55% 45% 60% 40%;
  pointer-events: none;
  z-index: 0;
}
.sp__blob--1 {
  width: clamp(300px, 38vw, 560px);
  height: clamp(260px, 32vw, 480px);
  background: #EDE0CE;
  top: -8%;
  right: -6%;
}
.sp__blob--2 {
  width: clamp(180px, 22vw, 320px);
  height: clamp(160px, 18vw, 260px);
  background: #E8D9C4;
  top: 4%;
  right: 10%;
}

/* ── Main 3-column inner layout ──────────────────────────── */
.sp__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(3rem, 6vw, 8rem);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 6rem);
  flex: 1;
}

/* ── LEFT: headline ───────────────────────────────────────── */
.sp__lhs {
  padding-right: 2rem;
}
.sp__eyebrow {
  font-family: "Oswald", sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8B6340;
  margin-bottom: 0.4rem;
}
.sp__headline {
  font-family: "Bebas Neue", "Anton", Impact, sans-serif;
  font-size: clamp(4.5rem, 10vw, 10rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #2D1810;
  margin: 0;
}
.sp__hl-line { display: block; }

/* "BACKED" – solid brown highlight box, slight tilt */
.sp__mark {
  display: inline-block;
  background: #7A3E2C;
  color: #F5EDE0;
  padding: 0.06em 0.28em 0.1em;
  border-radius: 4px;
  transform: rotate(-2deg);
  transform-origin: left center;
  font-style: normal;
}

/* ── CENTER: product + floating deco shapes ──────────────── */
.sp__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(380px, 65vh, 700px);
}
.sp__product {
  position: relative;
  z-index: 3;
  max-height: 90%;
  width: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,0.20))
    drop-shadow(0 10px 15px rgba(0,0,0,0.12));
}

/* Floating decorative blobs around product */
.sp__deco {
  position: absolute;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  pointer-events: none;
  z-index: 2;
  animation: sp-float 4s ease-in-out infinite;
}
.sp__deco--1 {
  width: clamp(55px, 6vw, 90px);
  height: clamp(50px, 5.5vw, 80px);
  background: #C8A87A;
  top: 12%;
  left: 5%;
  transform: rotate(22deg);
  animation-delay: 0s;
  animation-duration: 3.8s;
}
.sp__deco--2 {
  width: clamp(40px, 4.5vw, 68px);
  height: clamp(36px, 4vw, 60px);
  background: #8B5E3C;
  top: 18%;
  right: 8%;
  transform: rotate(-15deg);
  animation-delay: 0.7s;
  animation-duration: 4.4s;
}
.sp__deco--3 {
  width: clamp(45px, 5vw, 72px);
  height: clamp(40px, 4.5vw, 64px);
  background: #D4A574;
  bottom: 22%;
  left: 8%;
  transform: rotate(-28deg);
  animation-delay: 1.3s;
  animation-duration: 5s;
}
@keyframes sp-float {
  0%, 100% { translate: 0 0; }
  50%       { translate: 0 -14px; }
}

/* ── RIGHT: copy ─────────────────────────────────────────── */
.sp__rhs {
  padding-left: 2.5rem;
  border-left: 2px solid rgba(90, 50, 20, 0.15);
}
.sp__copy {
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.75;
  color: #5A3820;
  letter-spacing: 0.02em;
  max-width: 480px;
  margin-bottom: 1.5rem;
}

.sp__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 480px;
  margin-bottom: 2rem;
}

.sp__bullets li {
  font-family: "Oswald", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 300;
  line-height: 1.7;
  color: #5A3820;
  padding-left: 1.3rem;
  position: relative;
}

.sp__bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #9B5A30;
  font-size: 1rem;
  top: 0.1em;
}

.sp__bullets li strong {
  display: block;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3A1C0E;
  margin-bottom: 0.2rem;
}

.sp__cta {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  background: #3A1C0E;
  color: #F5EDE0;
  font-family: "Oswald", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.2s, transform 0.2s;
}
.sp__cta:hover { background: #5A3820; transform: scale(1.03); }

/* ── BOTTOM: stats bar ───────────────────────────────────── */
.sp__stats {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #EDE0CE;
  border-radius: 999px;
  margin: 2.5rem clamp(2rem, 5vw, 5rem) 3rem;
  padding: 1.6rem clamp(2rem, 4vw, 4rem);
  gap: 0;
}
.sp__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
}
.sp__stat-label {
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8B6340;
}
.sp__stat-value {
  font-family: "Bebas Neue", "Anton", sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1;
  color: #2D1810;
  letter-spacing: 0.02em;
}
.sp__divider {
  width: 1px;
  height: 2.8rem;
  background: rgba(90, 50, 20, 0.20);
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .sp__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
    padding-bottom: 2rem;
  }
  .sp__lhs { padding: 0; }
  .sp__mark { transform-origin: center; }
  .sp__bullets { text-align: left; }
  .sp__rhs {
    border-left: none;
    border-top: 2px solid rgba(90,50,20,0.15);
    padding: 1.5rem 0 0;
    max-width: 560px;
    margin: 0 auto;
  }
  .sp__copy { max-width: 100%; }
  .sp__stats {
    flex-wrap: wrap;
    border-radius: 24px;
    gap: 1rem;
    justify-content: center;
  }
  .sp__divider { display: none; }
  .sp__stat { flex: 0 0 40%; }
}

/* ═══════════════════════════════════════════════════════════
   FEATURES "OPENING LINES" SECTION
   Dark background · each coloured bar opens from centre on scroll
   ═══════════════════════════════════════════════════════════ */
.ft {
  position: relative;
  z-index: 15;
  background: #151210;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip; /* clip, not hidden – avoids creating a scroll context */
}

/* Fill the GSAP pin spacer so the body cream never shows through */
.gsap-pin-spacer:has(> .ft) {
  background: #151210 !important;
}

.ft__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2vh, 1.6rem);
  width: 100%;
  padding: 0 2rem;
}

/* Each line is a full-width flex row that centres the bar */
.ft__line {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* The coloured bar – clip-path is animated by GSAP */
.ft__bar {
  width: clamp(500px, 75vw, 1080px);
  padding: clamp(1rem, 2.2vh, 1.6rem) clamp(2rem, 4vw, 4rem);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* starts fully hidden from centre – GSAP opens it */
  clip-path: inset(0 50% round 10px);
  will-change: clip-path;
}

/* Slight individual tilts like the reference */
.ft__bar--1 { background: #C8926A; transform: rotate(-1.8deg); }
.ft__bar--2 { background: #F0E3D0; transform: rotate( 1.2deg); }
.ft__bar--3 { background: #7A2E1C; transform: rotate(-0.9deg); }
.ft__bar--4 { background: #F0E070; transform: rotate( 2.0deg); }

/* Text inside each bar */
.ft__text {
  font-family: "Bebas Neue", "Anton", Impact, sans-serif;
  font-size: clamp(2.8rem, 7vw, 7.5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

/* Contrast: dark text on light bars, light text on dark bars */
.ft__bar--1 .ft__text { color: #1A0E08; }
.ft__bar--2 .ft__text { color: #2D1810; }
.ft__bar--3 .ft__text { color: #F5E6D0; }
.ft__bar--4 .ft__text { color: #2D1810; }

/* Mobile: allow wrap + smaller text, override pinned height */
@media (max-width: 860px) {
  .ft { height: auto; min-height: unset; padding: 4rem 1rem; overflow: visible; }
}
@media (max-width: 600px) {
  .ft__bar { width: 92vw; border-radius: 8px; }
  .ft__text { font-size: clamp(2rem, 9vw, 3.5rem); white-space: normal; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   REVIEWS SECTION  –  "What's Everyone Saying"
   Pinned · giant bg text · review cards slide in from right
   ═══════════════════════════════════════════════════════════ */
.rv {
  position: relative;
  z-index: 12;
  background: #F5EDE0;
  height: 100vh;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* GSAP pin spacer background */
.gsap-pin-spacer:has(> .rv) {
  background: #F5EDE0 !important;
}

/* ── Giant background text ────────────────────────────────── */
.rv__bg-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* right-aligned – cards stay left */
  justify-content: center;
  padding-right: clamp(2rem, 4vw, 5rem);
  line-height: 0.85;
  pointer-events: none;
  will-change: transform;
  z-index: 1; /* text above the stage background, below cards */
}

.rv__bg-line {
  display: block;
  font-family: "Bebas Neue", "Anton", Impact, sans-serif;
  font-size: clamp(5rem, 16vw, 17rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rv__bg-line--dark { color: #1A0E08; }
.rv__bg-line--gold { color: #C8926A; }

/* ── Cards stage (all cards positioned here) ─────────────── */
.rv__stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Base card style – portrait (tall & narrow) so bg text stays visible */
.rv__card {
  position: absolute;
  width: clamp(200px, 17vw, 250px);
  height: clamp(300px, 42vh, 400px);
  background: #fff;
  border-radius: 22px;
  padding: 1.6rem 1.5rem;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.14),
    0  6px 18px rgba(0, 0, 0, 0.08);
  pointer-events: auto;
  will-change: transform;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Row 1 – upper cluster (cards 1–4) */
.rv__card--1 { top: 5%;  left: 2%;  transform: rotate(-5deg); }
.rv__card--2 { top: 8%;  left: 13%; transform: rotate( 4deg); }
.rv__card--3 { top: 4%;  left: 24%; transform: rotate(-3deg); }
.rv__card--4 { top: 9%;  left: 35%; transform: rotate( 5deg); }

/* Row 2 – lower cluster (cards 5–8) */
.rv__card--5 { top: 52%; left: 2%;  transform: rotate( 4deg); }
.rv__card--6 { top: 55%; left: 13%; transform: rotate(-5deg); }
.rv__card--7 { top: 50%; left: 24%; transform: rotate( 3deg); }
.rv__card--8 { top: 54%; left: 35%; transform: rotate(-4deg); }

/* ── Card internals ────────────────────────────────────────── */
.rv__stars {
  font-size: 1.3rem;
  color: #F5A623;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.rv__quote {
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.82rem, 1.1vw, 0.98rem);
  font-weight: 400;
  color: #2D1810;
  line-height: 1.65;
  flex: 1;
  margin: 0.5rem 0;
}

.rv__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 0.75rem;
}
.rv__flag  { font-size: 1.1rem; }
.rv__name  {
  font-family: "Oswald", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8B6340;
}

/* ── CTA button ──────────────────────────────────────────── */
.rv__cta {
  position: absolute;
  bottom: clamp(2rem, 5vh, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 0.85rem 2.6rem;
  background: #C8926A;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  z-index: 10;
  transition: background 0.2s, transform 0.2s;
}
.rv__cta:hover { background: #b07848; transform: translateX(-50%) scale(1.04); }

/* ── Mobile fallback (860px = same as main.js isMobile / .sv mobile) ── */
@media (max-width: 860px) {
  .rv { height: auto; min-height: unset; overflow: visible; padding: 5rem 1rem 8rem; }
  .rv__bg-text { position: relative; padding: 0; align-items: center; margin-bottom: 2rem; }
  .rv__bg-line { font-size: clamp(3rem, 13vw, 6rem); }
  .rv__stage { position: relative; display: flex; flex-direction: column;
               align-items: center; gap: 1.5rem; }
  .rv__card { position: relative; top: auto; left: auto;
              transform: none !important; width: 92vw; }
  .rv__cta { position: relative; bottom: auto; left: auto;
             transform: none; margin-top: 2rem; }
}

/* ════════════════════════════════════════════════════════════
   LOCATION  —  "Right Where You Need Us"
   ════════════════════════════════════════════════════════════ */
.lc {
  position: relative;
  width: 100%;
  min-height: 82vh;
  overflow: hidden;
  z-index: 18;
  display: flex;
  align-items: flex-end;
}

/* Full-bleed map */
.lc__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lc__map svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Content card — bottom-left */
.lc__content {
  position: relative;
  z-index: 60;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4vw, 5rem) clamp(2.5rem, 5vw, 5rem);
  max-width: 560px;
}

.lc__headline {
  margin: 0 0 1rem;
  line-height: 0.95;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.lc__hl-plain {
  display: block;
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-size: clamp(2.8rem, 6.5vw, 5.6rem);
  color: #F5EDE0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.lc__hl-marked {
  display: block;
}

.lc__mark {
  display: inline-block;
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-size: clamp(2.8rem, 6.5vw, 5.6rem);
  background: #C8926A;
  color: #1C1008;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.04em 0.22em;
  border-radius: 4px;
  transform: rotate(-2deg);
  transform-origin: left center;
  text-decoration: none;
}

.lc__desc {
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  color: #F5EDE0;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 0 1.8rem;
  opacity: 0.85;
}

.lc__btn {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  background: #1C1008;
  color: #F5EDE0;
  font-family: "Oswald", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.2s, transform 0.2s;
}
.lc__btn:hover { background: #3a2010; transform: scale(1.04); }

/* Scattered favicon pins */
.lc__pin {
  position: absolute;
  width: clamp(50px, 4.5vw, 78px);
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55));
  z-index: 60;
  animation: lc-float 3s ease-in-out infinite;
}

/* Positions & rotations – mimic the scattered cans from the reference */
.lc__pin--1 { top: 8%;   right: 38%; transform: rotate(-18deg); animation-delay: 0s;    }
.lc__pin--2 { top: 14%;  right: 22%; transform: rotate( 10deg); animation-delay: 0.5s;  }
.lc__pin--3 { top: 42%;  right: 30%; transform: rotate(-8deg);  animation-delay: 1s;    }
.lc__pin--4 { top: 50%;  right: 12%; transform: rotate( 14deg); animation-delay: 1.5s;  }
.lc__pin--5 { top: 68%;  right: 38%; transform: rotate(-5deg);  animation-delay: 0.75s; }

@keyframes lc-float {
  0%, 100% { translate: 0 0; }
  50%       { translate: 0 -10px; }
}

/* Mobile — align with JS mobile breakpoint */
@media (max-width: 860px) {
  .lc { min-height: auto; padding-bottom: 3rem; }
  .lc__pin { width: 44px; }
  .lc__pin--1 { top: 5%;  right: 55%; }
  .lc__pin--2 { top: 10%; right: 38%; }
  .lc__pin--3 { top: 35%; right: 48%; }
  .lc__pin--4 { top: 42%; right: 25%; }
  .lc__pin--5 { top: 60%; right: 52%; }
}

/* ════════════════════════════════════════════════════════════
   GLOBAL MOBILE OPTIMIZATION  (index page)
   ════════════════════════════════════════════════════════════ */

/* ── Mobile (≤ 860px) — hero height/layout ───────────── */
@media (max-width: 860px) {
  .hero-block           { height: auto; min-height: 100svh; min-height: 100dvh; overflow: visible; }
  /* Let vertical scroll pass through the full-screen video (iOS often traps touch on <video>) */
  .video-layer,
  .video-layer__media   { pointer-events: none; }
}

/* ── Mobile (≤ 640px) ────────────────────────────────── */
@media (max-width: 640px) {
  /* Header */
  .header               { padding: 0.85rem 1.2rem; }
  .header__logo img     { height: 44px; }
  .header__cta          { display: none; }   /* keep hamburger + lang btn */

  /* Hero */
  .hero-reveal          { font-size: clamp(0.95rem, 4vw, 1.4rem); letter-spacing: -1px; }
  .hero-title           { font-size: clamp(3.2rem, 13vw, 7rem); }
  .hero-highlight       { width: 92%; min-width: unset; padding: 0.7rem 1.4rem; }
  .hero-content         { padding: 7rem 1.2rem 4rem; }

  /* About / typewriter */
  .section              { padding: 3rem 1.2rem 8rem; }
  .section__title       { font-size: clamp(2.8rem, 12vw, 5rem); }
  .section__highlight-box { font-size: clamp(1.8rem, 9vw, 4rem); white-space: normal; padding: 0.1em 0.4em; }
  .section__cta         { display: block; text-align: center; }

  /* Spotlight */
  .sp__inner            { padding: 2rem 1.2rem; }
  .sp__rhs              { padding: 1.5rem 0 0; }

  /* Location */
  .lc__content          { padding: 2rem 1.2rem; max-width: 100%; }
  .lc__btn              { display: block; text-align: center; }
  .lc__pin--1, .lc__pin--2, .lc__pin--3 { display: none; }  /* reduce clutter */

  /* Reviews (homepage cards) */
  .rv__card             { width: 86vw !important; }

  /* Features */
  .ft__bar              { width: 96vw; }
}

/* ── Small phone (≤ 420px) ───────────────────────────── */
@media (max-width: 420px) {
  .hero-title           { font-size: clamp(2.8rem, 11vw, 4rem); }
  .section__title       { font-size: clamp(2.4rem, 11vw, 4rem); }
  .sp__stats            { gap: 0.6rem; }
  .sp__stat             { flex: 0 0 46%; }
  .lc__hl-plain,
  .lc__mark             { font-size: clamp(2rem, 9vw, 3.5rem); }
}

/* ════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER  +  RTL SUPPORT
   ════════════════════════════════════════════════════════════ */

/* ── Lang switcher button ───────────────────────────────── */
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 2px solid #2d1810;
  background: transparent;
  color: #2d1810;
  font-family: "Oswald", "Cairo", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.lang-btn:hover {
  background: #2d1810;
  color: #f5f0e8;
}

/* ════════════════════════════════════════════════════════════
   ARABIC FONT  –  Cairo for ALL text in Arabic mode
   (specificity 0-1-1 beats direct element rules like 0-1-0)
   ════════════════════════════════════════════════════════════ */
[lang="ar"] body,
[lang="ar"] p,
[lang="ar"] span,
[lang="ar"] a,
[lang="ar"] button,
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3,
[lang="ar"] .hero-reveal,
[lang="ar"] .hero-title,
[lang="ar"] .hero-highlight__text,
[lang="ar"] .hero-cta,
[lang="ar"] .header__cta,
[lang="ar"] .nav-overlay__link,
[lang="ar"] .nav-overlay__social,
[lang="ar"] .section__line,
[lang="ar"] .section__cta,
[lang="ar"] .section__highlight-box,
[lang="ar"] .sv__heading,
[lang="ar"] .sv__badge,
[lang="ar"] .sv__btn,
[lang="ar"] .sv__card-name,
[lang="ar"] .sp__eyebrow,
[lang="ar"] .sp__headline,
[lang="ar"] .sp__hl-line,
[lang="ar"] .sp__copy,
[lang="ar"] .sp__bullets,
[lang="ar"] .sp__bullets li,
[lang="ar"] .sp__bullets li strong,
[lang="ar"] .sp__cta,
[lang="ar"] .sp__stat-label,
[lang="ar"] .sp__stat-value,
[lang="ar"] .ft__text,
[lang="ar"] .rv__bg-text,
[lang="ar"] .rv__quote,
[lang="ar"] .rv__name,
[lang="ar"] .rv__cta,
[lang="ar"] .lc__headline,
[lang="ar"] .lc__desc,
[lang="ar"] .lc__btn,
[lang="ar"] .lc__mark {
  font-family: "Cairo", system-ui, sans-serif;
  letter-spacing: 0;   /* Arabic doesn't use letter-spacing */
}

/* ════════════════════════════════════════════════════════════
   RTL LAYOUT FIXES
   ════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────── */
[dir="rtl"] .header {
  flex-direction: row-reverse;
}
[dir="rtl"] .header__menu {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

/* ── Nav overlay ────────────────────────────────────────── */
/* Flip clip-path reveal so panels slide in from correct side */
[dir="rtl"] .nav-overlay__lhs {
  clip-path: inset(0 0 0 100%);
}
[dir="rtl"] .nav-overlay.is-open .nav-overlay__lhs {
  clip-path: inset(0 0 0 0%);
}
[dir="rtl"] .nav-overlay__rhs {
  clip-path: inset(0 100% 0 0);
}
[dir="rtl"] .nav-overlay.is-open .nav-overlay__rhs {
  clip-path: inset(0 0% 0 0);
}
[dir="rtl"] .nav-overlay__close {
  right: auto;
  left: 2rem;
}
[dir="rtl"] .nav-overlay__lhs {
  text-align: right;
}

/* ── Scroll-progress (grows from inline-start) ───────────── */
[dir="rtl"] .scroll-progress {
  left: auto;
  right: 0;
}

/* ── Hero ────────────────────────────────────────────────── */
[dir="rtl"] .hero-content {
  direction: rtl;
}

/* ── About section ───────────────────────────────────────── */
[dir="rtl"] .section__content {
  text-align: right;
}
[dir="rtl"] .section__highlight-box {
  margin-inline-start: 0;
}

/* ── Services section ────────────────────────────────────── */
[dir="rtl"] .sv__lhs {
  text-align: right;
}

/* ── Spotlight section ───────────────────────────────────── */
[dir="rtl"] .sp__inner {
  direction: rtl;
}
/* RHS column: flip border and padding to inline-start side */
[dir="rtl"] .sp__rhs {
  padding-left:  0;
  padding-right: 2.5rem;
  border-left:   none;
  border-right:  2px solid rgba(90, 50, 20, 0.15);
}
/* LHS column: flip padding */
[dir="rtl"] .sp__lhs {
  padding-right: 0;
  padding-left:  2rem;
}
/* Bullet arrow: flip from left side to right side */
[dir="rtl"] .sp__bullets li {
  padding-left:  0;
  padding-right: 1.3rem;
}
[dir="rtl"] .sp__bullets li::before {
  content: "←";
  left:  auto;
  right: 0;
}
/* sp__mark tilt origin */
[dir="rtl"] .sp__mark {
  transform-origin: right center;
}
[dir="rtl"] .sp__stats {
  direction: rtl;
}

/* ── Features bars ───────────────────────────────────────── */
[dir="rtl"] .ft__bar {
  direction: rtl;
}

/* ── Reviews ─────────────────────────────────────────────── */
/* bg-text mirrors to the left side in RTL */
[dir="rtl"] .rv__bg-text {
  right: auto;
  left: 2vw;
  text-align: left;
}
[dir="rtl"] .rv__card {
  text-align: right;
  direction: rtl;
}
[dir="rtl"] .rv__author {
  flex-direction: row-reverse;
}

/* ── Location section ────────────────────────────────────── */
[dir="rtl"] .lc__content {
  left: auto;
  right: clamp(2rem, 6vw, 7rem);
  text-align: right;
}
/* Mirror favicon pins */
[dir="rtl"] .lc__pin--1 { right: auto; left: 38%; }
[dir="rtl"] .lc__pin--2 { right: auto; left: 22%; }
[dir="rtl"] .lc__pin--3 { right: auto; left: 30%; }
[dir="rtl"] .lc__pin--4 { right: auto; left: 12%; }
[dir="rtl"] .lc__pin--5 { right: auto; left: 38%; }