/* ===========================================
   Table of Contents
   0. Design Tokens (:root)
   1. Base
   2. Navbar
   3. Hero
   4. Responsive: global hero/navbar adjustments
   5. Sections: Generic scaffolding
   6. Vision & Mission (vm-*)
   7. Differentiators (diff-*)
   8. CTA helpers
   9. Founder
   10. Statement
   11. Services
   12. Core Values
   13. Belvro Tick
   14. FAQ
   15. Footer
   16. Social Links
   17. Contact
   18. Global grid orphan centering
=========================================== */
/* ---------------- Tokens ---------------- */
:root{
  /* Base palette */
  --gold:    #b68a43;
  --navy:    #121725;
  --yalloish:#e5d6bd;
  --black:   var(--navy); /* replace any black usage with navy */

  /* Semantic tokens (use these across the site) */
  --bg:    var(--navy);          /* page & nav background */
  --text:  var(--yalloish);      /* default text color */
  --muted: color-mix(in srgb, var(--yalloish) 76%, transparent);

  --maxw:  1200px;
  --pad:   24px;
  --nav-h: 100px;
  --radius: 16px;
  --shadow: 0 10px 30px color-mix(in srgb, var(--navy) 25%, transparent);
}



/* -------------- Base -------------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
}

/* Arabic typography: use Almarai for RTL pages */
body[dir="rtl"]{
  font-family: 'Almarai', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}




/* -------------- Navbar -------------- */
.nav{
  position: static; top: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 10px 0;
}
.nav__container{
  width: min(var(--maxw), 100% - 2*var(--pad));
  margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(8px, 2vw, 24px);
  position: relative;
}
/* Fluid logo size */
.brand img{
  height: clamp(140px, 20vw, 200px);
  display: block;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
}

.menu{ 
  display: flex; 
  align-items: center; 
  gap: clamp(16px, 3vw, 32px); 
  flex: 1; 
  justify-content: center; 
  position: relative;
}
.menu a{
  color: var(--yalloish);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  font-size: clamp(14px, 1.2vw, 16px);
  white-space: nowrap;
}
.menu a:hover{ color: var(--text); }

/* Contact link as a smooth pill button (all breakpoints) */
.menu .menu-contact{
  background: var(--navy);
  color: var(--yalloish);
  border-radius: 999px;
  padding: 8px 18px;
  border: 2px solid var(--gold);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}



.nav-cta{
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  text-decoration: none;
  padding: clamp(8px, 1vw, 12px) clamp(12px, 1.8vw, 20px);
  border-radius: 999px;
  background: transparent;
  color: var(--yalloish);
  border: 2px solid color-mix(in srgb, var(--yalloish) 85%, transparent);
  box-shadow: none;
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 14px);
  transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover{ 
  background: var(--gold); 
  color: var(--navy); 
  box-shadow: 0 15px 40px rgba(197, 163, 94, 0.25); 
  border-color: var(--gold);
}
.nav-cta:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }

/* Language Switch */
.language-switch{
  display: flex;
  align-items: center;
  margin: 0 16px;
  position: relative;
}

.toggle-switch{
  position: relative;
  width: 60px;
  height: 30px;
  background: color-mix(in srgb, var(--yalloish) 20%, transparent);
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--yalloish) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  overflow: hidden;
}

.toggle-switch:hover{
  background: color-mix(in srgb, var(--yalloish) 30%, transparent);
  border-color: var(--yalloish);
}

.toggle-slider{
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--yalloish);
  border-radius: 50%;
  transition: all 0.3s ease;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
}

.toggle-switch.active .toggle-slider{
  background: var(--gold);
  left: calc(100% - 27px);
}

.toggle-text{
  font-size: 12px;
  font-weight: 600;
  color: var(--yalloish);
  transition: all 0.3s ease;
  z-index: 1;
  position: relative;
}

.toggle-switch.active .toggle-en{
  color: color-mix(in srgb, var(--yalloish) 60%, transparent);
}

.toggle-switch.active .toggle-ar{
  color: var(--navy);
}

.toggle-switch:not(.active) .toggle-ar{
  color: color-mix(in srgb, var(--yalloish) 60%, transparent);
}

.toggle-switch:not(.active) .toggle-en{
  color: var(--navy);
}

.toggle-switch:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Mobile menu button */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: clamp(20px, 3vw, 24px);
  cursor: pointer;
  padding: clamp(6px, 1vw, 8px);
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.menu-toggle:hover {
  background-color: color-mix(in srgb, var(--yalloish) 15%, transparent);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Desktop navigation improvements */
@media (min-width: 992px) {
  .nav__container {
    gap: clamp(20px, 3vw, 40px);
  }
  
  .brand img {
    height: clamp(80px, 8vw, 100px);
  }
  
  .menu {
    gap: clamp(24px, 4vw, 40px);
  }
  
  .menu a {
    font-size: clamp(14px, 1.1vw, 16px);
    position: relative;
    padding: 4px 0;
  }
  

 
  .nav-cta {
    padding: clamp(10px, 1.2vw, 14px) clamp(18px, 2.5vw, 28px);
    font-size: clamp(13px, 1.1vw, 15px);
    min-width: clamp(120px, 12vw, 160px);
  }
  
  .language-switch {
    margin: 0 clamp(12px, 2vw, 20px);
  }
}

/* -------------- Hero -------------- */
.hero{
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  place-items: center;
  padding: 0 var(--pad);
  background: #0d111c;
}
.hero__container{
  width: min(var(--maxw), 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

/* Fluid typography (bigger on large screens) */
.hero__title{
  margin: 0 0 16px 0;
  font-size: clamp(28px, 3.5vw, 90px);
  line-height: 1.1;
  letter-spacing: .2px;
  font-weight: 700;
}
.hero__lead{
  margin: 0 0 28px 0;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 28px);
  max-width: 700px;
  font-weight: 300;
  line-height: 1.6;
}
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-weight: 700;
  padding: clamp(10px, 1.4vw, 14px) clamp(16px, 3vw, 28px);
  border-radius: 999px;
  background: var(--gold);
  color: var(--yalloish);
  border: 2px solid transparent;
  box-shadow: 0 12px 28px rgba(197,163,94,.22);
  transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(197, 163, 94, 0.3); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.hero__media{ display: grid; place-items: center; }
.hero__img{
  width: 100%; height: auto;
  border-radius: var(--radius);
  /* box-shadow: var(--shadow); */
  display: block;
}

/* -------------- Responsive -------------- */
/* Tablet adjustments */
@media (max-width: 991px) and (min-width: 769px) {
  :root{ --nav-h: 65px; }
  
  .nav__container {
    gap: clamp(12px, 2vw, 20px);
  }
  
  .brand img {
    height: clamp(70px, 14vw, 90px);
  }
  
  .menu {
    gap: clamp(20px, 3vw, 28px);
  }
  
  .menu a {
    font-size: clamp(14px, 1.3vw, 15px);
  }
  
  .nav-cta {
    padding: clamp(8px, 1.2vw, 10px) clamp(14px, 2vw, 18px);
    font-size: clamp(12px, 1.2vw, 13px);
  }
  
  .language-switch {
    margin: 0 clamp(8px, 1.5vw, 12px);
  }
  
  .toggle-switch {
    width: clamp(50px, 6vw, 55px);
    height: clamp(26px, 3vw, 28px);
  }
  
  .toggle-slider {
    width: clamp(20px, 2.5vw, 22px);
    height: clamp(20px, 2.5vw, 22px);
  }
  
  .toggle-switch.active .toggle-slider {
    left: calc(100% - clamp(23px, 3vw, 25px));
  }
}

@media (max-width: 991px){
  :root{ --nav-h: 68px; }
}

@media (max-width: 900px){
  .hero__container{
    grid-template-columns: 1fr; 
    text-align: center;
    gap: 40px;
  }
  .hero__media{ order: -1; }
  .hero__lead{ margin-left: auto; margin-right: auto; }
}

/* General mobile breakpoint */
@media (max-width: 768px) {
  :root { 
    --nav-h: 60px; 
    --pad: 16px;
  }
  
  .nav__container {
    gap: clamp(6px, 1.5vw, 12px);
  }
  
  .brand img {
    height: clamp(60px, 16vw, 80px);
  }
  
  .menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    padding: 24px var(--pad);
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  
  .menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .menu a {
    font-size: 18px;
    padding: 8px 0;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--yalloish) 20%, transparent);
  }
  
  .menu a:last-child {
    border-bottom: none;
  }
  
  .menu .menu-contact {
    background: var(--gold);
    color: var(--navy);
    border-radius: 999px;
    padding: 12px 24px;
    margin-top: 8px;
    border: none;
    font-weight: 700;
    transition: all 0.3s ease;
  }
  
  .menu .menu-contact:hover {
    background: var(--yalloish);
    color: var(--navy);
    transform: translateY(-1px);
  }
  
  .menu-toggle {
    display: block;
    order: 5;            /* keep hamburger at extreme end */
    margin-inline-start: auto;
  }

  .language-switch {
    margin: 0;         /* keep within flow */
    order: 4;          /* before hamburger */
  }

  .nav-cta {
    display: none; /* Hide on mobile to avoid clutter, show in menu instead */
  }

  .toggle-switch {
    width: 45px;
    height: 24px;
    padding: 0 4px;
  }

  .toggle-slider {
    width: 18px;
    height: 18px;
    left: 3px;
  }

  .toggle-switch.active .toggle-slider {
    left: calc(100% - 21px);
  }

  .toggle-text {
    font-size: 10px;
  }
  
  .hero__title {
    font-size: clamp(28px, 5vw, 48px);
  }
  
  .hero__lead {
    font-size: clamp(14px, 4vw, 18px);
  }
  
  .btn {
    padding: 12px 20px;
    font-size: 16px;
  }
  /* Center and tame hero image size on mobile */
  .hero__media{ display: grid; place-items: center; }
  .hero__img{ width: min(82vw, 480px); height: auto; }
}

/* Small screens */
@media (max-width: 480px) {
  :root { 
    --pad: 12px;
    --nav-h: 55px;
  }
  
  .nav__container {
    gap: 6px;
    padding-inline: var(--pad);
  }
  
  .brand img {
    height: clamp(55px, 20vw, 70px);
  }

  .language-switch {
    margin: 0;
  }

  .toggle-switch {
    width: 40px;
    height: 22px;
    padding: 0 3px;
  }

  .toggle-slider {
    width: 16px;
    height: 16px;
    left: 3px;
  }

  .toggle-switch.active .toggle-slider {
    left: calc(100% - 19px);
  }

  .toggle-text {
    font-size: 9px;
  }
  
  .menu {
    padding: 20px var(--pad);
    gap: 16px;
  }
  
  .menu a {
    font-size: 16px;
    padding: 6px 0;
  }
  
  .menu .menu-contact {
    padding: 10px 20px;
    font-size: 14px;
    margin-top: 6px;
  }
  
  .hero__title {
    font-size: clamp(24px, 10vw, 36px);
  }
  
  .hero__lead {
    font-size: clamp(13px, 4.5vw, 16px);
  }
  
  .btn {
    padding: 10px 18px;
    font-size: 14px;
  }
  /* Slightly smaller image on small phones so hero fits nicely */
  .hero__img{ width: 72vw; max-height: 38vh; }
}

