/* ============================================================
   REDESIGN — high-specificity overrides
   The template ships `.white-version .slide .content .inner ...`
   selectors (0,5,0) that outrank the design system's own rules.
   Everything here exists purely to outrank them.
   Loads immediately after redesign.css.
   ============================================================ */

/* ------------------------------------------------------------
   HERO TITLE — force the ink/white treatment
   ------------------------------------------------------------ */
body.white-version .rn-slider-area .slide .content .inner .title,
body.white-version .rn-slider-area .slide .content .inner .title span,
body.white-version .rn-slider-area .slide .content .inner .title span:nth-child(1),
body.white-version .rn-slider-area .slide .content .inner .title .header-caption,
body.white-version .rn-slider-area .slide .content .inner .title .cd-headline {
    font-family: var(--font-display) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: -.038em !important;
}

/* The rotating role keeps its gradient */
body.white-version .rn-slider-area .slide .content .inner .title .cd-words-wrapper b {
    background: linear-gradient(96deg, #8fa6ff 0%, #ffffff 55%, #ffc48f 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800 !important;
}

/* Typing cursor */
body.white-version .rn-slider-area .cd-words-wrapper::after {
    background: var(--warm) !important;
}

body.white-version .rn-slider-area .slide .content .inner .subtitle {
    color: var(--warm) !important;
    font-weight: 600 !important;
}

body.white-version .rn-slider-area .slide .content .inner .description {
    color: var(--tx-inv-2) !important;
    font-family: var(--font-body) !important;
}

body.white-version .rn-slider-area .social-share-inner-left .title {
    color: rgba(255, 255, 255, .42) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .16em !important;
}

body.white-version .rn-slider-area .social-share li a {
    color: #fff !important;
    background: rgba(255, 255, 255, .04) !important;
    border-color: var(--ink-line) !important;
}

body.white-version .rn-slider-area .social-share li a:hover {
    background: #fff !important;
    color: var(--ink) !important;
}

/* Key facts: the markup is <strong>Label</strong>: <span>Value</span>.
   Zero out the list item's own font-size so the stray ":" text node
   collapses, then restore size on the real children. */
body .about-me-section .key-facts li { font-size: 0 !important; }
body .about-me-section .key-facts li strong { font-size: 10.5px !important; }
body .about-me-section .key-facts li span { font-size: 15px !important; line-height: 1.5; }

/* ------------------------------------------------------------
   NAV — kill the template's uppercase + restore sizing
   ------------------------------------------------------------ */
body.white-version .mainmenu-nav .primary-menu .nav-item .nav-link,
body.white-version .popup-mobile-menu .primary-menu .nav-item .nav-link {
    text-transform: none !important;
    font-family: var(--font-body) !important;
    letter-spacing: -.005em !important;
}

body.white-version .mainmenu-nav .primary-menu .nav-item .nav-link {
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 9px 16px !important;
}

body.white-version .popup-mobile-menu .primary-menu .nav-item .nav-link {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
}

/* Nav colours per header state */
body.white-version .rn-header .mainmenu-nav .primary-menu .nav-item .nav-link {
    color: var(--tx-2) !important;
}

body.white-version.has-dark-hero .rn-header.header--sticky:not(.sticky) .mainmenu-nav .primary-menu .nav-item .nav-link {
    color: rgba(255, 255, 255, .78) !important;
}

body.white-version.has-dark-hero .rn-header.header--sticky:not(.sticky) .mainmenu-nav .primary-menu .nav-item .nav-link:hover,
body.white-version.has-dark-hero .rn-header.header--sticky:not(.sticky) .mainmenu-nav .primary-menu .nav-item.current .nav-link,
body.white-version.has-dark-hero .rn-header.header--sticky:not(.sticky) .mainmenu-nav .primary-menu .nav-item .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
}

body.white-version .rn-header.sticky .mainmenu-nav .primary-menu .nav-item .nav-link:hover,
body.white-version .rn-header.sticky .mainmenu-nav .primary-menu .nav-item.current .nav-link,
body.white-version .rn-header.sticky .mainmenu-nav .primary-menu .nav-item .nav-link.active {
    color: var(--tx) !important;
    background: rgba(13, 15, 20, .05) !important;
}

/* ------------------------------------------------------------
   SECTION TITLES
   ------------------------------------------------------------ */
