/* NAQAR DIGITAL - Public Scoped CSS Stylesheet (Astra Theme Compatible) */

:root {
    --nd-charcoal: #202226;
    --nd-graphite: #424143;
    --nd-off-white: #F7F4EE;
    --nd-soft-grey: #F2F2F2;
    --nd-copper: #D28A55;
    --nd-gold: #D4AF37;
    --nd-red: #D63638;
    --nd-green: #2E7D32;
    --nd-white: #FFFFFF;
    --nd-border-radius: 16px;
    --nd-card-radius: 14px;
    --nd-nav-height: 80px;
    /* named easing curves -- reused across every transition/reveal so motion feels
       like one consistent system rather than several different hand-tuned values */
    --nd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --nd-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cairo (SIL OFL) -- bundled variable-font subsets for the Arabic version. The files
   only download when a rule actually uses the 'Cairo' family, i.e. only on pages with
   an Arabic (.nd-rtl) instance -- English pages pay zero extra bytes. */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/cairo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Box-sizing fix, SCOPED to the plugin only: without border-box, any element
   combining width:100% with horizontal padding (like .nd-container below) renders
   wider than its parent by its own padding amount. Scoped under .nd-wrapper so it
   can never restyle the host theme (Astra) or other plugins on the page. */
.nd-wrapper,
.nd-wrapper *,
.nd-wrapper *::before,
.nd-wrapper *::after {
    box-sizing: border-box;
    min-width: 0;
}
#nd-plugin-wrapper, .nd-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--nd-off-white);
    color: var(--nd-charcoal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    position: relative;
    /* clip (not hidden): hidden turns the wrapper into a scroll container, which
       silently disables position:sticky on the header and the form column inside
       a real WordPress page. clip guards horizontal overflow without that side
       effect. The hidden line stays first as a fallback for older browsers. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Theme normalization: a real WordPress theme (Astra) applies its own margins,
   font families, and link decoration to bare elements inside post content.
   Neutralize just those inside the plugin so the design renders identically
   in the standalone harness and inside a theme. */
.nd-wrapper h1, .nd-wrapper h2, .nd-wrapper h3,
.nd-wrapper h4, .nd-wrapper h5, .nd-wrapper h6,
.nd-wrapper p, .nd-wrapper ul, .nd-wrapper ol {
    margin-top: 0;
    font-family: inherit;
}
.nd-wrapper a {
    text-decoration: none;
    box-shadow: none; /* some themes underline content links via box-shadow */
}
.nd-wrapper button {
    font-family: inherit;
}

.nd-wrapper ::selection {
    background-color: var(--nd-charcoal);
    color: var(--nd-off-white);
}
.nd-wrapper a:focus-visible,
.nd-wrapper button:focus-visible,
.nd-wrapper input:focus-visible,
.nd-wrapper select:focus-visible {
    outline: 2px solid var(--nd-copper);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Scroll progress: thin fixed bar at the very top, fills as the page scrolls */
.nd-wrapper .nd-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background-color: var(--nd-copper);
    z-index: 2000;
    width: 0%;
    transition: width 0.1s linear;
}

/* Reveal-on-scroll: sections/cards fade and lift into place once they enter view */
.nd-wrapper .nd-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--nd-ease-out), transform 0.7s var(--nd-ease-out);
}
.nd-wrapper .nd-reveal.nd-in {
    opacity: 1;
    transform: translateY(0);
}
.nd-wrapper .nd-reveal-stagger > * {
    transition-delay: calc(var(--i, 0) * 80ms);
}
@media (prefers-reduced-motion: reduce) {
    .nd-wrapper .nd-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Off-screen but still "visible" to bots checking computed style (used by the honeypot field) */
.nd-wrapper .nd-visually-hidden {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* CONTAINER -- the single shared width for every section AND the header, so
   everything lines up on the same left/right edges on large screens. Only one
   rule to change here; every section uses this same class, nothing overrides it. */
.nd-wrapper .nd-container {
    max-width: 100em; /* 1600px ÷ 16px root */
    margin: 0 auto;
    padding: 0 5%;
    width: 100%;
}

/* SECTION */
.nd-wrapper .nd-section {
    padding: 6rem 0;
    position: relative;
}

/* BRANDED PERCENTAGE LOADER */
.nd-wrapper .nd-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--nd-off-white);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.nd-wrapper .nd-preloader.nd-loaded {
    opacity: 0;
    pointer-events: none;
}
.nd-wrapper .nd-loader-content {
    text-align: center;
    width: 300px;
}
.nd-wrapper .nd-loader-percent {
    font-size: 5rem;
    font-weight: 800;
    color: var(--nd-graphite);
    display: block;
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums; /* digits don't jitter in width as they tick up */
    animation: ndLoaderBreathe 1.8s var(--nd-ease-soft) infinite;
}
.nd-wrapper .nd-loader-bar {
    width: 100%;
    height: 4px;
    background-color: rgba(0,0,0,0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.nd-wrapper .nd-loader-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--nd-graphite), var(--nd-copper));
    transition: width 0.1s linear;
}
@keyframes ndLoaderBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
    .nd-wrapper .nd-loader-percent { animation: none; }
}
.nd-wrapper .nd-loader-status {
    font-size: 0.85rem;
    color: var(--nd-graphite);
    opacity: 0.7;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* HEADER: sticky with a translucent blur once scrolled. Logo | section nav | one CTA,
   plus the mobile hamburger -- no more 3 contact buttons crowding this bar. */
.nd-wrapper .nd-header {
    width: 100%;
    min-height: var(--nd-nav-height);
    background-color: var(--nd-off-white);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 500;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.nd-wrapper .nd-header.nd-scrolled {
    background-color: rgba(247, 244, 238, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: rgba(0,0,0,0.06);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
/* Logged-in WordPress admin bar sits fixed at the top (32px desktop / 46px mobile);
   without these offsets it covers the sticky header for admins. */
.admin-bar .nd-wrapper .nd-header {
    top: 32px;
}
.admin-bar .nd-wrapper .nd-scroll-progress {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .nd-wrapper .nd-header {
        top: 46px;
    }
    .admin-bar .nd-wrapper .nd-scroll-progress {
        top: 46px;
    }
}
/* 3 groups: logo | section nav (desktop) | CTA + hamburger.
   Vertical padding only -- the horizontal 5% must come from .nd-container on the
   same element, or the header content loses the shared side margin every other
   section has (a full `padding` shorthand here would override it). */
.nd-wrapper .nd-nav-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.nd-wrapper .nd-logo img {
    height: 36px;
    width: auto;
    display: block;
}
/* Right-hand header cluster: language switcher + CTA + hamburger share one grid cell
   so adding/removing any of them never wraps the header grid onto a second row. */
.nd-wrapper .nd-header-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    justify-self: end;
}
/* Hidden on mobile by default (mobile-first); revealed at the 1024px nav breakpoint below.
   Selector chains .nd-btn so it outranks the generic `.nd-wrapper .nd-btn { display:inline-flex }`
   rule that appears later in this file -- with equal specificity that later rule would win
   and the CTA would incorrectly show next to the hamburger on mobile. */
.nd-wrapper .nd-btn.nd-header-cta {
    display: none;
}

/* AR|EN split language switcher: compact segmented pill. The active language is the
   filled segment (a span, not a link); the other segment links to its page. In the
   header it's desktop-only (mobile users get it inside the overlay menu instead). */
.nd-wrapper .nd-lang-switch {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--nd-charcoal);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}
.nd-wrapper .nd-lang-seg {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    color: var(--nd-charcoal);
    transition: color 0.25s ease, background-color 0.25s ease;
}
.nd-wrapper .nd-lang-seg + .nd-lang-seg {
    border-inline-start: 1px solid rgba(32, 34, 38, 0.25);
}
/* The عربي segment renders in Cairo at a light weight on BOTH pages -- without this,
   the English page (Inter, no Arabic glyphs) shows عربي in a system fallback font. */
.nd-wrapper .nd-lang-seg[lang="ar"] {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-weight: 400;
}
.nd-wrapper a.nd-lang-seg:hover {
    color: var(--nd-copper);
}
.nd-wrapper .nd-lang-seg.nd-lang-active {
    background-color: var(--nd-charcoal);
    color: var(--nd-off-white);
    cursor: default;
}
.nd-wrapper .nd-header-actions .nd-lang-switch {
    display: none; /* desktop-only in the header; shown at the 1024px breakpoint below */
}

/* Inverted treatment on the charcoal mobile overlay */
.nd-wrapper .nd-mobile-nav .nd-lang-switch {
    border-color: rgba(247, 244, 238, 0.5);
    margin-inline-end: auto; /* sits opposite the close button */
}
.nd-wrapper .nd-mobile-nav .nd-lang-seg {
    color: var(--nd-off-white);
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
}
.nd-wrapper .nd-mobile-nav .nd-lang-seg + .nd-lang-seg {
    border-inline-start-color: rgba(247, 244, 238, 0.35);
}
.nd-wrapper .nd-mobile-nav a.nd-lang-seg:hover {
    color: var(--nd-copper);
}
.nd-wrapper .nd-mobile-nav .nd-lang-seg.nd-lang-active {
    background-color: var(--nd-off-white);
    color: var(--nd-charcoal);
}

/* TYPOGRAPHY */
.nd-wrapper .nd-h1 {
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    color: var(--nd-charcoal);
    text-align: left;
}
.nd-wrapper .nd-h2 {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    color: var(--nd-charcoal);
    text-align: left;
}
.nd-wrapper .nd-h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    color: var(--nd-charcoal);
    text-align: left;
}
.nd-wrapper .nd-h4 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: var(--nd-charcoal);
    text-align: left;
}
.nd-wrapper .nd-p-large {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--nd-graphite);
    max-width: 800px;
    margin-bottom: 2rem;
    line-height: 1.5;
    text-align: left;
}
.nd-wrapper .nd-text-gradient {
    background: linear-gradient(135deg, var(--nd-charcoal) 0%, var(--nd-copper) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.nd-wrapper .nd-eyebrow {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--nd-copper);
    margin-bottom: 1rem;
    text-align: left;
}

/* HERO */
.nd-wrapper .nd-hero {
    padding: 6rem 0 3rem 0;
}
.nd-wrapper .nd-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

/* METHOD SECTION: the "before increasing spend, expose the leakage" bridge between
   the hook and the services -- houses the 3-step story strip. Background is locked
   to the brand vanilla (#F7F4EE) by explicit user direction -- don't change it. */
.nd-wrapper .nd-method-section {
    background-color: var(--nd-off-white); /* vanilla #F7F4EE */
}
.nd-wrapper .nd-section-head--center {
    text-align: center;
}
.nd-wrapper .nd-section-head--center .nd-eyebrow,
.nd-wrapper .nd-section-head--center .nd-h2,
.nd-wrapper .nd-section-head--center .nd-p-large {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* SERVICES SECTION */
.nd-wrapper .nd-services-section {
    background-color: var(--nd-white);
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
/* Story strip carries a slow, CSS-only copper gradient sweep behind the 3 steps
   (pure CSS per design direction -- no JS involved, disabled for reduced motion). */
.nd-wrapper .nd-story-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 3rem 0;
    padding: 2.5rem 2rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    border-radius: var(--nd-card-radius);
}
.nd-wrapper .nd-story-steps::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        rgba(210, 138, 85, 0) 0%,
        rgba(210, 138, 85, 0.10) 30%,
        rgba(212, 175, 55, 0.08) 50%,
        rgba(210, 138, 85, 0.10) 70%,
        rgba(210, 138, 85, 0) 100%);
    background-size: 250% 250%;
    animation: ndGradientSweep 9s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ndGradientSweep {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.nd-wrapper .nd-story-step {
    position: relative;
    transition: transform 0.35s var(--nd-ease-out);
}
.nd-wrapper .nd-story-step:hover {
    transform: translateY(-4px);
}
.nd-wrapper .nd-story-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--nd-charcoal);
    color: var(--nd-white);
    font-weight: 700;
    margin-bottom: 1rem;
    transition: background-color 0.35s var(--nd-ease-out), transform 0.35s var(--nd-ease-out);
}
.nd-wrapper .nd-story-step:hover .nd-story-step-num {
    background-color: var(--nd-copper);
    transform: scale(1.12);
}
.nd-wrapper .nd-story-step p {
    color: var(--nd-graphite);
    font-size: 0.95rem;
}
@media (prefers-reduced-motion: reduce) {
    .nd-wrapper .nd-story-steps::before { animation: none; }
}
.nd-wrapper .nd-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
/* Service cards fade in slower and travel further than the default reveal --
   a deliberate, calmer entrance for this section (design direction). */
