@media (hover: hover) and (pointer: fine) { .cursor-ring { display: block; } }

@media (max-width: 600px) { .lb-arrow-prev { left: 8px; } .lb-arrow-next { right: 8px; } .lb-stage img, .lb-stage { max-width: 100vw; max-height: calc(100vh - 160px); } .lb-dots { display: none; } }

@media (max-width: 900px) {
      nav { height: 70px; }
      nav.scrolled { height: 60px; }
      .nav-links, .nav-cta { display: none; }
      .menu-toggle { display: flex; }
      .credentials-strip { display: none; }
      .hero {
    height: auto;
    min-height: 100svh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
      .hero-content {
    padding: 110px clamp(20px,5vw,28px) 40px;
    flex: 1;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-stats {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    padding: 24px clamp(20px,5vw,28px);
    justify-content: center;
    gap: 20px;
    border-top: 1px solid var(--border);
    background: rgba(8,8,8,0.5);
    z-index: 2;
  }
      .hero-number { display: none; }
      .hero-scroll { display: none; }
      .trust-bar {
    position: relative;
    bottom: auto;
    flex-direction: column;
    width: 100%;
  }
      .trust-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
    width: 100%;
    justify-content: center;
    font-size: .72rem;
    padding: 13px clamp(14px,2vw,24px);
  }
    .trust-item:last-child { border-bottom: none; }
      .split-section { grid-template-columns: 1fr; }
      .split-visual { min-height: 320px; order: -1; }
      .split-visual-overlay { display: none; }
      .split-content { text-align: center; align-items: center; }
      .split-feature { flex-direction: column; align-items: center; text-align: center; }
      .split-features { align-items: stretch; width: 100%; }
      .contact-grid { grid-template-columns: 1fr; gap: 52px; }
      .contact-info { text-align: center; }
      .contact-item { flex-direction: column; align-items: center; text-align: center; }
      .contact-item:first-of-type { margin-top: 40px; }
      .response-guarantee { flex-direction: column; align-items: center; text-align: center; }
      .re-cta { grid-template-columns: 1fr; text-align: center; }
      .re-cta-features { justify-content: center; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .portfolio-filters-wrap { align-items: center; }
                      .portfolio-item.large { grid-column: span 1; }
        .portfolio-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 17vw, 175px); }
        .portfolio-frame { outline-offset: 5px; }
.portfolio-cta-bar { padding: 18px 20px; }
.portfolio-header { flex-direction: column; align-items: center; text-align: center; }
.portfolio-filter-row { align-items: center; }
.portfolio-filters { justify-content: center; }
.portfolio-tally { display: none; }
.portfolio-cta-bar { flex-direction: column; text-align: center; justify-content: center; }
.portfolio-cta-bar-right { flex-direction: column; gap: 12px; }
.portfolio-count { text-align: center; }
      .form-row { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
      .footer-tagline { max-width: 100%; }
      .footer-links { align-items: center; }
      .footer-bottom { justify-content: center; flex-direction: column; text-align: center; }
      h2.display { text-align: center; }
      .section-desc { margin-left: auto; margin-right: auto; text-align: center; }
      .label { justify-content: center; }
      .faq-question { padding: 20px 20px; font-size: 1rem; }
      .faq-answer-inner { padding: 0 20px 20px; }
      .credentials-inner { gap: 16px; }
      .google-rating-banner { flex-direction: column; gap: 16px; text-align: center; }
    }

@media (max-width: 600px) {
      .services-grid { grid-template-columns: 1fr; }
      .process-grid { grid-template-columns: 1fr; }
              .portfolio-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(170px, 52vw, 250px); }
        .portfolio-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
        .portfolio-filters::-webkit-scrollbar { display: none; }
        .portfolio-tally { display: block; font-size: .6rem; }
        .portfolio-frame { outline-offset: 4px; }
        .portfolio-cta-bar { padding: 18px 20px 18px 26px; }
      .hero-stats { gap: 20px; }
      .re-cta-features { flex-direction: column; align-items: center; gap: 10px; }
      .trust-bar { flex-direction: column; }
      .trust-item { border-right: none; border-bottom: 1px solid var(--border); width: 100%; justify-content: center; }
      .trust-item:last-child { border-bottom: none; }
      .wa-float-label { display: none; }
      .credentials-inner { flex-direction: column; align-items: center; }
    }


