:root{--viv-primary:#0B3025;--viv-burgundy:#1E4838;--viv-gold:#BE9B61;--viv-light-gold:#DDBB81;--viv-blush:#F7F1E5;--viv-ink:#333333;--viv-muted:#64748b;--viv-soft:#FCF8EF}
html{min-height:100%;background:#fff;scroll-behavior:smooth;overflow-x:hidden;overflow-y:auto;touch-action:auto}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden;overflow-y:auto;touch-action:auto;-webkit-overflow-scrolling:touch;background:#fff}
body.menu-scroll-lock{overflow:hidden!important}
a{text-decoration:none;color:inherit}img{max-width:100%;height:auto;display:block}button,input,select,textarea{font-family:inherit}.safe-container{width:min(1280px,100%);margin-inline:auto;padding-inline:1rem}@media(min-width:768px){.safe-container{padding-inline:1.5rem}}@media(min-width:1280px){.safe-container{padding-inline:2rem}}

.site-main-content{background:#fff;position:relative;z-index:1;min-width:0}
footer{position:relative;z-index:2;margin-top:-1px!important;margin-bottom:0!important}footer.aljameel-brand-footer{background:radial-gradient(circle at 12% 0%,rgba(221,187,129,.18),transparent 34%),radial-gradient(circle at 88% 100%,rgba(190,155,97,.14),transparent 30%),linear-gradient(135deg,#071A14 0%,#0B3025 52%,#1E4838 100%)!important;border-top:1px solid rgba(190,155,97,.22)}
body::after{content:none}


.viv-main-header{position:sticky!important;top:0!important;z-index:90!important;overflow:visible!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.viv-main-header .safe-container,.viv-main-header nav,.viv-main-header ul,.viv-main-header li{overflow:visible!important}.viv-cart-button{position:relative!important;overflow:visible!important;isolation:isolate}.cart-icon-wrap{position:relative;display:inline-grid;place-items:center;min-width:1.4rem;min-height:1.4rem;line-height:1;vertical-align:middle;overflow:visible!important}.viv-notification-badge{position:absolute!important;display:grid;place-items:center;min-width:1.28rem;height:1.28rem;padding:0 .3rem;border-radius:999px;background:var(--viv-primary);color:#fff;font-size:.66rem;font-weight:900;line-height:1;box-shadow:0 0 0 2px #fff,0 8px 16px rgba(11,48,37,.22);z-index:25;direction:ltr;pointer-events:none}.viv-cart-button>.cart-badge-count{top:-.46rem!important;inset-inline-end:-.46rem!important}.cart-icon-wrap>.cart-badge-count{top:-.72rem!important;inset-inline-end:-.82rem!important}.cart-badge-count.hidden{display:none!important}.viv-header-link.is-active .viv-notification-badge,.viv-mobile-link.is-active .viv-notification-badge{background:var(--viv-gold);color:#111827;box-shadow:0 0 0 2px #fff,0 8px 16px rgba(190,155,97,.25)}#vivToastStack{top:var(--viv-toast-top,88px)!important}
#vivToastStack{pointer-events:none}.cart-icon-wrap .fa-shopping-cart{line-height:1}
@media(max-width:640px){.viv-notification-badge{min-width:1.16rem;height:1.16rem;font-size:.6rem}.viv-cart-button>.cart-badge-count{top:-.5rem!important;inset-inline-end:-.5rem!important}.cart-icon-wrap>.cart-badge-count{top:-.66rem!important;inset-inline-end:-.72rem!important}#vivToastStack{top:var(--viv-toast-top,82px)!important}}


.viv-section-heading{display:inline-block;position:relative;background:linear-gradient(90deg,var(--viv-burgundy) 0%,var(--viv-primary) 52%,var(--viv-gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--viv-primary)}
.viv-section-heading::after{content:"";position:absolute;inset-inline:0;bottom:-.6rem;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--viv-burgundy),var(--viv-primary),var(--viv-gold))}

.offer-topbar{position:relative;z-index:1;width:100%;overflow:hidden;color:#fff;min-height:46px;background:linear-gradient(90deg,#1E4838 0%,#0B3025 34%,#0B3025 52%,#BE9B61 100%);box-shadow:0 10px 26px rgba(11,48,37,.22),inset 0 1px 0 rgba(255,255,255,.16)}
.offer-topbar-glow{position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.16) 48%,transparent 72%);animation:vivOfferShine 5.5s ease-in-out infinite;pointer-events:none}
.offer-topbar-inner{position:relative;z-index:1;display:flex;align-items:center;min-height:46px;padding:.45rem 0}
.offer-marquee{display:flex;width:max-content;min-width:200%;animation:vivacityTicker 38s linear infinite;will-change:transform}
.offer-topbar:hover .offer-marquee{animation-play-state:paused}
.offer-track{display:inline-flex;align-items:center;gap:1.35rem;min-width:max-content;padding:0 .75rem;white-space:nowrap}
.offer-track-clone{display:inline-flex}
.offer-pill{display:inline-flex;align-items:center;gap:.62rem;padding:.2rem .95rem;font-size:.92rem;font-weight:900;line-height:1.35}
.offer-pill i{color:#ffe7a3;font-size:.88rem;filter:drop-shadow(0 3px 8px rgba(0,0,0,.22))}
.offer-pill strong{letter-spacing:0;color:#fff}
.offer-pill-sub{font-weight:800;opacity:.9;color:rgba(255,255,255,.92)}
.offer-pill a{border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:.22rem .78rem;font-size:.76rem;font-weight:900;color:#fff;background:rgba(255,255,255,.14);transition:background .2s ease,transform .2s ease;white-space:nowrap}
.offer-pill a:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.offer-pill-sep{display:inline-flex;align-items:center;opacity:.55;color:#ffe7a3;font-size:.72rem;padding:0 .15rem}
.viv-offer-topbar-slot{position:fixed;top:var(--viv-fixed-header-height,74px);left:0;right:0;z-index:109;width:100%;border-bottom:1px solid rgba(190,155,97,.35);box-shadow:0 8px 24px rgba(11,48,37,.12)}
body.has-offer-topbar .site-main-content{padding-top:calc(var(--viv-fixed-header-height,74px) + var(--viv-offer-topbar-height,46px))!important}
@keyframes vivOfferShine{0%,100%{transform:translateX(-120%)}50%{transform:translateX(120%)}}
@keyframes vivacityTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
html[dir="rtl"] .offer-marquee{animation-name:vivacityTickerRtl}
@keyframes vivacityTickerRtl{0%{transform:translateX(0)}100%{transform:translateX(50%)}}
@media(max-width:640px){.offer-topbar,.offer-topbar-inner{min-height:42px}.offer-marquee{animation-duration:28s}.offer-track{gap:.75rem;padding:0 .45rem}.offer-pill{gap:.45rem;padding:.15rem .55rem;font-size:.8rem}.offer-pill-sub{display:none}.offer-pill a{font-size:.7rem;padding:.16rem .58rem}}
.viv-hero-fallback{background:radial-gradient(circle at 18% 20%,rgba(190,155,97,.28),transparent 34%),radial-gradient(circle at 85% 15%,rgba(11,48,37,.32),transparent 32%),linear-gradient(135deg,#0B3025 0%,#1E4838 54%,#BE9B61 130%)}
.doctor-filter{min-height:44px;border:2px solid #e2e8f0;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.04);transition:transform .3s ease,box-shadow .3s ease,background .3s ease,border-color .3s ease,color .3s ease}@media(max-width:639px){.doctor-filter{min-height:38px}}.doctor-filter:hover,.doctor-filter.active{background:linear-gradient(90deg,var(--viv-burgundy),var(--viv-primary),var(--viv-gold))!important;color:#fff!important;border-color:var(--viv-primary)!important;box-shadow:0 14px 32px rgba(11,48,37,.20);transform:translateY(-2px)}.doctor-card{border:4px solid transparent}.doctor-card:hover{border-color:var(--viv-gold);box-shadow:0 24px 54px rgba(17,24,39,.13)}


.viv-header-link,.viv-book-link{position:relative;isolation:isolate}.viv-header-link:hover{background:#FCF8EF;color:var(--viv-primary);transform:translateY(-1px);box-shadow:0 8px 20px rgba(11,48,37,.07)}.viv-header-link.is-active{background:linear-gradient(90deg,rgba(11,48,37,.10),rgba(190,155,97,.18));color:var(--viv-primary)!important;box-shadow:inset 0 0 0 1px rgba(190,155,97,.42),0 10px 22px rgba(11,48,37,.08)}.viv-header-link.is-active::after{content:"";position:absolute;left:50%;bottom:-10px;width:28px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--viv-burgundy),var(--viv-primary),var(--viv-gold));transform:translateX(-50%)}.viv-book-link.is-active{outline:3px solid rgba(190,155,97,.22);box-shadow:0 18px 38px rgba(11,48,37,.24)}.viv-mobile-link:hover{background:#FCF8EF;color:var(--viv-primary);transform:translateX(2px)}html[dir="rtl"] .viv-mobile-link:hover{transform:translateX(-2px)}.viv-mobile-link.is-active{background:linear-gradient(90deg,rgba(11,48,37,.10),rgba(190,155,97,.18));color:var(--viv-primary);border:1px solid rgba(190,155,97,.45);box-shadow:0 12px 26px rgba(11,48,37,.08)}.viv-mobile-link.is-active i:first-child{color:var(--viv-primary)!important}


.viv-feature-card{position:relative;overflow:hidden;isolation:isolate;border:4px solid #f3f4f6;box-shadow:none;transition:transform .5s cubic-bezier(.4,0,.2,1),box-shadow .5s cubic-bezier(.4,0,.2,1),border-color .35s ease;background:#fff;cursor:pointer}.viv-feature-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,rgba(11,48,37,.10) 0%,rgba(190,155,97,.10) 100%);opacity:0;transition:opacity .5s ease}.viv-feature-card::after{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:linear-gradient(90deg,var(--viv-burgundy),var(--viv-primary),var(--viv-gold));opacity:0;transform:scaleX(.35);transform-origin:center;transition:transform .45s ease,opacity .45s ease}.viv-feature-card:hover{transform:translateY(-12px) scale(1.02);border-color:var(--viv-primary);box-shadow:0 26px 60px rgba(11,48,37,.22),0 8px 22px rgba(15,23,42,.08)}.viv-feature-card:hover::before{opacity:1}.viv-feature-card:hover::after{opacity:1;transform:scaleX(1)}.viv-feature-icon{width:5rem;height:5rem;border-radius:999px;box-shadow:0 10px 18px rgba(15,23,42,.18);transition:transform .5s ease,box-shadow .45s ease;position:relative;z-index:1}.viv-feature-card:hover .viv-feature-icon{transform:rotateY(360deg) scale(1.12);box-shadow:0 18px 38px rgba(11,48,37,.35)}.viv-feature-icon i{transition:transform .3s ease;color:#fff!important}.viv-feature-card:hover .viv-feature-icon i{transform:scale(1.16)}.viv-feature-card h3,.viv-feature-card p{position:relative;z-index:1}.viv-feature-card h3{font-weight:900}.viv-feature-card p{font-weight:700}.viv-feature-card:hover h3{color:var(--viv-primary)!important;transform:scale(1.035)}.viv-feature-card:hover p{color:#1f2937!important}


.field-msg{display:block;min-height:1.25rem;font-size:.75rem;font-weight:800;color:#64748b}.field-msg.ok{color:#15803d}.field-msg.err{color:#b91c1c}input.is-valid{border-color:#16a34a!important;box-shadow:0 0 0 4px rgba(22,163,74,.12)!important}input.is-invalid{border-color:#b91c1c!important;box-shadow:0 0 0 4px rgba(185,28,28,.12)!important}


html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
body[data-lang="en"] h1, body[data-lang="en"] h2, body[data-lang="en"] h3 {
  font-family: "Playfair Display", serif;
}
body[data-lang="en"] .viv-section-heading {
  font-family: "Playfair Display", serif;
}

.viv-header-link,.viv-mobile-link,.cart-icon-wrap,.viv-cart-button{overflow:visible!important}.cart-icon-wrap .cart-badge-count,.viv-cart-button .cart-badge-count{transform:none!important}

.viv-main-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:110!important;overflow:visible!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.site-main-content{padding-top:var(--viv-fixed-header-height,74px)}
.viv-cart-overlay{z-index:130!important}
.viv-cart-drawer{z-index:140!important;width:min(84vw,360px)!important;max-width:calc(100vw - 28px)!important;will-change:transform;overscroll-behavior:contain}
.viv-cart-drawer.translate-x-0{transform:translateX(0)!important}
.viv-cart-drawer-head{min-height:68px}
.viv-cart-close{touch-action:manipulation}
body.viv-cart-open{touch-action:none}
@media(min-width:768px){.viv-cart-drawer{width:min(400px,92vw)!important;max-width:400px!important}}
@media(max-width:480px){.viv-cart-drawer{width:min(82vw,340px)!important;max-width:calc(100vw - 34px)!important}.viv-cart-drawer-head{min-height:64px}}

body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),body select,body textarea{box-sizing:border-box;max-width:100%;transform:none!important}body input:focus,body select:focus,body textarea:focus{transform:none!important}#vivToastStack{z-index:220!important;top:var(--viv-toast-top,86px)!important;pointer-events:none}#vivToastStack>*{pointer-events:auto}.viv-cart-drawer input:not([type="checkbox"]):not([type="radio"]),.viv-cart-drawer select,.viv-cart-drawer textarea{font-size:16px!important}@media(max-width:768px){body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),body select,body textarea{font-size:16px!important;line-height:1.35!important;-webkit-text-size-adjust:100%;min-height:44px}.viv-cart-drawer input[type="number"]{min-height:32px!important;font-size:16px!important}.viv-cart-drawer{width:min(86vw,350px)!important;max-width:calc(100vw - 30px)!important}}@media(max-width:420px){.viv-cart-drawer{width:min(88vw,330px)!important;max-width:calc(100vw - 24px)!important}}
@media (min-width:1024px){.about-hero-figure{aspect-ratio:16/9;max-height:460px;border-radius:0;background:transparent}.about-hero-image{height:100%!important;width:100%!important;object-fit:contain!important;object-position:center!important}}
@media (min-width:1024px) and (max-width:1279px){.about-hero-figure{aspect-ratio:3/2;max-height:430px;width:100%;background:transparent!important}.about-hero-image{height:100%!important;width:100%!important;object-fit:cover!important;object-position:center center!important}}
@media (max-width:1023px){.about-hero-figure{border-radius:1.75rem}.about-hero-image{height:auto!important;width:100%!important;object-fit:contain!important}}


/* 2026-06 final laptop about fix */
@media (min-width:1024px) and (max-width:1279px){
  .about-hero-figure{width:100%;max-width:100%;aspect-ratio:auto!important;max-height:none!important;background:transparent!important;border-radius:0!important}
  .about-hero-image{display:block;width:100%!important;height:auto!important;object-fit:cover!important;object-position:center center!important}
}
@media (min-width:1280px){
  .about-hero-figure{width:100%;max-width:100%;background:transparent!important}
}


/* 2026-06 laptop hero conversion for about page */
@media (min-width:1024px){
  .about-hero-figure{
    position:relative;
    width:100%;
    max-width:100%;
    height:clamp(340px,37vw,500px)!important;
    max-height:500px!important;
    aspect-ratio:auto!important;
    border-radius:2rem!important;
    background:#f5eee9!important;
    box-shadow:0 22px 56px rgba(30,72,56,.12)!important;
  }
  .about-hero-image{
    width:100%!important;
    height:100%!important;
    display:block;
    object-fit:cover!important;
    object-position:center 18%!important;
  }
}
@media (min-width:1024px) and (max-width:1180px){
  .about-hero-figure{height:380px!important;max-height:380px!important}
  .about-hero-image{object-position:center 15%!important}
}
@media (min-width:1181px) and (max-width:1439px){
  .about-hero-figure{height:430px!important;max-height:430px!important}
}
@media (min-width:1440px){
  .about-hero-figure{height:470px!important;max-height:470px!important}
}

/* Al Jameel requested visual fixes — 2026-09-09 */
#home,.heroSwiper,.heroSwiper .swiper-wrapper,.heroSwiper .swiper-slide{background:#fff!important}
.heroSwiper{overflow:hidden!important;line-height:normal}
.heroSwiper .viv-hero-fallback{aspect-ratio:2/3;min-height:0!important;background:#fff}
.heroSwiper .viv-hero-fallback picture,.heroSwiper .viv-hero-fallback picture img{display:block;width:100%;height:100%}
.heroSwiper .swiper-pagination{bottom:1rem!important}
@media(min-width:768px){.heroSwiper .viv-hero-fallback{aspect-ratio:12/5}}
@media(max-width:767px){.viv-main-header nav{min-height:78px!important}.viv-header-logo{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:5!important;margin:0!important}.viv-header-logo img{display:block!important;height:54px!important;width:auto!important;max-width:150px!important;object-fit:contain!important}.viv-main-header nav>.xl\:hidden{margin-inline-start:auto!important;position:relative!important;z-index:10!important}}
@media(max-width:420px){.viv-header-logo img{height:50px!important;max-width:132px!important}}

/* Mobile menu: fail closed from first paint. Native hidden is also set in the HTML. */
.viv-mobile-panel[hidden],.viv-menu-overlay[hidden]{display:none!important}

/* Final home hero composition — desktop keeps the full 2400x1000 artwork visible.
   Phone layout (below 768px) keeps the approved 800x1200 artwork and proportions. */
@media (max-width:1023px){
  #home .home-hero-copy{color:#183A30!important;text-shadow:none!important}
  #home .home-hero-copy h1{color:#183A30!important;text-shadow:none!important}
  #home .home-hero-copy h1 span{color:#BE9B61!important}
  #home .home-hero-copy p{color:#5F6D65!important;text-shadow:none!important}
  #home .home-hero-copy>span{color:#1E4838!important;background:rgba(255,255,255,.94)!important;border-color:rgba(11,48,37,.22)!important}
  .home-hero-mobile-wash{
    background:linear-gradient(180deg,rgba(248,253,255,.96) 0%,rgba(242,250,255,.84) 31%,rgba(245,251,255,.48) 58%,rgba(245,251,255,.10) 80%,rgba(245,251,255,0) 100%);
    pointer-events:none;
  }
}
@media (min-width:1024px){
  /* Desktop/laptop: preserve the exact 2400×1000 source ratio.
     No fixed height, no cropping, no zooming. */
  #home .heroSwiper .viv-hero-fallback{
    aspect-ratio:12 / 5!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    background:#FBF7EF!important;
  }
  #home .heroSwiper .viv-hero-fallback picture{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }
  #home .heroSwiper .home-hero-image{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
    transform-origin:center center!important;
  }
  /* New desktop artwork places the clinical scene on the left. Keep it there for Arabic copy on the right;
     flip only for English so the copy stays on the left and the clinical scene moves to the right. */
  html[dir="ltr"] #home .heroSwiper .home-hero-image{transform:scaleX(-1)!important}
  html[dir="rtl"] #home .heroSwiper .home-hero-image{transform:none!important}

  #home .home-hero-mobile-wash{display:none!important}
  #home .home-hero-desktop-wash{
    display:block!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,rgba(243,250,255,.94) 0%,rgba(243,250,255,.78) 19%,rgba(243,250,255,.30) 37%,rgba(243,250,255,0) 54%)!important;
  }
  html[dir="rtl"] #home .home-hero-desktop-wash{
    background:linear-gradient(270deg,rgba(243,250,255,.94) 0%,rgba(243,250,255,.78) 19%,rgba(243,250,255,.30) 37%,rgba(243,250,255,0) 54%)!important;
  }
  #home .safe-container{pointer-events:none}
  #home .home-hero-copy{
    width:min(45%,610px)!important;
    max-width:610px!important;
    color:#183A30!important;
    text-shadow:none!important;
    pointer-events:auto;
  }
  #home .home-hero-copy h1{color:#183A30!important;text-shadow:none!important}
  #home .home-hero-copy h1 span{color:#BE9B61!important}
  #home .home-hero-copy p{color:#476157!important;text-shadow:none!important}
  #home .home-hero-copy>span{color:#1E4838!important;background:rgba(255,255,255,.94)!important;border-color:rgba(11,48,37,.24)!important}
  html[dir="ltr"] #home .home-hero-copy{margin-left:0!important;margin-right:auto!important;text-align:left!important}
  html[dir="rtl"] #home .home-hero-copy{margin-left:auto!important;margin-right:0!important;text-align:right!important}
}



/* 2026-09-11 final mobile hero spacing: use the artwork blank area for copy instead of leaving a tall empty gap. */
@media (max-width:767px){
  #home .heroSwiper .viv-hero-fallback{aspect-ratio:2/3!important;min-height:0!important;max-height:none!important}
  #home .heroSwiper .home-hero-image{object-fit:cover!important;object-position:center center!important}
  #home .safe-container{align-items:flex-start!important;padding-top:clamp(3.25rem,11vw,4.75rem)!important;padding-bottom:1.5rem!important}
  #home .home-hero-copy{width:100%!important;max-width:100%!important}
  #home .home-hero-copy>span{margin-bottom:.75rem!important}
  #home .home-hero-copy h1{font-size:clamp(2rem,9vw,3rem)!important;line-height:1.16!important}
  #home .home-hero-copy p{margin-top:.8rem!important;font-size:clamp(.98rem,4.2vw,1.15rem)!important;line-height:1.9!important;max-width:94%!important}
  #home .home-hero-copy a{margin-top:1.15rem!important;padding:.85rem 1.25rem!important;font-size:1rem!important}
  html[dir="rtl"] #home .home-hero-copy{text-align:right!important;margin-inline-start:auto!important}
  html[dir="ltr"] #home .home-hero-copy{text-align:left!important;margin-inline-end:auto!important}
}


/* 2026-09-11 desktop / laptop hero correction
   Goal: use the desktop artwork as a full-bleed background, keep the medical scene visible,
   move copy into the blank area, and reduce title / CTA size on laptop without affecting mobile. */
@media (min-width:1024px){
  #home .heroSwiper,
  #home .heroSwiper .swiper-wrapper,
  #home .heroSwiper .swiper-slide{
    background:#F8F3E8!important;
  }
  #home .heroSwiper .viv-hero-fallback{
    position:relative!important;
    width:100%!important;
    aspect-ratio:12 / 5!important;
    min-height:560px!important;
    height:clamp(560px,44vw,700px)!important;
    max-height:700px!important;
    overflow:hidden!important;
    background:#F8F3E8!important;
  }
  #home .heroSwiper .viv-hero-fallback picture,
  #home .heroSwiper .viv-hero-fallback source,
  #home .heroSwiper .home-hero-image{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
  }
  #home .heroSwiper .home-hero-image{
    max-width:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
  }
  html[dir="ltr"] #home .heroSwiper .home-hero-image{
    transform:scaleX(-1)!important;
  }
  html[dir="rtl"] #home .heroSwiper .home-hero-image{
    transform:none!important;
  }

  #home .home-hero-mobile-wash{display:none!important}
  #home .home-hero-desktop-wash{
    display:block!important;
    pointer-events:none!important;
    inset:0!important;
    background:linear-gradient(90deg,rgba(242,248,252,.88) 0%,rgba(242,248,252,.64) 18%,rgba(242,248,252,.24) 36%,rgba(242,248,252,0) 54%)!important;
  }
  html[dir="rtl"] #home .home-hero-desktop-wash{
    background:linear-gradient(270deg,rgba(242,248,252,.88) 0%,rgba(242,248,252,.64) 18%,rgba(242,248,252,.24) 36%,rgba(242,248,252,0) 54%)!important;
  }

  #home .safe-container{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding-top:0!important;
    padding-bottom:0!important;
    pointer-events:none!important;
  }
  html[dir="rtl"] #home .safe-container{
    justify-content:flex-end!important;
  }
  #home .home-hero-copy{
    position:relative!important;
    z-index:2!important;
    width:min(41%,540px)!important;
    max-width:540px!important;
    pointer-events:auto!important;
  }
  html[dir="rtl"] #home .home-hero-copy{
    margin-left:auto!important;
    margin-right:0!important;
    text-align:right!important;
  }
  html[dir="ltr"] #home .home-hero-copy{
    margin-left:0!important;
    margin-right:auto!important;
    text-align:left!important;
  }
  #home .home-hero-copy > span{
    margin-bottom:1rem!important;
    padding:.75rem 1.3rem!important;
    font-size:.95rem!important;
    line-height:1.2!important;
  }
  #home .home-hero-copy h1{
    font-size:clamp(2.35rem,3.35vw,4.05rem)!important;
    line-height:1.06!important;
    letter-spacing:-0.02em!important;
  }
  #home .home-hero-copy p{
    margin-top:1rem!important;
    max-width:100%!important;
    font-size:clamp(1rem,1.16vw,1.2rem)!important;
    line-height:1.75!important;
    color:#476157!important;
  }
  #home .home-hero-copy a{
    margin-top:1.35rem!important;
    padding:.95rem 1.6rem!important;
    font-size:1rem!important;
    line-height:1.2!important;
  }
}