body.white-version .section-title .title {
    font-family: var(--font-display) !important;
    color: var(--tx) !important;
    letter-spacing: -.03em !important;
}

body.white-version .section-title .subtitle {
    color: var(--accent) !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .16em !important;
    font-size: 12px !important;
}

/* ------------------------------------------------------------
   CARDS — the template colours these via .white-version too
   ------------------------------------------------------------ */
body.white-version .rn-service .content .title a { color: var(--tx) !important; }
body.white-version .rn-service:hover .content .title a { color: var(--accent) !important; }
body.white-version .rn-service .content .description { color: var(--tx-2) !important; }
body.white-version .rn-service .icon { color: #fff !important; }

body.white-version .rn-portfolio .content .title { color: var(--tx) !important; }
body.white-version .rn-portfolio:hover .content .title { color: var(--accent) !important; }

body.white-version .rn-pricing-table .price-wrap .price { color: var(--tx) !important; }
body.white-version .rn-pricing-area .row > div:nth-child(2) .price-wrap .price { color: #fff !important; }
body.white-version .rn-pricing-area .row > div:nth-child(2) .pricing-header .title { color: var(--warm) !important; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
body.white-version .rn-footer-area,
body.white-version footer.rn-footer-area {
    background: var(--ink) !important;
}

body.white-version .rn-footer-area .footer-description,
body.white-version .rn-footer-area p {
    color: var(--tx-inv-2) !important;
}

body.white-version .rn-footer-area h5,
body.white-version .rn-footer-area h6 {
    color: rgba(255, 255, 255, .45) !important;
}

/* ------------------------------------------------------------
   Template quirk: html{overflow:hidden} breaks scroll anchoring
   ------------------------------------------------------------ */
html.white-version,
html {
    overflow-x: hidden;
    overflow-y: auto;
}

/* ------------------------------------------------------------
   Card surfaces — template sets these transparent via .white-version
   ------------------------------------------------------------ */
body.white-version .rn-service,
body.white-version .rn-portfolio,
body.white-version .contact-info-card,
body.white-version .modern-contact-form {
    background: var(--canvas) !important;
}

body.white-version .rn-pricing-area .row > div:nth-child(2) .pricing-table-inner {
    background: var(--ink) !important;
}

/* ------------------------------------------------------------
   HEADER LAYOUT — keep the desktop bar on a single row
   ------------------------------------------------------------ */
body.white-version .rn-header .header-wrapper {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

body.white-version .rn-header .header-center {
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px;
}

body.white-version .mainmenu-nav .primary-menu {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

body.white-version .mainmenu-nav .primary-menu .nav-item .nav-link {
    white-space: nowrap !important;
    padding: 9px 12px !important;
}

/* The template markup always renders the mobile controls; Bootstrap's
   d-xl-none / responsive utilities are what hide them, so the design
   system must not force them visible. */
body .hamberger-menu.d-xl-none,
body .close-menu {
    display: none !important;
}

@media (max-width: 1199px) {
    body .hamberger-menu.d-xl-none {
        display: inline-flex !important;
    }
}

/* The close button belongs to the popup menu, not the header bar */
body .popup-mobile-menu .close-button,
body .popup-mobile-menu .close-menu {
    display: block !important;
}

/* ------------------------------------------------------------
   PORTFOLIO — full-bleed image, template ships 30px padding
   ------------------------------------------------------------ */
body.white-version .rn-portfolio {
    padding: 0 !important;
}

/* style.css pins .header-wrapper to a fixed 122px; the redesign sizes
   the bar from its own padding instead. */
body.white-version .rn-header .header-wrapper {
    height: auto !important;
    min-height: 0 !important;
}

@media (max-width: 767px) {
    body.white-version .rn-header .header-wrapper {
        padding: 0 20px !important;
    }
}

/* ============================================================
   HEADER STATES — authoritative
   style.css ships `.white-version .rn-header.header--fixed.sticky`
   (0,4,0). These rules match that weight and add !important so the
   two header states are fully owned by the design system.
   ============================================================ */

/* --- Floating over a dark hero (top of page) --- */
body.white-version.has-dark-hero .rn-header.header--fixed.header--sticky:not(.sticky) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 18px 0 !important;
}

body.white-version.has-dark-hero .rn-header.header--fixed.header--sticky:not(.sticky) .logo img {
    filter: brightness(0) invert(1) !important;
}

body.white-version.has-dark-hero .rn-header.header--fixed.header--sticky:not(.sticky) .mainmenu-nav .primary-menu .nav-item .nav-link {
    color: rgba(255, 255, 255, .78) !important;
}

body.white-version.has-dark-hero .rn-header.header--fixed.header--sticky:not(.sticky) .mainmenu-nav .primary-menu .nav-item .nav-link:hover,
body.white-version.has-dark-hero .rn-header.header--fixed.header--sticky:not(.sticky) .mainmenu-nav .primary-menu .nav-item.current .nav-link {
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
}

body.white-version.has-dark-hero .rn-header.header--fixed.header--sticky:not(.sticky) .language-dropdown .dropdown-toggle {
    color: rgba(255, 255, 255, .85) !important;
    border-color: rgba(255, 255, 255, .22) !important;
}

body.white-version.has-dark-hero .rn-header.header--fixed.header--sticky:not(.sticky) .hamberger-menu {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .24) !important;
}

/* --- Condensed / scrolled, and every page without a dark hero --- */
body.white-version .rn-header.header--fixed.header--sticky.sticky,
body.white-version:not(.has-dark-hero) .rn-header.header--fixed.header--sticky {
    background-color: rgba(255, 255, 255, .85) !important;
    background-image: none !important;
    box-shadow: 0 1px 0 rgba(13, 15, 20, .05) !important;
    border-bottom: 1px solid var(--line) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
    backdrop-filter: saturate(180%) blur(18px) !important;
    padding: 12px 0 !important;
}

body.white-version .rn-header.header--fixed.header--sticky.sticky .logo img,
body.white-version:not(.has-dark-hero) .rn-header.header--fixed.header--sticky .logo img {
    filter: none !important;
}

body.white-version .rn-header.header--fixed.header--sticky.sticky .mainmenu-nav .primary-menu .nav-item .nav-link,
body.white-version:not(.has-dark-hero) .rn-header.header--fixed.header--sticky .mainmenu-nav .primary-menu .nav-item .nav-link {
    color: var(--tx-2) !important;
}

body.white-version .rn-header.header--fixed.header--sticky.sticky .mainmenu-nav .primary-menu .nav-item .nav-link:hover,
body.white-version .rn-header.header--fixed.header--sticky.sticky .mainmenu-nav .primary-menu .nav-item.current .nav-link,
body.white-version:not(.has-dark-hero) .rn-header.header--fixed.header--sticky .mainmenu-nav .primary-menu .nav-item .nav-link:hover,
body.white-version:not(.has-dark-hero) .rn-header.header--fixed.header--sticky .mainmenu-nav .primary-menu .nav-item.current .nav-link {
    color: var(--tx) !important;
    background: rgba(13, 15, 20, .05) !important;
}

body.white-version .rn-header.header--fixed.header--sticky.sticky .language-dropdown .dropdown-toggle,
body.white-version:not(.has-dark-hero) .rn-header.header--fixed.header--sticky .language-dropdown .dropdown-toggle {
    color: var(--tx-2) !important;
    border-color: var(--line) !important;
}

body.white-version .rn-header.header--fixed.header--sticky.sticky .hamberger-menu,
body.white-version:not(.has-dark-hero) .rn-header.header--fixed.header--sticky .hamberger-menu {
    color: var(--tx) !important;
    border-color: var(--line) !important;
}

/* ============================================================
   INNER-PAGE BANNERS
   projects-page.css / coming-soon.css push their banner down by
   80px to clear the old static header. The redesigned header
   floats over the banner, so that margin would leave a white
   strip behind white nav text. Run the banner to the top instead
   and pad from the inside.
   ============================================================ */
body.has-dark-hero .projects-sub-header,
body.has-dark-hero .coming-soon-section {
    margin-top: 0 !important;
}

body.has-dark-hero .projects-sub-header {
    padding-top: 96px !important;
}

body.has-dark-hero .coming-soon-section {
    padding-top: 160px !important;
}

/* Banner headings pick up the design system's display face */
body.white-version .sub-header-content .sub-header-title,
body.white-version .sub-header-content h1,
body.white-version .coming-soon-content h1,
body.white-version .coming-soon-content h2 {
    font-family: var(--font-display) !important;
    letter-spacing: -.03em !important;
}

/* The floating "return" control matches the design system's pills */
body.white-version .return-button {
    border-radius: var(--r-pill) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
}

/* ============================================================
   MOBILE MENU PANEL
   .white-version .popup-mobile-menu .inner paints itself with
   --gradient-box-w, which resolves to nothing here, leaving dark
   text on a transparent panel. Paint it explicitly.
   ============================================================ */
body.white-version .popup-mobile-menu .inner {
    background: var(--canvas) !important;
    background-image: none !important;
    border-right: 1px solid var(--line) !important;
    box-shadow: 0 0 60px rgba(13, 15, 20, .22) !important;
    padding: 24px !important;
}

body.white-version .popup-mobile-menu {
    background: rgba(13, 15, 20, .45) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

body.white-version .popup-mobile-menu .inner .menu-top {
    border-bottom: 1px solid var(--line) !important;
}

body.white-version .popup-mobile-menu .inner .content .primary-menu .nav-item a,
body.white-version .popup-mobile-menu.menu-open .inner .content .primary-menu li a {
    color: var(--tx) !important;
    border-bottom: 1px solid var(--line) !important;
}

body.white-version .popup-mobile-menu .inner .content .primary-menu .nav-item a:hover {
    color: var(--accent) !important;
}

body.white-version .popup-mobile-menu .social-share li a {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--tx-2) !important;
    background: transparent !important;
}

body.white-version .popup-mobile-menu .social-share li a:hover {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}

/* ============================================================
   PRIMARY BUTTON (.rn-btn)
   The template paints it with --gradient-box-w (a white gradient)
   while keeping white text, so it renders invisible on light
   sections. Own it outright.
   ============================================================ */
body.white-version a.rn-btn,
body.white-version .rn-btn,
body.white-version .rn-btn.btn-large,
body.white-version .rn-header .header-right a.rn-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ink) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--ink) !important;
    border-radius: var(--r-pill) !important;
    padding: 16px 34px !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background .3s var(--ease), border-color .3s var(--ease),
                transform .3s var(--ease), box-shadow .3s var(--ease) !important;
}