/* Specific ratio adjustments for landscape tablets (1024×600) */
@media (min-width: 1000px) and (max-height: 650px) {
  :root { 
    --nav-h: 50px; 
  }
  
  .hero {
    min-height: auto;
    padding: 20px var(--pad);
  }
  
  .hero__container {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
  }
  
  .hero__title {
    font-size: clamp(24px, 3.5vw, 42px);
    margin-bottom: 12px;
  }
  
  .hero__lead {
    font-size: clamp(14px, 1.8vw, 18px);
    margin-bottom: 16px;
  }
  
  .btn {
    padding: 10px 18px;
    font-size: 15px;
  }
  
  .hero__media {
    order: 0;
  }
  
  .hero__text {
    text-align: left;
  }
  
  .hero__lead {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Founder (moved media queries closer to section to match HTML order) */

/* Ultra-compact: aggressively trim vertical space for very short viewports */
@media (max-height: 700px){
  #founder{ padding-block: 10px; }
  #founder .founder-container{ gap: 10px; }
  #founder h2{ margin-bottom: 4px; }
  #founder h3{ margin-bottom: 4px; }
  #founder p{ margin-bottom: 6px; line-height: 1.3; font-size: clamp(11.5px, 1.5vw, 13px); }
  #founder .founder-stats{ gap: 6px; margin-top: 6px; }
  #founder .founder-stats div{ padding: 8px; min-height: 56px; }
}

/* Portrait tablets (853×1280, 820×1180, 768×1024) */
@media (min-width: 750px) and (max-width: 900px) and (min-height: 1000px) {
  .hero__container {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    gap: 40px;
  }
  
  .hero__media { 
    order: 0; 
  }
  
  .hero__title {
    font-size: clamp(20px, 3vw, 38px);
  }
  
  .hero__lead {
    font-size: clamp(16px, 2vw, 20px);
    margin-left: 0;
    margin-right: 0;
  }
}

/* Large screens with small height (ultra-wide monitors) */
@media (min-width: 1400px) and (max-height: 800px) {
  :root { 
    --nav-h: 60px; 
  }
  
  .hero {
    min-height: auto;
    padding: 30px var(--pad);
  }
  
  .hero__container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  
  .hero__title {
    font-size: clamp(32px, 4vw, 56px);
    margin-bottom: 16px;
  }
  
  .hero__lead {
    font-size: clamp(16px, 1.5vw, 20px);
    margin-bottom: 20px;
  }
  
  .btn {
    padding: 12px 22px;
    font-size: 16px;
  }
  
  .hero__text {
    text-align: left;
  }
  
  .hero__lead {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Extra large screens with very small height */
@media (min-width: 1800px) and (max-height: 600px) {
  :root { 
    --nav-h: 45px; 
  }
  
  .hero {
    min-height: auto;
    padding: 25px var(--pad);
  }
  
  .hero__title {
    font-size: clamp(28px, 2.5vw, 40px);
    margin-bottom: 12px;
  }
  
  .hero__lead {
    font-size: clamp(14px, 1.2vw, 16px);
    margin-bottom: 16px;
  }
  
  .btn {
    padding: 10px 20px;
    font-size: 15px;
  }
}

/* Landscape orientation - general approach */
@media (max-height: 600px) and (orientation: landscape) {
  :root { 
    --nav-h: 50px; 
  }
  
  .hero {
    min-height: auto;
    padding: 20px var(--pad);
  }
  
  .hero__container {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
  }
  
  .hero__title {
    font-size: clamp(20px, 4vw, 32px);
    margin-bottom: 12px;
  }
  
  .hero__lead {
    font-size: clamp(12px, 2.5vw, 16px);
    margin-bottom: 16px;
  }
  
  .btn {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .hero__media {
    order: 0;
  }
  
  .hero__text {
    text-align: left;
  }
  
  .hero__lead {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Ensure content is always visible on very short screens */
@media (max-height: 500px) {
  .hero {
    min-height: auto;
    padding: 20px var(--pad);
  }
}

/* ---- Generic section scaffolding ---- */
.section { padding: clamp(28px, 6vh, 80px) var(--pad); }
.container { width: 100%; max-width: var(--maxw); padding-inline: var(--pad); margin: 0 auto; }
.container.narrow { max-width: 1100px; }
.section-title{
  margin: 0 0 8px;
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 800;
  text-align: center;
}
.section-lead{
  margin: 0 auto clamp(36px, 4vw, 56px);
  color: var(--muted);
  text-align: center;
  max-width: 900px;
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.6;
}

/* --- Vision / Mission cards --- */
:root{
  --card: var(--yalloish);         /* sand-beige */
  --cardText: var(--navy);         /* navy text */
}
.vm-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: clamp(18px, 3vw, 32px);
}
.vm-card{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.2vw, 28px);
  align-items: center;
  background: var(--card);
  color: var(--cardText);
  /* Asymmetric capsule: TL & BR extra-large, TR large, BL straight */
  --vm-r2: clamp(44px, 7vw, 80px);      /* top-right */
  --vm-rx: clamp(64px, 10vw, 120px);    /* extra-large for TL & BR */
  --vm-r1: var(--vm-rx);                /* top-left */
  --vm-r3: var(--vm-rx);                /* bottom-right */
  --vm-r4: 0px;                         /* bottom-left */
  border-radius: var(--vm-r1) var(--vm-r2) var(--vm-r3) var(--vm-r4);
  padding: clamp(20px, 3.2vw, 40px) clamp(24px, 3.6vw, 48px);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  min-height: clamp(150px, 20vh, 240px);
  overflow: hidden;
}
.vm-icon{
  width: clamp(72px, 6vw, 96px); height: clamp(72px, 6vw, 96px);
  border-radius: 22px;
  background: var(--gold);
  display: grid; place-items: center;
}
.vm-icon svg{ width: clamp(36px, 3vw, 52px); height: clamp(36px, 3vw, 52px); color: var(--yalloish); }
.vm-text h3{
  margin: 0 0 10px; font-size: clamp(24px, 3vw, 40px);
}
.vm-text p{
  margin: 0; font-size: clamp(14px, 1.4vw, 18px); line-height: 1.5;
}
@media (max-width: 900px){
  .vm-grid{ grid-template-columns: 1fr; }
  .vm-card{ 
    text-align: left; 
    /* Maintain asymmetric shape with extra-rounded TL & BR on mobile */
    --vm-r2: clamp(28px, 8vw, 44px);     /* TR */
    --vm-rx: clamp(48px, 12vw, 80px);    /* TL & BR */
    --vm-r1: var(--vm-rx);
    --vm-r3: var(--vm-rx);
    --vm-r4: 0px;                        /* BL */
    border-radius: var(--vm-r1) var(--vm-r2) var(--vm-r3) var(--vm-r4);
  }
}

/* About (VM cards) – tighten spacing and make icon stack nicely on phones */
@media (max-width: 600px){
  .vm-card{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
    padding: 18px 16px;
    min-height: auto;
  }
  .vm-icon{
    margin-inline: auto;
    width: clamp(64px, 14vw, 80px); height: clamp(64px, 14vw, 80px);
  }
  .vm-text h3{ margin-bottom: 6px; }
  .vm-text p{ line-height: 1.45; }
}

/* keep comfy vertical space between sections so nothing touches */
.section{ padding-block: clamp(48px, 8vh, 100px); }

/* --- Differentiators grid --- */
.diff-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  column-gap: clamp(22px, 3vw, 32px);
  row-gap: clamp(44px, 7vw, 72px);
  /* balanced clearance above grid on all sizes */
  margin-top: clamp(60px, 6vw, 40px);
}
.diff-card{
  --badge-size: clamp(56px, 7.5vw, 84px);
  --badge-gap: clamp(12px, 1.4vw, 18px);
  position: relative;
  background: var(--card);
  color: var(--navy);
  border-radius: 18px;
  padding: calc(var(--badge-size) / 2 + var(--badge-gap)) 20px 20px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--navy) 20%, transparent);
  text-align: center;
}
.diff-card .badge{
  width: var(--badge-size); height: var(--badge-size);
  border-radius: calc(var(--badge-size) * .22);
  background: var(--gold);
  display: grid; place-items: center;
  position: absolute;
  left: 50%; transform: translate(-50%, -50%);
  top: 0;
}
.diff-card .badge img{ width: clamp(24px, calc(var(--badge-size) * .5), 48px); height: auto; display: block; }
.diff-card .badge svg{ width: 40px; height: 40px; color: var(--yalloish); }
.diff-card h3{
  margin-top: clamp(14px, 2vw, 22px);
  margin-bottom: 8px;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--navy);
}
.diff-card p{
  margin: 0;
  color: color-mix(in srgb, var(--navy) 82%, white 18%);
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.45;
}
@media (max-width: 1024px){
  .diff-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 600px){
  .diff-grid{ grid-template-columns: 1fr; }
}

/* Tablets: 2 columns; center the 5th card on its own row */
@media (min-width: 601px) and (max-width: 1024px){
  .diff-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
  .diff-card:nth-child(5){
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 640px;
  }
}

/* Desktop: center the second row pair together using a 6-col grid */
@media (min-width: 1025px){
  .diff-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  .diff-card{ grid-column: span 2; }
  .diff-card:nth-child(1){ grid-column: 1 / span 2; }
  .diff-card:nth-child(2){ grid-column: 3 / span 2; }
  .diff-card:nth-child(3){ grid-column: 5 / span 2; }
  .diff-card:nth-child(4){ grid-column: 2 / span 2; }
  .diff-card:nth-child(5){ grid-column: 4 / span 2; }
}

@media (max-width: 600px){
  /* Tighten the entire section to fit within the viewport */
  #differentiators.section{ padding-top: clamp(4px, 2vh, 10px); padding-bottom: clamp(14px, 5vh, 22px); }
  #differentiators .section-title{ font-size: clamp(22px, 6vw, 28px); margin-top: 0; margin-bottom: 6px; }
  #differentiators .section-lead{ margin: 0 auto clamp(16px, 5vw, 24px); font-size: clamp(13px, 3.2vw, 14px); line-height: 1.35; }

  .diff-grid{ grid-template-columns: 1fr; row-gap: clamp(20px, 6vw, 28px); }
  .diff-grid{ grid-template-columns: 1fr; row-gap: clamp(24px, 7vw, 32px); }
  .diff-card{ 
    text-align: center; 
    --badge-size: clamp(36px, 9vw, 48px);
    --badge-gap: clamp(8px, 2.8vw, 14px);
    padding: calc(var(--badge-size) / 2 + var(--badge-gap)) 12px 12px;
    border-radius: 12px;
  }
  .diff-card h3{ margin-top: clamp(8px, 2.4vw, 12px); margin-bottom: 4px; font-size: clamp(16px, 4.2vw, 18px); }
  .diff-card p{ font-size: clamp(12px, 3vw, 13.5px); line-height: 1.3; }
}

/* Larger phones: use 2 columns to further reduce vertical height */
@media (min-width: 520px) and (max-width: 600px){
  .diff-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 16px; row-gap: 22px; }
  .diff-card:nth-child(5){ grid-column: 1 / -1; }
}

