@import url("https://cdn.jsdelivr.net/npm/@dawod/thmanyah-font-web/index.css");
/*--------------------------------------------------------------
  Aya Elfeky — custom layer
  Loaded on every page, after style.css, in both LTR and RTL.
  0. Thmanyah typeface
  1. Floating WhatsApp button
  2. Form states (error / status note)
  3. Quote button inside price cards
  4. Language switcher
  5. Avatar illustrations
  6. Skill / tool chips
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  0. Thmanyah typeface
  Thmanyah Sans covers Arabic AND Latin in one family, so it replaces
  Unbounded site-wide and both language versions stay visually identical.
  Weights available: 300 / 400 / 500 / 700 / 900.
  NOTE ON LICENCE: Thmanyah is distributed for personal use and its terms
  ask that you do not self-host or re-serve the font files. This loads them
  from the community jsDelivr package rather than from your own server.
  For commercial licensing, contact Ask@thmanyah.com.
--------------------------------------------------------------*/
body,
html,
h1, h2, h3, h4, h5, h6,
p, li, a, span, div,
button, input, textarea, select, label,
blockquote, figcaption, .odometer {
  font-family: "Thmanyah Sans", "Unbounded", system-ui, sans-serif;
}

/* Unbounded is a wide display face; Thmanyah sits narrower and taller.
   Nudge the display sizes so the original line breaks still hold. */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}

.cs_font_90,
.cs_font_80,
.cs_font_70 {
  line-height: 1.12em;
}

.cs_font_50,
.cs_font_40 {
  line-height: 1.25em;
}

/* The odometer plugin measures digit height, so pin it to a lining figure. */
.odometer {
  font-variant-numeric: lining-nums tabular-nums;
}

/*--------------------------------------------------------------
  1. Floating WhatsApp button
--------------------------------------------------------------*/
.cs_wa_float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs_wa_float:hover {
  color: #fff;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 16px 40px rgba(37, 211, 102, 0.55);
}

.cs_wa_float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: cs_wa_pulse 2.4s ease-out infinite;
}

@keyframes cs_wa_pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs_wa_float::after {
    animation: none;
  }
}

@media (max-width: 575px) {
  .cs_wa_float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .cs_wa_float svg {
    width: 26px;
    height: 26px;
  }
}

/*--------------------------------------------------------------
  2. Form states
--------------------------------------------------------------*/
.cs_field_error {
  border-color: #e23d5c !important;
  box-shadow: 0 0 0 2px rgba(226, 61, 92, 0.14);
}

/* The template styles inputs and textareas but never had a <select>.
   Match the same underline treatment and supply our own caret. */
.cs_contact_form.cs_style_1 select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23202020' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 8px;
  cursor: pointer;
}

[dir="rtl"] .cs_contact_form.cs_style_1 select.form-control {
  padding-right: 0;
  padding-left: 34px;
  background-position: left 8px center;
}

.cs_contact_form.cs_style_1 select.form-control option {
  color: #202020;
  background-color: #fffcfc;
}

.cs_form_note {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.6em;
  color: #5533d8;
}

.cs_newsletter .cs_form_note {
  color: #fffcfc;
  opacity: 0.85;
}

/* WhatsApp-flavoured submit button */
.cs_btn.cs_wa_btn {
  background-color: #25d366;
  border-color: #25d366;
  color: #fffcfc;
}

.cs_btn.cs_wa_btn:hover {
  background-color: #1eb959;
  border-color: #1eb959;
  color: #fffcfc;
}

/*--------------------------------------------------------------
  3. Pricing "Get a Quote" button
  Was a big white ellipse floating mid-card (the template's old price
  bubble). Now a normal pill pinned to the card foot. Cards flex so
  every button bottom-aligns across the row regardless of list length.
  White fill stays readable both at rest (pink/blue card) and on card
  hover (purple fill).
--------------------------------------------------------------*/
.cs_price.cs_style_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cs_price.cs_style_1 .cs_price_top {
  padding: 40px 40px 4px;
}
.cs_price.cs_style_1 .cs_price_list {
  flex: 1 1 auto;
  padding: 0 40px;
}
.cs_price.cs_style_1 .cs_price_cta {
  display: block;
  margin: 28px 40px 40px;
  padding: 15px 28px;
  border-radius: 50px;
  background-color: #fffcfc;
  color: #18181b;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 18px rgba(20, 16, 40, 0.12);
  transition: background-color 0.3s ease, color 0.3s ease,
    transform 0.3s ease;
}
.cs_price.cs_style_1 .cs_price_cta:hover {
  background-color: #18181b;
  color: #fffcfc;
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
  4. Language switcher
--------------------------------------------------------------*/
.cs_lang_switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 16px;
  padding: 12px 20px;
  border: 1px solid rgba(32, 32, 32, 0.16);
  border-radius: 50px;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  color: #202020;
  background-color: rgba(85, 51, 216, 0.05);
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, transform 0.3s ease;
}

.cs_lang_switch:hover {
  background-color: #5533d8;
  border-color: #5533d8;
  color: #fffcfc;
  transform: translateY(-2px);
}