body.white-version a.rn-btn:hover,
body.white-version .rn-btn:hover,
body.white-version .rn-header .header-right a.rn-btn:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px var(--accent-glow) !important;
}

/* The template layers a ::before wash on these that would tint the fill */
body.white-version a.rn-btn::before,
body.white-version .rn-btn::before,
body.white-version .rn-header .header-right a::before {
    display: none !important;
    content: none !important;
}

body.white-version a.rn-btn span,
body.white-version .rn-btn span {
    color: #fff !important;
    position: relative;
    z-index: 1;
}

/* On the dark hero / footer the same button inverts */
body.white-version .rn-slider-area a.rn-btn,
body.white-version .rn-footer-area a.rn-btn {
    background: #fff !important;
    color: var(--ink) !important;
    border-color: #fff !important;
}

body.white-version .rn-slider-area a.rn-btn span,
body.white-version .rn-footer-area a.rn-btn span {
    color: var(--ink) !important;
}

body.white-version .rn-slider-area a.rn-btn:hover,
body.white-version .rn-footer-area a.rn-btn:hover {
    background: var(--warm) !important;
    border-color: var(--warm) !important;
}

/* ============================================================
   FINAL POLISH
   ============================================================ */

/* --- Featured pricing plan: target the real class, not position --- */
body.white-version .rn-pricing-table.featured .pricing-table-inner {
    background: var(--ink) !important;
    background-image: none !important;
    border-color: var(--ink) !important;
    position: relative;
    overflow: hidden;
}