/* CTA */
.cta-wrap{ display: grid; place-items: center; margin-top: clamp(22px, 4vw, 36px); }

/* Founder Section - clean version */
#founder {
--pad-block: clamp(28px, 5vh, 56px);
background: url("imgs/founder_bg.png") no-repeat center/cover, var(--bg);
background: linear-gradient(
  to bottom,
  rgba(0,0,0,.2),
  rgba(0,0,0,.1)
);
color: var(--text);
min-height: 100svh;
display: grid;
place-items: center;
padding: var(--pad-block) var(--pad);
position: relative; /* enable overlay */
}

/* dark overlay above founder background */
/* #founder::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.32),
    rgba(0,0,0,.44)
  );
  pointer-events: none;
  z-index: 0;
} */

/* ensure content is above the overlay */
#founder > *{ position: relative; z-index: 1; }

#founder .founder-container {
width: min(var(--maxw), 100%);
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
column-gap: clamp(28px, 4vw, 64px);
row-gap: clamp(18px, 3vw, 28px);
align-items: center;
}

/* Image: wrap & crop to kill SVG padding and white gaps */
#founder .founder-image {
position: relative;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}

/* Photo card like the reference */
.photo-card {
--card-radius: 28px;
position: relative;
border-radius: var(--card-radius);
overflow: hidden;
background: var(--navy);
aspect-ratio: auto;
border: 3px solid var(--navy);
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
max-height: 600px;
width: 100%;
}

.photo-card img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
display: block;
transform: translateZ(0);
}



/* spacing on desktop to match the look */
#founder .founder-image .photo-card {
margin: 10px 0 18px;
width: clamp(360px, 46vw, 640px);
}

/* Text */
#founder h2 {
margin: 0 0 8px;
font-size: clamp(26px, 3.6vw, 42px);
font-weight: 800;
line-height: 1.2;
color: var(--yalloish);
font-family: inherit;
}
#founder h3 {
margin: 0 0 14px;
font-size: clamp(16px, 2.2vw, 22px);
font-weight: 700;
letter-spacing: .2px;
color: var(--yalloish);
}
#founder p {
margin: 0 0 12px;
font-size: clamp(13px, 1.7vw, 16px);
line-height: 1.55;
}

/* Stats row */
#founder .founder-stats {
display: flex;
flex-wrap: wrap;
gap: clamp(10px, 1.5vw, 18px);
margin-top: 18px;
}

#founder .founder-stats div {
flex: 1 1 160px;
max-width: 210px;
background: var(--navy);
color: var(--yalloish);
padding: clamp(12px, 1.8vw, 18px);
border-radius: var(--radius);
border: 1px solid var(--gold);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 78px;
}

#founder .founder-stats h4 {
margin: 0;
font-size: clamp(15px, 1.8vw, 18px);
line-height: 1.2;
color: var(--gold);
}

#founder .founder-stats p {
margin: 4px 0 0;
font-size: clamp(10px, 1.3vw, 13px);
line-height: 1.25;
}

/* Mobile only - stacked layout */
@media (max-width: 768px) {
#founder {
min-height: auto;
}
#founder .founder-container {
grid-template-columns: 1fr;
text-align: center;
 gap: clamp(4px, 1.5vw, 8px);
}
#founder .founder-image {
margin-inline: auto;
max-width: min(540px, 88vw);
}
#founder .founder-stats {
justify-content: center;
}
/* Center text when stacked under image */
#founder .founder-text {
text-align: center;
}
#founder .founder-text h2,
#founder .founder-text h3 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}

/* Photo card responsive adjustments */
.photo-card {
aspect-ratio: 4 / 3;
max-width: min(540px, 88vw);
margin-inline: auto;
}
/* Keep headings centered on stacked layout */
#founder .founder-text h2,
#founder .founder-text h3{ text-align: center; }
.photo-card::before {
width: 80px;
height: 45px;
top: -3px;
left: -1px;
border-radius: 15px;
border: 3px solid #000000;
}
.photo-card::after {
width: 160px;
height: 160px;
right: -37px;
bottom: -47px;
border: 3px solid #000000;
}


/* Phones */
@media (max-width: 480px) {
#founder {
--pad-block: clamp(20px, 4vh, 34px);
}
#founder .founder-image {
max-width: min(380px, 90vw);
}

/* Photo card mobile adjustments */
.photo-card {
aspect-ratio: 7 / 6;
max-width: min(360px, 86vw);

}
.photo-card::before {
width: 65px;
height: 35px;
top: -2px;
left: 0px;
border-radius: 12px;
border: 3px solid #000000;
}
.photo-card::after {
width: 130px;
height: 130px;
right: -32px;
bottom: -37px;
border: 3px solid #000000;
}
}


#founder .founder-container {
width: min(var(--maxw), 100%);
margin: 0 auto;
display: grid;
grid-template-columns: .8fr 0.7fr; /* give text more width */
column-gap: clamp(24px, 3.2vw, 48px);
row-gap: clamp(14px, 2vw, 22px);
align-items: center;
}

#founder .founder-text{
align-self: stretch;
display: grid;
align-content: center;
row-gap: clamp(14px, 2vw, 22px);
min-height: clamp(200px, 25vh, 300px);
}

/* Tablet and Desktop: left-align text when side-by-side with image */
@media (min-width: 769px) {
#founder .founder-text {
text-align: start;
}
#founder .founder-text h2,
#founder .founder-text h3 {
text-align: start;
margin-left: 0;
margin-right: auto;
}
}

#founder img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
border-radius: var(--radius);
}

#founder h2 {
margin: 0 0 12px;
font-size: clamp(24px, 4vw, 40px);
font-weight: 700;
}
#founder h3 {
margin: 0 0 20px;
font-size: 18px;
font-weight: 500;
}
#founder p {
margin-bottom: 16px;
font-size: 16px;
line-height: 1.6;
}

#founder .founder-stats {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 30px;
}
#founder .founder-stats div {
flex: 1;
min-width: 180px;
background: var(--navy);
color: var(--yalloish);
padding: 20px;
border-radius: var(--radius);
text-align: center;
}
#founder .founder-stats h4 {
margin: 0;
font-size: 20px;
}
#founder .founder-stats p {
margin: 6px 0 0;
font-size: 14px;
}

/* Mobile only - stacked layout */
@media (max-width: 768px) {
#founder {
min-height: auto;        /* don't force full height on mobile */
padding: 60px var(--pad);
}
#founder .founder-container {
grid-template-columns: 1fr;
text-align: center;
gap: clamp(4px, 1.5vw, 8px);
}
#founder img {
max-width: 320px;
margin: 0 auto 8px;
object-fit: contain;
object-position: center center;
}
#founder .founder-stats {
justify-content: center;
}
/* Center text when stacked under image */
#founder .founder-text {
text-align: center;
}
#founder .founder-text h2,
#founder .founder-text h3 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}

/* Small phones */
@media (max-width: 480px) {
#founder {
padding: 40px var(--pad);
}
#founder h2 { font-size: 22px; }
#founder h3 { font-size: 16px; }
#founder p { font-size: 14px; }
/* Reduce space between image and text on small phones */
#founder .founder-container { gap: clamp(2px, 1vw, 6px); }
#founder img { 
margin: 0 auto 6px; 
object-fit: contain;
object-position: center center;
}
#founder .founder-stats div {
min-width: 140px;
padding: 16px;
}
}

/* Large screens with small height */
@media (min-width: 1400px) and (max-height: 800px) {
#founder {
min-height: auto;
max-height: 100vh;
padding: 30px var(--pad);
}

#founder .founder-container {
gap: 40px;
max-height: calc(100vh - 60px);
}

#founder img {
max-height: 50vh;
}

#founder h2 {
font-size: clamp(20px, 2.5vw, 28px);
}

#founder h3 {
font-size: clamp(14px, 1.8vw, 16px);
}

#founder p {
font-size: clamp(12px, 1.3vw, 14px);
}

#founder .founder-stats {
margin-top: 15px;
gap: 10px;
}

#founder .founder-stats div {
padding: 12px;
min-width: 120px;
}
}

/* Landscape orientation - flip case */
@media (orientation: landscape) and (max-height: 600px) {
#founder {
min-height: auto;
max-height: 100vh;
padding: 15px var(--pad);
}

#founder .founder-container {
gap: 20px;
max-height: calc(100vh - 30px);
}

#founder img {
max-height: 40vh;
}

#founder h2 {
font-size: clamp(18px, 2vw, 24px);
margin-bottom: 6px;
}

#founder h3 {
font-size: clamp(12px, 1.5vw, 14px);
margin-bottom: 8px;
}

#founder p {
font-size: clamp(10px, 1.2vw, 12px);
margin-bottom: 8px;
line-height: 1.3;
}

#founder .founder-stats {
margin-top: 10px;
gap: 8px;
}

#founder .founder-stats div {
padding: 8px;
min-width: 100px;
max-width: 150px;
}

#founder .founder-stats h4 {
font-size: clamp(14px, 1.8vw, 16px);
}

#founder .founder-stats p {
font-size: clamp(10px, 1.2vw, 12px);
}
}

/* Founder: responsive typography refinements (placed late to win specificity) */
@media (max-width: 991px) {
#founder p { font-size: clamp(16px, 2.2vw, 18px); line-height: 1.65; margin-bottom: 18px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
#founder h2 { font-size: clamp(30px, 4vw, 52px); }
#founder h3 { font-size: clamp(18px, 2vw, 26px); }
#founder p  { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; }
}

@media (min-width: 1200px) {
#founder h2 { font-size: clamp(40px, 3vw, 60px); }
#founder h3 { font-size: clamp(22px, 1.5vw, 30px); }
#founder p  { font-size: clamp(18px, 1.2vw, 20px); }
}

/* Founder stats layout fix: prevent stretching and center rows */
@media (min-width: 768px) {
#founder .founder-stats { justify-content: center; }
#founder .founder-stats div { flex: 0 1 300px; max-width: 340px; }
}

@media (min-width: 1200px) {
#founder .founder-stats div { flex-basis: 320px; }
}

/* Portrait tablets (853×1280, 820×1180, 768×1024) */
@media (min-width: 750px) and (max-width: 900px) and (min-height: 1000px) {
#founder .founder-container {
grid-template-columns: .8fr 1fr;
text-align: center;
}

#founder img {
max-width: none;
margin: 0;
}

#founder h2 {
font-size: clamp(24px, 3.5vw, 32px);
}

#founder h3 {
font-size: clamp(16px, 2.5vw, 18px);
}

#founder p {
font-size: clamp(14px, 2vw, 16px);
}
}

/* Specific range: Width 365-899px, Height 840-899px */
@media (min-width: 365px) and (max-width: 899px) and (min-height: 840px) and (max-height: 899px) {
#founder {
min-height: auto;
padding: 30px var(--pad);
}

#founder .founder-container {
grid-template-columns: 1fr;
text-align: center;
gap: 25px;
}

#founder img {
max-width: min(300px, 70vw);
margin: 0 auto;
}

#founder h2 {
font-size: clamp(20px, 4.5vw, 26px);
}

#founder h3 {
font-size: clamp(14px, 3vw, 16px);
}