.cs_lang_switch svg {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.8;
}
.cs_lang_switch:hover svg { opacity: 1; }

.cs_footer .cs_lang_switch {
  margin-inline-start: 0;
  border-color: rgba(255, 252, 252, 0.35);
  color: #fffcfc;
}

@media (max-width: 991px) {
  .cs_lang_switch {
    margin-inline-start: 0;
    margin-inline-end: 60px;
  }
}

/*--------------------------------------------------------------
  5. Avatar illustrations
--------------------------------------------------------------*/
.cs_avatar_img {
  display: block;
  width: 100%;
  height: auto;
}

/* The hero illustration is an SVG with its own padding — keep it
   from overflowing the rounded imagebox frame. */
.cs_imagebox .cs_avatar_img {
  object-fit: contain;
}

.cs_avatar_round {
  border-radius: 20px;
  overflow: hidden;
  background-color: #f7f2ff;
}

/*--------------------------------------------------------------
  6. Skill / tool chips
--------------------------------------------------------------*/
.cs_chip_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs_chip_list li {
  padding: 8px 20px;
  border: 1px solid rgba(32, 32, 32, 0.18);
  border-radius: 50px;
  font-size: 16px;
  line-height: 1.4em;
  color: #202020;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

.cs_chip_list li:hover {
  background-color: #5533d8;
  border-color: #5533d8;
  color: #fffcfc;
}

.cs_focus_bg .cs_chip_list li {
  border-color: rgba(255, 252, 252, 0.3);
  color: #fffcfc;
}

.cs_focus_bg .cs_chip_list li:hover {
  background-color: #fa7bd4;
  border-color: #fa7bd4;
}

/*--------------------------------------------------------------
  Accessibility helper
--------------------------------------------------------------*/
.cs_visually_hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*--------------------------------------------------------------
  7. LAYOUT REPAIR LAYER
  The template was built around a tall cut-out portrait PNG in the hero and
  a set of hard-coded paddings that reserved space for it. Aya's artwork is a
  different shape, so those reservations became dead space. This section
  re-establishes a real vertical rhythm and contains the wide sections.
--------------------------------------------------------------*/

/*  7.1  Hero — kill the 590px dead zone
    The template already ships a sane, in-flow version of this layout at
    <1199px. We promote that behaviour to every breakpoint instead of
    reserving space for an absolutely-positioned illustration.            */
.cs_hero.cs_style_1 {
  min-height: 0;
  padding-top: 130px;
  padding-bottom: 0;
}

.cs_hero.cs_style_1 .cs_imagebox,
.cs_hero.cs_style_1 .cs_hero_bottom {
  position: relative;
  bottom: auto;
}

.cs_hero.cs_style_1 .cs_imagebox {
  left: auto;
  right: auto;
  -webkit-transform: none;
  transform: none;
  margin: 8px auto 0;
}

[dir="rtl"] .cs_hero.cs_style_1 .cs_imagebox {
  left: auto;
  right: auto;
  -webkit-transform: none;
  transform: none;
}

.cs_imagebox.cs_style_1 {
  max-width: 460px;
  max-height: none;
}

@media (max-width: 767px) {
  .cs_imagebox.cs_style_1 {
    max-width: 320px;
  }
  .cs_hero.cs_style_1 {
    padding-top: 110px;
  }
}

/*  The hero copy was one long centre-set line. Give it a measure.  */
.cs_hero.cs_style_1 .cs_hero_title {
  margin-bottom: 22px;
}

.cs_hero.cs_style_1 .cs_hero_text {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 36px;
  font-size: 20px;
  line-height: 1.65em;
  text-transform: none;
}

/*  7.2  Hero add-ons (eyebrow, CTA row, trust strip)  */
.cs_eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 8px 18px;
  border: 1px solid rgba(85, 51, 216, 0.22);
  border-radius: 50px;
  background-color: rgba(85, 51, 216, 0.06);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: 0.02em;
  color: #5533d8;
}

.cs_eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #25d366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22);
}

.cs_hero_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 44px;
}

/*  Left/start-aligned variant for the two-column heroes (v2, v3).  */
.cs_hero_actions.cs_start {
  justify-content: flex-start;
  margin-top: 8px;
}

.cs_trust_strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 30px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 760px;
}

.cs_trust_strip li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.4em;
  color: rgba(32, 32, 32, 0.62);
}

.cs_trust_strip li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fa7bd4;
}

/*  Ghost / secondary pill — pairs with the solid .cs_btn.cs_style_1.
    Same footprint, outlined, so the hero has a clear primary + secondary. */
.cs_btn_ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 40px;
  border: 1px solid rgba(32, 32, 32, 0.22);
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2em;
  color: #202020;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, transform 0.3s ease;
}
.cs_btn_ghost:hover {
  background-color: #202020;
  border-color: #202020;
  color: #fffcfc;
  transform: translateY(-2px);
}
.cs_focus_bg .cs_btn_ghost {
  border-color: rgba(255, 252, 252, 0.4);
  color: #fffcfc;
}
.cs_focus_bg .cs_btn_ghost:hover {
  background-color: #fffcfc;
  border-color: #fffcfc;
  color: #5533d8;
}