body.white-version .rn-pricing-table.featured .pricing-header { border-bottom-color: var(--ink-line) !important; }
body.white-version .rn-pricing-table.featured .pricing-header .title { color: var(--warm) !important; }
body.white-version .rn-pricing-table.featured .price-wrap .price { color: #fff !important; }
body.white-version .rn-pricing-table.featured .pricing-body .description { color: var(--tx-inv-2) !important; }
body.white-version .rn-pricing-table.featured .feature-list li { color: rgba(255, 255, 255, .82) !important; }
body.white-version .rn-pricing-table.featured .feature-list li strong { color: #fff !important; }

body.white-version .rn-pricing-table.featured .feature-list li .icon-container {
    background: rgba(255, 255, 255, .12) !important;
}

body.white-version .rn-pricing-table.featured .feature-list li .icon-container svg {
    stroke: #fff !important;
}

body.white-version .rn-pricing-table.featured:hover .pricing-table-inner {
    border-color: var(--accent) !important;
    box-shadow: 0 30px 60px -28px var(--accent-glow) !important;
}

/* "MOST POPULAR" ribbon, driven by the markup's data attribute */
body.white-version .rn-pricing-table.featured[data-popular-text] {
    position: relative;
    overflow: hidden;
}

body.white-version .rn-pricing-table.featured[data-popular-text]::after {
    content: attr(data-popular-text);
    position: absolute;
    top: 20px;
    right: -34px;
    transform: rotate(38deg);
    background: var(--warm);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    padding: 6px 40px;
    z-index: 2;
    pointer-events: none;
}

/* --- Modals --- */
body.white-version .modal-content {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--canvas) !important;
}

body.white-version .modal-header {
    background: var(--canvas-alt) !important;
    border-bottom: 1px solid var(--line) !important;
}

body.white-version .modal-header .modal-title,
body.white-version .modal-body h3,
body.white-version .modal-body h4,
body.white-version .modal-body h5 {
    font-family: var(--font-display) !important;
    color: var(--tx) !important;
    letter-spacing: -.02em !important;
}

body.white-version .modal-body p,
body.white-version .modal-body li {
    color: var(--tx-2) !important;
}

body.white-version .modal-footer { border-top: 1px solid var(--line) !important; }

/* --- Footer list items carry no text of their own, but keep them in-palette --- */
body.white-version .rn-footer-area li,
body.white-version .rn-footer-area .footer-links li {
    color: var(--tx-inv-2) !important;
}

/* --- Focus ring for keyboard users --- */
body.white-version a:focus-visible,
body.white-version button:focus-visible,
body.white-version input:focus-visible,
body.white-version textarea:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 3px !important;
    border-radius: var(--r-sm);
}

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

