/* Self-hosted fonts (Inter + Rubik for multi-language support) */

/* Inter font (English / LTR languages) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Inter-Bold.woff2') format('woff2');
}

/* Rubik font (Hebrew / RTL languages) */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Rubik-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Rubik-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Rubik-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Rubik-Bold.woff2') format('woff2');
}
:root {
  /* Color Palette */
  --primary: #315C8C;
  --secondary: #A3342A;
  --accent: #D6A23A;
  --bg-light: #F3E7CF;
  --bg-dark: #2B2118;
  --text-dark: #2B2118;
  --text-light: #F3E7CF;
  --text-muted: #7A6A56;
  --border-light: #D8C6A7;
  --border-dark: #5A4635;
  --nav-bg: #F3E7CF;
  --nav-text: #2B2118;
  --nav-text-hover: #A3342A;

  /* Design System Tokens */
  --radius-sm: 4px;
  --radius-card: 6px;
  --radius-btn: 6px;
  --radius-img: 6px;
  --radius-badge: 4px;
  --radius-input: 6px;
  --shadow-subtle: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-card: 0 8px 30px rgba(0,0,0,0.14);
  --shadow-elevated: 0 8px 30px rgba(0,0,0,0.14);
  --shadow-btn-hover: 0 8px 30px rgba(0,0,0,0.14);
  --spacing-section: 96px;
  --spacing-section-mobile: 64px;
  --spacing-card-padding: 32px;
  --spacing-card-gap: 32px;
  --spacing-element-gap: 24px;
  --transition-default: all 0.3s ease;
  --transition-hover: all 0.3s ease;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #C8963E 0%, #D4A853 50%, #C8963E 100%);
  --gradient-goldShine: linear-gradient(90deg, #B8832E 0%, #D4A853 40%, #E8C070 60%, #C8963E 100%);
  --gradient-secondary: linear-gradient(180deg, #1A2744 0%, #0F1A30 100%);
  --gradient-goldAccent: linear-gradient(135deg, #D4A853 0%, #C8963E 100%);
  --gradient-darkSection: linear-gradient(180deg, #1A2744 0%, #152038 100%);
  --gradient-overlayDark: linear-gradient(to bottom, rgba(15,26,48,0.3) 0%, rgba(15,26,48,0.75) 100%);
  --gradient-lightSection: linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  --gradient-overlayLight: linear-gradient(to bottom, rgba(245,239,224,0.0) 0%, rgba(245,239,224,0.9) 100%);
}

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

html {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  direction: rtl;
}

body {
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-family: 'Rubik', sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Rubik', sans-serif;
  color: var(--text-dark);
  text-wrap: balance;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}

h2 {
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}

h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}

p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
}

small, .small-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

a {
  color: var(--accent, var(--primary));
  text-decoration: none;
  transition: var(--transition-default);
}

a:hover {
  color: var(--secondary);
}

.site-footer a {
  color: inherit;
}

/* Tablet Typography */
@media (max-width: 1024px) {
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 20px !important; }
  p  { font-size: 15px !important; }
}

/* Mobile Typography */
@media (max-width: 768px) {
  h1 {
    font-size: 28px !important;
    margin-bottom: 1rem !important;
    margin-top: 0.5rem !important;
  }
  h2 {
    font-size: 22px !important;
    margin-bottom: 1rem !important;
    margin-top: 0.5rem !important;
  }
  h3 {
    font-size: 18px !important;
    margin-bottom: 1rem !important;
    margin-top: 0.5rem !important;
  }
  p  { font-size: 14px !important; }
}

/* Utility Classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-btn);
  padding: 16px 32px;
  font-weight: 600;
  text-transform: none;
  transition: var(--transition-hover);
  cursor: pointer;
  border: 2px solid transparent;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

.btn:hover {
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--primary);
  color: var(--text-light);
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: #274a70;
  border-color: #274a70;
  color: var(--text-light);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--text-light);
  border-color: var(--secondary);
}

.btn-secondary:hover {
  background-color: #8a2c23;
  border-color: #8a2c23;
  color: var(--text-light);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--text-light);
}

.btn-accent {
  background-color: var(--accent);
  color: var(--text-dark);
  border-color: var(--accent);
}

.btn-accent:hover {
  background-color: #c08e2e;
  border-color: #c08e2e;
  color: var(--text-dark);
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

html[dir="rtl"] .whatsapp-float {
  right: 20px;
  left: auto;
}

html[dir="ltr"] .whatsapp-float,
html:not([dir]) .whatsapp-float {
  left: 20px;
  right: auto;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  color: white;
}

/* Responsive Spacing Utilities */
@media (max-width: 768px) {
  :root {
    --spacing-section: var(--spacing-section-mobile);
    --spacing-card-padding: 24px;
    --spacing-card-gap: 24px;
    --spacing-element-gap: 16px;
  }

  .btn {
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* Focus Styles for Accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Selection Styling */
::selection {
  background-color: var(--accent);
  color: var(--text-dark);
}

::-moz-selection {
  background-color: var(--accent);
  color: var(--text-dark);
}

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

/* Navbar Styles */
:root {
  --primary: #315C8C;
  --secondary: #A3342A;
  --accent: #D6A23A;
  --bg-light: #F3E7CF;
  --bg-dark: #2B2118;
  --text-dark: #2B2118;
  --text-light: #F3E7CF;
  --text-muted: #7A6A56;
  --border-light: #D8C6A7;
  --border-dark: #5A4635;
  --nav-bg: #F3E7CF;
  --nav-text: #2B2118;
  --nav-text-hover: #A3342A;
}

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

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--nav-bg);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  border-bottom: 1px solid var(--border-light);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
  flex-wrap: wrap;
}

.nav-brand {
  display: flex;
  align-items: center;
}

.logo-link {
  display: block;
}

.logo {
  max-height: 40px;
  height: auto;
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: var(--nav-text-hover);
  transition: width 0.3s ease;
}

.nav-menu a:hover {
  color: var(--nav-text-hover);
}

.nav-menu a:hover::after {
  width: 100%;
}

.nav-cta-container {
  margin-left: auto; /* pushes CTA to the left end in RTL flex */
}

.nav-cta-btn {
  display: inline-block;
  background-color: var(--primary);
  color: #ffffff;
  border-radius: 6px;
  padding: 16px 32px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height: 1;
}

.nav-cta-btn:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
  background-color: #2a4f7a; /* slightly darker primary on hover */
}

/* Default: hide mobile elements */
.mobile-toggle,
.phone-header-btn {
  display: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .navbar {
    padding: 0.75rem 1rem;
  }

  .nav-container {
    flex-wrap: wrap;
    gap: 0;
  }

  .mobile-toggle,
  .phone-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--nav-text);
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
  }

  .phone-header-btn {
    order: 1;
  }

  .mobile-toggle {
    order: 2;
  }

  .nav-brand {
    order: 0;
  }

  /* Menu hidden by default */
  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: var(--nav-bg);
    padding: 1rem 0;
    gap: 1rem;
    order: 3;
    border-top: 1px solid var(--border-light);
  }

  /* Active menu state (toggled by JS, included for completeness) */
  .nav-menu.active {
    display: flex;
  }

  /* Toggle icon switching */
  .mobile-toggle .hamburger-icon {
    display: block;
  }

  .mobile-toggle .close-icon {
    display: none;
  }

  .mobile-toggle.active .hamburger-icon {
    display: none;
  }

  .mobile-toggle.active .close-icon {
    display: block;
  }

  .nav-cta-container {
    margin-left: 0;
    margin-right: auto;
    order: 4;
    width: 100%;
    text-align: right;
    padding: 0.5rem 0;
  }

  .nav-cta-btn {
    display: inline-block;
    width: auto;
    padding: 12px 24px;
  }
}
:root {
  --primary: #315C8C;
  --secondary: #A3342A;
  --accent: #D6A23A;
  --bg-light: #F3E7CF;
  --bg-dark: #2B2118;
  --text-dark: #2B2118;
  --text-light: #F3E7CF;
  --text-muted: #7A6A56;
  --border-light: #D8C6A7;
  --border-dark: #5A4635;
  --nav-bg: #F3E7CF;
  --nav-text: #2B2118;
  --nav-text-hover: #A3342A;
}

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

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--nav-bg);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  border-bottom: 1px solid var(--border-light);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
  flex-wrap: wrap;
}

.nav-brand {
  display: flex;
  align-items: center;
}

.logo-link {
  display: block;
}

.logo {
  max-height: 40px;
  height: auto;
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: var(--nav-text-hover);
  transition: width 0.3s ease;
}

.nav-menu a:hover {
  color: var(--nav-text-hover);
}

.nav-menu a:hover::after {
  width: 100%;
}

.nav-cta-container {
  margin-left: auto; /* pushes CTA to the left end in RTL flex */
}

.nav-cta-btn {
  display: inline-block;
  background-color: var(--primary);
  color: #ffffff;
  border-radius: 6px;
  padding: 16px 32px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height: 1;
}

.nav-cta-btn:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
  background-color: #2a4f7a; /* slightly darker primary on hover */
}

/* Default: hide mobile elements */
.mobile-toggle,
.phone-header-btn {
  display: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .navbar {
    padding: 0.75rem 1rem;
  }

  .nav-container {
    flex-wrap: wrap;
    gap: 0;
  }

  .mobile-toggle,
  .phone-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--nav-text);
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
  }

  .phone-header-btn {
    order: 1;
  }

  .mobile-toggle {
    order: 2;
  }

  .nav-brand {
    order: 0;
  }

  /* Menu hidden by default */
  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: var(--nav-bg);
    padding: 1rem 0;
    gap: 1rem;
    order: 3;
    border-top: 1px solid var(--border-light);
  }

  /* Active menu state (toggled by JS, included for completeness) */
  .nav-menu.active {
    display: flex;
  }

  /* Toggle icon switching */
  .mobile-toggle .hamburger-icon {
    display: block;
  }

  .mobile-toggle .close-icon {
    display: none;
  }

  .mobile-toggle.active .hamburger-icon {
    display: none;
  }

  .mobile-toggle.active .close-icon {
    display: block;
  }

  .nav-cta-container {
    margin-left: 0;
    margin-right: auto;
    order: 4;
    width: 100%;
    text-align: right;
    padding: 0.5rem 0;
  }

  .nav-cta-btn {
    display: inline-block;
    width: auto;
    padding: 12px 24px;
  }
}


/* ============================================
   NAVBAR LAYOUT - POST-GENERATION FIXES
   Structural layout only - colors from Claude
   ============================================ */

/* Base navbar styles - structural only, colors from AI */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  /* Background color is set by Claude's CSS - don't override */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ============================================
   DESKTOP LAYOUT (>768px)
   ============================================ */

/* Nav container - constrains max width and provides padding */
.nav-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 70px;
}

/* Logo styling (desktop) — mobile logo stays at 110px/35px, do not adjust */
.logo {
  max-height: 40px;
  max-width: 160px !important;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.logo:hover {
  opacity: 0.8;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.logo-link:focus {
  outline: none;
}

/* Remove browser default dark focus box on mouse-click; preserve for keyboard (:focus-visible). */
.navbar a:focus:not(:focus-visible),
.navbar button:focus:not(:focus-visible),
.nav-menu a:focus:not(:focus-visible) {
  outline: none;
}
.navbar a:focus-visible,
.navbar button:focus-visible,
.nav-menu a:focus-visible {
  outline: 2px solid var(--primary-color, var(--primary, #315C8C));
  outline-offset: 2px;
}

/* Nav brand container */
.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

/* Navigation menu - positioned adjacent to logo */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}

.nav-menu li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-menu > li > a,
.nav-menu > .nav-item > a {
  /* inline-flex + align-items:center + line-height:1 vertically centers the
     link TEXT within the navbar row, matching the logo <img> and the
     .nav-cta-btn. Without this the link stays display:inline and inherits the
     site's body line-height (e.g. the Design Personality fluid 1.7), which
     pins the glyphs to the TOP of the padded inline box — so the menu sits
     visibly higher than the logo/CTA even though every bounding box is
     geometrically centered. Guards against that optical misalignment. */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 0.65rem;
  white-space: nowrap;
}

/* Nav-text COLOR override is scoped to exclude the CTA pill. The CTA carries
   its own background (--primary / a gradient) + intended on-primary text color;
   forcing the generic nav-text colour onto it produced the "invisible CTA"
   bug — e.g. var(--text-dark) text on a --primary (dark) button = same colour.
   The layout block above still applies to the CTA so vertical alignment with
   the logo/links is preserved (see the dedup-guard test). */
.nav-menu > li > a:not(.nav-cta-btn):not(.cta-button),
.nav-menu > .nav-item > a:not(.nav-cta-btn):not(.cta-button) {
  color: var(--nav-text, var(--text-dark)) !important;
}

.nav-menu > li > a:not(.nav-cta-btn):not(.cta-button):hover,
.nav-menu > .nav-item > a:not(.nav-cta-btn):not(.cta-button):hover {
  color: var(--nav-text-hover, var(--secondary)) !important;
}

/* CTA pill label — WIN the specificity battle against the AI's
   ".nav-menu li a { color: var(--nav-text) }" (0,2,1), which otherwise clobbers
   the pill's own ".nav-cta-btn { color }" (0,1,0) and renders the label
   invisible on the filled pill until hover. These selectors are (0,3,2)+ and
   carry !important, so they beat both the base AND :hover nav-link colour rules
   in every state. Colour is the AI's own pill colour (or a contrast pick). */
.navbar .nav-menu li a.nav-cta-btn,
.navbar .nav-menu li a.cta-button,
.navbar .nav-menu .nav-cta-item a,
.navbar .nav-menu .nav-cta-mobile-item a,
.navbar a.nav-cta-btn,
.navbar a.cta-button {
  color: #ffffff !important;
}

/* CTA Container - pushed to end of navbar */
.nav-cta-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  align-self: center;
  height: auto;
  max-height: none;
  padding-top: 0;
  padding-bottom: 0;
}

.nav-cta-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Search container inside CTA area — vertically center to match CTA button */
.nav-cta-container .zappy-search-container {
  align-self: center;
}
.nav-cta-container p {
  margin: 0 !important;
}

/* CTA button - prevent stretching to fill navbar height.
   AI CSS provides colors/gradients/etc - we only constrain sizing.
   display: inline-flex + max-height: 44px keeps it as a compact pill. */
.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: auto;
  max-height: 44px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
}

/* ============================================
   LTR DESKTOP LAYOUT (English, Spanish, French)
   ============================================ */
html[dir="ltr"] .nav-container,
html[lang="en"] .nav-container,
html[lang="es"] .nav-container,
html[lang="fr"] .nav-container {
  justify-content: flex-start;
}

html[dir="ltr"] .nav-menu,
html[lang="en"] .nav-menu,
html[lang="es"] .nav-menu,
html[lang="fr"] .nav-menu {
  margin-left: 0;
  margin-right: 0;
}

html[dir="ltr"] .nav-cta-container,
html[lang="en"] .nav-cta-container,
html[lang="es"] .nav-cta-container,
html[lang="fr"] .nav-cta-container {
  margin-left: auto;
  margin-right: 0;
}

/* ============================================
   RTL DESKTOP LAYOUT (Hebrew, Arabic)
   ============================================ */
html[dir="rtl"] .nav-container,
html[lang="he"] .nav-container,
html[lang="ar"] .nav-container {
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* CTA on the left in RTL */
html[dir="rtl"] .nav-cta-container,
html[lang="he"] .nav-cta-container,
html[lang="ar"] .nav-cta-container {
  order: -1;
  margin: 0;
}

/* Wrapper groups menu and logo together on the right */
html[dir="rtl"] .nav-right-group,
html[lang="he"] .nav-right-group,
html[lang="ar"] .nav-right-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  order: 1;
  flex: 1;
  min-width: 0;
  flex-direction: row-reverse;
}

/* Within wrapper: Logo on far right, menu to its left */
html[dir="rtl"] .nav-right-group .nav-brand,
html[lang="he"] .nav-right-group .nav-brand,
html[lang="ar"] .nav-right-group .nav-brand {
  order: 2;
}

html[dir="rtl"] .nav-right-group .nav-menu,
html[lang="he"] .nav-right-group .nav-menu,
html[lang="ar"] .nav-right-group .nav-menu {
  order: 1;
}

/* ============================================
   DROPDOWN MENUS (Desktop)
   ============================================ */
.nav-dropdown {
  position: relative;
}

.dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.65rem;
  color: var(--nav-text, var(--text-dark)) !important;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.dropdown-toggle:hover {
  color: var(--nav-text-hover, var(--secondary)) !important;
}

.dropdown-arrow {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown {
  overflow: visible !important;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--bg-light, #ffffff);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 8px 0;
  z-index: 100001;
  list-style: none;
  margin: 0;
}

html[dir="rtl"] .dropdown-menu,
html[lang="he"] .dropdown-menu,
html[lang="ar"] .dropdown-menu {
  right: 0;
  left: auto;
}

html[dir="ltr"] .dropdown-menu,
html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .dropdown-menu {
  left: 0;
  right: auto;
}

@media (min-width: 769px) {
  .nav-dropdown:hover > .dropdown-menu {
    display: block;
  }
}

.dropdown-menu li {
  margin: 0;
  padding: 0;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
  font-size: 0.9em;
  color: var(--text-dark, #1a1a1a) !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-menu li a:hover {
  background: rgba(128,128,128,0.1);
  color: var(--nav-text-hover, var(--accent, var(--primary))) !important;
}

/* Desktop: Hide mobile-only elements */
@media (min-width: 769px) {
  .mobile-toggle,
  .phone-header-btn {
    display: none !important;
  }
  
  /* Hide Contact in nav-menu on desktop (it shows in CTA container instead) */
  .nav-menu .mobile-contact-link {
    display: none !important;
  }
  
  /* When .nav-right-group wrapper is absent, the nav-container has 3 direct
     children (brand, menu, CTA) with space-between. flex:1 makes the menu
     fill the gap, and justify-content:flex-start pushes items toward the
     logo side instead of centering them in the available space. */
  .nav-menu {
    flex: 1 !important;
    justify-content: flex-start !important;
  }
}

/* ============================================
   MOBILE RESPONSIVE (≤768px)
   ============================================ */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    min-height: 70px !important;
  }

  /* Reset nav-container for mobile */
  /* CRITICAL: Reset position properties to prevent conflict with AI-generated mobile CSS */
  /* Some AI generations set .nav-container to position:fixed for slide-out menus, */
  /* position:relative is needed so .nav-brand (position:absolute) centers within it */
  .nav-container {
    padding: 0.75rem 1rem;
    gap: 0;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 70px !important; /* Ensure height for absolutely positioned mobile buttons */
    width: 100% !important;
  }
  
  /* Show mobile elements - positioned as direct children of navbar */
  .mobile-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 36px !important;
    margin-top: auto;
    margin-bottom: auto;
    transform: none !important;
    left: 12px; /* LTR default - hamburger on left */
    right: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
    width: 36px !important;
    color: var(--nav-text, var(--text-dark)) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .phone-header-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 36px !important;
    margin-top: auto;
    margin-bottom: auto;
    transform: none !important;
    right: 12px; /* LTR default - phone on right */
    left: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
    width: 36px !important;
    color: var(--nav-text, var(--text-dark)) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Ensure logo-link is centered */
  .logo-link, .nav-brand a {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  .mobile-toggle svg,
  .phone-header-btn svg {
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    transition: opacity 0.3s ease;
  }
  
  .mobile-toggle svg path,
  .phone-header-btn svg path {
    stroke: currentColor !important;
  }
  
  .mobile-toggle img,
  .phone-header-btn img {
    width: 24px !important;
    height: 24px !important;
    /* Filter removed - preserve original image colors */
    /* ColorContrastService will handle contrast adjustments */
  }
  
  .mobile-toggle:hover svg,
  .phone-header-btn:hover svg {
    opacity: 0.8;
  }

  html[data-zappy-site-type="ecommerce"] .phone-header-btn,
  body[data-zappy-site-type="ecommerce"] .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] header .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] nav .phone-header-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  /* Remove default button styles */
  .mobile-toggle:focus,
  .mobile-toggle:active,
  .phone-header-btn:focus,
  .phone-header-btn:active {
    outline: none;
    border: none;
    box-shadow: none;
  }
  
  /* Center logo on mobile - applies to both LTR and RTL */
  /* RTL selectors added for higher specificity to override desktop RTL rules */
  /* IMPORTANT: Do NOT use margin shorthand (margin: 0 auto) — it resets margin-top
     which breaks AI centering hacks (top:50% + margin-top:-Npx).
     Use explicit left/right + transform for robust vertical centering. */
  .nav-brand,
  html[dir="rtl"] .nav-brand,
  html[lang="he"] .nav-brand,
  html[lang="ar"] .nav-brand,
  html[dir="rtl"] .nav-right-group .nav-brand,
  html[lang="he"] .nav-right-group .nav-brand,
  html[lang="ar"] .nav-right-group .nav-brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    text-align: center;
    order: 0 !important;
  }
  
  /* Mobile logo size: fixed at 35px/110px — do not adjust, especially for e-commerce/catalog sites */
  .logo {
    max-height: 35px !important;
    max-width: 110px !important;
  }
  
  /* Hide RTL wrapper on mobile */
  .nav-right-group {
    display: contents !important;
  }
  
  /* Hide CTA container on mobile - Contact will be in hamburger menu */
  .nav-cta-container {
    display: none !important;
  }
  
  /* Mobile menu - full-screen overlay (hidden by default) */
  /* CRITICAL: display:flex + flex-direction:column carry !important so they win
     over desktop row layout AND over any inline display:block the preview/runtime
     scripts may set (they toggle the .active class as the source of truth, and a
     stylesheet !important beats a non-important inline style). Visibility is the
     hide mechanism so the panel can fade/slide via opacity + transform. */
  .nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: calc(100vh - 70px); /* fallback for browsers without dvh */
    height: calc(100dvh - 70px);
    /* Mobile menu is position:fixed so it CANNOT inherit background from navbar.
       When --nav-bg is transparent (hero-overlay navbars), the menu would be invisible.
       Always use a solid background derived from the palette. */
    background-color: var(--bg-light, #ffffff) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
    z-index: 999;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Slide/fade reveal */
    
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0.32s;
  }

  .nav-menu.active {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s;
  }

  .nav-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(128, 128, 128, 0.12);
  }

  /* Show mobile-contact-link in hamburger menu */
  .nav-menu .mobile-contact-link {
    display: block !important;
  }

  /* Staggered reveal of menu items when the overlay opens */
  @keyframes zappyNavItemIn {
    from {  transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .nav-menu.active > li {
    animation: zappyNavItemIn 0.4s ease both;
  }
  .nav-menu.active > li:nth-child(1) { animation-delay: 0.04s; }
  .nav-menu.active > li:nth-child(2) { animation-delay: 0.09s; }
  .nav-menu.active > li:nth-child(3) { animation-delay: 0.14s; }
  .nav-menu.active > li:nth-child(4) { animation-delay: 0.19s; }
  .nav-menu.active > li:nth-child(5) { animation-delay: 0.24s; }
  .nav-menu.active > li:nth-child(6) { animation-delay: 0.29s; }
  .nav-menu.active > li:nth-child(7) { animation-delay: 0.34s; }
  .nav-menu.active > li:nth-child(8) { animation-delay: 0.39s; }
  @media (prefers-reduced-motion: reduce) {
    .nav-menu {
      transition: opacity 0.001s linear, visibility 0s;
      transform: none;
    }
    .nav-menu.active { transform: none !important; }
    .nav-menu.active > li { animation: none !important; }
  }

  /* Large centered links for the overlay (overrides desktop left-align) */
  html[dir="ltr"] .nav-menu a,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .nav-menu a {
    text-align: center !important;
  }

  .nav-menu a {
    display: block;
    padding: 18px 24px;
    width: 100%;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    text-align: center;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .nav-menu a:hover,
  .nav-menu a:focus-visible {
    color: var(--nav-text-hover, var(--accent, var(--primary))) !important;
    opacity: 0.95;
  }

  /* Prominent Contact CTA pill, pinned to the bottom of the overlay */
  .nav-menu .mobile-contact-link,
  .nav-menu .nav-cta-mobile-item {
    margin-top: auto;
    border-bottom: none !important;
    padding-top: 20px;
    animation-delay: 0.44s;
  }

  /* Prefixed with .navbar (specificity 0,4,0) + !important on layout props so
     this beats two higher-specificity rules that otherwise leak into the
     overlay and mis-place the pill:
       1. RTL "push CTA far left": html[lang="he"] .nav-cta-btn { margin-right:auto
          !important; margin-left:0 !important; order:0 !important } — shoves the
          pill to the left edge on RTL sites.
       2. .navbar .nav-menu.active > li > a { display:flex !important;
          width:100% !important } — forces flex over our display:block.
     Use symmetric auto margins + order:0 so the pill stays centered in BOTH
     LTR and RTL. */
  .navbar .nav-menu .mobile-contact-link .nav-cta-btn,
  .navbar .nav-menu .nav-cta-mobile-item .nav-cta-btn,
  .navbar #navMenu .mobile-contact-link .nav-cta-btn,
  .navbar #navMenu .nav-cta-mobile-item .nav-cta-btn {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    order: 0 !important;
    padding: 16px 28px;
    border-radius: 999px;
    background: var(--primary, var(--accent, #e85d2a)) !important;
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  }

  .navbar .nav-menu .mobile-contact-link .nav-cta-btn:hover,
  .navbar .nav-menu .mobile-contact-link .nav-cta-btn:focus-visible,
  .navbar .nav-menu .nav-cta-mobile-item .nav-cta-btn:hover,
  .navbar .nav-menu .nav-cta-mobile-item .nav-cta-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
    opacity: 1;
  }
  
  /* Mobile dropdown menus */
  .nav-dropdown {
    position: static;
  }
  
  .dropdown-toggle {
    display: flex;
    width: 100%;
    padding: 15px 30px;
    font-weight: 500;
    justify-content: space-between;
  }
  
  .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: rgba(128,128,128,0.06) !important;
    min-width: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: max-height 0.3s ease !important;
  }
  
  .nav-dropdown .dropdown-menu {
    display: block;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  .nav-dropdown.open > .dropdown-menu {
    display: block !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 0.5rem 0 !important;
  }
  
  .dropdown-menu li a {
    padding: 12px 30px 12px 50px !important;
    font-size: 0.9em;
  }
  
  html[dir="rtl"] .dropdown-menu li a,
  html[lang="he"] .dropdown-menu li a,
  html[lang="ar"] .dropdown-menu li a {
    padding: 12px 50px 12px 30px !important;
  }

  /* Mobile submenu links: use nav panel text color instead of desktop submenu color.
     Desktop submenu uses light bg + dark text, but mobile submenu is inline (transparent)
     within the nav panel which may be dark. Cannot use 'inherit' because the container
     chain (.sub-menu, li) has dark color — only nav <a> tags get light color explicitly. */
  .navbar .sub-menu li a,
  nav.navbar .sub-menu li a,
  .nav-menu .sub-menu a,
  .zappy-products-dropdown .sub-menu a,
  .sub-menu a {
    color: var(--nav-text, var(--text-dark)) !important;
    white-space: normal !important;
  }
  .mobile-submenu-toggle {
    color: var(--nav-text, var(--text-dark)) !important;
  }

  /* Force sub-menu hidden by default on mobile */
  .navbar .zappy-products-dropdown .sub-menu,
  .navbar .zappy-products-dropdown > .sub-menu {
    display: none !important;
    position: static !important;
    max-height: 0 !important;
    overflow: hidden !important;
    
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    transform: none !important;
  }
  /* Disable hover-triggered dropdowns on mobile — only open via click (.open class) */
  .navbar .zappy-products-dropdown:hover .sub-menu,
  .navbar .zappy-products-dropdown:hover > .sub-menu,
  .navbar .zappy-products-dropdown:focus-within .sub-menu,
  .navbar .zappy-products-dropdown:focus-within > .sub-menu,
  .navbar .menu-item-has-children:hover > .sub-menu,
  .navbar .nav-dropdown:hover > .dropdown-menu {
    display: none !important;
    
    visibility: hidden !important;
    max-height: 0 !important;
    pointer-events: none !important;
  }
  .navbar .zappy-products-dropdown.open .sub-menu,
  .navbar .zappy-products-dropdown.open > .sub-menu,
  .navbar .zappy-products-dropdown .sub-menu.mobile-expanded,
  .navbar .zappy-products-dropdown > .sub-menu.mobile-expanded,
  .navbar .menu-item-has-children.open > .sub-menu,
  .navbar .menu-item-has-children > .sub-menu.mobile-expanded,
  .navbar .nav-dropdown.open > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    pointer-events: auto !important;
    position: static !important;
    overflow-y: visible !important;
    padding: 0.5rem 0 !important;
  }

  /* Prevent hero image fade gradient from bleeding over headline text below */
  /* The .image-fade-gradient has bottom: -30px which extends below parent; */
  /* on mobile stacked layout this overlaps the h1 text */
  .hero-image-column {
    overflow: hidden !important;
  }
  .image-fade-gradient {
    bottom: 0 !important;
  }
}

/* ============================================
   LTR POSITIONING (English, Spanish, French, etc.)
   For LTR mobile: hamburger on LEFT, phone on RIGHT
   Uses !important to override any inline styles
   ============================================ */
@media (max-width: 768px) {
  html[dir="ltr"] .mobile-toggle,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .mobile-toggle {
    left: 12px !important;
    right: auto !important;
  }
  
  html[dir="ltr"] .phone-header-btn,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .phone-header-btn {
    right: 12px !important;
    left: auto !important;
  }
  
  html[dir="ltr"] .nav-menu,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .nav-menu {
    left: 0 !important;
    right: auto !important;
  }
}

/* ============================================
   RTL POSITIONING (Hebrew, Arabic)
   For RTL mobile: hamburger on RIGHT, phone on LEFT
   (natural mirror of LTR layout)
   Uses !important to override any inline styles
   ============================================ */
@media (max-width: 768px) {
  html[dir="rtl"] .mobile-toggle,
  html[lang="he"] .mobile-toggle,
  html[lang="ar"] .mobile-toggle {
    left: auto !important;
    right: 12px !important;
  }
  
  html[dir="rtl"] .phone-header-btn,
  html[lang="he"] .phone-header-btn,
  html[lang="ar"] .phone-header-btn {
    left: 12px !important;
    right: auto !important;
  }
  
  html[dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    right: 0 !important;
    left: auto !important;
  }
  
  html[dir="rtl"] .nav-menu a,
  html[lang="he"] .nav-menu a,
  html[lang="ar"] .nav-menu a {
    text-align: right !important;
  }
  
  /* Hide desktop language switcher on mobile - hamburger menu handles it */
  /* High specificity to override stored CSS */
  .lang-switcher,
  .nav-cta-container .lang-switcher,
  .nav-container .lang-switcher,
  .navbar .lang-switcher,
  .navbar .nav-cta-container .lang-switcher {
    display: none !important;
  }
}

/* ============================================
   CLONED SITE NAVBAR FIXES
   For sites without nav-right-group wrapper
   ============================================ */

/* Force navbar to be truly full width.
   IMPORTANT: scoped to the SITE NAVBAR header ONLY. A bare "header" selector
   here used to clobber margin/padding on EVERY header on the page — including
   section headers (e.g. .section-header, .index-team-section__header,
   .index-features-section__intro). That made it impossible to add vertical
   spacing around any section header (the !important zero always won the
   cascade, even against AI-applied inline styles). The site navbar is always
   either header.navbar / header.site-header or a header that wraps the
   .navbar / .nav-container; section headers never carry those classes nor
   contain the navbar, so this scoping fixes the navbar without touching
   content headers. */
header.navbar,
header.site-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* :has() lives in its own block so a browser without :has() support drops
   ONLY this rule (a non-forgiving selector list is invalidated as a whole),
   leaving the header.navbar / header.site-header fallbacks above intact. */
header:has(> .navbar),
header:has(> nav.navbar),
header:has(> .nav-container),
header:has(> nav > .nav-container) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.navbar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

nav.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* iOS Safari fix: When the page has hidden horizontal overflow (which iOS
   does not clip on the <html> element), width: 100% / 100vw on a fixed
   element resolves to the visual viewport width, which can exceed the
   actual layout viewport. This pushes children positioned with right:0
   off-screen to the right.

   Two-part fix:
   1. Navbar — left:0 + right:0 + width:auto + overflow-x:clip anchors
      the navbar to the real layout viewport on all mobile browsers.
      overflow-x:clip (instead of hidden) prevents Safari from creating
      a scroll container that intercepts touch events on child elements.
   2. Mobile dropdown menu — position:fixed + right:0 on the menu still
      anchors to the iOS visual viewport (regardless of its navbar parent).
      We use a CSS variable --ios-viewport-gap, set by a runtime JS snippet
      (see ensureIOSNavbarGapFix in githubService) to
      (window.innerWidth - document.documentElement.clientWidth). Shifting
      the menu's 'right' by that gap lands it on the real layout-viewport
      right edge on iOS, and is a no-op on every other browser (gap=0).  */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    width: auto !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }
  /* Selector list mirrors the RTL selectors used elsewhere in Zappy CSS so
     this rule wins the cascade via equal-or-higher specificity. */
  #navMenu,
  .nav-menu,
  html[dir="rtl"] .nav-menu,
  html[dir="rtl"] .navbar .nav-menu,
  html[dir="rtl"] nav .nav-menu,
  html[dir="rtl"] header .nav-menu,
  html[dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .navbar .nav-menu,
  [dir="rtl"] nav .nav-menu,
  [dir="rtl"] header .nav-menu,
  [dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    position: fixed !important;
    top: var(--total-header-height, var(--zappy-navbar-bottom, 70px)) !important;
    right: var(--ios-viewport-gap, 0px) !important;
  }
}