/*  7.3  Section rhythm
    The template's spacer divs jump between 50px and 170px with no system.
    Clamp them to a 4-step scale so sections breathe consistently.        */
/*  style.css defines .cs_height_N only above 992px and .cs_height_lg_N only
    below it, so these overrides must carry the same scope — otherwise they
    leak across the breakpoint and fight the template's mobile spacing.    */
@media screen and (min-width: 992px) {
  .cs_height_150, .cs_height_170 { height: 110px; }
  .cs_height_130, .cs_height_135 { height: 96px; }
  .cs_height_100, .cs_height_110 { height: 80px; }
  .cs_height_85,  .cs_height_90  { height: 68px; }
}

@media screen and (max-width: 991px) {
  .cs_height_lg_150, .cs_height_lg_170 { height: 72px; }
  .cs_height_lg_130, .cs_height_lg_135 { height: 64px; }
  .cs_height_lg_100, .cs_height_lg_110 { height: 56px; }
  .cs_height_lg_85,  .cs_height_lg_90  { height: 48px; }
}

/*  7.4  Containment
    Several sections ran edge-to-edge because the template relied on
    container-fluid. Give every major block the same measured gutter.     */
.cs_section_head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: center;
}

.cs_section_head .cs_section_subtitle {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 19px;
  line-height: 1.65em;
  color: rgba(32, 32, 32, 0.66);
}

.cs_focus_bg .cs_section_head .cs_section_subtitle {
  color: rgba(255, 252, 252, 0.75);
}

/*  Long-form paragraphs get a readable measure instead of full-bleed.  */
.cs_measure { max-width: 68ch; }
.cs_measure_center { max-width: 68ch; margin-inline: auto; }

/*  7.5  Platform / tool logos were rendering tiny
    Each logo SVG is drawn on a 240x56 canvas — a ~26px mark plus a wordmark,
    so it is ~4.3x wider than it is tall. Height is therefore the only useful
    size knob: `width: auto` lets the lockup keep that ratio, and the box has
    to grow with it or the art overflows its own row.                      */
.cs_brand.cs_style_1 {
  height: 150px;
  min-width: 340px;
  padding: 16px 28px;
}

.cs_brand.cs_style_1 img {
  scale: 1;
  width: auto;
  max-width: 100%;
  height: 72px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cs_brand.cs_style_1:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 1199px) {
  .cs_brand.cs_style_1 { height: 122px; min-width: 280px; }
  .cs_brand.cs_style_1 img { height: 58px; }
}

@media (max-width: 767px) {
  .cs_brand.cs_style_1 { height: 96px; min-width: 210px; padding: 12px 18px; }
  .cs_brand.cs_style_1 img { height: 44px; }
}

/*  7.6  Project / blog cards — the artwork is the point, so let it fill  */
.cs_portfolio_thumbnail img,
.cs_blog_thumbnail img,
.cs_service_thumbnail img,
.cs_gallery_thumbnail img,
.cs_award_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.cs_portfolio.cs_style_3 .cs_portfolio_thumbnail,
.cs_blog.cs_style_1 .cs_blog_thumbnail {
  overflow: hidden;
  border-radius: 18px;
}

/*  7.7  Focus states — the template removed them entirely  */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #5533d8;
  outline-offset: 3px;
  border-radius: 4px;
}

.cs_focus_bg a:focus-visible,
.cs_focus_bg button:focus-visible {
  outline-color: #fffcfc;
}

/*  7.8  Everything clickable should say so  */
a, button, .cs_btn, [data-wa-link], [data-wa-package], .cs_isotop_filter li {
  cursor: pointer;
}

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

/*--------------------------------------------------------------
  8. UNIFIED IMAGE / CARD SYSTEM
  The template let every card take its image's raw proportions, so
  grids of mixed-ratio artwork (Aya's work spans 0.89–1.6) rendered
  ragged. This section pins each media context to ONE ratio and crops
  with object-fit, so the work reads as a deliberate grid — the single
  biggest lever for "organised".

  Ratios are chosen to match the source art and minimise crop:
    • portrait 4:5  — UI mockups, brand boards, gallery, blog covers
                      (sources cluster near 0.9, so the side-crop is ~10%)
    • wide 3:2      — award / certificate strip (sources ~1.44)
  object-position:top keeps the hero / nav of a website mockup in frame
  when the crop trims height.

  DELIBERATELY NOT TOUCHED:
    • .cs_project_slider_1 (home "selected work") — a coverflow carousel
      whose neighbours peek via overflow:initial and whose 4 images are
      already the same ratio. Cropping/overflow would clip the peek.
    • .cs_service .cs_service_thumbnail — a parallax mouse-follow popup,
      not an in-flow tile.
--------------------------------------------------------------*/
:root {
  --cs-tile-portrait: 4 / 5;
  --cs-tile-wide: 3 / 2;
  --cs-tile-radius: 18px;          /* matches the §7.6 card radius */
  --cs-tile-placeholder: #f1ecfb;  /* neutral fill shown while loading */
}