/* ============================================================
   CHATBOT WIDGET
   chatbot.css stays (it carries the widget's behaviour-critical
   layout), but its type stack and old #2563eb blue are pulled
   into the design system so the widget reads as part of the site.
   ============================================================ */
body .chatbot-toggle,
body .chatbot-container,
body .chatbot-header,
body .chatbot-messages,
body .chatbot-input-container,
body .chatbot-message,
body .message-content,
body .quick-action-btn,
body .chatbot-input,
body .chatbot-send,
body .chatbot-status,
body .chatbot-header h4,
body .chatbot-header-info h4 {
    font-family: var(--font-body) !important;
}

body .chatbot-header h4,
body .chatbot-header-info h4 {
    font-family: var(--font-display) !important;
    letter-spacing: -.015em !important;
}

body .chatbot-toggle {
    background: var(--ink) !important;
    box-shadow: 0 14px 34px -12px rgba(13, 15, 20, .45) !important;
}

body .chatbot-toggle:hover {
    background: var(--accent) !important;
}

body .chatbot-container {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

body .chatbot-header {
    background: var(--ink) !important;
    background-image: none !important;
}

body .chatbot-message-user .message-content {
    background: var(--ink) !important;
    background-image: none !important;
    color: #fff !important;
}

body .chatbot-message-bot .message-content {
    background: var(--canvas-alt) !important;
    color: var(--tx) !important;
}

body .quick-action-btn {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    background: transparent !important;
    color: var(--tx-2) !important;
    font-weight: 500 !important;
}

body .quick-action-btn:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

body .chatbot-input {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    background: var(--canvas-alt) !important;
    color: var(--tx) !important;
}

body .chatbot-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--accent-soft) !important;
    background: var(--canvas) !important;
}

body .chatbot-send {
    background: var(--ink) !important;
    background-image: none !important;
    border-radius: 50% !important;
}

body .chatbot-send:hover { background: var(--accent) !important; }

body .chatbot-badge { background: var(--warm) !important; color: var(--ink) !important; }

/* Message bodies are injected by chatbot-new.js as bare <p> */
body .chatbot-messages p,
body .message-content p,
body .message-content * {
    font-family: var(--font-body) !important;
}

/* ============================================================
   FLOATING ACTION STACK
   Three independent widgets all used to anchor themselves to
   bottom:30px right:30px, so they stacked on top of each other.
   They are laid out here as one vertical column, bottom-up:
     chatbot (primary)  ->  WhatsApp  ->  back-to-top
   The WhatsApp button's styling used to live in custom-colors.css,
   which the redesign no longer loads, so it is restored here.
   ============================================================ */