#founder p {
font-size: clamp(13px, 2.8vw, 15px);
}

#founder .founder-stats {
gap: 8px;
}

#founder .founder-stats div {
min-width: 105px;
max-width: 160px;
padding: 8px;
min-height: 65px;
}

#founder .founder-stats h4 {
font-size: clamp(13px, 2.8vw, 15px);
line-height: 1.1;
}

#founder .founder-stats p {
font-size: clamp(9px, 2vw, 11px);
line-height: 1.2;
margin-top: 2px;
}
}

/* Short-height/landscape devices — avoid clipping */
@media (max-height: 620px) {
#founder {
min-height: auto;
}
}

/* --- FIT: tall portrait phones (e.g., 430×932 ~ iPhone 14 Pro Max) --- */
@media (max-width: 480px) and (min-height: 880px) and (max-height: 940px) {
#founder { 
padding-block: 18px;
min-height: 100svh;
}
#founder .founder-container { 
gap: 16px; 
}
#founder .founder-image {
max-width: 82vw;
aspect-ratio: 7 / 9;
}
#founder h2 { 
font-size: clamp(20px, 5.2svh, 26px); 
margin-bottom: 6px; 
}
#founder h3 { 
font-size: clamp(13px, 2.3svh, 16px); 
margin-bottom: 8px; 
}
#founder p { 
font-size: clamp(12px, 2svh, 14px); 
line-height: 1.35; 
margin-bottom: 8px; 
text-wrap: balance; 
}

#founder .founder-stats { 
gap: 8px; 
margin-top: 10px; 
justify-content: center; 
}
#founder .founder-stats div {
flex: 0 1 46%;
min-width: auto;
padding: 10px;
min-height: 66px;
}
#founder .founder-stats h4 { 
font-size: clamp(13px, 2.2svh, 16px); 
}
#founder .founder-stats p { 
font-size: clamp(9px, 1.8svh, 11px); 
line-height: 1.2; 
}
}

/* --- FIT: standard iPhone 12/13/14 portrait (390×844) --- */
@media (max-width: 430px) and (min-height: 810px) and (max-height: 860px) {
#founder { 
padding-block: 16px; 
min-height: 100svh; 
}
#founder .founder-container { 
gap: 14px; 
}
#founder .founder-image { 
max-width: 84vw; 
aspect-ratio: 7 / 9; 
}
#founder h2 { 
font-size: clamp(19px, 5.5svh, 24px); 
}
#founder h3 { 
font-size: clamp(13px, 2.4svh, 15px); 
}
#founder p { 
font-size: clamp(12px, 2.1svh, 13.5px); 
margin-bottom: 8px; 
line-height: 1.32; 
}
#founder .founder-stats { 
gap: 8px; 
margin-top: 10px; 
}
#founder .founder-stats div { 
flex: 0 1 46%; 
padding: 10px; 
min-height: 64px; 
}
}

/* Force-fit tall portrait phones (e.g. iPhone 12 Pro / 14 Pro Max) */
@media (max-width: 480px) and (min-height: 800px) {
#founder {
min-height: 100svh;
padding-block: 18px;
}
#founder .founder-container { 
gap: 14px; 
}
#founder h2 { 
font-size: clamp(20px, 5svh, 24px); 
margin-bottom: 6px; 
}
#founder h3 { 
font-size: clamp(14px, 3svh, 16px); 
margin-bottom: 6px; 
}
#founder p { 
font-size: clamp(12px, 2.5svh, 14px); 
line-height: 1.35; 
margin-bottom: 8px; 
}

/* Stats: 2 per row to save height */
#founder .founder-stats { 
justify-content: center; 
gap: 8px; 
margin-top: 10px; 
}
#founder .founder-stats div {
flex: 0 1 46%;
padding: 10px;
min-height: 64px;
}
}
/* Fix: keep founder stats 2-up on tall-portrait tablets (e.g., 853×1280) */
@media (min-width: 800px) and (max-width: 900px) and (min-height: 1100px) {
#founder .founder-stats{
display: grid;
grid-template-columns: repeat(2, minmax(170px, 1fr));
gap: 12px;
justify-items: stretch;
}
#founder .founder-stats > div{
min-width: 0;
max-width: none;
}
/* center the third card on its own row */
#founder .founder-stats > div:nth-child(3){
grid-column: 1 / -1;
justify-self: center;
max-width: 460px;
}
}
/* Founder stats: 2-up + centered third card */
#founder .founder-stats{
display: grid !important;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 14px;
justify-content: center;
}
#founder .founder-stats > div{
min-width: 0;
max-width: 320px;
}
#founder .founder-stats > div:nth-child(3){
grid-column: 1 / -1;
justify-self: center;
width: min(460px, 100%);
}

/* Phones: fall back to 1-per-row and center cards */
@media (max-width: 520px){
#founder .founder-stats{
grid-template-columns: 1fr;
justify-content: center;
justify-items: center;
}
#founder .founder-stats > div{
grid-column: auto;
justify-self: center;
width: 100%;
max-width: 360px;
}
}

/* Tall portrait phones common (≈390–430w × 880–940h): ensure founder fits 100svh */
@media (min-width: 390px) and (max-width: 430px) and (min-height: 880px) and (max-height: 940px){
#founder{ min-height: 100svh; padding-block: 6px; }
#founder .founder-container{ gap: 0; }
#founder .founder-image{ max-width: 70vw; }
#founder .founder-image .photo-card{ margin: 0; }
#founder img{ margin: 0 auto 4px; }
#founder h2{ font-size: clamp(18px, 5.2svh, 22px); margin-bottom: 2px; }
#founder h3{ font-size: clamp(12px, 2.3svh, 14px); margin-bottom: 2px; }
#founder p{ font-size: clamp(11.5px, 2svh, 13px); line-height: 1.32; margin-bottom: 4px; text-wrap: balance; }
#founder .founder-stats{ display: grid !important; grid-template-columns: repeat(2, minmax(150px,1fr)); gap: 8px; margin-top: 8px; justify-items: stretch; }
#founder .founder-stats > div{ min-width: 0; padding: 10px; }
}

/* iPhone 12/13/14 portrait (≈390×844): fit founder to 100svh */
@media (min-width: 380px) and (max-width: 410px) and (min-height: 820px) and (max-height: 880px){
#founder{ min-height: 100svh; padding-block: 6px; }
#founder .founder-container{ gap: 0; }
#founder .founder-image{ max-width: 68vw; }
/* reduce image height vs default 7/6 ratio on tiny phones */
.photo-card{ aspect-ratio: 4 / 3; max-width: min(360px, 78vw); margin-inline: auto; }
#founder .founder-image .photo-card{ margin: 0; }
#founder img{ margin: 0 auto 4px; }
#founder h2{ font-size: clamp(18px, 5.1svh, 22px); margin-bottom: 2px; }
#founder h3{ font-size: clamp(12px, 2.2svh, 14px); margin-bottom: 2px; }
#founder p{ font-size: clamp(11.5px, 2svh, 13px); line-height: 1.3; margin-bottom: 4px; text-wrap: balance; }
#founder .founder-stats{ display: grid !important; grid-template-columns: repeat(2, minmax(150px,1fr)); gap: 8px; margin-top: 8px; justify-items: stretch; }
#founder .founder-stats > div{ min-width: 0; padding: 10px; }
}

/* iPhone 14/15 Pro Max portrait (≈430×932) and nearby sizes */
@media (min-width: 420px) and (max-width: 450px) and (min-height: 900px) and (max-height: 980px){
#founder{ min-height: 100svh; padding-block: 6px; }
#founder .founder-container{ gap: 0; }
/* Enlarge image slightly while compressing text to keep 100svh */
#founder .founder-image{ max-width: 76vw; }
#founder .founder-image .photo-card{ margin: 0; }
#founder img{ margin: 0 auto 4px; }
.photo-card{ aspect-ratio: 4 / 3; }
#founder h2{ font-size: clamp(20px, 4.8svh, 24px); margin-bottom: 2px; }
#founder h3{ font-size: clamp(12.5px, 2.2svh, 14.5px); margin-bottom: 2px; }
#founder p{ font-size: clamp(12px, 2svh, 13.5px); line-height: 1.3; margin-bottom: 4px; text-wrap: balance; }
#founder .founder-stats{ display: grid !important; grid-template-columns: repeat(2, minmax(160px,1fr)); gap: 8px; margin-top: 8px; justify-items: stretch; }
#founder .founder-stats > div{ padding: 10px; min-height: 60px; }
}

/* Founder spacing overrides: apply after founder styles */
#founder .founder-container { gap: clamp(10px, 2vw, 14px); }
#founder .founder-image .photo-card { margin: 4px 0 6px; }
#founder .founder-image .photo-card img { display: block; margin: 0; }

@media (max-width: 600px){
#founder .founder-container { gap: 4px; }
#founder .founder-image .photo-card { margin: 0; }
#founder img{ margin: 0 auto 8px; }
}

@media (max-width: 480px) and (min-height: 880px) and (max-height: 940px) {
#founder .founder-image {
max-width: 82vw;
/* aspect-ratio: 7 / 9; */
}
}

/* Belvro Statement Section */
.section-statement {
background: url("https://cdn.prod.website-files.com/68a505829f9f457e31f923b4/68b02fe7742d3415f6881f35_Frame%20131%20(1).png")
          no-repeat center/cover;
color: #0b1120;
padding: clamp(28px, 6vh, 80px) var(--pad);
text-align: center;
}

.section-statement .container { width: 100%; max-width: var(--maxw); padding-inline: var(--pad); margin: 0 auto; }

.section-statement p {
font-size: clamp(15px, 2vw, 20px);
line-height: 1.6;
margin: 0 auto clamp(18px, 3vh, 28px);
max-width: 900px;
font-weight: 500;
}

/* ====== Services ====== */
.services {
background: url("https://cdn.prod.website-files.com/68a505829f9f457e31f923b4/68b02e2b7096334b9f6d5f34_Frame%20206%20(1).png")
          no-repeat center/cover,
          var(--bg);
padding: clamp(28px, 6vh, 80px) var(--pad);
}
.services-grid{
display:flex;
gap:clamp(12px, 2vw, 24px);
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.service-card{
display:flex;
flex-direction:column;
background:transparent;
border-radius:20px;
overflow:hidden;
height:100%;
flex:1 1 0;
min-width:0;
max-width:400px;
}
.service-media{
aspect-ratio: 16/10;
border-radius:20px 20px 0 0;
overflow:hidden;
background:var(--navy);
}
.service-media img{
width:100%;height:100%;object-fit:cover;display:block;
transform:translateZ(0);
}
.service-body{
background: var(--card, var(--yalloish));
color:var(--navy);
border-radius:0 0 20px 20px;
padding: clamp(14px, 2vw, 20px);
box-shadow: 0 10px 24px rgba(0,0,0,.22);
display:flex;
flex-direction:column;
gap:12px;
flex:1 1 auto;
}
.service-title{
margin:0;
font-size: clamp(16px, 1.6vw, 18px);
font-weight:700;
}
.service-copy{
margin:0;
font-size: clamp(13px, 1.3vw, 15px);
line-height:1.5;
-webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
line-clamp: 3;
}
.service-list{
margin:0; padding:0; list-style:none; display:grid; gap:8px;
font-size: clamp(13px, 1.3vw, 15px);
}
.service-list li{
position:relative; padding-inline-start:28px; padding-left:28px; /* LTR fallback */
}
.service-list li::before{
content:""; position:absolute; inset-inline-start:0; left:0; right:auto; top:.15em; /* LTR fallback */
width:16px; height:16px;
background: url("imgs/Home/Services/check.svg") no-repeat center / contain;
}
/* RTL support */
[dir="rtl"] .service-list li{ padding-inline-start:0; padding-inline-end:28px; padding-left:0; padding-right:28px; }
[dir="rtl"] .service-list li::before{ inset-inline-start:auto; inset-inline-end:0; left:auto; right:0; }

/* button inside card */
.service-btn{
margin-top:auto;
display:inline-flex; align-items:center; justify-content:center; text-align:center;
background: var(--gold);
color: var(--yalloish); text-decoration:none; font-weight:700;
padding: clamp(8px, 1.4vw, 12px) clamp(14px, 2.6vw, 20px);
border-radius:999px;
border:2px solid transparent;
box-shadow: 0 12px 28px rgba(197,163,94,.22);
transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
 gap: clamp(6px, 1vw, 10px);
}
.service-btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(197,163,94,.30); }