/*  8.1  Portrait tiles — project grid, gallery, blog covers  */
.cs_portfolio.cs_style_3 .cs_portfolio_thumbnail,
.cs_gallery.cs_style_1,
.cs_blog_thumbnail {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--cs-tile-radius);
  aspect-ratio: var(--cs-tile-portrait);
  background-color: var(--cs-tile-placeholder);
}

.cs_portfolio.cs_style_3 .cs_portfolio_thumbnail img,
.cs_gallery.cs_style_1 img,
.cs_blog_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/*  Blog style_1 hard-pinned its image to height:400px in style.css; let
    the ratio box drive the height instead so blog covers match the rest. */
.cs_blog.cs_style_1 .cs_blog_thumbnail img {
  height: 100%;
}

/*  8.2  Wide tiles — award / certificate strip  */
.cs_award .cs_award_thumbnail {
  overflow: hidden;
  border-radius: var(--cs-tile-radius);
  aspect-ratio: var(--cs-tile-wide);
  background-color: var(--cs-tile-placeholder);
}

.cs_award .cs_award_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*  8.3  Home coverflow slider (style_1): images already match ratio, so
    no cropping — just round the corners so it shares the card language. */
.cs_portfolio.cs_style_1 .cs_portfolio_thumbnail img {
  border-radius: var(--cs-tile-radius);
}

/*  8.4  One hover language for every card: a soft lift.
    Portfolio style_3 already reveals a purple scrim + button on hover and
    the gallery/blog own no zoom, so we add the elevation here and give the
    gallery the same zoom-in-frame the portfolio grid gets for free.      */
.cs_portfolio.cs_style_3 .cs_portfolio_thumbnail,
.cs_gallery.cs_style_1,
.cs_blog.cs_style_4 .cs_blog_thumbnail,
.cs_award .cs_award_thumbnail {
  box-shadow: 0 6px 20px rgba(32, 32, 32, 0.06);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.cs_portfolio.cs_style_3:hover .cs_portfolio_thumbnail,
.cs_gallery.cs_style_1:hover,
.cs_award:hover .cs_award_thumbnail {
  box-shadow: 0 18px 40px rgba(32, 32, 32, 0.14);
  transform: translateY(-4px);
}

/*  Blog style_4 anchors its "read" button to the card top, so lift the
    shadow only — a translate would leave the button behind.            */
.cs_blog.cs_style_4:hover .cs_blog_thumbnail {
  box-shadow: 0 18px 40px rgba(32, 32, 32, 0.14);
}

/*  Gallery has no built-in zoom — give it the same 400ms zoom-in-frame.  */
.cs_gallery.cs_style_1 img {
  transition: transform 0.45s ease;
}
.cs_gallery.cs_style_1:hover img {
  transform: scale(1.05);
}

/*--------------------------------------------------------------
  9. MOBILE OFFCANVAS NAVIGATION
  The template's mobile menu is a bare slide-down of the desktop <ul>.
  This replaces it (≤1199px, the template's own nav breakpoint) with a
  proper offcanvas drawer: logo, accordion menu, and a branded footer
  (CTA + contact + socials + language). The drawer DOM is built in JS
  from the existing header/footer nodes, so it inherits correct links on
  every page (EN and AR) and needs no per-page markup.
  Slides from the inline-end edge, so it enters from the left under RTL.
--------------------------------------------------------------*/

/*  9.1  Trigger button — shown only where the template goes mobile  */
.cs_oc_trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  margin-inline-start: 14px;
  border: 1px solid rgba(32, 32, 32, 0.16);
  border-radius: 12px;
  background-color: #fffcfc;
  color: #202020;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}
.cs_oc_trigger span {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
}
.cs_oc_trigger span::before,
.cs_oc_trigger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
}
.cs_oc_trigger span::before { top: -6px; }
.cs_oc_trigger span::after  { top: 6px; }
.cs_oc_trigger:hover {
  background-color: #5533d8;
  border-color: #5533d8;
  color: #fffcfc;
}

/*  The template's horizontal nav (7 items) + logo + language pill + CTA
    only fits comfortably on wide screens. Between ~1200–1399px it used to
    overflow and wrap the header, spilling the dropdowns over the hero. So
    the offcanvas drawer owns navigation all the way up to 1399px; the
    inline desktop nav appears only from 1400px, where it has room.        */
@media (max-width: 1399px) {
  .cs_oc_trigger { display: inline-flex; }
  /* Hide the inline nav (overrides the template's ≥1200 display:flex). */
  .cs_site_header .cs_nav > .cs_nav_list { display: none !important; }
  /* Retire the template's own hamburger + slide-down; the drawer owns it. */
  .cs_menu_toggle { display: none !important; }
  /* Keep the header bar clean — CTA + language live inside the drawer. */
  .cs_main_header_right .cs_lang_switch,
  .cs_main_header_right .cs_btn { display: none; }
}
@media (min-width: 1400px) {
  .cs_oc_trigger { display: none !important; }
}

/*  Defensive: never let the header row wrap-and-overflow. If anything is
    a hair too wide, the flex items shrink rather than drop to a new line
    (the drawer already covers the narrow case).                          */
.cs_site_header .cs_main_header_in {
  flex-wrap: nowrap;
}