/* --- 1. Chatbot toggle: base of the stack ---
   chatbot.css ships its own responsive offsets (20px at 768, 15px at
   576) and sizes (55/50px). Those fought the two buttons stacked above
   it, so the whole stack geometry is pinned here instead. */
body .chatbot-toggle {
    bottom: 30px !important;
    right: 30px !important;
    width: 60px !important;
    height: 60px !important;
}

/* --- 2. WhatsApp --- */
body .floating-whatsapp {
    position: fixed !important;
    bottom: 104px !important;
    right: 30px !important;
    left: auto !important;
    z-index: 999998 !important;
    animation: none !important;
    transition: right .3s var(--ease), bottom .3s var(--ease);
}

body .floating-whatsapp .whatsapp-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .55);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}

body .floating-whatsapp .whatsapp-btn:hover {
    background: #1eb955;
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -10px rgba(37, 211, 102, .68);
}

body .floating-whatsapp .whatsapp-btn svg {
    width: 28px;
    height: 28px;
}

/* the old shimmer / pulse pseudo-elements are not part of the new system */
body .floating-whatsapp .whatsapp-btn::before,
body .floating-whatsapp .whatsapp-btn::after {
    display: none !important;
}

/* --- 3. Back to top: top of the stack --- */
body .backto-top > div {
    bottom: 178px !important;
    right: 36px !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--canvas) !important;
    color: var(--tx) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: var(--shadow-sm) !important;
    z-index: 999997 !important;
    transition: transform .3s var(--ease), border-color .3s var(--ease), right .3s var(--ease);
}