/* Constrained nav-container - content limited to 1200px and centered */
.nav-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* RTL layout for cloned sites (without nav-right-group) */
/* Base RTL styles - apply to all screens */
html[dir="rtl"] .nav-container,
html[lang="he"] .nav-container,
html[lang="ar"] .nav-container {
  justify-content: space-between !important;
}

/* Logo stays on right in RTL - DESKTOP ONLY */
/* On mobile, logo should be centered (handled by mobile media query) */
@media (min-width: 769px) {
  html[dir="rtl"] .nav-brand,
  html[dir="rtl"] .logo-link,
  html[lang="he"] .nav-brand,
  html[lang="he"] .logo-link,
  html[lang="ar"] .nav-brand,
  html[lang="ar"] .logo-link {
    order: 2 !important;
    margin-left: 1.5rem !important;
  }
}

/* Base RTL nav-menu styles - display:flex but NOT flex-direction (that's desktop-only) */
html[dir="rtl"] .nav-menu,
html[lang="he"] .nav-menu,
html[lang="ar"] .nav-menu {
  order: 1 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* CTA button pushed to far left in RTL */
html[dir="rtl"] .cta-button,
html[dir="rtl"] a.cta-button,
html[dir="rtl"] .nav-cta-btn,
html[lang="he"] .cta-button,
html[lang="he"] a.cta-button,
html[lang="he"] .nav-cta-btn,
html[lang="ar"] .cta-button,
html[lang="ar"] a.cta-button,
html[lang="ar"] .nav-cta-btn {
  order: 0 !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* DESKTOP ONLY: Horizontal flex layout for RTL navbar - prevents breaking mobile vertical menu */
@media (min-width: 769px) {
  html[dir="rtl"] .nav-container,
  html[lang="he"] .nav-container,
  html[lang="ar"] .nav-container {
    flex-direction: row-reverse !important;
  }
  
  html[dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
    /* flex:1 ensures menu fills space between brand and CTA so items
       stay adjacent to the logo instead of centering when the
       .nav-right-group wrapper is absent (cloned sites, etc.).
       justify-content: flex-start pushes items toward the logo
       (in RTL, flex-start = right side, adjacent to the brand). */
    flex: 1 !important;
    justify-content: flex-start !important;
  }
}

/* ============================================
   END NAVBAR FIXES
   ============================================ */

/* Post-generation fix: Remove main element margin-top and padding-top */
main:not(.courses-page-main) { margin-top: 0 !important; padding-top: 0 !important; }


/* Footer Styles */
/* ===== FOOTER VARIABLES ===== */
.site-footer {
  --footer-bg: var(--bg-dark, #2B2118);
  --footer-text: var(--text-light, #F3E7CF);
  --footer-text-muted: rgba(243, 231, 207, 0.7);
  --footer-heading: var(--text-light, #F3E7CF);
  --footer-link: rgba(243, 231, 207, 0.75);
  --footer-link-hover: var(--accent, #D6A23A);
  --footer-border: var(--border-dark, #5A4635);
  --footer-bottom-bg: rgba(0, 0, 0, 0.25);
  --footer-social-bg: rgba(243, 231, 207, 0.08);
  --footer-social-hover-bg: var(--accent, #D6A23A);
  --footer-social-hover-color: var(--bg-dark, #2B2118);
  --footer-transition: all 0.3s ease;
  --footer-radius: 6px;
  --footer-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  
  background-color: var(--footer-bg);
  color: var(--footer-text);
  font-family: 'Rubik', sans-serif;
  line-height: 1.7;
  padding-top: 3.5rem;
  position: relative;
  overflow: hidden;
}

/* Subtle parchment texture overlay */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(243, 231, 207, 0.015) 2px,
      rgba(243, 231, 207, 0.015) 4px
    ),
    radial-gradient(ellipse at 20% 50%, rgba(214, 162, 58, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Route-line inspired top border */
.site-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #D6A23A) 0%, var(--accent, #D6A23A) 40%, transparent 40%, transparent 42%, var(--accent, #D6A23A) 42%, var(--accent, #D6A23A) 70%, transparent 70%, transparent 72%, var(--accent, #D6A23A) 72%, var(--accent, #D6A23A) 100%);
  z-index: 1;
}

/* ===== CONTAINER ===== */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

/* ===== GRID LAYOUT ===== */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2.5rem 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--footer-border);
  margin-bottom: 0;
}

/* ===== FOOTER COLUMNS ===== */
.footer-col {
  min-width: 0;
}

.footer-company-col {
  grid-column: span 1;
}

/* ===== LOGO ===== */
.logo {
  display: block;
  margin-bottom: 1.2rem;
  max-width: 150px;
  height: auto;
  filter: brightness(1.1);
}

.company-blurb {
  font-size: 0.95rem;
  color: var(--footer-text-muted);
  line-height: 1.8;
  margin: 0;
}

/* ===== HEADINGS ===== */
.footer-heading {
  color: var(--footer-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.2rem 0;
  position: relative;
  padding-bottom: 0.6rem;
  display: inline-block;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 2px;
  background-color: var(--accent, #D6A23A);
  border-radius: 1px;
}

/* ===== QUICK LINKS ===== */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.7rem;
}

.footer-links a {
  color: var(--footer-link);
  text-decoration: none;
  font-size: 0.95rem;
  transition: var(--footer-transition);
  display: inline-block;
  position: relative;
  padding-right: 0;
}

.footer-links a::before {
  content: '›';
  margin-left: 0.4rem;
  color: var(--accent, #D6A23A);
  transition: var(--footer-transition);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--footer-link-hover);
  transform: translateX(-4px);
}

.footer-links a:hover::before {
  margin-left: 0.7rem;
}

/* ===== CONTACT INFO ===== */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--footer-text-muted);
}

.contact-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  color: var(--accent, #D6A23A);
  font-size: 0.9rem;
  margin-top: 0.15rem;
}

.contact-text a {
  color: var(--footer-link);
  text-decoration: none;
  transition: var(--footer-transition);
  word-break: break-word;
}

.contact-text a:hover {
  color: var(--footer-link-hover);
}

/* ===== BUSINESS HOURS ===== */
.footer-hours {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--footer-border);
  font-size: 0.95rem;
  color: var(--footer-text-muted);
}

.footer-hours li:last-child {
  border-bottom: none;
}

.hours-day {
  font-weight: 600;
  color: var(--footer-text);
}

.hours-time {
  color: var(--accent, #D6A23A);
  font-weight: 500;
}

/* ===== SOCIAL MEDIA ===== */
.footer-social {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--footer-radius);
  background-color: var(--footer-social-bg);
  color: var(--footer-text);
  text-decoration: none;
  font-size: 1rem;
  transition: var(--footer-transition);
  border: 1px solid transparent;
}

.footer-social a:hover {
  background-color: var(--footer-social-hover-bg);
  color: var(--footer-social-hover-color);
  transform: translateY(-3px);
  box-shadow: var(--footer-shadow);
}

/* ===== BOTTOM BAR ===== */
.footer-bottom {
  background-color: var(--footer-bottom-bg);
  padding: 1.5rem 0;
  margin-top: 0;
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer-copyright {
  margin: 0;
  font-size: 0.9rem;
  color: var(--footer-text-muted);
}

.footer-legal-attribution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.footer-legal a {
  color: var(--footer-link);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--footer-transition);
}

.footer-legal a:hover {
  color: var(--footer-link-hover);
}

.legal-divider {
  color: var(--footer-border);
  font-size: 0.85rem;
  margin: 0 0.2rem;
}

.zappy-attribution {
  color: var(--footer-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  opacity: 0.7;
  transition: var(--footer-transition);
  white-space: nowrap;
}

.zappy-attribution:hover {
  color: var(--accent, #D6A23A);
  opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }
  
  .footer-company-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding-top: 2.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-company-col {
    grid-column: span 1;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal-attribution {
    flex-direction: column;
    gap: 0.8rem;
  }

  .footer-legal {
    justify-content: center;
  }

  .footer-hours li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
}

@media (max-width: 480px) {
  .footer-container {
    padding: 0 1.2rem;
  }

  .footer-social a {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
}


/* V2 Decorative Helpers — quote marks */
:root { --decorative-quote-color: var(--accent, #b48b59); --decorative-quote-font: var(--accent-font, var(--font-display, serif)); }
blockquote::before, .quote::before, [data-quote]::before {
  content: "\201C";
  font-family: var(--decorative-quote-font);
  color: var(--decorative-quote-color);
  font-size: 3.5em;
  line-height: 0;
  margin-right: 0.1em;
  vertical-align: -0.4em;
  display: inline-block;
}
blockquote::after, .quote::after, [data-quote]::after {
  content: "\201D";
  font-family: var(--decorative-quote-font);
  color: var(--decorative-quote-color);
  font-size: 3.5em;
  line-height: 0;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  display: inline-block;
}
html[dir="rtl"] blockquote::before, html[dir="rtl"] .quote::before, html[dir="rtl"] [data-quote]::before { content: "\201D"; }
html[dir="rtl"] blockquote::after, html[dir="rtl"] .quote::after, html[dir="rtl"] [data-quote]::after { content: "\201C"; }

/* V2 Decorative Helpers — section divider flourish */
hr.section-flourish, .section-flourish, [data-section-divider] {
  display: block;
  width: clamp(80px, 12vw, 180px);
  height: 2px;
  margin: 1.25rem auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--accent, var(--primary, #b48b59)) 30%, var(--accent, var(--primary, #b48b59)) 70%, transparent);
  border-radius: 999px;
  opacity: 0.85;
}

/* V2 Decorative Helpers — scroll cue (bottom-of-hero) */
.scroll-cue, [data-scroll-cue] {
  position: absolute;
  left: 50%;
  bottom: max(1.5rem, 4vh);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--accent-font, var(--font-display, sans-serif));
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted, currentColor);
  pointer-events: none;
  z-index: 2;
}
.scroll-cue svg, [data-scroll-cue] svg { width: 1rem; height: 1rem; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg, [data-scroll-cue] svg { animation: decorative-scroll-bounce 2s ease-in-out infinite; }
}
@keyframes decorative-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Footer contact alignment fix */
.footer-contact li > a { display: flex; align-items: flex-start; gap: inherit; }
/* RTL footer contact: icon on the right (start) side, text on the left */
html[dir="rtl"] .footer-contact li,
html[dir="rtl"] .site-footer .footer-contact li,
html[dir="rtl"] .site-footer .footer-col:nth-child(3) .footer-contact li {
  flex-direction: row !important;
  justify-content: flex-start !important;
}
html[dir="rtl"] .footer-contact .contact-icon { order: 0 !important; }
html[dir="rtl"] .footer-contact .contact-text { order: 1 !important; }
html[dir="rtl"] .footer-contact li > a { flex-direction: row !important; }
/* Sticky footer guard for short pages */
html, body { min-height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }
/* hero */
.index-hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background-color: var(--bg-dark);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  direction: rtl;
}

.index-hero-section .hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.index-hero-section .hero-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-image: 
    radial-gradient(ellipse at 30% 60%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.08) 100%),
    linear-gradient(to top, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.38) 35%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.05) 100%);
  background-color: transparent;
}

.index-hero-section .hero-content-group {
  position: relative;
  z-index: 10;
  max-width: 48%;
  width: 100%;
  padding: 32px;
  margin-inline-start: 8%;
  margin-top: 5%;
  color: var(--text-light);
  text-shadow: 0 2px 12px rgba(0,0,0,0.65), 0 4px 24px rgba(0,0,0,0.35);
}

.index-hero-section .hero-headline {
  font-family: 'Rubik', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0 0 20px 0;
  text-align: start;
  letter-spacing: 0.01em;
}

.index-hero-section .hero-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-light);
  margin: 0 0 32px 0;
  text-align: start;
  max-width: 90%;
}

.index-hero-section .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.index-hero-section .btn-primary {
  display: inline-block;
  background: var(--primary);
  color: #FFFFFF;
  padding: 16px 32px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  text-shadow: none;
}

.index-hero-section .btn-primary:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.index-hero-section .btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--text-light);
  padding: 16px 32px;
  border-radius: 6px;
  border: 2px solid var(--text-light);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}

.index-hero-section .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent);
  color: var(--accent);
  text-shadow: none;
  transform: translateY(-2px);
}