/* FINAL 2026-09-11 HOME HERO — desktop artwork and hero share the exact 3:1 ratio.
   This removes all desktop crop/letterboxing. Mobile rules above remain untouched. */
@media (min-width:1024px){
  #home,.heroSwiper,.heroSwiper .swiper-wrapper,.heroSwiper .swiper-slide{background:#F8F3E8!important}
  #home .heroSwiper .viv-hero-fallback{
    position:relative!important;
    width:100%!important;
    aspect-ratio:3 / 1!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    background:#F8F3E8!important;
  }
  #home .heroSwiper .viv-hero-fallback picture{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
  }
  #home .heroSwiper .home-hero-image{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
  }
  html[dir="rtl"] #home .heroSwiper .home-hero-image{transform:none!important}
  html[dir="ltr"] #home .heroSwiper .home-hero-image{transform:scaleX(-1)!important}

  #home .home-hero-mobile-wash{display:none!important}
  #home .home-hero-desktop-wash{
    display:block!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,rgba(239,248,253,.66) 0%,rgba(239,248,253,.30) 24%,rgba(239,248,253,0) 47%)!important;
  }
  html[dir="rtl"] #home .home-hero-desktop-wash{
    background:linear-gradient(270deg,rgba(239,248,253,.66) 0%,rgba(239,248,253,.30) 24%,rgba(239,248,253,0) 47%)!important;
  }
  #home .safe-container{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding-top:0!important;
    padding-bottom:0!important;
    pointer-events:none!important;
  }
  html[dir="rtl"] #home .safe-container{justify-content:flex-end!important}
  #home .home-hero-copy{
    position:relative!important;
    z-index:2!important;
    width:min(40%,520px)!important;
    max-width:520px!important;
    pointer-events:auto!important;
  }
  html[dir="rtl"] #home .home-hero-copy{margin-left:auto!important;margin-right:0!important;text-align:right!important}
  html[dir="ltr"] #home .home-hero-copy{margin-left:0!important;margin-right:auto!important;text-align:left!important}
  #home .home-hero-copy>span{
    margin-bottom:.8rem!important;
    padding:.65rem 1.1rem!important;
    font-size:.88rem!important;
    line-height:1.15!important;
  }
  #home .home-hero-copy h1{
    font-size:clamp(2.15rem,3vw,3.55rem)!important;
    line-height:1.05!important;
    letter-spacing:-.018em!important;
  }
  #home .home-hero-copy p{
    margin-top:.85rem!important;
    max-width:100%!important;
    font-size:clamp(.95rem,1.05vw,1.1rem)!important;
    line-height:1.65!important;
  }
  #home .home-hero-copy a{
    margin-top:1.1rem!important;
    padding:.82rem 1.35rem!important;
    font-size:.93rem!important;
  }
}