.nd-wrapper .nd-services-grid > .nd-reveal {
    transform: translateY(44px);
    transition-duration: 1.15s;
}
.nd-wrapper .nd-services-grid > .nd-reveal.nd-in {
    transform: translateY(0);
}
.nd-wrapper .nd-service-card {
    background-color: var(--nd-soft-grey);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: var(--nd-card-radius);
    padding: 2rem;
    min-width: 0;
    transition: transform 0.25s var(--nd-ease-out), box-shadow 0.25s var(--nd-ease-out);
}
.nd-wrapper .nd-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(32,34,38,0.08);
}
.nd-wrapper .nd-service-card--featured {
    background-color: var(--nd-charcoal);
    color: var(--nd-white);
    border-color: var(--nd-charcoal);
}
.nd-wrapper .nd-service-card--featured .nd-h3 {
    color: var(--nd-white);
}
.nd-wrapper .nd-service-card p {
    color: var(--nd-graphite);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}
.nd-wrapper .nd-service-card--featured p {
    color: rgba(247,244,238,0.75);
}
.nd-wrapper .nd-service-team {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nd-copper);
}

/* PROOF SECTION */
.nd-wrapper .nd-proof-section {
    background-color: var(--nd-white);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 3rem 0;
}
.nd-wrapper .nd-proof-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--nd-graphite);
    margin-bottom: 2rem;
    text-align: left;
}
.nd-wrapper .nd-clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.nd-wrapper .nd-proof-card {
    background: var(--nd-soft-grey);
    padding: 2rem;
    border-radius: var(--nd-border-radius);
    text-align: left;
}
.nd-wrapper .nd-blurred-name {
    filter: blur(4px);
    transition: filter 0.3s ease;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.nd-wrapper .nd-blurred-name:hover {
    filter: blur(0);
}
.nd-wrapper .nd-proof-stat {
    font-size: 2rem;
    font-weight: 800;
    color: var(--nd-copper);
    display: block;
    margin-bottom: 0.25rem;
}
.nd-wrapper .nd-proof-desc {
    font-size: 0.9rem;
    color: var(--nd-graphite);
    font-weight: 500;
}
/* Trend sparkline in each proof card: pure SVG, draws itself (stroke-dash) once the
   card's .nd-reveal gets .nd-in from the scroll observer. No JS beyond that class. */
.nd-wrapper .nd-sparkline {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 1rem;
    color: var(--nd-copper);
    overflow: visible;
}
.nd-wrapper .nd-sparkline .nd-spark-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
}
.nd-wrapper .nd-sparkline .nd-spark-fill {
    fill: currentColor;
    opacity: 0;
    transition: opacity 0.8s ease 1s;
}
.nd-wrapper .nd-reveal.nd-in .nd-sparkline .nd-spark-line {
    animation: ndSparkDraw 1.6s var(--nd-ease-out) forwards;
}
.nd-wrapper .nd-reveal.nd-in .nd-sparkline .nd-spark-fill {
    opacity: 0.12;
}
@keyframes ndSparkDraw {
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nd-wrapper .nd-sparkline .nd-spark-line { stroke-dashoffset: 0; animation: none; }
    .nd-wrapper .nd-sparkline .nd-spark-fill { opacity: 0.12; transition: none; }
}

