:root{--bg:#050505;--panel:#0c0c0c;--gold:#d6a33b;--gold2:#ffe2a0;--text:#f4f1e9;--muted:#a6a39c;--line:rgba(214,163,59,.27)}
html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Cairo","Tajawal","Noto Sans Arabic",Arial,sans-serif}.cs-site{direction:rtl;min-height:100vh;background:radial-gradient(circle at 75% 0,rgba(214,163,59,.10),transparent 30%),var(--bg)}.cs-header{height:82px;max-width:1280px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(5,5,5,.72);backdrop-filter:blur(18px);position:relative;z-index:10}.cs-logo img{display:block;width:115px;height:auto;filter:drop-shadow(0 8px 18px rgba(214,163,59,.15))}.cs-logo b{color:var(--gold2);font-size:23px}.cs-header nav{display:flex;gap:34px}.cs-header nav a{color:#eee;text-decoration:none;font-size:15px;font-weight:700;position:relative}.cs-header nav a:after{content:"";position:absolute;right:0;bottom:-12px;width:0;height:2px;background:var(--gold);transition:.3s}.cs-header nav a:hover:after{width:100%}.cs-header-btn,.gold,.outline{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;font-weight:800;border-radius:8px;transition:.3s}.cs-header-btn{border:1px solid var(--gold);color:var(--gold2);padding:10px 17px}.gold{background:linear-gradient(135deg,#a97017,#f4d37d,#a97017);color:#171108;padding:14px 25px;box-shadow:0 10px 35px rgba(214,163,59,.17)}.outline{border:1px solid var(--gold);color:var(--gold2);padding:13px 23px;background:rgba(0,0,0,.25)}.gold:hover,.outline:hover,.cs-header-btn:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(214,163,59,.22)}.cs-hero{position:relative;min-height:690px;max-width:1450px;margin:auto;display:flex;align-items:center;padding:50px 8%;background:linear-gradient(90deg,rgba(5,5,5,.96),rgba(5,5,5,.72) 45%,rgba(5,5,5,.2)),var(--hero);background-size:cover;background-position:center;overflow:hidden}.cs-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}.cs-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.97),rgba(5,5,5,.66),rgba(5,5,5,.15))}.cs-hero-content{position:relative;z-index:2;max-width:650px}.cs-kicker,.head>span,.cs-about>div:last-child>span,.cs-contact>div>span{color:var(--gold);font-weight:900}.cs-hero h1{font-size:clamp(50px,7vw,92px);line-height:1;margin:13px 0 8px;letter-spacing:-3px}.cs-en{color:var(--gold2);font-size:28px;letter-spacing:3px;direction:ltr;text-align:right}.cs-hero p{font-size:18px;color:#d2cec4;line-height:2;margin:25px 0;max-width:590px}.cs-actions{display:flex;gap:14px}.cs-scroll{position:absolute;bottom:22px;left:50%;font-size:30px;color:var(--gold);animation:float 1.8s infinite}.cs-stats{max-width:1180px;margin:-42px auto 0;position:relative;z-index:5;padding:22px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(11,11,11,.94);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 70px #000}.cs-stats div{text-align:center;border-left:1px solid rgba(255,255,255,.1)}.cs-stats div:last-child{border:0}.cs-stats b{display:block;font-size:30px;color:var(--gold2)}.cs-stats span{font-size:14px;color:#ddd}.cs-section{max-width:1220px;margin:auto;padding:110px 25px}.head{text-align:center;max-width:760px;margin:0 auto 50px}.head h2,.cs-about h2,.cs-contact h2{font-size:clamp(35px,4.5vw,55px);margin:12px 0}.head p,.cs-about p,.cs-contact p{color:var(--muted);line-height:2;font-size:17px}.services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.services article{background:linear-gradient(145deg,#121212,#070707);border:1px solid var(--line);border-radius:16px;min-height:410px;position:relative;overflow:hidden;transition:.4s;box-shadow:0 18px 55px rgba(0,0,0,.28)}.services article:hover{transform:translateY(-8px);border-color:rgba(255,226,160,.65);box-shadow:0 24px 65px rgba(0,0,0,.45)}.services article:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:var(--gold);filter:blur(60px);opacity:.08;left:-60px;bottom:-90px;pointer-events:none}.service-image{height:230px;position:relative;overflow:visible;background:#090909}.service-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,0) 45%,rgba(5,5,5,.88) 100%);pointer-events:none}.service-image img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.06);transition:transform .55s ease}.services article:hover .service-image img{transform:scale(1.045)}.service-image i{position:absolute;z-index:2;bottom:-26px;left:50%;transform:translateX(-50%);width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:25px;color:var(--gold2);background:radial-gradient(circle at 35% 30%,#302510,#0b0905 72%);border:1px solid rgba(255,226,160,.62);box-shadow:0 8px 28px rgba(0,0,0,.7),0 0 22px rgba(214,163,59,.13)}.service-body{padding:34px 25px 28px;position:relative;z-index:1}.services h3{font-size:21px;margin:0 0 9px}.services p{color:var(--muted);line-height:1.9;margin:0}.cs-about{max-width:1180px;margin:auto;padding:70px 25px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.about-img{min-height:430px;border:1px solid var(--line);border-radius:18px;background:#111 center/cover no-repeat;box-shadow:0 25px 80px #000}.cs-about>div:last-child{padding:10px}.textlink{color:var(--gold2);text-decoration:none;font-weight:800}.workbox{display:grid;grid-template-columns:1.35fr 1fr;gap:35px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:30px;background:linear-gradient(120deg,#121212,#070707)}.fakewave{height:190px;display:flex;align-items:center;justify-content:center;gap:4px}.fakewave i{width:5px;border-radius:5px;background:linear-gradient(#ffe2a0,#8e5e12);height:55px;animation:wave .9s ease-in-out infinite alternate}.fakewave i:nth-child(2n){height:100px}.fakewave i:nth-child(3n){height:145px}.fakewave i:nth-child(4n){height:75px}.fakewave i:nth-child(5n){height:125px}.workbox h3{font-size:30px}.workbox p{color:var(--muted);line-height:2}.cs-contact{max-width:1180px;margin:30px auto 90px;padding:45px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 15% 50%,rgba(214,163,59,.13),transparent 35%),#0b0b0b;display:flex;align-items:center;justify-content:space-between;gap:25px}.contact-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.phone{color:var(--gold2);font-size:25px;text-decoration:none;font-weight:900;direction:ltr}.cs-footer{border-top:1px solid var(--line);padding:38px 20px;text-align:center;background:#030303}.footer-brand{color:var(--gold2);font-size:22px;font-weight:900}.footer-brand small{display:block;font-size:11px;letter-spacing:2px;margin-top:4px}.socials{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:22px}.socials a{color:#eee;text-decoration:none;border:1px solid var(--line);border-radius:50px;padding:9px 13px;font-size:11px;transition:.3s}.socials a:hover{background:var(--gold);color:#111}.cs-footer p{color:#777;font-size:12px}.inner-main{max-width:1100px;margin:auto;padding:110px 25px;min-height:65vh}.inner-main>span{color:var(--gold)}.inner-main h1{font-size:clamp(40px,6vw,70px)}.content{background:#0b0b0b;border:1px solid var(--line);border-radius:16px;padding:30px;line-height:2;color:#ddd}.content img{max-width:100%;height:auto}.cs-site a:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}@keyframes wave{from{transform:scaleY(.55);opacity:.55}to{transform:scaleY(1);opacity:1}}@keyframes float{50%{transform:translateY(7px)}}.cs-location{max-width:1180px;margin:10px auto 90px;padding:0 25px}.cs-location-head{text-align:center;margin:0 auto 28px;max-width:760px}.cs-location-head span{color:var(--gold);font-weight:900}.cs-location-head h2{font-size:clamp(35px,4.5vw,55px);margin:12px 0}.cs-location-head p{color:var(--muted);line-height:2;font-size:17px;margin:0}.cs-map-wrap{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#090909;box-shadow:0 25px 80px rgba(0,0,0,.55)}.cs-map{display:block;width:100%;height:430px;border:0;filter:grayscale(.75) contrast(1.08) brightness(.78)}.cs-map-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,5,5,.16),transparent 35%,rgba(214,163,59,.05));mix-blend-mode:screen}.cs-map-badge{position:absolute;text-decoration:none!important;right:22px;bottom:22px;z-index:2;padding:13px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(5,5,5,.86);backdrop-filter:blur(12px);box-shadow:0 12px 35px rgba(0,0,0,.45)}.cs-map-badge b{display:block;color:var(--gold2);font-size:13px;letter-spacing:1.5px;direction:ltr}.cs-map-badge span{display:block;color:#c9c4b9;font-size:11px;margin-top:4px}@media(max-width:900px){.cs-header nav{gap:13px}.cs-header-btn{display:none}.cs-stats{grid-template-columns:repeat(2,1fr)}.cs-stats div:nth-child(2){border:0}.services{grid-template-columns:repeat(2,1fr)}.cs-about,.workbox{grid-template-columns:1fr}.cs-contact{margin:25px 18px 70px;display:block}.contact-actions{margin-top:25px}}@media(max-width:600px){.cs-location{padding:0 18px;margin-bottom:65px}.cs-map{height:330px}.cs-map-badge{right:14px;bottom:14px}.cs-map-badge b{font-size:11px}}@media(max-width:600px){.cs-header{height:70px;padding:0 15px}.cs-logo img{width:80px}.cs-header nav{gap:11px}.cs-header nav a{font-size:10px}.cs-header nav a:nth-child(3){display:none}.cs-hero{min-height:620px;padding:45px 20px;background-position:center}.cs-hero h1{font-size:51px}.cs-en{font-size:18px}.cs-hero p{font-size:15px}.cs-actions{flex-direction:column}.cs-stats{margin:0 14px}.cs-section{padding:75px 18px}.services{grid-template-columns:1fr}.cs-about{padding:55px 18px}.about-img{min-height:300px}.cs-contact{padding:30px 22px}.phone{font-size:19px}}


/* v1.2.0: remove the old homepage statistics/counters section */
.capital-stats,
.capital-statistics,
.saa-stats,
.saa-statistics,
.stats-section,
.statistics-section,
.stats-grid,
.metrics-section,
.counter-section,
.home-stats { display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; }


/* v1.2.2 — Responsive containment & sizing pass
   Keeps waveforms, text, buttons, media and decorative elements inside their sections.
*/
html, body { max-width:100%; overflow-x:hidden !important; }
*, *::before, *::after { box-sizing:border-box; }

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

body.saa-wcs .saa-feature,
body.saa-wcs .saa-hero,
body.saa-wcs .saa-services,
body.saa-wcs .saa-service,
body.saa-wcs main,
body.saa-wcs .site-main,
body.saa-wcs section,
body.saa-wcs .wp-block-group,
body.saa-wcs .elementor-section,
body.saa-wcs .elementor-container {
  min-width:0;
  max-width:100%;
}

body.saa-wcs .saa-feature > *,
body.saa-wcs .saa-hero > *,
body.saa-wcs .saa-service > *,
body.saa-wcs .elementor-widget,
body.saa-wcs .wp-block-column {
  min-width:0;
  max-width:100%;
}

body.saa-wcs .saa-feature *,
body.saa-wcs .saa-hero *,
body.saa-wcs .saa-service *,
body.saa-wcs .elementor-widget *,
body.saa-wcs .wp-block-group * {
  max-width:100%;
}

body.saa-wcs .saa-feature p,
body.saa-wcs .saa-hero p,
body.saa-wcs .saa-service p,
body.saa-wcs .saa-feature h1,
body.saa-wcs .saa-feature h2,
body.saa-wcs .saa-feature h3,
body.saa-wcs .saa-hero h1,
body.saa-wcs .saa-hero h2,
body.saa-wcs .saa-hero h3 {
  overflow-wrap:anywhere;
  word-break:normal;
}

body.saa-wcs .saa-feature,
body.saa-wcs .saa-services {
  overflow:hidden;
}

body.saa-wcs .saa-feature img,
body.saa-wcs .saa-feature video,
body.saa-wcs .saa-feature iframe {
  display:block;
  width:100%;
  max-width:100%;
  object-fit:cover;
}

body.saa-wcs .saa-service {
  overflow:hidden;
}

body.saa-wcs .saa-service-title {
  min-width:0;
  overflow-wrap:anywhere;
}

body.saa-wcs .saa-service-arrow {
  flex:0 0 auto;
}

body.saa-wcs .saa-hero::before,
body.saa-wcs .saa-hero::after {
  pointer-events:none;
  max-width:100vw;
}

@media (max-width: 1024px) {
  body.saa-wcs .saa-feature,
  body.saa-wcs .saa-feature:nth-child(even) {
    gap:clamp(24px,5vw,55px);
  }
  body.saa-wcs .saa-hero {
    min-height:clamp(520px,72vh,700px);
  }
}

@media (max-width: 800px) {
  body.saa-wcs .saa-hero {
    width:100%;
    min-height:clamp(500px,78vh,650px);
    padding-left:20px;
    padding-right:20px;
    overflow:hidden;
  }

  body.saa-wcs .saa-feature,
  body.saa-wcs .saa-feature:nth-child(even) {
    width:100%;
    grid-template-columns:minmax(0,1fr);
    gap:30px;
    padding-left:20px;
    padding-right:20px;
    overflow:hidden;
  }

  body.saa-wcs .saa-feature > * {
    width:100%;
  }

  body.saa-wcs .saa-services {
    width:100%;
    padding-left:20px;
    padding-right:20px;
    overflow:hidden;
  }

  body.saa-wcs .saa-service {
    width:100%;
    grid-template-columns:38px minmax(0,1fr) 24px;
    gap:10px;
    padding:22px 0;
  }

  body.saa-wcs .saa-service-title {
    font-size:clamp(18px,5vw,26px);
    line-height:1.45;
  }

  body.saa-wcs .saa-service-arrow {
    font-size:22px;
    text-align:center;
  }

  body.saa-wcs .saa-hero::before {
    width:min(360px,90vw);
    height:min(360px,90vw);
    right:min(-190px,-15vw);
  }

  body.saa-wcs .saa-hero::after {
    left:20px;
    max-width:120px;
  }

  body.saa-wcs h1 {
    font-size:clamp(30px,9vw,48px)!important;
    line-height:1.25!important;
  }

  body.saa-wcs h2 {
    font-size:clamp(25px,7.5vw,36px)!important;
    line-height:1.3!important;
  }

  body.saa-wcs h3 {
    font-size:clamp(20px,6vw,29px)!important;
  }

  body.saa-wcs p {
    font-size:clamp(15px,4.1vw,18px)!important;
  }

  /* Waveform/audio visual containment */
  body.saa-wcs .wave,
  body.saa-wcs .waveform,
  body.saa-wcs .audio-wave,
  body.saa-wcs .audio-waveform,
  body.saa-wcs .saa-wave,
  body.saa-wcs .saa-waveform,
  body.saa-wcs canvas {
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  body.saa-wcs svg {
    max-width:100%!important;
    height:auto;
  }

  body.saa-wcs .wp-block-buttons,
  body.saa-wcs .elementor-button-wrapper {
    max-width:100%;
    flex-wrap:wrap;
  }

  body.saa-wcs .wp-block-button,
  body.saa-wcs .elementor-button {
    max-width:100%;
  }
}

@media (max-width: 480px) {
  body.saa-wcs .saa-hero {
    min-height:500px;
    padding-left:16px;
    padding-right:16px;
  }

  body.saa-wcs .saa-feature,
  body.saa-wcs .saa-feature:nth-child(even),
  body.saa-wcs .saa-services {
    padding-left:16px;
    padding-right:16px;
  }

  body.saa-wcs .saa-service {
    grid-template-columns:30px minmax(0,1fr) 20px;
    gap:8px;
  }

  body.saa-wcs .saa-service-num {
    font-size:10px;
    letter-spacing:1.5px;
  }

  body.saa-wcs .saa-service-title {
    font-size:18px;
  }

  body.saa-wcs .saa-hero::before {
    width:280px;
    height:280px;
    right:-170px;
  }
}


/* v1.2.4 — Real mobile containment fix for the actual .workbox markup.
   The previous rules targeted unrelated classes. The waveform's 46 fixed-size
   children created an intrinsic min-content width, forcing the grid wider than
   the phone viewport. These rules make both grid tracks and their children
   shrinkable and make every waveform bar share the available width. */
.cs-site .workbox,
.cs-site .workbox > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.cs-site .workbox {
  width: 100% !important;
  overflow: hidden !important;
}
.cs-site .fakewave {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  gap: clamp(1px, .9vw, 4px) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.cs-site .fakewave i {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.cs-site .workbox > div:last-child {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.cs-site .workbox h3,
.cs-site .workbox p {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.cs-site .workbox .outline {
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}
@media (max-width: 900px) {
  .cs-site .workbox {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(18px, 5vw, 30px) !important;
    gap: 24px !important;
  }
  .cs-site .workbox > div {
    width: 100% !important;
    min-width: 0 !important;
  }
  .cs-site .fakewave {
    height: clamp(120px, 38vw, 190px) !important;
  }
  .cs-site .workbox h3 {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.35 !important;
  }
  .cs-site .workbox p {
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.9 !important;
  }
}
@media (max-width: 480px) {
  .cs-site .cs-section.work {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: hidden !important;
  }
  .cs-site .workbox {
    margin: 0 !important;
    border-radius: 18px !important;
    padding: 18px !important;
    gap: 20px !important;
  }
  .cs-site .fakewave {
    height: 125px !important;
    gap: 1px !important;
  }
  .cs-site .fakewave i {
    border-radius: 4px !important;
  }
  .cs-site .workbox h3 {
    font-size: 23px !important;
    line-height: 1.4 !important;
    margin: 0 0 12px !important;
  }
  .cs-site .workbox p {
    font-size: 15px !important;
    line-height: 1.95 !important;
    margin: 0 0 18px !important;
  }
  .cs-site .workbox .outline {
    width: auto !important;
    max-width: 100% !important;
    padding: 12px 18px !important;
  }
}
@media (max-width: 380px) {
  .cs-site .workbox { padding: 14px !important; }
  .cs-site .fakewave { height: 110px !important; }
  .cs-site .workbox h3 { font-size: 21px !important; }
  .cs-site .workbox p { font-size: 14px !important; }
}


/* v1.2.5 — definitive mobile workbox containment + cache bust */
.cs-site .workbox{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
.cs-site .workbox .fakewave{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;display:grid!important;grid-template-columns:repeat(46,minmax(0,1fr))!important;align-items:center!important;justify-items:stretch!important;gap:clamp(1px,.55vw,4px)!important}
.cs-site .workbox .fakewave i{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important;transform-origin:center!important}
.cs-site .workbox>div:last-child{box-sizing:border-box!important;min-width:0!important;width:auto!important;max-width:100%!important;overflow:hidden!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}
.cs-site .workbox>div:last-child h3,.cs-site .workbox>div:last-child p{display:block!important;width:auto!important;max-width:100%!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}
.cs-location{max-width:1180px;margin:10px auto 90px;padding:0 25px}.cs-location-head{text-align:center;margin:0 auto 28px;max-width:760px}.cs-location-head span{color:var(--gold);font-weight:900}.cs-location-head h2{font-size:clamp(35px,4.5vw,55px);margin:12px 0}.cs-location-head p{color:var(--muted);line-height:2;font-size:17px;margin:0}.cs-map-wrap{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#090909;box-shadow:0 25px 80px rgba(0,0,0,.55)}.cs-map{display:block;width:100%;height:430px;border:0;filter:grayscale(.75) contrast(1.08) brightness(.78)}.cs-map-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,5,5,.16),transparent 35%,rgba(214,163,59,.05));mix-blend-mode:screen}.cs-map-badge{position:absolute;text-decoration:none!important;right:22px;bottom:22px;z-index:2;padding:13px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(5,5,5,.86);backdrop-filter:blur(12px);box-shadow:0 12px 35px rgba(0,0,0,.45)}.cs-map-badge b{display:block;color:var(--gold2);font-size:13px;letter-spacing:1.5px;direction:ltr}.cs-map-badge span{display:block;color:#c9c4b9;font-size:11px;margin-top:4px}@media(max-width:900px){
 .cs-site .workbox{display:block!important;width:100%!important;max-width:100%!important;padding:20px!important;box-sizing:border-box!important;overflow:hidden!important}
 .cs-site .workbox .fakewave{width:100%!important;height:125px!important;margin:0 0 24px!important;display:grid!important;grid-template-columns:repeat(46,minmax(0,1fr))!important;gap:1px!important;overflow:hidden!important}
 .cs-site .workbox>div:last-child{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important;text-align:right!important}
 .cs-site .workbox>div:last-child h3{font-size:clamp(21px,6vw,27px)!important;line-height:1.4!important;margin:0 0 14px!important}
 .cs-site .workbox>div:last-child p{font-size:clamp(14px,4.2vw,17px)!important;line-height:1.9!important;margin:0 0 18px!important}
 .cs-site .workbox>div:last-child .outline{display:inline-flex!important;max-width:100%!important;box-sizing:border-box!important;white-space:normal!important}
}
@media(max-width:480px){
 .cs-site .cs-section.work{box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding-left:16px!important;padding-right:16px!important;overflow:hidden!important}
 .cs-site .workbox{padding:16px!important;border-radius:18px!important}
 .cs-site .workbox .fakewave{height:120px!important;width:100%!important;max-width:100%!important}
 .cs-site .workbox>div:last-child{width:100%!important;max-width:100%!important;padding:0!important}
}
@media(max-width:380px){
 .cs-site .workbox{padding:14px!important}
 .cs-site .workbox .fakewave{height:105px!important}
}


/* v1.2.6: desktop Hero symmetry/layout refinement */
@media (min-width:901px){
  .cs-hero{
    width:100%;
    max-width:none;
    min-height:700px;
    box-sizing:border-box;
    margin:0;
    padding:70px 6vw;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background-position:center center;
  }
  .cs-hero-content{
    width:min(760px, 100%);
    max-width:760px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .cs-hero h1,
  .cs-en,
  .cs-hero p{
    text-align:center;
  }
  .cs-hero p{
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
  }
  .cs-actions{
    justify-content:center;
    align-items:center;
  }
  .cs-scroll{
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
}


/* v1.3.2 — Symmetrical premium location section */
.cs-location{max-width:1220px;margin:0 auto 105px;padding:95px 25px 0;position:relative}
.cs-location-head{text-align:center;margin:0 auto 46px;max-width:820px}
.cs-location-head>span{display:block;color:var(--gold);font-weight:900;letter-spacing:2px;font-size:13px}
.cs-location-head h2{font-size:clamp(34px,4.2vw,54px);line-height:1.15;margin:12px 0 18px;letter-spacing:-1px}
.cs-location-rule{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold2);font-size:11px;letter-spacing:3px;direction:ltr}
.cs-location-rule i{display:block;width:72px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.cs-location-rule i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.cs-location-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);gap:28px;align-items:stretch;direction:ltr}
.cs-map-wrap{position:relative;min-height:500px;border:1px solid rgba(214,163,59,.38);border-radius:22px;overflow:hidden;background:#070707;box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,226,160,.04)}
.cs-map-frame{position:absolute;inset:0;overflow:hidden}
.cs-map{display:block;width:100%;height:100%;min-height:500px;border:0;filter:grayscale(.88) sepia(.28) saturate(1.35) hue-rotate(345deg) contrast(1.12) brightness(.72)}
.cs-map-tint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(5,5,5,.34),rgba(214,163,59,.12) 45%,rgba(5,5,5,.46)),radial-gradient(circle at 50% 50%,transparent 35%,rgba(5,5,5,.48) 100%);mix-blend-mode:normal}
.cs-map-corner{position:absolute;width:34px;height:34px;pointer-events:none;z-index:3}
.cs-map-corner-tl{top:18px;left:18px;border-top:1px solid var(--gold2);border-left:1px solid var(--gold2)}
.cs-map-corner-br{right:18px;bottom:18px;border-right:1px solid var(--gold2);border-bottom:1px solid var(--gold2)}
.cs-location-card{direction:rtl;position:relative;min-height:500px;box-sizing:border-box;padding:48px 38px;display:flex;flex-direction:column;justify-content:center;text-align:center;border:1px solid rgba(214,163,59,.34);border-radius:22px;background:radial-gradient(circle at 50% 0,rgba(214,163,59,.14),transparent 42%),linear-gradient(145deg,#111 0%,#080808 72%);box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden}
.cs-location-card:before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,226,160,.055);border-radius:15px;pointer-events:none}
.cs-location-card-line{width:44px;height:2px;margin:0 auto 22px;background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold));box-shadow:0 0 18px rgba(214,163,59,.35)}
.cs-location-label{color:var(--gold);font-size:10px;font-weight:900;letter-spacing:3px;direction:ltr}
.cs-location-icon{width:58px;height:58px;margin:22px auto 18px;border:1px solid rgba(214,163,59,.48);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold2);font-size:30px;background:rgba(214,163,59,.055);box-shadow:0 0 35px rgba(214,163,59,.09)}
.cs-location-card h3{font-size:28px;margin:0 0 12px;color:var(--text)}
.cs-location-card p{margin:0 auto;color:#b8b3a9;font-size:15px;line-height:2;max-width:300px}
.cs-location-meta{display:flex;justify-content:center;gap:8px;margin:24px 0 28px;direction:rtl}
.cs-location-meta span{border:1px solid rgba(214,163,59,.22);background:rgba(214,163,59,.045);color:#d8d2c5;border-radius:30px;padding:7px 14px;font-size:11px}
.cs-location-btn{align-self:center;min-width:220px;border-radius:8px;padding:13px 18px;font-size:12px}
.cs-location-btn span{font-size:17px;line-height:0}
@media(max-width:900px){.cs-location{padding-top:75px}.cs-location-grid{grid-template-columns:1fr;gap:20px}.cs-map-wrap,.cs-location-card{min-height:430px}.cs-map{min-height:430px}.cs-location-card{padding:40px 28px}.cs-location-grid .cs-map-wrap{order:1}.cs-location-grid .cs-location-card{order:2}}
@media(max-width:600px){.cs-location{padding:65px 18px 0;margin-bottom:70px}.cs-location-head{margin-bottom:32px}.cs-location-head h2{font-size:34px}.cs-location-rule i{width:42px}.cs-location-rule{font-size:9px;gap:9px}.cs-map-wrap,.cs-location-card{min-height:360px;border-radius:18px}.cs-map{min-height:360px}.cs-location-card{padding:34px 22px}.cs-location-card h3{font-size:24px}.cs-location-card p{font-size:13px}.cs-location-icon{width:50px;height:50px;font-size:26px}.cs-location-meta{margin:19px 0 23px}.cs-location-btn{min-width:0;width:100%;box-sizing:border-box}}

/* v1.3.3 — Exact viewport centering + softer white typography */
.cs-site .cs-location{
  width:100vw !important;
  max-width:none !important;
  box-sizing:border-box !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:clamp(18px,4vw,50px) !important;
  padding-right:clamp(18px,4vw,50px) !important;
  display:block !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
}
.cs-site .cs-location-head,
.cs-site .cs-location-grid{
  width:100% !important;
  max-width:1120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.cs-site .cs-location-head{ text-align:center !important; }
.cs-site .cs-location-grid{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}
.cs-site .cs-location-card h3{
  color:#f1f0ec !important;
  text-shadow:0 1px 12px rgba(255,255,255,.05);
}
.cs-site .cs-location-card p{
  color:#e0ded8 !important;
}
.cs-site .cs-location-meta span{
  color:#e9e7e1 !important;
}
.cs-site .cs-location-label{
  color:#f0eee7 !important;
}
.cs-site .cs-location-head h2{
  color:#f1f0ec !important;
}
.cs-site .cs-location-head > span{
  color:var(--gold2) !important;
}
@media(max-width:900px){
  .cs-site .cs-location{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .cs-site .cs-location-head,
  .cs-site .cs-location-grid{max-width:680px !important;}
}
@media(max-width:600px){
  .cs-site .cs-location{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .cs-site .cs-location-head,
  .cs-site .cs-location-grid{max-width:520px !important;}
  .cs-site .cs-location-card p{color:#dedcd6 !important;}
}

/* v1.3.4 — map only: remove location details/card and center the map */
.cs-site .cs-location-grid{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  direction:ltr !important;
}
.cs-site .cs-location-grid .cs-map-wrap{
  flex:0 1 1120px !important;
  width:100% !important;
  max-width:1120px !important;
  min-height:520px !important;
  margin:0 auto !important;
}
.cs-site .cs-location-grid .cs-map{min-height:520px !important;}
@media(max-width:900px){
  .cs-site .cs-location-grid .cs-map-wrap{max-width:760px !important;min-height:430px !important;}
  .cs-site .cs-location-grid .cs-map{min-height:430px !important;}
}
@media(max-width:600px){
  .cs-site .cs-location-grid .cs-map-wrap{width:100% !important;max-width:100% !important;min-height:360px !important;border-radius:18px;}
  .cs-site .cs-location-grid .cs-map{min-height:360px !important;}
}

/* Premium 3D glass social icons */
.socials{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:18px 0}
.social-icon{
  --icon-accent:var(--gold);
  position:relative;display:inline-flex!important;align-items:center;justify-content:center;
  width:54px;height:54px;padding:0!important;border-radius:16px!important;
  text-decoration:none!important;color:#fff!important;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -12px 22px rgba(0,0,0,.22),0 10px 24px rgba(0,0,0,.38),0 0 22px color-mix(in srgb,var(--icon-accent) 18%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateY(0);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  overflow:visible;
}
.social-icon:before{content:"";position:absolute;inset:2px;border-radius:14px;background:linear-gradient(125deg,rgba(255,255,255,.22),transparent 34%,transparent 70%,rgba(255,255,255,.05));pointer-events:none}
.social-icon:after{content:"";position:absolute;left:7px;right:7px;bottom:-7px;height:13px;border-radius:50%;background:var(--icon-accent);filter:blur(11px);opacity:.26;z-index:-1}
.social-icon:hover{transform:translateY(-7px) scale(1.06);border-color:color-mix(in srgb,var(--icon-accent) 55%,white)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -12px 22px rgba(0,0,0,.18),0 16px 35px rgba(0,0,0,.48),0 0 30px color-mix(in srgb,var(--icon-accent) 35%,transparent)}
.social-icon svg{width:29px;height:29px;display:block;position:relative;z-index:2;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.social-icon span{position:absolute;bottom:-29px;opacity:0;pointer-events:none;font-size:10px;font-weight:800;white-space:nowrap;color:#fff;transition:.22s;text-shadow:0 2px 8px #000}
.social-icon:hover span{opacity:1;bottom:-24px}
.social-instagram{--icon-accent:#C837AB}.social-tiktok{--icon-accent:#25F4EE}.social-snapchat{--icon-accent:#FFFC00}.social-facebook{--icon-accent:#1877F2}.social-whatsapp{--icon-accent:#25D366}
.cs-footer .socials{padding-bottom:10px}
@media(max-width:600px){
 .socials{gap:10px}.social-icon{width:48px;height:48px;border-radius:14px!important}.social-icon svg{width:26px;height:26px}
}


/* v1.5.2 — Light / Dark mode toggle */
:root{--header-bg:rgba(5,5,5,.72);--card-bg1:#121212;--card-bg2:#070707;--card-alpha-border:rgba(255,226,160,.65);--footer-bg:#030303;--content-bg:#0b0b0b;--content-text:#ddd;--nav-link:#eee;--stats-bg:rgba(11,11,11,.94);--stats-border:rgba(255,255,255,.1);--map-bg:#070707;--map-filter:grayscale(.88) sepia(.28) saturate(1.35) hue-rotate(345deg) contrast(1.12) brightness(.72);--map-tint:linear-gradient(135deg,rgba(5,5,5,.34),rgba(214,163,59,.12) 45%,rgba(5,5,5,.46)),radial-gradient(circle at 50% 50%,transparent 35%,rgba(5,5,5,.48) 100%);--location-card-bg:linear-gradient(145deg,#111 0%,#080808 72%);--location-text:#f1f0ec;--location-text2:#e0ded8;--glass-bg:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.035));--glass-border:rgba(255,255,255,.18);--icon-color:#fff;--about-img-bg:#111;--outline-bg:rgba(0,0,0,.25)}

html[data-theme="light"]{
 --bg:#f6f1e4;--panel:#ffffff;--gold:#a9791c;--gold2:#8a5f10;--text:#231d12;--muted:#5c5548;--line:rgba(169,121,28,.35);
 --header-bg:rgba(255,251,241,.85);--card-bg1:#ffffff;--card-bg2:#f2ead8;--card-alpha-border:rgba(169,121,28,.55);
 --footer-bg:#efe6d2;--content-bg:#ffffff;--content-text:#3a3325;--nav-link:#2a2416;
 --stats-bg:rgba(255,255,255,.9);--stats-border:rgba(0,0,0,.08);
 --map-bg:#efe6d2;--map-filter:sepia(.12) saturate(1.05) contrast(1.02) brightness(1.02);
 --map-tint:linear-gradient(135deg,rgba(255,255,255,.22),rgba(169,121,28,.06) 45%,rgba(255,255,255,.15)),radial-gradient(circle at 50% 50%,transparent 45%,rgba(255,255,255,.2) 100%);
 --location-card-bg:linear-gradient(145deg,#ffffff 0%,#f2ead8 72%);--location-text:#231d12;--location-text2:#4a4335;
 --glass-bg:linear-gradient(145deg,rgba(0,0,0,.06),rgba(0,0,0,.015));--glass-border:rgba(0,0,0,.12);--icon-color:#231d12;
 --about-img-bg:#efe6d2;--outline-bg:rgba(255,255,255,.5);
}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] .cs-header{background:var(--header-bg);border-bottom-color:rgba(0,0,0,.06)}
html[data-theme="light"] .cs-header nav a{color:var(--nav-link)}
html[data-theme="light"] .outline{background:var(--outline-bg)}
html[data-theme="light"] .cs-stats{background:var(--stats-bg)}
html[data-theme="light"] .cs-stats div{border-left-color:var(--stats-border)}
html[data-theme="light"] .cs-stats span{color:var(--muted)}
html[data-theme="light"] .services article{background:linear-gradient(145deg,var(--card-bg1),var(--card-bg2))}
html[data-theme="light"] .services article:hover{border-color:var(--card-alpha-border)}
html[data-theme="light"] .service-image{background:var(--card-bg2)}
html[data-theme="light"] .about-img{background-color:var(--about-img-bg)}
html[data-theme="light"] .workbox{background:linear-gradient(120deg,var(--card-bg1),var(--card-bg2))}
html[data-theme="light"] .cs-contact{background:radial-gradient(circle at 15% 50%,rgba(169,121,28,.10),transparent 35%),var(--content-bg)}
html[data-theme="light"] .cs-footer{background:var(--footer-bg)}
html[data-theme="light"] .socials a{color:var(--nav-link)}
html[data-theme="light"] .cs-footer p{color:#8a8371}
html[data-theme="light"] .content{background:var(--content-bg);color:var(--content-text)}
html[data-theme="light"] .cs-map-wrap{background:var(--map-bg)}
html[data-theme="light"] .cs-map{filter:var(--map-filter)}
html[data-theme="light"] .cs-map-tint{background:var(--map-tint)}
html[data-theme="light"] .cs-map-badge{background:rgba(255,251,241,.9)}
html[data-theme="light"] .cs-map-badge span{color:var(--muted)}
html[data-theme="light"] .cs-location-card{background:var(--location-card-bg)}
html[data-theme="light"] .cs-site .cs-location-card h3{color:var(--location-text) !important}
html[data-theme="light"] .cs-site .cs-location-card p{color:var(--location-text2) !important}
html[data-theme="light"] .cs-site .cs-location-meta span{color:var(--location-text) !important}
html[data-theme="light"] .cs-site .cs-location-label{color:var(--gold2) !important}
html[data-theme="light"] .cs-site .cs-location-head h2{color:var(--text) !important}
html[data-theme="light"] .social-icon{background:var(--glass-bg) !important;border-color:var(--glass-border) !important;color:var(--icon-color) !important}
html[data-theme="light"] .social-icon svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.15))}
html[data-theme="light"] .social-icon span{color:var(--text);text-shadow:none}
html[data-theme="light"] .fakewave i{background:linear-gradient(#a9791c,#5c3f0a)}
html[data-theme="light"] .cs-hero p{color:#e6e1d2}

/* theme toggle button */
.cs-header-actions{display:flex;align-items:center;gap:14px}
.cs-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--gold2);cursor:pointer;transition:.3s;padding:0}
.cs-theme-toggle:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(214,163,59,.2)}
.cs-theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor}
.cs-theme-toggle .icon-moon{fill:currentColor;stroke:none}
.cs-theme-toggle .icon-sun{display:none}
.cs-theme-toggle .icon-sun circle{fill:currentColor}
html[data-theme="light"] .cs-theme-toggle .icon-moon{display:none}
html[data-theme="light"] .cs-theme-toggle .icon-sun{display:block}
@media(max-width:600px){.cs-theme-toggle{width:38px;height:38px}.cs-theme-toggle svg{width:18px;height:18px}}

/* CSA_AUDIO_CSS_V153 */
.csa-demo-wrap{max-width:1080px;margin:50px auto;padding:0 24px}.csa-audio-card{overflow:hidden;border:1px solid #8d6825;border-radius:20px;background:linear-gradient(145deg,#111,#070707);padding:18px;box-shadow:0 22px 60px #0008}.csa-audio-visual{height:110px;overflow:hidden;border-radius:14px;background:#0008}.csa-audio-canvas{width:100%;height:100%;display:block}.csa-audio-controls{display:flex;align-items:center;gap:16px;margin-top:16px}.csa-play,.csa-mute{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:1px solid #d7a43a;background:linear-gradient(145deg,#f2d27b,#b77b19);cursor:pointer}.csa-track{min-width:0;flex:1}.csa-title{color:#f5e7c4;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.csa-time{display:flex;justify-content:space-between;color:#aaa;font-size:11px;margin:6px 0}.csa-progress{width:100%;accent-color:#d7a43a}.csa-audio{display:none}@media(max-width:520px){.csa-demo-wrap{padding:0 14px}.csa-audio-card{padding:12px}.csa-audio-visual{height:85px}.csa-play,.csa-mute{width:42px;height:42px}}

/* v1.5.5 — reliable audio player */
.workbox-audio{grid-template-columns:1.35fr 1fr;align-items:center}
.workbox-audio .work-audio{min-width:0;width:100%}
.workbox-audio .csa-demo-wrap{max-width:none;margin:0;padding:0}
.workbox-audio .csa-audio-card{width:100%;padding:16px;border-radius:16px;box-shadow:0 16px 45px rgba(0,0,0,.42)}
.workbox-audio .csa-audio-visual{height:155px}
.work-audio-empty{min-height:155px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed rgba(214,163,59,.35);border-radius:16px;background:rgba(0,0,0,.22);padding:24px}
.work-audio-empty-icon{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffe2a0;font-size:28px;border:1px solid rgba(255,226,160,.5);background:radial-gradient(circle at 35% 30%,#302510,#0b0905 72%);margin-bottom:12px}
.work-audio-empty h3{margin:0 0 7px;color:#f5e7c4;font-size:20px}
.work-audio-empty p{margin:0;color:#aaa;line-height:1.8;font-size:13px}
@media(max-width:900px){
  .workbox-audio{grid-template-columns:1fr}
}
@media(max-width:520px){
  .workbox-audio .csa-audio-visual{height:105px}
}

.csa-audio-error{margin-top:10px;padding:9px 12px;border:1px solid rgba(220,90,70,.45);border-radius:9px;color:#f0b0a5;background:rgba(120,30,20,.12);font-size:12px;line-height:1.7;text-align:center}.csa-play:disabled{opacity:.7;cursor:wait}
/* v1.5.6 audio transport controls */
.workbox-audio .csa-audio-controls{gap:9px;flex-wrap:nowrap}.csa-rewind,.csa-forward{flex:0 0 auto;min-width:50px;height:42px;padding:0 8px;border:1px solid rgba(215,164,58,.75);border-radius:12px;background:rgba(215,164,58,.08);color:#f5d985;font-weight:800;cursor:pointer;transition:.25s}.csa-rewind:hover,.csa-forward:hover{background:rgba(215,164,58,.18);transform:translateY(-2px)}.csa-play{position:relative;z-index:2}.csa-progress{cursor:pointer}.csa-audio-error{grid-column:1/-1}
@media(max-width:620px){.workbox-audio .csa-audio-controls{gap:6px}.csa-rewind,.csa-forward{min-width:45px;padding:0 5px;font-size:11px}.csa-play,.csa-mute{width:42px;height:42px}.csa-track{min-width:90px}}

/* v1.5.8 — symmetric audio controls, volume slider, studio background */
.workbox-audio{position:relative;overflow:hidden;background:linear-gradient(120deg,rgba(7,7,7,.96),rgba(12,10,7,.90)),url('../assets/services/recording.webp') center/cover no-repeat!important;}
.workbox-audio:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,3,3,.96) 0%,rgba(5,5,5,.82) 45%,rgba(5,5,5,.72) 100%),radial-gradient(circle at 22% 50%,rgba(214,163,59,.16),transparent 34%);pointer-events:none;z-index:0}
.workbox-audio>*{position:relative;z-index:1}
.workbox-audio .work-audio{position:relative}
.workbox-audio .csa-audio-card{position:relative;background:linear-gradient(145deg,rgba(13,13,13,.76),rgba(3,3,3,.90)),url('../assets/services/recording.webp') center/cover no-repeat!important;backdrop-filter:blur(2px);border-color:rgba(255,226,160,.38)}
.workbox-audio .csa-audio-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.22),rgba(5,5,5,.76)),radial-gradient(circle at 50% 35%,rgba(214,163,59,.13),transparent 45%);pointer-events:none}
.workbox-audio .csa-audio-card>*{position:relative;z-index:1}
.workbox-audio .csa-audio-visual{height:155px;background:rgba(0,0,0,.28);border:1px solid rgba(255,226,160,.12)}
.workbox-audio .csa-track{width:100%;}
.workbox-audio .csa-audio-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:15px;flex-wrap:wrap}
.workbox-audio .csa-transport{display:flex;align-items:center;justify-content:center;gap:12px;direction:ltr;min-width:190px}
.workbox-audio .csa-rewind,.workbox-audio .csa-forward{min-width:58px;height:44px;border-radius:12px}
.workbox-audio .csa-play{width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 7px 22px rgba(0,0,0,.45),0 0 24px rgba(214,163,59,.14)}
.workbox-audio .csa-volume{display:flex;align-items:center;gap:9px;min-width:150px;direction:ltr}
.workbox-audio .csa-mute{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.workbox-audio .csa-volume-range{width:105px;accent-color:#d7a43a;cursor:pointer}
.workbox-audio .csa-volume-range::-webkit-slider-runnable-track,.workbox-audio .csa-progress::-webkit-slider-runnable-track{height:4px;border-radius:8px;background:rgba(255,226,160,.20)}
.workbox-audio .csa-volume-range::-webkit-slider-thumb,.workbox-audio .csa-progress::-webkit-slider-thumb{margin-top:-5px}
.workbox-audio .csa-volume-range::-moz-range-track,.workbox-audio .csa-progress::-moz-range-track{height:4px;border-radius:8px;background:rgba(255,226,160,.20)}
.workbox-audio .csa-volume-range::-moz-range-progress,.workbox-audio .csa-progress::-moz-range-progress{height:4px;border-radius:8px;background:#d7a43a}
@media(max-width:700px){.workbox-audio .csa-audio-controls{gap:14px}.workbox-audio .csa-volume{min-width:135px}.workbox-audio .csa-volume-range{width:88px}}
@media(max-width:520px){.workbox-audio .csa-audio-visual{height:110px}.workbox-audio .csa-audio-controls{gap:12px}.workbox-audio .csa-transport{gap:8px;min-width:175px}.workbox-audio .csa-rewind,.workbox-audio .csa-forward{min-width:50px;height:40px;font-size:11px}.workbox-audio .csa-play{width:48px;height:48px}.workbox-audio .csa-volume{min-width:100%;justify-content:center}.workbox-audio .csa-volume-range{width:min(150px,55vw)}}

/* v1.5.9 — full work-card studio background + real audio-reactive wire waveform */
.workbox-audio{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(3,3,3,.92) 0%,rgba(5,5,5,.72) 48%,rgba(5,5,5,.78) 100%),
    url('../assets/services/recording.webp') center/cover no-repeat!important;
  border-color:rgba(255,226,160,.34)!important;
  box-shadow:0 26px 85px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,226,160,.08)!important;
}
.workbox-audio:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 20% 35%,rgba(214,163,59,.18),transparent 31%),
    radial-gradient(circle at 78% 70%,rgba(214,163,59,.10),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.42));
}
.workbox-audio:after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,226,160,.05) 50%,transparent 100%);
}
.workbox-audio>*{position:relative;z-index:1}
.workbox-audio .csa-audio-card{
  background:rgba(4,4,4,.42)!important;
  backdrop-filter:blur(7px) saturate(.9);
  border-color:rgba(255,226,160,.28)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.workbox-audio .csa-audio-card:before{display:none!important}
.workbox-audio .csa-audio-visual{
  height:165px!important;
  border:1px solid rgba(255,226,160,.16)!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.34))!important;
  box-shadow:inset 0 0 35px rgba(0,0,0,.35);
}
.workbox-audio .csa-audio-canvas{width:100%;height:100%;display:block}
.workbox-audio .csa-audio-controls{align-items:center;justify-content:center;gap:24px!important}
.workbox-audio .csa-transport{gap:13px!important}
.workbox-audio .csa-play{transform:translateZ(0);transition:transform .22s ease,box-shadow .22s ease}
.workbox-audio .csa-play:hover{transform:scale(1.06);box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 28px rgba(214,163,59,.24)!important}
.workbox-audio .csa-volume-range{background:transparent}
@media(max-width:900px){
  .workbox-audio{background-position:center!important}
  .workbox-audio .csa-audio-visual{height:145px!important}
}
@media(max-width:520px){
  .workbox-audio .csa-audio-visual{height:120px!important}
  .workbox-audio .csa-audio-controls{gap:12px!important}
}

/* v1.6.0 — work card exactly matches the player and is centered */
.workbox-audio{
  display:block!important;
  width:min(100%,1080px)!important;
  max-width:1080px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
.workbox-audio:before,.workbox-audio:after{display:none!important}
.workbox-audio .work-audio{width:100%!important;max-width:100%!important;margin:0 auto!important;padding:0!important}
.workbox-audio .csa-demo-wrap{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
.workbox-audio .csa-audio-card{width:100%!important;max-width:none!important;box-sizing:border-box!important;margin:0 auto!important}
.workbox-audio .work-audio-empty{width:100%!important;box-sizing:border-box!important}
@media(max-width:900px){
  .workbox-audio{width:100%!important;max-width:100%!important}
}
/* v1.6.0 — move the studio artwork onto the exact player-sized card */
.workbox-audio .csa-audio-card{
  position:relative!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(3,3,3,.78) 0%,rgba(5,5,5,.52) 48%,rgba(5,5,5,.66) 100%),
    url('../assets/services/recording.webp') center/cover no-repeat!important;
  border:1px solid rgba(255,226,160,.34)!important;
  border-radius:18px!important;
  box-shadow:0 26px 85px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,226,160,.08)!important;
}
.workbox-audio .csa-audio-card:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 20% 35%,rgba(214,163,59,.14),transparent 31%),
    radial-gradient(circle at 78% 70%,rgba(214,163,59,.08),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.30))!important;
}
.workbox-audio .csa-audio-card>*{position:relative!important;z-index:1!important}

/* v1.6.1 — compact centered desktop audio card (40% narrower) */
@media (min-width: 901px){
  .cs-site .cs-section.work .workbox-audio{
    width:60%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  .cs-site .cs-section.work .workbox-audio .csa-audio-card{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
}


/* v1.6.4 — fixed transport direction + mobile play button */
.workbox-audio .csa-transport{direction:ltr!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.workbox-audio .csa-forward,.workbox-audio .csa-rewind{
  appearance:none!important;-webkit-appearance:none!important;
  font-family:Arial,sans-serif!important;font-weight:800!important;
  line-height:1!important;text-align:center!important;
  writing-mode:horizontal-tb!important;
  transform:none!important;
}
.workbox-audio .csa-play{
  appearance:none!important;-webkit-appearance:none!important;
  -webkit-tap-highlight-color:transparent!important;
  border:1px solid rgba(255,226,160,.65)!important;
  background:radial-gradient(circle at 35% 30%,#f3d27a 0%,#d7a43a 42%,#9a6b18 100%)!important;
  color:#080705!important;
  font-family:Arial,sans-serif!important;font-weight:900!important;
  line-height:1!important;text-align:center!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;margin:0!important;
  box-sizing:border-box!important;
  transform:none!important;
}
.workbox-audio .csa-play:active,.workbox-audio .csa-play:focus{
  transform:none!important;outline:none!important;
}
@media(max-width:620px){
  .workbox-audio .csa-transport{direction:ltr!important;gap:8px!important;}
  .workbox-audio .csa-forward,.workbox-audio .csa-rewind{
    width:50px!important;min-width:50px!important;height:44px!important;
    padding:0!important;border-radius:12px!important;
  }
  .workbox-audio .csa-play{
    width:52px!important;height:52px!important;min-width:52px!important;
    border-radius:50%!important;font-size:18px!important;
  }
}

/* CSA mobile transport controls: preserve the desktop play button appearance and prevent native tap styling */
.csa-audio-controls button.csa-play{appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;border-radius:50%;outline:none;box-shadow:0 8px 24px rgba(214,163,59,.18);font-family:Arial,sans-serif;font-weight:900;line-height:1;display:flex!important;align-items:center!important;justify-content:center!important;}
.csa-audio-controls button.csa-play:active,.csa-audio-controls button.csa-play:focus,.csa-audio-controls button.csa-play:focus-visible{appearance:none;-webkit-appearance:none;outline:none;transform:none!important;filter:none!important;}
@media (max-width:600px){.csa-audio-controls .csa-transport{direction:ltr!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important}.csa-audio-controls button.csa-play{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;padding:0!important;font-size:24px!important;border:1px solid #d7a43a!important;background:radial-gradient(circle at 35% 30%,#3a2a0f,#0b0905 72%)!important;color:#f4d37d!important}.csa-audio-controls button.csa-forward,.csa-audio-controls button.csa-rewind{width:48px!important;height:48px!important;min-width:48px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important}}

/* v1.6.6 — Header logo contained and borderless */
.cs-header{overflow:hidden}
.cs-logo{height:100%;display:flex;align-items:center;justify-content:center;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0;margin:0;overflow:hidden}
.cs-logo img{display:block;width:auto;max-width:115px;height:auto;max-height:58px;object-fit:contain;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0;margin:0;}
.cs-logo:focus,.cs-logo:focus-visible{outline:0!important;box-shadow:none!important}
@media(max-width:600px){.cs-logo{max-height:70px}.cs-logo img{max-width:80px;max-height:50px}}


/* v1.6.7 — header/logo visual cleanup */
.capital-studio-header,
.capital-studio-premium-header,
.cs-header,
.cs-premium-header {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  overflow: hidden !important;
}

/* Keep the logo inside the header and remove the visible frame around it. */
.capital-studio-header img,
.capital-studio-premium-header img,
.cs-header img,
.cs-premium-header img,
.capital-studio-logo,
.cs-logo {
  max-height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Header inner band should extend edge-to-edge. */
.capital-studio-header-inner,
.capital-studio-premium-header-inner,
.cs-header-inner,
.cs-premium-header-inner {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}


/* v1.6.8 — center header navigation and unify logo/header background */
.capital-studio-header,
.capital-studio-premium-header,
.cs-header,
.cs-premium-header {
  background: #0b0b0b !important;
}

/* Use one continuous header color behind logo and navigation. */
.capital-studio-header-inner,
.capital-studio-premium-header-inner,
.cs-header-inner,
.cs-premium-header-inner {
  background: #0b0b0b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Center the navigation group itself, independent of RTL/LTR. */
.capital-studio-header nav,
.capital-studio-premium-header nav,
.cs-header nav,
.cs-premium-header nav,
.capital-studio-header .nav-menu,
.capital-studio-premium-header .nav-menu,
.cs-header .nav-menu,
.cs-premium-header .nav-menu {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Logo area must use exactly the same background as the header. */
.capital-studio-header .logo,
.capital-studio-premium-header .logo,
.cs-header .logo,
.cs-premium-header .logo,
.capital-studio-logo,
.cs-logo,
.capital-studio-header .logo-wrap,
.capital-studio-premium-header .logo-wrap {
  background: #0b0b0b !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* v1.6.10 — header background matches the original logo background */
.capital-studio-header,
.capital-studio-premium-header,
.cs-header,
.cs-premium-header,
.capital-studio-header-inner,
.capital-studio-premium-header-inner,
.cs-header-inner,
.cs-premium-header-inner {
  background: #0b0b0b !important;
}

/* Restore the logo artwork without cropping, blending, or artificial frame. */
.capital-studio-header .logo,
.capital-studio-premium-header .logo,
.cs-header .logo,
.cs-premium-header .logo,
.capital-studio-logo,
.cs-logo,
.capital-studio-header .logo-wrap,
.capital-studio-premium-header .logo-wrap {
  background: #0b0b0b !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  mix-blend-mode: normal !important;
}

.capital-studio-header .logo img,
.capital-studio-premium-header .logo img,
.cs-header .logo img,
.cs-premium-header .logo img,
.capital-studio-logo img,
.cs-logo img {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  clip-path: none !important;
  transform: none !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Keep navigation exactly centered. */
.capital-studio-header nav,
.capital-studio-premium-header nav,
.cs-header nav,
.cs-premium-header nav,
.capital-studio-header .nav-menu,
.capital-studio-premium-header .nav-menu,
.cs-header .nav-menu,
.cs-premium-header .nav-menu {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
}


/* v1.6.11 — premium hero media treatment */
.cs-hero,
.capital-studio-hero,
.capital-studio-premium-hero,
.hero-section {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 20% 50%, rgba(184,134,11,.20), transparent 32%),
    radial-gradient(circle at 80% 35%, rgba(255,180,60,.12), transparent 30%),
    linear-gradient(120deg,#050505 0%,#11100e 48%,#050505 100%) !important;
}

/* Remove any low-quality logo used as a hero background. */
.cs-hero::before,
.capital-studio-hero::before,
.capital-studio-premium-hero::before,
.hero-section::before {
  background-image: none !important;
  content: "" !important;
}

/* Cinematic studio-light motion layer. */
.cs-hero::after,
.capital-studio-hero::after,
.capital-studio-premium-hero::after,
.hero-section::after {
  content: "" !important;
  position: absolute !important;
  inset: -20% !important;
  pointer-events: none !important;
  background:
    linear-gradient(105deg, transparent 30%, rgba(214,164,62,.10) 42%, transparent 54%),
    radial-gradient(ellipse at 70% 60%, rgba(255,198,91,.09), transparent 34%);
  animation: csHeroLightSweep 12s ease-in-out infinite alternate !important;
  z-index: 0 !important;
}

@keyframes csHeroLightSweep {
  from { transform: translateX(-7%) scale(1.02); opacity:.65; }
  to   { transform: translateX(7%) scale(1.08); opacity:1; }
}

/* Keep hero content/video above the atmosphere layer. */
.cs-hero > *,
.capital-studio-hero > *,
.capital-studio-premium-hero > *,
.hero-section > * {
  position: relative !important;
  z-index: 1 !important;
}


/* v1.6.12 — preserve original hero dimensions/layout; remove logo/image background only */
.cs-hero{
  min-height:690px !important;
  max-width:1450px !important;
  margin:auto !important;
  display:flex !important;
  align-items:center !important;
  padding:50px 8% !important;
  background:
    linear-gradient(90deg,rgba(5,5,5,.96),rgba(5,5,5,.72) 45%,rgba(5,5,5,.20)) !important;
  background-size:cover !important;
  background-position:center !important;
  overflow:hidden !important;
}
.cs-bgvideo{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:.34 !important;
}
.cs-overlay{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg,rgba(5,5,5,.97),rgba(5,5,5,.66),rgba(5,5,5,.15)) !important;
}
/* Ensure no logo is used as a hero background image. */
.cs-hero[style*="--hero"]{
  background-image:linear-gradient(90deg,rgba(5,5,5,.96),rgba(5,5,5,.72) 45%,rgba(5,5,5,.20)) !important;
}
@media(max-width:600px){
  .cs-hero{
    min-height:620px !important;
    padding:45px 20px !important;
    background-position:center !important;
  }
}


/* v1.6.13 — improve hero/site text contrast */
.cs-hero h1,
.cs-hero h2,
.cs-hero p,
.cs-hero .cs-kicker,
.cs-hero .cs-en,
.cs-hero .cs-actions,
.cs-hero .cs-actions a,
.cs-hero .cs-scroll,
.cs-hero .cs-stats,
.cs-hero .cs-stats *,
.cs-section h2,
.cs-section h3,
.cs-section p,
.cs-about h2,
.cs-about p,
.cs-about > div:last-child > span {
  color: #f4f4f4 !important;
}

.cs-hero h1,
.cs-hero h2,
.cs-section h2,
.cs-about h2 {
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* Keep the gold accents gold while making the main copy bright. */
.cs-hero .cs-kicker,
.cs-hero .cs-en,
.cs-about > div:last-child > span {
  color: #f0d58a !important;
}


/* v1.6.14 — hero CTA/text contrast and balanced side layout */
.cs-hero .cs-actions a,
.cs-hero .cs-actions,
.cs-hero .cs-kicker,
.cs-hero .cs-en,
.cs-hero h1,
.cs-hero p,
.cs-hero .cs-scroll,
.cs-hero .cs-stats,
.cs-hero .cs-stats *,
.cs-contact .cs-actions a,
.cs-contact h2,
.cs-contact p,
.cs-contact span {
  color:#f4f4f4 !important;
}

/* Make the final CTA clearly visible. */
.cs-contact .cs-actions a,
.cs-cta a,
.cs-contact a {
  color:#f4f4f4 !important;
}

/* Reduce the main Arabic studio name in the hero. */
.cs-hero h1 {
  font-size: clamp(42px, 5vw, 64px) !important;
}

/* Place the hero content/buttons in a balanced two-sided composition
   within the dark margins around the video, without changing video dimensions. */
.cs-hero {
  justify-content: space-between !important;
}
.cs-hero-content {
  width: min(48%, 650px) !important;
  max-width: 650px !important;
}
.cs-hero .cs-actions {
  justify-content: flex-start !important;
}
@media(min-width:901px){
  .cs-hero-content{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .cs-hero .cs-actions{
    width:100% !important;
  }
}
@media(max-width:900px){
  .cs-hero-content{
    width:100% !important;
    max-width:650px !important;
  }
}

/* v1.6.15 — hero side columns: Contact right / Our Work left */
.cs-hero{
  display:grid !important;
  grid-template-columns: minmax(190px,1fr) minmax(0,1450px) minmax(190px,1fr) !important;
  align-items:center !important;
  gap:24px !important;
  padding:50px 24px !important;
  max-width:none !important;
}
.cs-hero-content{
  grid-column:2 !important;
  width:100% !important;
  max-width:1450px !important;
  margin:0 auto !important;
  padding:0 !important;
}
.cs-hero .cs-actions{
  position:absolute !important;
  inset-inline:24px !important;
  bottom:70px !important;
  width:auto !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  pointer-events:none !important;
  z-index:4 !important;
}
.cs-hero .cs-actions a{
  pointer-events:auto !important;
}
.cs-hero .cs-actions a:first-child{
  order:2 !important;
  margin-inline-start:auto !important;
}
.cs-hero .cs-actions a:last-child{
  order:1 !important;
  margin-inline-end:auto !important;
}
@media(max-width:900px){
  .cs-hero{
    display:flex !important;
    padding:45px 20px !important;
    min-height:620px !important;
  }
  .cs-hero-content{
    width:100% !important;
  }
  .cs-hero .cs-actions{
    position:static !important;
    display:flex !important;
    justify-content:center !important;
    gap:14px !important;
    margin-top:20px !important;
  }
  .cs-hero .cs-actions a:first-child,
  .cs-hero .cs-actions a:last-child{
    margin:0 !important;
    order:initial !important;
  }
}

/* v1.6.17 — side columns with original copy restored */
.cs-hero{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:none !important;
  min-height:690px !important;
  padding:50px 0 !important;
  background:#050505 !important;
}
.cs-hero .cs-bgvideo,
.cs-hero .cs-overlay{
  position:absolute !important;
  width:70% !important;
  height:100% !important;
  left:15% !important;
  right:auto !important;
  top:0 !important;
}
.cs-hero .cs-bgvideo{object-fit:cover !important;}
.cs-hero .cs-overlay{
  background:linear-gradient(90deg,rgba(5,5,5,.20),rgba(5,5,5,0) 50%,rgba(5,5,5,.20)) !important;
}
.cs-hero .cs-hero-content{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  z-index:5 !important;
  pointer-events:none !important;
}
.cs-hero .cs-side{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:15% !important;
  max-width:240px !important;
  min-width:170px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  text-align:center !important;
  pointer-events:auto !important;
  box-sizing:border-box !important;
}
.cs-hero .cs-side-left{left:0 !important;}
.cs-hero .cs-side-right{right:0 !important;}
.cs-hero .cs-side .cs-kicker{
  color:#f0d58a !important;
  font-size:12px !important;
  line-height:1.6 !important;
}
.cs-hero .cs-side h1{
  color:#f4f4f4 !important;
  font-size:clamp(28px,2.5vw,42px) !important;
  line-height:1.15 !important;
  margin:0 !important;
}
.cs-hero .cs-side .cs-en{
  color:#f4f4f4 !important;
  font-size:11px !important;
  letter-spacing:2px !important;
}
.cs-hero .cs-side p{
  color:#f4f4f4 !important;
  font-size:14px !important;
  line-height:1.9 !important;
  margin:0 !important;
}
.cs-hero .cs-side a{
  pointer-events:auto !important;
  white-space:nowrap !important;
  margin-top:8px !important;
}
.cs-hero .cs-actions{display:none !important;}

@media(max-width:1100px){
  .cs-hero .cs-bgvideo,.cs-hero .cs-overlay{
    width:64% !important; left:18% !important;
  }
  .cs-hero .cs-side{
    width:18% !important;
    min-width:145px !important;
  }
}
@media(max-width:900px){
  .cs-hero{
    min-height:620px !important;
    padding:45px 20px !important;
  }
  .cs-hero .cs-bgvideo,.cs-hero .cs-overlay{
    width:100% !important; left:0 !important;
  }
  .cs-hero .cs-hero-content{
    position:relative !important;
    inset:auto !important;
    min-height:530px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    gap:18px !important;
  }
  .cs-hero .cs-side{
    position:static !important;
    transform:none !important;
    width:100% !important;
    max-width:600px !important;
    min-width:0 !important;
    margin:0 auto !important;
  }
  .cs-hero .cs-side-left{
    display:none !important;
  }
  .cs-hero .cs-side-right{
    display:flex !important;
  }
}

/* v1.6.19 — HERO REBUILT: exact centered video + exact side columns */
/* The layout below intentionally does not depend on previous hero positioning rules. */
.cs-hero{
  position:relative !important;
  width:100% !important;
  max-width:none !important;
  min-height:690px !important;
  padding:50px 0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  background:#050505 !important;
  overflow:hidden !important;
  display:block !important;
}
.cs-hero > .cs-bgvideo,
.cs-hero > .cs-overlay{
  position:absolute !important;
  top:50px !important;
  bottom:50px !important;
  height:calc(100% - 100px) !important;
  left:15% !important;
  width:70% !important;
  right:auto !important;
}
.cs-hero > .cs-bgvideo{
  object-fit:cover !important;
  z-index:1 !important;
}
.cs-hero > .cs-overlay{
  z-index:2 !important;
  background:rgba(5,5,5,.18) !important;
}
.cs-hero-layout{
  position:relative !important;
  z-index:4 !important;
  width:100% !important;
  height:calc(100% - 100px) !important;
  min-height:590px !important;
  display:grid !important;
  grid-template-columns:15% 70% 15% !important;
  align-items:center !important;
  margin:50px 0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
.cs-hero-video-space{
  grid-column:2 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
}
.cs-hero-side{
  width:100% !important;
  height:auto !important;
  max-width:220px !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:18px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  text-align:center !important;
}
.cs-hero-left{grid-column:1 !important; grid-row:1 !important;}
.cs-hero-right{grid-column:3 !important; grid-row:1 !important;}
.cs-hero-side .cs-kicker{
  color:#f0d58a !important;
  font-size:12px !important;
  line-height:1.5 !important;
}
.cs-hero-side h1{
  color:#f4f4f4 !important;
  font-size:clamp(28px,2.4vw,40px) !important;
  line-height:1.15 !important;
  margin:0 !important;
}
.cs-hero-side .cs-en{
  color:#f4f4f4 !important;
  font-size:11px !important;
  letter-spacing:2px !important;
}
.cs-hero-side p{
  color:#f4f4f4 !important;
  font-size:14px !important;
  line-height:1.85 !important;
  margin:0 !important;
}
.cs-hero-side a{
  margin-top:8px !important;
  white-space:nowrap !important;
}
.cs-hero .cs-scroll{
  position:absolute !important;
  left:50% !important;
  bottom:18px !important;
  transform:translateX(-50%) !important;
  z-index:6 !important;
}

/* Mobile: the video uses the full width and BOTH side contents remain visible below it. */
@media(max-width:900px){
  .cs-hero{
    min-height:850px !important;
    padding:0 20px 35px !important;
    display:block !important;
  }
  .cs-hero > .cs-bgvideo,
  .cs-hero > .cs-overlay{
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:460px !important;
    bottom:auto !important;
  }
  .cs-hero-layout{
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding-top:485px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:28px !important;
  }
  .cs-hero-video-space{display:none !important;}
  .cs-hero-side{
    width:100% !important;
    max-width:520px !important;
    padding:0 10px !important;
    margin:0 auto !important;
  }
  .cs-hero-left,
  .cs-hero-right{
    display:flex !important;
    order:initial !important;
  }
  .cs-hero-left{order:1 !important;}
  .cs-hero-right{order:2 !important;}
  .cs-hero-side h1{font-size:34px !important;}
  .cs-hero .cs-scroll{display:none !important;}
}

/* v1.6.23 — side content placed INSIDE the video frame */
@media(min-width:901px){
  /* Ignore the old 15% side-grid positions and anchor both blocks
     directly inside the 70% video frame. */
  .cs-hero-layout{
    position:absolute !important;
    inset:50px 0 !important;
    width:100% !important;
    height:calc(100% - 100px) !important;
    min-height:0 !important;
    margin:0 !important;
    display:block !important;
    pointer-events:none !important;
  }

  .cs-hero-video-space{
    display:none !important;
  }

  .cs-hero-side{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:16% !important;
    max-width:230px !important;
    min-width:0 !important;
    padding:12px 8px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    z-index:5 !important;
    pointer-events:auto !important;
  }

  /* Video occupies 15% → 85%; these anchors are INSIDE that frame. */
  .cs-hero-left{
    left:17% !important;
    right:auto !important;
    grid-column:auto !important;
  }

  .cs-hero-right{
    right:17% !important;
    left:auto !important;
    grid-column:auto !important;
  }

  .cs-hero-side a,
  .cs-hero-side h1,
  .cs-hero-side p,
  .cs-hero-side span,
  .cs-hero-side .cs-en{
    position:relative !important;
    z-index:6 !important;
  }
}

@media(max-width:900px){
  /* Preserve the working mobile layout from v1.6.19. */
  .cs-hero-layout{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .cs-hero-side{
    position:static !important;
    transform:none !important;
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
  }
}

/* v1.6.24 — swap hero CTA positions, enlarge contact copy, unify button style */
@media(min-width:901px){
  .cs-hero-left{
    left:auto !important;
    right:17% !important;
  }
  .cs-hero-right{
    right:auto !important;
    left:17% !important;
  }
}

/* Make the explanatory text above "تواصل معنا" a little larger and clearer. */
.cs-hero-right p{
  font-size:16px !important;
  line-height:1.9 !important;
}

/* "استمع لأعمالنا" uses the same gold button treatment as "تواصل معنا". */
.cs-hero-left a.gold,
.cs-hero-right a.gold{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* v1.6.25 — restore gold treatment for Contact button */
.cs-hero .cs-hero-right a.gold,
.cs-hero .cs-hero-left a.gold{
  color:#0b0b0b !important;
  background:#d6ad52 !important;
  border:1px solid #d6ad52 !important;
  box-shadow:0 8px 24px rgba(214,173,82,.18) !important;
}
.cs-hero .cs-hero-right a.gold:hover,
.cs-hero .cs-hero-left a.gold:hover{
  color:#0b0b0b !important;
  background:#e4c477 !important;
  border-color:#e4c477 !important;
}

/* v1.6.26 — both hero buttons use the exact same solid-gold treatment */
.cs-hero .cs-hero-side a.gold,
.cs-hero .cs-hero-side a.gold:visited,
.cs-hero .cs-hero-side a.gold:hover,
.cs-hero .cs-hero-side a.gold:focus,
.cs-hero .cs-hero-side a.gold:active{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#0b0b0b !important;
  background:#d6ad52 !important;
  background-image:none !important;
  border:1px solid #d6ad52 !important;
  box-shadow:0 8px 24px rgba(214,173,82,.18) !important;
  text-shadow:none !important;
  opacity:1 !important;
}
.cs-hero .cs-hero-side a.gold span{
  color:#0b0b0b !important;
}

/* v1.6.28 — exact requested content/button arrangement */
@media(min-width:901px){
  .cs-hero-left{
    left:17% !important;
    right:auto !important;
    transform:translateY(-50%) !important;
  }
  .cs-hero-right{
    right:17% !important;
    left:auto !important;
    transform:translateY(-50%) !important;
  }
}

/* Both CTA buttons are solid gold and identical. */
.cs-hero .cs-hero-side a.gold,
.cs-hero .cs-hero-side a.gold:visited,
.cs-hero .cs-hero-side a.gold:hover,
.cs-hero .cs-hero-side a.gold:focus,
.cs-hero .cs-hero-side a.gold:active{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#0b0b0b !important;
  background:#d6ad52 !important;
  background-image:none !important;
  border:1px solid #d6ad52 !important;
  box-shadow:0 8px 24px rgba(214,173,82,.18) !important;
  text-shadow:none !important;
  opacity:1 !important;
}
.cs-hero .cs-hero-side a.gold span{
  color:#0b0b0b !important;
}

/* Slightly larger studio description. */
.cs-hero-right p{
  font-size:16px !important;
  line-height:1.9 !important;
}

/* v1.6.29 — studio description at 150% */
.cs-hero .cs-hero-right p{
  font-size:24px !important;
  line-height:1.9 !important;
}
@media(max-width:900px){
  .cs-hero .cs-hero-right p{
    font-size:21px !important;
    line-height:1.8 !important;
  }
}

/* v1.6.30 — contemporary Arabic typography for the studio description */
.cs-hero .cs-hero-right p{
  font-family:"Tajawal","IBM Plex Sans Arabic","Noto Sans Arabic",Arial,sans-serif !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}

/* v1.6.31 — radical typography change for the studio description */
500;600;700&display=swap');

.cs-hero .cs-hero-right p{
  font-family:"Changa",sans-serif !important;
  font-weight:500 !important;
  font-style:normal !important;
  letter-spacing:0 !important;
  word-spacing:2px !important;
  font-size:24px !important;
  line-height:1.85 !important;
}
@media(max-width:900px){
  .cs-hero .cs-hero-right p{
    font-family:"Changa",sans-serif !important;
    font-size:21px !important;
    line-height:1.8 !important;
  }
}

/* v1.6.32 — force a visibly different display font on the studio description */
700&display=swap');

html body .cs-hero .cs-hero-layout .cs-hero-right p{
  font-family:"Aref Ruqaa Ink",serif !important;
  font-weight:400 !important;
  font-style:normal !important;
  font-synthesis:none !important;
  letter-spacing:0 !important;
  word-spacing:1px !important;
  font-size:24px !important;
  line-height:1.85 !important;
}
@media(max-width:900px){
  html body .cs-hero .cs-hero-layout .cs-hero-right p{
    font-family:"Aref Ruqaa Ink",serif !important;
    font-size:21px !important;
    line-height:1.8 !important;
  }
}

/* v1.6.33 — local-first radical typography, no dependency on remote fonts */
html body .cs-hero .cs-hero-layout .cs-hero-right > p{
  font-family:"Traditional Arabic","Simplified Arabic","Arabic Typesetting",serif !important;
  font-weight:400 !important;
  font-style:normal !important;
  font-synthesis:none !important;
  text-rendering:geometricPrecision !important;
  letter-spacing:0 !important;
  word-spacing:1px !important;
  font-size:24px !important;
  line-height:1.75 !important;
}
@media(max-width:900px){
  html body .cs-hero .cs-hero-layout .cs-hero-right > p{
    font-family:"Traditional Arabic","Simplified Arabic","Arabic Typesetting",serif !important;
    font-size:21px !important;
    line-height:1.75 !important;
  }
}

/* v1.6.34 — global black/white typography, Hero excluded completely.
   Dark mode: white. Light mode: black. */
@media (min-width:0px){
  /* LIGHT MODE */
  html body.light-mode :not(.cs-hero) h1,
  html body.light-mode :not(.cs-hero) h2,
  html body.light-mode :not(.cs-hero) h3,
  html body.light-mode :not(.cs-hero) h4,
  html body.light-mode :not(.cs-hero) h5,
  html body.light-mode :not(.cs-hero) h6,
  html body.light-mode :not(.cs-hero) p,
  html body.light-mode :not(.cs-hero) span,
  html body.light-mode :not(.cs-hero) li,
  html body.light-mode :not(.cs-hero) label,
  html body.light-mode :not(.cs-hero) small{
    color:#000000 !important;
    -webkit-text-stroke:0 !important;
    text-shadow:none !important;
  }

  /* DARK MODE */
  html body.dark-mode :not(.cs-hero) h1,
  html body.dark-mode :not(.cs-hero) h2,
  html body.dark-mode :not(.cs-hero) h3,
  html body.dark-mode :not(.cs-hero) h4,
  html body.dark-mode :not(.cs-hero) h5,
  html body.dark-mode :not(.cs-hero) h6,
  html body.dark-mode :not(.cs-hero) p,
  html body.dark-mode :not(.cs-hero) span,
  html body.dark-mode :not(.cs-hero) li,
  html body.dark-mode :not(.cs-hero) label,
  html body.dark-mode :not(.cs-hero) small{
    color:#ffffff !important;
    -webkit-text-stroke:0 !important;
    text-shadow:none !important;
  }

  /* Explicitly leave the entire Hero untouched. */
  .cs-hero,
  .cs-hero *{
    color:initial;
    -webkit-text-stroke:initial !important;
    text-shadow:initial !important;
  }
}

/* v1.6.34.1 — correct theme detection for site text; Hero remains untouched. */
/* The site's switch uses the body theme classes. Put light rules AFTER all
   previous rules and explicitly reset dark-mode rules. */
html body.light-mode :not(.cs-hero) h1,
html body.light-mode :not(.cs-hero) h2,
html body.light-mode :not(.cs-hero) h3,
html body.light-mode :not(.cs-hero) h4,
html body.light-mode :not(.cs-hero) h5,
html body.light-mode :not(.cs-hero) h6,
html body.light-mode :not(.cs-hero) p,
html body.light-mode :not(.cs-hero) span,
html body.light-mode :not(.cs-hero) li,
html body.light-mode :not(.cs-hero) label,
html body.light-mode :not(.cs-hero) small{
  color:#000 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* Some implementations put the theme class on html instead of body. */
html.light-mode body :not(.cs-hero) h1,
html.light-mode body :not(.cs-hero) h2,
html.light-mode body :not(.cs-hero) h3,
html.light-mode body :not(.cs-hero) h4,
html.light-mode body :not(.cs-hero) h5,
html.light-mode body :not(.cs-hero) h6,
html.light-mode body :not(.cs-hero) p,
html.light-mode body :not(.cs-hero) span,
html.light-mode body :not(.cs-hero) li,
html.light-mode body :not(.cs-hero) label,
html.light-mode body :not(.cs-hero) small{
  color:#000 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* Dark mode only: white text outside Hero. */
html body.dark-mode :not(.cs-hero) h1,
html body.dark-mode :not(.cs-hero) h2,
html body.dark-mode :not(.cs-hero) h3,
html body.dark-mode :not(.cs-hero) h4,
html body.dark-mode :not(.cs-hero) h5,
html body.dark-mode :not(.cs-hero) h6,
html body.dark-mode :not(.cs-hero) p,
html body.dark-mode :not(.cs-hero) span,
html body.dark-mode :not(.cs-hero) li,
html body.dark-mode :not(.cs-hero) label,
html body.dark-mode :not(.cs-hero) small{
  color:#fff !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* Never affect the Hero. */
.cs-hero, .cs-hero *{
  -webkit-text-stroke:initial !important;
  text-shadow:initial !important;
}

/* v1.6.34.2 — make the rest of the site follow the SAME adaptive text
   behavior already used by the final "نلتقي في قلب التجربة" section.
   Hero is completely excluded. */

/* Light mode: use the same dark text treatment as the final section. */
html body.light-mode :not(.cs-hero) h1,
html body.light-mode :not(.cs-hero) h2,
html body.light-mode :not(.cs-hero) h3,
html body.light-mode :not(.cs-hero) h4,
html body.light-mode :not(.cs-hero) h5,
html body.light-mode :not(.cs-hero) h6,
html body.light-mode :not(.cs-hero) p,
html body.light-mode :not(.cs-hero) span,
html body.light-mode :not(.cs-hero) li,
html body.light-mode :not(.cs-hero) label,
html body.light-mode :not(.cs-hero) small,
html body.light-mode :not(.cs-hero) a{
  color:#111111 !important;
}

/* Dark mode: use the same light text treatment as the final section. */
html body.dark-mode :not(.cs-hero) h1,
html body.dark-mode :not(.cs-hero) h2,
html body.dark-mode :not(.cs-hero) h3,
html body.dark-mode :not(.cs-hero) h4,
html body.dark-mode :not(.cs-hero) h5,
html body.dark-mode :not(.cs-hero) h6,
html body.dark-mode :not(.cs-hero) p,
html body.dark-mode :not(.cs-hero) span,
html body.dark-mode :not(.cs-hero) li,
html body.dark-mode :not(.cs-hero) label,
html body.dark-mode :not(.cs-hero) small,
html body.dark-mode :not(.cs-hero) a{
  color:#F5F5F5 !important;
}

/* Keep the Hero EXACTLY as it is in the supplied base plugin. */
.cs-hero,
.cs-hero *{
  color:initial !important;
  -webkit-text-stroke:initial !important;
  text-shadow:initial !important;
}

/* Do not recolor gold CTA buttons. */
html body.light-mode :not(.cs-hero) a.gold,
html body.dark-mode :not(.cs-hero) a.gold{
  color:#0B0B0B !important;
  background:#D6AD52 !important;
  border-color:#D6AD52 !important;
}

/* v1.6.34.3 — EXACT theme mechanism used by the Location section.
   Uses html[data-theme] (the actual theme switcher), and excludes Hero. */

/* Main headings: same --text variable used by .cs-location-head h2 */
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) h1,
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) h2,
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) h3,
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) h4,
html[data-theme="light"] .cs-site main section:not(.cs-hero) h1,
html[data-theme="light"] .cs-site main section:not(.cs-hero) h2,
html[data-theme="light"] .cs-site main section:not(.cs-hero) h3,
html[data-theme="light"] .cs-site main section:not(.cs-hero) h4{
  color:var(--text) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* Normal descriptive text: follow the same adaptive palette as the Location section. */
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) p,
html[data-theme="light"] .cs-site main section:not(.cs-hero) p{
  color:var(--muted) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* Navigation / footer / other non-Hero site text follows --text too. */
html:not([data-theme="light"]) .cs-site header nav a,
html[data-theme="light"] .cs-site header nav a,
html:not([data-theme="light"]) .cs-site footer,
html[data-theme="light"] .cs-site footer,
html:not([data-theme="light"]) .cs-site footer span,
html[data-theme="light"] .cs-site footer span{
  color:var(--text) !important;
}

/* Keep intentional gold labels exactly like the Location section. */
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) .head>span,
html[data-theme="light"] .cs-site main section:not(.cs-hero) .head>span,
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) > div > span,
html[data-theme="light"] .cs-site main section:not(.cs-hero) > div > span{
  color:var(--gold) !important;
}

/* Hero is completely excluded from this entire change. */
.cs-hero,
.cs-hero *{
  color:revert !important;
  -webkit-text-stroke:revert !important;
  text-shadow:revert !important;
}

/* v1.6.34.4 — premium gold gradient for large headings in Dark Mode only.
   Hero is intentionally excluded. */
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) h1,
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) h2{
  background:linear-gradient(
    100deg,
    #FFF7D6 0%,
    #E8C66A 24%,
    #B8892F 50%,
    #F0D27A 74%,
    #FFF1B8 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:none !important;
}

/* Keep the light mode exactly as it is. */
html[data-theme="light"] .cs-site main section:not(.cs-hero) h1,
html[data-theme="light"] .cs-site main section:not(.cs-hero) h2{
  -webkit-text-fill-color:initial !important;
  color:var(--text) !important;
  background:none !important;
}

/* v1.6.34.5 — unified site typography using the exact font family
   used by the Hero description. */
html body,
html body button,
html body input,
html body textarea,
html body select,
html body a,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body p,
html body span,
html body li,
html body label,
html body small {
  font-family:"Traditional Arabic","Simplified Arabic","Arabic Typesetting",serif !important;
}

/* v1.6.34.6 — phone number in "ابدأ مشروعك معنا" follows the site's
   exact light/dark text palette. Hero remains untouched. */
html[data-theme="light"] .cs-site main section:not(.cs-hero) a[href^="tel:"],
html[data-theme="light"] .cs-site main section:not(.cs-hero) a[href^="tel:"] span{
  color:var(--text) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) a[href^="tel:"],
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) a[href^="tel:"] span{
  color:var(--text) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* Prevent generic link rules from overriding the phone number. */
html[data-theme="light"] .cs-site a[href^="tel:"],
html:not([data-theme="light"]) .cs-site a[href^="tel:"]{
  color:var(--text) !important;
}

/* v1.6.34.7 — phone number gets the same premium gold gradient in Dark Mode. */
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) a[href^="tel:"],
html:not([data-theme="light"]) .cs-site main section:not(.cs-hero) a[href^="tel:"] span{
  background:linear-gradient(
    100deg,
    #FFF7D6 0%,
    #E8C66A 24%,
    #B8892F 50%,
    #F0D27A 74%,
    #FFF1B8 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:none !important;
}

/* Light Mode stays exactly as established. */
html[data-theme="light"] .cs-site main section:not(.cs-hero) a[href^="tel:"],
html[data-theme="light"] .cs-site main section:not(.cs-hero) a[href^="tel:"] span{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
  color:var(--text) !important;
}

/* v1.6.34.8 — premium background for "ابدأ مشروعك معنا" */
.cs-contact{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(214,173,82,.18) 0%, rgba(214,173,82,0) 32%),
    radial-gradient(circle at 88% 82%, rgba(184,137,47,.14) 0%, rgba(184,137,47,0) 36%),
    linear-gradient(135deg,#10100E 0%,#1B1914 48%,#0A0A09 100%) !important;
  border:1px solid rgba(214,173,82,.28) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,247,214,.07),
    inset 0 -1px 0 rgba(0,0,0,.35) !important;
}

/* Subtle abstract sound-wave atmosphere behind the card content. */
.cs-contact::before{
  content:"" !important;
  position:absolute !important;
  inset:-35% -10% !important;
  z-index:-1 !important;
  pointer-events:none !important;
  opacity:.16 !important;
  background:
    repeating-radial-gradient(
      ellipse at 50% 100%,
      transparent 0 22px,
      rgba(214,173,82,.22) 23px 24px,
      transparent 25px 44px
    ) !important;
  transform:rotate(-7deg) scaleX(1.12) !important;
}

.cs-contact::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:radial-gradient(circle at 50% 42%,rgba(255,247,214,.055),transparent 56%) !important;
}

.cs-contact > *{
  position:relative !important;
  z-index:1 !important;
}

/* v1.6.34.8.5 — theme-aware wave background for the final CTA card.
   Dark mode keeps warm-gold waves; Light mode gets black waves on a light
   studio-neutral card so all typography remains readable. */
html[data-theme="light"] .cs-contact{
  background:
    radial-gradient(circle at 12% 18%, rgba(169,121,28,.10) 0%, rgba(169,121,28,0) 32%),
    radial-gradient(circle at 88% 82%, rgba(169,121,28,.07) 0%, rgba(169,121,28,0) 36%),
    linear-gradient(135deg,#fbf8f0 0%,#f1eadc 52%,#fffdf8 100%) !important;
  border-color:rgba(35,29,18,.16) !important;
  box-shadow:
    0 18px 50px rgba(35,29,18,.12),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(35,29,18,.06) !important;
}

html[data-theme="light"] .cs-contact::before{
  opacity:.12 !important;
  background:
    repeating-radial-gradient(
      ellipse at 50% 100%,
      transparent 0 22px,
      rgba(0,0,0,.72) 23px 24px,
      transparent 25px 44px
    ) !important;
}

html[data-theme="light"] .cs-contact::after{
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.32),transparent 56%) !important;
}

/* Dark mode: explicitly preserve the gold-wave treatment from v1.6.34.8. */
html:not([data-theme="light"]) .cs-contact::before{
  opacity:.16 !important;
  background:
    repeating-radial-gradient(
      ellipse at 50% 100%,
      transparent 0 22px,
      rgba(214,173,82,.22) 23px 24px,
      transparent 25px 44px
    ) !important;
}

/* v1.6.34.8.6 — full-page adaptive background.
   Background only: it never changes typography, text colors, buttons, or Hero. */

/* Make the site background transparent so the adaptive page layer is visible. */
html,
html body{
  background:transparent !important;
}

/* Full-page visual layer, behind all site content. */
html body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-10 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(214,173,82,.10) 0%, rgba(214,173,82,0) 30%),
    radial-gradient(circle at 88% 78%, rgba(184,137,47,.07) 0%, rgba(184,137,47,0) 34%),
    linear-gradient(135deg,#090908 0%,#12110F 45%,#070707 100%) !important;
}

/* Light Mode: bright enough to remain visibly textured, but neutral enough
   to preserve the existing black text and gold accents. */
html[data-theme="light"] body::before{
  background:
    radial-gradient(circle at 12% 18%, rgba(184,137,47,.11) 0%, rgba(184,137,47,0) 31%),
    radial-gradient(circle at 88% 78%, rgba(214,173,82,.09) 0%, rgba(214,173,82,0) 35%),
    linear-gradient(135deg,#F8F7F3 0%,#EEECE5 48%,#F7F5EF 100%) !important;
}

/* Dark Mode: retain the studio-black atmosphere with a subtle gold glow. */
html:not([data-theme="light"]) body::before{
  background:
    radial-gradient(circle at 12% 18%, rgba(214,173,82,.11) 0%, rgba(214,173,82,0) 30%),
    radial-gradient(circle at 88% 78%, rgba(184,137,47,.08) 0%, rgba(184,137,47,0) 35%),
    linear-gradient(135deg,#080807 0%,#14130F 46%,#070707 100%) !important;
}

/* Keep site sections transparent where they are intended to reveal the
   page background; do not alter the Hero or its internal colors. */
html body .cs-site{
  background:transparent !important;
}

/* Never introduce a new color rule for text. */

/* v1.6.34.8.7 — Hero follows Light/Dark Mode, while its text and buttons
   remain intentionally fixed. The desktop side atmosphere changes; the
   central video and its overlaid copy/buttons keep their existing treatment. */
@media (min-width:901px){
  html[data-theme="light"] .cs-hero{
    background:
      radial-gradient(circle at 8% 50%, rgba(184,137,47,.12), transparent 32%),
      radial-gradient(circle at 92% 50%, rgba(214,173,82,.10), transparent 32%),
      linear-gradient(135deg,#f5f1e8 0%,#ebe4d5 48%,#f8f5ed 100%) !important;
  }

  /* Light-mode side panels only: central 70% remains the video area. */
  html[data-theme="light"] .cs-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(90deg,
        rgba(248,245,237,.96) 0%,
        rgba(248,245,237,.90) 14.5%,
        rgba(248,245,237,0) 15%,
        rgba(248,245,237,0) 85%,
        rgba(248,245,237,.90) 85.5%,
        rgba(248,245,237,.96) 100%);
  }

  /* Keep the existing video visible and preserve the dark in-video region. */
  html[data-theme="light"] .cs-hero .cs-bgvideo{
    opacity:.34 !important;
  }
  html[data-theme="light"] .cs-hero > .cs-overlay{
    background:rgba(5,5,5,.18) !important;
  }

  /* Copy and CTAs stay exactly in their existing fixed colors. */
  html[data-theme="light"] .cs-hero .cs-hero-side .cs-kicker{
    color:#f0d58a !important;
  }
  html[data-theme="light"] .cs-hero .cs-hero-side h1,
  html[data-theme="light"] .cs-hero .cs-hero-side .cs-en,
  html[data-theme="light"] .cs-hero .cs-hero-side p{
    color:#f4f4f4 !important;
  }
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold,
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold:visited,
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold:hover,
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold:focus,
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold:active{
    color:#0b0b0b !important;
    background:#d6ad52 !important;
    border-color:#d6ad52 !important;
  }
}

/* Mobile: the lower Hero area also follows the page theme, while the
   video itself and its overlaid copy/buttons retain their fixed treatment. */
@media (max-width:900px){
  html[data-theme="light"] .cs-hero{
    background:
      radial-gradient(circle at 10% 70%, rgba(184,137,47,.11), transparent 34%),
      radial-gradient(circle at 90% 70%, rgba(214,173,82,.08), transparent 34%),
      linear-gradient(135deg,#f5f1e8 0%,#ebe4d5 52%,#f8f5ed 100%) !important;
  }
  html[data-theme="light"] .cs-hero .cs-hero-side .cs-kicker{
    color:#f0d58a !important;
  }
  html[data-theme="light"] .cs-hero .cs-hero-side h1,
  html[data-theme="light"] .cs-hero .cs-hero-side .cs-en,
  html[data-theme="light"] .cs-hero .cs-hero-side p{
    color:#f4f4f4 !important;
  }
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold,
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold:visited,
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold:hover,
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold:focus,
  html[data-theme="light"] .cs-hero .cs-hero-side a.gold:active{
    color:#0b0b0b !important;
    background:#d6ad52 !important;
    border-color:#d6ad52 !important;
  }
}

/* v1.6.34.8.8 — Hero Light Mode uses the EXACT same page background palette.
   Video, Hero copy, and CTAs remain unchanged. */
@media (min-width:901px){
  html[data-theme="light"] .cs-hero{
    background:
      radial-gradient(circle at 12% 18%, rgba(184,137,47,.11) 0%, rgba(184,137,47,0) 31%),
      radial-gradient(circle at 88% 78%, rgba(214,173,82,.09) 0%, rgba(214,173,82,0) 35%),
      linear-gradient(135deg,#F8F7F3 0%,#EEECE5 48%,#F7F5EF 100%) !important;
  }

  /* Remove the previous Hero-only light overlay so its side areas
     visually match the page instead of becoming a different shade. */
  html[data-theme="light"] .cs-hero::before{
    background:transparent !important;
  }
}

@media (max-width:900px){
  html[data-theme="light"] .cs-hero{
    background:
      radial-gradient(circle at 12% 18%, rgba(184,137,47,.11) 0%, rgba(184,137,47,0) 31%),
      radial-gradient(circle at 88% 78%, rgba(214,173,82,.09) 0%, rgba(214,173,82,0) 35%),
      linear-gradient(135deg,#F8F7F3 0%,#EEECE5 48%,#F7F5EF 100%) !important;
  }
}

/* v1.6.34.8.9 — Hero background MUST be identical to the page background
   in both themes. No independent Hero color/gradient. */
html body .cs-site .cs-hero{
  background:transparent !important;
}

/* The page-wide body layer is the sole background source. */
html[data-theme="light"] body::before{
  background:
    radial-gradient(circle at 12% 18%, rgba(184,137,47,.11) 0%, rgba(184,137,47,0) 31%),
    radial-gradient(circle at 88% 78%, rgba(214,173,82,.09) 0%, rgba(214,173,82,0) 35%),
    linear-gradient(135deg,#F8F7F3 0%,#EEECE5 48%,#F7F5EF 100%) !important;
}

html:not([data-theme="light"]) body::before{
  background:
    radial-gradient(circle at 12% 18%, rgba(214,173,82,.11) 0%, rgba(214,173,82,0) 30%),
    radial-gradient(circle at 88% 78%, rgba(184,137,47,.08) 0%, rgba(184,137,47,0) 35%),
    linear-gradient(135deg,#080807 0%,#14130F 46%,#070707 100%) !important;
}

/* Remove every previous Hero-only background overlay in both themes.
   Keep the video layer and its internal black area intact. */
html[data-theme="light"] .cs-hero::before,
html:not([data-theme="light"]) .cs-hero::before{
  background:transparent !important;
}

/* Hero overlay remains only over the video itself; it does not tint the
   surrounding Hero/page background. */

/* v1.6.34.8.10 — remove the remaining warm/yellow tint from Hero.
   Hero uses only the page background underneath it. */
html body .cs-site .cs-hero,
html body .cs-site .cs-hero::before,
html body .cs-site .cs-hero::after{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Do not tint the Hero's surrounding area with any overlay. */
html[data-theme="light"] body::before,
html:not([data-theme="light"]) body::before{
  background-image:
    linear-gradient(135deg,#F8F7F3 0%,#EEECE5 48%,#F7F5EF 100%) !important;
}

/* Dark Mode uses the exact same dark page palette, without gold radial
   overlays that were making the Hero look warmer than the rest. */
html:not([data-theme="light"]) body::before{
  background-image:
    linear-gradient(135deg,#080807 0%,#14130F 46%,#070707 100%) !important;
}

/* v1.6.34.8.11 — keep Hero video at full Dark-Mode clarity in Light Mode.
   Only the video image is corrected; Hero text/buttons remain untouched. */
html[data-theme="light"] .cs-hero video{
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}

/* Prevent any Hero overlay from washing out the video in Light Mode.
   The black areas inside the video remain part of the video itself. */
html[data-theme="light"] .cs-hero .hero-video-wrap::before,
html[data-theme="light"] .cs-hero .hero-video-wrap::after,
html[data-theme="light"] .cs-hero .hero-media::before,
html[data-theme="light"] .cs-hero .hero-media::after{
  opacity:0 !important;
  background:transparent !important;
}

/* v1.6.34.8.12 — actual Hero video element is .cs-bgvideo.
   The previous fix targeted <video>, but this element has its own
   opacity:.34 !important rule. In Light Mode, remove that washout and
   remove the Hero overlay so the video renders at its native clarity. */
html[data-theme="light"] .cs-hero .cs-bgvideo{
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}

html[data-theme="light"] .cs-hero > .cs-overlay{
  opacity:1 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Also neutralize the actual Hero light-sweep pseudo layer if present. */
html[data-theme="light"] .cs-hero::after{
  background:transparent !important;
  background-image:none !important;
  animation:none !important;
}

/* v1.6.34.8.13 — readability pass for small supporting text.
   Hero typography, headings, buttons, navigation and controls are untouched. */
.cs-site main section:not(.cs-hero) p,
.cs-site main section:not(.cs-hero) li,
.cs-site main section:not(.cs-hero) .description,
.cs-site main section:not(.cs-hero) .subtitle,
.cs-site main section:not(.cs-hero) .supporting-text,
.cs-site main section:not(.cs-hero) .small-text{
  font-size:1.5em !important;
}

/* Prevent nested elements from being multiplied repeatedly. */
.cs-site main section:not(.cs-hero) p *,
.cs-site main section:not(.cs-hero) li *,
.cs-site main section:not(.cs-hero) .description *,
.cs-site main section:not(.cs-hero) .subtitle *,
.cs-site main section:not(.cs-hero) .supporting-text *,
.cs-site main section:not(.cs-hero) .small-text *{
  font-size:inherit;
}

/* v1.6.34.8.14 — MOBILE HERO TEXT ONLY.
   Desktop Hero text/buttons remain completely unchanged.
   Mobile Hero text follows the site-wide theme: black in Light Mode,
   premium gold gradient in Dark Mode. */
@media (max-width:900px){
  html[data-theme="light"] .cs-hero .hero-copy,
  html[data-theme="light"] .cs-hero .hero-copy *,
  html[data-theme="light"] .cs-hero .hero-side,
  html[data-theme="light"] .cs-hero .hero-side *,
  html[data-theme="light"] .cs-hero .hero-content,
  html[data-theme="light"] .cs-hero .hero-content *{
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    text-shadow:none !important;
  }

  html:not([data-theme="light"]) .cs-hero .hero-copy,
  html:not([data-theme="light"]) .cs-hero .hero-copy *,
  html:not([data-theme="light"]) .cs-hero .hero-side,
  html:not([data-theme="light"]) .cs-hero .hero-side *,
  html:not([data-theme="light"]) .cs-hero .hero-content,
  html:not([data-theme="light"]) .cs-hero .hero-content *{
    background:linear-gradient(100deg,#FFF7D6 0%,#E8C66A 25%,#B8892F 50%,#F0D27A 75%,#FFF1B8 100%) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    text-shadow:none !important;
  }

  /* Explicitly exclude the two Hero CTAs from this text-color change. */
  html[data-theme="light"] .cs-hero a,
  html:not([data-theme="light"]) .cs-hero a{
    /* CTA rules below restore their existing appearance. */
  }
}

@media (max-width:900px){
  .cs-hero .hero-copy a,
  .cs-hero .hero-side a,
  .cs-hero .hero-content a,
  .cs-hero .hero-copy button,
  .cs-hero .hero-side button,
  .cs-hero .hero-content button{
    -webkit-text-fill-color:initial !important;
    background-clip:initial !important;
    -webkit-background-clip:initial !important;
    text-shadow:none !important;
  }
}

/* v1.6.34.8.15 — FIX: actual mobile Hero selectors.
   Mobile ONLY. Desktop Hero is untouched.
   Text: black in Light Mode, gold gradient in Dark Mode.
   CTAs remain fixed in their existing design. */
@media (max-width:900px){
  html[data-theme="light"] .cs-hero .cs-hero-side .cs-kicker,
  html[data-theme="light"] .cs-hero .cs-hero-side h1,
  html[data-theme="light"] .cs-hero .cs-hero-side .cs-en,
  html[data-theme="light"] .cs-hero .cs-hero-side p{
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    background:none !important;
    -webkit-background-clip:initial !important;
    background-clip:initial !important;
    text-shadow:none !important;
  }

  html:not([data-theme="light"]) .cs-hero .cs-hero-side .cs-kicker,
  html:not([data-theme="light"]) .cs-hero .cs-hero-side h1,
  html:not([data-theme="light"]) .cs-hero .cs-hero-side .cs-en,
  html:not([data-theme="light"]) .cs-hero .cs-hero-side p{
    background:linear-gradient(
      100deg,
      #FFF7D6 0%,
      #E8C66A 24%,
      #B8892F 50%,
      #F0D27A 74%,
      #FFF1B8 100%
    ) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    text-shadow:none !important;
  }

  /* Keep Hero buttons exactly as they are. */
  .cs-hero .cs-hero-side a.gold,
  .cs-hero .cs-hero-side a.gold *,
  .cs-hero .cs-hero-side a:not(.gold),
  .cs-hero .cs-hero-side a:not(.gold) *{
    -webkit-text-fill-color:initial !important;
    background-clip:initial !important;
    -webkit-background-clip:initial !important;
  }
}

/* v1.6.34.8.17 — cinematic Hero framing.
   Desktop only: narrow the video frame horizontally; keep the existing
   side content positions/layout and preserve mobile unchanged. */
@media (min-width:901px){
  .cs-hero .cs-video-wrap,
  .cs-hero .cs-video,
  .cs-hero .cs-media,
  .cs-hero .hero-video-wrap{
    max-width:72% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* v1.6.34.8.18 — Hero video contrast in Dark Mode.
   Keep the cinematic video at the same clarity/contrast as Light Mode.
   Text and CTA styling are untouched. */
html:not([data-theme="light"]) .cs-hero .cs-bgvideo{
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}

/* Main header section titles: follow the site-wide Light/Dark text treatment.
   Light = black, Dark = premium gold gradient. */
html[data-theme="light"] .cs-header .cs-nav a,
html[data-theme="light"] .cs-header .cs-nav .menu-item > a,
html[data-theme="light"] header .cs-nav a{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  background:none !important;
  text-shadow:none !important;
}

html:not([data-theme="light"]) .cs-header .cs-nav a,
html:not([data-theme="light"]) .cs-header .cs-nav .menu-item > a,
html:not([data-theme="light"]) header .cs-nav a{
  background:linear-gradient(100deg,#FFF7D6 0%,#E8C66A 25%,#B8892F 50%,#F0D27A 75%,#FFF1B8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:none !important;
}

/* v1.6.34.8.19 — Header section titles only.
   Increase menu/title text to 150%. Keep the header's own black color
   unchanged in both Light and Dark modes. */
header .cs-nav a,
header .cs-nav .menu-item > a,
.cs-header .cs-nav a,
.cs-header .cs-nav .menu-item > a{
  font-size:150% !important;
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  text-shadow:none !important;
}

/* v1.6.34.8.20 — Header navigation: white and desktop-only 150%.
   Header background is black in both themes, so navigation text stays white
   regardless of Light/Dark mode. Mobile keeps its original size. */
@media (min-width:901px){
  .cs-header nav a,
  .cs-header .nav-menu a,
  .capital-studio-header nav a,
  .capital-studio-premium-header nav a,
  .cs-premium-header nav a{
    font-size:150% !important;
  }
}

.cs-header nav a,
.cs-header .nav-menu a,
.capital-studio-header nav a,
.capital-studio-premium-header nav a,
.cs-premium-header nav a{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  text-shadow:none !important;
}

/* v1.6.34.8.21 — Arabic / English switcher */
.cs-language-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:72px;height:42px;padding:0 13px;
  border:1px solid rgba(214,163,59,.55);border-radius:999px;
  background:rgba(0,0,0,.32);color:#fff !important;
  -webkit-text-fill-color:#fff !important;font:inherit;
  font-size:13px;font-weight:800;letter-spacing:.2px;
  cursor:pointer;transition:.25s ease;
}
.cs-language-toggle:hover{transform:translateY(-1px);border-color:#d7a43a;box-shadow:0 7px 20px rgba(214,163,59,.16)}
html[data-theme="light"] .cs-language-toggle{background:rgba(0,0,0,.28);color:#fff !important;-webkit-text-fill-color:#fff !important}
@media(max-width:600px){.cs-language-toggle{min-width:62px;height:38px;padding:0 10px;font-size:12px}}
html[dir="ltr"] .cs-site .cs-header nav,
html[dir="ltr"] .cs-site .cs-header-actions{direction:ltr}
html[dir="ltr"] .cs-site .cs-location-card{direction:ltr;text-align:center}

/* v1.6.34.8.22 — Keep the language switcher in the exact same visual slot
   when switching RTL <-> LTR. The header itself remains unchanged. */
.cs-header-actions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.cs-header-actions .cs-language-toggle{
  order:1 !important;
  flex:0 0 auto !important;
}
.cs-header-actions .cs-theme-toggle{
  order:2 !important;
  flex:0 0 auto !important;
}
.cs-header-actions .cs-header-btn{
  order:3 !important;
  flex:0 0 auto !important;
}
html[dir="rtl"] .cs-header-actions,
html[dir="ltr"] .cs-header-actions{
  direction:ltr !important;
}

/* v1.6.34.8.23 — Hero kicker matches the color of the title below it */
.cs-hero .cs-hero-left .cs-kicker{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}

/* v1.6.34.8.24 — Hero kicker fixed to white */
.cs-hero .cs-hero-left .cs-kicker{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  text-shadow:none !important;
}

/* v1.6.34.8.25 — compact language label on mobile */
@media(max-width:600px){
  .cs-language-toggle{
    min-width:44px !important;
    width:44px !important;
    padding:0 !important;
    font-size:12px !important;
  }
}

/* v1.6.34.8.26 — mobile header spacing */
@media (max-width:600px){
  .cs-header .cs-nav a,
  .cs-header nav a,
  .cs-header .nav-menu a{
    font-size:12px !important;
    white-space:nowrap !important;
  }

  .cs-header-actions{
    flex:0 0 auto !important;
    gap:6px !important;
    white-space:nowrap !important;
  }

  .cs-theme-toggle{
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    padding:0 !important;
  }

  .cs-language-toggle{
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    height:34px !important;
    padding:0 !important;
    font-size:11px !important;
  }
}

/* v1.6.34.8.27 — preserve the original mobile menu wrapping.
   Do not force the navigation labels onto one line; reserve space for the
   independent language/theme controls instead. */
@media (max-width:600px){
  .cs-header .cs-nav a,
  .cs-header nav a,
  .cs-header .nav-menu a{
    font-size:10px !important;
    white-space:normal !important;
    line-height:1.15 !important;
  }

  .cs-header nav,
  .cs-header .cs-nav{
    max-width:calc(100% - 92px) !important;
  }

  .cs-header-actions{
    flex:0 0 auto !important;
    width:auto !important;
  }
}

/* v1.6.34.8.28 — English mobile Home spacing only */
@media (max-width:600px){
  html[lang="en"] .cs-header nav a:first-child,
  html[lang="en"] .cs-header .cs-nav a:first-child,
  html[lang="en"] .cs-header .nav-menu a:first-child{
    transform:translateX(6px) !important;
  }
}

/* v1.6.34.8.29 — subtle interactive instrument affordance */
@media (hover:hover){
  [data-csa-note]{transition:filter .18s ease;}
}






/* v1.6.34.8.49 — Hero video framing rebuilt from the actual Hero geometry.
   IMPORTANT: the Hero columns/layout stay unchanged on desktop. The video
   keeps its 70% central stage, but the 848x480 source is fitted INSIDE that
   stage without cropping. On mobile, the video stage follows the source
   aspect ratio so it cannot push the copy over/under the video. */

/* Desktop/tablet: preserve the existing 15% | 70% | 15% Hero geometry. */
@media (min-width: 901px) {
  .cs-hero > .cs-bgvideo {
    top: 50px !important;
    bottom: 50px !important;
    left: 15% !important;
    width: 70% !important;
    height: calc(100% - 100px) !important;
    right: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
    transform: none !important;
  }
  .cs-hero > .cs-overlay {
    top: 50px !important;
    bottom: 50px !important;
    left: 15% !important;
    width: 70% !important;
    height: calc(100% - 100px) !important;
    right: auto !important;
  }
}

/* Mobile: the source itself determines the video height.
   This keeps the full 16:9 frame and places the copy immediately below it. */
@media (max-width: 900px) {
  .cs-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 20px 35px !important;
  }

  .cs-hero > .cs-bgvideo,
  .cs-hero > .cs-overlay {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 848 / 480 !important;
  }

  .cs-hero > .cs-bgvideo {
    object-fit: contain !important;
    object-position: center center !important;
  }

  .cs-hero-layout {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: calc((100vw - 40px) * 480 / 848 + 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .cs-hero-video-space {
    display: none !important;
  }

  .cs-hero-left,
  .cs-hero-right {
    width: 100% !important;
    max-width: 520px !important;
    padding: 0 10px !important;
    margin: 0 auto !important;
  }
}

/* Hero kicker: 150% */
.cs-hero-kicker-150{font-size:150% !important;}


/* Hero kicker: desktop 150%, mobile original size */
.cs-hero-left .cs-hero-kicker-150{
  font-size:150% !important;
}
@media (max-width:900px){
  .cs-hero-left .cs-hero-kicker-150{
    font-size:16px !important;
  }
}