body .backto-top > div:hover {
    transform: translateY(-3px);
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

body .backto-top > div svg {
    width: 20px;
    height: 20px;
}

/* --- Chat panel open: move the other two clear of it --- */
body.chatbot-active .floating-whatsapp,
body.chatbot-active .backto-top > div {
    right: 530px !important;
}

/* --- Mobile: tighter stack, matching the 55px chatbot toggle --- */
@media (max-width: 768px) {
    body .chatbot-toggle {
        right: 20px !important;
        width: 52px !important;
        height: 52px !important;
    }

    body .chatbot-toggle svg,
    body .chatbot-toggle .chatbot-icon-img {
        width: 26px !important;
        height: 26px !important;
    }

    body .floating-whatsapp {
        bottom: 96px !important;
        right: 20px !important;
    }

    body .floating-whatsapp .whatsapp-btn {
        width: 52px;
        height: 52px;
    }

    body .floating-whatsapp .whatsapp-btn svg {
        width: 24px;
        height: 24px;
    }

    body .backto-top > div {
        bottom: 162px !important;
        right: 24px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* On a narrow screen the panel is full width, so tuck them away */
    body.chatbot-active .floating-whatsapp,
    body.chatbot-active .backto-top > div {
        opacity: 0 !important;
        pointer-events: none !important;
        right: 20px !important;
    }
}

/* ============================================================
   ROTATING ROLE HEADLINE
   text-type.js pins a pixel width on .cd-words-wrapper that it
   measures at load, then animates it between 2px and word-width.
   That width was landing at 2px, which collapsed the role text to
   nothing (the hero read "an" followed by a bare cursor).

   The `clip` class is dropped in the markup so the script takes its
   stable branch (class toggling only, no width animation), and the
   wrapper is laid out as a one-cell grid here: every role stacks in
   the same cell, so the box is naturally as wide as the longest role
   and never depends on a measured pixel value. That also survives a
   language switch, where the Arabic and French roles have very
   different widths.
   ============================================================ */
body .rn-slider-area .cd-headline .cd-words-wrapper,
body.white-version .rn-slider-area .cd-headline .cd-words-wrapper {
    display: inline-grid !important;
    width: auto !important;   /* beats the inline width the script sets */
    min-height: 1em;
    max-width: 100%;               /* never let a long role leave the column */
    overflow: hidden !important;   /* masks the role as it slides out */
    vertical-align: bottom;
    text-align: inherit;
}

body .rn-slider-area .cd-headline .cd-words-wrapper b,
body.white-version .rn-slider-area .cd-headline .cd-words-wrapper b {
    grid-area: 1 / 1;          /* all roles share one cell */
    position: static !important;
    /* nowrap forced every role onto one line, so the long French
       role ran 165px past the text column and under the portrait.
       Wrapping is the safety net; the strings themselves are short. */
    white-space: normal;
    overflow-wrap: break-word;
    opacity: 0;
    transform: translateY(-8px);
    /* Outgoing role leaves FIRST. A plain cross-fade left both words
       stacked for half a second, so the tail of the longer role showed
       through behind the shorter one. */
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    pointer-events: none;
}

body .rn-slider-area .cd-headline .cd-words-wrapper b.is-visible,
body.white-version .rn-slider-area .cd-headline .cd-words-wrapper b.is-visible {
    opacity: 1;
    transform: translateY(0);
    position: static !important;
    /* ...and the incoming role only starts once the old one has gone */
    transition: opacity .38s var(--ease) .2s, transform .38s var(--ease) .2s;
}

/* The typing caret belonged to the clip effect; a cross-fade doesn't
   need one, and it was the orange bar left stranded after "an". */
body .rn-slider-area .cd-headline .cd-words-wrapper::after,
body.white-version .rn-slider-area .cd-words-wrapper::after {
    content: none !important;
    display: none !important;
}

/* Keep the role on its own line so the stack never reflows the title */
body .rn-slider-area .header-caption {
    display: block;
    margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
    body .rn-slider-area .cd-headline .cd-words-wrapper b {
        transition: none;
        transform: none;
    }
}

/* ------------------------------------------------------------
   17. PROJECT MODALS — split panel
   Two markup shapes exist in the views: nine projects use
   `.text-content > h3` while KMT and AMH use
   `.portfolio-popup-content .content > .subtitle + h4.title`.
   Both are handled here so every project detail reads identically.

   Layout: the image runs full-bleed down the left half with no gap
   or inner radius, and the copy sits on a panel to the right.
   ------------------------------------------------------------ */
body .modal .modal-dialog {
    max-width: 1040px !important;
}

body .modal .modal-content {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden !important;
    box-shadow: 0 40px 90px -30px rgba(13, 15, 20, .45) !important;
    background: var(--canvas) !important;
    /* style.css pads .modal-content, which inset the body ~46px on each
       side and stopped the artwork reaching the panel edge. */
    padding: 0 !important;
}

/* Close button floats over the artwork instead of taking a header row */
body .modal .modal-header {
    position: absolute !important;
    top: 0 !important;
    /* explicit left/right rather than inset-inline-end: Bootstrap gives the
       header display:flex + justify-content:flex-end, which combined with the
       logical property pushed the close button outside the modal in RTL */
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    z-index: 5 !important;
    padding: 16px !important;
    border: 0 !important;
    background: none !important;
    display: block !important;
}

body .modal .modal-header .close {
    box-sizing: border-box !important;
    /* Bootstrap ships `.modal-header .close { margin: -1rem -1rem -1rem auto }`.
       The auto left margin flips under RTL and threw the button outside the
       modal entirely, so the margins are zeroed here. */
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    /* static, and offsets neutralised: the template sets `left: -44px` on
       .close, which only took effect once this rule made it positioned -
       inward in LTR, but straight out of the modal in RTL. */
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid var(--line) !important;
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    color: var(--tx) !important;
    opacity: 1 !important;
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease) !important;
}

body .modal .modal-header .close:hover {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
    transform: rotate(90deg) !important;
}

body .modal .modal-body {
    padding: 0 !important;
}

/* Kill Bootstrap's gutters so the image can reach the panel edge */
body .modal .modal-body > .row {
    margin: 0 !important;
    align-items: stretch !important;
}

body .modal .modal-body > .row > [class*="col-"] {
    padding: 0 !important;
}

/* --- Left: artwork --- */
body .modal .portfolio-popup-thumbnail,
body .modal .portfolio-popup-thumbnail .image {
    height: 100% !important;
    margin: 0 !important;
}

body .modal .portfolio-popup-thumbnail .image {
    position: relative !important;
    min-height: 340px !important;
    background: var(--canvas-alt) !important;
}

body .modal .portfolio-popup-thumbnail .image img,
body .modal .modal-body img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    /* the inline style="border-radius:10px" on each img is overridden here */
    border-radius: 0 !important;
}

/* --- Right: copy panel --- */
body .modal .text-content,
body .modal .portfolio-popup-content {
    padding: 44px 42px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body .modal .portfolio-popup-content .inner,
body .modal .portfolio-popup-content .content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Category eyebrow — first span in the h3 form, .subtitle in the other */
body .modal .text-content h3 > span:first-child,
body .modal .portfolio-popup-content .content .subtitle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    color: var(--accent) !important;
    margin-bottom: 14px !important;
}