/*  9.2  Backdrop scrim  */
.cs_oc_backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background-color: rgba(20, 16, 40, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.cs_oc_open .cs_oc_backdrop {
  opacity: 1;
  visibility: visible;
}

/*  9.3  Drawer shell  */
.cs_oc_drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;              /* right in LTR, left in RTL */
  z-index: 1101;
  display: flex;
  flex-direction: column;
  width: 340px;
  max-width: 86vw;
  background-color: #fffcfc;
  box-shadow: -24px 0 60px rgba(20, 16, 40, 0.22);
  transform: translateX(100%);      /* off to the inline-end edge */
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  overscroll-behavior: contain;
}
[dir="rtl"] .cs_oc_drawer {
  box-shadow: 24px 0 60px rgba(20, 16, 40, 0.22);
  transform: translateX(-100%);
}
body.cs_oc_open .cs_oc_drawer {
  transform: translateX(0);
}

/*  9.4  Drawer header  */
.cs_oc_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(32, 32, 32, 0.08);
}
.cs_oc_logo img {
  height: 34px;
  width: auto;
}
.cs_oc_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid rgba(32, 32, 32, 0.14);
  border-radius: 10px;
  background-color: transparent;
  color: #202020;
  transition: background-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease;
}
.cs_oc_close:hover {
  background-color: #202020;
  color: #fffcfc;
  transform: rotate(90deg);
}

/*  9.5  Drawer menu (scrolls if long)  */
.cs_oc_nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 12px 20px;
}
.cs_oc_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs_oc_nav > ul > li {
  border-bottom: 1px solid rgba(32, 32, 32, 0.06);
}
.cs_oc_nav a {
  display: block;
  padding: 14px 12px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3em;
  color: #202020;
  transition: color 0.2s ease, padding-inline-start 0.2s ease;
}
.cs_oc_nav a:hover,
.cs_oc_nav li.active > a {
  color: #5533d8;
  padding-inline-start: 18px;
}
/*  Parent rows: link + expand toggle side by side  */
.cs_oc_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cs_oc_row a { flex: 1 1 auto; }
.cs_oc_sub_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  margin-inline-end: 4px;
  border: 0;
  border-radius: 8px;
  background-color: rgba(85, 51, 216, 0.06);
  color: #5533d8;
  font-size: 14px;
  transition: background-color 0.2s ease, transform 0.25s ease;
}
.cs_oc_sub_toggle::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}
.cs_oc_item.cs_oc_expanded .cs_oc_sub_toggle::before {
  transform: translateY(2px) rotate(-135deg);
}
/*  Submenu — collapsed by default, revealed on expand  */
.cs_oc_nav ul ul {
  display: none;
  padding-inline-start: 10px;
  margin-bottom: 6px;
  border-inline-start: 2px solid rgba(85, 51, 216, 0.14);
}
.cs_oc_item.cs_oc_expanded > ul ul,
.cs_oc_item.cs_oc_expanded > .cs_oc_row + ul {
  display: block;
}
.cs_oc_nav ul ul a {
  font-size: 15px;
  font-weight: 400;
  padding: 10px 12px;
  color: rgba(32, 32, 32, 0.7);
}

/*  9.6  Branded footer  */
.cs_oc_foot {
  flex: none;
  padding: 22px 24px 26px;
  color: #fffcfc;
  background: linear-gradient(150deg, #5533d8 0%, #3a2496 100%);
}
.cs_oc_tagline {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 500;
  opacity: 0.92;
}
.cs_oc_cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 50px;
  background-color: #25d366;
  color: #fffcfc;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.cs_oc_cta:hover {
  background-color: #1eb959;
  color: #fffcfc;
  transform: translateY(-2px);
}
.cs_oc_mail {
  display: inline-block;
  margin: 16px 0 4px;
  font-size: 15px;
  color: rgba(255, 252, 252, 0.9);
  word-break: break-all;
}
.cs_oc_mail:hover { color: #fffcfc; text-decoration: underline; }
.cs_oc_social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.cs_oc_social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 252, 252, 0.14);
  color: #fffcfc;
  font-size: 16px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.cs_oc_social a:hover {
  background-color: #fffcfc;
  color: #5533d8;
  transform: translateY(-2px);
}
.cs_oc_foot .cs_lang_switch {
  display: inline-flex;
  margin: 18px 0 0;
  border-color: rgba(255, 252, 252, 0.4);
  color: #fffcfc;
}
.cs_oc_foot .cs_lang_switch:hover {
  background-color: #fffcfc;
  border-color: #fffcfc;
  color: #5533d8;
}

/*  9.7  Lock the page behind the drawer  */
body.cs_oc_open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cs_oc_drawer,
  .cs_oc_backdrop { transition: none; }
}