/* Add arrow icon that scales responsively */
.service-btn::after{
 content: "";
 width: clamp(12px, 1.4vw, 16px);
 height: clamp(12px, 1.4vw, 16px);
 background: url("imgs/Home/arrow.png") no-repeat center / contain;
 flex: 0 0 auto;
 transition: transform .25s ease;
}
.service-btn:hover::after{ transform: translateX(4px); }

/* Contact CTA tweak to match mock */
.services-cta{
border-radius:var(--radius);
box-shadow:0 14px 30px rgba(0,0,0,.25);
}

/* ====== Services Responsiveness ====== */
/* Desktop: 3 services on same line (1200px+) */
@media (min-width: 1200px){
.services-grid{
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: clamp(16px, 2.5vw, 32px);
}
.service-card{ 
  flex: 1 1 0;
  max-width: none;
}
}

/* Large tablets: 3 services on same line (992px-1199px) */
@media (min-width: 992px) and (max-width: 1199px){
.services-grid{
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
}
.service-card{ 
  flex: 1 1 0;
  max-width: 320px;
}
}

/* Medium tablets: 2 services per row (768px-991px) */
@media (min-width: 768px) and (max-width: 991px){
.services-grid{
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 24px);
}
.service-card{ 
  flex: 1 1 calc(50% - 12px);
  max-width: 350px;
  min-width: 280px;
}
}

/* Mobile: 1 service per row (below 768px) */
@media (max-width: 767px){
.services-grid{
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 24px);
}
.service-card{ 
  flex: 1 1 100%;
  max-width: 400px;
  min-width: 0;
}
.service-media{ 
  aspect-ratio: 16/11; 
}
.service-btn{ 
  width: 100%; 
}
}

/* Small mobile: tighter spacing (below 480px) */
@media (max-width: 480px){
.services-grid{
  gap: clamp(12px, 2.5vw, 16px);
}
.service-card{ 
  max-width: 100%;
}
.service-body{
  padding: clamp(12px, 2vw, 16px);
  gap: 10px;
}
.service-title{
  font-size: clamp(15px, 3.5vw, 17px);
}
.service-copy{
  font-size: clamp(12px, 2.8vw, 14px);
}
.service-list{
  font-size: clamp(12px, 2.5vw, 14px);
}
}

/* Very small screens: minimal spacing (below 360px) */
@media (max-width: 360px){
.services-grid{
  gap: 12px;
}
.service-body{
  padding: 12px;
  gap: 8px;
}
.service-title{
  font-size: clamp(14px, 4vw, 16px);
}
.service-copy{
  font-size: clamp(11px, 3vw, 13px);
}
.service-list{
  font-size: clamp(11px, 2.8vw, 13px);
}
}

/* Landscape tablets and short screens */
@media (min-width:1400px) and (max-height:800px){
.service-media{ 
  aspect-ratio: 16/8; 
}
.service-body{ 
  padding: 16px; 
}
}

.eyebrow-container {
  background: linear-gradient(
    135deg,
    #b68a43 0%,     /* rich gold base */
    #d4b36c 25%,    /* softer mid-gold */
    #c9b384 50%,    /* highlight gold */
    #d4b36c 75%,    /* back to soft */
    #b68a43 100%    /* deep gold again */
  );
  color: var(--navy);
  text-align: center;
  padding: 14px 22px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 500;
}
/* Subtle overlay to keep text readable across the gradient */
.eyebrow-container::before{
  content: "";
  position: absolute; inset: 0;
  /* vertical subtle shade + horizontal right-side darkening for equalized contrast */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.08)),
    linear-gradient(90deg, rgba(0,0,0,0.00) 40%, rgba(0,0,0,0.24) 100%),
    linear-gradient(270deg, rgba(0,0,0,0.00) 40%, rgba(0,0,0,0.24) 100%);
  pointer-events: none;
}
/* Eyebrow text - centered, legible on both sides of the gradient */
.eyebrow-container .eyebrow{
  margin: 0;
  text-align: center;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  padding-inline: var(--pad);
  max-width: var(--maxw);
  margin-inline: auto;
}
/* ===== Core Values ===== */
#core-values {
background: var(--bg);
color: var(--text);
padding: clamp(28px, 6vh, 80px) var(--pad);
min-height: auto; /* avoid forcing full screen on mobiles */
}
#core-values .container { width: 100%; max-width: var(--maxw); padding-inline: var(--pad); margin: 0 auto; }
#core-values .eyebrow {
color: var(--muted);
text-align: center;
font-size: clamp(14px, 1.6vw, 18px);
margin: 0 0 14px;
}
#core-values .section-title { margin-bottom: clamp(18px, 2.8vw, 28px); }

.cv-grid {
display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr));
gap: clamp(18px, 3vw, 36px) clamp(18px, 3vw, 28px);
margin-top: clamp(12px, 2vw, 18px);
}
.cv-card {
display: grid;
grid-template-columns: 1fr;
gap: clamp(10px, 1.8vw, 16px);
align-items: start;
justify-items: center;
text-align: center;
}
.cv-badge {
width: 86px; height: 86px;
/* Match reference: TL sharp, TR large, BR sharp, BL large */
--cv-lg: clamp(26px, 5.6vw, 10px);
border-radius: 0 var(--cv-lg) 0 var(--cv-lg);
background: var(--gold);
display: grid; place-items: center;
margin-inline: auto;
font-weight: bolder;
font-size: clamp(28px, 3.2vw, 36px);
color: var(--yalloish); 
}

@media (max-width: 1024px) {
.cv-grid { grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 640px) {
.cv-grid { grid-template-columns: 1fr; }
.cv-card { grid-template-columns: 1fr; }
.cv-badge {
margin-inline: auto; width: 78px; height: 78px;
--cv-lg: clamp(22px, 10vw, 36px);
border-radius: 0 var(--cv-lg) 0 var(--cv-lg);
}
}



/* Make each card use fixed "slots": badge / title / blurb */
.cv-card{
  display: grid;
  grid-template-rows: auto minmax(calc(1.2em * 2), auto) minmax(calc(1.5em * 2), auto);
  /* badge | title (2 lines) | blurb (2 lines) */
}

/* Title: keep a consistent slot and TOP-align the text */
.cv-text h3{
  margin: 0 0 clamp(6px, 1vw, 10px);
  font-size: clamp(22px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  min-height: calc(1.2em);  /* equal slot height */
  display: flex;
  align-items: flex-start;       /* <— was center; this caused "drift" */
  justify-content: center;
}

/* Blurb: equal slot height + (optionally) clamp to 2 lines on wider screens */
.cv-text p{
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.5;
  min-height: calc(1.5em * 2);   /* equal slot height */
  max-width: 48ch;
}

/* On tablets/desktop, clamp blurbs so rows stay perfectly level */
@media (min-width: 641px){
  .cv-text p{
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* keep to 2 lines for alignment */
    line-clamp: 2;               /* standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* On small phones, let content grow naturally */
@media (max-width: 640px){
  .cv-card{ grid-template-rows: auto auto auto; }
  .cv-text h3, .cv-text p{ min-height: 0; }
}


/* Headings now aligned uniformly via reserved height above */

/* ===== What Makes Belvro Tick (same behavior as .diff-grid/.diff-card) ===== */
#belvro-tick{
  padding: clamp(28px, 6vh, 80px) var(--pad);
  background:
    url("https://cdn.prod.website-files.com/68a505829f9f457e31f923b4/68b02e2b7096334b9f6d5f34_Frame%20206%20(1).png") no-repeat center/cover,
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.03), transparent 40%) var(--bg);
}
#belvro-tick .container{
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--pad);
  margin: 0 auto;
}

/* grid same as .diff-grid */
#belvro-tick .tick-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  column-gap: clamp(18px, 2.5vw, 26px);
  row-gap: clamp(38px, 6vw, 64px);
  margin-top: clamp(20px, 3.5vw, 32px);
}

/* card same as .diff-card */
#belvro-tick .tick-card{
  --badge-size: clamp(56px, 7.5vw, 84px);
  position: relative;
  background: var(--card);
  color: var(--navy);
  border-radius: 18px;
  padding: calc(var(--badge-size) / 2 + 12px) 18px 18px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--navy) 20%, transparent);
  text-align: center;
}


#belvro-tick .tick-card {
  --badge-size: clamp(56px, 7.5vw, 84px);
  position: relative;
  background: #0b1120; 
  color: var(--yalloish); 
  border-radius: 18px;
  padding: calc(var(--badge-size) / 2 + 12px) 18px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  text-align: center;
  border: 1px solid rgba(212,175,55,0.4); 
}

#belvro-tick .tick-card .badge {
  width: var(--badge-size); height: var(--badge-size);
  border-radius: calc(var(--badge-size) * .22);
  background: var(--gold);
  display: grid; place-items: center;
  position: absolute;
  left: 50%; transform: translate(-50%, -50%);
  top: 0;
}

#belvro-tick .tick-card h3 {
  margin-top: clamp(14px, 2vw, 22px);
  margin-bottom: 8px;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--yalloish); 
  font-weight: 600;
}

#belvro-tick .tick-card p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.45;
}

/* Base breakpoints */
@media (max-width: 1024px){
  #belvro-tick .tick-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 600px){
  #belvro-tick .tick-grid{ grid-template-columns: 1fr; }
}

/* Tablets: 2 cols; center 5th card full row */
@media (min-width: 601px) and (max-width: 1024px){
  #belvro-tick .tick-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
  #belvro-tick .tick-card:nth-child(5){
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 640px;
  }
}

/* Desktop: 6-col grid to center row 2 pair */
@media (min-width: 1025px){
  #belvro-tick .tick-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  #belvro-tick .tick-card{ grid-column: span 2; }
  #belvro-tick .tick-card:nth-child(1){ grid-column: 1 / span 2; }
  #belvro-tick .tick-card:nth-child(2){ grid-column: 3 / span 2; }
  #belvro-tick .tick-card:nth-child(3){ grid-column: 5 / span 2; }
  #belvro-tick .tick-card:nth-child(4){ grid-column: 2 / span 2; }
  #belvro-tick .tick-card:nth-child(5){ grid-column: 4 / span 2; }
}