/* Bottom Divider */
.index-hero-section .index-hero-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.index-hero-section .index-hero-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .index-hero-section {
    min-height: 100vh;
    align-items: flex-end;
    padding-bottom: 80px;
  }

  .index-hero-section .hero-content-group {
    max-width: 100%;
    width: 100%;
    margin-inline-start: 0;
    margin-top: 0;
    padding: 24px 20px 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .index-hero-section .hero-headline {
    font-size: 2.25rem;
    text-align: center;
    max-width: 100%;
  }

  .index-hero-section .hero-subtitle {
    font-size: 1.15rem;
    text-align: center;
    max-width: 100%;
    margin-bottom: 28px;
  }

  .index-hero-section .hero-ctas {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
  }

  .index-hero-section .btn-primary,
  .index-hero-section .btn-secondary {
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 14px 24px;
  }

  .index-hero-section .hero-scrim {
    background-image: 
      radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.12) 100%),
      linear-gradient(to top, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.22) 75%, rgba(0,0,0,0.08) 100%);
  }
}
/* ZAPPY_POSTGEN_GUARD_HERO_FONT_CAP:index-hero */
.hero h1, .hero-section h1, [class*="hero-"] h1, [class~="hero"] h1, .hero .hero-title, .hero-title { font-size: 48px !important; line-height: 1.2 !important; }
@media (max-width: 1024px) {
  .hero h1, .hero-section h1, [class*="hero-"] h1, [class~="hero"] h1, .hero .hero-title, .hero-title { font-size: 36px !important; }
}
@media (max-width: 768px) {
  .hero h1, .hero-section h1, [class*="hero-"] h1, [class~="hero"] h1, .hero .hero-title, .hero-title { font-size: 28px !important; }
}


/* overview */
.index-overview-section {
    background: linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
    color: var(--text-dark);
    position: relative;
    overflow: visible;
    padding: 96px 32px 80px;
    direction: rtl;
}

.index-overview-section .overview-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 64px;
    position: relative;
    z-index: 2;
}

/* Intro Block */
.index-overview-section .overview-intro {
    flex: 1 1 40%;
    position: relative;
    padding-inline-end: 0;
}

.index-overview-section .overview-intro-title {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--text-dark);
    font-family: 'Rubik', sans-serif;
    margin-bottom: 24px;
    text-align: start;
}

.index-overview-section .overview-intro-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: #4A3728;
    font-family: 'Rubik', sans-serif;
    text-align: start;
    max-width: 480px;
}

.index-overview-section .overview-stamp {
    position: absolute;
    bottom: -40px;
    inset-inline-end: 20px;
    width: 120px;
    height: 120px;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

.index-overview-section .overview-stamp svg {
    width: 100%;
    height: 100%;
}

/* Content Island */
.index-overview-section .overview-island {
    flex: 1 1 55%;
    position: relative;
    min-width: 0;
}

.index-overview-section .overview-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 2;
}

.index-overview-section .overview-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 24px;
    align-items: flex-start;
    background: #F5EFE0;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(44,24,16,0.1);
    padding: 32px;
    border: 1px solid rgba(212,168,83,0.15);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.index-overview-section .overview-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

.index-overview-section .overview-card-route {
    width: 44px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.index-overview-section .overview-card-route svg {
    width: 40px;
    height: 60px;
}

.index-overview-section .overview-card-content {
    min-width: 0;
}

.index-overview-section .overview-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
    font-family: 'Rubik', sans-serif;
    margin-bottom: 8px;
    text-align: start;
}

.index-overview-section .overview-card-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: #4A3728;
    font-family: 'Rubik', sans-serif;
    text-align: start;
}

/* Map Fragment Backplate */
.index-overview-section .overview-map-fragment {
    position: absolute;
    bottom: -30px;
    inset-inline-end: -40px;
    width: 300px;
    height: 300px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12;
    overflow: hidden;
    border-radius: 6px;
}

.index-overview-section .overview-map-fragment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) sepia(30%) brightness(0.8);
}

/* Bottom Divider */
.index-overview-section .overview-divider-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
    z-index: 5;
}

.index-overview-section .overview-divider-wrapper svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .index-overview-section {
        padding: 64px 16px 80px;
    }

    .index-overview-section .overview-container {
        flex-direction: column;
        gap: 48px;
    }

    .index-overview-section .overview-intro {
        flex: 1 1 auto;
        padding-inline-end: 0;
    }

    .index-overview-section .overview-intro-text {
        max-width: 100%;
    }

    .index-overview-section .overview-stamp {
        position: static;
        margin-top: 24px;
        width: 100px;
        height: 100px;
        opacity: 0.6;
    }

    .index-overview-section .overview-island {
        flex: 1 1 auto;
        width: 100%;
    }

    .index-overview-section .overview-card {
        padding: 24px;
        grid-template-columns: 44px 1fr;
        gap: 16px;
    }

    .index-overview-section .overview-map-fragment {
        width: 200px;
        height: 200px;
        bottom: -20px;
        inset-inline-end: -20px;
        opacity: 0.08;
    }
}

/* services-preview */
.index-services-preview-section {
    position: relative;
    background-color: #1A2744;
    background-image:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D6A23A' fill-opacity='0.03'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #1A2744 0%, #0F1A30 100%);
    color: var(--text-light);
    padding: var(--spacing-section, 96px) 16px;
    padding-bottom: 140px;
    overflow: visible;
    direction: rtl;
}

.index-services-preview-section .services-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Section Header */
.index-services-preview-section .section-header {
    text-align: center;
    margin-bottom: 64px;
}

.index-services-preview-section .section-header h2 {
    font-family: 'Rubik', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--text-light);
    margin-bottom: 16px;
    text-align: center;
}

.index-services-preview-section .gold-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.index-services-preview-section .gold-divider svg {
    display: block;
    color: var(--accent);
}

.index-services-preview-section .section-header p {
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* Services Grid */
.index-services-preview-section .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-card-gap, 32px);
    margin-bottom: 56px;
}

/* Service Tile */
.index-services-preview-section .service-tile {
    background: rgba(245, 239, 224, 0.04);
    border-radius: var(--radius-card, 6px);
    overflow: hidden;
    border: 1px solid rgba(212, 168, 83, 0.15);
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
    min-width: 0;
}

.index-services-preview-section .service-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 56px rgba(44, 24, 16, 0.22);
    border-color: rgba(212, 168, 83, 0.35);
}

.index-services-preview-section .tile-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.index-services-preview-section .tile-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
    border-radius: 0;
    box-shadow: none;
}

.index-services-preview-section .service-tile:hover .tile-image-wrapper img {
    transform: scale(1.05);
}

/* Image Overlays - Byzantine Blue */
.index-services-preview-section .image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.index-services-preview-section .ceremonial-overlay {
    background: linear-gradient(180deg, rgba(26, 39, 68, 0.4) 0%, rgba(26, 39, 68, 0.7) 100%);
}

.index-services-preview-section .urban-overlay {
    background: linear-gradient(180deg, rgba(26, 39, 68, 0.3) 0%, rgba(26, 39, 68, 0.75) 100%);
}

.index-services-preview-section .corporate-overlay {
    background: linear-gradient(180deg, rgba(26, 39, 68, 0.35) 0%, rgba(26, 39, 68, 0.65) 100%);
}

.index-services-preview-section .educational-overlay {
    background: linear-gradient(180deg, rgba(26, 39, 68, 0.45) 0%, rgba(26, 39, 68, 0.8) 100%);
}

/* Tile Content */
.index-services-preview-section .tile-content {
    padding: 28px 32px 32px;
    position: relative;
}

.index-services-preview-section .tile-content h3 {
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-light);
    margin-bottom: 12px;
    text-align: right;
}

.index-services-preview-section .tile-content p {
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 20px;
    text-align: right;
}

.index-services-preview-section .tile-accent-line {
    width: 60px;
    height: 2px;
    background: var(--accent);
    opacity: 0.7;
    margin-inline-start: auto;
    margin-inline-end: 0;
    border-radius: 1px;
}

/* CTA Wrapper */
.index-services-preview-section .cta-wrapper {
    text-align: center;
    margin-top: 8px;
}

.index-services-preview-section .btn-primary-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: #FFFFFF;
    padding: 16px 36px;
    border-radius: var(--radius-btn, 6px);
    border: none;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Rubik', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(200, 150, 62, 0.28);
}

.index-services-preview-section .btn-primary-arrow:hover {
    background: #C8963E;
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(200, 150, 62, 0.4);
}

.index-services-preview-section .btn-primary-arrow svg {
    width: 20px;
    height: 20px;
    color: #FFFFFF;
    flex-shrink: 0;
}

/* Bottom Divider */
.index-services-preview-section .services-divider-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
    z-index: 5;
}

.index-services-preview-section .services-divider-wrapper svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .index-services-preview-section {
        padding: var(--spacing-section-mobile, 64px) 16px;
        padding-bottom: 120px;
    }

    .index-services-preview-section .services-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .index-services-preview-section .section-header {
        margin-bottom: 48px;
    }

    .index-services-preview-section .section-header h2 {
        font-size: 1.75rem;
    }

    .index-services-preview-section .tile-content {
        padding: 20px 20px 24px;
    }

    .index-services-preview-section .tile-content h3 {
        font-size: 1.3rem;
    }

    .index-services-preview-section .btn-primary-arrow {
        padding: 14px 28px;
        font-size: 0.95rem;
    }

    .index-services-preview-section .services-divider-wrapper {
        height: 70px;
    }
}

/* showcase */
.index-showcase-section {
  position: relative;
  overflow: visible;
  padding-bottom: 100px; /* Space for divider */
  background-color: #E8DCC8;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8963E' fill-opacity='0.05'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-color: var(--bg-light);
  color: var(--text-dark);
  direction: rtl;
  font-family: 'Rubik', sans-serif;
  padding-top: 96px;
  padding-inline: 16px;
}

.index-showcase-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Header */
.index-showcase-section__header {
  text-align: center;
  margin-bottom: 64px;
  max-width: 800px;
  margin-inline: auto;
}

.index-showcase-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 24px;
  text-align: center;
}

.index-showcase-section__subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-dark);
  text-align: center;
  max-width: none !important;
}

/* Gallery Grid */
.index-showcase-section__gallery {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
  direction: rtl;
}

.index-showcase-section__large-image,
.index-showcase-section__stacked-images {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.index-showcase-section__figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 24px rgba(44,24,16,0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.index-showcase-section__figure:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

.index-showcase-section__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  min-width: 0;
}

.index-showcase-section__large-image .index-showcase-section__img {
  aspect-ratio: 4 / 3;
}

.index-showcase-section__stacked-images .index-showcase-section__img {
  aspect-ratio: 4 / 3;
}

.index-showcase-section__caption {
  padding: 16px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  background: rgba(245, 239, 224, 0.9);
  backdrop-filter: blur(4px);
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  letter-spacing: 0.5px;
}

/* Decorative Motifs */
.index-showcase-section__ornamental-divider {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: #D4A853;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}

.index-showcase-section__ornamental-divider::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #D4A853;
  opacity: 0.6;
}

.index-showcase-section__city-sketch {
  position: absolute;
  top: 40px;
  inset-inline-start: 0;
  width: 320px;
  height: 200px;
  color: var(--text-dark);
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}

.index-showcase-section__city-sketch svg {
  width: 100%;
  height: 100%;
}

.index-showcase-section__stamp-circle {
  position: absolute;
  bottom: 20px;
  inset-inline-end: -40px;
  width: 120px;
  height: 120px;
  color: #1A2744;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

.index-showcase-section__stamp-circle svg {
  width: 100%;
  height: 100%;
}

/* Bottom Divider */
.index-showcase-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  z-index: 5;
}

.index-showcase-section__divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .index-showcase-section {
    padding-top: 64px;
    padding-bottom: 80px;
    padding-inline: 16px;
  }

  .index-showcase-section__container {
    padding-inline: 0;
  }

  .index-showcase-section__header {
    margin-bottom: 32px;
    padding-inline: 0;
  }

  .index-showcase-section__title {
    font-size: 1.75rem;
  }

  .index-showcase-section__subtitle {
    font-size: 1rem;
  }

  .index-showcase-section__gallery {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .index-showcase-section__large-image,
  .index-showcase-section__stacked-images {
    gap: 24px;
  }

  .index-showcase-section__stamp-circle {
    inset-inline-end: -20px;
    width: 80px;
    height: 80px;
    bottom: 10px;
  }

  .index-showcase-section__city-sketch {
    width: 200px;
    height: 125px;
    top: 0;
  }

  .index-showcase-section__ornamental-divider {
    top: 140px;
  }

  .index-showcase-section__divider-wrapper {
    height: 80px;
  }
}

/* cta */
/* ==========================================================================
   CTA Section — חלום ירושלים | בית
   Deep ink-brown, warm gold accents, stone-grain texture
   ========================================================================== */

.index-cta-section {
  position: relative;
  background-color: var(--bg-dark);
  background-image:
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #2B2118 0%, #3D2E22 100%);
  color: var(--text-light);
  padding: var(--spacing-section, 96px) 16px;
  overflow: hidden;
  direction: rtl;
}

/* ── Container ── */
.index-cta-section .cta-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  position: relative;
  z-index: 2;
}

/* ── Heading Side (Right) ── */
.index-cta-section .cta-heading-side {
  flex: 1 1 50%;
  position: relative;
}

.index-cta-section .cta-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 3rem; /* 48px H1 scale */
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0;
  text-align: start;
  letter-spacing: -0.01em;
}

/* ── Stamp Motif Decoration ── */
.index-cta-section .stamp-motif {
  position: absolute;
  bottom: -20px;
  inset-inline-end: -40px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.index-cta-section .stamp-motif svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Action Side (Left) ── */
.index-cta-section .cta-action-side {
  flex: 1 1 50%;
  display: flex;
  justify-content: flex-end;
}

.index-cta-section .cta-prompt-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card, 6px);
  padding: var(--spacing-card-padding, 32px);
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.index-cta-section .cta-prompt-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-light);
  margin: 0 0 32px 0;
  text-align: start;
}

/* ── Buttons Group ── */
.index-cta-section .cta-buttons-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

/* Primary CTA Button */
.index-cta-section .cta-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  padding: 16px 32px;
  border-radius: var(--radius-btn, 6px);
  border: none;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.index-cta-section .cta-btn-primary:hover {
  background: #C8963E;
  box-shadow: 0 8px 30px rgba(214, 162, 58, 0.35);
  transform: translateY(-2px);
}

/* Secondary CTA Button */
.index-cta-section .cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-light);
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  padding: 16px 32px;
  border-radius: var(--radius-btn, 6px);
  border: 2px solid var(--text-light);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.index-cta-section .cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ── Route Line Endpoint SVG ── */
.index-cta-section .route-line-endpoint {
  position: absolute;
  bottom: -16px;
  inset-inline-start: -40px;
  width: 160px;
  height: 50px;
  pointer-events: none;
  z-index: 3;
  transform: rotate(-15deg);
}

.index-cta-section .route-line-endpoint svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   RESPONSIVE — Tablet & Mobile
   ========================================================================== */

@media (max-width: 768px) {
  .index-cta-section {
    padding: var(--spacing-section-mobile, 64px) 16px;
  }

  .index-cta-section .cta-container {
    flex-direction: column;
    gap: 40px;
    align-items: stretch;
  }

  .index-cta-section .cta-heading-side {
    flex: unset;
    text-align: center;
  }

  .index-cta-section .cta-heading {
    font-size: 2.25rem; /* ~36px for mobile */
    text-align: center;
    line-height: 1.3;
  }

  .index-cta-section .cta-heading br {
    display: none;
  }

  .index-cta-section .stamp-motif {
    bottom: -30px;
    inset-inline-end: 0;
    width: 80px;
    height: 80px;
    opacity: 0.5;
    position: relative;
    margin: 16px auto 0;
    display: block;
  }

  .index-cta-section .cta-action-side {
    flex: unset;
    justify-content: center;
  }

  .index-cta-section .cta-prompt-card {
    max-width: 100%;
    padding: 24px;
  }

  .index-cta-section .cta-prompt-text {
    text-align: center;
    margin-bottom: 24px;
  }

  .index-cta-section .cta-buttons-group {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
  }

  .index-cta-section .cta-btn-primary,
  .index-cta-section .cta-btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .index-cta-section .route-line-endpoint {
    display: none; /* Hide decorative route line on small screens to avoid clutter */
  }
}

/* page-intro */
.tours-page-intro-section {
  background-color: #E8DCC8;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8963E' fill-opacity='0.04'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--text-dark);
  position: relative;
  overflow: hidden;
  padding: 120px 16px 96px;
  text-align: right;
  direction: rtl;
}

.tours-page-intro-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.tours-page-intro-section__content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Stamp decoration */
.tours-page-intro-section__stamp {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

.tours-page-intro-section__stamp svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* City sketch decoration */
.tours-page-intro-section__sketch {
  position: absolute;
  top: 40px;
  left: 0;
  width: 320px;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
}

.tours-page-intro-section__sketch svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Title */
.tours-page-intro-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Ornamental divider */
.tours-page-intro-section__ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 24px;
  width: 200px;
  height: 20px;
}

.tours-page-intro-section__ornament svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Description */
.tours-page-intro-section__description {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-dark);
  margin: 0 auto 32px;
  max-width: 680px;
  text-align: center;
}

/* Route line SVG */
.tours-page-intro-section__route {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  height: 60px;
  pointer-events: none;
}

.tours-page-intro-section__route svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .tours-page-intro-section {
    padding: 100px 16px 64px;
  }

  .tours-page-intro-section__title {
    font-size: 2.25rem;
  }

  .tours-page-intro-section__description {
    font-size: 1rem;
    padding: 0 8px;
    max-width: 100%;
  }

  .tours-page-intro-section__stamp {
    width: 80px;
    height: 80px;
    bottom: -10px;
    right: -10px;
    opacity: 0.6;
  }

  .tours-page-intro-section__sketch {
    width: 180px;
    height: 120px;
    top: 20px;
    left: -40px;
    opacity: 0.5;
  }

  .tours-page-intro-section__route {
    height: 48px;
  }

  .tours-page-intro-section__ornament {
    width: 160px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tours-page-intro-section__title {
    font-size: 2.5rem;
  }

  .tours-page-intro-section__stamp {
    right: 10px;
    bottom: 0;
  }

  .tours-page-intro-section__sketch {
    left: 10px;
  }
}


/* programs */
.tours-programs-section {
  background-color: #E8DCC8;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8963E' fill-opacity='0.05'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--text-dark);
  padding: 96px 16px;
  position: relative;
  overflow: hidden;
}

.tours-programs-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header */
.tours-programs-section__header {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
}

.tours-programs-section__header-accent {
  width: 60px;
  height: 4px;
  background: var(--accent);
  margin: 0 auto 24px;
  border-radius: 2px;
}

.tours-programs-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 16px;
  max-width: none;
}

.tours-programs-section__subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0 auto 24px;
  max-width: 600px;
  text-align: center;
}

.tours-programs-section__ornamental-divider {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  pointer-events: none;
}

.tours-programs-section__ornamental-divider svg {
  display: block;
}

/* Cards Grid */
.tours-programs-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  direction: rtl;
}

/* Card */
.tours-programs-section__card {
  background: #F5EFE0;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(44,24,16,0.1);
  overflow: hidden;
  border: 1px solid rgba(212,168,83,0.15);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tours-programs-section__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

.tours-programs-section__card-image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.tours-programs-section__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.3s ease;
}

.tours-programs-section__card:hover .tours-programs-section__card-image {
  transform: scale(1.02);
}

.tours-programs-section__card-number {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  background: var(--accent);
  color: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(200,150,62,0.35);
  z-index: 2;
  pointer-events: none;
}

.tours-programs-section__card-content {
  padding: 24px 24px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.tours-programs-section__card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.tours-programs-section__card-audience {
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--secondary);
  margin: 0 0 16px;
  font-weight: 600;
}

.tours-programs-section__card-description {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: #4A3728;
  margin: 0 0 20px;
  flex: 1;
}

.tours-programs-section__card-link {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  margin-top: auto;
  display: inline-block;
  transition: color 0.3s ease;
  letter-spacing: 0.5px;
}

.tours-programs-section__card-link:hover {
  color: var(--secondary);
}

/* Bottom CTA */
.tours-programs-section__cta-wrapper {
  text-align: center;
  margin-top: 56px;
}

.tours-programs-section__cta-button {
  display: inline-block;
  background: var(--accent);
  color: #FFFFFF;
  padding: 16px 32px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  font-family: 'Rubik', sans-serif;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(200,150,62,0.25);
}

.tours-programs-section__cta-button:hover {
  background: #c88d2e;
  box-shadow: 0 8px 30px rgba(200,150,62,0.4);
  transform: translateY(-2px);
}

/* Decorative Stamp */
.tours-programs-section__stamp {
  position: absolute;
  bottom: 40px;
  inset-inline-start: 24px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.tours-programs-section__stamp svg {
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .tours-programs-section {
    padding: 64px 16px;
  }

  .tours-programs-section__header {
    margin-bottom: 40px;
  }

  .tours-programs-section__title {
    font-size: 1.75rem;
  }

  .tours-programs-section__subtitle {
    font-size: 1rem;
  }

  .tours-programs-section__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .tours-programs-section__card-content {
    padding: 20px 20px 28px;
  }

  .tours-programs-section__card-number {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    top: 12px;
    inset-inline-end: 12px;
  }

  .tours-programs-section__cta-wrapper {
    margin-top: 40px;
  }

  .tours-programs-section__cta-button {
    padding: 14px 24px;
    font-size: 0.95rem;
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
  }

  .tours-programs-section__stamp {
    bottom: 20px;
    inset-inline-start: 8px;
    width: 80px;
    height: 80px;
  }

  .tours-programs-section__stamp svg {
    width: 80px;
    height: 80px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tours-programs-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* experience-flow */
.tours-experience-flow-section {
    position: relative;
    background-color: var(--bg-dark);
    background-image:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4A853' fill-opacity='0.03'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #1A2744 0%, #0F1A30 100%);
    color: var(--text-light);
    padding: var(--spacing-section, 96px) 16px;
    overflow: hidden;
    direction: rtl;
}

.tours-experience-flow-section__container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Header */
.tours-experience-flow-section__header {
    text-align: center;
    margin-bottom: 64px;
}

.tours-experience-flow-section__title {
    font-family: 'Rubik', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-light);
    margin-bottom: 16px;
    text-align: center;
}

.tours-experience-flow-section__subtitle {
    font-family: 'Rubik', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-light);
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* Flow Container */
.tours-experience-flow-section__flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* Connecting Line */
.tours-experience-flow-section__flow::before {
    content: '';
    position: absolute;
    top: 40px;
    bottom: 40px;
    inset-inline-start: 39px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent, #D6A23A) 0%, rgba(214, 162, 58, 0.2) 100%);
    z-index: 0;
}

/* Step Item */
.tours-experience-flow-section__step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding: 32px 0;
    position: relative;
    z-index: 1;
}

.tours-experience-flow-section__step:last-child {
    padding-bottom: 0;
}

/* Step Marker (Number + Dot) */
.tours-experience-flow-section__step-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 80px;
    position: relative;
    z-index: 2;
}

.tours-experience-flow-section__step-number {
    font-family: 'Rubik', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent, #D6A23A);
    opacity: 0.9;
    letter-spacing: -1px;
}

.tours-experience-flow-section__step-dot {
    width: 16px;
    height: 16px;
    background-color: var(--accent, #D6A23A);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(214, 162, 58, 0.5);
    border: 3px solid var(--bg-dark);
    z-index: 3;
}

/* Step Content */
.tours-experience-flow-section__step-content {
    flex: 1;
    text-align: right;
}

.tours-experience-flow-section__step-title {
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-light);
    margin-bottom: 12px;
}

.tours-experience-flow-section__step-text {
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-light);
    opacity: 0.8;
    max-width: 700px;
    text-align: right;
}