/*--------------------------------------------------------------
  10. PROCESS / "HOW I WORK" STEPS
  A four-step numbered band that signals a repeatable, professional
  process. Pure CSS cards — no images required.
--------------------------------------------------------------*/
.cs_step {
  position: relative;
  height: 100%;
  padding: 34px 28px;
  border: 1px solid rgba(32, 32, 32, 0.1);
  border-radius: 18px;
  background-color: #fffcfc;
  transition: box-shadow 0.35s ease, transform 0.35s ease,
    border-color 0.35s ease;
}
.cs_step:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(32, 32, 32, 0.1);
  border-color: transparent;
}
.cs_step_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: linear-gradient(150deg, #5533d8 0%, #7a5cff 100%);
  color: #fffcfc;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cs_step_title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3em;
  color: #202020;
}
.cs_step_text {
  margin: 0;
  font-size: 16px;
  line-height: 1.62em;
  color: rgba(32, 32, 32, 0.66);
}
/*  A faint connector between steps on wide screens.  */
@media (min-width: 992px) {
  .cs_step_col:not(:last-child) .cs_step::after {
    content: '';
    position: absolute;
    top: 56px;
    inset-inline-end: -18px;
    width: 20px;
    height: 2px;
    background-color: rgba(85, 51, 216, 0.28);
  }
}

/*--------------------------------------------------------------
  11. PLATFORM LOGO STRIP
  Replaces the two sparse scrolling marquees (huge gaps, dead purple
  space) with a tidy, contained grid of logo chips — the "logos"
  best-practice: even spacing, one consistent size, no motion noise.
--------------------------------------------------------------*/
.cs_logo_strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1120px;
  margin-inline: auto;
}
.cs_logo_strip .cs_brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 116px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 252, 252, 0.16);
  border-radius: 16px;
  background-color: rgba(255, 252, 252, 0.06);
  transition: background-color 0.3s ease, transform 0.3s ease,
    border-color 0.3s ease;
}
.cs_logo_strip .cs_brand:hover {
  background-color: rgba(255, 252, 252, 0.12);
  border-color: rgba(255, 252, 252, 0.32);
  transform: translateY(-3px);
}
.cs_logo_strip .cs_brand img {
  height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 991px) {
  .cs_logo_strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .cs_logo_strip { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cs_logo_strip .cs_brand { height: 74px; }
  .cs_logo_strip .cs_brand img { height: 26px; }
}

/*--------------------------------------------------------------
  12. HERO STATS + ILLUSTRATION REFRAME
  12.1  The funfact bar split two groups with justify-between, leaving a
        dead gap in the middle. Spread all four evenly instead.
--------------------------------------------------------------*/
.cs_funfact_row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 24px;
  width: 100%;
}
/*  Each of the two existing groups takes an equal half and spreads its
    pair, so all four numbers land at even quarter positions — no dead
    gap in the middle. No markup unwrap needed.  */