/* Phones tightening same as differentiators */
@media (max-width: 600px){
  #belvro-tick.section{ padding-top: clamp(4px, 2vh, 10px); padding-bottom: clamp(14px, 5vh, 22px); }
  #belvro-tick .section-title{ font-size: clamp(22px, 6vw, 28px); margin-top: 0; margin-bottom: 6px; }
  #belvro-tick .section-lead{ margin: 0 auto clamp(16px, 5vw, 24px); font-size: clamp(13px, 3.2vw, 14px); line-height: 1.35; }

  #belvro-tick .tick-grid{ grid-template-columns: 1fr; row-gap: clamp(24px, 7vw, 32px); }
  #belvro-tick .tick-card{
    --badge-size: clamp(36px, 9vw, 48px);
    --badge-gap: clamp(8px, 2.8vw, 14px);
    padding: calc(var(--badge-size) / 2 + var(--badge-gap)) 12px 12px;
    border-radius: 12px;
  }
  #belvro-tick .tick-card h3{ margin-top: clamp(8px, 2.4vw, 12px); margin-bottom: 4px; font-size: clamp(16px, 4.2vw, 18px); }
  #belvro-tick .tick-card p{ font-size: clamp(12px, 3vw, 13.5px); line-height: 1.3; }
}

/* Larger phones: 2 cols + make 5th full width */
@media (min-width: 520px) and (max-width: 600px){
  #belvro-tick .tick-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 16px; row-gap: 22px; }
  #belvro-tick .tick-card:nth-child(5){ grid-column: 1 / -1; }
}


/* ---------- Tokens (tweak freely) ---------- */
:root{
  --faq-bg:   var(--navy);        /* section background */
  --faq-text: var(--yalloish);
  --faq-muted: color-mix(in srgb, var(--yalloish) 78%, transparent);
  --faq-gold: var(--gold);        /* borders & accents */
  --faq-max:  1200px;
  --faq-pad:  24px;
  --faq-radius: 12px;
}

/* ---------- Layout ---------- */
.faq-section{
  background: var(--faq-bg);
  color: var(--faq-text);
  padding: clamp(40px, 7vw, 80px) var(--faq-pad);
}
.faq-container{
  margin: 0 auto;
  max-width: var(--faq-max);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}
@media (min-width: 900px){
  .faq-container{
    grid-template-columns: minmax(260px, .9fr) 1.1fr;
    gap: clamp(28px, 6vw, 60px);
  }
}

/* ---------- Left side ---------- */
.faq-title{
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: .5px;
  color: var(--faq-gold);
}
.faq-copy{
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  color: var(--faq-muted);
  max-width: 46ch;
}

/* Add responsive padding to the FAQ intro block */
.faq-intro{
  padding: clamp(10px, 2vw, 20px);
}

/* ---------- Accordion ---------- */
.faq-accordion{
  display: grid;
  gap: 16px;
}
.faq-item{
  border: 1px solid color-mix(in oklab, var(--faq-gold) 70%, transparent);
  border-radius: var(--faq-radius);
  background: rgba(197,163,94,0.05);
  overflow: hidden;
}
.faq-trigger{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  font: inherit;
  color: var(--faq-text);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  outline-offset: 3px;
}
.faq-trigger span:first-child{
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 500;
}

/* Chevron */
.chev{
  width: 18px; height: 18px;
  position: relative;
  transform: rotate(0deg);
  transition: transform .25s ease;
}
.chev::before, .chev::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--faq-gold);
  border-bottom: 2px solid var(--faq-gold);
  transform: rotate(45deg);
}

/* Panel (height animation) */
.faq-panel{
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  max-height: 0;          /* fully collapse */
  height: 0;
  opacity: 0;
  transition: grid-template-rows .28s ease,
              max-height .28s ease,
              height .28s ease,
              opacity .28s ease,
              padding .28s ease;
  padding: 0 20px;        /* no bottom padding when closed */
}
.faq-panel > *{ overflow: hidden; }
.faq-panel p{
  color: var(--faq-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  padding: 0 0 18px;
  margin: 0;
}

/* Open state */
.faq-item.is-open .faq-panel{
  grid-template-rows: 1fr;
  max-height: 1000px;   /* allow content height */
  height: auto;
  opacity: 1;
  padding: 0 20px 18px; /* space under open panel */
}
.faq-item.is-open .chev{
  transform: rotate(180deg);
}

/* Hover/focus polish */
.faq-item:hover{
  border-color: var(--faq-gold);
}
.faq-trigger:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--faq-gold) 60%, transparent);
  border-radius: var(--faq-radius);
}


/* ---------- Footer ---------- */



  
.social-links {
display: flex;
justify-content: center;
gap: 20px;
}

.social-links a {
color: #fff; /* You can change this to a different color */
text-decoration: none;
font-size: 30px; /* Increased icon size */
transition: transform 0.3s ease, color 0.3s ease;
border-radius: 50%; /* Optional: Adds round border to icons */
padding: 10px;
background: #c5a35e; /* Optional: Background color for icons */
}

.social-links a:hover {
transform: scale(1.2); /* Slight zoom effect on hover */
color: #fff; /* Change color on hover if needed */
background-color: #9e7c44; /* Hover background color */
}

.social-links svg {
width: 30px; /* Adjust size for SVG icons */
height: 30px;
}

/* Mobile Styles */
@media (max-width: 768px) {
.social-links a {
    font-size: 26px; /* Slightly smaller icons on smaller screens */
}
}

/* Adjust for small devices (Phones) */
@media (max-width: 480px) {
.social-links a {
    font-size: 22px; /* Even smaller icons for very small screens */
}
}


@media (max-width: 768px) {
.social-links a {
font-size: 20px; /* Smaller icons on smaller screens */
}
}

.contact-container {
background: var(--gold);
padding: 30px;
border-radius: var(--radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-width: 600px;
margin: 0 auto;
}

.contact-info {
text-align: center;
margin-bottom: 30px;
}

.contact-info h2 {
font-size: 36px;
margin-bottom: 20px;
color: var(--yalloish);
}

.contact-info p {
font-size: 18px;
margin-bottom: 20px;
color: var(--yalloish);
}

.social-links {
display: flex;
justify-content: center;
gap: 20px;
}

.social-links a {
color: var(--yalloish);
text-decoration: none;
font-size: 30px;
padding: 10px;
background: var(--gold);
border-radius: 50%;
transition: transform 0.3s ease, color 0.3s ease;
}

.social-links a:hover {
transform: scale(1.2);
color: var(--yalloish);
background-color: var(--gold);
}

form {
display: flex;
flex-direction: column;
gap: 20px;
}

form label {
font-size: 16px;
margin-bottom: 8px;
color: var(--yalloish);
}

form input,
form textarea {
padding: 12px;
font-size: 16px;
border-radius: 8px;
border: none;
margin-bottom: 16px;
outline: none;
}

form input::placeholder,
form textarea::placeholder {
color: #bbb;
}

form button {
padding: 14px;
background: var(--gold);
color: var(--bg);
font-size: 18px;
border-radius: var(--radius);
cursor: pointer;
transition: background-color 0.3s ease;
border: none;
}

form button:hover {
background-color: color-mix(in srgb, var(--gold) 85%, var(--navy) 15%);
color: var(--bg);
}

/* ---- Contact section (override + layout) ---- */
#contact{ --contact-radius: clamp(12px, 1.4vw, 20px); }
#contact .contact-container{
max-width: var(--maxw);
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(24px, 4vw, 48px);
align-items: start;
border-radius: var(--contact-radius);
padding: clamp(18px, 3vw, 40px);
}
#contact .contact-info{ text-align: left; }
#contact .contact-info h2{
font-size: clamp(32px, 6vw, 64px);
line-height: 1.05;
letter-spacing: .2px;
}
#contact .contact-info h2 .navy-word{ color: var(--navy); }
#contact .contact-info p{ max-width: 46ch; color: var(--yalloish); }
#contact .follow-head{ display: block;  margin: 28px 0 10px; font-size: clamp(16px, 1.8vw, 20px); color: var(--navy); }

/* Socials styled like round chips */
#contact .social-links{ display: flex; justify-content: flex-start; gap: clamp(10px, 1.8vw, 16px); }
#contact .social-links a{
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px; height: 64px;
background: #fff; /* keep filled circle, but no borders */
color: #9e7c44;
border-radius: 50%;
border: none;
box-shadow: none;
line-height: 0; /* ensure perfect centering */
}
#contact .social-links a i{ font-size: 28px; line-height: 1; }
#contact .social-links a:hover{ transform: translateY(-2px) scale(1.05); background:var(--yalloish); color: var(--navy); }

/* Form: soft, pill-like fields */
#contact form{ gap: clamp(12px, 2.2vw, 18px); }
#contact form label{ color: #0b1120; font-weight: 500; }
#contact form input,
#contact form textarea{
width: 100%;
background: color-mix(in oklab, #ffffff 86%, #c5a35e 14%);
border: 1px solid rgba(0,0,0,.08);
border-radius: var(--contact-radius);
padding: 14px 16px;
color: #0b1120;
}
#contact form textarea{ min-height: 140px; resize: vertical; }
#contact form input::placeholder,
#contact form textarea::placeholder{ color: #7e7e7e; }
#contact form button{
width: 100%;
height: 56px;
border-radius: var(--contact-radius);
background: var(--yalloish);
color: var(--navy);
font-weight: 700;
box-shadow: 0 10px 24px color-mix(in srgb, var(--navy) 15%, transparent);
line-height: 2.5;
}
#contact form button:hover{ background: var(--navy); color: var(--yalloish); }

/* Button states & animations */
#contact form button.is-loading{ pointer-events: none; opacity: .9; }
#contact form button.is-success{ background: var(--navy); color: var(--yalloish); }
#contact form button.is-error{ background: #b42318; color: var(--yalloish); animation: shakeX .38s ease both; }

#contact .btn--spinner{
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--navy) 28%, transparent);
border-top-color: var(--navy); border-right-color: var(--navy);
display: inline-block; vertical-align: middle;
animation: spin .8s linear infinite;
}
#contact .btn--check{
display: inline-block; vertical-align: middle; line-height: 0;
width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--yalloish);
display: grid; place-items: center; font-size: 14px; font-weight: 800;
animation: popIn .35s ease both;
}

/* Success panel */
#contact .contact-success{ display: none; color: var(--navy); background: var(--yalloish); padding: 16px; border-radius: var(--contact-radius); }
#contact .contact-container.sent .contact-success{ display: block; animation: fadeInUp .35s ease both; }
#contact .contact-container.sent form{ display: none; }

@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes popIn{ 0%{ transform: scale(.6); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } }
@keyframes fadeInUp{ 0%{ opacity: 0; transform: translateY(8px); } 100%{ opacity: 1; transform: translateY(0); } }
@keyframes shakeX{ 0%,100%{ transform: translateX(0); } 20%{ transform: translateX(-5px); } 40%{ transform: translateX(5px); } 60%{ transform: translateX(-3px); } 80%{ transform: translateX(3px); } }