/* Decorative City Sketch Overlay */
.tours-experience-flow-section__city-sketch {
    position: absolute;
    bottom: 40px;
    inset-inline-start: 0;
    width: 320px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    color: var(--accent, #D6A23A);
    opacity: 0.15;
}

.tours-experience-flow-section__city-sketch svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Decorative Stamp Circle */
.tours-experience-flow-section__stamp {
    position: absolute;
    top: 60px;
    inset-inline-end: 0;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 0;
    color: var(--accent, #D6A23A);
    opacity: 0.25;
}

.tours-experience-flow-section__stamp svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .tours-experience-flow-section {
        padding: var(--spacing-section-mobile, 64px) 16px;
    }

    .tours-experience-flow-section__header {
        margin-bottom: 48px;
    }

    .tours-experience-flow-section__title {
        font-size: 1.75rem;
    }

    .tours-experience-flow-section__subtitle {
        font-size: 1rem;
        line-height: 1.6;
    }

    .tours-experience-flow-section__flow::before {
        inset-inline-start: 23px;
        top: 30px;
        bottom: 30px;
    }

    .tours-experience-flow-section__step {
        gap: 20px;
        padding: 24px 0;
    }

    .tours-experience-flow-section__step-marker {
        min-width: 48px;
        gap: 8px;
    }

    .tours-experience-flow-section__step-number {
        font-size: 2.25rem;
    }

    .tours-experience-flow-section__step-dot {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .tours-experience-flow-section__step-title {
        font-size: 1.25rem;
    }

    .tours-experience-flow-section__city-sketch {
        width: 160px;
        bottom: 20px;
        opacity: 0.1;
    }

    .tours-experience-flow-section__stamp {
        width: 80px;
        height: 80px;
        top: 20px;
        opacity: 0.15;
    }
}

@media (min-width: 769px) {
    .tours-experience-flow-section__flow {
        max-width: 900px;
        margin: 0 auto;
    }

    .tours-experience-flow-section__step {
        align-items: flex-start;
    }
}

/* audience-fit */
.tours-audience-fit-section {
  background: linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  color: var(--text-dark);
  padding: var(--spacing-section, 96px) 16px;
  position: relative;
  overflow: visible;
  font-family: 'Rubik', sans-serif;
  direction: rtl;
  text-align: right;
}

.tours-audience-fit-section__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  direction: rtl;
}

/* Content Column */
.tours-audience-fit-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-gap, 24px);
  z-index: 2;
}

.tours-audience-fit-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0;
  letter-spacing: 0;
}

.tours-audience-fit-section__divider {
  color: var(--primary);
  opacity: 0.7;
  margin-block-start: -8px;
}

.tours-audience-fit-section__divider svg {
  display: block;
}

.tours-audience-fit-section__intro {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-dark);
  max-width: 90%;
  margin: 0;
}

/* Audiences Grid */
.tours-audience-fit-section__audiences {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block-start: 8px;
}

.tours-audience-fit-section__audience-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  direction: rtl;
}

.tours-audience-fit-section__audience-icon {
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  border-radius: var(--radius-card, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  box-shadow: var(--shadow-subtle, 0 2px 12px rgba(0,0,0,0.08));
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.tours-audience-fit-section__audience-item:hover .tours-audience-fit-section__audience-icon {
  color: var(--secondary);
  box-shadow: 0 4px 16px rgba(44,24,16,0.12);
  transform: translateY(-2px);
}

.tours-audience-fit-section__audience-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tours-audience-fit-section__audience-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0;
}

.tours-audience-fit-section__audience-desc {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* CTA Button */
.tours-audience-fit-section__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: #FFFFFF;
  padding: 14px 28px;
  border-radius: var(--radius-btn, 6px);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: all 0.3s ease;
  width: fit-content;
  margin-block-start: 8px;
  box-shadow: 0 4px 12px rgba(49,92,140,0.25);
  border: none;
  cursor: pointer;
}

.tours-audience-fit-section__cta:hover {
  background: #2A4F7A;
  box-shadow: 0 8px 24px rgba(49,92,140,0.35);
  transform: translateY(-2px);
}

.tours-audience-fit-section__cta svg {
  flex-shrink: 0;
}

/* Media Column */
.tours-audience-fit-section__media {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.tours-audience-fit-section__mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 500px;
  position: relative;
  z-index: 2;
}

.tours-audience-fit-section__mosaic-item {
  border-radius: var(--radius-img, 6px);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(44,24,16,0.18);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  aspect-ratio: 4 / 3;
}

.tours-audience-fit-section__mosaic-item:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(44,24,16,0.25);
}

.tours-audience-fit-section__mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-width: 0;
}

/* Map Fragment Decoration */
.tours-audience-fit-section__map-fragment {
  position: absolute;
  bottom: -20px;
  inset-inline-start: -30px;
  width: 200px;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

.tours-audience-fit-section__map-fragment svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .tours-audience-fit-section {
    padding: var(--spacing-section-mobile, 64px) 16px;
  }

  .tours-audience-fit-section__container {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }

  .tours-audience-fit-section__content {
    gap: 20px;
  }

  .tours-audience-fit-section__heading {
    font-size: 1.8rem;
  }

  .tours-audience-fit-section__intro {
    max-width: 100%;
  }

  .tours-audience-fit-section__audience-item {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }

  .tours-audience-fit-section__audience-icon {
    width: 44px;
    height: 44px;
  }

  .tours-audience-fit-section__media {
    min-height: auto;
     /* Moves images above text on mobile for visual appeal */
  }

  .tours-audience-fit-section__mosaic {
    max-width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .tours-audience-fit-section__map-fragment {
    bottom: -10px;
    inset-inline-start: -10px;
    width: 140px;
    height: 140px;
    opacity: 0.6;
  }

  .tours-audience-fit-section__cta {
    width: 100%;
    justify-content: center;
  }
}
/* ZAPPY_POSTGEN_GUARD_RTL_ORDER:סיורים-audience-fit — stripped 1 order declaration(s) conflicting with RTL grid */


/* inquiry-band */
.tours-inquiry-band-section {
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(214,162,58,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(163,52,42,0.06) 0%, transparent 50%),
    linear-gradient(180deg, #2B2118 0%, #1F1810 100%);
  position: relative;
  overflow: hidden;
  padding: 96px 24px;
  color: var(--text-light);
  direction: rtl;
  text-align: right;
}

.tours-inquiry-band-section__container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-element-gap, 24px);
}

.tours-inquiry-band-section__top-rule {
  width: 80px;
  height: 3px;
  background-color: var(--secondary);
  border-radius: 2px;
  margin-bottom: 8px;
}

.tours-inquiry-band-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0;
  max-width: none !important;
}

.tours-inquiry-band-section__description {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-light);
  opacity: 0.9;
  margin: 0;
  max-width: 620px;
}

.tours-inquiry-band-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--text-dark);
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 16px 36px;
  border-radius: var(--radius-btn, 6px);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(200,150,62,0.28);
  margin-top: 8px;
  border: none;
  cursor: pointer;
}

.tours-inquiry-band-section__cta svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.tours-inquiry-band-section__cta:hover {
  background: #C8963E;
  box-shadow: 0 12px 40px rgba(200,150,62,0.45);
  transform: translateY(-2px);
}

.tours-inquiry-band-section__cta:hover svg {
  transform: translateX(-4px);
}

/* Decorative stamp */
.tours-inquiry-band-section__stamp {
  position: absolute;
  bottom: -30px;
  left: -40px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.tours-inquiry-band-section__stamp svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .tours-inquiry-band-section {
    padding: 64px 16px;
  }

  .tours-inquiry-band-section__container {
    gap: 16px;
  }

  .tours-inquiry-band-section__heading {
    font-size: 1.75rem;
  }

  .tours-inquiry-band-section__description {
    max-width: 100%;
  }

  .tours-inquiry-band-section__cta {
    padding: 14px 28px;
    font-size: 0.95rem;
  }

  .tours-inquiry-band-section__stamp {
    bottom: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    opacity: 0.6;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tours-inquiry-band-section {
    padding: 80px 32px;
  }
}


/* editorial-intro */
.ceremonies-lectures-editorial-intro-section {
  position: relative;
  background-color: #E8DCC8;
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8963E' fill-opacity='0.05'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  color: var(--text-dark);
  padding: 120px 16px 96px;
  overflow: visible;
  direction: rtl;
}

.ceremonies-lectures-editorial-intro-section .section-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* Editorial Grid: text (right) + media (left) */
.ceremonies-lectures-editorial-intro-section .editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  direction: rtl;
}

/* Content Column */
.ceremonies-lectures-editorial-intro-section .editorial-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-gap, 24px);
  text-align: right;
}

.ceremonies-lectures-editorial-intro-section .section-label {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--secondary);
  display: block;
}

.ceremonies-lectures-editorial-intro-section .editorial-headline {
  font-family: 'Rubik', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0;
  letter-spacing: -0.5px;
}

.ceremonies-lectures-editorial-intro-section .ornamental-divider {
  display: flex;
  justify-content: flex-start;
  margin: 4px 0;
}

.ceremonies-lectures-editorial-intro-section .ornamental-divider svg {
  display: block;
}

.ceremonies-lectures-editorial-intro-section .editorial-pullquote {
  font-family: 'Rubik', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-dark);
  margin: 0;
  opacity: 0.9;
}

.ceremonies-lectures-editorial-intro-section .editorial-body {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

/* CTA Buttons */
.ceremonies-lectures-editorial-intro-section .cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

.ceremonies-lectures-editorial-intro-section .btn-primary {
  display: inline-block;
  background: var(--primary);
  color: var(--text-light);
  padding: 16px 32px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: 'Rubik', sans-serif;
}

.ceremonies-lectures-editorial-intro-section .btn-primary:hover {
  background: #1E3A5F;
  box-shadow: var(--shadow-btn-hover, 0 8px 30px rgba(0,0,0,0.14));
  transform: translateY(-2px);
}

.ceremonies-lectures-editorial-intro-section .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--secondary);
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  cursor: pointer;
  font-family: 'Rubik', sans-serif;
  transition: all 0.3s ease;
}

.ceremonies-lectures-editorial-intro-section .btn-ghost:hover {
  color: #8A2A22;
  opacity: 0.9;
}

/* Image Column */
.ceremonies-lectures-editorial-intro-section .editorial-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ceremonies-lectures-editorial-intro-section .image-frame {
  position: relative;
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-card, 0 8px 30px rgba(0,0,0,0.14));
  z-index: 5;
}

.ceremonies-lectures-editorial-intro-section .image-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  min-width: 0;
}

/* Gold corner marks */
.ceremonies-lectures-editorial-intro-section .corner-mark {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.ceremonies-lectures-editorial-intro-section .corner-top-right {
  top: -8px;
  right: -8px;
}

.ceremonies-lectures-editorial-intro-section .corner-bottom-right {
  bottom: -8px;
  right: -8px;
}

.ceremonies-lectures-editorial-intro-section .corner-top-left {
  top: -8px;
  left: -8px;
}

.ceremonies-lectures-editorial-intro-section .corner-bottom-left {
  bottom: -8px;
  left: -8px;
}

.ceremonies-lectures-editorial-intro-section .corner-mark svg {
  display: block;
}

/* Decorative stamp circle */
.ceremonies-lectures-editorial-intro-section .stamp-circle {
  position: absolute;
  bottom: -30px;
  left: -40px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
}

.ceremonies-lectures-editorial-intro-section .stamp-circle svg {
  display: block;
}

/* City sketch overlay decoration */
.ceremonies-lectures-editorial-intro-section .city-sketch-overlay {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
  max-width: 320px;
  width: 25%;
}

.ceremonies-lectures-editorial-intro-section .city-sketch-overlay svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .ceremonies-lectures-editorial-intro-section {
    padding: 100px 16px 64px;
  }

  .ceremonies-lectures-editorial-intro-section .editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  .ceremonies-lectures-editorial-intro-section .editorial-text {
    order: 2;
  }

  .ceremonies-lectures-editorial-intro-section .editorial-media {
    order: 1;
    max-width: 100%;
  }

  .ceremonies-lectures-editorial-intro-section .editorial-headline {
    font-size: 2.25rem;
  }

  .ceremonies-lectures-editorial-intro-section .editorial-pullquote {
    font-size: 1.1rem;
  }

  .ceremonies-lectures-editorial-intro-section .cta-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ceremonies-lectures-editorial-intro-section .btn-primary,
  .ceremonies-lectures-editorial-intro-section .btn-ghost {
    width: 100%;
    text-align: center;
  }

  .ceremonies-lectures-editorial-intro-section .stamp-circle {
    bottom: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
  }

  .ceremonies-lectures-editorial-intro-section .stamp-circle svg {
    width: 80px;
    height: 80px;
  }

  .ceremonies-lectures-editorial-intro-section .city-sketch-overlay {
    display: none;
  }

  .ceremonies-lectures-editorial-intro-section .corner-mark {
    display: none;
  }
}

/* Responsive: Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .ceremonies-lectures-editorial-intro-section .editorial-grid {
    gap: 48px;
  }

  .ceremonies-lectures-editorial-intro-section .editorial-headline {
    font-size: 2.5rem;
  }

  .ceremonies-lectures-editorial-intro-section .city-sketch-overlay {
    width: 20%;
    opacity: 0.5;
  }
}

/* ceremonial-participation */
/* Ceremonial Participation Section - Dark Background with Diagonal Islands */
.ceremonies-lectures-ceremonial-participation-section {
  position: relative;
  background-color: #2B2118;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(49,92,140,0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(214,162,58,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #2B2118 0%, #1F1810 100%);
  color: var(--text-light);
  padding: var(--spacing-section, 96px) 16px;
  overflow: visible;
  direction: rtl;
}

.ceremonies-lectures-ceremonial-participation-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Header */
.ceremonies-lectures-ceremonial-participation-section__header {
  text-align: center;
  margin-bottom: 64px;
}

.ceremonies-lectures-ceremonial-participation-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0 0 16px 0;
}

.ceremonies-lectures-ceremonial-participation-section__divider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  color: var(--accent);
  opacity: 0.8;
}

.ceremonies-lectures-ceremonial-participation-section__subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* Diagonal Islands Grid */
.ceremonies-lectures-ceremonial-participation-section__grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
  max-width: 900px;
  margin: 0 auto 48px auto;
}

/* Islands */
.ceremonies-lectures-ceremonial-participation-section__island {
  position: relative;
  width: 100%;
  max-width: 700px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* Diagonal offset for each island */
.ceremonies-lectures-ceremonial-participation-section__island.island-1 {
  margin-inline-start: 0;
}

.ceremonies-lectures-ceremonial-participation-section__island.island-2 {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.ceremonies-lectures-ceremonial-participation-section__island.island-3 {
  margin-inline-start: 0;
}

/* Backplate - Byzantine blue shadow */
.ceremonies-lectures-ceremonial-participation-section__island .island-backplate {
  position: absolute;
  top: 8px;
  inset-inline-start: -12px;
  width: 100%;
  height: 100%;
  background-color: rgba(49,92,140,0.12);
  border-radius: 6px;
  z-index: 0;
  pointer-events: none;
}

/* Island Content */
.ceremonies-lectures-ceremonial-participation-section__island .island-content {
  position: relative;
  z-index: 1;
  background: rgba(43,33,24,0.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-dark);
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Symbol above each island */
.ceremonies-lectures-ceremonial-participation-section__island .island-symbol {
  color: var(--accent);
  opacity: 0.9;
  margin-bottom: 4px;
}

.ceremonies-lectures-ceremonial-participation-section__island .island-symbol svg {
  display: block;
}

.ceremonies-lectures-ceremonial-participation-section__island .island-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0;
}

.ceremonies-lectures-ceremonial-participation-section__island .island-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

/* CTA */
.ceremonies-lectures-ceremonial-participation-section__cta {
  text-align: center;
  margin-top: 16px;
}

.ceremonies-lectures-ceremonial-participation-section__cta .btn-primary {
  display: inline-block;
  background: var(--primary);
  color: #FFFFFF;
  padding: 16px 32px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: 'Rubik', sans-serif;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.ceremonies-lectures-ceremonial-participation-section__cta .btn-primary:hover {
  background: var(--accent);
  color: var(--bg-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
}

/* Decorative Background Elements */
.ceremonies-lectures-ceremonial-participation-section__decoration {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.ceremonies-lectures-ceremonial-participation-section__decoration.decoration-stamp {
  bottom: 40px;
  inset-inline-end: 24px;
  color: var(--accent);
  opacity: 0.15;
  width: 100px;
  height: 100px;
}

.ceremonies-lectures-ceremonial-participation-section__decoration.decoration-sketch {
  top: 20%;
  inset-inline-start: 16px;
  color: var(--primary);
  opacity: 0.1;
  width: 200px;
  height: 200px;
}

/* Responsive */
@media (max-width: 768px) {
  .ceremonies-lectures-ceremonial-participation-section {
    padding: var(--spacing-section-mobile, 64px) 16px;
  }

  .ceremonies-lectures-ceremonial-participation-section__title {
    font-size: 1.75rem;
  }

  .ceremonies-lectures-ceremonial-participation-section__subtitle {
    font-size: 1rem;
    max-width: 100%;
  }

  .ceremonies-lectures-ceremonial-participation-section__grid {
    gap: 32px;
  }

  .ceremonies-lectures-ceremonial-participation-section__island {
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ceremonies-lectures-ceremonial-participation-section__island.island-1,
  .ceremonies-lectures-ceremonial-participation-section__island.island-2,
  .ceremonies-lectures-ceremonial-participation-section__island.island-3 {
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .ceremonies-lectures-ceremonial-participation-section__island .island-backplate {
    inset-inline-start: 0;
    top: 6px;
    width: 100%;
  }

  .ceremonies-lectures-ceremonial-participation-section__island .island-content {
    padding: 24px;
    align-items: center;
  }

  .ceremonies-lectures-ceremonial-participation-section__island .island-text {
    text-align: center;
  }

  .ceremonies-lectures-ceremonial-participation-section__island .island-title {
    text-align: center;
  }

  .ceremonies-lectures-ceremonial-participation-section__decoration.decoration-stamp {
    bottom: 20px;
    inset-inline-end: 8px;
    width: 70px;
    height: 70px;
    opacity: 0.1;
  }

  .ceremonies-lectures-ceremonial-participation-section__decoration.decoration-sketch {
    top: 10%;
    inset-inline-start: 0;
    width: 120px;
    height: 120px;
    opacity: 0.06;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ceremonies-lectures-ceremonial-participation-section__island {
    max-width: 85%;
  }
  
  .ceremonies-lectures-ceremonial-participation-section__island.island-2 {
    margin-inline-start: 10%;
  }
}

/* lecture-topics */
.ceremonies-lectures-lecture-topics-section {
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  color: var(--text-dark);
  padding: var(--spacing-section, 96px) 16px;
  direction: rtl;
}

.ceremonies-lectures-lecture-topics-section .container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.ceremonies-lectures-lecture-topics-section .section-header {
  text-align: center;
  margin-bottom: 64px;
  max-width: 700px;
  margin-inline: auto;
}

.ceremonies-lectures-lecture-topics-section .section-header h2 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  font-family: 'Rubik', sans-serif;
  margin-bottom: 16px;
}

.ceremonies-lectures-lecture-topics-section .section-header p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  font-family: 'Rubik', sans-serif;
}

.ceremonies-lectures-lecture-topics-section .topics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-card-gap, 32px);
  direction: rtl;
}

.ceremonies-lectures-lecture-topics-section .topic-card {
  position: relative;
  background: #F5EFE0;
  border: 1px solid rgba(49, 92, 140, 0.2);
  border-radius: var(--radius-card, 6px);
  padding: var(--spacing-card-padding, 32px);
  box-shadow: var(--shadow-card, 0 8px 30px rgba(0,0,0,0.14));
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  text-align: right;
}

.ceremonies-lectures-lecture-topics-section .topic-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--secondary) 0%, var(--accent) 100%);
  opacity: 0.8;
}

.ceremonies-lectures-lecture-topics-section .topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

.ceremonies-lectures-lecture-topics-section .card-number {
  font-family: 'Rubik', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
  min-width: 60px;
  text-align: right;
}

.ceremonies-lectures-lecture-topics-section .card-content {
  flex: 1;
  min-width: 0;
}

.ceremonies-lectures-lecture-topics-section .card-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  font-family: 'Rubik', sans-serif;
  margin-bottom: 12px;
}

.ceremonies-lectures-lecture-topics-section .card-content p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  font-family: 'Rubik', sans-serif;
}

.ceremonies-lectures-lecture-topics-section .decorative-stamp {
  position: absolute;
  bottom: 40px;
  inset-inline-start: 40px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

.ceremonies-lectures-lecture-topics-section .decorative-stamp svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  .ceremonies-lectures-lecture-topics-section {
    padding: var(--spacing-section-mobile, 64px) 16px;
  }

  .ceremonies-lectures-lecture-topics-section .section-header {
    margin-bottom: 40px;
  }

  .ceremonies-lectures-lecture-topics-section .section-header h2 {
    font-size: 1.75rem;
  }

  .ceremonies-lectures-lecture-topics-section .topics-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .ceremonies-lectures-lecture-topics-section .topic-card {
    padding: 24px;
    gap: 16px;
  }

  .ceremonies-lectures-lecture-topics-section .card-number {
    font-size: 2.5rem;
    min-width: 44px;
  }

  .ceremonies-lectures-lecture-topics-section .card-content h3 {
    font-size: 1.25rem;
  }

  .ceremonies-lectures-lecture-topics-section .decorative-stamp {
    bottom: 20px;
    inset-inline-start: 16px;
    width: 80px;
    height: 80px;
    opacity: 0.5;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ceremonies-lectures-lecture-topics-section .topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* credibility */
.ceremonies-lectures-credibility-section {
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(ellipse at 25% 20%, rgba(212,168,83,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(49,92,140,0.08) 0%, transparent 55%),
    linear-gradient(180deg, #1A2744 0%, #0F1A30 100%);
  color: var(--text-light);
  position: relative;
  overflow: visible;
  padding: var(--spacing-section, 96px) 16px 60px;
}

.ceremonies-lectures-credibility-section .credibility-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.ceremonies-lectures-credibility-section .credibility-header {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
}

.ceremonies-lectures-credibility-section .credibility-ornament {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent, #D6A23A), transparent);
  margin: 0 auto 28px;
  border-radius: 2px;
  opacity: 0.7;
}

.ceremonies-lectures-credibility-section .credibility-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0 0 16px;
  text-align: center;
  max-width: none;
}

.ceremonies-lectures-credibility-section .credibility-subheading {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-light);
  opacity: 0.85;
  margin: 0 auto;
  max-width: 620px;
  text-align: center;
}

.ceremonies-lectures-credibility-section .credibility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: var(--spacing-card-gap, 32px);
  direction: rtl;
}

.ceremonies-lectures-credibility-section .credibility-card {
  background: rgba(245,239,224,0.06);
  border: 1px solid var(--border-dark, #5A4635);
  border-radius: var(--radius-card, 6px);
  padding: var(--spacing-card-padding, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ceremonies-lectures-credibility-section .credibility-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 3px;
  height: 40px;
  background: var(--accent, #D6A23A);
  border-radius: 0 0 4px 0;
  
  transition: all 0.3s ease;
}

.ceremonies-lectures-credibility-section .credibility-card:hover {
  background: rgba(245,239,224,0.1);
  border-color: var(--accent, #D6A23A);
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

.ceremonies-lectures-credibility-section .credibility-card:hover::before {
  opacity: 1;
}

.ceremonies-lectures-credibility-section .credibility-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  color: var(--accent, #D6A23A);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,168,83,0.08);
  border-radius: 50%;
  padding: 10px;
  transition: all 0.3s ease;
}

.ceremonies-lectures-credibility-section .credibility-card:hover .credibility-card-icon {
  background: rgba(212,168,83,0.15);
  box-shadow: 0 0 24px rgba(212,168,83,0.2);
}

.ceremonies-lectures-credibility-section .credibility-card-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

.ceremonies-lectures-credibility-section .credibility-card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0 0 12px;
  text-align: right;
}

.ceremonies-lectures-credibility-section .credibility-card-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-light);
  opacity: 0.8;
  margin: 0;
  text-align: right;
}

.ceremonies-lectures-credibility-section .credibility-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 5;
}

.ceremonies-lectures-credibility-section .credibility-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .ceremonies-lectures-credibility-section {
    padding: var(--spacing-section-mobile, 64px) 16px 60px;
  }

  .ceremonies-lectures-credibility-section .credibility-header {
    margin-bottom: 40px;
  }

  .ceremonies-lectures-credibility-section .credibility-heading {
    font-size: 1.75rem;
  }

  .ceremonies-lectures-credibility-section .credibility-subheading {
    font-size: 1rem;
    padding: 0 8px;
  }

  .ceremonies-lectures-credibility-section .credibility-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .ceremonies-lectures-credibility-section .credibility-card {
    padding: 24px;
  }

  .ceremonies-lectures-credibility-section .credibility-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .ceremonies-lectures-credibility-section .credibility-card-icon svg {
    width: 30px;
    height: 30px;
  }

  .ceremonies-lectures-credibility-section .credibility-card-title {
    font-size: 1.3rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ceremonies-lectures-credibility-section .credibility-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 20px;
  }

  .ceremonies-lectures-credibility-section .credibility-card {
    padding: 24px;
  }
}

/* contact-prompt */
.ceremonies-lectures-contact-prompt-section {
  position: relative;
  overflow: visible;
  background-color: #E8DCC8;
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8963E' fill-opacity='0.03'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  color: var(--text-dark);
  padding: 96px 16px;
  direction: rtl;
  font-family: 'Rubik', sans-serif;
}

.ceremonies-lectures-contact-prompt-section .clcp-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  position: relative;
  z-index: 2;
}