.cs_funfact_row .cs_funfact_wrap {
  flex: 1 1 0;
  display: flex;
  justify-content: space-around;
  gap: 24px;
}
@media (max-width: 767px) {
  .cs_funfact_row .cs_funfact_wrap {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

/*  12.2  The hero illustration read as a cut-out bleeding into the purple
    strip. Contain it in a soft rounded card with breathing room below,
    and drop the stray background shape that made it look unfinished.  */
.cs_hero.cs_style_1 .cs_imagebox {
  margin: 8px auto 52px;
}
.cs_hero.cs_style_1 .cs_imagebox_in {
  padding: 20px 20px 0;
  border-radius: 28px;
  background: linear-gradient(160deg, #efe9fb 0%, #e7f1ff 100%);
}
.cs_hero.cs_style_1 .cs_imagebox_bg {
  display: none;
}
.cs_hero.cs_style_1 .cs_imagebox .cs_avatar_img {
  position: relative;
  display: block;
}

/*--------------------------------------------------------------
  13. SERVICE CARDS (service pages)
  The service thumbnails rendered as raw, sharp-cornered landscape
  images stacked on the purple section — out of step with the rest of
  the site's rounded, uniform cards. Give them the same treatment.
--------------------------------------------------------------*/
.cs_service.cs_style_4 .cs_service_thumbnail {
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 3 / 2;
  background-color: rgba(255, 252, 252, 0.07);
}
.cs_service.cs_style_4 .cs_service_thumbnail img,
.cs_service.cs_style_4 .cs_service_thumbnail .cs_service_thumbnail_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}
.cs_service.cs_style_4:hover .cs_service_thumbnail img,
.cs_service.cs_style_4:hover .cs_service_thumbnail .cs_service_thumbnail_img {
  transform: scale(1.05);
}
/*  Keep the reveal arrow button clear of the rounded corner.  */
.cs_service.cs_style_4 .cs_service_thumbnail .cs_btn {
  z-index: 2;
}

/*--------------------------------------------------------------
  14. HEADER-CLEARANCE FIX
  The header is position:fixed at 120px tall. Every inner page opens with
  a spacer as the first child of its first <section>; the §7.3 rhythm
  clamp had shrunk those below 120px, so titles slid under the navbar.
  Guarantee that one spacer clears the header on all breakpoints —
  mid-page spacers keep their tighter rhythm.
  (index's hero uses padding-top instead of a spacer; see §7.1.)
--------------------------------------------------------------*/
main > section:first-of-type > [class*="cs_height_"]:first-child {
  min-height: 145px;
}

/*--------------------------------------------------------------
  15. MOBILE BOTTOM NAVIGATION BAR
  A thumb-reachable tab bar on phones with the key destinations.
  Built site-wide in JS. Consolidates the floating WhatsApp button so
  the two don't stack. Respects the iOS home-indicator safe area.
--------------------------------------------------------------*/
.cs_bottom_bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  display: none;
  justify-content: space-around;
  align-items: stretch;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background-color: #fffcfc;
  border-top: 1px solid rgba(32, 32, 32, 0.08);
  box-shadow: 0 -8px 24px rgba(20, 16, 40, 0.08);
}
.cs_bottom_bar a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 2px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  color: rgba(32, 32, 32, 0.62);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.cs_bottom_bar a i {
  font-size: 18px;
  line-height: 1;
}
.cs_bottom_bar a.cs_active {
  color: #5533d8;
  background-color: rgba(85, 51, 216, 0.08);
}
.cs_bottom_bar a.cs_bb_wa {
  color: #25d366;
}

@media (max-width: 767px) {
  .cs_bottom_bar { display: flex; }
  body { padding-bottom: 66px; }
  .cs_wa_float { display: none; }
}

/*--------------------------------------------------------------
  8. Button label roll — keep it on one line
  .cs_btn.cs_style_1 fakes a "rolling" label with
  `text-shadow: 0 50px 0 currentColor` plus `overflow: hidden`: a ghost copy
  of the text is painted 50px lower and slid up on hover. The trick assumes
  the label is exactly ONE line tall. As soon as it wraps, the ghost of the
  first line lands on top of the second line and the button renders its own
  text twice, overlapping — which is what happened to the long WhatsApp
  label on the contact page.

  Pinning the label to a single line makes the 50px offset correct again by
  construction. Long labels now widen the button instead of stacking, so an
  over-long label shows up as an obvious layout problem rather than as
  doubled text.
--------------------------------------------------------------*/
.cs_btn.cs_style_1 span {
  white-space: nowrap;
}

/* The roll distance is hard-coded to 50px, so the label's own line box has to
   stay shorter than that or the ghost peeks out from under the real text. */
.cs_btn.cs_style_1 {
  line-height: 1.5em;
}

/*--------------------------------------------------------------
  9. Hero stat strip — reclaim the dead half
  style.css reserves `min-height: 200px` on .cs_hero_bottom_wrap because the
  original design tucked a tall cut-out portrait into that band. Aya's
  illustration sits above the strip instead, so the reservation just left
  ~90px of empty purple under the four numbers — the content is only ~110px
  tall and .cs_funfact_row pins it to flex-start.

  Dropping the reservation and padding the band symmetrically lets it size
  to its own content.
--------------------------------------------------------------*/
.cs_hero.cs_style_1 .cs_hero_bottom_wrap {
  min-height: 0;
  padding-top: 52px;
  padding-bottom: 52px;
}

.cs_funfact_row {
  align-items: center;
}

@media (max-width: 991px) {
  .cs_hero.cs_style_1 .cs_hero_bottom_wrap {
    padding-top: 38px;
    padding-bottom: 38px;
  }
}

/*  The logo lockups are 240x56 (a mark plus a wordmark), so they need a wide
    box; drop to two columns before the wordmarks start shrinking.  */
@media (max-width: 991px) {
  .cs_logo_strip { grid-template-columns: repeat(3, 1fr); }
  .cs_logo_strip .cs_brand { height: 96px; }
  .cs_logo_strip .cs_brand img { height: 36px; }
}

@media (max-width: 575px) {
  .cs_logo_strip { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cs_logo_strip .cs_brand { height: 84px; padding: 12px 14px; }
  .cs_logo_strip .cs_brand img { height: 30px; }
}

/*--------------------------------------------------------------
  10. Project facts grid
  A two-column definition list for the project detail pages: discipline,
  scope, deliverables and tools. Uses logical properties so the accent
  border sits on the reading-start edge in both directions.
--------------------------------------------------------------*/
.cs_fact_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
}

.cs_fact {
  padding-inline-start: 20px;
  border-inline-start: 2px solid #5533d8;
}

.cs_fact_label {
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5533d8;
}

.cs_fact_value {
  color: #202020;
  opacity: 0.75;
  line-height: 1.6em;
}

[dir="rtl"] .cs_fact_label {
  letter-spacing: normal;
}

@media (max-width: 767px) {
  .cs_fact_grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/*--------------------------------------------------------------
  11. Header actions — language switch + Hire Me
  The two live side by side but came from different systems: the switch is a
  bordered pill sized by its own padding, the button is .cs_btn.cs_style_1
  with 15px/50px padding. They ended up different heights and crowded each
  other. Align them on one row, match their height, and give the switch a
  presence that reads as a control rather than a stray link.
--------------------------------------------------------------*/
.cs_main_header_right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cs_main_header_right .cs_lang_switch,
.cs_main_header_right .cs_btn.cs_style_1 {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 16px;
  line-height: 1;
}

.cs_main_header_right .cs_lang_switch {
  gap: 8px;
  padding: 0 18px;
  border: 1px solid rgba(32, 32, 32, 0.16);
  border-radius: 50px;
  background-color: rgba(32, 32, 32, 0.03);
  font-weight: 500;
  color: #202020;
}

.cs_main_header_right .cs_lang_switch:hover {
  background-color: #202020;
  border-color: #202020;
  color: #fffcfc;
}

.cs_main_header_right .cs_lang_switch svg {
  opacity: 0.65;
  transition: opacity 0.3s ease;
}

.cs_main_header_right .cs_lang_switch:hover svg {
  opacity: 1;
}

.cs_main_header_right .cs_btn.cs_style_1 {
  padding: 0 30px;
  box-shadow: 0 8px 22px rgba(85, 51, 216, 0.28);
}

.cs_main_header_right .cs_btn.cs_style_1:hover {
  box-shadow: 0 12px 28px rgba(85, 51, 216, 0.38);
}

/* The template pushes the toolbox away from the menu button on tablet; the
   flex gap above already handles the spacing. */
@media (max-width: 1199px) {
  .cs_main_header_right {
    margin-inline-end: 56px;
  }
  [dir="rtl"] .cs_main_header_right .cs_btn,
  .cs_main_header_right .cs_btn.cs_style_1 {
    margin: 0;
  }
}

@media (max-width: 575px) {
  .cs_main_header_right {
    gap: 8px;
    margin-inline-end: 48px;
  }
  .cs_main_header_right .cs_lang_switch,
  .cs_main_header_right .cs_btn.cs_style_1 {
    height: 40px;
    font-size: 14px;
  }
  .cs_main_header_right .cs_lang_switch { padding: 0 12px; }
  .cs_main_header_right .cs_btn.cs_style_1 { padding: 0 18px; }
}

/*--------------------------------------------------------------
  12. Project prev/next navigation
  Replaces the template's recent-work slider on the project pages. Two
  cards, one per direction. The arrow glyph points right in its own SVG, so
  the "previous" card flips it — and RTL flips both back, because "forward"
  is leftward in Arabic.
--------------------------------------------------------------*/
.cs_pnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.cs_pnav_card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 22px 26px;
  overflow: hidden;
  border: 1px solid rgba(32, 32, 32, 0.12);
  border-radius: 24px;
  color: #202020;
  transition: border-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
}

.cs_pnav_card:hover {
  color: #202020;
  border-color: #5533d8;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(32, 32, 32, 0.1);
}

/* "Next" reads left-to-right; "previous" is the same card mirrored. */
.cs_pnav_prev { flex-direction: row; }
.cs_pnav_next { flex-direction: row-reverse; text-align: end; }

.cs_pnav_arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(85, 51, 216, 0.1);
  color: #5533d8;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.cs_pnav_card:hover .cs_pnav_arrow {
  background-color: #5533d8;
  color: #fffcfc;
}