/* SPLIT WORKSPACE */
.nd-wrapper .nd-workspace-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
}

/* FORM STYLING (No keyboard entry for numbers). Sticky: stays in view while the
   (usually taller) results column beside it scrolls -- see comment in the HTML. */
.nd-wrapper .nd-workspace-left {
    min-width: 0;
    background-color: var(--nd-white);
    padding: 3rem;
    border-radius: var(--nd-border-radius);
    box-shadow: 0 4px 30px rgba(0,0,0,0.02);
    position: sticky;
    top: 100px;
}
.nd-wrapper .nd-form-progress {
    margin-bottom: 2rem;
}
.nd-wrapper .nd-progress-fill {
    height: 4px;
    background-color: var(--nd-copper);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.nd-wrapper .nd-progress-step-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nd-graphite);
    text-transform: uppercase;
    display: block;
    margin-top: 0.5rem;
    text-align: left;
}
.nd-wrapper .nd-step-slide {
    display: none;
}
.nd-wrapper .nd-step-slide.nd-active {
    display: block;
    animation: ndFadeIn 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.nd-wrapper .nd-form-group {
    margin-bottom: 2rem;
    text-align: left;
}
.nd-wrapper .nd-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nd-charcoal);
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.nd-wrapper .nd-val-display {
    color: var(--nd-copper);
    font-weight: 700;
}
/* Selects/inputs are fully normalized (height, line-height, appearance) because host
   themes (Astra et al.) impose their own select height/line-height, which vertically
   clipped the chosen option's text inside the box. Never rely on theme defaults here. */