/* Support button transition; JS controls visibility on the home hero. */
#vivSupportWidget{transition:opacity .28s ease,transform .28s ease,visibility .28s ease}
#vivSupportWidget.viv-support-hidden{opacity:0!important;transform:translateY(14px)!important;visibility:hidden!important;pointer-events:none!important}
#vivSupportWidget.viv-support-visible{opacity:1!important;transform:translateY(0)!important;visibility:visible!important;pointer-events:auto!important}


/* 2026-09-11 approved reference desktop hero
   Desktop uses the portrait artwork un-stretched, centered between a pale full-width background and side copy. */
@media (min-width:1024px){
  #home,
  #home .heroSwiper,
  #home .heroSwiper .swiper-wrapper,
  #home .heroSwiper .swiper-slide{background:#F8F3E8!important}

  #home .heroSwiper .viv-hero-fallback{
    position:relative!important;
    width:100%!important;
    height:clamp(560px,35vw,660px)!important;
    min-height:560px!important;
    max-height:660px!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    background:#F8F3E8!important;
  }

  #home .heroSwiper .viv-hero-fallback picture{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    left:22%!important;
    width:52%!important;
    height:100%!important;
    display:block!important;
    overflow:visible!important;
  }
  html[dir="ltr"] #home .heroSwiper .viv-hero-fallback picture{
    left:auto!important;
    right:22%!important;
  }
  #home .heroSwiper .home-hero-image{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
  }
  html[dir="rtl"] #home .heroSwiper .home-hero-image,
  html[dir="ltr"] #home .heroSwiper .home-hero-image{transform:none!important}

  #home .home-hero-mobile-wash,
  #home .home-hero-desktop-wash{display:none!important}

  #home .safe-container{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    padding-top:0!important;
    padding-bottom:0!important;
    pointer-events:none!important;
  }
  html[dir="rtl"] #home .safe-container{justify-content:flex-end!important}
  html[dir="ltr"] #home .safe-container{justify-content:flex-start!important}

  #home .home-hero-copy{
    position:relative!important;
    z-index:5!important;
    width:min(36%,520px)!important;
    max-width:520px!important;
    pointer-events:auto!important;
  }
  html[dir="rtl"] #home .home-hero-copy{margin-right:0!important;margin-left:auto!important;text-align:right!important}
  html[dir="ltr"] #home .home-hero-copy{margin-left:0!important;margin-right:auto!important;text-align:left!important}

  #home .home-hero-copy>span{
    margin-bottom:.9rem!important;
    padding:.68rem 1.15rem!important;
    font-size:.9rem!important;
    line-height:1.2!important;
  }
  #home .home-hero-copy h1{
    font-size:clamp(2.15rem,2.9vw,3.45rem)!important;
    line-height:1.06!important;
    letter-spacing:-.018em!important;
  }
  #home .home-hero-copy p{
    margin-top:.9rem!important;
    max-width:100%!important;
    font-size:clamp(.95rem,1.02vw,1.08rem)!important;
    line-height:1.7!important;
  }
  #home .home-hero-copy a{
    margin-top:1.15rem!important;
    padding:.82rem 1.35rem!important;
    font-size:.93rem!important;
  }
}