/* HEADING BLOCK */
.ceremonies-lectures-contact-prompt-section .clcp-heading-block {
  flex: 1 1 55%;
  text-align: right;
}

.ceremonies-lectures-contact-prompt-section .clcp-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 24px 0;
  letter-spacing: 0;
}

.ceremonies-lectures-contact-prompt-section .clcp-ornamental-divider {
  width: 200px;
  color: var(--accent);
  opacity: 0.6;
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.ceremonies-lectures-contact-prompt-section .clcp-ornamental-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ACTION BLOCK */
.ceremonies-lectures-contact-prompt-section .clcp-action-block {
  flex: 1 1 45%;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.ceremonies-lectures-contact-prompt-section .clcp-invitation {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-dark);
  margin: 0;
  max-width: 480px;
}

.ceremonies-lectures-contact-prompt-section .clcp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--primary);
  color: #FFFFFF;
  padding: 16px 32px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rubik', sans-serif;
  box-shadow: 0 4px 20px rgba(44, 24, 16, 0.1);
  position: relative;
  z-index: 3;
}

.ceremonies-lectures-contact-prompt-section .clcp-cta-btn:hover {
  background: var(--secondary);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.ceremonies-lectures-contact-prompt-section .clcp-arrow-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.ceremonies-lectures-contact-prompt-section .clcp-cta-btn:hover .clcp-arrow-icon {
  transform: translateX(-4px);
}

/* DECORATIVE ROUTE LINE */
.ceremonies-lectures-contact-prompt-section .clcp-route-decoration {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}

.ceremonies-lectures-contact-prompt-section .clcp-route-decoration svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* DECORATIVE STAMP */
.ceremonies-lectures-contact-prompt-section .clcp-stamp {
  position: absolute;
  bottom: 40px;
  left: 60px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.ceremonies-lectures-contact-prompt-section .clcp-stamp svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .ceremonies-lectures-contact-prompt-section {
    padding: 64px 16px;
  }

  .ceremonies-lectures-contact-prompt-section .clcp-container {
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }

  .ceremonies-lectures-contact-prompt-section .clcp-heading-block {
    flex: unset;
    text-align: center;
  }

  .ceremonies-lectures-contact-prompt-section .clcp-heading {
    font-size: 1.75rem;
    text-align: center;
  }

  .ceremonies-lectures-contact-prompt-section .clcp-ornamental-divider {
    margin: 0 auto;
  }

  .ceremonies-lectures-contact-prompt-section .clcp-action-block {
    flex: unset;
    align-items: center;
    text-align: center;
  }

  .ceremonies-lectures-contact-prompt-section .clcp-invitation {
    text-align: center;
    max-width: 100%;
  }

  .ceremonies-lectures-contact-prompt-section .clcp-stamp {
    left: 10px;
    bottom: 10px;
    width: 80px;
    height: 80px;
    opacity: 0.5;
  }

  .ceremonies-lectures-contact-prompt-section .clcp-route-decoration {
    bottom: 10px;
    height: 40px;
  }
}

/* story */
.about-story-section {
  background: linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  color: var(--text-dark);
  padding: 96px 16px;
  position: relative;
  overflow: hidden;
  direction: rtl;
}

/* Container */
.about-story-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Decorative Stamp Circle */
.about-story-section__stamp-circle {
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 140px;
  height: 140px;
  border: 2px dashed var(--primary);
  border-radius: 50%;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.about-story-section__stamp-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--primary) 2px, transparent 3px);
  background-size: 10px 10px;
  opacity: 0.5;
  border-radius: 50%;
}

/* Editorial Grid */
.about-story-section__editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 3;
}

/* Content Column */
.about-story-section__content {
  padding-inline-end: 24px;
}

.about-story-section__headline {
  font-family: 'Rubik', sans-serif;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 24px 0;
  text-align: right;
}

.about-story-section__ornament-horizontal {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 32px;
  opacity: 0.8;
}

.about-story-section__body-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0 0 24px 0;
  text-align: right;
  max-width: 540px;
  margin-inline-start: auto;
}

.about-story-section__signature-block {
  margin-top: 40px;
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 20px;
  text-align: right;
}

.about-story-section__signature-name {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.about-story-section__signature-title {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* Media Column (Image) */
.about-story-section__media {
  margin: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-story-section__image-wrapper {
  position: relative;
  display: inline-block;
  max-width: 480px;
  width: 100%;
}

.about-story-section__portrait {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(44,24,16,0.18);
  object-fit: cover;
  aspect-ratio: 4 / 5;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.about-story-section__portrait:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

/* Blue Ink Border */
.about-story-section__ink-border {
  position: absolute;
  top: 16px;
  left: -16px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--primary);
  border-radius: 4px;
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
}

/* Gold Route Line Detail */
.about-story-section__route-line {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 140px;
  height: 100px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Ornamental Divider (bottom center) */
.about-story-section__ornamental-divider {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
  z-index: 1;
  pointer-events: none;
}

.about-story-section__ornamental-divider::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
  background: var(--bg-light);
  opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
  .about-story-section {
    padding: 64px 16px;
  }

  .about-story-section__editorial-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-story-section__content {
    padding-inline-end: 0;
    order: 2;
  }

  .about-story-section__media {
    order: 1;
    max-width: 400px;
    margin: 0 auto;
  }

  .about-story-section__headline {
    font-size: 2rem;
    text-align: center;
  }

  .about-story-section__ornament-horizontal {
    justify-content: center;
  }

  .about-story-section__body-text {
    max-width: 100%;
    text-align: center;
    margin-inline-start: 0;
  }

  .about-story-section__signature-block {
    text-align: center;
    border-inline-start: none;
    border-top: 3px solid var(--accent);
    padding-inline-start: 0;
    padding-top: 20px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .about-story-section__ink-border {
    top: 12px;
    left: -12px;
  }

  .about-story-section__route-line {
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 70px;
  }

  .about-story-section__stamp-circle {
    width: 100px;
    height: 100px;
    bottom: -10px;
    left: -10px;
  }

  .about-story-section__ornamental-divider {
    bottom: 24px;
  }
}

/* values */
.about-values-section {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(214,162,58,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 75%, rgba(163,52,42,0.05) 0%, transparent 55%),
    linear-gradient(180deg, #2B2118 0%, #1F1810 100%);
  color: var(--text-light);
  padding: var(--spacing-section, 96px) 16px;
  direction: rtl;
}

/* Background contour lines */
.about-values-section__bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.about-values-section__bg-pattern svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Stamp circle decoration */
.about-values-section__stamp {
  position: absolute;
  bottom: 40px;
  left: 30px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

.about-values-section__stamp svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Container */
.about-values-section__container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Header */
.about-values-section__header {
  text-align: center;
  margin-bottom: 64px;
}

.about-values-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0 0 20px 0;
  text-align: center;
  letter-spacing: 0;
}

.about-values-section__divider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 24px auto;
  width: 200px;
  height: 16px;
}

.about-values-section__divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

.about-values-section__subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-light);
  text-align: center;
  margin: 0 auto;
  max-width: 600px;
  opacity: 0.85;
}

/* Grid */
.about-values-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-card-gap, 32px);
  direction: rtl;
}

/* Card */
.about-values-section__card {
  background: rgba(243,231,207,0.04);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card, 6px);
  padding: var(--spacing-card-padding, 32px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.about-values-section__card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 40px;
  background: var(--accent);
  
  border-radius: 0 0 0 4px;
  transition: opacity 0.3s ease, height 0.3s ease;
}

.about-values-section__card:hover {
  background: rgba(243,231,207,0.07);
  border-color: rgba(214,162,58,0.3);
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

.about-values-section__card:hover::before {
  opacity: 0.8;
  height: 60px;
}

/* Card icon */
.about-values-section__card-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  color: var(--accent);
  opacity: 0.85;
}

.about-values-section__card-icon svg {
  width: 40px;
  height: 40px;
  display: block;
}

/* Card title */
.about-values-section__card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0 0 16px 0;
  text-align: right;
}

/* Card text */
.about-values-section__card-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-light);
  text-align: right;
  margin: 0;
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
  .about-values-section {
    padding: var(--spacing-section-mobile, 64px) 16px;
  }

  .about-values-section__header {
    margin-bottom: 40px;
  }

  .about-values-section__title {
    font-size: 1.75rem;
  }

  .about-values-section__subtitle {
    font-size: 1rem;
    line-height: 1.7;
  }

  .about-values-section__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .about-values-section__card {
    padding: 24px;
  }

  .about-values-section__stamp {
    width: 80px;
    height: 80px;
    bottom: 20px;
    left: 12px;
    opacity: 0.4;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .about-values-section__grid {
    gap: 24px;
  }

  .about-values-section__card {
    padding: 28px;
  }
}
/* ZAPPY_POSTGEN_GUARD_SECTION_HEADER:אודות-values */
[data-layout-spec="אודות-values"] > header {
  max-width: min(92vw, 60ch) !important;
  margin-inline: auto !important;
  padding-inline: 16px;
  text-align: center !important;
}
[data-layout-spec="אודות-values"] > header > * { margin-inline: auto !important; max-width: 100% !important; }


/* timeline */
.about-timeline-section {
  position: relative;
  overflow: visible;
  background-color: #E8DCC8;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8963E' fill-opacity='0.05'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--text-dark);
  padding: 96px 16px;
  font-family: 'Rubik', sans-serif;
}

.about-timeline-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.about-timeline-section__header {
  text-align: center;
  margin-bottom: 64px;
}

.about-timeline-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #2C1810;
  margin: 0 0 16px 0;
  text-align: center;
}

.about-timeline-section__subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: #4A3728;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.about-timeline-section__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-inline-start: 0;
}

.about-timeline-section__line {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
  z-index: 1;
  opacity: 0.7;
}

.about-timeline-section__milestone {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  width: 100%;
  gap: 32px;
}

.about-timeline-section__milestone:nth-child(even) {
  flex-direction: row-reverse;
}

.about-timeline-section__marker {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.about-timeline-section__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #B8860B 100%);
  color: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(44,24,16,0.2), 0 0 0 6px rgba(212,168,83,0.25);
  position: relative;
  border: 2px solid var(--bg-light);
}

.about-timeline-section__content {
  flex: 1;
  background: #F5EFE0;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(44,24,16,0.1);
  padding: 32px;
  border: 1px solid rgba(212,168,83,0.15);
  position: relative;
  transition: all 0.3s ease;
}

.about-timeline-section__content:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

.about-timeline-section__content::before {
  content: '';
  position: absolute;
  top: 32px;
  width: 0;
  height: 0;
  border-style: solid;
}

.about-timeline-section__milestone:nth-child(odd) .about-timeline-section__content::before {
  inset-inline-start: -12px;
  border-width: 12px 12px 12px 0;
  border-color: transparent #F5EFE0 transparent transparent;
}

.about-timeline-section__milestone:nth-child(even) .about-timeline-section__content::before {
  inset-inline-end: -12px;
  border-width: 12px 0 12px 12px;
  border-color: transparent transparent transparent #F5EFE0;
}

.about-timeline-section__milestone-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2C1810;
  margin: 0 0 12px 0;
  text-align: start;
  border-bottom: 2px solid var(--secondary);
  padding-bottom: 8px;
  display: inline-block;
}

.about-timeline-section__milestone-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: #4A3728;
  margin: 0;
  text-align: start;
}

.about-timeline-section__cta {
  margin-top: 64px;
  text-align: center;
}

.about-timeline-section__cta-btn {
  display: inline-block;
  background: #C8963E;
  color: #FFFFFF;
  padding: 16px 32px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(44,24,16,0.1);
  font-family: 'Rubik', sans-serif;
}

.about-timeline-section__cta-btn:hover {
  background: var(--secondary);
  box-shadow: 0 8px 32px rgba(44,24,16,0.14);
  transform: translateY(-2px);
}

.about-timeline-section__decor--stamp {
  position: absolute;
  bottom: 40px;
  inset-inline-start: 5%;
  width: 120px;
  height: 120px;
  border: 2px dashed var(--primary);
  border-radius: 50%;
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(49,92,140,0.1) 0%, transparent 70%);
}

@media (max-width: 768px) {
  .about-timeline-section {
    padding: 64px 16px;
  }

  .about-timeline-section__header {
    margin-bottom: 48px;
  }

  .about-timeline-section__title {
    font-size: 1.75rem;
  }

  .about-timeline-section__timeline {
    gap: 32px;
  }

  .about-timeline-section__line {
    inset-inline-start: 30px;
    transform: none;
  }

  .about-timeline-section__milestone,
  .about-timeline-section__milestone:nth-child(even) {
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
  }

  .about-timeline-section__marker {
    flex: 0 0 60px;
    order: 0;
  }

  .about-timeline-section__year {
    width: 60px;
    height: 60px;
    font-size: 1.1rem;
    box-shadow: 0 2px 12px rgba(44,24,16,0.15), 0 0 0 4px rgba(212,168,83,0.2);
  }

  .about-timeline-section__content {
    padding: 20px;
    order: 1;
  }

  .about-timeline-section__content::before {
    display: none;
  }

  .about-timeline-section__milestone-title {
    font-size: 1.25rem;
  }

  .about-timeline-section__cta {
    margin-top: 48px;
  }

  .about-timeline-section__decor--stamp {
    display: none;
  }
}


/* personal-approach */
.about-personal-approach-section {
  background: linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  color: var(--text-dark);
  padding: 96px 16px;
  position: relative;
  overflow: hidden;
  direction: rtl;
}

.about-personal-approach-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Decorative stamp circle */
.about-personal-approach-stamp {
  position: absolute;
  bottom: -30px;
  inset-inline-end: -40px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.about-personal-approach-stamp svg {
  width: 100%;
  height: 100%;
}

/* Ornamental divider */
.about-personal-approach-ornament {
  text-align: center;
  margin-bottom: 32px;
}

.about-personal-approach-ornament svg {
  width: 200px;
  height: auto;
  display: inline-block;
}

/* Central quote-like text block */
.about-personal-approach-quote-block {
  max-width: 800px;
  margin: 0 auto 48px auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.about-personal-approach-headline {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-dark);
  text-align: center;
  margin: 0;
  position: relative;
}

/* Two supporting paragraphs */
.about-personal-approach-paragraphs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 900px;
  margin: 0 auto 64px auto;
  direction: rtl;
}

.about-personal-approach-p {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-dark);
  text-align: start;
  margin: 0;
}

/* Static image strip */
.about-personal-approach-image-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  direction: rtl;
}

.about-personal-approach-figure {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(44,24,16,0.18);
  transition: all 0.3s ease;
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
}

.about-personal-approach-figure:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

.about-personal-approach-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
  min-width: 0;
}

.about-personal-approach-caption {
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  padding: 12px 8px;
  background-color: var(--bg-light);
  border-radius: 0 0 6px 6px;
  border-top: 1px solid var(--border-light);
}

/* City sketch overlay decoration */
.about-personal-approach-section::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 400px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M160 40 L160 80 M120 60 L200 60 M130 100 L130 140 M190 100 L190 140 M120 140 L200 140 M140 180 L140 220 M180 180 L180 220 M120 220 L200 220 M150 260 L150 300 M170 260 L170 300 M120 300 L200 300 M140 340 L140 380 M180 340 L180 380 M120 380 L200 380' stroke='%232C1810' stroke-width='1.5' fill='none' opacity='0.08'/%3E%3Ccircle cx='160' cy='120' r='30' fill='none' stroke='%232C1810' stroke-width='1.5' opacity='0.08'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .about-personal-approach-section {
    padding: 64px 16px;
  }

  .about-personal-approach-stamp {
    width: 80px;
    height: 80px;
    bottom: -20px;
    inset-inline-end: -20px;
  }

  .about-personal-approach-headline {
    font-size: 1.5rem;
    line-height: 1.5;
  }

  .about-personal-approach-paragraphs {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
  }

  .about-personal-approach-image-strip {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-personal-approach-figure {
    max-width: 400px;
    margin: 0 auto;
  }

  .about-personal-approach-section::before {
    display: none;
  }

  .about-personal-approach-ornament {
    margin-bottom: 24px;
  }

  .about-personal-approach-quote-block {
    margin-bottom: 32px;
  }
}


/* cta-panel */
/* ==============================================
   CTA PANEL SECTION — אודות-cta-panel
   Dark closing panel with centered H2, paragraph,
   and one CTA leading to the Contact page.
   Visual: Deep ink-brown with textLight, warm gold CTA,
   and a final route endpoint motif.
   ============================================== */

.about-cta-panel-section {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(circle at 15% 85%, rgba(214,162,58,0.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(49,92,140,0.08) 0%, transparent 45%),
    linear-gradient(180deg, #2B2118 0%, #1F1810 100%);
  color: var(--text-light);
  padding: var(--spacing-section, 96px) 16px;
  text-align: center;
  direction: rtl;
}

/* ── Container ────────────────────────────── */
.about-cta-panel-section__container {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  z-index: 2;
}

/* ── Decorative Route-Line Motif ──────────── */
.about-cta-panel-section__route-motif {
  display: block;
  width: 200px;
  height: 80px;
  margin: 0 auto 32px;
  color: var(--accent);
  pointer-events: none;
}

/* ── Content Block ────────────────────────── */
.about-cta-panel-section__content {
  position: relative;
  z-index: 2;
}

/* ── Heading ──────────────────────────────── */
.about-cta-panel-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;   /* 32px — matches H2 rule */
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0 0 24px 0;
  text-align: center;
}

/* ── Paragraph ────────────────────────────── */
.about-cta-panel-section__text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;   /* 16px — matches body rule */
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto 40px;
  text-align: center;
}

/* ── CTA Button (warm gold) ───────────────── */
.about-cta-panel-section__cta {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-dark);
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: var(--radius-btn, 6px);
  border: none;
  box-shadow: var(--shadow-card, 0 8px 30px rgba(0,0,0,0.14));
  transition: all 0.3s ease;
  cursor: pointer;
}

.about-cta-panel-section__cta:hover {
  background: #C8963E;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 16px 56px rgba(44,24,16,0.22);
}

/* ── Decorative Stamp Motif ───────────────── */
.about-cta-panel-section__stamp {
  position: absolute;
  bottom: -20px;
  inset-inline-end: -40px;
  width: 120px;
  height: 120px;
  color: var(--accent);
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.about-cta-panel-section__stamp svg {
  width: 100%;
  height: 100%;
}

/* ════════════════════════════════════════════
   RESPONSIVE — Mobile
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
  .about-cta-panel-section {
    padding: var(--spacing-section-mobile, 64px) 16px;
  }

  .about-cta-panel-section__heading {
    font-size: 1.75rem; /* ~28px */
  }

  .about-cta-panel-section__text {
    margin-bottom: 32px;
  }

  .about-cta-panel-section__cta {
    padding: 14px 28px;
    font-size: 0.95rem;
  }

  .about-cta-panel-section__stamp {
    width: 80px;
    height: 80px;
    bottom: -10px;
    inset-inline-end: -20px;
  }

  .about-cta-panel-section__route-motif {
    width: 140px;
    margin-bottom: 24px;
  }
}


/* contact-intro */
.contact-contact-intro-section {
  background: linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  color: var(--text-dark);
  padding: 120px 16px 80px;
  position: relative;
  overflow: visible;
  text-align: right;
}

.contact-contact-intro-section__container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.contact-contact-intro-section__header {
  width: 100%;
  text-align: center;
}

.contact-contact-intro-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 20px 0;
  text-align: center;
  max-width: none !important;
}

.contact-contact-intro-section__subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-dark);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.contact-contact-intro-section__route-illustration {
  width: 100%;
  max-width: 500px;
  margin-top: 8px;
  pointer-events: none;
}

.contact-contact-intro-section__route-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .contact-contact-intro-section {
    padding: 100px 16px 64px;
  }

  .contact-contact-intro-section__container {
    gap: 32px;
  }

  .contact-contact-intro-section__title {
    font-size: 2rem;
  }

  .contact-contact-intro-section__subtitle {
    font-size: 1rem;
    max-width: 100%;
  }

  .contact-contact-intro-section__route-illustration {
    max-width: 320px;
  }
}
/* ZAPPY_POSTGEN_GUARD_SECTION_HEADER:צור קשר-contact-intro */
[data-layout-spec="צור קשר-contact-intro"] > header {
  max-width: min(92vw, 60ch) !important;
  margin-inline: auto !important;
  padding-inline: 16px;
  text-align: center !important;
}
[data-layout-spec="צור קשר-contact-intro"] > header > * { margin-inline: auto !important; max-width: 100% !important; }


/* contact-form */
.contact-contact-form-section {
  background: linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  color: var(--text-dark);
  padding: var(--spacing-section, 96px) 16px;
  position: relative;
  overflow: visible;
  direction: rtl;
}

.contact-contact-form-section__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
}

/* Form Column */
.contact-contact-form-section__form-col {
  flex: 1 1 55%;
  max-width: 600px;
  margin-inline-start: 0;
}