.nd-wrapper .nd-select, .nd-wrapper .nd-input {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0.9rem 1rem;
    line-height: 1.5;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    font-family: inherit;
    font-size: 1rem;
    color: var(--nd-charcoal);
    background-color: var(--nd-soft-grey);
    outline: none;
    box-shadow: none;
    transition: border-color 0.3s ease;
}
.nd-wrapper .nd-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    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 d='M1 1l5 5 5-5' fill='none' stroke='%23424143' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
}
.nd-wrapper .nd-select:focus, .nd-wrapper .nd-input:focus {
    border-color: var(--nd-copper);
}

/* Inline validation error target (populated by naqar-public.js) */
.nd-wrapper .nd-validation-error {
    color: var(--nd-red);
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 1.2em;
    margin-top: 0.75rem;
    text-align: left;
}

/* CUSTOM RANGE SLIDER (Pinpoint/Dial style) */
.nd-wrapper .nd-range {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    margin: 1rem 0;
}
.nd-wrapper .nd-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--nd-charcoal);
    cursor: pointer;
    border: 2px solid var(--nd-white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.1s ease;
}
.nd-wrapper .nd-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: var(--nd-copper);
}
.nd-wrapper .nd-range::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
}
.nd-wrapper .nd-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--nd-charcoal);
    cursor: pointer;
    border: 2px solid var(--nd-white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.1s ease;
}
.nd-wrapper .nd-range::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: var(--nd-copper);
}

/* BUTTONS -- compact by design: shorter padding, smaller type, no oversized pills.
   min-height keeps the tap target accessible without the button looking bulky. */
.nd-wrapper .nd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    min-height: 46px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s var(--nd-ease-out), background-color 0.18s var(--nd-ease-out), border-color 0.18s var(--nd-ease-out), box-shadow 0.18s var(--nd-ease-out), color 0.18s var(--nd-ease-out);
    border: 1px solid transparent;
    outline: none;
    white-space: nowrap;
}
.nd-wrapper .nd-btn:active {
    transform: scale(0.98);
}
.nd-wrapper .nd-btn-primary {
    background-color: var(--nd-charcoal);
    color: var(--nd-white);
}
.nd-wrapper .nd-btn-primary:hover {
    background-color: var(--nd-copper);
    color: var(--nd-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(210, 138, 85, 0.25);
}
.nd-wrapper .nd-btn-outline {
    background-color: transparent;
    border-color: var(--nd-charcoal);
    color: var(--nd-charcoal);
}
.nd-wrapper .nd-btn-outline:hover {
    background-color: var(--nd-charcoal);
    color: var(--nd-white);
    transform: translateY(-2px);
}
.nd-wrapper .nd-btn-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}
.nd-wrapper .nd-btn-row .nd-btn {
    flex: 1;
}

