/* ================================================================
   RPC — INDEX / HOMEPAGE ONLY
   ================================================================ */

/* ----------------------------------------------------------------
   HERO SECTION — full-bleed background image, content centered
   at the top-middle over a dark overlay for readability.
   ---------------------------------------------------------------- */
.rpc-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,22,22,0.80) 0%, rgba(22,22,22,0.45) 45%, rgba(22,22,22,0.70) 100%);
}

.hero-overlay { display: none; }

.hero-panel {
  position: relative;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160px 24px 80px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  min-height: auto;
  overflow: visible;
}

.hero-panel::before { display: none; }

.hero-content { position: relative; z-index: 2; max-width: 100%; display: flex; flex-direction: column; align-items: center; }

.hero-id-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.14);
  border: 3px solid var(--gold);
  border-radius: var(--radius-xl);
  padding: 8px 18px 8px 10px;
  margin-bottom: 28px;
}

.hero-id-badge-icon {
  width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
  border: 2px solid #fff;
}

.hero-id-badge-text strong { display: inline; font-family: var(--font-ui); font-size: 12px; font-weight: 800; color: #fff; }
.hero-id-badge-text span { display: inline; font-size: 11px; color: rgba(255,255,255,0.7); margin-left: 4px; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
  margin-bottom: 20px;
}

.hero-title .line2 { color: var(--gold); display: block; font-style: normal; opacity: 1; }

.hero-desc { color: rgba(255,255,255,0.85); font-size: 16px; line-height: 1.7; max-width: 480px; margin: 0 auto 32px; }

.hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-panel .btn-rpc-accent { background: var(--accent); }
.hero-panel .btn-rpc-outline { border-color: #fff; color: #fff; background: rgba(255,255,255,0.1); }
.hero-panel .btn-rpc-outline .btn-icon { background: rgba(255,255,255,0.15); color: #fff; }
.hero-panel .btn-rpc-outline:hover { border-color: var(--gold); }
.hero-panel .btn-rpc-outline:hover .btn-icon { background: var(--gold); color: var(--primary-dark); }

.hero-stats { display: flex; justify-content: center; gap: 32px; padding-top: 28px; border-top: 3px dashed rgba(234,179,8,0.5); flex-wrap: wrap; }
.hero-stat-item { display: flex; flex-direction: column; align-items: center; }
.hero-stat-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1; }
.hero-stat-num span { color: var(--gold); }
.hero-stat-label { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px; }

@media (max-width: 1024px) {
  .hero-panel { padding: 140px 24px 60px; }
}
@media (max-width: 768px) {
  .hero-panel { padding: 120px 20px 50px; }
}
@media (max-width: 480px) {
  .hero-panel { padding: 110px 16px 40px; }
  .hero-id-badge { padding: 6px 14px 6px 8px; }
  .hero-desc { font-size: 14.5px; }
}

/* INFO TICKER */
.rpc-ticker { background: var(--primary-dark); padding: 14px 0; overflow: hidden; position: relative; }
.ticker-wrapper { display: flex; gap: 60px; animation: ticker-scroll 28s linear infinite; white-space: nowrap; width: max-content; }
.ticker-wrapper:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.88); letter-spacing: 0.4px; }
.ticker-item .t-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ABOUT SECTION */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-grid.rpc-reverse { direction: rtl; }
.about-grid.rpc-reverse > * { direction: ltr; }
.about-images-wrap { position: relative; }
.about-img-main { border-radius: var(--radius-asym); overflow: hidden; height: clamp(280px, 55vw, 520px); }
.about-img-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.about-img-main:hover img { transform: scale(1.04); }
.about-img-small { position: absolute; top: -28px; left: -28px; width: 190px; height: 190px; border-radius: var(--radius-md) 50% var(--radius-md) 50%; overflow: hidden; border: 6px solid var(--bg-white); box-shadow: var(--shadow-md); }
.about-img-small img { width: 100%; height: 100%; object-fit: cover; }
.about-exp-badge { position: absolute; bottom: 28px; right: -24px; background: var(--accent); color: #fff; padding: 20px 24px; border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0; text-align: center; box-shadow: var(--shadow-md); }
.about-exp-badge .num { display: block; font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; line-height: 1; }
.about-exp-badge .label { display: block; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.9; margin-top: 4px; }
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
.about-feature-item { display: flex; align-items: flex-start; gap: 12px; }
.about-feature-icon { width: 40px; height: 40px; background: var(--bg-section); border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 18px; flex-shrink: 0; }
.about-feature-item h6 { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
.about-feature-item p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.doctor-signature { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: var(--bg-section); border-radius: var(--radius-md); border-left: 4px solid var(--primary); margin-top: 32px; }
.doctor-signature img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent-light); }
.doctor-signature .doc-name { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--text-dark); }
.doctor-signature .doc-deg { font-size: 12px; color: var(--primary); font-weight: 600; }


