/* =========================================
משתנים גלובליים
========================================= */
/* =========================================
עטיפת התוכן המרכזי (מרכוז והגבלת רוחב)
========================================= */
.main-wrapper {
  margin: 0 auto !important;
  padding: 40px 20px 0;
  width: 100%;
  max-width: 75vw;
  box-sizing: border-box;
}

/* =========================================
אנימציות
========================================= */
.fade-up:not(.main-title, h1),
.fade-in-element:not(.main-title, h1) {
  margin-top: 0px !important;
  margin-bottom: 30px !important;
}

/* =========================================
טיפוגרפיה וכפתורים
========================================= */
.section-title {
  color: #000000;
  font-size: 32px;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  letter-spacing: 2px;
  -webkit-text-stroke: 2px black;
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 0;
  width: 60px;
  height: 4px;
  background-color: #000000;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 30px;
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.35s ease;
  cursor: pointer;
  width: fit-content;
}
.btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000000;
  transition: all 0.35s ease;
  flex-shrink: 0;
}
.btn .arrow svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.2;
  transition: stroke 0.35s ease;
}
.btn:hover {
  background: #000000;
  color: #ffffff !important;
  border-color: #000000;
}
.btn:hover .arrow {
  background: #ffffff;
}
.btn:hover .arrow svg {
  stroke: #000000;
}
.btn-dark {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
.btn-dark .arrow {
  background: #ffffff;
}
.btn-dark .arrow svg {
  stroke: #000000;
}
.btn-dark:hover {
  background: #ffffff;
  color: #000000 !important;
  border-color: #000000;
}
.btn-dark:hover .arrow {
  background: #000000;
}
.btn-dark:hover .arrow svg {
  stroke: #ffffff;
}

/* =========================================
חלק ההקדמה (Intro Section)
========================================= */
.intro-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  margin: 1% 0 60px 0 !important;
}
.intro-block p {
  color: #000000;
  font-size: 16px;
  margin-bottom: 25px;
}

.intro-image {
  width: 90%;
  height: 400px;
  background-size: cover;
  background-position: center;
  border: 1px solid #000000;
  aspect-ratio: 16/9;
}

#intro-image-one {
  margin-right: 10% !important;
}

#intro-image-two {
  margin-right: 0;
}

/* =========================================
כרטיסיות שירות עם פאנל מדד אחוזים
========================================= */
.grid-2-cols {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin: 0 auto 20px auto !important;
}

.grid-1-col {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto 40px auto !important;
}
.grid-1-col .service-card.with-meter {
  width: 85% !important;
  max-width: 80rem !important;
  margin: 0 auto !important;
  /* 1. הקטנת גובה אזור התמונה */
}
.grid-1-col .service-card.with-meter .service-image-container {
  height: 180px !important;
  /* מקטין את הגובה משמעותית. אפשר לשנות ל-200px אם זה צר מדי */
}
.grid-1-col .service-card.with-meter {
  /* 2. צמצום המרווחים הפנימיים (Padding) */
}
.grid-1-col .service-card.with-meter .service-content {
  padding: 20px 30px !important;
  /* ריווח קטן יותר למעלה ולמטה */
}
.grid-1-col .service-card.with-meter .service-content .service-list {
  display: block !important;
  column-count: 2 !important;
  column-gap: 40px !important;
  margin-bottom: 0 !important;
  /* ביטול ריווח עודף מתחת לרשימה */
}
.grid-1-col .service-card.with-meter .service-content .service-list li {
  display: block !important;
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 8px !important;
  /* צמצום המרווח בין השורות */
}
.grid-1-col .service-card.with-meter .service-content {
  /* 3. סידור הכפתור למטה */
}
.grid-1-col .service-card.with-meter .service-content .button-area {
  margin-top: 25px !important;
  padding-top: 0 !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  /* ממרכז את הכפתור ביחס ל-2 העמודות */
}
.grid-1-col .service-card.with-meter .service-content .button-area .btn {
  margin: 0 auto !important;
  margin-right: 0 !important;
}