/* RESULTS SIDEBAR (CFO Dashboard) */
.nd-wrapper .nd-workspace-right {
    min-width: 0;
}
.nd-wrapper .nd-results-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    text-align: center;
    background-color: var(--nd-white);
    border-radius: var(--nd-border-radius);
    box-shadow: 0 4px 30px rgba(0,0,0,0.02);
    padding: 3rem;
}
.nd-wrapper .nd-placeholder-inner h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.nd-wrapper .nd-placeholder-inner p {
    font-size: 0.95rem;
    color: var(--nd-graphite);
    max-width: 320px;
}

/* RESULTS "ANALYZING" LOADER: shown between clicking Generate Diagnosis and the
   results reveal -- a smooth eased 0-100% counter in the same visual language as
   the page preloader. Classes are DISTINCT from the preloader's (.nd-rl-*) so the
   preloader's own interval JS never touches these elements. JS shows it as flex. */
.nd-wrapper .nd-results-loader {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    background-color: var(--nd-white);
    border-radius: var(--nd-border-radius);
    box-shadow: 0 4px 30px rgba(0,0,0,0.02);
    padding: 3rem;
}
.nd-wrapper .nd-rl-percent {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--nd-graphite);
    display: block;
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.nd-wrapper.nd-rtl .nd-rl-percent,
[dir="rtl"] .nd-wrapper .nd-rl-percent {
    letter-spacing: 0;
}
.nd-wrapper .nd-rl-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--nd-graphite), var(--nd-copper));
    transition: width 0.05s linear;
}

/* Staggered card entrance after the loader completes (re-triggered on resubmit) */
.nd-wrapper .nd-results-active.nd-revealing .nd-result-card {
    opacity: 0;
    animation: ndFadeIn 0.55s var(--nd-ease-out) forwards;
}
.nd-wrapper .nd-results-active.nd-revealing .nd-result-card:nth-child(1) { animation-delay: 0ms; }
.nd-wrapper .nd-results-active.nd-revealing .nd-result-card:nth-child(2) { animation-delay: 80ms; }
.nd-wrapper .nd-results-active.nd-revealing .nd-result-card:nth-child(3) { animation-delay: 160ms; }
.nd-wrapper .nd-results-active.nd-revealing .nd-result-card:nth-child(4) { animation-delay: 240ms; }
.nd-wrapper .nd-results-active.nd-revealing .nd-result-card:nth-child(5) { animation-delay: 320ms; }
.nd-wrapper .nd-results-active.nd-revealing .nd-result-card:nth-child(6) { animation-delay: 400ms; }
.nd-wrapper .nd-results-active.nd-revealing .nd-result-card:nth-child(7) { animation-delay: 480ms; }
@media (prefers-reduced-motion: reduce) {
    .nd-wrapper .nd-results-active.nd-revealing .nd-result-card {
        opacity: 1;
        animation: none;
    }
}

/* RESULTS GRID: one consistent box system for every category of result, instead of
   several separately-styled blocks. 1 column on mobile, 2 on larger screens -- the
   same boxes, just reflowed, so it's genuinely consistent at every size. */
.nd-wrapper .nd-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.nd-wrapper .nd-result-card {
    min-width: 0;
    background-color: var(--nd-white);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--nd-card-radius);
    padding: 1.75rem;
    text-align: left;
    transition: box-shadow 0.25s var(--nd-ease-out);
}
.nd-wrapper .nd-result-card:hover {
    box-shadow: 0 12px 28px rgba(32,34,38,0.06);
}
.nd-wrapper .nd-result-card--wide {
    grid-column: 1 / -1;
}
.nd-wrapper .nd-result-card--headline {
    background-color: var(--nd-soft-grey);
    border-color: transparent;
}
.nd-wrapper .nd-result-card h5,
.nd-wrapper .nd-result-card h6 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--nd-graphite);
    margin-bottom: 0.75rem;
}
.nd-wrapper .nd-stat-val {
    font-size: 1.75rem;
    font-weight: 800;
}
.nd-wrapper .nd-color-red { color: var(--nd-red); }
.nd-wrapper .nd-color-green { color: var(--nd-green); }

/* ACTIVE RESULTS: headline card (gauge + diagnosis) */
.nd-wrapper .nd-results-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}
/* Gauge: ring and score sit side by side (a row), not stacked/overlapping --
   this is what eliminates the score number spilling outside the ring. */