.contact-contact-form-section__form-card {
  position: relative;
  background: #F5EFE0;
  border-radius: var(--radius-card, 6px);
  border: 1px solid rgba(212, 168, 83, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  padding: var(--spacing-card-padding, 32px);
  overflow: hidden;
}

.contact-contact-form-section__map-fragment {
  position: absolute;
  bottom: -10px;
  inset-inline-end: -20px;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.contact-contact-form-section__map-fragment svg {
  width: 100%;
  height: 100%;
}

.contact-contact-form-section__form-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 8px 0;
  text-align: right;
  position: relative;
  z-index: 2;
}

.contact-contact-form-section__form-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 32px 0;
  text-align: right;
  position: relative;
  z-index: 2;
}

.contact-contact-form-section .contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.contact-contact-form-section__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}

.contact-contact-form-section__label {
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 0.02em;
}

.contact-contact-form-section__input,
.contact-contact-form-section__textarea {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-input, 6px);
  color: var(--text-dark);
  transition: all 0.3s ease;
  outline: none;
  box-shadow: inset 0 2px 8px rgba(44, 24, 16, 0.04);
}

.contact-contact-form-section__input:focus,
.contact-contact-form-section__textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(49, 92, 140, 0.1);
}

.contact-contact-form-section__input::placeholder,
.contact-contact-form-section__textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.contact-contact-form-section__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-contact-form-section .privacy-consent {
  margin-top: 4px;
  text-align: right;
}

.contact-contact-form-section .privacy-consent-label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-dark);
  cursor: pointer;
}

.contact-contact-form-section .privacy-consent-checkbox {
  margin-top: 2px;
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.contact-contact-form-section .privacy-consent-label a {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 600;
}

.contact-contact-form-section__submit-btn {
  background: var(--accent, #D6A23A);
  color: #FFFFFF;
  padding: 16px 32px;
  border-radius: var(--radius-btn, 6px);
  border: none;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 12px;
  width: fit-content;
  align-self: flex-start;
  box-shadow: 0 4px 12px rgba(214, 162, 58, 0.3);
}

.contact-contact-form-section__submit-btn:hover {
  background: #C8963E;
  box-shadow: 0 8px 24px rgba(200, 150, 62, 0.4);
  transform: translateY(-2px);
}

/* Guidance Column */
.contact-contact-form-section__guidance-col {
  flex: 1 1 45%;
  max-width: 520px;
}

.contact-contact-form-section__guidance-card {
  background: #F5EFE0;
  border-radius: var(--radius-card, 6px);
  border: 1px solid rgba(212, 168, 83, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  padding: var(--spacing-card-padding, 32px);
  text-align: right;
}

.contact-contact-form-section__guidance-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 12px 0;
}

.contact-contact-form-section__guidance-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0 0 20px 0;
}

.contact-contact-form-section__guidance-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-contact-form-section__guidance-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-dark);
}

.contact-contact-form-section__guidance-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--primary);
  margin-top: 2px;
}

.contact-contact-form-section__guidance-icon svg {
  width: 100%;
  height: 100%;
}

.contact-contact-form-section__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--border-light), transparent);
  margin: 24px 0;
  opacity: 0.6;
}

.contact-contact-form-section__response-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 8px 0;
}

.contact-contact-form-section__response-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0 0 24px 0;
}

.contact-contact-form-section__contact-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-contact-form-section__detail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.contact-contact-form-section__detail-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.contact-contact-form-section__detail-icon svg {
  width: 100%;
  height: 100%;
}

.contact-contact-form-section__detail-link {
  font-family: 'Rubik', sans-serif;
  font-size: 0.95rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.contact-contact-form-section__detail-link:hover {
  color: var(--secondary);
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-contact-form-section {
    padding: var(--spacing-section-mobile, 64px) 16px;
  }

  .contact-contact-form-section__container {
    flex-direction: column;
    gap: 32px;
  }

  .contact-contact-form-section__form-col,
  .contact-contact-form-section__guidance-col {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .contact-contact-form-section__form-card,
  .contact-contact-form-section__guidance-card {
    padding: 24px 20px;
  }

  .contact-contact-form-section__map-fragment {
    width: 160px;
    height: 160px;
    bottom: -10px;
    inset-inline-end: -15px;
  }

  .contact-contact-form-section__form-title {
    font-size: 1.75rem;
  }

  .contact-contact-form-section__submit-btn {
    width: 100%;
    text-align: center;
  }
}

/* contact-options */
.contact-contact-options-section {
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(ellipse at 15% 80%, rgba(214, 162, 58, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(49, 92, 140, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #1A2744 0%, #0F1A30 100%);
  color: var(--text-light);
  padding: var(--spacing-section) 16px;
  position: relative;
  overflow: hidden;
  direction: rtl;
  text-align: right;
}

.contact-contact-options-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Header */
.contact-contact-options-section__header {
  text-align: center;
  margin-bottom: 64px;
  max-width: 700px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.contact-contact-options-section__title {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--text-light);
  font-family: 'Rubik', sans-serif;
  margin-bottom: 16px;
}

.contact-contact-options-section__subtitle {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-light);
  font-family: 'Rubik', sans-serif;
  margin-bottom: 24px;
  opacity: 0.85;
}

.contact-contact-options-section__divider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.contact-contact-options-section__divider svg {
  display: block;
}

/* Grid */
.contact-contact-options-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-card-gap);
  direction: rtl;
}

/* Card */
.contact-contact-options-section__card {
  background: rgba(245, 239, 224, 0.06);
  border-radius: var(--radius-card);
  border: 1px solid rgba(49, 92, 140, 0.35);
  padding: var(--spacing-card-padding);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-contact-options-section__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(214, 162, 58, 0.45);
}

.contact-contact-options-section__card-accent {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 100% 0%, rgba(163, 52, 42, 0.2) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.contact-contact-options-section__card-accent::after {
  content: '';
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 6px;
  height: 6px;
  background: var(--secondary);
  border-radius: 50%;
  opacity: 0.7;
}

.contact-contact-options-section__card-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  font-family: 'Rubik', sans-serif;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
  padding-top: 8px;
}

.contact-contact-options-section__card-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-light);
  font-family: 'Rubik', sans-serif;
  margin-bottom: 24px;
  flex-grow: 1;
  opacity: 0.85;
  position: relative;
  z-index: 2;
}

.contact-contact-options-section__card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 2;
  padding-top: 16px;
  border-top: 1px solid rgba(214, 162, 58, 0.2);
}

.contact-contact-options-section__card-badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  font-family: 'Rubik', sans-serif;
  background: rgba(214, 162, 58, 0.1);
  border: 1px solid rgba(214, 162, 58, 0.25);
  border-radius: var(--radius-badge);
  padding: 4px 12px;
  line-height: 1.4;
}

/* CTA */
.contact-contact-options-section__cta {
  text-align: center;
  margin-top: 56px;
}

.contact-contact-options-section__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #FFFFFF;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  border: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Rubik', sans-serif;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-subtle);
}

.contact-contact-options-section__cta-link:hover {
  box-shadow: var(--shadow-colored);
  transform: translateY(-2px);
}

.contact-contact-options-section__cta-link svg {
  flex-shrink: 0;
}

/* Decorative Stamp */
.contact-contact-options-section__stamp {
  position: absolute;
  bottom: 40px;
  inset-inline-end: 24px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

.contact-contact-options-section__stamp svg {
  width: 100%;
  height: 100%;
}

/* Decorative Sketch */
.contact-contact-options-section__sketch {
  position: absolute;
  bottom: -20px;
  inset-inline-start: -40px;
  width: 320px;
  height: 400px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

.contact-contact-options-section__sketch svg {
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-contact-options-section {
    padding: var(--spacing-section-mobile) 16px;
  }

  .contact-contact-options-section__header {
    margin-bottom: 40px;
  }

  .contact-contact-options-section__title {
    font-size: 1.75rem;
  }

  .contact-contact-options-section__subtitle {
    font-size: 1rem;
  }

  .contact-contact-options-section__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .contact-contact-options-section__card {
    padding: 24px;
  }

  .contact-contact-options-section__cta {
    margin-top: 40px;
  }

  .contact-contact-options-section__stamp {
    bottom: 20px;
    inset-inline-end: 8px;
    width: 80px;
    height: 80px;
    opacity: 0.5;
  }

  .contact-contact-options-section__sketch {
    bottom: -40px;
    inset-inline-start: -60px;
    width: 200px;
    height: 280px;
    opacity: 0.35;
  }
}

/* expectations */
.contact-expectations-section {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-light);
  background-image: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8963E' fill-opacity='0.04'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  color: var(--text-dark);
  padding: var(--spacing-section, 96px) 16px;
  direction: rtl;
  text-align: right;
}

.contact-expectations-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* Header */
.contact-expectations-section__header {
  margin-bottom: 56px;
  text-align: center;
}

.contact-expectations-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 16px;
  text-align: center;
}

.contact-expectations-section__subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* Checklist Grid */
.contact-expectations-section__checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-card-gap, 32px);
  margin-bottom: 48px;
}

/* Checklist Item */
.contact-expectations-section__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(2px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card, 6px);
  padding: var(--spacing-card-padding, 32px);
  box-shadow: var(--shadow-subtle, 0 2px 12px rgba(0,0,0,0.08));
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact-expectations-section__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  
  transition: opacity 0.3s ease;
  border-radius: 0 4px 4px 0;
}

.contact-expectations-section__item:hover {
  box-shadow: var(--shadow-card, 0 8px 30px rgba(0,0,0,0.14));
  transform: translateY(-4px);
  border-color: var(--accent);
}

.contact-expectations-section__item:hover::before {
  opacity: 1;
}

.contact-expectations-section__item-icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-block-start: 4px;
  color: var(--accent);
}

.contact-expectations-section__item-icon svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.contact-expectations-section__item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-expectations-section__item-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--primary);
  margin: 0;
}

.contact-expectations-section__item-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0;
}

/* Warm Reassurance Footer */
.contact-expectations-section__footer {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.contact-expectations-section__ornament {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.contact-expectations-section__ornament svg {
  width: 200px;
  height: 20px;
}

.contact-expectations-section__reassurance {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--text-dark);
  text-align: center;
}

/* Decorative Background Motifs */
.contact-expectations-section__bg-sketch {
  position: absolute;
  inset-inline-start: -60px;
  bottom: -40px;
  width: 320px;
  height: 320px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 280 Q60 240 100 220 T160 180 T220 140 Q260 100 280 60' fill='none' stroke='%232C1810' stroke-width='1.5' opacity='0.06'/%3E%3Cpath d='M60 260 Q80 200 120 180 T180 140 T240 100' fill='none' stroke='%232C1810' stroke-width='1' opacity='0.04'/%3E%3Ccircle cx='160' cy='180' r='4' fill='%232C1810' opacity='0.06'/%3E%3Ccircle cx='100' cy='220' r='3' fill='%232C1810' opacity='0.05'/%3E%3Ccircle cx='220' cy='140' r='3' fill='%232C1810' opacity='0.05'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.contact-expectations-section__bg-stamp {
  position: absolute;
  inset-inline-end: -40px;
  top: 60px;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

.contact-expectations-section__bg-stamp svg {
  width: 100%;
  height: 100%;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .contact-expectations-section {
    padding: var(--spacing-section-mobile, 64px) 16px;
  }

  .contact-expectations-section__header {
    margin-bottom: 40px;
  }

  .contact-expectations-section__title {
    font-size: 1.75rem;
  }

  .contact-expectations-section__checklist {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .contact-expectations-section__item {
    padding: 24px;
    grid-template-columns: 40px 1fr;
    gap: 16px;
  }

  .contact-expectations-section__item-icon svg {
    width: 28px;
    height: 28px;
  }

  .contact-expectations-section__bg-sketch {
    width: 200px;
    height: 200px;
    inset-inline-start: -40px;
    bottom: -20px;
  }

  .contact-expectations-section__bg-stamp {
    width: 100px;
    height: 100px;
    inset-inline-end: -20px;
    top: 20px;
  }
}



/* Global font override - exclude icon fonts and special elements */
*:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(.iconify):not([class*="icon"]):not(code):not(pre):not(i[class*="fa"]) {
  font-family: 'Rubik', sans-serif !important;
}


/* Logo size constraint - enforce max-height only */
.logo, img.logo, .logo img, .logo-link img, .nav-brand img {
  max-height: 40px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
}


/* Footer contact alignment fix */
.footer-contact li > a { display: flex; align-items: flex-start; gap: inherit; }

/* RTL footer contact: icon on the right (start) side, text on the left */
html[dir="rtl"] .footer-contact li, html[dir="rtl"] .site-footer .footer-contact li, html[dir="rtl"] .site-footer .footer-col:nth-child(3) .footer-contact li { flex-direction: row !important; justify-content: flex-start !important; }
html[dir="rtl"] .footer-contact .contact-icon { order: 0 !important; }
html[dir="rtl"] .footer-contact .contact-text { order: 1 !important; }
html[dir="rtl"] .footer-contact li > a { flex-direction: row !important; }


/* ============================================
   MOBILE RESPONSIVE FIXES (Auto-generated)
   Safe, minimal fixes for common overflow issues
   ============================================ */

@media (max-width: 768px) {
  
  /* 1. GLOBAL FIXES - Essential for preventing horizontal scroll */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }
  
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* 2. FORM FIXES - Forms often have fixed widths */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .form-field,
  .form-group,
  .input-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. GRID TO COLUMN CONVERSION */
  /* Only convert grids that don't have proper mobile handling */
  [style*="display: grid"]:not([data-zappy-auto-grid="true"]):not(.zappy-preserve-css-grid),
  [style*="display:grid"]:not([data-zappy-auto-grid="true"]):not(.zappy-preserve-css-grid),
  .grid:not([data-zappy-auto-grid="true"]):not(.zappy-preserve-css-grid) {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  /* Ensure auto-grids use single column on mobile */
  [data-zappy-auto-grid="true"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Force single-column for AI-generated grids with class names like gallery-grid, features-grid, etc. */
  /* These often have fixed column counts (repeat(3, 1fr) or repeat(4, 1fr)) that don't fit mobile */
  [class*="-grid"]:not([data-zappy-auto-grid="true"]):not([data-zappy-explicit-columns="true"]) {
    grid-template-columns: 1fr !important;
  }
  
  /* Reset any column/row spanning items on mobile - they cause overflow */
  [class*="-grid"] > [class*="-large"],
  [class*="-grid"] > [class*="-item-large"],
  [class*="-grid"] > [style*="grid-column: span"],
  [class*="-grid"] > [style*="grid-row: span"] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
  /* Fix zoom wrapper images to be responsive on mobile */
  [data-zappy-zoom-wrapper="true"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  
  [data-zappy-zoom-wrapper="true"] img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: cover !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Hero sections need extra padding-top to clear the sticky navbar */
  /* The navbar is ~70px tall, so hero needs at least 100px padding-top */
  /* IMPORTANT: Use section tag to avoid matching child elements like buttons that contain "-hero-section" in their BEM class */
  section[class*="-hero-section"]:first-of-type,
  main > section:first-child {
    padding-top: 100px !important;
  }

  main > section:first-child:has(.hero-sbs-wrap),
  section[class*="-hero-section"]:first-of-type:has(.hero-sbs-wrap) {
    padding-top: 0 !important;
  }

  .hero-sbs-image-frame [data-zappy-zoom-wrapper="true"] img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 4. TYPOGRAPHY SCALING - Only headings, NOT spans (breaks icons) */
  h1 {
    font-size: clamp(28px, 8vw, 48px) !important;
  }
  
  h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  
  h3 {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  
  h4 {
    font-size: clamp(18px, 4vw, 24px) !important;
  }

  /* Body text scaling - exclude spans to avoid breaking icons */
  p, li {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  /* 5. IMAGE RESPONSIVENESS */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 5b. HERO BG IMAGE EXCEPTION - fullscreen hero backgrounds must fill their
     absolute-positioned wrapper, not shrink to natural aspect-ratio height.
     data-hero-bg is added deterministically by sectionGenerationService. */
  img[data-hero-bg] {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* 6. MULTI-COLUMN LAYOUTS */
  .columns,
  [style*="column-count"],
  [style*="columns:"] {
    column-count: 1 !important;
    columns: 1 !important;
  }

  /* 7. TABLES */
  table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
  }

  /* 8. CARDS/BLOCKS */
  .card,
  .block,
  .box {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 9. HERO SECTIONS - Targeted selectors only */
  section.hero,
  section.hero-section,
  section[class*="hero-section"] {
    min-height: auto !important;
    height: auto !important;
    padding: 2rem 1rem !important;
  }

  /* 9b. HERO SECTION CHILDREN - prevent 100vh min-height on inner wrappers
     AI often sets content-wrappers / scrim divs to min-height:100vh which
     creates huge empty space on mobile. Reset direct children so the section
     sizes to its content. Absolute-positioned backgrounds are unaffected. */
  section.hero > *,
  section.hero-section > *,
  section[class*="hero-section"] > * {
    min-height: auto !important;
  }

  /* 9c. FULLSCREEN HERO EXCEPTION — from sharedMobileCss.js */

  section[data-hero-type*="fullscreen"] {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 clamp(1rem, 5vw, 1.5rem) 90px !important;
  }
  section[data-hero-type*="fullscreen"] > [class*="-container"]:not([class*="bg"]):not([class*="scrim"]):not([class*="divider"]),
  section[data-hero-type*="fullscreen"] > .container {
    padding-bottom: 100px !important;
    min-height: auto !important;
  }

  /* 10. HERO TITLE ACCENTS - ensure inline display for proper text flow */
  h1 span[class*="accent"],
  h2 span[class*="accent"],
  .hero-title span,
  .hero-heading span {
    display: inline !important;
  }

  /* 11. PACKAGES/CARDS GRIDS - Specific class targeting */
  .packages-grid,
  .cards-grid,
  .pricing-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* 12. PREVENT HORIZONTAL SCROLL - Safety net */
  body > * {
    max-width: 100vw !important;
  }
}

/* END MOBILE RESPONSIVE FIXES */


/* Legal Pages Content Styles */

/* Legal Pages Content Styles */
.legal-page-content {
  padding: 120px 0 60px;
  min-height: 60vh;
  color: inherit;
}

.legal-page-content .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.legal-page-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: inherit;
}

.legal-page-content .last-updated {
  color: #666;
  margin-bottom: 2rem;
  font-style: italic;
}

.legal-page-content h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: inherit;
}

.legal-page-content p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.legal-page-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

[dir="rtl"] .legal-page-content ul {
  padding-left: 0;
  padding-right: 1.5rem;
}

.legal-page-content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.legal-page-content .contact-box,
.legal-page-content .contact-info {
  background: rgba(0, 0, 0, 0.03);
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-page-content .contact-box a,
.legal-page-content .contact-info a {
  color: inherit;
  text-decoration: underline;
}

.legal-page-content .contact-box a:hover,
.legal-page-content .contact-info a:hover {
  opacity: 0.8;
}

.legal-page-content .important-notice,
.legal-page-content .legal-reference {
  background: rgba(0, 0, 0, 0.03);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  border-left: 4px solid currentColor;
}

[dir="rtl"] .legal-page-content .important-notice,
[dir="rtl"] .legal-page-content .legal-reference {
  border-left: none;
  border-right: 4px solid currentColor;
}

/* Cookie Consent Styles */

/* Cookie Consent Customizations ccCssV13 */
:root {
  /* --cc-bg has to STAY translucent (with the matching backdrop-filter on
   * the bar below) so the slim bar reads as a frosted overlay rather than
   * a solid horizontal stripe slapped on top of the page. The preferences
   * modal — which doesn't use backdrop-filter — overrides this to a solid
   * white below so it doesn't render see-through against the page. */
  --cc-bg: rgba(255, 255, 255, 0.96);
  --cc-modal-bg: #ffffff;
  --cc-primary-color: #1f2937;
  --cc-secondary-color: #4b5563;
  --cc-btn-primary-bg: #315c8c;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border: #315c8c;
  --cc-btn-primary-hover-bg: #184373;
  --cc-btn-primary-hover-border: #184373;
  --cc-btn-primary-hover-color: #ffffff;
  /* --cc-btn-secondary-* are used by BOTH the bar's "Customize" link and
   * the preferences modal's "Accept Necessary" / "Save Preferences" pills.
   * We keep the token defaults sensible (light grey fill, dark text) so
   * the preferences-modal buttons stay visible, then override only
   * .zappy-cookie-banner__button--customize directly to render the
   * Customize link as a transparent underlined text. */
  --cc-btn-secondary-bg: #f3f4f6;
  --cc-btn-secondary-color: #1f2937;
  --cc-btn-secondary-border: #e5e7eb;
  --cc-btn-secondary-hover-bg: #e5e7eb;
  --cc-btn-secondary-hover-color: #111827;
  --cc-btn-secondary-hover-border: #d1d5db;
  --cc-toggle-on-bg: #315c8c;
}

#cc-main,
#cc--main {
  font-family: inherit !important;
  color: var(--cc-primary-color);
}

/* === Zappy-owned slim bottom bar ===
 * Single-row inline layout: [description text] ......... [Customize] [Accept]
 * The banner is our DOM (#zappy-cookie-banner), not the library's #cm
 * consent modal. That avoids vanilla-cookieconsent's internal
 * <button><span>Label</span></button> structure entirely.
 */
#zappy-cookie-banner {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 56px 10px 20px !important;
  background: var(--cc-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border: none !important;
  border-top: 1px solid rgba(49, 92, 140, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  z-index: 2147483646;
}

#zappy-cookie-banner .zappy-cookie-banner__inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  max-width: 1200px;
  width: 100% !important;
  margin: 0 auto;
  padding: 0 !important;
  min-height: 32px !important;
}

#zappy-cookie-banner .zappy-cookie-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--cc-primary-color) !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#zappy-cookie-banner .zappy-cookie-banner__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

#zappy-cookie-banner .zappy-cookie-banner__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  height: 32px !important;
  min-height: 0 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

/* Primary "Accept" — filled pill in site primary color */
#zappy-cookie-banner .zappy-cookie-banner__button--accept {
  background-color: var(--cc-btn-primary-bg) !important;
  color: var(--cc-btn-primary-color) !important;
  border: 1px solid var(--cc-btn-primary-border) !important;
}

#zappy-cookie-banner .zappy-cookie-banner__button--accept:hover {
  background-color: var(--cc-btn-primary-hover-bg) !important;
  border-color: var(--cc-btn-primary-hover-border) !important;
}

/* Secondary "Customize" — borderless underlined text link.
 * Same height as the Accept pill so the row stays perfectly aligned, but
 * with no fill, no border, and an underline that sits 3px below the
 * baseline (text-underline-offset). Hard-coded brand color so this rule
 * doesn't depend on --cc-btn-secondary-* (which have to stay sensible
 * defaults for the preferences modal's two secondary pills). */
#zappy-cookie-banner .zappy-cookie-banner__button--customize {
  background-color: transparent !important;
  color: #315c8c !important;
  border: none !important;
  padding: 0 8px !important;
  height: 32px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 6px !important;
}

#zappy-cookie-banner .zappy-cookie-banner__button--customize:hover {
  color: #184373 !important;
  background-color: transparent !important;
}

#zappy-cookie-banner .zappy-cookie-banner__close {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--cc-secondary-color) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#zappy-cookie-banner .zappy-cookie-banner__close:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--cc-primary-color) !important;
}
#zappy-cookie-banner .zappy-cookie-banner__button:focus-visible,
#zappy-cookie-banner .zappy-cookie-banner__close:focus-visible {
  outline: 2px solid var(--cc-btn-primary-bg) !important;
  outline-offset: 2px;
}
/* RTL: anchor the X to the top-LEFT and shift body padding accordingly. */
[dir="rtl"] #zappy-cookie-banner {
  padding: 10px 20px 10px 56px !important;
}
[dir="rtl"] #zappy-cookie-banner .zappy-cookie-banner__close {
  right: auto !important;
  left: 12px !important;
}