/* WHY CHOOSE US */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.why-img-wrap { position: relative; }
.why-img-main { border-radius: var(--radius-asym); overflow: hidden; height: 580px; }
.why-img-main img { width: 100%; height: 100%; object-fit: cover; }
.why-accent-card { position: absolute; top: -24px; left: -24px; background: var(--primary); color: #fff; padding: 28px 32px; border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); box-shadow: var(--shadow-lg); text-align: center; }
.why-accent-card .big-num { display: block; font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; }
.why-accent-card .label { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; margin-top: 6px; }
.why-list { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.why-item { display: flex; gap: 16px; padding: 20px 24px; background: var(--bg-light); border-radius: var(--radius-md); border: 1px solid var(--border-light); transition: all 0.3s; }
.why-item:hover { background: var(--bg-white); border-color: var(--accent-light); box-shadow: var(--shadow-sm); transform: translateX(8px); }
.why-item-icon { width: 52px; height: 52px; background: var(--primary); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex-shrink: 0; }
.why-item-icon.accent { background: var(--accent); }
.why-item-body h5 { font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.why-item-body p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* PROCESS SECTION */
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; --ps-cols: 3; }
.process-steps::before { content: ''; position: absolute; top: 44px; left: calc(50% / var(--ps-cols) + 32px); right: calc(50% / var(--ps-cols) + 32px); height: 2px; background: var(--border-mid); z-index: 0; }
.process-steps[data-steps="1"]::before { display: none; }
.process-step { text-align: center; position: relative; z-index: 1; }
.step-num-wrap { position: relative; display: inline-block; margin-bottom: 28px; }
.step-circle-outer { width: 88px; height: 88px; border-radius: 50%; border: 2px dashed var(--accent-light); display: flex; align-items: center; justify-content: center; margin: 0 auto; background: var(--bg-white); transition: all 0.3s; }
.process-step:hover .step-circle-outer { border-color: var(--primary); background: var(--primary); }
.step-inner-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-section); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--primary); transition: all 0.3s; }
.process-step:hover .step-inner-circle { background: rgba(255,255,255,0.2); color: #fff; }
.step-badge { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 700; }
.process-step h4 { font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; transition: color 0.2s; }
.process-step:hover h4 { color: var(--primary); }
.process-step p { font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 260px; margin: 0 auto; }

/* TESTIMONIALS */
.testimonial-card { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-asym); padding: 32px; height: 100%; transition: all 0.3s; position: relative; }
.testimonial-card::before { content: '"'; position: absolute; top: 20px; right: 24px; font-family: var(--font-display); font-size: 80px; font-weight: 700; color: var(--bg-section); line-height: 1; }
.testimonial-card:hover { border-color: var(--accent-light); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.testimonial-stars { color: var(--accent); font-size: 16px; letter-spacing: 2px; margin-bottom: 16px; }
.testimonial-text { font-size: 15px; color: var(--text-body); line-height: 1.8; margin-bottom: 24px; font-style: italic; }
.testimonial-client { display: flex; align-items: center; gap: 14px; }
.testimonial-client img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-light); }
.testimonial-client .client-name { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--text-dark); }
.testimonial-client .client-role { font-size: 13px; color: var(--primary); }


/* FAQ SECTION */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: flex-start; }
.faq-img { border-radius: var(--radius-asym); overflow: hidden; height: 500px; }
.faq-img img { width: 100%; height: 100%; object-fit: cover; }

/* ================================================================
   RPC — TEAM SECTION (static)
   ================================================================ */
.rpc-team-grid {
  display: grid;
   grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.rpc-team-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-asym);
  overflow: visible;
  transition: all 0.35s ease;
  position: relative;
}

.rpc-team-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.rpc-team-img {
  height: 500px;
  overflow: hidden;
  border-radius: var(--radius-asym) var(--radius-asym) 0 0;
  position: relative;
}

.rpc-team-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}

.rpc-team-card:hover .rpc-team-img img { transform: scale(1.06); }

/* Badge — service-card wali family feel */
.rpc-team-badge {
  position: absolute;
  left: 24px;
  bottom: 0px;
  width: 52px;
  height: 52px;
  background: var(--primary);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--bg-white);
  transition: background 0.3s;
}

.rpc-team-card:hover .rpc-team-badge { background: var(--accent); }

/* ================================================================
   ADDON v2 — About & Why-Us fresh restyle (homepage)
   ================================================================ */

