/* Homepage redesign (app/pages/home.tsx). Scoped with an "rd-" prefix so it
   never collides with the legacy Elementor-derived classes the rest of the
   site (and the shared Header/Footer) still use. */

.rd-page { font-family: 'Nunito', sans-serif; color: #28313C; }
.rd-page h1, .rd-page h2, .rd-page h3 { font-family: 'Montserrat', sans-serif; margin: 0; }
.rd-page img { display: block; max-width: 100%; }
.rd-page a { text-decoration: none; }

.rd-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

.rd-eyebrow { color: #1C8FD1; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; }
.rd-section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.rd-section-head p { color: #5B6B79; font-size: 16px; line-height: 1.6; margin: 0; }

/* Hero. The background/shade layers extend up underneath the shared
   transparent HeaderHome (~187px tall) so the header's transparent
   background shows the hero image behind it, matching how the original
   Elementor header template overlapped the page content. The content
   column itself is unaffected, so hero text still starts right after the
   header in normal flow. */
.rd-hero { position: relative; width: 100%; min-height: 600px; display: flex; align-items: center; }
.rd-hero__bg { position: absolute; top: -210px; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% + 210px); object-fit: cover; }
.rd-hero__shade { position: absolute; top: -210px; left: 0; right: 0; bottom: 0; background: linear-gradient(100deg, rgba(10,25,41,0.88) 0%, rgba(10,25,41,0.72) 42%, rgba(10,25,41,0.35) 100%); }
.rd-hero__inner { position: relative; width: 100%; padding-top: 96px; padding-bottom: 96px; }
.rd-hero__content { max-width: 620px; display: flex; flex-direction: column; gap: 24px; }
.rd-hero__badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 8px 16px; border-radius: 999px; }
.rd-hero__title { color: #FFFFFF; font-size: 46px; font-weight: 800; line-height: 1.12; }
.rd-hero__text { color: #D7E0E8; font-size: 17px; line-height: 1.6; margin: 0; }
.rd-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.rd-trust-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; }
.rd-trust-item { display: flex; align-items: center; gap: 8px; color: #EAF0F5; font-size: 14px; font-weight: 500; }

/* Buttons */
.rd-btn { display: inline-block; font-weight: 700; font-size: 15px; padding: 15px 28px; border-radius: 8px; border: none; cursor: pointer; }
.rd-btn--urgent { background: #E8622E; color: #FFFFFF; }
.rd-btn--urgent:hover { background: #D3511F; }
.rd-btn--ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.6); color: #FFFFFF; font-weight: 600; }
.rd-btn--ghost:hover { background: rgba(255,255,255,0.1); }
.rd-btn--dark { background: #10243B; color: #FFFFFF; font-weight: 600; padding: 13px 26px; font-size: 14px; }

/* Emergency strip */
.rd-emergency { width: 100%; background: #1C8FD1; }
.rd-emergency__inner { padding-top: 22px; padding-bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.rd-emergency__left { display: flex; align-items: center; gap: 14px; }
.rd-emergency__icon { width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rd-emergency__label { font-size: 13px; font-weight: 600; opacity: 0.85; color: #FFFFFF; }
.rd-emergency__number { font-size: 22px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: #FFFFFF; }

/* Why us */
.rd-why { width: 100%; padding: 96px 0; }
.rd-why__inner { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.rd-why__image-col { flex: 1 1 420px; min-width: min(320px, 100%); }
.rd-why__image { width: 100%; height: 480px; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 48px rgba(16,36,59,0.18); }
.rd-why__content { flex: 1 1 480px; min-width: min(320px, 100%); display: flex; flex-direction: column; gap: 18px; }
.rd-why__content h2 { font-size: 34px; font-weight: 700; color: #10243B; }
.rd-why__content p { color: #5B6B79; font-size: 16px; line-height: 1.7; margin: 0; }
.rd-points { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.rd-point { display: flex; align-items: flex-start; gap: 10px; }
.rd-point__icon { flex-shrink: 0; margin-top: 2px; }
.rd-point__label { color: #28313C; font-size: 15px; font-weight: 500; }

/* Services */
.rd-services { width: 100%; background: #F4F8FB; padding: 96px 0; }
.rd-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; }
.rd-service-card { background: #FFFFFF; border-radius: 14px; padding: 28px; box-shadow: 0 2px 10px rgba(16,36,59,0.06); display: flex; flex-direction: column; gap: 14px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.rd-service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(16,36,59,0.12); }
.rd-service-card__icon { width: 52px; height: 52px; border-radius: 12px; background: #EAF4FB; display: flex; align-items: center; justify-content: center; }
.rd-service-card__icon img { width: 28px; height: 28px; object-fit: contain; }
.rd-service-card h3 { font-size: 17px; font-weight: 700; color: #10243B; }
.rd-service-card p { color: #5B6B79; font-size: 14px; line-height: 1.6; margin: 0; }

/* Quality / value props */
.rd-quality { width: 100%; padding: 96px 0; }
.rd-quality__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; }
.rd-quality-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px; }
.rd-quality-card__icon { width: 72px; height: 72px; border-radius: 999px; background: #F4F8FB; display: flex; align-items: center; justify-content: center; }
.rd-quality-card__icon img { width: 36px; height: 36px; object-fit: contain; }
.rd-quality-card h3 { font-size: 18px; font-weight: 700; color: #10243B; }
.rd-quality-card p { color: #5B6B79; font-size: 15px; line-height: 1.65; margin: 0; }

/* Testimonials */
.rd-testimonials { width: 100%; background: #10243B; padding: 96px 0; }
.rd-testimonials .rd-eyebrow { color: #6FC0EE; }
.rd-testimonials .rd-section-head h2 { color: #FFFFFF; }
.rd-testimonials .rd-section-head p { color: #AEC0CE; }
.rd-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.rd-testimonial-card { background: #16304A; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.rd-testimonial-card p { color: #E4EBF0; font-size: 15px; line-height: 1.7; margin: 0; }
.rd-testimonial-card span { color: #FFFFFF; font-weight: 600; font-size: 14px; }

/* Blog */
.rd-blog { width: 100%; padding: 96px 0; }
.rd-blog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.rd-blog__head h2 { font-size: 30px; font-weight: 700; color: #10243B; }
.rd-blog__viewall { color: #1C8FD1; font-weight: 600; font-size: 15px; text-decoration: underline; }
.rd-blog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.rd-post-card { background: #FFFFFF; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(16,36,59,0.06); display: flex; flex-direction: column; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.rd-post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(16,36,59,0.12); }
.rd-post-card__img { width: 100%; height: 190px; object-fit: cover; }
.rd-post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rd-post-card__date { color: #8A97A3; font-size: 13px; font-weight: 500; }
.rd-post-card h3 { font-size: 16px; font-weight: 700; color: #10243B; line-height: 1.4; }
.rd-post-card h3 a { color: inherit; text-decoration: none; }
.rd-post-card h3 a:hover { text-decoration: underline; }
.rd-post-card p { color: #5B6B79; font-size: 14px; line-height: 1.6; margin: 0; flex: 1; }
.rd-post-card__link { color: #1C8FD1; font-weight: 600; font-size: 14px; margin-top: 4px; text-decoration: underline; }

/* Final CTA */
.rd-cta { width: 100%; background: linear-gradient(120deg, #1C8FD1 0%, #0E628F 100%); padding: 72px 0; }
.rd-cta__inner { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 32px; box-sizing: border-box; }
.rd-cta h2 { color: #FFFFFF; font-size: 30px; font-weight: 700; }
.rd-cta p { color: #E2EEF6; font-size: 16px; line-height: 1.6; margin: 0; }

/* Map */
.rd-map { width: 100%; padding: 96px 0; }
.rd-map__inner { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.rd-map__content { flex: 1 1 360px; min-width: min(300px, 100%); display: flex; flex-direction: column; gap: 16px; }
.rd-map__content h2 { font-size: 28px; font-weight: 700; color: #10243B; }
.rd-map__content p { color: #5B6B79; font-size: 15px; line-height: 1.6; margin: 0; }
.rd-map__frame-col { flex: 1 1 480px; min-width: min(300px, 100%); }
.rd-map__frame-col iframe { width: 100%; height: 340px; border: 0; border-radius: 16px; box-shadow: 0 16px 32px rgba(16,36,59,0.1); }

@media (max-width: 640px) {
  .rd-container, .rd-cta__inner { padding-left: 20px; padding-right: 20px; }
  .rd-hero__inner { padding-top: 56px; padding-bottom: 64px; }
  .rd-why, .rd-services, .rd-quality, .rd-testimonials, .rd-blog, .rd-map { padding-top: 64px; padding-bottom: 64px; }
  .rd-why__inner { gap: 40px; }
  .rd-why__content h2 { font-size: 28px; }
  .rd-section-head { margin-bottom: 32px; }
  .rd-hero__ctas .rd-btn { flex: 1 1 auto; text-align: center; }
  /* Icon beside the title instead of above it, so nine stacked cards scroll less. */
  .rd-services__grid { gap: 16px; }
  .rd-service-card { display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 14px; row-gap: 10px; padding: 20px; }
  .rd-service-card__icon { width: 44px; height: 44px; }
  .rd-service-card p { grid-column: 1 / -1; }
  .rd-hero__title { font-size: 34px; }
  .rd-why__image { height: 320px; }
  /* The header stacks taller on narrow screens, so give its background more
     room to reach the top of the page. */
  .rd-hero__bg, .rd-hero__shade { top: -230px; height: calc(100% + 230px); }
}