/* === Preferences modal — minimalist restyle ===
 * The modal opens when "Customize" is clicked. It MUST render as a solid
 * card — pre-fix it inherited the bar's translucent --cc-bg without the
 * matching backdrop-filter, leaving the page footer visibly bleeding
 * through the modal box, the title, the toggle rows, and the bottom
 * button row. Solid white box + clean shadow + an explicit slightly
 * darker scrim on the overlay restores proper modal hierarchy. */
/* The scrim belongs on wrapper layers only. In vanilla-cookieconsent v3,
 * .pm / #pm is the preferences card itself, so styling .pm as the dark
 * overlay makes the card look transparent. */
#cc-main .pm-wrapper,
#cc--main .pm-wrapper,
#cc-main .pm-wrapper.pm--box,
#cc--main .pm-wrapper.pm--box {
  background: rgba(0, 0, 0, 0.32) !important;
}

#cc-main #pm,
#cc--main #pm,
#cc-main .pm,
#cc--main .pm,
#cc-main .pm .pm__box,
#cc--main .pm .pm__box,
#cc-main .pm__box,
#cc--main .pm__box {
  background: var(--cc-modal-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18) !important;
}

#cc-main .pm__header,
#cc--main .pm__header,
#cc-main .pm__body,
#cc--main .pm__body,
#cc-main .pm__footer,
#cc--main .pm__footer,
#cc-main .pm__section,
#cc--main .pm__section {
  background: var(--cc-modal-bg) !important;
}

#cc-main .pm__title,
#cc--main .pm__title {
  font-weight: 600 !important;
  color: var(--cc-primary-color) !important;
}

#cc-main .pm__btn[data-role="accept-all"],
#cc--main .pm__btn[data-role="accept-all"] {
  background-color: var(--cc-btn-primary-bg) !important;
  border-color: var(--cc-btn-primary-border) !important;
  color: var(--cc-btn-primary-color) !important;
  border-radius: 999px !important;
}

#cc-main .pm__btn[data-role="accept-all"]:hover,
#cc--main .pm__btn[data-role="accept-all"]:hover {
  background-color: var(--cc-btn-primary-hover-bg) !important;
  border-color: var(--cc-btn-primary-hover-border) !important;
}

/* Secondary modal pills — "Accept Necessary" + "Save Preferences".
 * Must be a visible solid fill (light grey on white card) so users can
 * actually find them. Pre-fix these inherited --cc-btn-secondary-bg:
 * transparent (used by the bar's Customize text link), making them
 * invisible against the modal background. */
#cc-main .pm__btn,
#cc--main .pm__btn {
  border-radius: 999px !important;
}
#cc-main .pm__btn[data-role="necessary"],
#cc--main .pm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="save"],
#cc--main .pm__btn[data-role="save"] {
  background-color: var(--cc-btn-secondary-bg) !important;
  color: var(--cc-btn-secondary-color) !important;
  border: 1px solid var(--cc-btn-secondary-border) !important;
}
#cc-main .pm__btn[data-role="necessary"]:hover,
#cc--main .pm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="save"]:hover,
#cc--main .pm__btn[data-role="save"]:hover {
  background-color: var(--cc-btn-secondary-hover-bg) !important;
  color: var(--cc-btn-secondary-hover-color) !important;
  border-color: var(--cc-btn-secondary-hover-border) !important;
}

/* Toggle thumbs in brand color when on */
#cc-main .section__toggle:checked + .toggle__icon,
#cc--main .section__toggle:checked + .toggle__icon,
#cc-main .section__toggle:checked ~ .toggle__icon,
#cc--main .section__toggle:checked ~ .toggle__icon {
  background-color: var(--cc-toggle-on-bg) !important;
}

/* Mobile fallback: two rows (description on top, buttons below) */
@media (max-width: 640px) {
  #zappy-cookie-banner {
    padding: 10px 14px !important;
  }
  #zappy-cookie-banner .zappy-cookie-banner__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #zappy-cookie-banner .zappy-cookie-banner__text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
  }
  #zappy-cookie-banner .zappy-cookie-banner__actions {
    width: 100%;
    justify-content: space-between;
  }
  #zappy-cookie-banner .zappy-cookie-banner__button--accept {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Cookie preferences button in legal footer keeps default behavior */
.cookie-preferences-btn:hover {
  text-decoration: none !important;
}

/* Accessibility Styles */

/* Basic Accessibility Enhancements */
:root {
  --accessibility-focus: #F3E7CF;
}

/* Skip link styles */
.skip-link:focus {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  background: #000 !important;
  color: white !important;
  padding: 8px !important;
  text-decoration: none !important;
  z-index: 10000 !important;
  border-radius: 4px !important; transform: none; }

/* Enhanced focus indicators */
*:focus {
  outline: 2px solid var(--accessibility-focus) !important;
  outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
}

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

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Custom Accessibility Toolbar Styling - Zappy Style */

/* Main button icon - ONLY target the floating button, not menu elements */
#mic-access-tool-general-button {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* AGGRESSIVELY hide all text in the button */
#mic-access-tool-general-button,
#mic-access-tool-general-button *:not(svg):not(path):not(circle):not(rect):not(polygon):not(ellipse):not(line):not(polyline):not(g) {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  line-height: 0 !important;
  letter-spacing: -999em !important;
  white-space: nowrap !important;
}

/* Hide text nodes specifically */

/* Hover state - keep text hidden */
#mic-access-tool-general-button:hover {
  background-color: rgba(243, 231, 207, 0.1) !important;
  background: rgba(243, 231, 207, 0.1) !important;
  box-shadow: 0 2px 8px rgba(243, 231, 207, 0.2) !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

/* Target the SVG and make it the selected color */
#mic-access-tool-general-button svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  /* Convert green to selected color using dynamic CSS filter */
  filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Also directly target all SVG elements to be the selected color */
#mic-access-tool-general-button svg,
#mic-access-tool-general-button svg *,
#mic-access-tool-general-button svg path,
#mic-access-tool-general-button svg circle,
#mic-access-tool-general-button svg rect,
#mic-access-tool-general-button svg polygon,
#mic-access-tool-general-button svg ellipse,
#mic-access-tool-general-button svg line,
#mic-access-tool-general-button svg polyline,
#mic-access-tool-general-button svg g {
  fill: #F3E7CF !important;
  stroke: #F3E7CF !important;
  color: #F3E7CF !important;
}

/* Target images if the icon is an img instead of SVG */
#mic-access-tool-general-button img,
#mic-access-tool-general-button i {
  width: 18px !important;
  height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* Convert green to selected color using dynamic filter */
  filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Menu header with selected color */
#mic-access-tool-box .mic-access-tool-box-header,
.mic-access-tool-box-header,
div[id*="mic-access-tool-box"] header,
div[id*="mic-access-tool-box"] .header {
  background: #F3E7CF !important;
  color: white !important;
}

/* Make header text white - title and close button */
#mic-access-tool-box .mic-access-tool-box-header *,
.mic-access-tool-box-header *,
div[id*="mic-access-tool-box"] header *,
div[id*="mic-access-tool-box"] .header * {
  color: white !important;
}

/* Close button text */
#mic-access-tool-box .mic-access-tool-box-header button,
#mic-access-tool-box .mic-access-tool-box-header a,
#mic-access-tool-box [class*="close"],
#mic-access-tool-box button[title*="close"],
#mic-access-tool-box button[title*="Close"] {
  color: white !important;
  background: transparent !important;
}

/* Active buttons and highlights in menu */
#mic-access-tool-box button.active,
#mic-access-tool-box button:hover,
div[id*="mic-access-tool-box"] button.active,
div[id*="mic-access-tool-box"] button:hover {
  border-color: #F3E7CF !important;
  color: #F3E7CF !important;
  background-color: rgba(243, 231, 207, 0.1) !important;
}

/* Reset button */
#mic-access-tool-box button[title*="reset"],
#mic-access-tool-box button[title*="Reset"],
#mic-access-tool-box [class*="reset"],
div[id*="mic-access-tool-box"] button[class*="reset"] {
  background: #F3E7CF !important;
  color: white !important;
}

/* Reset button text and icon */
#mic-access-tool-box button[title*="reset"] *,
#mic-access-tool-box button[title*="Reset"] *,
#mic-access-tool-box [class*="reset"] *,
div[id*="mic-access-tool-box"] button[class*="reset"] * {
  color: white !important;
}

/* Accessibility widget - displayed by default on both mobile and desktop */
/* Position: opposite side from WhatsApp button (RTL sites → left, LTR sites → right) */
#mic-access-tool-general-button,
.mic-access-tool-general-button,
#mic-init-access-tool .mic-access-tool-general-button,
#mic-init-access-tool #mic-access-tool-general-button,
._access-icon {
  display: flex !important;
}
/* mobile-submenu-overflow-fix */
@media (max-width: 768px) {
  .navbar .sub-menu.mobile-expanded,
  .nav-menu .sub-menu.mobile-expanded,
  #navMenu .sub-menu.mobile-expanded,
  .zappy-products-dropdown .sub-menu.mobile-expanded,
  .zappy-products-dropdown > .sub-menu.mobile-expanded,
  .menu-item-has-children > .sub-menu.mobile-expanded {
    max-height: none !important;
    overflow-y: visible !important;
  }
  .menu-item-has-children,
  .zappy-products-dropdown,
  .nav-menu > li.menu-item-has-children {
    flex-shrink: 0 !important;
  }
  .sub-menu a,
  .navbar .sub-menu a,
  .navbar .sub-menu li a,
  nav.navbar .sub-menu li a,
  .zappy-products-dropdown .sub-menu a {
    white-space: normal !important;
  }
}


/* zappy-nav-child-indent */
.zappy-products-dropdown .zappy-nav-child > a,
.sub-menu .zappy-nav-child > a {
  padding-left: 28px !important;
  font-size: 0.9em !important;
  opacity: 0.85 !important;
}
[dir="rtl"] .zappy-products-dropdown .zappy-nav-child > a,
[dir="rtl"] .sub-menu .zappy-nav-child > a,
html[lang="he"] .zappy-products-dropdown .zappy-nav-child > a,
html[lang="he"] .sub-menu .zappy-nav-child > a,
html[lang="ar"] .zappy-products-dropdown .zappy-nav-child > a,
html[lang="ar"] .sub-menu .zappy-nav-child > a {
  padding-left: 0 !important;
  padding-right: 28px !important;
}
.zappy-products-dropdown .zappy-nav-parent > a,
.sub-menu .zappy-nav-parent > a {
  font-weight: 600 !important;
}
@media (max-width: 768px) {
  .nav-menu.active,
  #navMenu.active {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}


/* ========== EMPTY SUBMENU HIDING (Auto-added by Zappy) ========== */
.sub-menu:empty,
.dropdown-menu:empty,
.sub-menu.zappy-empty-submenu,
.dropdown-menu.zappy-empty-submenu,
.nav-menu .sub-menu.zappy-empty-submenu,
nav .sub-menu.zappy-empty-submenu,
.navbar .sub-menu.zappy-empty-submenu,
#navMenu .sub-menu.zappy-empty-submenu,
#navMenu .dropdown-menu.zappy-empty-submenu {
  display: none !important;
}


/* ========== RTL MOBILE NAVBAR FIX (zappy-rtl-mobile-fix) ========== */
/* High-specificity rules to ensure RTL positioning wins over any [lang="en"] conflicts */
/* For RTL sites: hamburger on RIGHT, phone on LEFT (mirror of LTR layout) */
/* NOTE: Includes both html[dir="rtl"] AND [dir="rtl"] selectors as fallback */
/* because some pages may be wrapped with <html lang="en"> (missing dir="rtl" on html) */
/* but still have dir="rtl" on <body> or other ancestor elements */

@media (max-width: 768px) {
  /* RTL Mobile Toggle (hamburger) - positioned on RIGHT */
  /* Using multiple parent selectors for higher specificity */
  html[dir="rtl"] .navbar .mobile-toggle,
  html[dir="rtl"] nav .mobile-toggle,
  html[dir="rtl"] header .mobile-toggle,
  html[dir="rtl"] .nav-container .mobile-toggle,
  html[dir="rtl"] .mobile-toggle,
  [dir="rtl"] .navbar .mobile-toggle,
  [dir="rtl"] nav .mobile-toggle,
  [dir="rtl"] header .mobile-toggle,
  [dir="rtl"] .nav-container .mobile-toggle,
  [dir="rtl"] .mobile-toggle,
  html[lang="he"] .mobile-toggle,
  html[lang="ar"] .mobile-toggle {
    left: auto !important;
    right: 15px !important;
  }
  
  /* RTL Phone Button - positioned on LEFT */
  html[dir="rtl"] .navbar .phone-header-btn,
  html[dir="rtl"] nav .phone-header-btn,
  html[dir="rtl"] header .phone-header-btn,
  html[dir="rtl"] .nav-container .phone-header-btn,
  html[dir="rtl"] .phone-header-btn,
  [dir="rtl"] .navbar .phone-header-btn,
  [dir="rtl"] nav .phone-header-btn,
  [dir="rtl"] header .phone-header-btn,
  [dir="rtl"] .nav-container .phone-header-btn,
  [dir="rtl"] .phone-header-btn,
  html[lang="he"] .phone-header-btn,
  html[lang="ar"] .phone-header-btn {
    left: 15px !important;
    right: auto !important;
  }
  
  /* RTL Mobile Menu - slides from RIGHT */
  html[dir="rtl"] .navbar .nav-menu,
  html[dir="rtl"] nav .nav-menu,
  html[dir="rtl"] header .nav-menu,
  html[dir="rtl"] .nav-container .nav-menu,
  html[dir="rtl"] .nav-menu,
  [dir="rtl"] .navbar .nav-menu,
  [dir="rtl"] nav .nav-menu,
  [dir="rtl"] header .nav-menu,
  [dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    left: auto !important;
    right: 0 !important;
  }
  
  /* RTL Mobile Menu Links - text align right */
  html[dir="rtl"] .nav-menu a,
  html[dir="rtl"] .nav-menu li,
  [dir="rtl"] .nav-menu a,
  [dir="rtl"] .nav-menu li,
  html[lang="he"] .nav-menu a,
  html[lang="he"] .nav-menu li,
  html[lang="ar"] .nav-menu a,
  html[lang="ar"] .nav-menu li {
    text-align: right !important;
  }
}

/* ========== END RTL MOBILE NAVBAR FIX ========== */


/* ========== NAV CONTAINER MIN-HEIGHT FIX (nav-container-min-height-fix) ========== */
/* On mobile, all nav children are position:absolute/fixed (out of flow), */
/* so height:auto collapses to 0px. min-height ensures the navbar is visible. */