body .modal .text-content h3 > span:first-child::before,
body .modal .portfolio-popup-content .content .subtitle::before {
    content: "" !important;
    width: 22px !important;
    height: 1px !important;
    background: var(--accent) !important;
}

/* Project name — normalise the h3 and h4.title forms */
body .modal .text-content h3,
body .modal .portfolio-popup-content .content h4.title {
    font-family: var(--font-display) !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    letter-spacing: -.03em !important;
    line-height: 1.22 !important;
    color: var(--tx) !important;
    margin: 0 0 16px !important;
}

body .modal .text-content h3 > span:last-child {
    display: block !important;
    font-size: 27px !important;
    letter-spacing: -.03em !important;
    line-height: 1.22 !important;
    color: var(--tx) !important;
}

body .modal .text-content p,
body .modal .portfolio-popup-content .content .description {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--tx-2) !important;
    margin: 0 0 14px !important;
}

body .modal .text-content p:last-of-type,
body .modal .portfolio-popup-content .content .description:last-of-type {
    margin-bottom: 26px !important;
}

/* --- Buttons --- */
body .modal .button-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
}

body .modal .button-group .rn-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 13px 22px !important;
    border-radius: var(--r-pill) !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition: background .3s var(--ease), color .3s var(--ease),
                border-color .3s var(--ease), transform .3s var(--ease),
                box-shadow .3s var(--ease) !important;
}

body .modal .button-group .rn-btn svg,
body .modal .button-group .rn-btn i {
    width: 15px !important;
    height: 15px !important;
    /* style.css pulls the icon with margin-right:-13px, a physical offset
       tuned for LTR. Under RTL that dragged the icon straight into the
       label. Spacing is handled by the button flex gap instead. */
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    flex-shrink: 0 !important;
}

/* Live site — solid accent */
body .modal .button-group .rn-btn {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

body .modal .button-group .rn-btn:hover {
    background: var(--accent-ink, #1e3ae0) !important;
    border-color: var(--accent-ink, #1e3ae0) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px -10px var(--accent-glow) !important;
}

/* Demo — solid warm amber on ink text. Deliberately a different hue
   from the live button so the two never read as the same action, and
   solid rather than outlined: the previous ghost treatment had a
   near-white border and effectively disappeared on the white panel. */
body .modal .button-group .rn-btn.demo-btn {
    background: var(--warm) !important;
    border-color: var(--warm) !important;
    color: var(--ink) !important;
}

body .modal .button-group .rn-btn.demo-btn:hover {
    background: #ff8c24 !important;
    border-color: #ff8c24 !important;
    color: var(--ink) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px -10px rgba(255, 159, 74, .6) !important;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    body .modal .modal-dialog { max-width: 640px !important; }

    body .modal .portfolio-popup-thumbnail .image {
        min-height: 240px !important;
        max-height: 300px !important;
    }

    body .modal .text-content,
    body .modal .portfolio-popup-content {
        padding: 32px 28px !important;
    }

    body .modal .text-content h3,
    body .modal .text-content h3 > span:last-child,
    body .modal .portfolio-popup-content .content h4.title {
        font-size: 22px !important;
    }
}

@media (max-width: 575px) {
    body .modal .text-content,
    body .modal .portfolio-popup-content {
        padding: 26px 22px !important;
    }

    body .modal .button-group .rn-btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }
}

/* --- RTL --- */
[dir="rtl"] .modal .text-content,
[dir="rtl"] .modal .portfolio-popup-content .content { text-align: right !important; }

[dir="rtl"] .modal .modal-header {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] .modal .modal-header .close:hover { transform: rotate(-90deg) !important; }

/* Arabic: mono tracking and uppercase break the script's joins */
[dir="rtl"] .modal .button-group .rn-btn,
[dir="rtl"] .modal .text-content h3 > span:first-child,
[dir="rtl"] .modal .portfolio-popup-content .content .subtitle {
    font-family: var(--font-body) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

[dir="rtl"] .modal .button-group .rn-btn { font-size: 13px !important; }
[dir="rtl"] .modal .text-content h3 > span:first-child,
[dir="rtl"] .modal .portfolio-popup-content .content .subtitle { font-size: 12.5px !important; }