.service-card.with-meter {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-top: 3px solid #d32f3b !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
  background-color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: right !important;
  margin: 0 0 20px 0 !important;
  width: 100% !important;
  padding: 0 !important;
}
.service-card.with-meter .card-main-content {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  width: calc(100% - 55px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
}
.service-card.with-meter .service-image-container {
  height: 250px !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.service-card.with-meter .service-image-container .service-bg-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.service-card.with-meter .service-image-container .service-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 20px !important;
  z-index: 1 !important;
  margin: 0 !important;
}
.service-card.with-meter .service-image-container .service-overlay h2 {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  -webkit-text-stroke: 1px #ffffff !important;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7) !important;
  text-align: right !important;
}
.service-card.with-meter .service-content {
  padding: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.service-card.with-meter .service-content * {
  text-align: right !important;
}
.service-card.with-meter .service-content .service-subtitle {
  font-size: 17px !important;
  font-weight: 900 !important;
  /* משקל מקסימלי לטקסט */
  -webkit-text-stroke: 0.5px #000000 !important;
  /* קו מתאר שמעבה משמעותית את האותיות */
  text-align: right !important;
  /* הצמדת הטקסט הכי ימינה שאפשר */
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 15px !important;
  /* המרווח בין הטקסט לקו */
  border-bottom: none !important;
  /* ביטול הקו הישן שרץ מימין לשמאל */
  position: relative !important;
  /* יצירת הקו החדש והממורכז */
}
.service-card.with-meter .service-content .service-subtitle::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* דואג שהקו יישב בול באמצע */
  width: 90% !important;
  /* אורך הקו ביחס לכרטיסייה - אתה יכול לשנות למשל ל-60% או 100% */
  height: 1.5px !important;
  /* עובי הקו */
  background-color: #000000 !important;
}
.service-card.with-meter .service-content p {
  margin-top: 0 !important;
  margin-bottom: 15px !important;
  width: 100% !important;
}
.service-card.with-meter .service-content .service-list {
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.service-card.with-meter .service-content .service-list li {
  position: relative !important;
  padding-right: 22px !important;
  padding-left: 0 !important;
  margin-bottom: 10px !important;
  font-size: 14.5px !important;
  width: 100% !important;
  display: block !important;
}
.service-card.with-meter .service-content .service-list li::before {
  content: "✓" !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  font-weight: 900 !important;
}
.service-card.with-meter .service-content .button-area {
  margin-top: auto !important;
  display: flex !important;
  margin-bottom: 0 !important;
  /* שליטה על מיקום הכפתור (בגלל שהאתר מוגדר RTL מימין לשמאל):
  flex-start = נצמד לימין 
  center = ממורכז
  flex-end = נצמד לשמאל */
  justify-content: flex-start !important;
  width: 100% !important;
  padding-top: 15px !important;
  margin-right: 0px !important;
}
.service-card.with-meter .service-content .button-area .btn {
  /* ביטלתי את ה- margin: 0 auto כדי שלא יכריח מרכוז בכוח */
  margin: 0 !important;
}
.service-card.with-meter .defect-meter-panel {
  width: 55px !important;
  flex-shrink: 0 !important;
  background-color: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 25px 0 !important;
  z-index: 2 !important;
  margin: 0 !important;
}
.service-card.with-meter .defect-meter-panel .meter-number {
  font-weight: 900 !important;
  font-size: 15px !important;
  transform: rotate(-90deg) !important;
  margin-bottom: 25px !important;
}
.service-card.with-meter .defect-meter-panel .meter-track {
  flex-grow: 1 !important;
  width: 5px !important;
  background-color: #f0f0f0 !important;
  position: relative !important;
}
.service-card.with-meter .defect-meter-panel .meter-track .meter-fill {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: linear-gradient(to top, #2b2b2b, #e4a885) !important;
}
.service-card.with-meter .defect-meter-panel .meter-text-container {
  height: 110px !important;
  position: relative !important;
  width: 100% !important;
  margin-top: 15px !important;
}
.service-card.with-meter .defect-meter-panel .meter-text-container .meter-text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
}

/* =========================================
סקשן שדרוג / ציפוי ננו (מתוקן)
========================================= */
.upgrade-section {
  margin-top: 100px !important;
  margin-bottom: 60px !important;
  text-align: center !important;
}
.upgrade-section .upgrade-main-title {
  font-size: 3rem !important;
  font-weight: 900 !important;
  margin: 0 auto 20px auto !important;
  position: relative !important;
  display: inline-block !important;
  color: #000000 !important;
  -webkit-text-stroke: 1.5px #000000 !important;
  letter-spacing: 2px !important;
}
.upgrade-section .upgrade-main-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: -8px !important;
  right: 50% !important;
  transform: translateX(50%) !important;
  width: 60px !important;
  height: 4px !important;
  background-color: #d32f3b !important;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.upgrade-section .upgrade-main-title:hover::after {
  width: 100% !important;
}
.upgrade-section .upgrade-intro {
  font-size: 18px !important;
  max-width: 800px !important;
  margin: 10px auto 40px auto !important;
  color: #333333 !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  -webkit-text-stroke: 0 !important;
  letter-spacing: normal !important;
  white-space: nowrap;
}
/* The "complementary package" banner is dressed like the call-to-action block on the about page (dark, the site's
   red light from the top edge, a thin red line, a short red bar under the title), plus something about what the
   nano coating does: water beads that keep forming and fading on the paint, and a glare that sweeps over on hover. */
.upgrade-section .upgrade-banner {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 1200px !important;
  min-height: 420px;
  height: auto !important;
  margin: 0 auto !important;
  padding: 70px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.upgrade-section .upgrade-banner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, transparent, #e63946, transparent);
}
/* glare that sweeps across the paint on hover */
.upgrade-section .upgrade-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.09) 50%, transparent 60%);
  background-position: 140% 0;
  background-size: 260% 100%;
  pointer-events: none;
  transition: background-position 1.1s ease;
}
.upgrade-section .upgrade-banner:hover::after {
  background-position: -40% 0;
}
.upgrade-section .upgrade-banner .upgrade-overlay {
  margin: 0 !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(230, 57, 70, 0.22), transparent 70%), linear-gradient(180deg, rgba(10, 10, 10, 0.78) 0%, rgba(0, 0, 0, 0.9) 100%) !important;
}
/* water beads on the coated paint */
.upgrade-section .upgrade-banner .drop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: 0 !important;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75) 0 9%, rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0.04) 65%, transparent 72%);
  box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.12);
  opacity: 0;
  animation: dropBead 7s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes dropBead {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  18% {
    opacity: 0.85;
    transform: scale(1);
  }
  70% {
    opacity: 0.85;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(14px) scale(0.9);
  }
}
.upgrade-section .upgrade-banner .upgrade-content {
  margin: 0 !important;
  position: relative !important;
  z-index: 3 !important;
  max-width: 760px !important;
  padding: 0 !important;
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.upgrade-section .upgrade-banner .upgrade-content * {
  -webkit-text-stroke: 0 !important;
}
.upgrade-section .upgrade-banner .upgrade-content h3 {
  position: relative !important;
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  margin: 0 0 30px 0 !important;
  padding-bottom: 22px !important;
  color: #ffffff !important;
  letter-spacing: 2px !important;
  text-shadow: none !important;
}
.upgrade-section .upgrade-banner .upgrade-content h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: #e63946;
  transform: translateX(-50%);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.upgrade-section .upgrade-banner:hover .upgrade-content h3::after {
  width: 120px;
}
.upgrade-section .upgrade-banner .upgrade-content p {
  color: #d4d4da !important;
  font-size: 18px !important;
  margin: 0 auto 26px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  text-shadow: none !important;
  background-color: transparent !important;
}
/* what the coating gives the paint */
.upgrade-section .upgrade-banner .upgrade-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 30px !important;
  padding: 0;
  list-style: none;
  background: transparent !important;
}
.upgrade-section .upgrade-banner .upgrade-perks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.upgrade-section .upgrade-banner .upgrade-perks li:hover {
  transform: translateY(-2px);
  border-color: rgba(230, 57, 70, 0.7);
  background: rgba(230, 57, 70, 0.14);
}
.upgrade-section .upgrade-banner .upgrade-perks svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: #ff8a93;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the banner button: dark on the dark banner (with a light edge so it can be seen), light on hover */
.upgrade-section .upgrade-banner .upgrade-content .btn {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
.upgrade-section .upgrade-banner .upgrade-content .btn .arrow {
  background: #ffffff !important;
}
.upgrade-section .upgrade-banner .upgrade-content .btn .arrow svg {
  stroke: #000000 !important;
}
.upgrade-section .upgrade-banner .upgrade-content .btn:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}
.upgrade-section .upgrade-banner .upgrade-content .btn:hover .arrow {
  background: #000000 !important;
}
.upgrade-section .upgrade-banner .upgrade-content .btn:hover .arrow svg {
  stroke: #ffffff !important;
}@media (prefers-reduced-motion: no-preference) {
  .upgrade-section .upgrade-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .upgrade-section .upgrade-banner .drop {
    animation: none;
    opacity: 0.6;
  }
}
/* =========================================
Desktop: the two intro blocks are a little wider than the cards below them (they reach 6vw past each side of
the 75vw content column), and their pictures are landscape rectangles instead of a fixed 380px-tall box that
turned nearly square on laptop screens. ("body" in the selectors beats the shared rules in the shared theme rules of style.css.)
========================================= */
.main-wrapper > .fade-up {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

@media (min-width: 901px) {
  body .intro-block {
    gap: 56px;
    margin: 0 -6vw 64px !important;
  }
  body .intro-image,
  body #intro-image-one,
  body #intro-image-two {
    height: auto;
    aspect-ratio: 16/10;
  }
}
/* =========================================
Responsive (phones and small tablets)
========================================= */
@media (max-width: 900px) {
  .main-wrapper {
    max-width: 100%;
    padding: 24px 12px 0;
  }
  .intro-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    margin-bottom: 0px !important;
  }
  .intro-block.reverse-mobile {
    display: flex;
    flex-direction: column-reverse;
  }
  .intro-image,
  #intro-image-one,
  #intro-image-two {
    height: auto;
    width: 100%;
    aspect-ratio: 16/10;
    margin: 0 !important;
  }
  .upgrade-section .upgrade-main-title {
    font-size: 28px !important;
  }
  .upgrade-section .upgrade-intro {
    font-size: 16px !important;
    margin-bottom: 35px !important;
    padding: 0 15px !important;
    white-space: normal;
  }
  .upgrade-section .upgrade-banner {
    height: auto !important;
    min-height: 350px !important;
    padding: 56px 16px !important;
  }
  .upgrade-section .upgrade-banner .upgrade-content {
    padding: 0 !important;
  }
  .upgrade-section .upgrade-banner .upgrade-content h3 {
    font-size: 38px !important;
  }
  .grid-2-cols,
  .grid-1-col {
    grid-template-columns: 1fr;
  }
  .grid-1-col .service-card.with-meter .service-content .service-list {
    column-count: 1 !important;
  }
}
@media (max-width: 600px) {
  .btn {
    width: 100%;
  }
}

/* small print under the package cards (estimates, not promises) */
.polish-note,
.nano-note {
  max-width: 900px;
  margin: 10px auto 30px !important;
  color: #666666;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.polish-note a,
.nano-note a {
  color: #b3242f;
  text-decoration: underline;
}

/* The defect meters start empty and FILL UP to their number when the mouse is over the package card (on touch
   screens, which have no hover, they are simply full). The target height comes from --fill in polish.html. */
.service-card.with-meter .defect-meter-panel .meter-track .meter-fill {
  height: 0 !important;
  transition: height 1.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 1.5s ease;
}
.service-card.with-meter:hover .defect-meter-panel .meter-track .meter-fill,
.service-card.with-meter:focus-within .defect-meter-panel .meter-track .meter-fill {
  height: var(--fill, 0%) !important;
  box-shadow: 0 0 12px rgba(228, 168, 133, 0.7);
}
@media (hover: none) {
  .service-card.with-meter .defect-meter-panel .meter-track .meter-fill {
    height: var(--fill, 0%) !important;
  }
}