/* Residential hero: live HTML text over a gently moving conceptual image. */
.navbar { top: 0; padding: 0; background: #fafafa; }
.navbar-container { max-width: 1440px; min-height: 88px; padding: 16px 4%; border: 0; border-radius: 0; background: #fafafa; box-shadow: none; }
.brand-title { letter-spacing: .16em; color: #242426; }
.brand-logo { filter: grayscale(1); }
.nav-menu { gap: 12px; }
.nav-link { font-size: 12px; }
.nav-actions .btn-navbar { display: none; }
.btn-outline-client { border-color: #333; border-radius: 9px; color: #242426; }
.hero-section { min-height: 780px; padding: 148px 0 82px; background: #232326; }
.hero-bg-cover { inset: -3%; background-position: 70% center; filter: none; transform-origin: 75% 55%; animation: ursa-hero-drift 22s ease-in-out infinite alternate; will-change: transform; opacity: 0; transition: opacity 1.6s ease; }
.hero-bg-cover:first-child { background-image: url('../images/hero-residential-v2.webp'); }
.hero-bg-cover.is-current { opacity: 1; }
.hero-overlay { background: linear-gradient(90deg, #232326 0%, #232326f5 24%, #232326b8 42%, #23232620 70%, transparent 100%); }
.hero-container { max-width: 1440px; padding: 0 4%; }
.hero-content { max-width: 670px; }
.hero-badge { border: 0; background: none; backdrop-filter: none; padding: 0; border-radius: 0; font-size: 11px; letter-spacing: .2em; color: #d4d4d7; margin-bottom: 24px; }
.hero-title { font-family: var(--font-body); font-size: clamp(58px, 6.1vw, 88px); font-weight: 500; letter-spacing: -.055em; line-height: 1.05; margin-bottom: 26px; }
.hero-text { color: #d2d2d6; font-size: 17px; line-height: 1.8; max-width: 560px; margin-bottom: 32px; }
.hero-cta-group { gap: 14px; margin-bottom: 48px; }
.hero-cta-group .btn { border-radius: 9px; min-height: 54px; padding: 14px 24px; font-size: 14px; }
.hero-cta-group .btn-primary { background: #fafafa; color: #242426; border: 1px solid #fafafa; }
.hero-cta-group .btn-primary:hover { background: #e4e4e7; }
.hero-cta-group .btn-secondary-hero { background: transparent; color: #fafafa; border: 1px solid #d4d4d7; }
.hero-highlights { gap: 20px; max-width: 570px; padding-top: 20px; }
.highlight-item { font-size: 11px; color: #d4d4d7; }
.highlight-item i { display: none; }
.hero-carousel-controls { position: absolute; z-index: 3; bottom: 20px; right: 4%; display: flex; gap: 10px; align-items: center; }
.hero-slide-selectors { display: flex; }
.hero-slide-dot { width: 32px; height: 36px; padding: 0; background: transparent; border: 0; display: grid; place-items: center; cursor: pointer; }
.hero-slide-dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ffffff60; transition: background .2s; }
.hero-slide-dot[aria-pressed="true"]::after { background: white; }
.hero-motion-toggle { border: 1px solid #ffffff50; background: #232326c9; color: #fff; border-radius: 6px; padding: 8px 12px; font: inherit; font-size: 11px; cursor: pointer; }
.hero-image-note { position: absolute; bottom: 22px; left: 4%; color: #d4d4d7; font-size: 10px; z-index: 3; }
.hero-section.motion-paused .hero-bg-cover { animation-play-state: paused; }
.hero-section :is(a, button):focus-visible { outline: 2px solid white; outline-offset: 5px; }
@keyframes ursa-hero-drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.13) translateX(-1.4%); } }
@media (max-width: 1180px) {
  .nav-menu { position: fixed; top: 86px; left: 16px; right: 16px; max-height: calc(100dvh - 110px); overflow-y: auto; background: #fff; border: 1px solid #ddd; border-radius: 14px; padding: 24px; flex-direction: column; align-items: flex-start; gap: 12px; display: none; }
  .nav-menu.active { display: flex; }
  .hamburger { display: flex; }
}
@media (max-width: 760px) {
  .cloud-content, .cloud-feat-item > div { min-width: 0; overflow-wrap: anywhere; }
  .cloud-feature-card > .grid { grid-template-columns: minmax(0, 1fr); }
  .cloud-visual-mockup { min-width: 0; overflow: hidden; }
  .navbar-container { min-height: 76px; padding: 12px 20px; }
  .nav-menu { top: 76px; }
  .hero-section { min-height: 850px; padding: 118px 0 315px; align-items: flex-start; }
  .hero-container { padding: 0 24px; }
  .hero-bg-cover { background-position: 65% bottom; background-size: auto 65%; background-repeat: no-repeat; }
  .hero-overlay { background: linear-gradient(180deg, #232326 0%, #232326 32%, #232326e8 49%, #23232630 76%, #23232660 100%); }
  .hero-title { font-size: clamp(46px, 10vw, 68px); }
  .hero-text { font-size: 14px; }
  .hero-cta-group { flex-direction: row; margin-bottom: 24px; gap: 10px; }
  .hero-cta-group .btn { width: auto; flex: 1 1 150px; padding: 12px 14px; font-size: 12px; }
  .hero-highlights { gap: 14px; }
  .highlight-item { font-size: 10px; }
  .hero-image-note { left: 24px; }
  .hero-carousel-controls { bottom: 44px; right: 20px; }
}
@media (max-width: 360px) {
  .process-grid, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .navbar-container { padding: 12px; }
  .brand { gap: 6px; }
  .brand-logo { width: 30px; height: 30px; }
  .brand-title { font-size: 16px; }
  .brand-subtitle { font-size: 8px; }
  .nav-actions { gap: 12px; }
  .btn-outline-client { padding: 9px; font-size: 10px; }
  .btn-outline-client i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-bg-cover { animation: none; transition: none; will-change: auto; } .hero-motion-toggle { display: none; } }