/* ABOUT — dashed gold card frame around the photo cluster, with star sticker */
.about-images-card {
  position: relative;
  padding: 26px;
  border: 4px dashed var(--gold);
  border-radius: 40px 40px 40px 10px;
  background: var(--bg-section);
}
.about-images-card::before {
  content: '★';
  position: absolute;
  top: -18px;
  left: -18px;
  width: 44px;
  height: 44px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  transform: rotate(-14deg);
  z-index: 5;
}

/* Quote — dashed speech-bubble style, matching the About page */
.home-about-quote {
  position: relative;
  background: var(--bg-section);
  border: 3px dashed var(--accent-light);
  border-radius: var(--radius-md);
  padding: 24px 26px 20px;
  margin-bottom: 28px;
  font-size: 15px;
  color: var(--text-body);
}
.home-about-quote::before {
  content: '\201C';
  position: absolute;
  top: -22px;
  left: 20px;
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--gold);
  line-height: 1;
}

/* WHY US — matching dashed gold card frame */
.why-img-card {
  position: relative;
  padding: 26px;
  border: 4px dashed var(--gold);
  border-radius: 40px 40px 40px 10px;
  background: var(--bg-section);
}
.why-img-card::before {
  content: '★';
  position: absolute;
  top: -18px;
  right: -18px;
  width: 44px;
  height: 44px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  transform: rotate(14deg);
  z-index: 5;
}

/* WHY US — list becomes a 2-column card grid instead of full-width rows */
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.why-item { flex-direction: column; align-items: flex-start; text-align: left; padding: 22px; }
.why-item:hover { transform: translateY(-6px) scale(1.02); }
.why-item-icon { margin-bottom: 6px; }

.rpc-team-body { padding: 40px 24px 26px; }

.rpc-team-body h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
  transition: color 0.2s;
}

.rpc-team-card:hover .rpc-team-body h4 { color: var(--primary); }