/* 2026-09-11 baked desktop hero artwork
   Desktop/laptop hero text is part of each language-specific image.
   Keep the full 12:5 artwork visible, never stretch/crop, and hide live HTML copy only on desktop. */
@media (min-width:1024px){
  #home .heroSwiper .viv-hero-fallback{
    width:100%!important;
    aspect-ratio:12 / 5!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    background:#FCF8EF!important;
    overflow:hidden!important;
  }
  #home .heroSwiper .viv-hero-fallback picture{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
  }
  #home .heroSwiper .home-hero-image{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
  }
  html[dir="rtl"] #home .heroSwiper .home-hero-image,
  html[dir="ltr"] #home .heroSwiper .home-hero-image{
    transform:none!important;
  }
  #home .home-hero-copy,
  #home .home-hero-mobile-wash,
  #home .home-hero-desktop-wash,
  #home .safe-container{
    display:none!important;
  }
}


/* Hard split between desktop and mobile hero assets. Do not let <picture>/source selection choose the wrong artwork. */
#home .home-hero-image-desktop{display:none!important}
#home .home-hero-image-mobile{display:block!important}
@media (min-width:1024px){
  #home .home-hero-image-desktop{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    max-width:none!important;
    transform:none!important;
  }
  #home .home-hero-image-mobile{display:none!important}
  #home .heroSwiper .viv-hero-fallback{
    aspect-ratio:12/5!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    background:#FCF8EF!important;
  }
}
@media (max-width:1023px){
  #home .home-hero-image-desktop{display:none!important}
  #home .home-hero-image-mobile{display:block!important}
}