.nd-wrapper .nd-gauge-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.1rem;
}
.nd-wrapper .nd-gauge-chart-wrapper {
    position: relative;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
}
.nd-wrapper .nd-gauge-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}
.nd-wrapper .nd-gauge-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.nd-wrapper .nd-gauge-score-val {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}
.nd-wrapper .nd-gauge-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nd-graphite);
    margin-top: 0.25rem;
}
.nd-wrapper .nd-diagnosis-summary-box {
    text-align: left;
    flex: 1 1 220px;
    min-width: 0;
}
.nd-wrapper .nd-badge {
    background-color: var(--nd-copper);
    color: var(--nd-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* CHARTS VISUALS */
.nd-wrapper .nd-canvas-container {
    position: relative;
    height: 200px;
    width: 100%;
}

/* TIMELINE TABS */
.nd-wrapper .nd-timeline-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
}
/* High-contrast tab states (design direction): the selected tab is solid graphite
   with off-white text; unselected tabs are transparent with graphite text and a
   1px graphite border -- never white-on-vanilla. */
.nd-wrapper .nd-timeline-tab-btn {
    flex: 1;
    background-color: transparent;
    border: 1px solid var(--nd-graphite);
    color: var(--nd-graphite);
    padding: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.nd-wrapper .nd-timeline-tab-btn:hover {
    border-color: var(--nd-copper);
    color: var(--nd-copper);
}
.nd-wrapper .nd-timeline-tab-btn.nd-active {
    background-color: var(--nd-graphite);
    border-color: var(--nd-graphite);
    color: var(--nd-off-white);
}
.nd-wrapper .nd-timeline-content-pane ul {
    list-style-type: square;
    margin-left: 1.5rem;
}
.nd-wrapper .nd-timeline-content-pane li {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: var(--nd-graphite);
}

/* RECOMMENDATIONS SECTION */
.nd-wrapper .nd-recom-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nd-copper);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.5rem;
}
.nd-wrapper .nd-recom-box h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.nd-wrapper .nd-recom-box p {
    font-size: 0.95rem;
    color: var(--nd-graphite);
    margin-bottom: 1.5rem;
}
/* Single CTA after a diagnosis -- one clear next step ("Get Offer"), not three
   competing buttons. Kept as a class (not just .nd-btn) so its own spacing is
   independent of the generic button-row rules used elsewhere. */
.nd-wrapper .nd-final-ctas {
    margin-top: 0.5rem;
}
.nd-wrapper .nd-final-ctas .nd-btn {
    padding: 0.9rem 2.25rem;
}

/* FOOTER (Graphite background, vanilla text & icons). Small contact links live here now. */
.nd-wrapper .nd-footer {
    background-color: var(--nd-graphite) !important;
    color: var(--nd-off-white) !important;
    padding: 3rem 0;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.nd-wrapper .nd-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.nd-wrapper .nd-footer-left p {
    font-size: 0.9rem;
    margin: 0;
    text-align: left;
    color: var(--nd-off-white);
}
.nd-wrapper .nd-footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}
.nd-wrapper .nd-footer-contact-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--nd-off-white);
    opacity: 0.85;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(247,244,238,0.3);
    border-radius: 20px;
    transition: opacity 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.nd-wrapper .nd-footer-contact-link:hover {
    opacity: 1;
    border-color: var(--nd-copper);
    color: var(--nd-copper);
}
.nd-wrapper .nd-social-icons {
    display: flex;
    gap: 1.5rem;
}
.nd-wrapper .nd-social-link {
    color: var(--nd-off-white);
    font-size: 1.25rem;
    transition: color 0.3s ease;
}
.nd-wrapper .nd-social-link:hover {
    color: var(--nd-copper);
}

/* ANIMATIONS */
@keyframes ndFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .nd-wrapper .nd-workspace-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .nd-wrapper .nd-workspace-left {
        position: static;
        top: 0;
    }
}
@media (min-width: 640px) {
    .nd-wrapper .nd-story-steps { grid-template-columns: repeat(3, 1fr); }
    .nd-wrapper .nd-services-grid { grid-template-columns: repeat(2, 1fr); }
    .nd-wrapper .nd-results-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .nd-wrapper .nd-services-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .nd-wrapper .nd-clients-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .nd-wrapper .nd-footer-inner {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    .nd-wrapper .nd-footer-left p {
        text-align: center;
    }
    .nd-wrapper .nd-footer-contact {
        justify-content: center;
    }

    /* FORM / RESULTS PANELS: less padding so content isn't cramped on phones */
    .nd-wrapper .nd-workspace-left,
    .nd-wrapper .nd-result-card,
    .nd-wrapper .nd-results-placeholder {
        padding: 1.5rem;
    }

    .nd-wrapper .nd-results-header {
        justify-content: center;
        text-align: center;
    }
    .nd-wrapper .nd-gauge-box {
        margin: 0 auto;
    }
    .nd-wrapper .nd-diagnosis-summary-box {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .nd-wrapper .nd-workspace-left,
    .nd-wrapper .nd-result-card,
    .nd-wrapper .nd-results-placeholder {
        padding: 1.25rem;
    }
    .nd-wrapper .nd-btn-row {
        flex-direction: column;
    }
}

/* ==========================================
   SECTION NAVIGATION
   Anchors the plugin's own sections (unique per instance -- see the partial).
   Built mobile-first: base rules below are the mobile (hamburger) experience;
   the min-width: 1024px block at the end switches to the inline desktop nav.
   Distinct from, and does not replace, the 7-step form's own progress bar.
   ========================================== */

/* Desktop-only nav: hidden on mobile by default (mobile-first) */
.nd-wrapper .nd-section-nav {
    display: none;
}
.nd-wrapper .nd-section-nav-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nd-charcoal);
    position: relative;
    padding: 0.4rem 0;
    transition: color 0.3s ease;
}
.nd-wrapper .nd-section-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background-color: var(--nd-copper);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.nd-wrapper .nd-section-nav-link:hover,
.nd-wrapper .nd-section-nav-link.nd-active {
    color: var(--nd-copper);
}
.nd-wrapper .nd-section-nav-link:hover::after,
.nd-wrapper .nd-section-nav-link.nd-active::after {
    transform: scaleX(1);
}