@media (max-width: 900px) {
  .section-pad,
  .section-pad-sm {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .hero {
    min-height: 100svh;
    height: auto;
  }

  .hero-content {
    padding-top: 120px;
    padding-bottom: 168px;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 12vw, 4.5rem);
    line-height: 0.94;
  }

  .hero-sub {
    max-width: 34ch;
    font-size: 0.98rem;
  }

  .hero-actions {
    width: 100%;
    gap: 12px;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    left: 14px;
    right: 14px;
    bottom: 18px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-stat {
    min-height: 82px;
    padding: 16px 18px;
    border-left: 0 !important;
    border-radius: 18px;
    background: rgba(10,10,10,0.52);
    backdrop-filter: blur(14px);
  }

  .trust-bar {
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .trust-item {
    min-width: max-content;
    scroll-snap-align: start;
  }

  .services-grid,
  .split-section,
  .process-grid,
  .testimonials-grid,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .credentials-inner,
  .portfolio-filter-row,
  .portfolio-filters,
  .portfolio-cta-bar,
  .re-cta,
  .footer-bottom {
    grid-template-columns: 1fr !important;
    flex-direction: column;
    align-items: stretch;
  }

  .credentials-inner {
    gap: 12px;
  }

  .portfolio-filter-row {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .portfolio-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .filter-btn {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
  }

  .portfolio-frame,
  .portfolio-cta-bar,
  .re-cta,
  .google-rating-banner,
  .contact-hours {
    border-radius: 22px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(255px, auto);
  }

  .portfolio-item,
  .portfolio-item.large {
    grid-column: span 1 !important;
    min-height: 255px;
  }

  .portfolio-item-index,
  .portfolio-badge {
    top: 14px;
  }

  .portfolio-overlay {
    transform: translateY(0) !important;
    padding-top: 56px;
  }

  .portfolio-item-icon {
    opacity: 1;
    transform: none;
    width: 48px;
    height: 48px;
  }

  .lb-top-bar,
  .lb-bottom-bar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .lb-arrow {
    width: 46px;
    height: 46px;
  }

  .lb-dot {
    width: 54px;
    height: 40px;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .contact-form {
    gap: 14px;
  }

  .form-submit,
  .whatsapp-btn {
    width: 100%;
    justify-content: center;
  }

  .footer-socials {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .back-top {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  .container {
    width: min(100% - 28px, 1200px);
  }

  .hero-content {
    padding-top: 108px;
    padding-bottom: 186px;
  }

  .hero-eyebrow,
  .label,
  .form-label,
  .footer-col-title,
  .contact-hours-title {
    letter-spacing: 0.14em;
  }

  .hero-sub,
  .section-desc,
  .service-card p,
  .split-feature-desc,
  .testimonial-text,
  .contact-item-value,
  .faq-answer-inner,
  .footer-tagline {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .service-card,
  .process-step,
  .testimonial,
  .faq-item,
  .contact-item,
  .contact-hours,
  .google-rating-banner,
  .re-cta,
  .portfolio-cta-bar {
    border-radius: 20px;
  }

  /* portfolio-filters grid rule removed — definitive flex rules at line ~1136 */

  .portfolio-helper-note {
    font-size: 0.7rem;
  }

  .wa-float {
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}


@media (max-width: 900px) {
  .wa-float,
  .back-top {
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 140;
  }

  .wa-float {
    left: 14px;
  }

  .back-top {
    right: 14px;
  }

  .wa-float-btn,
  .back-top {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(0,0,0,0.24);
  }

  .faq-question {
    padding-right: 12px;
  }
}


@media (max-width: 900px) {
  .wa-float,
  .back-top {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 180;
  }

  .wa-float {
    left: 14px;
  }

  .back-top {
    right: 14px;
  }

  .wa-float-btn,
  .back-top {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(10,10,10,0.82);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 42px rgba(0,0,0,0.24), 0 0 0 1px rgba(255,255,255,0.02) inset;
    transition: transform 240ms var(--ease-out), box-shadow 240ms ease, border-color 220ms ease, background-color 220ms ease;
  }

  .wa-float-btn {
    display: grid;
    place-items: center;
  }

  .wa-float-btn:hover,
  .wa-float-btn:focus-visible,
  .back-top:hover,
  .back-top:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(223,192,138,0.55);
    box-shadow: 0 24px 56px rgba(0,0,0,0.28), 0 0 0 1px rgba(223,192,138,0.1) inset;
  }

  .wa-float-label {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .wa-float,
  .back-top {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .wa-float {
    left: 12px;
  }

  .back-top {
    right: 12px;
  }

  .wa-float-btn,
  .back-top {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }
}


@media (max-width: 900px) {
  .wa-float,
  .back-top {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 200;
  }

  .wa-float {
    left: 14px;
  }

  .back-top {
    right: 14px;
  }

  .wa-float-btn,
  .back-top {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px;
    min-height: 52px;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
    background: rgba(14,14,14,0.9) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.26), 0 0 0 1px rgba(255,255,255,0.03) inset;
    backdrop-filter: blur(14px);
  }

  .wa-float-btn svg,
  .back-top svg {
    width: 20px;
    height: 20px;
  }

  .wa-float-btn:hover,
  .wa-float-btn:focus-visible,
  .back-top:hover,
  .back-top:focus-visible,
  .back-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-2px);
    border-color: rgba(223,192,138,0.58) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(223,192,138,0.09) inset;
  }

  .wa-float-label {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .wa-float,
  .back-top {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .wa-float {
    left: 12px;
  }

  .back-top {
    right: 12px;
  }

  .wa-float-btn,
  .back-top {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px;
    min-height: 50px;
  }
}


/* ===== 2026 stability patch: floating buttons, footer socials, wide screens ===== */
@media (min-width: 1680px) {
  .container { max-width: 1480px; }
}
@media (max-width: 900px) {
  .footer-socials {
    width: 100%;
    justify-content: center !important;
    align-items: center;
    flex-wrap: wrap;
  }
  .wa-float,
  .back-top {
    position: fixed !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 220 !important;
  }
  .wa-float { left: 14px !important; }
  .back-top { right: 14px !important; }
  .wa-float-btn,
  .back-top {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 18px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(10,10,10,0.88) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 42px rgba(0,0,0,0.24) !important;
    touch-action: manipulation;
  }
  .wa-float-btn svg,
  .back-top svg { width: 20px !important; height: 20px !important; }
  .wa-float-label { display: none !important; }
  .back-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}
@media (max-width: 600px) {
  .wa-float,
  .back-top { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  .wa-float { left: 12px !important; }
  .back-top { right: 12px !important; }
  .wa-float-btn,
  .back-top {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
  }
}


/* ===== refinement patch: hero polish, RTL float stability, one-hand mobile ===== */
@media (max-width: 900px) {
  .hero {
    min-height: 100svh;
    display: flex;
    align-items: stretch;
  }

  .hero-content {
    padding-top: 132px !important;
    padding-bottom: 214px !important;
    justify-content: flex-start;
    gap: 14px;
  }

  .hero-eyebrow {
    margin-top: 0;
    padding: 10px 14px;
    max-width: min(100%, 30ch);
    line-height: 1.45;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  html[lang="el"] .hero-eyebrow {
    max-width: min(100%, 34ch);
    margin-top: 6px;
    font-size: 0.72rem;
    line-height: 1.5;
  }

  .hero h1 {
    margin-top: 4px;
    max-width: 9ch;
  }

  .hero-sub {
    max-width: 34ch;
  }

  .hero-actions {
    margin-top: 4px;
    gap: 10px;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    min-height: 54px;
    border-radius: 16px;
  }

  .hero-stats {
    bottom: 16px;
    gap: 12px;
  }

  .wa-float {
    left: 14px !important;
    right: auto !important;
  }

  .back-top {
    right: 14px !important;
    left: auto !important;
  }

  /* RTL: swap sides — wa-float goes RIGHT, back-top goes LEFT */
  html[dir="rtl"] .wa-float {
    left: auto !important;
    right: 14px !important;
  }
  html[dir="rtl"] .back-top {
    right: auto !important;
    left: 14px !important;
  }

  .wa-float-btn {
    background: linear-gradient(180deg, #29dc68, #1fb455) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 20px 44px rgba(37,211,102,0.28) !important;
  }

  .back-top {
    background: linear-gradient(180deg, #dfc08a, #c9a96e) !important;
    color: #080808 !important;
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: 0 18px 40px rgba(201,169,110,0.24) !important;
  }
}

@media (max-width: 600px) {
  .hero-content {
    padding-top: 124px !important;
    padding-bottom: 218px !important;
  }

  .hero-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.11em;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.75rem);
    line-height: 0.98;
  }

  .hero-sub {
    font-size: 0.94rem;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    min-height: 52px;
    font-size: 0.75rem;
  }

  .wa-float {
    left: 12px !important;
  }

  .back-top {
    right: 12px !important;
  }

  /* RTL: swap sides at phone size */
  html[dir="rtl"] .wa-float {
    left: auto !important;
    right: 12px !important;
  }
  html[dir="rtl"] .back-top {
    right: auto !important;
    left: 12px !important;
  }
}


/* ===== v3 refinement: mobile hero cleanup and footer centering ===== */
@media (max-width: 600px) {
  .hero-eyebrow,
  .hero-rule {
    display: none !important;
  }

  .hero-content {
    padding-top: 118px !important;
    gap: 12px;
  }

  .footer-reg {
    width: 100%;
    justify-content: center !important;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ===== v4 refinement: hero visibility rules and alignment =====
   Greek and Russian share the same rule: their hero copy is long
   and the eyebrow + horizontal rule make the hero visually crowded.
   Hide both for el and ru (en and he keep them). */
html[lang="el"] .hero-eyebrow,
html[lang="el"] .hero-rule,
html[lang="ru"] .hero-eyebrow,
html[lang="ru"] .hero-rule {
  display: none !important;
}

@media (max-width: 1024px) {
  .hero-eyebrow,
  .hero-rule {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .hero-content {
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-inline: auto;
  }

  .hero-sub,
  .hero-actions {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 100svh;
    align-items: center;
  }

  .hero-content {
    min-height: 100svh;
    width: min(100%, 640px);
    margin-inline: auto;
    padding-top: max(104px, env(safe-area-inset-top, 0px) + 88px) !important;
    padding-bottom: calc(196px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }

  .hero h1 {
    max-width: 10ch;
    margin-inline: auto;
  }

  .hero-sub {
    max-width: 32ch;
    margin-inline: auto;
  }

  .hero-actions {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    align-items: stretch;
  }

  .hero-stats {
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 600px) {
  .hero-content {
    width: min(100%, 100%);
    padding-top: max(98px, env(safe-area-inset-top, 0px) + 82px) !important;
    padding-bottom: calc(188px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 12px;
  }

  .hero h1 {
    max-width: 9.5ch;
    font-size: clamp(2.35rem, 10.8vw, 3.7rem);
    line-height: 0.98;
  }

  .hero-sub {
    max-width: 30ch;
    font-size: 0.94rem;
    text-wrap: balance;
  }

  .hero-actions {
    max-width: 100%;
    gap: 10px;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    min-height: 52px;
  }
}


/* ===== v5 refinement: Greek hero title and smaller mobile CTAs ===== */
html[lang="el"] .hero h1 {
  font-size: clamp(3.2rem, 5.2vw, 5.2rem) !important;
  max-width: 11ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 900px) {
  html[lang="el"] .hero h1 {
    font-size: clamp(2.25rem, 8.6vw, 3.45rem) !important;
    max-width: 11ch;
    line-height: 1.02;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding-top: max(92px, env(safe-area-inset-top, 0px) + 76px) !important;
    padding-bottom: calc(176px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
  }

  .hero h1 {
    font-size: clamp(2.1rem, 10vw, 3.05rem) !important;
    max-width: 9.2ch;
  }

  .hero-sub {
    font-size: 0.9rem !important;
    max-width: 29ch;
  }

  .hero-actions {
    gap: 8px !important;
    max-width: 100%;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    min-height: 46px !important;
    padding: 12px 18px !important;
    font-size: 0.69rem !important;
    letter-spacing: 0.12em !important;
    border-radius: 14px !important;
  }

  .hero-actions .btn-primary svg,
  .hero-actions .btn-ghost svg {
    width: 13px;
    height: 13px;
  }
}


/* ===== hostinger ready polish: centered hero stats and tighter phone hero ===== */
@media (max-width: 900px) {
  .hero-stats {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(calc(100% - 28px), 460px);
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .hero-content {
    width: min(100%, 100%);
    justify-content: center;
    text-align: center;
  }

  .hero-actions {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-stats {
    width: min(calc(100% - 24px), 370px);
    gap: 10px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .hero-stat {
    min-width: 0;
    flex: 1 1 0;
    text-align: center;
  }

  .hero-stat-num {
    justify-content: center;
  }
}


/* ===== final stability patch ===== */
@media (max-width: 900px) {
  .hero-stats {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 28px), 460px) !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.menu-open .wa-float,
  body.menu-open .back-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(18px) scale(0.92) !important;
    /* Kill the floatSlideIn entrance animation (animation-fill-mode: both)
       so it can't override the hide. Drop z-index below mobile menu (99). */
    animation: none !important;
    z-index: 1 !important;
  }
}

@media (max-width: 600px) {
  .hero-stats {
    width: min(calc(100% - 24px), 370px) !important;
    gap: 10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .hero-stat {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    text-align: center !important;
  }

  .hero-stat-num,
  .hero-stat-label {
    justify-content: center !important;
    text-align: center !important;
  }
}





/* =====================================================================
   HERO STATS — Perfect centering on all phones
   ===================================================================== */
@media (max-width: 900px) {
  .hero-stats {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 24px clamp(16px, 5vw, 28px) !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hero-stat { text-align: center !important; }
}



/* =====================================================================
   ARCHITECH — FINAL CLEAN PATCH v3
   Authoritative overrides. Every rule here has been traced for
   specificity conflicts. This block always loads last.
   ===================================================================== */

/* ── 1. BACK-TO-TOP: hidden until scrolled ──────────────────────────
   animations.css sets opacity:0 by default.
   responsive.css earlier blocks override with opacity:1 !important.
   We restore correct behaviour here with higher specificity.         */
@media (max-width: 900px) {
  .back-top:not(.visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(0.88) !important;
    transition: opacity .35s ease, visibility .35s, transform .35s ease !important;
  }
  .back-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }
}

/* ── 2. PORTFOLIO: all items identical height on every screen ────────
   portfolio.css has .portfolio-item.large { min-height: 420px }.
   min-height beats height, so we must zero it explicitly.
   Desktop: clamp(220px, 22vw, 320px) — scales with viewport.
   Tablet:  fixed 220px.
   Phone:   full-width single column, taller cells.               */

/* Desktop — uniform 390×265 grid (3 columns × ~390px = ~1170px container) */
.portfolio-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 265px !important;
}
.portfolio-item,
.portfolio-item.large {
  height: 265px !important;
  min-height: 0 !important;
  grid-column: span 1 !important;
}
.portfolio-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Tablet (900px and below) */
@media (max-width: 900px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 230px !important;
  }
  .portfolio-item,
  .portfolio-item.large {
    height: 230px !important;
    min-height: 0 !important;
    grid-column: span 1 !important;
  }
}

/* Phone (600px and below) — PREMIUM PORTFOLIO MOBILE
   ════════════════════════════════════════════════════
   Design philosophy:
   • Full-width cards at 320px — images breathe, nothing feels cropped
   • Card-based layout with generous 16px gap and 20px radius
   • Premium depth: multi-layer shadow + subtle gold inset border
   • Floating category badge at top — always visible, acts as label
   • Clean bottom panel: tight gradient darkens only bottom 35%
   • Prominent 48px gold view button — unmistakable tap affordance
   • Architectural gold top-line accent on every card
   • Index number as architectural drawing reference (top-left)
   • Instant tap feedback: press-down + gold border pulse
   • Zero blur, zero dim — images are crisp and vivid at all times
   ════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Frame: dissolve the container so cards float independently ── */
  .portfolio-frame {
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .portfolio-frame::before,
  .portfolio-frame::after { display: none !important; }

  /* ── Grid: single column, generous spacing ── */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
    background: transparent !important;
    perspective: none !important;
  }

  /* ── Cards: tall, rounded, premium depth ── */
  .portfolio-item,
  .portfolio-item.large {
    height: 320px !important;
    min-height: 0 !important;
    grid-column: span 1 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative;
    transform-style: flat !important;
    /* CRITICAL: prevent JS blur from affecting the card */
    filter: none !important;
    -webkit-filter: none !important;
    /* Premium multi-layer shadow */
    box-shadow:
      0 2px 8px rgba(0,0,0,0.18),
      0 12px 40px rgba(0,0,0,0.28),
      0 0 0 1px rgba(255,255,255,0.05) inset !important;
    /* Smooth transition for tap feedback */
    transition:
      transform 280ms var(--ease-out),
      box-shadow 280ms ease !important;
  }

  /* ── Tap feedback: press-down + gold border glow ── */
  .portfolio-item:active {
    transform: scale(0.975) !important;
    box-shadow:
      0 2px 8px rgba(0,0,0,0.22),
      0 6px 20px rgba(0,0,0,0.3),
      0 0 0 2px rgba(201,169,110,0.35) inset !important;
    transition: transform 80ms ease, box-shadow 80ms ease !important;
  }

  /* ── Gold top accent line — architectural detail ── */
  .portfolio-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(
      90deg,
      rgba(201,169,110,0.08) 0%,
      rgba(201,169,110,0.65) 25%,
      rgba(201,169,110,0.65) 75%,
      rgba(201,169,110,0.08) 100%
    ) !important;
    z-index: 6 !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* ── Kill desktop hover pseudo-elements ── */
  .portfolio-item::after { display: none !important; }

  /* ── Image: crisp, vivid, full coverage ── */
  .portfolio-item img {
    filter: none !important;
    -webkit-filter: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    transition: none !important;
    display: block !important;
  }

  /* ── Overlay: transparent top → solid dark bottom panel ──
     Only the bottom 35% is darkened — the image dominates. */
  .portfolio-item .portfolio-overlay {
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 20px 20px !important;
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 50%,
      rgba(0,0,0,0.15) 62%,
      rgba(0,0,0,0.72) 82%,
      rgba(0,0,0,0.92) 100%
    ) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
  }

  /* ── Category tag: gold eyebrow above title ── */
  .portfolio-item .portfolio-overlay-tag {
    font-size: 0.56rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    margin-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  /* The gold dash before the tag text */
  .portfolio-item .portfolio-overlay-tag::before {
    content: '' !important;
    width: 14px !important;
    height: 1px !important;
    background: rgba(201,169,110,0.6) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
  }

  /* ── Title: clean, white, readable ── */
  .portfolio-item .portfolio-overlay-title {
    font-size: 1.15rem !important;
    line-height: 1.18 !important;
    max-width: calc(100% - 56px) !important;
    color: #fff !important;
    font-weight: 400 !important;
  }

  /* Category badge — HIDDEN on phone per user request */
  .portfolio-badge {
    display: none !important;
  }

  /* View button — prominent gold circle, bottom-right */
  .portfolio-item .portfolio-item-icon {
    opacity: 1 !important;
    transform: scale(1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: absolute !important;
    width: 46px !important;
    height: 46px !important;
    bottom: 16px !important;
    right: 16px !important;
    border-radius: 50% !important;
    background: rgba(201,169,110,0.2) !important;
    border: 1px solid rgba(201,169,110,0.5) !important;
    color: var(--gold) !important;
    box-shadow:
      0 4px 14px rgba(0,0,0,0.35),
      0 0 0 4px rgba(201,169,110,0.06) !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }
  .portfolio-item:active .portfolio-item-icon {
    background: rgba(201,169,110,0.45) !important;
    border-color: rgba(201,169,110,0.75) !important;
  }
  [dir="rtl"] .portfolio-item .portfolio-item-icon {
    right: auto !important;
    left: 16px !important;
  }

  /* Index number — BIG architectural watermark like blueprint sheet numbering.
     Large enough to be a design element, faded enough to not compete. */
  .portfolio-item-index {
    display: block !important;
    position: absolute !important;
    opacity: 1 !important;
    transform: none !important;
    font-family: var(--font-serif) !important;
    font-size: clamp(2.8rem, 12vw, 3.8rem) !important;
    font-weight: 200 !important;
    font-style: italic !important;
    top: 8px !important;
    left: 14px !important;
    color: rgba(201,169,110,0.12) !important;
    z-index: 3 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    letter-spacing: -0.03em !important;
  }
  [dir="rtl"] .portfolio-item-index {
    left: auto !important;
    right: 14px !important;
  }
}

/* ── 3. PORTFOLIO FILTER BUTTONS — premium on phone ─────────────────*/
@media (max-width: 600px) {
  .portfolio-filter-row {
    position: static !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    /* Gradient fade at trailing edge hints that pills are scrollable */
    position: relative !important;
  }
  .portfolio-filter-row::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 48px !important;
    background: linear-gradient(90deg, transparent, var(--black, #080808) 85%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
  /* RTL: scroll fade on the left edge instead */
  [dir="rtl"] .portfolio-filter-row::after {
    right: auto !important;
    left: 0 !important;
    background: linear-gradient(270deg, transparent, var(--black, #080808) 85%) !important;
  }
  .portfolio-filters {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 4px 48px 10px 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  [dir="rtl"] .portfolio-filters {
    padding: 4px 2px 10px 48px !important;
  }
  .portfolio-filters::-webkit-scrollbar { display: none !important; }
  .filter-btn {
    flex: 0 0 auto !important;
    height: 42px !important;
    padding: 0 20px !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    border-radius: 999px !important;
    border: 1px solid rgba(201,169,110,0.22) !important;
    background: rgba(255,255,255,0.03) !important;
    color: var(--muted) !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    touch-action: manipulation !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
  }
  /* Tap feedback on filter pills */
  .filter-btn:active {
    transform: scale(0.94) !important;
    transition: transform 80ms ease !important;
  }
  .filter-btn.active {
    background: var(--gold) !important;
    color: var(--black) !important;
    border-color: var(--gold) !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 20px rgba(201,169,110,0.3) !important;
  }

  /* Filter scroll hint — visible on mobile, gently pulses to draw the eye.
     Tells users they can swipe to see more categories. */
  .portfolio-filter-hint {
    display: block !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(201,169,110,0.55) !important;
    text-align: center !important;
    margin: 4px 0 12px !important;
    font-family: var(--font-sans) !important;
    animation: filterHintPulse 2.6s ease-in-out infinite !important;
  }
  @keyframes filterHintPulse {
    0%, 100% { opacity: 0.45; transform: translateX(0); }
    50%      { opacity: 0.95; transform: translateX(4px); }
  }
  /* RTL: pulse slides the opposite direction */
  [dir="rtl"] .portfolio-filter-hint {
    animation-name: filterHintPulseRTL !important;
  }
  @keyframes filterHintPulseRTL {
    0%, 100% { opacity: 0.45; transform: translateX(0); }
    50%      { opacity: 0.95; transform: translateX(-4px); }
  }
}

/* Hide filter hint on desktop/tablet — only visible on phone */
@media (min-width: 601px) {
  .portfolio-filter-hint { display: none !important; }
}

/* ── 4. RTL HEBREW — scoped precisely to avoid breaking desktop ──────*/

/* Desktop hero stays centred in every language */
[dir="rtl"] .label { flex-direction: row-reverse; }
[dir="rtl"] .label::before { display: none; }
[dir="rtl"] .label::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
  flex-shrink: 0;
}

/* Buttons: reverse flex so arrow is on correct side */
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-ghost,
[dir="rtl"] .nav-cta { flex-direction: row-reverse; }
[dir="rtl"] .btn-primary svg,
[dir="rtl"] .btn-ghost svg { transform: scaleX(-1); }
[dir="rtl"] .btn-primary:hover svg { transform: scaleX(-1) translateX(4px); }

/* Service cards */
[dir="rtl"] .service-card { text-align: right; }
[dir="rtl"] .service-arrow { left: 28px; right: auto; transform: scaleX(-1); }

/* About split */
[dir="rtl"] .split-content { text-align: right; align-items: flex-end; }
[dir="rtl"] .split-feature { flex-direction: row-reverse; text-align: right; }

/* Process */
[dir="rtl"] .process-step { text-align: right; }

/* Testimonials */
[dir="rtl"] .testimonial { text-align: right; }
[dir="rtl"] .testimonial-author { flex-direction: row-reverse; }

/* FAQ */
[dir="rtl"] .faq-question { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .faq-answer-inner { text-align: right; }

/* Contact */
[dir="rtl"] .contact-item { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .response-guarantee { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .form-label { text-align: right; }
[dir="rtl"] .form-submit { flex-direction: row-reverse; }
[dir="rtl"] .form-submit svg { transform: scaleX(-1); }
[dir="rtl"] .whatsapp-btn { flex-direction: row-reverse; }

/* Footer */
[dir="rtl"] footer { text-align: right; }
[dir="rtl"] .footer-links { align-items: flex-end; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
[dir="rtl"] .footer-socials { flex-direction: row-reverse; }
[dir="rtl"] .footer-reg { flex-direction: row-reverse; }

/* Credentials */
[dir="rtl"] .cred-item { text-align: right; }
[dir="rtl"] .cred-badge { flex-direction: row-reverse; }

/* Mobile menu */
[dir="rtl"] .mobile-menu-links { text-align: right; }
[dir="rtl"] .mobile-menu-links li { flex-direction: row-reverse; }
[dir="rtl"] .mobile-menu-links a { text-align: right; }
[dir="rtl"] .mobile-menu-footer { align-items: flex-end; }

/* Trust bar */
[dir="rtl"] .trust-item { flex-direction: row-reverse; }

/* Form messages */
[dir="rtl"] .form-message-body { text-align: right; }
[dir="rtl"] .form-error { text-align: right; }

/* Google banner */
[dir="rtl"] .google-rating-banner { flex-direction: row-reverse; }
[dir="rtl"] .google-rating-left { flex-direction: row-reverse; }

/* Portfolio */
[dir="rtl"] .portfolio-overlay { text-align: right; }

/* RTL floating button sides */
[dir="rtl"] .wa-float  { left: auto !important; right: 16px !important; }
[dir="rtl"] .back-top  { right: auto !important; left: 16px !important; }
@media (max-width: 900px) {
  [dir="rtl"] .wa-float { left: auto !important; right: 14px !important; }
  [dir="rtl"] .back-top { right: auto !important; left: 14px !important; }
}
@media (max-width: 600px) {
  [dir="rtl"] .wa-float { left: auto !important; right: 12px !important; }
  [dir="rtl"] .back-top { right: auto !important; left: 12px !important; }
}

/* RTL hero: centred on desktop, right-aligned only on mobile */
@media (max-width: 1024px) {
  [dir="rtl"] .hero-content {
    text-align: right;
    align-items: flex-end;
  }
  [dir="rtl"] .hero-actions { flex-direction: column; align-items: stretch; }
  [dir="rtl"] .hero-eyebrow { text-align: right; }
  [dir="rtl"] .split-content { text-align: right; align-items: flex-end; }
  [dir="rtl"] .contact-item { text-align: right; align-items: flex-end; }
  [dir="rtl"] .response-guarantee { text-align: right; align-items: flex-end; }
  /* mobile-menu-links li transform moved to RTL COMPREHENSIVE FIX block below */
}
@media (max-width: 900px) {
  /* On small mobile, centre everything in RTL for readability */
  [dir="rtl"] .hero-content { text-align: center; align-items: center; }
  [dir="rtl"] .hero-actions { flex-direction: column; align-items: stretch; }
  [dir="rtl"] .hero-eyebrow { text-align: center; }
}

/* =====================================================================
   RTL COMPREHENSIVE FIX — every directional element on the site
   Each rule is numbered and commented for auditability.
   ===================================================================== */

/* R1. Mobile menu: slides from right in LTR (translateX(100%)).
      In RTL it must slide from the LEFT edge (translateX(-100%)).
      The .open state sets translateX(0) which works for both. */
[dir="rtl"] .mobile-menu { transform: translateX(-100%); }

/* R2. Mobile menu link entrance animation: the stagger translateX(-28px)
      pushes links leftward in LTR. In RTL, push them rightward. */
@media (max-width: 1024px) {
  [dir="rtl"] .mobile-menu-links li { transform: translateX(28px); }
  [dir="rtl"] .mobile-menu.open .mobile-menu-links li { transform: translateX(0); }
}

/* R3. Nav links underline ::after — expands left→right in LTR.
      In RTL it should expand right→left. */
[dir="rtl"] .nav-links a::after { left: 100%; right: 0; }
[dir="rtl"] .nav-links a:hover::after { left: 0; }

/* R4. Hero decorative "#1" watermark — sits at right edge in LTR.
      Flip to left edge in RTL. */
[dir="rtl"] .hero-number { right: auto; left: clamp(20px,4vw,48px); }

/* R5. Hero scroll indicator — positioned right:48px in LTR.
      Flip to left in RTL. */
[dir="rtl"] .hero-scroll { right: auto; left: 48px; }

/* R6. Trust bar — border-right dividers between items.
      In RTL the divider should be on the left. */
[dir="rtl"] .trust-item { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .trust-item:last-child { border-left: none; }

/* R7. Service card ::before (gold side accent line) — sits at left edge
      via inset:0 + width:3px. In RTL, push it to the right edge. */
[dir="rtl"] .service-card::before { left: auto; right: 0; }

/* R8. Service arrow on desktop — base is right:24px.
      Already have [dir="rtl"] .service-arrow { left: 28px; right: auto }
      but the base in services.css also sets right:22px in a later rule.
      Belt-and-suspenders: */
[dir="rtl"] .service-arrow,
[dir="rtl"] .service-cta { right: auto !important; left: 22px !important; }

/* R9. FAQ question ::before gold line — sits at left:0 in LTR.
      In RTL, flip to right edge. */
[dir="rtl"] .faq-question::before { left: auto; right: 0; }

/* R10. FAQ question padding-left on hover/open — in RTL use padding-right. */
[dir="rtl"] .faq-question:hover,
[dir="rtl"] .faq-question:focus-visible,
[dir="rtl"] .faq-question.open {
  padding-left: 0;
  padding-right: 18px;
}

/* R11. Portfolio CTA bar ::before (gold vertical line) — left:0 in LTR.
       In RTL, flip to right edge. */
[dir="rtl"] .portfolio-cta-bar::before { left: auto; right: 0; }
[dir="rtl"] .portfolio-cta-bar-link svg { transform: scaleX(-1); }
[dir="rtl"] .portfolio-cta-bar-link:hover svg { transform: scaleX(-1) translateX(-4px); }

/* R12. Upload thumb remove button — top:4px right:4px in LTR.
       In RTL, flip to left side. */
[dir="rtl"] .upload-thumb-remove { right: auto; left: 4px; }

/* R13. Mobile menu ::after watermark text — positioned at right edge.
       In RTL, flip to left edge. */
[dir="rtl"] .mobile-menu::after { right: auto; left: clamp(20px,5vw,36px); }

/* R14. WhatsApp float label — in LTR it extends to the right of the button
       (margin-left:-6px, border-radius 0 24 24 0, translateX(-8px)).
       In RTL it should extend to the LEFT of the button. */
[dir="rtl"] .wa-float-label {
  margin-left: 0;
  margin-right: -6px;
  border-radius: 24px 0 0 24px;
  transform: translateX(8px);
}
[dir="rtl"] .wa-float:hover .wa-float-label { transform: translateX(0); }

/* R15. About section split-visual-overlay — gradient fades "to right"
       (content is on the right in LTR). In RTL, content is on the left,
       so the fade must go "to left". */
[dir="rtl"] .split-visual-overlay {
  background: linear-gradient(to left, transparent 60%, var(--black));
}

/* R16. Form success/error message — icon + body layout.
       The icon sits on the left via flex row. In RTL, reverse.
       Also flip the asymmetric padding (28 28 28 24 → 28 24 28 28)
       and the top accent gradient direction. */
[dir="rtl"] .form-message {
  flex-direction: row-reverse;
  text-align: right;
  padding: 28px 24px 28px 28px;
}
[dir="rtl"] .form-message--success::before {
  background: linear-gradient(270deg, #1db954, rgba(29,185,84,.2));
}
[dir="rtl"] .form-message--error::before {
  background: linear-gradient(270deg, #e53935, rgba(229,57,53,.2));
}

/* R17. Contact response-guarantee icon — flex row with icon on left.
       Already handled above. Verify the SVG arrow flips. */
[dir="rtl"] .response-guarantee svg { transform: scaleX(-1); }

/* =====================================================================
   END RTL COMPREHENSIVE FIX
   ===================================================================== */

/* =====================================================================
   HEBREW PERFECTION BLOCK
   Hebrew letters do not have inter-character spacing the way Latin does,
   and uppercase tracking ("letter-spacing: .2em" + "text-transform:
   uppercase") makes Hebrew look broken. We surgically reset those for
   every element where the original design relied on uppercase tracking.
   Also hardens RTL flow on form, nav, lightbox, lang modal and footer
   that were not yet covered by the existing RTL block.
   ===================================================================== */

/* 1. Kill letter-spacing + uppercase on every element where the design
      uses Latin-typography tracking. Hebrew renders cleanly without it. */
html[lang="he"] .hero-eyebrow,
html[lang="he"] .hero-sub,
html[lang="he"] .hero-stat-label,
html[lang="he"] .hero-scroll,
html[lang="he"] .label,
html[lang="he"] .nav-link,
html[lang="he"] .nav-cta,
html[lang="he"] .nav-lang-btn,
html[lang="he"] .nav-logo-text,
html[lang="he"] .btn-primary,
html[lang="he"] .btn-ghost,
html[lang="he"] .form-label,
html[lang="he"] .form-submit,
html[lang="he"] .whatsapp-btn,
html[lang="he"] .footer-col-title,
html[lang="he"] .footer-reg,
html[lang="he"] .footer-copy,
html[lang="he"] .footer-tagline,
html[lang="he"] .footer-links a,
html[lang="he"] .marquee-item,
html[lang="he"] .service-card,
html[lang="he"] .service-name,
html[lang="he"] .process-step-num,
html[lang="he"] .process-step-title,
html[lang="he"] .testimonial-author,
html[lang="he"] .cred-badge,
html[lang="he"] .portfolio-tag,
html[lang="he"] .portfolio-badge,
html[lang="he"] .portfolio-item-index,
html[lang="he"] .lang-option-name,
html[lang="he"] .lang-modal-title,
html[lang="he"] .lb-tag,
html[lang="he"] .upload-text,
html[lang="he"] .upload-hint,
html[lang="he"] .upload-count,
html[lang="he"] .form-message-title,
html[lang="he"] .form-error,
html[lang="he"] .response-guarantee,
html[lang="he"] .trust-item,
html[lang="he"] .mobile-menu-links a,
html[lang="he"] .mobile-menu-tagline,
html[lang="he"] .mobile-menu-phone,
html[lang="he"] .filter-btn,
html[lang="he"] .wa-float-label,
html[lang="he"] .form-input,
html[lang="he"] .form-textarea,
html[lang="he"] .form-select,
html[lang="he"] .service-num,
html[lang="he"] .section-desc,
html[lang="he"] .cred-label,
html[lang="he"] .portfolio-cta-bar-link,
html[lang="he"] .portfolio-helper-note,
html[lang="he"] .portfolio-tally,
html[lang="he"] .portfolio-overlay-tag,
html[lang="he"] .split-feature-title,
html[lang="he"] .faq-question,
html[lang="he"] .testimonial-text,
html[lang="he"] .contact-hours-title,
html[lang="he"] .contact-item-label,
html[lang="he"] .process-step-desc,
html[lang="he"] .service-card h3,
html[lang="he"] .service-card p {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* 2. Hebrew-friendly font stack — use system Hebrew where available,
      then fall back to the existing site stack. Improves glyph clarity
      especially on Windows and old Android. */
html[lang="he"] body,
html[lang="he"] input,
html[lang="he"] textarea,
html[lang="he"] select,
html[lang="he"] button {
  font-family: "Heebo", "Rubik", "Assistant", "Segoe UI", -apple-system,
               BlinkMacSystemFont, system-ui, sans-serif;
}

/* 3. Stat numbers stay LTR — "500+" must never become "+500" because
      digits are bidi-neutral. Force LTR isolation on every numeric span. */
html[lang="he"] .hero-stat-num,
html[lang="he"] .hero-stat-num .num,
html[lang="he"] .hero-stat-num .suffix,
html[lang="he"] .stat-num,
html[lang="he"] [data-counter] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* 4. Form bits the existing RTL block missed.
      - Phone, email and URL inputs must stay LTR so the user types
        "+357" not "+357‏".
      - Service select aligns to the right edge.
      - Upload zone hint text right-aligns.
      - Form WhatsApp button arrow flips. */
html[lang="he"] input[type="tel"],
html[lang="he"] input[type="email"],
html[lang="he"] input[type="url"],
html[lang="he"] input[type="number"] {
  direction: ltr;
  text-align: right;
}
html[lang="he"] .form-select { text-align: right; background-position: left 14px center; padding-left: 38px; padding-right: 14px; }
html[lang="he"] .upload-zone { text-align: center; }
html[lang="he"] .upload-text,
html[lang="he"] .upload-hint,
html[lang="he"] .upload-count { text-align: center; }
html[lang="he"] .form-submit svg { transform: scaleX(-1); }
/* NOTE: .whatsapp-btn svg is intentionally NOT flipped — it's the
   WhatsApp brand logo (speech bubble), not a directional arrow. */

/* 5. Nav language modal + mobile menu RTL polish. */
html[lang="he"] .lang-options { direction: rtl; }
html[lang="he"] .lang-option { flex-direction: row-reverse; text-align: right; }
html[lang="he"] .lang-modal-title { text-align: right; }
html[lang="he"] .mobile-menu-cta .btn-primary { flex-direction: row-reverse; }
html[lang="he"] .mobile-menu-cta .btn-primary svg { transform: scaleX(-1); }

/* 6. Lightbox info panel — title and tag flip to right alignment. */
html[lang="he"] .lb-info { text-align: right; }
html[lang="he"] .lb-tag,
html[lang="he"] .lb-title { text-align: right; }

/* 7. Hero on phone (Hebrew): centre everything just like the global
      mobile rule does, but force the Hebrew title to wrap correctly
      by adding word-break support for long compound words. */
@media (max-width: 900px) {
  html[lang="he"] .hero h1 { word-break: normal; overflow-wrap: break-word; line-height: 1.05; }
  html[lang="he"] .hero-sub { text-align: center; }
  html[lang="he"] .hero-stats { direction: rtl; }
  html[lang="he"] .hero-actions .btn-primary,
  html[lang="he"] .hero-actions .btn-ghost { justify-content: center; }
}

/* 8. Buttons + link arrows everywhere — keep the visual "forward"
      direction on RTL by mirroring SVG arrows. The existing RTL block
      already does this for nav buttons; this catches the ones it missed. */
html[lang="he"] .service-arrow,
html[lang="he"] .footer-link svg,
html[lang="he"] .read-more svg,
html[lang="he"] .portfolio-item-icon svg { transform: scaleX(-1); }

/* 9. Numbers inside text (phone numbers, ratings) — keep LTR. */
html[lang="he"] a[href^="tel:"],
html[lang="he"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
html[lang="he"] .trust-stars { direction: ltr; unicode-bidi: isolate; }

/* 10. Cursor ring (desktop only) — reverse hover offset on RTL. */
html[lang="he"] .cursor-ring.hovered { transform: translate(-50%, -50%) scale(1.7); }

/* 11. Lang modal close button — sits top-right in LTR; mirror to top-left
       for RTL so it lands where Hebrew users expect to find it. */
html[lang="he"] .lang-modal-close { right: auto; left: 16px; }

/* 12. Nav CTA "Make an Appointment" — the gold pill in the navbar.
       Already covered by [dir="rtl"] .nav-cta { flex-direction: row-reverse }
       but the inner SVG arrow needs an explicit flip for full visual parity. */
html[lang="he"] .nav-cta svg { transform: scaleX(-1); }
html[lang="he"] .nav-cta:hover svg { transform: scaleX(-1) translateX(4px); }

/* 13. Full-width buttons in RTL (form submit, mobile hero buttons,
       mobile menu CTA, WhatsApp form button). When width:100% they keep
       text-align via justify-content; the icon side comes from
       flex-direction: row-reverse already declared above. We just need
       to make sure the arrow visually points "forward" (toward the start
       of the line in RTL, which is the right edge). */
html[lang="he"] .form-submit,
html[lang="he"] .whatsapp-btn,
html[lang="he"] .mobile-menu-cta .btn-primary { justify-content: center; }

/* 14. Mobile hero buttons in Hebrew — when stacked column-style the
       arrow needs to land on the right (visual end of the line for RTL).
       The existing rule sets row-reverse + scaleX(-1); centre the content. */
@media (max-width: 900px) {
  html[lang="he"] .hero-actions .btn-primary,
  html[lang="he"] .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================================
   RUSSIAN — belt-and-suspenders hero hide
   The primary rule above (line ~754) already hides hero-eyebrow and
   hero-rule for ru. This is a higher-specificity backup so future
   component overrides cannot re-show them under any breakpoint.
   ===================================================================== */
html[lang="ru"] .hero .hero-eyebrow,
html[lang="ru"] .hero .hero-rule,
html[lang="el"] .hero .hero-eyebrow,
html[lang="el"] .hero .hero-rule {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
}


/* =====================================================================
   IPAD / TABLET OPTIMIZATION (768 – 1024 px)
   Many elements jump straight from desktop to phone. This tier gives
   tablets their own polish — better spacing, tighter grids, and
   readability tuning.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Hero: comfortable tablet padding */
  .hero-content {
    padding-top: 110px !important;
    padding-bottom: 200px !important;
    max-width: 700px;
  }
  .hero h1 {
    font-size: clamp(2.8rem, 7vw, 4.2rem);
  }
  .hero-sub {
    font-size: 0.98rem;
    max-width: 480px;
  }
  .hero-stats {
    gap: clamp(20px, 4vw, 40px) !important;
  }

  /* Trust bar: 2×2 on tablet instead of 4-across */
  .trust-bar {
    flex-wrap: wrap;
    justify-content: center;
  }
  .trust-item {
    flex: 1 1 45%;
    justify-content: center;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
  }
  .trust-item:nth-child(odd) {
    border-right: 1px solid var(--border);
  }
  .trust-item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  /* RTL trust bar on tablet */
  [dir="rtl"] .trust-item { border-right: none; border-left: none; }
  [dir="rtl"] .trust-item:nth-child(odd) { border-right: none; border-left: 1px solid var(--border); }

  /* Footer: 2-column grid for tablet */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 32px !important;
  }

  /* FAQ: slightly more compact */
  .faq-question { padding: 22px 26px; }
  .faq-answer-inner { padding: 0 26px 24px; }

  /* Process: 2-column on tablet */
  .process-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Credentials: tighter, 3-column instead of wrapping */
  .credentials-inner {
    gap: 10px !important;
    flex-wrap: wrap;
  }

  /* About split: stack vertically on tablet */
  .split-section {
    grid-template-columns: 1fr !important;
  }
  .split-visual {
    min-height: 400px !important;
  }

  /* Portfolio: 2-column with consistent height */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: clamp(200px, 22vw, 280px) !important;
  }
  .portfolio-item,
  .portfolio-item.large {
    height: auto !important;
    min-height: 0 !important;
    grid-column: span 1 !important;
  }

  /* Contact grid: single column on tablet for better form UX */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =====================================================================
   MOBILE POLISH — PHONE (≤600px)
   Spacing, readability, and interaction improvements for one-hand use.
   ===================================================================== */
@media (max-width: 600px) {
  /* Tighter hero for shorter phones */
  .hero-content {
    gap: 10px;
  }
  .hero h1 {
    margin-bottom: 12px !important;
  }

  /* Service cards: more breathing room for long descriptions */
  .service-card {
    min-height: auto !important;
    padding-bottom: 28px !important;
  }

  /* Process steps: more comfortable padding */
  .process-step {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }

  /* Testimonials: slightly larger text for readability */
  .testimonial-text {
    font-size: 0.92rem;
    line-height: 1.75;
  }

  /* FAQ: bigger tap area, better spacing */
  .faq-question {
    padding: 20px 18px !important;
    gap: 14px !important;
    min-height: 56px;
  }
  .faq-answer-inner {
    padding: 0 18px 20px !important;
  }

  /* Contact: comfortable form spacing */
  .form-group {
    margin-bottom: 4px;
  }
  .form-input, .form-textarea, .form-select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Footer: center everything, generous spacing */
  .footer-grid {
    gap: 28px !important;
    text-align: center;
  }
  .footer-links {
    align-items: center !important;
  }
  .footer-links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .footer-socials {
    justify-content: center;
  }

  /* Credentials: 2-column grid on phone */
  .credentials-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cred-badge {
    font-size: 0.62rem !important;
    padding: 8px 12px !important;
    min-height: 46px;
  }

  /* Portfolio CTA bar: stack on phone */
  .portfolio-cta-bar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 14px !important;
    padding: 20px !important;
  }
  .portfolio-cta-bar-right {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .portfolio-cta-bar-num { display: none; }

  /* Lightbox: better mobile fit */
  #lbImg {
    border-radius: 12px !important;
    max-height: calc(100vh - 180px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* =====================================================================
   SMALL PHONE (≤380px) — iPhone SE, Galaxy S8 etc.
   ===================================================================== */
@media (max-width: 380px) {
  .hero h1 {
    font-size: 2.2rem !important;
  }
  .hero-sub {
    font-size: 0.88rem !important;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    font-size: 0.7rem !important;
    padding: 14px 20px !important;
  }
  .hero-stats {
    gap: 8px !important;
    padding: 0 4px !important;
  }
  .hero-stat-num {
    font-size: 1.4rem !important;
  }
  .hero-stat-label {
    font-size: 0.52rem !important;
  }
  .service-card h3 {
    font-size: 1rem !important;
  }
  .service-card p {
    font-size: 0.82rem !important;
  }
  .cred-badge {
    font-size: 0.55rem !important;
    padding: 6px 8px !important;
  }
}


/* =====================================================================
   RTL ADJUSTMENTS — TABLET-SPECIFIC (601 – 1024 px)
   On tablets, some elements that are centered on phone or
   side-aligned on desktop need explicit RTL handling.
   ===================================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Hero: center-align in RTL on tablet for visual balance */
  [dir="rtl"] .hero-content {
    text-align: center;
    align-items: center;
  }
  [dir="rtl"] .hero-eyebrow { text-align: center; }
  [dir="rtl"] .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* About split: when stacked vertically, text centers */
  [dir="rtl"] .split-content {
    text-align: center;
    align-items: center;
  }

  /* Footer on tablet RTL */
  [dir="rtl"] .footer-grid { text-align: right; }
  [dir="rtl"] .footer-links { align-items: flex-end; }
}

/* Footer on phone RTL: center everything */
@media (max-width: 600px) {
  [dir="rtl"] .footer-grid { text-align: center; }
  [dir="rtl"] .footer-links { align-items: center !important; }
  [dir="rtl"] .footer-bottom { align-items: center !important; }
}


/* =====================================================================
   SMOOTH INTERACTIONS — ALL DEVICES
   Ensure every interactive element has a transition so nothing feels
   jarring. These are catch-all rules that won't override existing
   more-specific transitions.
   ===================================================================== */
.service-card,
.process-step,
.testimonial,
.faq-item,
.cred-badge,
.portfolio-cta-bar,
.contact-item {
  transition:
    transform 280ms var(--ease-out),
    box-shadow 280ms ease,
    border-color 220ms ease,
    background-color 280ms ease;
}

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


/* ═══════════════════════════════════════════════════════════════════
   ROUND 2 — MOBILE FILTER REFINEMENTS
   ═══════════════════════════════════════════════════════════════════
   Mobile filter pills were too big (42px). Refine to 36px,
   tighter padding, and ensure the ALL button always appears first.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Refined pill sizing — more professional, less chunky */
  .filter-btn {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.15em !important;
    font-weight: 600 !important;
  }

  /* Hide the serif drawing-sheet number on mobile — would make
     pills even wider. The data-num attr stays on the button but
     the ::before content is neutralized. */
  .filter-btn::before {
    content: none !important;
  }

  /* Refined active state — slightly smaller shadow, cleaner gold */
  .filter-btn.active {
    background: linear-gradient(180deg, var(--gold-light, #dfc08a), var(--gold)) !important;
    color: var(--black) !important;
    border-color: var(--gold) !important;
    font-weight: 700 !important;
    box-shadow:
      0 2px 6px rgba(201,169,110,0.25),
      0 8px 20px rgba(201,169,110,0.18),
      inset 0 1px 0 rgba(255,255,255,0.3) !important;
  }

  /* Filter container tighter on mobile — less right padding so the
     fade gradient doesn't push the last pill too far off-screen */
  .portfolio-filters {
    padding: 4px 36px 8px 2px !important;
    gap: 6px !important;
  }
  [dir="rtl"] .portfolio-filters {
    padding: 4px 2px 8px 36px !important;
  }

  /* Reduce the fade gradient width on mobile — was 48px, now 36px */
  .portfolio-filter-row::after {
    width: 36px !important;
  }

  /* Hide count suffix on mobile — keeps pills compact */
  .filter-btn[data-count]::after {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ROUND 2 — MOBILE CTA BAR REFINEMENT
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .portfolio-cta-bar {
    padding: 22px 22px 22px 28px !important;
    border-radius: 18px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .portfolio-cta-bar-text {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }
  .portfolio-cta-bar-num {
    font-size: 1.6rem !important;
  }
  .portfolio-cta-bar-right {
    flex-direction: row !important;
    gap: 16px !important;
  }
}