.rpc-team-role {
  display: block;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.rpc-team-body p {
  font-size: 13.5px;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .rpc-team-grid { grid-template-columns: repeat(2, 1fr); }
  .rpc-team-img { height: 280px; }
}

@media (max-width: 640px) {
  .rpc-team-grid { grid-template-columns: 1fr; }
  .rpc-team-img { height: 340px; }
}

/* Index — about section main image */
.about-img-main { height: auto; }

.about-img-main img {
  height: auto;
  object-fit: contain;
}

/* Why Choose Us — image no crop */
.why-img-main { height: auto; }

.why-img-main img {
  height: auto;
  object-fit: contain;
}

/* ================================================================
   ADDON — KIDS THEME FOR REMAINING HOMEPAGE SECTIONS
   (About, Why Us, Process Steps, Testimonials, Team)
   ================================================================ */

/* ABOUT (homepage) — tilted photo frames + star sticker exp badge */
.about-img-main { border-radius: 34px 34px 34px 8px; border: 4px solid #fff; box-shadow: var(--shadow-lg); transform: rotate(-1deg); }
.about-img-small { border-radius: 50% 24px 50% 24px; border: 5px solid var(--gold); transform: rotate(3deg); }
.about-exp-badge { background: var(--gold); color: var(--primary-dark); border-radius: 50%; width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 4px solid #fff; }
.about-exp-badge .num { color: var(--primary-dark); }
.about-exp-badge .label { color: var(--primary-dark); opacity: 1; }
.about-feature-icon { border-radius: 50%; background: var(--primary); color: #fff; }
.doctor-signature { border-radius: 24px 24px 24px 6px; border: 3px dashed var(--accent-light); border-left: 3px dashed var(--accent-light); background: var(--bg-section); }
.doctor-signature img { border: 3px solid var(--gold); }

/* WHY CHOOSE US — sticker accent card + pastel item rows */
.why-img-main { border-radius: 34px 34px 34px 8px; border: 4px solid #fff; box-shadow: var(--shadow-lg); }
.why-accent-card { background: var(--gold); color: var(--primary-dark); border-radius: 50%; width: 110px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 4px solid #fff; transform: rotate(-6deg); }
.why-accent-card .big-num { color: var(--primary-dark); }
.why-accent-card .label { color: var(--primary-dark); opacity: 1; }
.why-item { border-radius: 24px 24px 24px 6px; border-width: 3px; }
.why-item:nth-child(4n+1) { background: #fff5f8; border-color: var(--primary-light); }
.why-item:nth-child(4n+2) { background: #f0f7ff; border-color: var(--accent-light); }
.why-item:nth-child(4n+3) { background: #fffbe8; border-color: var(--gold); }
.why-item:nth-child(4n+4) { background: #fff5f8; border-color: var(--primary-light); }
.why-item:hover { transform: translateX(8px) scale(1.02); }
.why-item-icon { border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow-sm); }

/* PROCESS STEPS — gold dashed circles + star finish badge */
.process-steps::before { background: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 8px, transparent 8px, transparent 16px); height: 3px; }
.step-circle-outer { border: 3px dashed var(--gold); }
.process-step:hover .step-circle-outer { border-color: var(--primary); border-style: solid; }
.step-badge { border: 3px solid #fff; box-shadow: var(--shadow-sm); }

/* TESTIMONIALS — pastel cycling cards + gold stars */
.testimonial-card { border-width: 3px; border-radius: 30px 30px 30px 8px; }
.testimonial-card:nth-child(3n+1) { background: #fff5f8; border-color: var(--primary-light); }
.testimonial-card:nth-child(3n+2) { background: #f0f7ff; border-color: var(--accent-light); }
.testimonial-card:nth-child(3n+3) { background: #fffbe8; border-color: var(--gold); }
.testimonial-card::before { color: rgba(234,179,8,0.3); }
.testimonial-card:hover { transform: translateY(-8px) rotate(-1deg); }
.testimonial-stars { color: var(--gold); }
.testimonial-client img { border: 3px solid var(--gold); }

/* TEAM — pastel cycling + star sticker, matching service/blog cards */
.rpc-team-card { border-width: 3px; border-radius: 34px 34px 34px 6px; }
.rpc-team-card:nth-child(3n+1) { background: #fff5f8; border-color: var(--primary-light); }
.rpc-team-card:nth-child(3n+2) { background: #f0f7ff; border-color: var(--accent-light); }
.rpc-team-card:nth-child(3n+3) { background: #fffbe8; border-color: var(--gold); }
.rpc-team-card:hover { transform: translateY(-14px) rotate(-2deg) scale(1.02); }
.rpc-team-img { border-radius: 31px 31px 0 0; }
.rpc-team-card::after {
  content: '★';
  position: absolute;
  top: -16px;
  right: -14px;
  width: 40px;
  height: 40px;
  background: var(--gold);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: var(--shadow-md);
  border: 3px solid #fff;
  transform: rotate(15deg);
  z-index: 3;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rpc-team-card:hover::after { transform: rotate(-14deg) scale(1.18); }
.rpc-team-badge { border-radius: 50%; }
.rpc-team-card:nth-child(3n+2) .rpc-team-badge { background: var(--accent); }
.rpc-team-card:nth-child(3n+3) .rpc-team-badge { background: var(--gold); }
.rpc-team-card:hover .rpc-team-badge { transform: rotate(-14deg) scale(1.12); }

/* ================================================================
   FINAL MOBILE OVERRIDES — placed at the very end on purpose so
   they win the cascade against the ADDON block above (which loads
   after common.css and was silently undoing common.css's own
   mobile fixes for the same selectors, e.g. .rpc-team-card::after)
   ================================================================ */
@media (max-width: 768px) {
  .about-exp-badge { width: 76px; height: 76px; }
  .about-exp-badge .num { font-size: 1.3rem; }
  .why-accent-card { width: 90px; height: 90px; }
  .why-accent-card .big-num { font-size: 1.6rem; }
  .rpc-team-card::after { width: 34px; height: 34px; font-size: 15px; top: -12px; right: -10px; }
  .rpc-team-badge { width: 44px; height: 44px; font-size: 19px; }
  .about-img-main, .about-img-small { transform: none; }
  .why-img-main { transform: none; }
}

@media (max-width: 480px) {
  .rpc-team-card::after { display: none; }
  .why-accent-card { width: 76px; height: 76px; }
  .why-accent-card .big-num { font-size: 1.3rem; }
  .about-exp-badge { width: 64px; height: 64px; }
  .about-exp-badge .num { font-size: 1.05rem; }
  .about-exp-badge .label { font-size: 7px; }
  .why-item { padding: 16px; }
}
/* ================================================================
   ABSOLUTE FINAL FIX — about-grid/why-grid MUST stack on mobile.
   index.css defines these unconditionally (no media query) earlier
   in this same file, which was overriding common.css's collapse
   rule since equal specificity + later source position always wins.
   This must stay the LAST rule in the file.
   ================================================================ */
@media (max-width: 1024px) {
  .about-grid, .why-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-grid.rpc-reverse { direction: ltr !important; }
}

/* ================================================================
   ABSOLUTE FINAL FIX — .hero-stats (the counter row inside the
   homepage hero) MUST show 2 per line on small devices, not stacked
   1-per-line. Must stay the LAST rule in the file.
   ================================================================ */
@media (max-width: 768px) {
  .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; text-align: center; }
}
@media (max-width: 480px) {
  .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; flex-direction: unset !important; }
}