/* Responsiveness */
@media (max-width: 900px){
#contact .contact-container{ grid-template-columns: 1fr; }
#contact .social-links{ justify-content: center; }
#contact .contact-info{ text-align: center; }
#contact .contact-info p{ margin-left: auto; margin-right: auto; }
}
/* Make contact block truly full-width on small screens */
@media (max-width: 640px){
#contact .contact-container{
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 0;
  padding: clamp(14px, 4vw, 22px) var(--pad);
}
}
@media (max-width: 520px){
#contact .social-links a{ width: 56px; height: 56px; }
#contact .social-links a i{ font-size: 24px; }
#contact form button{ height: 52px; }
}

@media (max-width: 768px) {
.contact-container {
  padding: 15px;
}

.contact-info h2 {
  font-size: 28px;
}

.contact-info p {
  font-size: 16px;
}

form {
  gap: 15px;
}

form input,
form textarea {
  font-size: 14px;
}

form button {
  font-size: 16px;
}
}

@media (max-width: 480px) {
.contact-container {
  padding: 10px;
}

.contact-info h2 {
  font-size: 24px;
}

.contact-info p {
  font-size: 14px;
}

form button {
  font-size: 14px;
}
}

/* --------- Hero refinements (kept adjacent to hero) --------- */
@media (min-width: 1024px) {
.hero { padding-block: 32px; }
.hero__container { grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero__text { max-width: 680px; }
.hero__title { font-size: clamp(48px, 5vw, 88px); }
.hero__lead { font-size: clamp(18px, 1.3vw, 24px); }
.hero__media { justify-self: end; }
.hero__img { max-width: 560px; width: 100%; height: auto; }
}
@media (min-width: 1280px) {
.hero__title { font-size: clamp(52px, 4.2vw, 80px); }
.hero__lead  { font-size: clamp(18px, 1.1vw, 22px); }
.hero__img   { max-width: 560px; }
}
@media (min-width: 1440px) {
.hero__container { gap: 64px; grid-template-columns: 1.2fr 0.8fr; }
.hero__title { font-size: clamp(48px, 3.4vw, 72px); }
.hero__lead  { font-size: clamp(18px, 1vw, 22px); }
}
@media (min-width: 1920px) {
.hero { padding-block: 64px; }
.hero__container { gap: 80px; }
.hero__title { font-size: 64px; }
.hero__lead  { font-size: 22px; }
.hero__img   { max-width: 600px; }
}
@media (max-width: 768px) {
.hero { min-height: auto; padding-block: 24px; }
.hero__container { gap: 24px; }
.hero__title { line-height: 1.2; }
.hero__img { width: min(88vw, 420px); }
}
@media (max-width: 480px) {
:root { --nav-h: 60px; }
.brand img { height: clamp(44px, 18vw, 64px); }
.hero__title { font-size: clamp(22px, 9vw, 32px); }
.hero__lead { font-size: clamp(13px, 4.2vw, 16px); }
.btn { padding: 10px 18px; font-size: 15px; }
.hero__img { width: 76vw; max-height: 36vh; }
}

/* ===== Consolidated mobile overrides (general breakpoints) ===== */
@media (max-width: 768px){
  /* Ensure founder section does not force full viewport on phones */
  #founder{ min-height: auto !important; padding-block: clamp(24px, 6vh, 48px); }
  #founder .founder-image{ max-width: min(520px, 90vw); margin-inline: auto; }
  #founder .photo-card{ aspect-ratio: auto; max-width: min(520px, 90vw); margin-inline: auto; }
  #founder .founder-container{ gap: clamp(2px, 1vw, 6px) !important; }
  #founder img{ margin: 0 auto 6px !important; }
}

@media (max-width: 480px){
  #founder{ padding-block: clamp(20px, 5vh, 36px); }
  #founder .founder-image{ max-width: min(380px, 92vw); }
  #founder .photo-card{ aspect-ratio: auto; max-width: min(360px, 90vw); }
}

/* ========= Center-orphan items in grids across the site ========= */
/* 4-column grids (desktop services): center last 1 or 2 cards */
.services-grid > :nth-last-child(1):nth-child(4n+1) { grid-column: 2 / span 2; }
.services-grid > :nth-last-child(2):nth-child(4n)   { grid-column: 2; }
.services-grid > :nth-last-child(2):nth-child(4n+1) { grid-column: 3; }

/* 3-column grids (desktop core-values, tick): center single orphan */
.cv-grid  > :nth-last-child(1):nth-child(3n+1),
.tick-grid > :nth-last-child(1):nth-child(3n+1) { grid-column: 2; }

/* 2-column grids (tablet): make single orphan span full width */
@media (max-width: 1200px) and (min-width: 641px) {
.cv-grid  > :nth-last-child(1):nth-child(2n+1),
.services-grid > :nth-last-child(1):nth-child(2n+1),
.vm-grid > :nth-last-child(1):nth-child(2n+1) {
  grid-column: 1 / -1;
}
}

/* (moved earlier near differentiators section) */





/* Founder image lock: keep a consistent card dimension across all breakpoints */
#founder .photo-card{ aspect-ratio: auto !important; background: transparent !important; border: 0; z-index: 1; }
/* Center the subject slightly lower to match the crop */
#founder .photo-card img{ width: 100%; height: 100% !important; object-fit: contain !important; object-position: center center !important; }

/* Short-height framing fix: keep head visible without changing layout */
@media (max-height: 780px){
  #founder .photo-card{ aspect-ratio: auto !important; }
  #founder .photo-card img{
    width: 100%;
    height: auto !important;
    max-height: 56vh;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Founder text alignment: left-align on tablet and desktop, center on mobile */
@media (min-width: 769px) {
#founder .founder-text{ text-align: start; }
#founder .founder-text > *{ margin-left: 0; margin-right: auto; }
}
#founder .founder-stats{ justify-content: center !important; justify-items: center; }
#founder .founder-stats > div{ margin-left: auto; margin-right: auto; }

/* ===== Compact button sizing (consistent small height) ===== */
.btn,
.nav-cta,
.service-btn,
form button{
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(4px, 0.7vw, 8px) clamp(20px, 3.2vw, 30px);
  font-size: clamp(13px, 1.4vw, 15px);
  border-radius: 999px;
  line-height: 1.1;
  text-align: center;
}
/* Remove tall fixed height from contact submit button */
#contact form button{ height: auto; }
/* Widen primary CTAs while keeping navbar CTA flexible */
.btn{ min-width: clamp(150px, 24vw, 240px); }
.service-btn{ min-width: 0; }

@media (min-width: 1200px){
.service-btn{ width: min(100%, 240px); }
}

/* ===== Apply dark background image to key sections ===== */
#about-us,
#differentiators,
#core-values,
#belvro-tick{
  background: url("imgs/Home/Dark _ Background.png") no-repeat center/cover, var(--bg);
}


/* ===== RTL: Contact section only (Arabic pages) ===== */
/* Contact info text */
body[dir="rtl"] #contact .contact-info,
body[dir="rtl"] #contact .contact-info h2,
body[dir="rtl"] #contact .contact-info p,
body[dir="rtl"] #contact .follow-head{
  direction: rtl;
  text-align: right;
}

/* Founder name RTL alignment for Arabic pages */
body[dir="rtl"] #founder .founder-text h2,
body[dir="rtl"] #founder .founder-text h3 {
  direction: rtl !important;
  text-align: center !important;
}

body[dir="rtl"] #founder .founder-text {
  text-align: center !important;
}

/* Override tablet/desktop alignment for Arabic pages */
@media (min-width: 769px) {
  body[dir="rtl"] #founder .founder-text {
    text-align: center !important;
  }
  body[dir="rtl"] #founder .founder-text > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Form fields */
body[dir="rtl"] #contact form,
body[dir="rtl"] #contact form label,
body[dir="rtl"] #contact form input,
body[dir="rtl"] #contact form textarea{
  direction: rtl;
  text-align: right;
}

/* Inputs that should remain LTR even on Arabic pages */
body[dir="rtl"] #contact input[type="email"],
body[dir="rtl"] #contact input[type="url"],
body[dir="rtl"] #contact input[type="tel"]{
  direction: ltr;
  text-align: left;
}

/* ===== RTL: Arabic service pages ===== */
/* Fix bullet points and list alignment for Arabic service pages */

/* Ensure list markers appear on the right side */
body:has([lang="ar"]) ul {
  padding-right: 20px;
  padding-left: 0;
}

body:has([lang="ar"]) ol {
  padding-right: 20px;
  padding-left: 0;
}


/* ===== Legal Sections Styling ===== */

/* ===== Footer Styling ===== */
/* English Footer (LTR) */
.site-footer-en {
  background: var(--navy);
  color: var(--yalloish);
  padding: clamp(20px, 4vh, 40px) var(--pad) clamp(12px, 2vh, 24px);
  margin-top: auto;
}

.site-footer-en .footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.site-footer-en .footer-brand img {
  height: clamp(60px, 8vw, 100px);
  width: auto;
  filter: brightness(1.1) contrast(1.1);
}

.site-footer-en .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

.site-footer-en .footer-col {
  display: flex;
  flex-direction: column;
}

.site-footer-en .footer-head {
  background: none;
  border: none;
  color: var(--gold);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: clamp(8px, 1vh, 12px);
  padding: 0;
  cursor: pointer;
  text-align: center;
  transition: color 0.3s ease;
}

.site-footer-en .footer-head:hover {
  color: var(--yalloish);
}

.site-footer-en .footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
}

.site-footer-en .footer-list li a {
  color: var(--muted);
  text-decoration: none;
  font-size: clamp(9px, 0.9vw, 11px);
  transition: color 0.3s ease;
  display: block;
  padding: clamp(2px, 0.5vh, 4px) 0;
}

.site-footer-en .footer-list li a:hover {
  color: var(--yalloish);
}

.site-footer-en .footer-bottom {
  margin-top: clamp(16px, 2.5vh, 24px);
  padding-top: clamp(12px, 2vh, 20px);
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  text-align: center;
}

.site-footer-en .footer-bottom p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(8px, 0.8vw, 10px);
}

/* Arabic Footer (RTL) */
.site-footer-ar {
  background: var(--navy);
  color: var(--yalloish);
  padding: clamp(20px, 4vh, 40px) var(--pad) clamp(12px, 2vh, 24px);
  margin-top: auto;
  direction: rtl;
}

.site-footer-ar .footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.site-footer-ar .footer-brand img {
  height: clamp(60px, 8vw, 100px);
  width: auto;
  filter: brightness(1.1) contrast(1.1);
}

.site-footer-ar .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

.site-footer-ar .footer-col {
  display: flex;
  flex-direction: column;
}

.site-footer-ar .footer-head {
  background: none;
  border: none;
  color: var(--gold);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: clamp(8px, 1vh, 12px);
  padding: 0;
  cursor: pointer;
  text-align: right;
  transition: color 0.3s ease;
}

.site-footer-ar .footer-head:hover {
  color: var(--yalloish);
}

.site-footer-ar .footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
}