/* Hamburger toggle button (mobile only) */
.nd-wrapper .nd-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    justify-self: end;
}
.nd-wrapper .nd-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--nd-charcoal);
    margin: 0 auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.nd-wrapper .nd-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nd-wrapper .nd-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}
.nd-wrapper .nd-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Full-bleed mobile overlay menu, in the plugin's own charcoal (not the reference's near-black) */
.nd-wrapper .nd-mobile-nav {
    position: fixed;
    inset: 0;
    background-color: var(--nd-charcoal);
    color: var(--nd-off-white);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 5%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);
    transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nd-wrapper .nd-mobile-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
/* Overlay header row holds only the close button (no logo/wordmark -- design direction). */
.nd-wrapper .nd-mobile-nav-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: var(--nd-nav-height);
}
.nd-wrapper .nd-menu-close {
    background: none;
    border: none;
    color: var(--nd-off-white);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem;
}
.nd-wrapper .nd-mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.5rem;
}
.nd-wrapper .nd-mobile-nav-links a {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--nd-off-white);
    transition: color 0.3s ease;
}
.nd-wrapper .nd-mobile-nav-links a:hover,
.nd-wrapper .nd-mobile-nav-links a.nd-active {
    color: var(--nd-copper);
}
.nd-wrapper .nd-mobile-nav-cta {
    margin-top: auto;
    margin-bottom: 1.5rem;
    align-self: stretch;
    background-color: var(--nd-copper);
}

/* DESKTOP NAV BREAKPOINT: inline section nav + CTA + language switcher replace the hamburger */
@media (min-width: 1024px) {
    .nd-wrapper .nd-section-nav {
        display: flex;
        gap: 2rem;
        justify-content: center;
    }
    .nd-wrapper .nd-btn.nd-header-cta {
        display: inline-flex;
    }
    .nd-wrapper .nd-header-actions .nd-lang-switch {
        display: inline-flex;
    }
    .nd-wrapper .nd-menu-toggle {
        display: none;
    }
    .nd-wrapper .nd-mobile-nav {
        display: none;
    }
}

/* ==========================================
   RTL (ARABIC / KSA) ALIGNMENT OVERRIDES
   Two trigger forms, both required:
   - `.nd-wrapper.nd-rtl`  -- the Arabic shortcode instance ([naqar_growth_engine
     lang="ar"] sets dir="rtl" + this class on the wrapper itself).
   - `[dir="rtl"] .nd-wrapper` -- an English-authored instance living inside a
     site-wide RTL WordPress install (dir on <html>).
   ========================================== */

/* Arabic typography: Cairo (bundled above). Negative tracking is a Latin-only
   treatment -- it visually crushes connected Arabic script, so it resets to normal. */
.nd-wrapper.nd-rtl,
[dir="rtl"] .nd-wrapper {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    text-align: right;
}
.nd-wrapper.nd-rtl .nd-h1, [dir="rtl"] .nd-wrapper .nd-h1,
.nd-wrapper.nd-rtl .nd-h2, [dir="rtl"] .nd-wrapper .nd-h2,
.nd-wrapper.nd-rtl .nd-h3, [dir="rtl"] .nd-wrapper .nd-h3,
.nd-wrapper.nd-rtl .nd-h4, [dir="rtl"] .nd-wrapper .nd-h4,
.nd-wrapper.nd-rtl .nd-loader-percent, [dir="rtl"] .nd-wrapper .nd-loader-percent {
    letter-spacing: 0;
}
.nd-wrapper.nd-rtl .nd-eyebrow, [dir="rtl"] .nd-wrapper .nd-eyebrow,
.nd-wrapper.nd-rtl .nd-loader-status, [dir="rtl"] .nd-wrapper .nd-loader-status {
    letter-spacing: 0.02em;
}

