/* About Us & Mission Vision Pages - Responsive Styles */

/* About Us - Story Section */
.about-us-page .story-media {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
}

.about-us-page .story-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Desktop/Laptop - Text Quiet font size matching wd-logos-sub */
.about-us-page .text-quiet {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* Desktop/Laptop - Vision Section Video Size */
.vision-section video {
  transform: scale(1.2) !important;
  transform-origin: center !important;
}

/* Desktop/Laptop - Hero Section Adjustments */
.about-us-page .webdev-hero,
.mission-vision-page .webdev-hero {
  height: 100vh !important;
  min-height: 100vh !important;
}

.about-us-page .webdev-hero-gradient-top,
.about-us-page .webdev-hero-gradient-bottom,
.mission-vision-page .webdev-hero-gradient-top,
.mission-vision-page .webdev-hero-gradient-bottom {
  height: 100vh !important;
  min-height: 100vh !important;
}

.about-us-page .webdev-hero-content,
.mission-vision-page .webdev-hero-content {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  padding: 0 !important;
  gap: 4px !important;
}

.about-us-page .webdev-hero-title,
.mission-vision-page .webdev-hero-title {
  margin: 0 0 10px 0 !important;
}

.mission-vision-page .webdev-hero-title span:first-child {
  font-size: clamp(64px, 8vw, 84px) !important;
}

.mission-vision-page .webdev-hero-secondary {
  font-size: clamp(36px, 4.5vw, 56px) !important;
}

.about-us-page .webdev-hero-lead,
.mission-vision-page .webdev-hero-lead {
  margin: 6px auto 18px !important;
  font-size: clamp(16px, 1.8vw, 18px) !important;
  max-width: 680px !important;
}

.mission-vision-page .webdev-hero-lead {
  margin: 6px auto 16px !important;
}

.about-us-page .webdev-spacer,
.mission-vision-page .webdev-spacer {
  height: 4px !important;
}

.mission-vision-page .webdev-spacer {
  height: 2px !important;
}

.about-us-page .webdev-hero-cta,
.mission-vision-page .webdev-hero-cta {
  margin-top: 0 !important;
  gap: 20px !important;
}

.about-us-page .webdev-scroll-hint,
.mission-vision-page .webdev-scroll-hint {
  bottom: 40px !important;
  position: absolute !important;
  z-index: 3 !important;
}

/* Tablet (≤991px) */
@media (max-width: 991px) {
  /* Hero Section - Tablet */
  .about-us-page .webdev-hero,
  .mission-vision-page .webdev-hero {
    height: 100vh !important;
    min-height: 100vh !important;
  }

  .about-us-page .webdev-hero-gradient-top,
  .about-us-page .webdev-hero-gradient-bottom,
  .mission-vision-page .webdev-hero-gradient-top,
  .mission-vision-page .webdev-hero-gradient-bottom {
    height: 100vh !important;
    min-height: 100vh !important;
  }

  .about-us-page .webdev-hero-content,
  .mission-vision-page .webdev-hero-content {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 24px !important;
  }

  .about-us-page .webdev-hero-title,
  .mission-vision-page .webdev-hero-title {
    margin: 0 0 10px 0 !important;
  }

  .about-us-page .webdev-hero-lead,
  .mission-vision-page .webdev-hero-lead {
    margin: 6px auto 20px !important;
  }

  .about-us-page .webdev-scroll-hint,
  .mission-vision-page .webdev-scroll-hint {
    bottom: 40px !important;
    position: absolute !important;
    z-index: 3 !important;
  }

  /* About Section */
  .about-us-page .section > .container {
    padding: 0 24px !important;
  }

  .about-us-page .section[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .story-media {
    display: block !important;
  }

  .about-us-page .story-media video {
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
  }

  .about-us-page .text-quiet {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }

  /* Contact Us Button - Tablet */
  .about-us-page .section .container > div[style*="grid"] > div:last-child {
    text-align: center !important;
  }

  .about-us-page .section .btn.header-glass {
    font-size: 14px !important;
    padding: 10px 24px !important;
    display: inline-flex !important;
    margin: 0 auto !important;
  }

  .about-us-page .stats-row {
    gap: 24px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
  }

  .about-us-page .stat {
    flex: 1 1 0 !important;
    text-align: center !important;
  }

  .about-us-page .stat .num {
    font-size: 36px !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
  }

  .about-us-page .stat .label {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .about-us-page .stat .label:after {
    width: 80px !important;
    height: 1.5px !important;
    margin: 8px auto 0 !important;
  }

  /* Core Values Section */
  .about-us-page .core-values-timeline {
    width: 100% !important;
    padding: 0 24px !important;
  }

  .about-us-page .core-values-timeline > div[style*="position: absolute"] {
    display: none !important;
  }

  .about-us-page .core-values-timeline > div[style*="display: flex"] {
    gap: 32px !important;
  }

  .about-us-page .core-values-timeline > div[style*="display: flex"] > div[style*="position: relative"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .about-us-page .core-value-icon {
    position: static !important;
    transform: none !important;
    margin: 0 auto 16px !important;
  }

  .about-us-page .core-value-timeline-card {
    width: 100% !important;
    margin: 0 auto !important;
  }

  .about-us-page .core-value-timeline-card h3 {
    font-size: 20px !important;
  }

  .about-us-page .core-value-timeline-card p {
    font-size: 14px !important;
  }

  /* Mission Vision Sections */
  .mission-section .container-narrow,
  .vision-section .container-narrow,
  .strategic-goals-section .container-narrow {
    max-width: 100% !important;
    padding: 0 24px !important;
  }

  .mission-section,
  .vision-section,
  .strategic-goals-section {
    padding: 60px 0 !important;
  }

  .mission-section > div[style*="text-align: center"] {
    margin-bottom: 40px !important;
  }

  .mission-section > div[style*="text-align: center"] .projects-title {
    font-size: clamp(32px, 7vw, 40px) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .mission-section > div[style*="text-align: center"] p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .mission-section > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .mission-section > div[style*="margin-bottom: 80px"] {
    margin-bottom: 40px !important;
  }

  .mission-section > div[style*="margin-bottom: 80px"] img {
    height: 300px !important;
  }

  .vision-section > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .vision-section > div[style*="grid"] > div[style*="font-size: 180px"] {
    font-size: 100px !important;
  }

  .strategic-goals-section > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    max-width: 100% !important;
  }

  .strategic-goals-section > div[style*="grid"] > div[style*="background"] {
    padding: 24px !important;
    gap: 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div[style*="flex-shrink: 0"] {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 12px !important;
    margin-right: 0 !important;
  }

  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div[style*="flex-shrink: 0"] svg {
    width: 18px !important;
    height: 18px !important;
  }

  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div:last-child {
    width: 100% !important;
    text-align: center !important;
  }

  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div:last-child h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div:last-child p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Bottom CTA - Tablet */
  .webdev-bottom-cta {
    padding: 40px 40px !important;
  }

  .webdev-bottom-cta-text {
    font-size: 24px !important;
    line-height: 1.4 !important;
  }

  .webdev-bottom-cta .btn {
    height: 44px !important;
    padding: 0 28px !important;
    font-size: 17px !important;
  }
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
  /* Hero Section - About Us & Mission Vision Pages */
  .about-us-page .webdev-hero,
  .mission-vision-page .webdev-hero {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .about-us-page .webdev-hero-gradient-top,
  .about-us-page .webdev-hero-gradient-bottom,
  .mission-vision-page .webdev-hero-gradient-top,
  .mission-vision-page .webdev-hero-gradient-bottom {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }

  .about-us-page .webdev-hero-bg,
  .mission-vision-page .webdev-hero-bg {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    object-fit: cover !important;
  }

  .about-us-page .webdev-hero-content,
  .mission-vision-page .webdev-hero-content {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    padding: 0 18px !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .about-us-page .webdev-hero-title,
  .mission-vision-page .webdev-hero-title {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.1 !important;
    margin: 0 0 4px 0 !important;
  }

  .about-us-page .webdev-hero-title span:first-child,
  .mission-vision-page .webdev-hero-title span:first-child {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.1 !important;
  }

  .mission-vision-page .webdev-hero-title span:first-child {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.1 !important;
  }

  .about-us-page .webdev-hero-secondary,
  .mission-vision-page .webdev-hero-secondary {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }

  .mission-vision-page .webdev-hero-secondary {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }

  .about-us-page .webdev-hero-lead,
  .mission-vision-page .webdev-hero-lead {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 3px auto 8px !important;
    padding: 0 12px !important;
    max-width: 100% !important;
  }

  .about-us-page .webdev-spacer,
  .mission-vision-page .webdev-spacer {
    display: none !important;
  }

  .about-us-page .webdev-hero-cta,
  .mission-vision-page .webdev-hero-cta {
    margin-top: 2px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-us-page .webdev-hero-cta .btn,
  .mission-vision-page .webdev-hero-cta .btn {
    font-size: 12px !important;
    padding: 6px 18px !important;
    min-height: 32px !important;
    height: 32px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: calc(50% - 5px) !important;
  }

  .about-us-page .webdev-scroll-hint,
  .mission-vision-page .webdev-scroll-hint {
    bottom: 15px !important;
    position: absolute !important;
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* About Section */
  .about-us-page .section {
    padding: 40px 0 !important;
  }

  .about-us-page .section > .container {
    padding: 0 18px !important;
  }

  .about-us-page .services-title {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .about-us-page .projects-title {
    font-size: clamp(24px, 8vw, 32px) !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  .about-us-page .section[style*="display:grid"] {
    gap: 24px !important;
    grid-template-columns: 1fr !important;
  }

  .about-us-page .story-media {
    display: block !important;
    width: 100% !important;
  }

  .about-us-page .story-media video {
    width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
  }

  .about-us-page .text-quiet {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }

  /* Contact Us Button - Mobile */
  .about-us-page .section .container > div[style*="grid"] > div:last-child {
    text-align: center !important;
  }

  .about-us-page .section .btn.header-glass {
    font-size: 13px !important;
    padding: 10px 20px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Stats Section */
  .about-us-page .stats-row {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    display: flex !important;
    padding: 0 12px !important;
  }

  .about-us-page .stat {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 0 4px !important;
  }

  .about-us-page .stat .num {
    font-size: 24px !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
  }

  .about-us-page .stat .label {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .about-us-page .stat .label:after {
    width: 60px !important;
    height: 1px !important;
    margin: 6px auto 0 !important;
  }

  /* Core Values Section */
  .about-us-page .section[style*="padding: 120px 0"] {
    padding: 40px 0 !important;
  }

  .about-us-page .section > .container[style*="max-width: 1200px"] {
    padding: 0 18px !important;
    max-width: 100% !important;
  }

  .about-us-page .core-values-timeline {
    padding: 0 !important;
    width: 100% !important;
  }

  .about-us-page .core-values-timeline > div[style*="position: absolute"] {
    display: none !important;
  }

  .about-us-page .core-values-timeline > div[style*="display: flex"] {
    gap: 24px !important;
  }

  .about-us-page .core-values-timeline > div[style*="display: flex"] > div[style*="position: relative"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .about-us-page .core-values-timeline > div[style*="display: flex"] > div[style*="position: relative"] > div[style*="display: flex"] {
    justify-content: center !important;
    width: 100% !important;
  }

  .about-us-page .core-value-icon {
    display: none !important;
  }

  .about-us-page .core-value-timeline-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    margin: 0 !important;
    gap: 12px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .about-us-page .core-value-timeline-card h3 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }

  .about-us-page .core-value-timeline-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  /* Mission Vision Sections */
  .mission-section .container-narrow,
  .vision-section .container-narrow,
  .strategic-goals-section .container-narrow {
    padding: 0 18px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mission-section,
  .vision-section,
  .strategic-goals-section {
    padding: 32px 0 !important;
  }

  .mission-section > div[style*="text-align: center"] {
    margin-bottom: 32px !important;
    padding: 0 !important;
  }

  .mission-section > div[style*="text-align: center"] .services-title {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .mission-section > div[style*="text-align: center"] .projects-title {
    font-size: clamp(24px, 8vw, 28px) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .mission-section > div[style*="text-align: center"] p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .mission-section .container-narrow > div[style*="grid"],
  .mission-section > div[style*="grid"],
  .mission-section div[style*="grid-template-columns"],
  .mission-section div[style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .mission-section .container-narrow > div[style*="grid"] > div,
  .mission-section > div[style*="grid"] > div,
  .mission-section > div[style*="grid"] > div[style*="background"],
  .mission-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"],
  .mission-section div[style*="background: rgba(255, 255, 255, 0.1)"],
  .mission-section div[style*="padding: 32px"],
  .mission-section div[style*="border-radius: 12px"][style*="padding: 32px"] {
    padding: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
  }

  .mission-section .container-narrow > div[style*="grid"] > div > div[style*="width: 56px"],
  .mission-section > div[style*="grid"] > div > div[style*="width: 56px"],
  .mission-section > div[style*="grid"] > div[style*="background"] > div[style*="width: 56px"],
  .mission-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] > div[style*="width: 56px"],
  .mission-section div[style*="background: rgba(255, 255, 255, 0.1)"] > div[style*="width: 56px"] {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 8px !important;
  }

  .mission-section .container-narrow > div[style*="grid"] > div > div[style*="width: 56px"] svg,
  .mission-section > div[style*="grid"] > div > div[style*="width: 56px"] svg,
  .mission-section > div[style*="grid"] > div[style*="background"] > div[style*="width: 56px"] svg,
  .mission-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] > div[style*="width: 56px"] svg,
  .mission-section div[style*="background: rgba(255, 255, 255, 0.1)"] > div[style*="width: 56px"] svg,
  .mission-section svg[width="24"][height="24"] {
    width: 14px !important;
    height: 14px !important;
  }

  .mission-section .container-narrow > div[style*="grid"] > div h3,
  .mission-section > div[style*="grid"] > div h3,
  .mission-section > div[style*="grid"] > div[style*="background"] h3,
  .mission-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] h3,
  .mission-section div[style*="background: rgba(255, 255, 255, 0.1)"] h3 {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
  }

  .mission-section .container-narrow > div[style*="grid"] > div p,
  .mission-section > div[style*="grid"] > div p,
  .mission-section > div[style*="grid"] > div[style*="background"] p,
  .mission-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] p,
  .mission-section div[style*="background: rgba(255, 255, 255, 0.1)"] p {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .mission-section > div[style*="margin-bottom: 80px"] {
    margin-bottom: 24px !important;
  }

  .mission-section > div[style*="margin-bottom: 80px"] img {
    height: 200px !important;
    border-radius: 12px !important;
  }

  .vision-section .container-narrow > div[style*="grid"],
  .vision-section > div[style*="grid"],
  .vision-section div[style*="grid-template-columns"] {
    gap: 20px !important;
    grid-template-columns: 1fr !important;
    display: grid !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .vision-section .container-narrow > div[style*="grid"] > div:first-child,
  .vision-section > div[style*="grid"] > div:first-child {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .vision-section .container-narrow > div[style*="grid"] > div:last-child,
  .vision-section > div[style*="grid"] > div:last-child {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-top: 32px !important;
  }

  .vision-section video {
    width: 100% !important;
    transform: none !important;
  }

  .vision-section > div[style*="grid"] > div[style*="font-size: 180px"],
  .vision-section div[style*="font-size: 180px"] {
    font-size: 48px !important;
    line-height: 1 !important;
  }

  .vision-section > div[style*="grid"] > div .services-title {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .vision-section .container-narrow > div[style*="grid"] > div .projects-title,
  .vision-section > div[style*="grid"] > div .projects-title {
    font-size: clamp(18px, 5.5vw, 22px) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  .vision-section .container-narrow > div[style*="grid"] > div .projects-title br,
  .vision-section > div[style*="grid"] > div .projects-title br,
  .vision-section .projects-title br {
    display: none !important;
  }

  .vision-section .container-narrow > div[style*="grid"] > div p,
  .vision-section > div[style*="grid"] > div p,
  .vision-section div[style*="grid"] > div p[style*="font-size: 16px"] {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .strategic-goals-section > div[style*="text-align: center"] {
    margin-bottom: 32px !important;
    padding: 0 !important;
  }

  .strategic-goals-section > div[style*="text-align: center"] .services-title {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .strategic-goals-section > div[style*="text-align: center"] .projects-title {
    font-size: clamp(24px, 8vw, 28px) !important;
    line-height: 1.2 !important;
  }

  .strategic-goals-section .container-narrow > div[style*="grid"],
  .strategic-goals-section > div[style*="grid"],
  .strategic-goals-section div[style*="grid-template-columns"],
  .strategic-goals-section div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Target all card divs in strategic goals grid - very specific */
  .strategic-goals-section .container-narrow > div[style*="grid"] > div,
  .strategic-goals-section > div[style*="grid"] > div,
  .strategic-goals-section > div[style*="grid"] > div[style*="background"],
  .strategic-goals-section > div[style*="grid"] > div[style*="display: flex"],
  .strategic-goals-section div[style*="display: flex"][style*="gap: 24px"],
  .strategic-goals-section div[style*="grid"] > div[style*="display: flex"],
  .strategic-goals-section div[style*="border-radius: 12px"][style*="display: flex"],
  .strategic-goals-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] {
    padding: 14px !important;
    gap: 10px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: left !important;
    display: flex !important;
  }

  .strategic-goals-section .container-narrow > div[style*="grid"] > div > div:first-child,
  .strategic-goals-section > div[style*="grid"] > div > div:first-child,
  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div[style*="flex-shrink: 0"],
  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div[style*="width: 56px"],
  .strategic-goals-section > div[style*="grid"] > div[style*="display: flex"] > div[style*="width: 56px"],
  .strategic-goals-section > div[style*="grid"] > div > div[style*="width: 56px"],
  .strategic-goals-section div[style*="display: flex"][style*="gap: 24px"] > div[style*="width: 56px"],
  .strategic-goals-section div[style*="grid"] > div[style*="display: flex"] > div[style*="width: 56px"],
  .strategic-goals-section div[style*="border-radius: 12px"][style*="display: flex"] > div[style*="width: 56px"],
  .strategic-goals-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] > div[style*="width: 56px"] {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 8px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    order: -1 !important;
  }

  .strategic-goals-section .container-narrow > div[style*="grid"] > div > div:first-child svg,
  .strategic-goals-section > div[style*="grid"] > div > div:first-child svg,
  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div[style*="flex-shrink: 0"] svg,
  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div[style*="width: 56px"] svg,
  .strategic-goals-section > div[style*="grid"] > div[style*="display: flex"] > div[style*="width: 56px"] svg,
  .strategic-goals-section > div[style*="grid"] > div > div[style*="width: 56px"] svg,
  .strategic-goals-section div[style*="display: flex"][style*="gap: 24px"] > div[style*="width: 56px"] svg,
  .strategic-goals-section div[style*="grid"] > div[style*="display: flex"] > div[style*="width: 56px"] svg,
  .strategic-goals-section div[style*="border-radius: 12px"][style*="display: flex"] > div[style*="width: 56px"] svg,
  .strategic-goals-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] > div[style*="width: 56px"] svg,
  .strategic-goals-section div[style*="grid"] div[style*="background: rgba"] svg {
    width: 14px !important;
    height: 14px !important;
  }

  .strategic-goals-section .container-narrow > div[style*="grid"] > div > div:last-child,
  .strategic-goals-section > div[style*="grid"] > div > div:last-child,
  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div:last-child,
  .strategic-goals-section div[style*="display: flex"][style*="gap: 24px"] > div:last-child,
  .strategic-goals-section div[style*="grid"] > div[style*="display: flex"] > div:last-child,
  .strategic-goals-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] > div:last-child {
    width: 100% !important;
    text-align: left !important;
  }

  .strategic-goals-section .container-narrow > div[style*="grid"] > div > div:last-child h3,
  .strategic-goals-section > div[style*="grid"] > div > div:last-child h3,
  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div:last-child h3,
  .strategic-goals-section div[style*="display: flex"][style*="gap: 24px"] > div:last-child h3,
  .strategic-goals-section div[style*="grid"] > div[style*="display: flex"] > div:last-child h3,
  .strategic-goals-section div[style*="border-radius: 12px"][style*="display: flex"] > div:last-child h3,
  .strategic-goals-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] > div:last-child h3,
  .strategic-goals-section div[style*="grid"] div[style*="background: rgba"] h3 {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    text-align: left !important;
    font-weight: 700 !important;
  }

  .strategic-goals-section .container-narrow > div[style*="grid"] > div > div:last-child p,
  .strategic-goals-section > div[style*="grid"] > div > div:last-child p,
  .strategic-goals-section > div[style*="grid"] > div[style*="background"] > div:last-child p,
  .strategic-goals-section div[style*="display: flex"][style*="gap: 24px"] > div:last-child p,
  .strategic-goals-section div[style*="grid"] > div[style*="display: flex"] > div:last-child p,
  .strategic-goals-section div[style*="border-radius: 12px"][style*="display: flex"] > div:last-child p,
  .strategic-goals-section div[style*="grid"] div[style*="background: rgba(255, 255, 255, 0.1)"] > div:last-child p,
  .strategic-goals-section div[style*="grid"] div[style*="background: rgba"] p {
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin: 0 !important;
  }

  /* Bottom CTA - Mobile */
  .webdev-bottom-cta {
    padding: 30px 18px !important;
  }

  .container-cta {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    align-items: center !important;
  }

  .webdev-bottom-cta-text {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
  }

  .webdev-bottom-cta .btn {
    width: 100% !important;
    max-width: 280px !important;
    height: 44px !important;
    padding: 0 24px !important;
    font-size: 16px !important;
  }
}