/* FINAL 2026-09-11: one hero asset per breakpoint.
   Fix specificity conflict that caused desktop + mobile hero images to render simultaneously. */
#home .heroSwiper .viv-hero-fallback > .home-hero-image-desktop,
#home .heroSwiper .viv-hero-fallback > .home-hero-image-mobile{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  transform:none!important;
}

@media (min-width:1024px){
  #home .heroSwiper .viv-hero-fallback{
    width:100%!important;
    aspect-ratio:12/5!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    background:#FCF8EF!important;
  }
  #home .heroSwiper .viv-hero-fallback > .home-hero-image-desktop{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:1!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  #home .heroSwiper .viv-hero-fallback > .home-hero-image-mobile{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    z-index:-1!important;
  }
  #home .heroSwiper .viv-hero-fallback > .safe-container,
  #home .heroSwiper .viv-hero-fallback > .home-hero-mobile-wash,
  #home .heroSwiper .viv-hero-fallback > .home-hero-desktop-wash{
    display:none!important;
  }
}

@media (max-width:1023px){
  #home .heroSwiper .viv-hero-fallback > .home-hero-image-desktop{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    z-index:-1!important;
  }
  #home .heroSwiper .viv-hero-fallback > .home-hero-image-mobile{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:1!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
}


/* HERO V4 — baked Arabic/English artwork, optimized WebP, one responsive source only. */
#home .heroSwiper,
#home .heroSwiper .swiper-wrapper,
#home .heroSwiper .swiper-slide{
  background:#FCF8EF!important;
}
#home .heroSwiper .hero-v4-frame{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:2/3!important;
  overflow:hidden!important;
  background:#FCF8EF!important;
}
#home .heroSwiper .hero-v4-picture{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#home .heroSwiper .hero-v4-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}
#home .heroSwiper .hero-v4-frame > .safe-container,
#home .heroSwiper .hero-v4-frame > .home-hero-mobile-wash,
#home .heroSwiper .hero-v4-frame > .home-hero-desktop-wash{
  display:none!important;
}
@media (min-width:1024px){
  #home .heroSwiper .hero-v4-frame{
    aspect-ratio:12/5!important;
  }
  #home .heroSwiper .hero-v4-image{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* Specificity guard: override all legacy hero <picture> positioning rules. */
#home .heroSwiper .viv-hero-fallback.hero-v4-frame > picture.hero-v4-picture{
  position:absolute!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#home .heroSwiper .viv-hero-fallback.hero-v4-frame > picture.hero-v4-picture > img.hero-v4-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}