.site-footer-ar .footer-list li a {
  color: var(--muted);
  text-decoration: none;
  font-size: clamp(9px, 0.9vw, 11px);
  transition: color 0.3s ease;
  display: block;
  padding: clamp(2px, 0.5vh, 4px) 0;
  text-align: right;
}

.site-footer-ar .footer-list li a:hover {
  color: var(--yalloish);
}

.site-footer-ar .footer-bottom {
  margin-top: clamp(16px, 2.5vh, 24px);
  padding-top: clamp(12px, 2vh, 20px);
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  text-align: center;
}

.site-footer-ar .footer-bottom p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(8px, 0.8vw, 10px);
}

/* Footer Mobile Toggle Functionality */
.site-footer-en .footer-head,
.site-footer-ar .footer-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-footer-en .footer-head::after,
.site-footer-ar .footer-head::after {
  content: "+";
  font-size: 18px;
  font-weight: bold;
  color: var(--yalloish);
  transition: transform 0.3s ease;
  margin-left: 8px;
  display: none;
}

.site-footer-ar .footer-head::after {
  margin-left: 0;
  margin-right: 8px;
}

.site-footer-en .footer-head.expanded::after,
.site-footer-ar .footer-head.expanded::after {
  transform: rotate(45deg);
}

/* Mobile: Collapsible footer lists */
@media (max-width: 768px) {
  .site-footer-en .footer-list,
  .site-footer-ar .footer-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .site-footer-en .footer-list.expanded,
  .site-footer-ar .footer-list.expanded {
    max-height: 200px;
  }
}

/* Desktop: Always show footer lists */
@media (min-width: 769px) {
  .site-footer-en .footer-head::after,
  .site-footer-ar .footer-head::after {
    display: none;
  }
  
  .site-footer-en .footer-list,
  .site-footer-ar .footer-list {
    max-height: none;
    overflow: visible;
  }
}

/* Mobile: Show toggle icons and make collapsible */
@media (max-width: 768px) {
  .site-footer-en .footer-head::after,
  .site-footer-ar .footer-head::after {
    display: block !important;
  }
}

/* Footer Mobile Styling - Matching Design */
@media (max-width: 768px) {
  .site-footer-en,
  .site-footer-ar {
    background: var(--navy);
    padding: clamp(16px, 2vh, 24px) var(--pad) clamp(12px, 2vh, 20px);
    margin-top: 0;
  }
  
  .site-footer-en .footer-inner,
  .site-footer-ar .footer-inner {
    grid-template-columns: 1fr;
    gap: clamp(12px, 2vh, 16px);
    max-width: 100%;
  }
  
  .site-footer-en .footer-brand,
  .site-footer-ar .footer-brand {
    text-align: center;
    margin-bottom: clamp(8px, 1vh, 12px);
  }
  
  .site-footer-en .footer-brand img,
  .site-footer-ar .footer-brand img {
    height: clamp(50px, 8vw, 70px);
    filter: brightness(1.1) contrast(1.1);
  }
  
  .site-footer-en .footer-cols,
  .site-footer-ar .footer-cols {
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
  }
  
  .site-footer-en .footer-col,
  .site-footer-ar .footer-col {
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 15%, transparent);
    padding: 0;
  }
  
  .site-footer-en .footer-col:last-child,
  .site-footer-ar .footer-col:last-child {
    border-bottom: none;
  }
  
  .site-footer-en .footer-head,
  .site-footer-ar .footer-head {
    background: transparent;
    border: none;
    color: var(--yalloish);
    font-size: clamp(10px, 1.4vw, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: clamp(8px, 1.5vh, 12px) 0;
    margin: 0;
    width: 100%;
    text-align: left;
    justify-content: space-between;
    border-radius: 0;
    transition: color 0.3s ease;
  }
  
  .site-footer-ar .footer-head {
    text-align: right;
  }
  
  .site-footer-en .footer-head:hover,
  .site-footer-ar .footer-head:hover {
    color: var(--gold);
  }
  
  .site-footer-en .footer-list.expanded,
  .site-footer-ar .footer-list.expanded {
    padding: 0 0 clamp(8px, 1vh, 12px) 0;
  }
  
  .site-footer-en .footer-list li,
  .site-footer-ar .footer-list li {
    margin: 0;
    padding: 0;
  }
  
  .site-footer-en .footer-list li a,
  .site-footer-ar .footer-list li a {
    color: var(--muted);
    text-decoration: none;
    font-size: clamp(9px, 1.2vw, 11px);
    font-weight: 400;
    line-height: 1.5;
    padding: clamp(4px, 0.8vh, 6px) 0;
    display: block;
    text-align: left;
    transition: color 0.3s ease;
    border-bottom: none;
  }
  
  .site-footer-ar .footer-list li a {
    text-align: right;
  }
  
  .site-footer-en .footer-list li a:hover,
  .site-footer-ar .footer-list li a:hover {
    color: var(--yalloish);
  }
  
  .site-footer-en .footer-bottom,
  .site-footer-ar .footer-bottom {
    margin-top: clamp(8px, 1.5vh, 12px);
    padding-top: clamp(6px, 1vh, 10px);
    border-top: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
    text-align: center;
  }
  
  .site-footer-en .footer-bottom p,
  .site-footer-ar .footer-bottom p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(8px, 1vw, 10px);
    font-weight: 400;
  }
}

@media (max-width: 480px) {
  .site-footer-en,
  .site-footer-ar {
    padding: clamp(24px, 4vh, 40px) var(--pad) clamp(16px, 2vh, 24px);
  }
  
  .site-footer-en .footer-brand img,
  .site-footer-ar .footer-brand img {
    height: clamp(50px, 10vw, 80px);
  }
}

/* ===== Legal Sections Styling ===== */
/* English Legal Sections (LTR ONLY) */
.legal-section-en {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  direction: ltr; /* Force LTR */
  text-align: left; /* Force left alignment */
}

.legal-section-en .legal-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: var(--radius);
  padding: clamp(24px, 4vh, 40px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--gold);
  max-height: 80vh;
  overflow-y: auto;
  direction: ltr; /* Force LTR */
  text-align: left; /* Force left alignment */
}

.legal-section-en h2 {
  color: var(--gold);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  margin: 0 0 clamp(20px, 3vh, 32px);
  text-align: left; /* Force left alignment */
  line-height: 1.2;
  direction: ltr; /* Force LTR */
}

.legal-section-en p {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  margin: 0 0 clamp(16px, 2vh, 24px);
  text-align: left; /* Force left alignment */
  direction: ltr; /* Force LTR */
}

.legal-section-en ul {
  list-style: none;
  padding: 0;
  margin: 0;
  direction: ltr; /* Force LTR */
  text-align: left; /* Force left alignment */
}

.legal-section-en li {
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.5;
  margin-bottom: 12px;
  padding-left: 32px; /* Increased left padding for LTR */
  padding-right: 0; /* No right padding */
  position: relative;
  text-align: left; /* Force left alignment */
  direction: ltr; /* Force LTR */
}

.legal-section-en li::before {
  content: "•";
  color: var(--gold);
  font-weight: bold;
  position: absolute;
  left: 0; /* Left position for LTR */
  right: auto; /* No right position */
  top: 0;
}

/* Arabic Legal Sections (RTL ONLY) */
.legal-section-ar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  direction: rtl; /* Force RTL */
  text-align: right; /* Force right alignment */
}

.legal-section-ar .legal-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: var(--radius);
  padding: clamp(24px, 4vh, 40px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--gold);
  max-height: 80vh;
  overflow-y: auto;
  direction: rtl; /* Force RTL */
  text-align: right; /* Force right alignment */
}

.legal-section-ar h2 {
  color: var(--gold);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  margin: 0 0 clamp(20px, 3vh, 32px);
  text-align: right; /* Force right alignment */
  line-height: 1.2;
  direction: rtl; /* Force RTL */
}

.legal-section-ar p {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  margin: 0 0 clamp(16px, 2vh, 24px);
  text-align: right; /* Force right alignment */
  direction: rtl; /* Force RTL */
}

.legal-section-ar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  direction: rtl; /* Force RTL */
  text-align: right; /* Force right alignment */
}

.legal-section-ar li {
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.5;
  margin-bottom: 12px;
  padding-right: 32px; /* Increased right padding for RTL */
  padding-left: 0; /* No left padding */
  position: relative;
  text-align: right; /* Force right alignment */
  direction: rtl; /* Force RTL */
}

.legal-section-ar li::before {
  content: "•";
  color: var(--gold);
  font-weight: bold;
  position: absolute;
  right: 0; /* Right position for RTL */
  left: auto; /* No left position */
  top: 0;
}

/* Legal Sections Responsive Design */
@media (max-width: 768px) {
  .legal-section-en,
  .legal-section-ar {
    padding: clamp(24px, 4vh, 40px) var(--pad);
    min-height: auto;
  }
  
  .legal-section-en .legal-container,
  .legal-section-ar .legal-container {
    padding: clamp(24px, 3vw, 32px);
  }
  
  .legal-section-en h2,
  .legal-section-ar h2 {
    font-size: clamp(24px, 5vw, 32px);
    text-align: center;
  }
  
  .legal-section-en p,
  .legal-section-ar p {
    text-align: center;
  }
  
  .legal-section-en li,
  .legal-section-ar li {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  
  .legal-section-en li::before,
  .legal-section-ar li::before {
    position: static;
    margin-right: 12px;
    margin-left: 0;
  }
  
  .legal-section-ar li::before {
    margin-right: 0;
    margin-left: 12px;
  }
}

/* Close button styling for legal sections */
.legal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--yalloish);
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.legal-close-btn:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}

/* RTL close button positioning */
.legal-section-ar .legal-close-btn {
  right: auto;
  left: 20px;
}

/* Mobile responsive adjustments for legal sections */
@media (max-width: 768px) {
  .legal-section-en,
  .legal-section-ar {
    padding: 10px;
  }
  
  .legal-section-en .legal-container,
  .legal-section-ar .legal-container {
    padding: clamp(16px, 3vh, 24px);
    max-height: 90vh;
  }
  
  .legal-section-en h2,
  .legal-section-ar h2 {
    font-size: clamp(20px, 4vw, 28px);
  }
  
  .legal-close-btn {
    top: 15px;
    right: 15px;
    font-size: 20px;
    width: 35px;
    height: 35px;
  }
  
  .legal-section-ar .legal-close-btn {
    right: auto;
    left: 15px;
  }
}

@media (max-width: 480px) {
  .legal-section-en,
  .legal-section-ar {
    padding: clamp(16px, 3vh, 24px) var(--pad);
  }
  
  .legal-section-en .legal-container,
  .legal-section-ar .legal-container {
    padding: clamp(20px, 4vw, 24px);
    border-radius: clamp(8px, 2vw, 12px);
  }
  
  .legal-section-en h2,
  .legal-section-ar h2 {
    font-size: clamp(20px, 6vw, 28px);
    margin-bottom: clamp(16px, 2vh, 20px);
  }
  
  .legal-section-en p,
  .legal-section-ar p {
    font-size: clamp(14px, 3vw, 16px);
    margin-bottom: clamp(12px, 2vh, 16px);
  }
  
  .legal-section-en li,
  .legal-section-ar li {
    font-size: clamp(13px, 2.8vw, 15px);
    margin-bottom: 10px;
  }
}