/* The glyph is drawn pointing right. Rotate per direction, then invert the
   whole scheme in RTL where forward runs the other way. */
.cs_pnav_prev .cs_pnav_arrow svg { transform: scaleX(-1); }
[dir="rtl"] .cs_pnav_prev .cs_pnav_arrow svg { transform: none; }
[dir="rtl"] .cs_pnav_next .cs_pnav_arrow svg { transform: scaleX(-1); }

.cs_pnav_body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cs_pnav_label {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5533d8;
}

[dir="rtl"] .cs_pnav_label { letter-spacing: normal; }

.cs_pnav_title {
  font-weight: 500;
  line-height: 1.3em;
}

.cs_pnav_cat {
  color: #202020;
  opacity: 0.6;
}

/* A soft bleed of the destination artwork, so the card previews where it goes. */
.cs_pnav_thumb {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 190px;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
          mask-image: linear-gradient(to left, #000, transparent);
  transition: opacity 0.3s ease;
}

[dir="rtl"] .cs_pnav_thumb {
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
          mask-image: linear-gradient(to right, #000, transparent);
}

.cs_pnav_card:hover .cs_pnav_thumb { opacity: 0.26; }

@media (max-width: 767px) {
  .cs_pnav { grid-template-columns: 1fr; gap: 16px; }
  .cs_pnav_next { flex-direction: row; text-align: start; }
  .cs_pnav_thumb { width: 130px; }
}

/*--------------------------------------------------------------
  13. Project CTA
--------------------------------------------------------------*/
.cs_project_cta_in {
  padding: 74px 60px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 15% 0%, #6b45ff 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, #fa7bd4 0%, transparent 50%),
    #5533d8;
  color: #fffcfc;
}

.cs_project_cta_in p {
  max-width: 52ch;
  margin-inline: auto;
  margin-top: 18px;
  color: rgba(255, 252, 252, 0.82);
}

.cs_project_cta_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
}

.cs_btn_ghost_light {
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 30px;
  border: 1px solid rgba(255, 252, 252, 0.45);
  border-radius: 50px;
  font-size: 18px;
  font-weight: 500;
  color: #fffcfc;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
}

.cs_btn_ghost_light:hover {
  background-color: #fffcfc;
  border-color: #fffcfc;
  color: #5533d8;
}

@media (max-width: 767px) {
  .cs_project_cta_in { padding: 52px 24px; }
}