.nd-wrapper.nd-rtl .nd-h1, [dir="rtl"] .nd-wrapper .nd-h1,
.nd-wrapper.nd-rtl .nd-h2, [dir="rtl"] .nd-wrapper .nd-h2,
.nd-wrapper.nd-rtl .nd-h3, [dir="rtl"] .nd-wrapper .nd-h3,
.nd-wrapper.nd-rtl .nd-h4, [dir="rtl"] .nd-wrapper .nd-h4,
.nd-wrapper.nd-rtl .nd-p-large, [dir="rtl"] .nd-wrapper .nd-p-large,
.nd-wrapper.nd-rtl .nd-label, [dir="rtl"] .nd-wrapper .nd-label,
.nd-wrapper.nd-rtl .nd-eyebrow, [dir="rtl"] .nd-wrapper .nd-eyebrow,
.nd-wrapper.nd-rtl .nd-proof-title, [dir="rtl"] .nd-wrapper .nd-proof-title,
.nd-wrapper.nd-rtl .nd-proof-card, [dir="rtl"] .nd-wrapper .nd-proof-card,
.nd-wrapper.nd-rtl .nd-progress-step-text, [dir="rtl"] .nd-wrapper .nd-progress-step-text,
.nd-wrapper.nd-rtl .nd-result-card, [dir="rtl"] .nd-wrapper .nd-result-card,
.nd-wrapper.nd-rtl .nd-service-card, [dir="rtl"] .nd-wrapper .nd-service-card,
.nd-wrapper.nd-rtl .nd-story-step, [dir="rtl"] .nd-wrapper .nd-story-step,
.nd-wrapper.nd-rtl .nd-recom-box h4, [dir="rtl"] .nd-wrapper .nd-recom-box h4,
.nd-wrapper.nd-rtl .nd-recom-box p, [dir="rtl"] .nd-wrapper .nd-recom-box p,
.nd-wrapper.nd-rtl .nd-footer-left p, [dir="rtl"] .nd-wrapper .nd-footer-left p,
.nd-wrapper.nd-rtl .nd-diagnosis-summary-box, [dir="rtl"] .nd-wrapper .nd-diagnosis-summary-box,
.nd-wrapper.nd-rtl .nd-validation-error, [dir="rtl"] .nd-wrapper .nd-validation-error,
.nd-wrapper.nd-rtl .nd-step-desc, [dir="rtl"] .nd-wrapper .nd-step-desc {
    text-align: right;
}

.nd-wrapper.nd-rtl .nd-timeline-content-pane ul,
[dir="rtl"] .nd-wrapper .nd-timeline-content-pane ul {
    margin-left: 0;
    margin-right: 1.5rem;
}

.nd-wrapper.nd-rtl .nd-label,
[dir="rtl"] .nd-wrapper .nd-label {
    flex-direction: row-reverse;
}

/* Mirror the select chevron for RTL */
.nd-wrapper.nd-rtl .nd-select,
[dir="rtl"] .nd-wrapper .nd-select {
    padding-right: 1rem;
    padding-left: 2.75rem;
    background-position: left 1rem center;
}

/* Cairo inside the engine's selects AND their dropdown options (desktop browsers
   honor option font; native mobile pickers are OS-drawn and can't be styled). */
.nd-wrapper.nd-rtl .nd-select, [dir="rtl"] .nd-wrapper .nd-select,
.nd-wrapper.nd-rtl .nd-select option, [dir="rtl"] .nd-wrapper .nd-select option,
.nd-wrapper.nd-rtl .nd-input, [dir="rtl"] .nd-wrapper .nd-input {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* Scroll progress fills right-to-left in the Arabic version */
.nd-wrapper.nd-rtl .nd-scroll-progress,
[dir="rtl"] .nd-wrapper .nd-scroll-progress {
    left: auto;
    right: 0;
}

/* Mirror the questionnaire/results split for RTL reading order.
   The 2-column template is DESKTOP-ONLY: without the media query this selector
   (higher specificity than the mobile stacking rule) kept the Arabic version in
   two side-by-side columns on phones -- reported live and fixed here. The rtl
   direction itself applies at every size. */
.nd-wrapper.nd-rtl .nd-workspace-split,
[dir="rtl"] .nd-wrapper .nd-workspace-split {
    direction: rtl;
}
@media (min-width: 1025px) {
    .nd-wrapper.nd-rtl .nd-workspace-split,
    [dir="rtl"] .nd-wrapper .nd-workspace-split {
        grid-template-columns: 1.2fr 1fr;
    }
}
.nd-wrapper.nd-rtl .nd-btn-row, [dir="rtl"] .nd-wrapper .nd-btn-row,
.nd-wrapper.nd-rtl .nd-hero-ctas, [dir="rtl"] .nd-wrapper .nd-hero-ctas,
.nd-wrapper.nd-rtl .nd-results-header, [dir="rtl"] .nd-wrapper .nd-results-header,
.nd-wrapper.nd-rtl .nd-gauge-box, [dir="rtl"] .nd-wrapper .nd-gauge-box,
.nd-wrapper.nd-rtl .nd-footer-contact, [dir="rtl"] .nd-wrapper .nd-footer-contact {
    direction: rtl;
}

/* Mirror the section nav for RTL */
.nd-wrapper.nd-rtl .nd-section-nav-link::after,
[dir="rtl"] .nd-wrapper .nd-section-nav-link::after {
    left: auto;
    right: 0;
    transform-origin: right;
}