/* DEFENSIVE: Ensure CTA container is visible on desktop */
/* This guards against CSS minifiers (CleanCSS level 2) that may pull */
/* the mobile display:none rule out of its @media query */
@media (min-width: 769px) {
  .nav-cta-container,
  .nav-cta-container:not(:has(.lang-switcher)) {
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  .nav-container {
    min-height: 70px !important;
    position: relative !important;
  }
  /* Reset nav-cta-container desktop styling (box-shadow/padding) on mobile */
  .nav-cta-container {
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* Hide nav-cta-container when no lang-switcher (only CTA btn, which is hidden on mobile) */
  .nav-cta-container:not(:has(.lang-switcher)) {
    display: none !important;
  }
}

/* ========== END NAV CONTAINER MIN-HEIGHT FIX ========== */


/* ========== HERO IMAGE GRADIENT FIX (hero-image-gradient-fix) ========== */
/* Prevent hero image fade gradient from bleeding over headline text below. */
/* The .image-fade-gradient has bottom: -30px which extends below its parent; */
/* on mobile stacked layout this overlaps the h1 text. */

@media (max-width: 768px) {
  .hero-image-column {
    overflow: hidden !important;
  }
  .image-fade-gradient {
    bottom: 0 !important;
  }
}

/* ========== END HERO IMAGE GRADIENT FIX ========== */


/* ========== FULLSCREEN HERO OVERFLOW FIX (fullscreen-hero-overflow-fix) ========== */
@media (max-width: 768px) {

  section[data-hero-type*="fullscreen"] {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 clamp(1rem, 5vw, 1.5rem) 90px !important;
  }
  section[data-hero-type*="fullscreen"] > [class*="-container"]:not([class*="bg"]):not([class*="scrim"]):not([class*="divider"]),
  section[data-hero-type*="fullscreen"] > .container {
    padding-bottom: 100px !important;
    min-height: auto !important;
  }
}
/* ========== END FULLSCREEN HERO OVERFLOW FIX ========== */


/* ========== PRODUCT ICON STYLES (product-icon-styles) ========== */
.product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; }
.product-title-row h1 { flex: 1; min-width: 0; }
.product-icon-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 6px; }
.icon-btn { width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s; color: currentColor; padding: 0; }
.icon-btn:hover { color: var(--primary-color, #ff0083); }
.icon-btn.active { color: #e74c3c; }
.icon-btn.active .heart-outline { display: none !important; }
.icon-btn.active .heart-filled { display: block !important; }
.profile-section, .addresses-section, .favorites-section, .orders-section { border: 1px solid var(--border-color, rgba(128,128,128,0.2)); border-radius: 12px; padding: 24px; margin-bottom: 24px; background: transparent; }
.favorites-section h2 { font-size: 1.25rem; color: var(--text-color, #1f2937); margin-bottom: 20px; }
.favorites-loading { text-align: center; padding: 20px; color: var(--text-secondary, #6b7280); }
.favorites-empty { text-align: center; padding: 32px; color: var(--text-secondary, #6b7280); }
.favorites-empty p { margin-bottom: 16px; }
.favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.favorite-card { background: transparent; border: 1px solid var(--border-color, rgba(128,128,128,0.2)); border-radius: 10px; overflow: hidden; transition: box-shadow 0.2s; position: relative; }
.favorite-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.favorite-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.favorite-card-body { padding: 12px; }
.favorite-card-body h4 { font-size: 0.875rem; font-weight: 500; color: var(--text-color, #1f2937); margin: 0 0 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-price { font-weight: 600; color: var(--primary-color, #ff0083); font-size: 0.9rem; }
.favorite-remove-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: #dc2626; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.favorite-remove-btn:hover { background: #dc2626; color: white; }
@media (max-width: 480px) { .favorites-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* ========== END PRODUCT ICON STYLES ========== */

/* ========== ORPHANED_ZOOM_IMG_FIX ========== */
@media (max-width: 768px) {
  .zappy-preserve-css-grid > img[data-zappy-zoom],
  [class*="-grid"] > img[data-zappy-zoom] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 300px !important;
    object-fit: cover !important;
    left: auto !important;
    top: auto !important;
  }
}
/* ========== END ORPHANED_ZOOM_IMG_FIX ========== */


/* ========== GRID RESPONSIVE FIX (zappy-grid-mobile-fix) ========== */
/* Ensures grids with explicit columns use CSS variable and are responsive on mobile */

/* DESKTOP: Explicit column grids use CSS variable for grid-template-columns */
/* The deployment process ensures --zappy-grid-cols is always set in inline styles */
[data-zappy-explicit-columns="true"] {
  display: grid !important;
  grid-template-columns: var(--zappy-grid-cols, repeat(2, minmax(0, 1fr))) !important;
}
/* Carousel mode overrides grid display to allow flex-based track layout */
.zappy-carousel-mode,
[data-zappy-display-mode="carousel"] {
  display: block !important;
}

/* ZOOM WRAPPER: Ensure overflow:hidden and position:relative for crop zoom effect */
/* The wrapper clips the oversized image to create the zoom/crop effect */
/* position:relative is needed so absolutely positioned images stay within the wrapper */
[data-zappy-zoom-wrapper="true"] {
  overflow: hidden !important;
  position: relative !important;
}

/* Prevent inserted elements from exceeding their container width.
   max-width uses no !important so inline styles can set a specific constraint. */
.zappy-inserted-element {
  max-width: 100%;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  /* Auto-grid (AI-generated) grids - force single column on mobile */
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"],
  [data-zappy-auto-grid="true"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Grid children: override min-width:auto so children with fixed-width
     content (e.g. zoom wrappers with width:448px!important) can shrink
     to fit the 1fr column instead of overflowing the grid container. */
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"] > *,
  [data-zappy-auto-grid="true"] > *,
  [data-zappy-explicit-columns="true"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  
  /* Featured grids - force single column on mobile */
  .featured-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Neutralize centering transforms on mobile */
  [data-zappy-center-transform] {
    transform: none !important;
  }
  
  /* Media-only grid items - constrain height on mobile */
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"] > .zappy-grid-item-media-only,
  [data-zappy-auto-grid="true"] > .zappy-grid-item-media-only {
    height: auto !important;
    max-height: 300px !important;
  }
  
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"] > .zappy-grid-item-media-only img,
  [data-zappy-auto-grid="true"] > .zappy-grid-item-media-only img {
    height: auto !important;
    max-height: 300px !important;
  }
  
  /* Full-width mode zoom wrappers - ensure image is visible (not collapsed) */
  [data-zappy-zoom-wrapper-width-mode="full"] img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 300px !important;
    left: auto !important;
    top: auto !important;
    object-fit: cover !important;
  }
  
  /* MOBILE: Explicit column grids - force single column on mobile */
  [data-zappy-explicit-columns="true"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Inline grid with fixed pixel columns - make responsive */
  .zappy-inline-grid-active.zappy-preserve-css-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* AI-generated section grids with common naming patterns */
  /* These often have fixed pixel column widths that don't adapt to mobile */
  [class*="-grid"]:not([data-zappy-auto-grid]):not(.zappy-preserve-css-grid):not([data-zappy-explicit-columns="true"]) {
    grid-template-columns: 1fr !important;
  }
  
  /* Reset any column/row spanning items on mobile - they cause overflow */
  /* Gallery grids often have -large items that span multiple columns */
  [class*="-grid"] > [class*="-large"],
  [class*="-grid"] > [class*="-item-large"],
  [class*="-grid"] > [style*="grid-column: span"],
  [class*="-grid"] > [style*="grid-row: span"] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
  /* Common AI-generated visual/frame containers that may overflow */
  [class*="-visual"],
  [class*="-frame"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* CRITICAL: Constrain zoom wrappers on mobile without breaking saved crop geometry */
  [data-zappy-zoom-wrapper="true"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* The zoom wrapper's image is position:absolute (so it contributes 0 to the
     wrapper's intrinsic content width). Inserted-element parents that carry a
     desktop pixel height can either collapse to 0px wide or preserve a stale
     desktop height after their child wrapper shrinks on mobile. Force them
     to fill the parent container and let the wrapper's aspect-ratio determine
     the real height, eliminating empty space before following text. */
  .zappy-inserted-element:has(> [data-zappy-zoom-wrapper="true"]) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .zappy-inserted-element:has(> [data-zappy-zoom-wrapper="true"]) > [data-zappy-zoom-wrapper="true"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Reset zoom wrapper images on mobile to responsive display.
     Images with explicit mobile crop overrides are excluded - the JS runtime
     applies their crop/zoom after page load. */
  [data-zappy-zoom-wrapper="true"]:not([data-zappy-zoom-wrapper-width-mode="full"]) img:not([data-zappy-mobile-object-position]):not([data-zappy-mobile-zoom]) {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  
  /* Carousel: ensure block display on mobile */
  .zappy-carousel-mode,
  [data-zappy-display-mode="carousel"] {
    display: block !important;
  }
  /* JS-initialized carousel: constrain wrapper on mobile */
  .zappy-carousel-js-init .zappy-carousel-container-wrapper {
    max-width: calc(100% - 20px) !important;
  }
  .zappy-carousel-js-init .zappy-carousel-item {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* CSS-only fallback: if JS didn't initialize, stack items vertically */
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-container-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-track {
    flex-direction: column !important;
    transform: none !important;
    gap: 1.5rem !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) > :not(style):not(script):not(.zappy-carousel-btn):not(.zappy-carousel-dots):not(.zappy-carousel-container-wrapper) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-btn,
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-dots {
    display: none !important;
  }
  /* Carousel items: fix zoom wrapper padding creating excess spacing */
  .zappy-carousel-item [data-zappy-zoom-wrapper="true"],
  .zappy-carousel-mode > div [data-zappy-zoom-wrapper="true"] {
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Carousel buttons: position inside the card area on mobile */
  .zappy-carousel-js-init > .zappy-carousel-btn {
    left: 4px !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    background: rgba(255,255,255,0.9) !important;
  }
  .zappy-carousel-js-init > .zappy-carousel-btn.zappy-carousel-right {
    left: auto !important;
    right: 4px !important;
  }
  
  /* ========== MAIN PADDING FIX ========== */
  /* Fix double-padding from old V2 mobile CSS that applied padding to both main and sections */
  /* Exclude ecommerce-page which needs its own horizontal padding for proper mobile layout */
  main:not(.ecommerce-page) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Hero sections need flex-column on mobile for proper stacking */
  section[class*="hero"],
  .home-Hero-section {
    flex-direction: column !important;
  }
  
  /* Hero sections need extra padding-top to clear the sticky navbar */
  /* The navbar is ~70px tall, so hero needs at least 100px padding-top */
  /* IMPORTANT: Use section tag to avoid matching child elements like buttons that contain "-hero-section" in their BEM class */
  section[class*="-hero-section"]:first-of-type,
  main > section:first-child {
    padding-top: 100px !important;
  }

  /* Split hero (.hero-sbs-wrap) already applies ~100px top padding for the navbar.
     Without this override, the global rule above stacks and mobile shows ~200px
     of dead air above the hero image. */
  main > section:first-child:has(.hero-sbs-wrap),
  section[class*="-hero-section"]:first-of-type:has(.hero-sbs-wrap) {
    padding-top: 0 !important;
  }

  /* Zoom-crop hero portraits: anchor with inset:0 so RTL/LTR matches and cover
     cropping stays centered (physical left:0 absolute imgs can mis-read in RTL). */
  .hero-sbs-image-frame [data-zappy-zoom-wrapper="true"] img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  
  /* ========== HERO CONTAINER FULL-WIDTH (FULLSCREEN HEROES ONLY) ========== */
  /* Only strip container padding/width for heroes with actual background images.
     Text-only and side-by-side hero sections on inner pages need normal padding. */
  .hero-container,
  /* V2 generation-time fullscreen heroes */
  section[data-hero-type="fullscreen-scrim"] > .container,
  section[data-hero-type="fullscreen-card"] > .container,
  /* Editor-applied background images on hero sections */
  section[class*="hero"][data-zappy-bg-type="image"] > .container,
  section[class*="hero"][data-zappy-bg-type="video"] > .container,
  /* V1 fallback: hero sections with known bg structures */
  section[class*="hero"]:has(.hero-bg-container) > .container,
  section[class*="hero"]:has([data-hero-bg]) > .container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* ========== HERO WIDTH FIX ========== */
  /* Remove nested horizontal padding for fullscreen-type heroes only */
  .home-Hero-section .hero-container,
  .home-Hero-section .hero-content,
  .home-Hero-section .hero-metrics,
  .home-Hero-section .hero-image-column,
  .home-Hero-section .hero-image-frame,
  .home-Hero-section .container,
  .home-Hero-section .wrapper,
  /* V2 fullscreen heroes */
  section[data-hero-type="fullscreen-scrim"] .hero-container,
  section[data-hero-type="fullscreen-scrim"] .hero-content,
  section[data-hero-type="fullscreen-scrim"] .container,
  section[data-hero-type="fullscreen-card"] .hero-container,
  section[data-hero-type="fullscreen-card"] .hero-content,
  section[data-hero-type="fullscreen-card"] .container,
  /* Editor-applied background images on hero sections */
  section[class*="hero"][data-zappy-bg-type="image"] .hero-container,
  section[class*="hero"][data-zappy-bg-type="image"] .hero-content,
  section[class*="hero"][data-zappy-bg-type="image"] .container,
  section[class*="hero"][data-zappy-bg-type="video"] .hero-container,
  section[class*="hero"][data-zappy-bg-type="video"] .hero-content,
  section[class*="hero"][data-zappy-bg-type="video"] .container,
  /* V1 fallback: hero sections with known bg structures */
  section[class*="hero"]:has(.hero-bg-container) .hero-container,
  section[class*="hero"]:has(.hero-bg-container) .hero-content,
  section[class*="hero"]:has(.hero-bg-container) .container,
  section[class*="hero"]:has([data-hero-bg]) .hero-container,
  section[class*="hero"]:has([data-hero-bg]) .hero-content,
  section[class*="hero"]:has([data-hero-bg]) .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  
  /* ========== HERO VERTICAL SPACING FIX ========== */
  .home-Hero-section .hero-content,
  .home-Hero-section .hero-container,
  .home-Hero-section .hero-image-column {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  .hero-cta-row {
    padding: 8px 0 !important;
    margin: 8px 0 12px !important;
  }
  
  .hero-content {
    gap: 12px !important;
  }
  
  .hero-metrics {
    gap: 10px !important;
  }
  
  .metric-card {
    padding: 12px !important;
  }
  
  .hero-container {
    gap: 16px !important;
  }

  /* ========== GRID OVERFLOW FIX ========== */
  /* CSS Grid items default to min-width:auto, preventing them from shrinking
     below their content's intrinsic size. Fixed-width zoom wrappers or large
     images inside grid items can force the column wider than the viewport. */
  .hero-container > * {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Zappy-inserted image elements with fixed-width zoom wrappers must
     respect the parent container width on mobile */
  .zappy-inserted-element,
  [data-zappy-zoom-wrapper] {
    max-width: 100% !important;
  }

  /* ========== FULLSCREEN HERO OVERFLOW FIX ========== */

  section[data-hero-type*="fullscreen"] {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 clamp(1rem, 5vw, 1.5rem) 90px !important;
  }
  section[data-hero-type*="fullscreen"] > [class*="-container"]:not([class*="bg"]):not([class*="scrim"]):not([class*="divider"]),
  section[data-hero-type*="fullscreen"] > .container {
    padding-bottom: 100px !important;
    min-height: auto !important;
  }
}

/* ========== HERO SECTION WIDTH CONSTRAINT (ALL VIEWPORTS) ========== */
/* Prevent hero sections from exceeding viewport width.                */
/* Root cause: AI-generated CSS may use width:100vw or add horizontal  */
/* padding to the section, causing it to overflow the viewport.        */
/* NOTE: Do NOT add overflow:hidden here — it clips SVG bottom dividers */
/* that need overflow:visible to extend into the next section.          */
section[class*="hero" i],
section[class*="Hero"],
section[data-hero-type] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ========== SVG DIVIDER OVERLAY FIX ========== */
/* Many AI sections place .section-divider absolutely at the bottom of a section,
   which can overlap/cut off the last row of content. The safest CSS-only fix
   is to prevent overlay by forcing the divider into normal flow. */
.section-divider {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  margin-top: 16px !important;
}

.section-divider svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Exclude small icon SVGs from full-width sizing - these are decorative icons, not wave dividers */
.section-divider svg.divider-icon,
.section-divider svg[width="32"],
.section-divider svg[width="24"],
.section-divider svg[width="48"],
.section-divider svg[viewBox="0 0 32 32"],
.section-divider svg[viewBox="0 0 24 24"],
.section-divider svg[viewBox="0 0 48 48"] {
  width: auto !important;
  height: auto !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

/* ========== END SVG DIVIDER OVERLAY FIX ========== */

/* ========== HORIZONTAL-PAIR GRID MEDIA FIX ========== */
/* Ensures media in horizontal-pair grids fills columns correctly */

/* Image/video media cells: stretch to fill the grid cell */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"]:not([data-element-type="icon"]) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 0 !important;
}

/* Icon media cells: use flex for centering but allow alignment to be controlled by the editor */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"][data-element-type="icon"] {
  position: relative !important;
  display: flex !important;
  min-height: 0 !important;
}

/* Images/videos: preserve aspect ratio while filling column width */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > img,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Icons/SVG: respect their explicit pixel size from the editor */
/* Do NOT force width/height: 100% - icons should use their inline size */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > svg,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > .iconify,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > .iconify svg {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  display: inline-block !important;
}

/* Non-media grid items (buttons, text, etc.) should NOT stretch */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] > .zappy-inserted-element:not([data-zappy-media-cell]) {
  align-self: start !important;
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Buttons inside non-media grid items should NOT stretch horizontally */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] > .zappy-inserted-element:not([data-zappy-media-cell]) .btn,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] > .zappy-inserted-element:not([data-zappy-media-cell]) [data-element-type="button"] {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* ========== END HORIZONTAL-PAIR GRID MEDIA FIX ========== */

/* ========== END GRID RESPONSIVE FIX ========== */


/* ZAPPY_CONTACT_FORM_LAYOUT_FIX */
form.contact-form, .contact-form { flex-direction: column !important; align-items: stretch !important; }
form.contact-form > .contact-form-field, .contact-form > .contact-form-field { width: 100% !important; align-self: stretch !important; }
form.contact-form .contact-input, form.contact-form .contact-textarea { width: 100% !important; box-sizing: border-box !important; }


/* ZAPPY_NAVBAR_CTA_ALIGNMENT_FIX */
.nav-cta-container .zappy-search-container,
.zappy-search-container { align-self: center; }
.nav-cta-container p { margin: 0 !important; }


/* ZAPPY_SECTION_BG_TYPE_FIX */
[data-zappy-bg-type="color"] { background-image: none !important; background-color: var(--zappy-bg-color, transparent) !important; }
[data-zappy-bg-type="image"] { background-image: linear-gradient(var(--zappy-bg-overlay, rgba(0,0,0,0)), var(--zappy-bg-overlay, rgba(0,0,0,0))), var(--zappy-bg-image, none) !important; background-size: var(--zappy-bg-size, cover) !important; background-position: var(--zappy-bg-position, center) !important; background-repeat: no-repeat !important; }
[data-zappy-bg-type="video"] { background-image: none !important; }
/* Full-bleed hero single-image model: overlay/darkness tint layer sits above the
   <img data-hero-bg> and below the hero content. Inline styles carry the tint;
   this rule is the positioning safety-net. */
.zappy-hero-overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; }
section[data-hero-type^="fullscreen"] > .hero-bg-wrapper,
section[data-hero-type^="fullscreen"] > [class*="hero-bg"],
section[class*="hero"][data-zappy-bg-overlay-opacity] > .hero-bg-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}


/* ZAPPY_IOS_NAVBAR_GAP_FIX */
/* iOS Safari does not clip overflow-x:hidden on <html>, so a page with any
   horizontal overflow ends up with visual viewport > layout viewport.
   position:fixed children anchored with right:0 (the mobile dropdown menu)
   then pin to the visual viewport right edge — off-screen past the navbar.
   Companion JS (ZAPPY_IOS_VIEWPORT_GAP_FIX in script.js) measures the gap
   and exposes it as --ios-viewport-gap; this rule uses it to shift the
   menu inward so it lands on the real layout-viewport right edge. On every
   other browser the gap is 0 and the rule is a no-op.

   The selector list below intentionally mirrors the RTL selectors used
   elsewhere in the stylesheet — we need equal-or-higher specificity to
   win the cascade (!important alone can't beat higher specificity). */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    width: auto !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }
  #navMenu,
  .nav-menu,
  html[dir="rtl"] .nav-menu,
  html[dir="rtl"] .navbar .nav-menu,
  html[dir="rtl"] nav .nav-menu,
  html[dir="rtl"] header .nav-menu,
  html[dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .navbar .nav-menu,
  [dir="rtl"] nav .nav-menu,
  [dir="rtl"] header .nav-menu,
  [dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    /* Force position:fixed so the --ios-viewport-gap shift is measured
       against the (visual) viewport, not whatever container the menu may
       have been reparented into by earlier v1/v2 patches.
       --zappy-navbar-bottom is set by the runtime JS companion and
       defaults to 70px — this lets us override the v2 `top: 100%` (which
       with position:fixed would resolve to the full viewport height and
       push the menu off-screen). */
    position: fixed !important;
    top: var(--zappy-navbar-bottom, 70px) !important;
    right: var(--ios-viewport-gap, 0px) !important;
  }
}


/* ZAPPY_PRODUCTS_DROPDOWN_LTR_INDENT */
/* LTR mirror of the [dir="rtl"] indentation block. Equal-or-higher
   specificity than the shorthand .navbar .sub-menu li a override so the
   nested sub-category items keep their visual indent on every LTR page —
   English, Spanish, French, Russian, German, etc. The selectors target
   dir="ltr" (the source of truth set on <html> by per-language page
   generation), NOT a specific language code, so the rule stays generic
   across every site / language combination. */
[dir="ltr"] .sub-menu .zappy-nav-child > a,
[dir="ltr"] .zappy-products-dropdown .zappy-nav-child > a,
html[dir="ltr"] .sub-menu .zappy-nav-child > a,
html[dir="ltr"] .zappy-products-dropdown .zappy-nav-child > a {
  padding-left: 28px !important;
  padding-right: 16px !important;
  font-size: 0.9em !important;
  opacity: 0.85 !important;
}
@media (max-width: 768px) {
  [dir="ltr"] .navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a,
  [dir="ltr"] nav.navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a,
  html[dir="ltr"] .navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a,
  html[dir="ltr"] nav.navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a {
    padding-left: 36px !important;
    padding-right: 16px !important;
  }
}


/* ZAPPY_MOBILE_NAV_MENU_ITEM_PADDING */
@media (max-width: 768px) {
  .navbar .nav-menu.active > li > a,
  nav.navbar .nav-menu.active > li > a,
  #navMenu.active > li > a,
  .nav-menu.open > li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
  }
  .navbar .nav-menu.active > li,
  nav.navbar .nav-menu.active > li,
  #navMenu.active > li,
  .nav-menu.open > li {
    margin: 4px 0 !important;
  }
  .navbar .nav-menu.active > li.zappy-products-dropdown > a,
  nav.navbar .nav-menu.active > li.zappy-products-dropdown > a,
  #navMenu.active > li.zappy-products-dropdown > a,
  .nav-menu.open > li.zappy-products-dropdown > a {
    padding-right: 56px !important;
  }
  html[dir="rtl"] .navbar .nav-menu.active > li.zappy-products-dropdown > a,
  html[dir="rtl"] nav.navbar .nav-menu.active > li.zappy-products-dropdown > a,
  html[dir="rtl"] #navMenu.active > li.zappy-products-dropdown > a,
  html[dir="rtl"] .nav-menu.open > li.zappy-products-dropdown > a {
    padding-right: 16px !important;
    padding-left: 56px !important;
  }
}

html[dir="rtl"] #mic-access-tool-general-button, html[dir="rtl"] .mic-access-tool-general-button,
html[dir="rtl"] #mic-init-access-tool .mic-access-tool-general-button,
html[dir="rtl"] #mic-init-access-tool #mic-access-tool-general-button,
html[dir="rtl"] ._access-icon { left: 20px !important; right: auto !important; }
html[dir="ltr"] #mic-access-tool-general-button, html[dir="ltr"] .mic-access-tool-general-button,
html[dir="ltr"] #mic-init-access-tool .mic-access-tool-general-button,
html[dir="ltr"] #mic-init-access-tool #mic-access-tool-general-button,
html[dir="ltr"] ._access-icon,
html:not([dir]) #mic-access-tool-general-button, html:not([dir]) .mic-access-tool-general-button,
html:not([dir]) #mic-init-access-tool .mic-access-tool-general-button,
html:not([dir]) #mic-init-access-tool #mic-access-tool-general-button,
html:not([dir]) ._access-icon { right: 20px !important; left: auto !important; }

/* LTR: keep image on left for solution-reverse sections */
html[dir="ltr"] .solution-item.solution-reverse .solution-image { order: -1 !important; }
html[dir="ltr"] .solution-item.solution-reverse .solution-content { order: 1 !important; }
html[dir="ltr"] .service-detail.service-reverse .service-detail-image { order: -1 !important; }
html[dir="ltr"] .service-detail.service-reverse .service-detail-content { order: 1 !important; }

/* ENSURE: navbar-logo-isolation */
.navbar .logo,
.nav-brand .logo,
.logo-link .logo {
  margin: 0 !important;
}


/* ZAPPY_MOBILE_NAV_ICON_ALIGNMENT_FIX */
/* ZAPPY_MOBILE_NAV_ICON_ALIGNMENT_FIX_V3 */
/* ZAPPY_MOBILE_NAV_ICON_ALIGNMENT_FIX_V4 */
/* The mobile hamburger / phone buttons are absolutely positioned. Keep the
   navbar itself as a non-collapsing containing block so auto-margin centering
   stays aligned even when generated mobile CSS moves every nav child out of flow. */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    min-height: 70px !important;
  }

  /* E-commerce mobile navbar icon-group alignment.
     The icon couples (search after the hamburger; login+cart at the end edge)
     are absolutely positioned with inset-inline offsets — inset-inline-start:52px
     to clear the 36px hamburger that sits at left:12px on the .navbar, and
     inset-inline-end:12px to hug the end edge. Those offsets are authored in the
     NAVBAR's full-width coordinate space (the hamburger uses the same one). But
     the offsets are resolved against the nearest positioned ancestor, and the
     generated CSS makes .nav-container position:relative. When .nav-container is
     ALSO inset by the navbar's horizontal padding (max-width / padding from the
     LLM-authored navbar), the groups resolve to that inset box instead of the
     full-width navbar: the search drifts ~20px away from the hamburger and the
     cart leaves a fat asymmetric gap before the screen edge. Dropping
     .nav-container out of the containing-block chain on mobile makes both couples
     resolve to .navbar (always full-bleed) so they line up tightly with the
     hamburger and sit symmetrically against both edges regardless of any
     navbar/container padding. Scoped via :has() to navbars that actually carry
     the e-commerce icon couples so non-ecommerce navs are untouched. */
  .navbar:has(.nav-ecommerce-icons) .nav-container,
  nav.navbar:has(.nav-ecommerce-icons) .nav-container,
  header:has(.nav-ecommerce-icons) .nav-container {
    position: static !important;
  }

  /* Some generated RTL nav CSS sets both left:50% and right:50% on the
     absolute .nav-brand. That collapses it to 0px wide, so the logo flows
     left from the center instead of being centered on it. */
  .navbar .nav-brand,
  nav.navbar .nav-brand,
  html[dir="rtl"] .navbar .nav-brand,
  html[dir="rtl"] nav.navbar .nav-brand,
  html[lang="he"] .navbar .nav-brand,
  html[lang="he"] nav.navbar .nav-brand,
  html[lang="ar"] .navbar .nav-brand,
  html[lang="ar"] nav.navbar .nav-brand {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: calc(100% - 168px) !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .navbar .nav-brand .logo-link,
  nav.navbar .nav-brand .logo-link,
  .navbar .nav-brand a,
  nav.navbar .nav-brand a {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .navbar > .mobile-toggle,
  nav.navbar > .mobile-toggle,
  .navbar .mobile-toggle,
  nav.navbar .mobile-toggle,
  #mobileToggle,
  .navbar > .phone-header-btn,
  nav.navbar > .phone-header-btn,
  .navbar .phone-header-btn,
  nav.navbar .phone-header-btn {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
  }

  .navbar > .mobile-toggle,
  nav.navbar > .mobile-toggle,
  .navbar .mobile-toggle,
  nav.navbar .mobile-toggle,
  #mobileToggle {
    display: flex !important;
  }

  html:not([data-zappy-site-type="ecommerce"]) .navbar > .phone-header-btn,
  html:not([data-zappy-site-type="ecommerce"]) nav.navbar > .phone-header-btn,
  html:not([data-zappy-site-type="ecommerce"]) .navbar .phone-header-btn,
  html:not([data-zappy-site-type="ecommerce"]) nav.navbar .phone-header-btn {
    display: flex !important;
  }

  html[data-zappy-site-type="ecommerce"] .phone-header-btn,
  body[data-zappy-site-type="ecommerce"] .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] header .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] nav .phone-header-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}


/* ZAPPY_FULLSCREEN_HERO_SCRIM_OPACITY_CAP — keep fullscreen hero images visible while preserving text contrast */
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="scrim"],
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] [class*="scrim"],
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > .hero-scrim,
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="hero-scrim"],
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] [class*="scrim"] {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.32) 62%, rgba(0,0,0,0.42) 100%), linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.36) 36%, rgba(0,0,0,0.06) 78%) !important;
  background-color: transparent !important;
}
html[dir="rtl"] section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="scrim"],
html[dir="rtl"] section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] [class*="scrim"],
html[dir="rtl"] section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > .hero-scrim,
html[dir="rtl"] section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="hero-scrim"],
html[dir="rtl"] section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] [class*="scrim"] {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.32) 62%, rgba(0,0,0,0.42) 100%), linear-gradient(to left, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.36) 36%, rgba(0,0,0,0.06) 78%) !important;
}
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > img[data-hero-bg],
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="hero-bg"] img[data-hero-bg],
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] img[data-hero-bg],
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]):has(> [class*="scrim"]) > img[data-hero-bg],
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] img[data-hero-bg] {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* ZAPPY_PUBLISHED_MOBILE_MEDIA_FIT_FIX */
@media (max-width: 768px) {
  /* Published sites can carry stale editor-generated transform:scale(...) rules.
     Fullscreen hero backgrounds must keep filling their absolute wrapper; mobile
     crop runtime can still override this with inline styles when needed. */
  html body main section[class*="hero"] [data-hero-bg],
  html body main section[class*="hero"] [data-hero-background="true"],
  html body main section[data-hero-type*="fullscreen"] img[data-hero-bg],
  html body main section[data-hero-type*="fullscreen"] img[data-hero-background="true"] {
    transform: none !important;
    transform-origin: center center !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Filter chip rows should wrap on narrow RTL screens instead of hiding most
     options off-canvas behind a horizontal scroller. */
  html body main #showcaseAdvancedFilter .adv-filter-group > .adv-filter-scroll-row,
  html body main .index-showcase-section #showcaseAdvancedFilter .adv-filter-group > .adv-filter-scroll-row,
  html body main .index-showcase-section .adv-filter-group > .adv-filter-scroll-row {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    height: auto !important;
    cursor: default !important;
  }
}

/* Spec table BiDi fix: isolate cells so mixed LTR/RTL content renders correctly */
.specs-table th, .specs-table td { unicode-bidi: plaintext !important; }