/* Tipografía */
 :root {
   /* Paleta EUREK (aprox. del logo) */
   --brand-700: #0e5a84;
   /* Azul principal */
   --brand-500: #1477ad;
   --brand-300: #6fb1d9;
   --accent-600: #7aa233;
   /* Verde acento */
   --accent-500: #9bc147;
   --ink-900: #0b1b26;
   /* Texto principal */
   --ink-700: #344a57;
   --ink-500: #5e7786;
   --muted-200: #e8edf1;
   --muted-100: #f4f7f9;
   --white: #ffffff;

   --radius: 14px;
   --shadow-lg: 0 20px 40px rgba(14, 90, 132, .15);
   --shadow-md: 0 10px 24px rgba(14, 90, 132, .12);
   --shadow-sm: 0 4px 10px rgba(14, 90, 132, .08);

   --container-max: 1200px;
   --section-space: 80px;
 }


 /* Modal de propiedades */
 .property-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .property-modal.active {
   opacity: 1;
   visibility: visible;
 }

 .modal-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(11, 27, 38, 0.8);
   backdrop-filter: blur(8px);
 }

 .modal-content {
   position: relative;
   width: min(90vw, 1100px);
   max-height: 85vh;
   background: var(--white);
   border-radius: 24px;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   transform: scale(0.9) translateY(20px);
   transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   display: block;
 }

 @keyframes modalSlideIn {
   from {
     opacity: 0;
     transform: scale(0.85) translateY(30px);
   }

   to {
     opacity: 1;
     transform: scale(1) translateY(0);
   }
 }

 .property-modal.active .modal-content {
   transform: scale(1) translateY(0);
 }

 .modal-close {
   position: absolute;
   top: 20px;
   right: 20px;
   z-index: 10;
   width: 44px;
   height: 44px;
   border: none;
   background: rgba(255, 255, 255, 0.95);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .modal-close:hover {
   background: var(--white);
   transform: scale(1.15) rotate(90deg);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
 }

 .modal-close svg {
   color: var(--ink-700);
 }

 .modal-body {
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   min-height: 500px;
   max-height: 85vh;
   gap: 0;
   overflow: hidden;
 }

 .modal-images {
   position: relative;
   background: var(--muted-100);
   width: 100%;
   height: 100%;
   flex-shrink: 0;
 }

 .image-carousel {
   position: relative;
   width: 100%;
   height: 100%;
 }

 .carousel-container {
   overflow: hidden;
   height: 100%;
   width: 100%;
   position: relative;
 }

 #carousel-container {
   height: 100%;
   width: 100%;
   position: relative;
 }

 .modal-images .carousel-slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 0.5s ease;
 }

 .modal-images .carousel-slide.active {
   opacity: 1;
 }

 .modal-images .carousel-slide img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   background: var(--muted-100);
 }

 .carousel-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   border: none;
   background: rgba(255, 255, 255, 0.9);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
   z-index: 5;
   opacity: 0;
 }

 .image-carousel:hover .carousel-nav {
   opacity: 1;
 }

 .carousel-prev {
   left: 16px;
 }

 .carousel-next {
   right: 16px;
 }

 .carousel-nav:hover {
   background: var(--white);
   transform: translateY(-50%) scale(1.1);
 }

 .carousel-nav svg {
   color: var(--ink-700);
 }

 .modal-info {
   padding: 32px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   overflow-y: auto;
   max-height: 85vh;
 }

 .modal-details {
   padding: 32px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   overflow-y: auto;
   width: 100%;
   max-height: 85vh;
   min-height: 0;
   scrollbar-width: thin;
   scrollbar-color: var(--brand-500) var(--muted-200);
 }

 .modal-details::-webkit-scrollbar {
   width: 12px;
 }

 .modal-details::-webkit-scrollbar-track {
   background: var(--muted-200);
   border-radius: 6px;
   margin: 8px 0;
 }

 .modal-details::-webkit-scrollbar-thumb {
   background: var(--brand-500);
   border-radius: 6px;
   border: 2px solid var(--white);
 }

 .modal-details::-webkit-scrollbar-thumb:hover {
   background: var(--brand-700);
 }

 /* Indicador de scroll */
 .scroll-indicator {
   position: sticky;
   top: 0;
   z-index: 10;
   background: linear-gradient(to bottom, var(--white) 80%, rgba(255, 255, 255, 0.8));
   padding: 12px 0;
   margin: 0 -32px 16px -32px;
   padding-left: 32px;
   padding-right: 32px;
   border-bottom: 1px solid var(--muted-200);
   transition: all 0.3s ease;
 }

 .scroll-hint {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--brand-600);
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 8px;
   animation: scrollPulse 2s infinite;
 }

 .scroll-hint svg {
   animation: scrollBounce 2s infinite;
 }

 .scroll-progress {
   display: none;
 }

 .scroll-progress-bar {
   display: none;
 }

 /* Animaciones */
 @keyframes scrollPulse {

   0%,
   100% {
     opacity: 0.7;
   }

   50% {
     opacity: 1;
   }
 }

 @keyframes scrollBounce {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(3px);
   }
 }

 /* Ocultar indicador cuando se ha scrolleado */
 .scroll-indicator.scrolled .scroll-hint {
   opacity: 0.5;
   font-size: 12px;
 }

 .scroll-indicator.scrolled .scroll-hint span {
   display: none;
 }

 .modal-thumbnails {
   display: flex;
   gap: 8px;
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 2px solid var(--muted-200);
   overflow-x: auto;
   scrollbar-width: thin;
 }

 .modal-thumbnails::-webkit-scrollbar {
   height: 6px;
 }

 .modal-thumbnails::-webkit-scrollbar-track {
   background: var(--muted-100);
   border-radius: 3px;
 }

 .modal-thumbnails::-webkit-scrollbar-thumb {
   background: var(--brand-500);
   border-radius: 3px;
 }

 .modal-thumbnail {
   width: 80px;
   height: 80px;
   object-fit: cover;
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
   border: 3px solid transparent;
   flex-shrink: 0;
   opacity: 0.6;
 }

 .modal-thumbnail:hover {
   opacity: 1;
   transform: scale(1.05);
 }

 .modal-thumbnail.active {
   border-color: var(--brand-700);
   opacity: 1;
   box-shadow: 0 4px 12px rgba(14, 90, 132, 0.3);
 }

 .modal-header {
   border-bottom: 2px solid var(--muted-200);
   padding-bottom: 20px;
   margin-bottom: 4px;
 }

 .modal-header h2 {
   margin: 0 0 12px 0;
   font-size: 28px;
   font-weight: 700;
   color: var(--ink-900);
   line-height: 1.2;
 }

 .modal-price {
   font-size: 24px;
   font-weight: 700;
   color: var(--brand-700);
 }

 .modal-location {
   font-size: 15px;
   color: var(--ink-600);
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 16px;
   background: var(--muted-100);
   border-radius: 10px;
   border-left: 3px solid var(--brand-500);
 }

 .modal-features {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin: 8px 0;
 }

 .modal-feature {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px;
   background: var(--muted-100);
   border-radius: 12px;
   font-size: 15px;
   color: var(--ink-700);
   font-weight: 500;
   transition: all 0.2s ease;
 }

 .modal-feature:hover {
   background: var(--muted-200);
   transform: translateY(-2px);
 }

 .modal-feature span:first-child {
   font-size: 20px;
 }

 .modal-description {
   flex: 1;
   margin-top: 8px;
 }

 .modal-description>div {
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--muted-200);
 }

 .modal-description>div:last-child {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
 }

 .modal-description h4 {
   margin: 0 0 10px 0;
   font-size: 16px;
   font-weight: 700;
   color: var(--brand-700);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .modal-description p {
   margin: 0 0 12px 0;
   font-size: 15px;
   color: var(--ink-700);
   line-height: 1.7;
 }

 .modal-description ul {
   margin: 8px 0;
   padding-left: 20px;
 }

 .modal-description li {
   font-size: 14px;
   color: var(--ink-700);
   margin-bottom: 4px;
 }

 .modal-actions {
   display: flex;
   gap: 12px;
   padding-top: 24px;
   margin-top: 8px;
   border-top: 2px solid var(--muted-200);
 }

 .modal-actions .btn {
   font-size: 16px;
   padding: 14px 24px;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
 }

 .modal-actions .btn-secondary {
   background: var(--muted-200);
   color: var(--ink-700);
   border: none;
   padding: 12px 24px;
   border-radius: 8px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
 }

 .modal-actions .btn-secondary:hover {
   background: var(--ink-500);
   color: var(--white);
 }

 /* Responsive modal */
 @media (max-width: 768px) {
   .modal-content {
     width: 95vw;
     max-height: 95vh;
     margin: 2.5vh auto;
   }

   .modal-body {
     grid-template-columns: 1fr;
     max-height: calc(95vh - 60px);
     overflow-y: auto;
   }

   .modal-images {
     height: 200px;
     flex-shrink: 0;
   }

   .modal-details {
     padding: 16px;
     gap: 10px;
     flex: 1;
     min-height: 0;
     overflow-y: auto;
     max-height: calc(95vh - 260px);
   }

   .modal-header {
     padding-bottom: 12px;
   }

   .modal-header h2 {
     font-size: 18px;
     margin-bottom: 4px;
   }

   .modal-price {
     font-size: 16px;
   }

   .scroll-indicator {
     margin: 0 -16px 12px -16px;
     padding-left: 16px;
     padding-right: 16px;
     padding: 8px 16px;
   }

   .scroll-hint {
     font-size: 12px;
     margin-bottom: 6px;
   }

   .scroll-progress {
     display: none;
   }

   .modal-features {
     grid-template-columns: 1fr;
     gap: 8px;
   }

   .modal-feature {
     padding: 8px 12px;
     font-size: 12px;
   }

   .modal-description h4 {
     font-size: 12px;
     margin-bottom: 2px;
   }

   .modal-description p {
     font-size: 11px;
     margin-bottom: 6px;
     line-height: 1.4;
   }

   .modal-actions {
     margin-top: 12px;
     flex-shrink: 0;
     padding-top: 12px;
     border-top: 1px solid var(--muted-200);
   }

   .modal-actions .btn {
     padding: 10px 16px;
     font-size: 14px;
   }

   .modal-close {
     top: 10px;
     right: 10px;
     width: 36px;
     height: 36px;
   }
 }

 /* iPhone específico */
 @media (max-width: 480px) and (max-height: 800px) {
   .modal-content {
     width: 98vw;
     max-height: 98vh;
     margin: 1vh auto;
   }

   .modal-body {
     max-height: calc(98vh - 50px);
   }

   .modal-images {
     height: 180px;
   }

   .modal-details {
     padding: 12px;
     gap: 8px;
   }

   .modal-header h2 {
     font-size: 16px;
   }

   .modal-price {
     font-size: 14px;
   }

   .modal-description p {
     font-size: 10px;
   }

   .modal-actions .btn {
     padding: 8px 12px;
     font-size: 12px;
   }

   .modal-close {
     top: 8px;
     right: 8px;
     width: 32px;
     height: 32px;
   }
 }

 /* Properties carousel - reuse modal carousel styles */
 .properties .image-carousel {
   position: relative;
   width: 100%;
   height: 500px;
   background: var(--muted-50);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   overflow: hidden;
 }

 .properties .carousel-container {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .properties .carousel-slide {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   opacity: 0 !important;
   visibility: hidden !important;
   transition: all 0.5s ease !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   z-index: 1 !important;
 }

 .properties .carousel-slide.active {
   opacity: 1 !important;
   visibility: visible !important;
   z-index: 2 !important;
 }

 .properties .carousel-slide .card.property {
   max-width: 400px;
   width: 90%;
   margin: 0;
   box-shadow: var(--shadow-lg);
   position: relative;
   z-index: 3;
 }

 @media (max-width: 768px) {
   .properties .image-carousel {
     height: 450px;
   }

   .properties .carousel-slide .card.property {
     width: 95%;
     max-width: 350px;
   }
 }

 * {
   box-sizing: border-box
 }

 html,
 body {
   height: 100%;
   overflow-x: hidden
 }

 body {
   margin: 0;
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   color: var(--ink-900);
   line-height: 1.55;
   letter-spacing: .2px;
   background: var(--muted-100);
   -webkit-font-smoothing: antialiased;
 }

 img {
   max-width: 100%;
   display: block
 }

 a {
   color: inherit;
   text-decoration: none
 }

 .container {
   width: min(var(--container-max), 92%);
   margin-inline: auto
 }

 /* Header */
 .site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(255, 255, 255, .8);
   backdrop-filter: saturate(180%) blur(12px);
   border-bottom: 1px solid rgba(14, 90, 132, .08);
   transition: box-shadow .25s ease, background .25s ease
 }

 .header-left {
   display: flex;
   align-items: center;
   gap: 42px
 }

 .header-social {
   display: flex;
   gap: 8px;
   margin-left: 12px
 }

 .header-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 8px;
   background: var(--brand-700);
   transition: background .2s ease
 }

 .header-social a:hover {
   background: var(--brand-500)
 }

 .header-social img {
   width: 18px;
   height: 18px;
   display: block;
   filter: brightness(0) invert(1)
 }

 .site-header.is-scrolled {
   background: rgba(255, 255, 255, .92);
   box-shadow: var(--shadow-sm)
 }

 .header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 0
 }

 .brand-logo {
   height: 48px;
   width: auto;
   transform: scale(1.6);
   transform-origin: left center;
   will-change: transform
 }

 .nav-toggle {
   display: none;
   background: none;
   border: 0;
   width: 44px;
   height: 44px;
   border-radius: 10px;
   position: relative
 }

 .nav-toggle span {
   position: absolute;
   left: 10px;
   right: 10px;
   height: 2px;
   background: var(--ink-900);
   transition: .3s
 }

 .nav-toggle span:nth-child(1) {
   top: 12px
 }

 .nav-toggle span:nth-child(2) {
   top: 19px
 }

 .nav-toggle span:nth-child(3) {
   top: 26px
 }

 .nav-list {
   display: flex;
   gap: 18px;
   align-items: center;
   list-style: none;
   margin: 0;
   padding: 0
 }

 .nav-list a {
   padding: 12px 14px;
   border-radius: 10px;
   color: var(--ink-700);
   position: relative;
   font-size: 16px
 }

 .nav-list a:hover {
   background: var(--muted-200);
   color: var(--ink-900)
 }

 .nav-list a[aria-current="true"],
 .nav-list a.is-active {
   color: var(--brand-700);
   background: rgba(20, 119, 173, .08)
 }

 /* Emphasize header CTA */
 .site-header .btn-primary {
   font-weight: 800;
   color: var(--white)
 }

 .site-header .btn-sm {
   padding: 12px 14px;
   font-size: 15px
 }

 /* Utils */
 .section {
   padding: var(--section-space) 0;
   background: #fff
 }

 .section+.section {
   border-top: 1px solid var(--muted-200)
 }

 .section-head {
   max-width: 760px
 }

 .section-head h2 {
   font-size: clamp(28px, 4vw, 38px);
   margin: 0 0 8px
 }

 .section-head p {
   margin: 0;
   color: var(--ink-500)
 }

 .grid-2 {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 40px;
   align-items: center
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 14px 18px;
   border-radius: 12px;
   border: 1px solid transparent;
   cursor: pointer;
   transition: transform .04s ease, box-shadow .2s ease, background .2s ease, color .2s ease
 }

 .btn:active {
   transform: translateY(1px)
 }

 .btn-sm {
   padding: 10px 12px;
   font-size: 14px
 }

 .btn-primary {
   background: var(--brand-700);
   color: var(--white);
   box-shadow: var(--shadow-md)
 }

 .btn-primary:hover {
   background: var(--brand-500)
 }

 .btn-ghost {
   background: transparent;
   border-color: var(--muted-200);
   color: var(--ink-900)
 }

 .btn-ghost:hover {
   background: var(--muted-200)
 }

 .btn:focus-visible,
 .link:focus-visible,
 .nav-toggle:focus-visible {
   outline: 3px solid color-mix(in srgb, var(--brand-300) 60%, transparent);
   outline-offset: 3px;
   border-radius: 12px
 }

 .link {
   color: var(--brand-700)
 }

 .link:hover {
   text-decoration: underline
 }

 /* Hero */
 .hero {
   padding-top: 110px
 }

 .hero-copy h1 {
   font-size: clamp(34px, 6vw, 56px);
   line-height: 1.05;
   margin: 0 0 12px
 }

 .hero-copy p {
   font-size: 18px;
   color: var(--ink-700);
   max-width: 60ch
 }

 .hero-cta {
   display: flex;
   gap: 12px;
   margin-top: 18px
 }

 .hero-card {
   position: relative;
   overflow: hidden;
   border-radius: 18px;
   box-shadow: var(--shadow-lg)
 }

 .hero-card img {
   height: 420px;
   width: 100%;
   object-fit: cover
 }

 .hero-card .badge {
   position: absolute;
   top: 14px;
   left: 14px;
   background: var(--accent-600);
   color: #fff;
   padding: 8px 10px;
   border-radius: 999px;
   font-weight: 600;
   font-size: 13px
 }

 .hero-card-info {
   position: absolute;
   left: 14px;
   bottom: 14px;
   right: 14px;
   background: rgba(255, 255, 255, .9);
   backdrop-filter: blur(6px);
   border-radius: 14px;
   padding: 12px 14px;
   display: flex;
   flex-direction: column;
   gap: 4px
 }

 .hero-card-info {
   color: var(--ink-900)
 }

 .hero-card-info strong {
   color: var(--ink-900)
 }

 .hero-card-info span {
   color: var(--ink-700)
 }

 .price {
   font-weight: 700;
   color: var(--brand-700)
 }

 /* Hero Showcase */
 .hero-showcase {
   position: relative
 }

 .design-carousel {
   position: relative;
   height: 420px
 }

 .design-slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 0.5s ease-in-out
 }

 .design-slide.active {
   opacity: 1
 }

 .design-price {
   font-weight: 700;
   color: var(--brand-700);
   font-size: 16px;
   margin-top: 4px
 }

 .design-indicators {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 16px
 }

 .indicator {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: none;
   background: var(--ink-300);
   cursor: pointer;
   transition: background 0.3s ease
 }

 .indicator.active {
   background: var(--brand-600)
 }

 .indicator:hover {
   background: var(--brand-500)
 }

 /* Designs */
 .designs {
   background: #fff
 }

 .designs-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   margin-top: 26px
 }

 .designs .carousel-track {
   grid-auto-columns: calc(33.333% - 12px) !important
 }

 .designs .card img {
   width: 100%;
   aspect-ratio: 16/10;
   object-fit: cover
 }

 .designs .card .card-body {
   display: flex;
   flex-direction: column;
   gap: 8px
 }

 .designs .card h3 {
   margin: 0;
   line-height: 1.2;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: calc(1.2em * 2)
 }

 .designs .card p {
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
   color: var(--ink-700);
   min-height: 1.4em
 }

 .card {
   border-radius: 16px;
   overflow: hidden;
   background: #fff;
   box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
   transition: transform .2s ease, box-shadow .2s ease
 }

 .card:hover {
   transform: translateY(-2px);
   box-shadow: 0 14px 28px rgba(14, 90, 132, .16)
 }

 .card img {
   transition: transform .25s ease
 }

 .card:hover img {
   transform: scale(1.04)
 }

 .card-body {
   padding: 16px;
   transition: transform .2s ease;
   transform-origin: left top;
   will-change: transform
 }

 .card:hover .card-body {
   transform: scale(1.03)
 }

 .card h3 {
   margin: 0 0 6px;
   transition: color .2s ease
 }

 .card p {
   margin: 0;
   color: var(--ink-700);
   transition: color .2s ease
 }

 .card:hover h3 {
   color: var(--brand-700)
 }

 .card:hover p {
   color: var(--ink-900)
 }

 /* Unified Carousel System */
 .unified-carousel {
   position: relative;
   margin-top: 24px;
   padding: 0 8px;
 }

 .unified-carousel .carousel-track {
   display: grid;
   grid-auto-flow: column;
   gap: 18px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior-x: contain;
   touch-action: pan-x pan-y;
   padding-bottom: 8px;
 }

 .unified-carousel .carousel-track::-webkit-scrollbar {
   display: none;
 }

 .unified-carousel .carousel-track.is-dragging {
   cursor: grabbing;
   scroll-behavior: auto;
 }

 .unified-carousel .carousel-track {
   cursor: grab;
 }

 /* Carousel Navigation Buttons */
 .unified-carousel .carousel-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, 0.95);
   box-shadow: var(--shadow-lg);
   cursor: pointer;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
   opacity: 0.8;
 }

 .unified-carousel:hover .carousel-btn {
   opacity: 1;
 }

 .unified-carousel .carousel-btn:active {
   transform: translateY(-50%) scale(0.95);
 }

 .unified-carousel .carousel-btn.prev {
   left: 8px;
 }

 .unified-carousel .carousel-btn.next {
   right: 8px;
 }

 .unified-carousel .carousel-btn:hover {
   background: var(--white);
   transform: translateY(-50%) scale(1.1);
 }

 .unified-carousel .carousel-btn svg {
   color: var(--ink-700);
 }

 /* Properties Carousel Specific */
 .unified-carousel[data-carousel="properties"] .carousel-track {
   grid-auto-columns: calc(33.333% - 12px);
 }

 .unified-carousel[data-carousel="properties"] .card.property {
   scroll-snap-align: start;
 }

 .card.property {
   display: flex;
   flex-direction: column;
   background: var(--white);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .card.property:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
 }

 .card.property img {
   width: 100%;
   aspect-ratio: 16/10;
   object-fit: cover;
 }

 .card.property .card-body {
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1;
 }

 .card.property h3 {
   margin: 0;
   line-height: 1.2;
   font-weight: 600;
   color: var(--ink-900);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: calc(1.2em * 2);
 }

 .card.property p {
   margin: 0;
   color: var(--ink-700);
   font-size: 14px;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 1.4em;
 }

 .card.property .price {
   font-weight: 700;
   color: var(--brand-700);
   font-size: 16px;
   margin: 8px 0;
 }

 .card.property .btn {
   margin-top: auto;
   align-self: flex-start;
 }

 /* Designs Carousel Specific */
 .unified-carousel[data-carousel="designs"] .carousel-track {
   grid-auto-columns: calc(33.333% - 12px);
 }

 .card.design {
   scroll-snap-align: start;
   background: var(--white);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .card.design:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
 }

 .card.design img {
   width: 100%;
   aspect-ratio: 16/10;
   object-fit: cover;
 }

 .card.design .card-body {
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .card.design h3 {
   margin: 0;
   line-height: 1.2;
   font-weight: 600;
   color: var(--ink-900);
 }

 .card.design p {
   margin: 0;
   color: var(--ink-700);
   font-size: 14px;
   line-height: 1.4;
 }

 /* Cities Carousel Specific */
 .unified-carousel[data-carousel="cities"] .carousel-track {
   grid-auto-columns: calc(25% - 14px);
 }

 .city-card {
   scroll-snap-align: start;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .city-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
 }

 .city-card a {
   display: block;
   text-decoration: none;
   color: inherit;
 }

 .city-card img {
   width: 100%;
   aspect-ratio: 16/10;
   object-fit: cover;
 }

 .city-card-body {
   padding: 16px;
   background: var(--white);
 }

 .city-card h3 {
   margin: 0 0 8px;
   font-weight: 600;
   color: var(--ink-900);
   font-size: 16px;
 }

 .city-card p {
   margin: 0;
   color: var(--ink-700);
   font-size: 14px;
   line-height: 1.4;
 }

 /* Responsive Design */
 @media (max-width: 900px) {

   .unified-carousel[data-carousel="properties"] .carousel-track,
   .unified-carousel[data-carousel="designs"] .carousel-track {
     grid-auto-columns: calc(50% - 9px);
   }

   .unified-carousel[data-carousel="cities"] .carousel-track {
     grid-auto-columns: calc(50% - 9px);
   }
 }

 @media (max-width: 600px) {

   .unified-carousel[data-carousel="properties"] .carousel-track,
   .unified-carousel[data-carousel="designs"] .carousel-track,
   .unified-carousel[data-carousel="cities"] .carousel-track {
     grid-auto-columns: 85%;
   }

   .unified-carousel .carousel-btn {
     width: 36px;
     height: 36px;
   }
 }

 /* Advisors */
 .advisors-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
   margin-top: 32px;
   justify-items: stretch;
   width: 100%;
   box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: visible;
 }

 /* Mobile-first: Force single column on mobile devices */
 @media (max-width: 768px) {
   .advisors-grid {
     grid-template-columns: 1fr !important;
     grid-auto-flow: row !important;
     grid-auto-columns: 1fr !important;
     overflow-x: hidden !important;
     overflow-y: visible !important;
   }
 }

 /* Cities */
 .cities-track {
   grid-auto-columns: calc(25% - 14px) !important
 }

 .city-card {
   border-radius: 16px;
   overflow: hidden;
   background: #fff;
   box-shadow: var(--shadow-md);
   transition: transform .2s ease, box-shadow .2s ease;
   scroll-snap-align: start;
   user-select: none
 }

 .city-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 14px 28px rgba(14, 90, 132, .16)
 }

 .city-card a {
   display: block;
   user-select: none;
   -webkit-user-drag: none
 }

 .city-card img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   transition: transform .25s ease;
   pointer-events: none
 }

 .city-card:hover img {
   transform: scale(1.04)
 }

 .city-card-body {
   padding: 16px;
   pointer-events: none
 }

 .city-card h3 {
   margin: 0 0 6px;
   transition: color .2s ease
 }

 .city-card p {
   margin: 0;
   color: var(--ink-700);
   font-size: 14px;
   transition: color .2s ease
 }

 .city-card:hover h3 {
   color: var(--brand-700)
 }

 .city-card:hover p {
   color: var(--ink-900)
 }

 /* Cities page & Company page & Properties page */
 .page-hero {
   padding-top: 110px
 }

 .properties-grid-section {
   background: #fff
 }

 .properties-grid-layout {
   display: grid;
   grid-template-columns: 1fr;
   gap: 32px;
   margin-top: 32px
 }

 .property-card {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 28px;
   background: #fff;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: transform .2s ease, box-shadow .2s ease
 }

 .property-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 14px 28px rgba(14, 90, 132, .16)
 }

 .property-image {
   position: relative;
   overflow: hidden;
   border-radius: 16px
 }

 .property-image img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   aspect-ratio: 4/3;
   transition: transform .25s ease;
   background: var(--muted-100)
 }

 .property-card:hover .property-image img {
   transform: scale(1.02)
 }

 .property-badge {
   position: absolute;
   top: 14px;
   right: 14px;
   background: var(--brand-700);
   color: #fff;
   padding: 8px 14px;
   border-radius: 999px;
   font-weight: 600;
   font-size: 13px
 }

 .property-content {
   padding: 24px;
   display: flex;
   flex-direction: column;
   gap: 14px
 }

 .property-content h2 {
   font-size: 28px;
   margin: 0;
   color: var(--ink-900)
 }

 .property-location {
   margin: 0;
   color: var(--brand-700);
   font-weight: 600;
   font-size: 15px
 }

 .property-description {
   margin: 0;
   color: var(--ink-700);
   line-height: 1.7
 }

 .property-features {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   padding: 12px 0;
   border-top: 1px solid var(--muted-200);
   border-bottom: 1px solid var(--muted-200)
 }

 .property-features span {
   color: var(--ink-700);
   font-size: 14px
 }

 .property-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: auto;
   gap: 16px
 }

 .property-price {
   font-size: 22px;
   font-weight: 700;
   color: var(--brand-700)
 }

 .property-details-toggle {
   margin: 8px 0
 }

 .toggle-details-btn {
   display: flex;
   align-items: center;
   gap: 8px;
   background: none;
   border: 1px solid var(--brand-700);
   color: var(--brand-700);
   padding: 10px 16px;
   border-radius: 10px;
   cursor: pointer;
   font-weight: 600;
   font-size: 14px;
   transition: background .2s ease, color .2s ease;
   width: 100%;
   justify-content: center
 }

 .toggle-details-btn:hover {
   background: var(--brand-700);
   color: #fff
 }

 .toggle-details-btn svg {
   transition: transform .3s ease
 }

 .toggle-details-btn.is-open svg {
   transform: rotate(180deg)
 }

 .property-details-expanded {
   margin-top: 16px;
   padding-top: 16px;
   border-top: 1px solid var(--muted-200)
 }

 .detail-section {
   margin-bottom: 20px
 }

 .detail-section:last-child {
   margin-bottom: 0
 }

 .detail-section h4 {
   font-size: 16px;
   margin: 0 0 10px;
   color: var(--ink-900);
   font-weight: 600
 }

 .detail-section p {
   margin: 0;
   color: var(--ink-700);
   line-height: 1.6
 }

 .detail-section ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 6px
 }

 .detail-section li {
   color: var(--ink-700);
   font-size: 14px;
   line-height: 1.6
 }

 .price-options {
   display: grid;
   gap: 16px
 }

 .price-option {
   padding: 14px;
   background: var(--muted-100);
   border-radius: 12px;
   border: 1px solid var(--muted-200)
 }

 .price-option strong {
   display: block;
   margin-bottom: 8px;
   color: var(--brand-700);
   font-size: 15px
 }

 .price-option p {
   margin: 4px 0;
   color: var(--ink-700);
   font-size: 14px;
   line-height: 1.6
 }

 /* All Properties page */
 .all-properties-section {
   background: #fff
 }

 /* Search Container */
 .search-container {
   background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
   border-radius: 20px;
   padding: 32px;
   margin-bottom: 24px;
   box-shadow: var(--shadow-lg);
   transition: all 0.3s ease;
 }

 .search-container:hover {
   box-shadow: 0 20px 50px rgba(14, 90, 132, 0.25);
   transform: translateY(-2px);
 }

 .search-box {
   position: relative;
   max-width: 700px;
   margin: 0 auto;
   display: flex;
   align-items: center;
 }

 .search-icon {
   position: absolute;
   left: 20px;
   color: var(--brand-500);
   transition: all 0.3s ease;
   pointer-events: none;
   z-index: 2;
 }

 .search-input {
   width: 100%;
   padding: 18px 60px 18px 56px;
   border: 3px solid transparent;
   border-radius: 16px;
   font-size: 16px;
   background: var(--white);
   color: var(--ink-900);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   font-weight: 500;
 }

 .search-input::placeholder {
   color: var(--ink-500);
   font-weight: 400;
 }

 .search-input:focus {
   outline: none;
   border-color: var(--white);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(255, 255, 255, 0.3);
   transform: translateY(-2px);
 }

 .search-input:focus+.search-clear {
   opacity: 1;
 }

 .search-clear {
   position: absolute;
   right: 16px;
   background: var(--muted-200);
   border: none;
   border-radius: 50%;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0.7;
   z-index: 2;
 }

 .search-clear:hover {
   background: var(--ink-500);
   transform: scale(1.1) rotate(90deg);
   opacity: 1;
 }

 .search-clear:hover svg {
   color: var(--white);
 }

 .search-clear svg {
   color: var(--ink-700);
   transition: color 0.2s ease;
 }

 .search-hint {
   text-align: center;
   margin: 16px 0 0 0;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 500;
   animation: fadeInUp 0.6s ease 0.2s both;
 }

 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* Property cards animation when filtering */
 .property-card-compact {
   animation: fadeIn 0.4s ease;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .property-card-compact.hiding {
   opacity: 0;
   transform: scale(0.95);
   pointer-events: none;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* Search active state */
 .search-box:focus-within .search-icon {
   color: var(--brand-700);
   transform: scale(1.1);
 }

 /* Searching indicator */
 .search-input.searching {
   background: linear-gradient(90deg, var(--white) 0%, var(--muted-100) 50%, var(--white) 100%);
   background-size: 200% 100%;
   animation: searchingGlow 1.5s ease infinite;
 }

 @keyframes searchingGlow {
   0% {
     background-position: 200% 0;
   }

   100% {
     background-position: -200% 0;
   }
 }

 /* No results message */
 .no-results-message {
   text-align: center;
   padding: 60px 20px;
   background: var(--muted-100);
   border-radius: 16px;
   margin-top: 32px;
   animation: fadeIn 0.4s ease;
 }

 .no-results-message svg {
   width: 80px;
   height: 80px;
   color: var(--ink-500);
   margin: 0 auto 20px;
   opacity: 0.5;
 }

 .no-results-message h3 {
   font-size: 24px;
   color: var(--ink-900);
   margin: 0 0 12px;
 }

 .no-results-message p {
   color: var(--ink-700);
   font-size: 16px;
   margin: 0;
 }

 .filters-container {
   background: var(--muted-100);
   border-radius: 16px;
   padding: 24px;
   margin-bottom: 32px
 }

 .filters-container h3 {
   margin: 0 0 20px;
   font-size: 20px;
   color: var(--ink-900)
 }

 .filters-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 16px;
   align-items: end
 }

 .filter-group {
   display: flex;
   flex-direction: column;
   gap: 8px
 }

 .filter-group label {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink-700)
 }

 .filter-select {
   padding: 10px 12px;
   border: 1px solid var(--muted-300);
   border-radius: 10px;
   font-size: 14px;
   background: #fff;
   color: var(--ink-900);
   cursor: pointer;
   transition: border-color .2s ease
 }

 .filter-select:hover {
   border-color: var(--brand-700)
 }

 .filter-select:focus {
   outline: none;
   border-color: var(--brand-700);
   box-shadow: 0 0 0 3px rgba(20, 119, 173, .1)
 }

 .filter-actions {
   display: flex;
   gap: 10px;
   align-items: center
 }

 .btn-secondary {
   padding: 10px 16px;
   border: 1px solid var(--muted-300);
   background: #fff;
   color: var(--ink-700);
   border-radius: 10px;
   cursor: pointer;
   font-weight: 600;
   font-size: 14px;
   transition: background .2s ease, border-color .2s ease
 }

 .btn-secondary:hover {
   background: var(--muted-100);
   border-color: var(--ink-700)
 }

 .results-header {
   margin-bottom: 20px
 }

 .results-count {
   margin: 0;
   color: var(--ink-700);
   font-size: 15px;
   transition: all 0.3s ease
 }

 .results-count span {
   font-weight: 700;
   color: var(--brand-700);
   display: inline-block;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .results-count.updating span {
   animation: countPulse 0.4s ease;
 }

 @keyframes countPulse {

   0%,
   100% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.2);
     color: var(--brand-500);
   }
 }

 .properties-horizontal-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 20px
 }

 .property-card-compact {
   background: #fff;
   border-radius: 16px;
   box-shadow: var(--shadow-md);
   overflow: hidden;
   transition: transform .2s ease, box-shadow .2s ease;
   display: flex;
   flex-direction: column
 }

 .property-card-compact:hover {
   transform: translateY(-2px);
   box-shadow: 0 14px 28px rgba(14, 90, 132, .16)
 }

 .property-compact-image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4/3
 }

 .property-compact-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .25s ease
 }

 .property-card-compact:hover .property-compact-image img {
   transform: scale(1.04)
 }

 .property-compact-content {
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   flex: 1
 }

 .property-compact-content h3 {
   margin: 0;
   font-size: 20px;
   color: var(--ink-900)
 }

 .compact-location {
   margin: 0;
   color: var(--brand-700);
   font-weight: 600;
   font-size: 13px
 }

 .compact-features {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 8px 0;
   border-top: 1px solid var(--muted-200);
   border-bottom: 1px solid var(--muted-200)
 }

 .compact-features span {
   font-size: 13px;
   color: var(--ink-700)
 }

 .compact-price {
   font-size: 18px;
   font-weight: 700;
   color: var(--brand-700);
   margin-top: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px
 }

 .price-original {
   text-decoration: line-through;
   color: var(--ink-500);
   font-size: 14px;
   font-weight: 500
 }

 .price-discount {
   color: #e03c2f;
   font-weight: 800;
   font-size: 20px
 }

 .compact-actions {
   display: flex;
   gap: 8px;
   margin-top: 8px
 }

 .btn-details {
   flex: 1;
   padding: 8px 12px;
   border: 1px solid var(--brand-700);
   background: none;
   color: var(--brand-700);
   border-radius: 8px;
   cursor: pointer;
   font-weight: 600;
   font-size: 13px;
   transition: background .2s ease, color .2s ease
 }

 .btn-details:hover {
   background: var(--brand-700);
   color: #fff
 }

 .compact-details-expanded {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--muted-200);
   font-size: 13px;
   line-height: 1.6
 }

 .property-card-compact .compact-details-expanded {
   display: none
 }

 .property-card-compact.is-open .compact-details-expanded {
   display: block !important
 }

 .property-card .property-details-expanded {
   display: none
 }

 .property-card.is-open .property-details-expanded {
   display: block !important
 }

 .compact-details-expanded p {
   margin: 0 0 8px;
   color: var(--ink-700)
 }

 .compact-details-expanded strong {
   color: var(--ink-900)
 }

 .compact-details-expanded ul {
   margin: 4px 0 8px;
   padding-left: 20px;
   color: var(--ink-700)
 }

 .compact-details-expanded li {
   margin: 2px 0
 }

 .back-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--brand-700);
   font-weight: 600;
   margin-bottom: 24px;
   padding: 8px 12px;
   border-radius: 10px;
   transition: background .2s ease
 }

 .back-link:hover {
   background: rgba(20, 119, 173, .08)
 }

 .back-link svg {
   flex-shrink: 0
 }

 /* Company page */
 .company-values {
   background: #fff
 }

 .values-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 32px
 }

 .value-card {
   background: #fff;
   border-radius: 16px;
   padding: 28px;
   box-shadow: var(--shadow-md);
   transition: transform .2s ease, box-shadow .2s ease
 }

 .value-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 14px 28px rgba(14, 90, 132, .16)
 }

 .value-icon {
   width: 64px;
   height: 64px;
   border-radius: 12px;
   background: var(--brand-700);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px
 }

 .value-icon svg {
   stroke: #fff
 }

 .value-card h2 {
   font-size: 24px;
   margin: 0 0 14px;
   color: var(--ink-900)
 }

 .value-card p {
   color: var(--ink-700);
   line-height: 1.7;
   margin: 0
 }

 .values-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 12px
 }

 .values-list li {
   color: var(--ink-700);
   line-height: 1.6
 }

 .values-list strong {
   color: var(--ink-900);
   font-weight: 600
 }

 .company-contact {
   background: #fff
 }

 .contact-wrapper {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 40px;
   margin-top: 32px;
   align-items: start
 }

 .contact-info h3 {
   font-size: 20px;
   margin: 0 0 16px;
   color: var(--ink-900)
 }

 .social-links {
   display: grid;
   gap: 12px;
   margin-bottom: 32px
 }

 .social-link {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   border-radius: 12px;
   background: var(--brand-700);
   color: #fff;
   font-weight: 600;
   transition: background .2s ease
 }

 .social-link:hover {
   background: var(--brand-500)
 }

 .social-link img {
   width: 24px;
   height: 24px;
   filter: brightness(0) invert(1)
 }

 .contact-details {
   padding: 20px;
   background: var(--muted-100);
   border-radius: 12px
 }

 .contact-details h3 {
   font-size: 18px;
   margin: 0 0 12px;
   color: var(--ink-900)
 }

 .contact-details p {
   color: var(--ink-700);
   line-height: 1.7;
   margin: 0 0 12px
 }

 .contact-details p:last-child {
   margin: 0
 }

 .company-contact .contact-form {
   margin: 0
 }

 .company-contact .contact-form h3 {
   font-size: 20px;
   margin: 0 0 16px;
   color: var(--ink-900)
 }

 .city-detail {
   background: #fff
 }

 .city-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: center
 }

 .city-content-reverse {
   grid-template-columns: 1fr 1fr
 }

 .city-content-reverse .city-image {
   order: 2
 }

 .city-content-reverse .city-info {
   order: 1
 }

 .city-image {
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-lg)
 }

 .city-image img {
   width: 100%;
   aspect-ratio: 16/10;
   object-fit: cover
 }

 .city-info h2 {
   font-size: clamp(28px, 4vw, 38px);
   margin: 0 0 16px;
   color: var(--ink-900)
 }

 .city-info p {
   color: var(--ink-700);
   line-height: 1.7;
   margin-bottom: 20px
 }

 .city-features {
   list-style: none;
   padding: 0;
   margin: 0 0 24px;
   display: grid;
   gap: 10px
 }

 .city-features li {
   color: var(--ink-700);
   font-size: 15px
 }

 .advisor {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   text-align: center;
   padding: 32px 24px;
   border-radius: 20px;
   background: var(--white);
   box-shadow: var(--shadow-md);
   transition: all 0.3s ease;
   width: 100%;
   box-sizing: border-box;
   position: relative;
   overflow: hidden;
 }

 .advisor::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
 }

 .advisor:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
 }

 .advisor img {
   width: 120px;
   height: 120px;
   min-width: 120px;
   min-height: 120px;
   object-fit: cover;
   border-radius: 50%;
   border: 4px solid var(--brand-100);
   margin-bottom: 20px;
   transition: all 0.3s ease;
   display: block;
   background-color: var(--muted-100);
 }

 .advisor:hover img {
   transform: scale(1.05);
   border-color: var(--brand-300);
 }

 .advisor-info {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   min-width: 0;
 }

 .advisor h3 {
   margin: 0;
   font-size: 20px;
   font-weight: 700;
   color: var(--ink-900);
   line-height: 1.2;
 }

 .advisor .btn {
   margin-top: 8px;
   padding: 12px 24px;
   font-weight: 600;
   border-radius: 12px;
   transition: all 0.2s ease;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   max-width: 100%;
   box-sizing: border-box;
   white-space: nowrap;
 }

 .advisor .btn:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
 }

 /* ============================================
   iOS FORCE VERTICAL LAYOUT - NO HORIZONTAL SCROLL
   ============================================ */
 /* Prevent horizontal scroll on entire page */
 html.ios,
 html.ios body {
   overflow-x: hidden !important;
   width: 100% !important;
   max-width: 100vw !important;
   position: relative !important;
 }

 /* Force vertical single column for advisors on iOS */
 html.ios .section.advisors .container .advisors-grid {
   display: grid !important;
   grid-template-columns: 1fr !important;
   grid-auto-flow: row !important;
   grid-auto-columns: 1fr !important;
   overflow-x: hidden !important;
   overflow-y: visible !important;
   scroll-snap-type: none !important;
   width: 100% !important;
   max-width: 100% !important;
   gap: 16px !important;
   padding: 0 !important;
   margin: 32px 0 0 0 !important;
 }

 html.ios .section.advisors .container .advisors-grid .advisor {
   width: 100% !important;
   max-width: 100% !important;
   min-width: 0 !important;
   margin: 0 !important;
   flex-shrink: 0 !important;
   box-sizing: border-box !important;
 }

 /* Prevent horizontal overflow on iOS section and container */
 html.ios .section.advisors {
   overflow-x: hidden !important;
   width: 100% !important;
   max-width: 100% !important;
 }

 html.ios .section.advisors .container {
   overflow-x: hidden !important;
   width: 100% !important;
   max-width: 100% !important;
 }

 /* Contact */
 .contact .grid-2 {
   align-items: start
 }

 .contact-form {
   background: #fff;
   padding: 18px;
   border-radius: 16px;
   box-shadow: var(--shadow-md);
   display: grid;
   gap: 14px
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
 }

 label {
   display: grid;
   gap: 10px;
   color: var(--ink-700)
 }

 input,
 select,
 textarea {
   width: 100%;
   border-radius: 12px;
   border: 1px solid var(--muted-200);
   background: var(--muted-100);
   outline: 0;
   transition: border-color .2s, background .2s
 }

 input,
 select {
   height: 48px;
   padding: 0 14px
 }

 textarea {
   padding: 12px 14px;
   min-height: 140px;
   resize: none;
   overflow: auto
 }

 /* Select minimal */
 select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%235e7786" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
   background-repeat: no-repeat;
   background-position: right 12px center;
   padding-right: 36px
 }

 input:focus,
 select:focus,
 textarea:focus {
   border-color: var(--brand-300);
   background: #fff
 }

 .form-status {
   margin-top: 4px;
   color: var(--ink-700)
 }

 /* Location */
 .location address {
   font-style: normal;
   color: var(--ink-700);
   line-height: 1.6;
   margin: 10px 0 8px
 }

 .map-card {
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-md);
   background: #fff;
   height: 420px
 }

 .map-card iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block
 }

 /* Align Contact and Location backgrounds and remove divider between them */
 .contact,
 .location {
   background: #fff
 }

 .contact+.location {
   border-top: 1px solid var(--muted-200)
 }

 /* Footer */
 .site-footer {
   border-top: 1px solid rgba(14, 90, 132, .08);
   background: #fff
 }

 .footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 24px 0
 }

 .social-icons {
   display: flex;
   gap: 10px;
   margin: 6px 0 8px
 }

 .social-icons a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 8px;
   background: var(--brand-700);
   transition: background .2s ease
 }

 .social-icons a:hover {
   background: var(--brand-500)
 }

 .social-icons img {
   width: 18px;
   height: 18px;
   display: block;
   filter: brightness(0) invert(1)
 }

 /* Reveal on scroll */
 .reveal {
   opacity: 0;
   transform: translateY(14px);
   transition: opacity .7s ease, transform .7s ease
 }

 .reveal.is-visible {
   opacity: 1;
   transform: none
 }

 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   * {
     animation: none !important;
     transition: none !important
   }

   html:focus-within {
     scroll-behavior: auto
   }
 }

 /* Ripple */
 [data-ripple] {
   position: relative;
   overflow: hidden
 }

 .ripple {
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
   animation: ripple .6s ease-out;
   background: rgba(255, 255, 255, .6);
   pointer-events: none
 }

 @keyframes ripple {
   to {
     transform: scale(10);
     opacity: 0
   }
 }

 /* Responsive */
 @media (max-width: 900px) {
   .grid-2 {
     grid-template-columns: 1fr
   }

   .designs-grid {
     grid-template-columns: 1fr 1fr
   }

   .designs .carousel-track {
     grid-auto-columns: 80% !important
   }

   .advisors-grid {
     grid-template-columns: 1fr !important;
     grid-auto-flow: row !important;
     grid-auto-columns: 1fr !important;
     gap: 20px;
     overflow-x: hidden !important;
     overflow-y: visible !important;
     scroll-snap-type: none !important;
     width: 100% !important;
     max-width: 100% !important;
   }

   .cities-track {
     grid-auto-columns: calc(50% - 9px) !important
   }

   .city-content,
   .city-content-reverse {
     grid-template-columns: 1fr
   }

   .city-content-reverse .city-image {
     order: 1
   }

   .city-content-reverse .city-info {
     order: 2
   }

   .values-grid {
     grid-template-columns: 1fr
   }

   .contact-wrapper {
     grid-template-columns: 1fr
   }

   .property-card {
     grid-template-columns: 1fr
   }

   .carousel-track {
     grid-auto-columns: 80%
   }

   .brand-logo {
     height: 40px;
     transform: scale(1.25)
   }

   .nav-toggle {
     display: inline-block
   }

   .header-left {
     gap: 14px
   }

   .advisor {
     padding: 24px 20px;
   }

   .advisor img {
     width: 100px;
     height: 100px;
   }

   .advisor h3 {
     font-size: 18px;
   }
 }

 @media (max-width: 768px) {
   .search-container {
     padding: 24px 20px;
     border-radius: 16px;
   }

   .search-input {
     padding: 16px 50px 16px 48px;
     font-size: 15px;
   }

   .search-icon {
     left: 16px;
     width: 18px;
     height: 18px;
   }

   .search-clear {
     right: 12px;
     width: 28px;
     height: 28px;
   }

   .search-hint {
     font-size: 13px;
     margin-top: 12px;
   }
 }

 @media (max-width: 600px) {
   .advisors-grid {
     display: grid !important;
     grid-template-columns: 1fr !important;
     grid-auto-flow: row !important;
     grid-auto-columns: 1fr !important;
     gap: 16px;
     overflow-x: hidden !important;
     overflow-y: visible !important;
     width: 100% !important;
     max-width: 100% !important;
     justify-items: stretch !important;
     padding: 0 !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
     scroll-snap-type: none !important;
   }

   .advisor {
     padding: 20px 16px;
     width: 100% !important;
     max-width: 100% !important;
     box-sizing: border-box !important;
     margin: 0 !important;
     min-width: 0;
   }

   .advisor-info {
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
   }

   .advisor .btn {
     width: auto;
     max-width: 100%;
     white-space: normal;
     word-wrap: break-word;
   }

   .advisor img {
     width: 90px;
     height: 90px;
     min-width: 90px;
     min-height: 90px;
   }

   .advisor h3 {
     font-size: 17px;
   }

   .advisor .btn {
     padding: 10px 20px;
     font-size: 14px;
   }

   .hero-title {
     font-size: clamp(28px, 8vw, 40px);
   }

   .hero-description {
     font-size: 16px;
   }

   .hero-stats {
     gap: 24px;
   }

   .stat-number {
     font-size: 24px;
   }

   .hero-features {
     grid-template-columns: 1fr;
     gap: 20px;
   }

   .feature-card {
     padding: 20px 16px;
   }

   .hero-cta {
     flex-direction: column;
     align-items: center;
   }

   .btn-large {
     padding: 14px 28px;
     font-size: 15px;
   }
 }

 @media (max-width: 900px) {
   .header-social {
     margin-left: 6px
   }

   .header-social a {
     width: 26px;
     height: 26px
   }

   .header-social img {
     width: 16px;
     height: 16px
   }

   .nav-list {
     position: fixed;
     inset: 60px 16px auto 16px;
     background: #fff;
     padding: 16px;
     border-radius: 16px;
     box-shadow: var(--shadow-lg);
     flex-direction: column;
     align-items: stretch;
     gap: 12px;
     transform: translateY(-20px);
     opacity: 0;
     pointer-events: none;
     transition: .25s
   }

   .nav-list li {
     list-style: none
   }

   .nav-list a {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px 18px;
     border: 1px solid var(--muted-200);
     background: var(--muted-100);
     border-radius: 12px;
     font-size: 17px
   }

   .nav-list a::after {
     content: none
   }

   .nav-list a:hover {
     background: #fff
   }

   .nav-list a[aria-current="true"],
   .nav-list a.is-active {
     border-color: var(--brand-300);
     background: #fff
   }

   /* Emphasize primary CTA visibility */
   .nav-list .btn {
     width: 100%;
     justify-content: center;
     font-weight: 800;
     border: 1px solid transparent
   }

   .nav-list .btn.btn-primary {
     background: var(--brand-700);
     color: #fff;
     border-color: var(--brand-700);
     box-shadow: var(--shadow-md)
   }

   .nav-list .btn.btn-primary:hover {
     background: var(--brand-500)
   }

   .nav[data-open="true"] .nav-list {
     transform: none;
     opacity: 1;
     pointer-events: auto
   }

   .nav[data-open="true"] .nav-toggle span:nth-child(1) {
     transform: translateY(7px) rotate(45deg)
   }

   .nav[data-open="true"] .nav-toggle span:nth-child(2) {
     opacity: 0
   }

   .nav[data-open="true"] .nav-toggle span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg)
   }

   .map-card {
     height: 300px
   }
 }

 /* Dropdown navigation styles */
 .nav-dropdown {
   position: relative;
 }

 .nav-dropdown-toggle {
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .nav-dropdown-toggle::after {
   content: '';
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 4px solid currentColor;
   transition: transform 0.2s ease;
 }

 .nav-dropdown:hover .nav-dropdown-toggle::after {
   transform: rotate(180deg);
 }

 .nav-dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(14, 90, 132, 0.15);
   border: 1px solid var(--muted-200);
   min-width: 200px;
   padding: 8px 0;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: all 0.2s ease;
   z-index: 1000;
   list-style: none;
   margin: 0;
 }

 .nav-dropdown:hover .nav-dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }

 .nav-dropdown-menu li {
   margin: 0;
 }

 .nav-dropdown-menu a {
   display: block;
   padding: 12px 20px;
   color: var(--ink-700);
   text-decoration: none;
   font-weight: 500;
   font-size: 14px;
   transition: all 0.2s ease;
   border-radius: 0;
 }

 .nav-dropdown-menu a:hover {
   background: var(--muted-100);
   color: var(--brand-700);
   padding-left: 24px;
 }

 /* Development page styles */
 .developments-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
   gap: 40px;
   margin-top: 40px;
 }

 .development-card {
   background: #fff;
   border-radius: 20px;
   box-shadow: 0 8px 32px rgba(14, 90, 132, 0.12);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .development-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 48px rgba(14, 90, 132, 0.18);
 }

 .development-gallery {
   position: relative;
 }

 .gallery-main {
   position: relative;
   height: 400px;
   overflow: hidden;
   border-radius: 16px 16px 0 0;
 }

 .main-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
 }

 .development-card:hover .main-image {
   transform: scale(1.02);
 }

 .gallery-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding: 24px;
   z-index: 10;
   pointer-events: none;
 }

 .gallery-overlay * {
   pointer-events: auto;
 }

 .gallery-expand-btn {
   background: rgba(255, 255, 255, 0.95);
   color: var(--ink-900);
   border: none;
   padding: 12px 20px;
   border-radius: 25px;
   font-weight: 600;
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   backdrop-filter: blur(10px);
 }

 .gallery-expand-btn:hover {
   background: #fff;
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

 .gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 4px;
   padding: 0;
   background: #fff;
 }

 .grid-image {
   width: 100%;
   height: 80px;
   object-fit: cover;
   cursor: pointer;
   transition: all 0.2s ease;
   border: 2px solid transparent;
 }

 .grid-image:hover {
   transform: scale(1.05);
   border-color: var(--brand-700);
   z-index: 2;
   position: relative;
 }

 .grid-image.active {
   border-color: var(--brand-700);
   opacity: 0.8;
 }

 .more-images {
   position: relative;
   cursor: pointer;
   overflow: hidden;
 }

 .more-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 600;
   font-size: 14px;
   transition: background 0.2s ease;
 }

 .more-images:hover .more-overlay {
   background: rgba(0, 0, 0, 0.8);
 }

 .development-content {
   padding: 32px;
 }

 .development-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
 }

 .development-header h3 {
   font-size: 28px;
   margin: 0;
   color: var(--ink-900);
 }

 .development-status {
   background: var(--brand-100);
   color: var(--brand-700);
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 600;
 }

 .development-description {
   color: var(--ink-700);
   line-height: 1.6;
   margin: 0 0 24px;
   font-size: 16px;
 }

 .development-features {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 32px;
   padding: 20px 0;
   border-top: 1px solid var(--muted-200);
   border-bottom: 1px solid var(--muted-200);
 }

 .feature-item {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--ink-700);
   font-size: 15px;
 }

 .feature-item svg {
   color: var(--brand-700);
   flex-shrink: 0;
 }

 .development-actions {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
 }

 .development-actions .btn {
   flex: 1;
   min-width: 200px;
 }

 .development-actions .btn-outline {
   background: transparent;
   border: 2px solid var(--brand-700);
   color: var(--brand-700);
 }

 .development-actions .btn-outline:hover {
   background: var(--brand-700);
   color: #fff;
 }

 /* Gallery Modal Styles */
 .gallery-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.95);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10000;
   padding: 20px;
 }

 .gallery-modal-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

 .gallery-modal-content {
   position: relative;
   max-width: 90vw;
   max-height: 90vh;
   background: #fff;
   border-radius: 16px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }

 .gallery-modal-close {
   position: absolute;
   top: 16px;
   right: 16px;
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   border: none;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 10001;
   transition: background 0.2s ease;
 }

 .gallery-modal-close:hover {
   background: rgba(0, 0, 0, 0.9);
 }

 .gallery-modal-main {
   position: relative;
   height: 60vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--muted-100);
 }

 .gallery-modal-image {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
 }

 .gallery-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   border: none;
   border-radius: 50%;
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.2s ease;
 }

 .gallery-nav:hover {
   background: rgba(0, 0, 0, 0.9);
 }

 .gallery-prev {
   left: 16px;
 }

 .gallery-next {
   right: 16px;
 }

 .gallery-modal-thumbnails {
   display: flex;
   gap: 8px;
   padding: 16px;
   background: var(--muted-50);
   overflow-x: auto;
   max-height: 120px;
 }

 .gallery-thumb {
   width: 80px;
   height: 60px;
   object-fit: cover;
   border-radius: 8px;
   cursor: pointer;
   opacity: 0.7;
   transition: opacity 0.2s ease;
   flex-shrink: 0;
   border: 2px solid transparent;
 }

 .gallery-thumb:hover {
   opacity: 1;
 }

 .gallery-thumb.active {
   opacity: 1;
   border-color: var(--brand-700);
 }

 .development-placeholder {
   background: var(--muted-100);
   border: 2px dashed var(--muted-300);
   border-radius: 16px;
   padding: 48px 32px;
   text-align: center;
   transition: border-color 0.2s ease, background 0.2s ease;
 }

 .development-placeholder:hover {
   border-color: var(--brand-700);
   background: var(--muted-50);
 }

 .placeholder-content h3 {
   font-size: 24px;
   margin: 0 0 16px;
   color: var(--ink-900);
 }

 .placeholder-content p {
   margin: 0 0 24px;
   color: var(--ink-700);
   line-height: 1.6;
 }

 .cta-section {
   background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
   color: #fff;
 }

 .cta-content {
   text-align: center;
   max-width: 600px;
   margin: 0 auto;
 }

 .cta-content h2 {
   font-size: 32px;
   margin: 0 0 16px;
   color: #fff;
 }

 .cta-content p {
   font-size: 18px;
   margin: 0 0 32px;
   color: rgba(255, 255, 255, 0.9);
   line-height: 1.6;
 }

 .cta-actions {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
 }

 .btn-outline {
   background: transparent;
   border: 2px solid #fff;
   color: #fff;
 }

 .btn-outline:hover {
   background: #fff;
   color: var(--brand-700);
 }

 @media (max-width: 768px) {

   /* Mobile dropdown styles */
   .nav-dropdown-menu {
     position: static;
     opacity: 1;
     visibility: visible;
     transform: none;
     box-shadow: none;
     border: none;
     background: var(--muted-50);
     border-radius: 8px;
     margin-top: 8px;
     display: none;
   }

   .nav-dropdown:hover .nav-dropdown-menu {
     display: block;
   }

   .nav-dropdown-toggle::after {
     display: none;
   }

   .cta-content h2 {
     font-size: 28px;
   }

   .cta-content p {
     font-size: 16px;
   }

   .cta-actions {
     flex-direction: column;
     align-items: center;
   }

   .cta-actions .btn {
     width: 100%;
     max-width: 300px;
   }

   /* Mobile development styles */
   .developments-grid {
     grid-template-columns: 1fr;
     gap: 24px;
   }

   .gallery-main {
     height: 250px;
   }

   .gallery-grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
   }

   .grid-image {
     height: 60px;
   }

   .gallery-expand-btn {
     padding: 10px 16px;
     font-size: 13px;
   }

   .development-content {
     padding: 24px;
   }

   .development-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }

   .development-header h3 {
     font-size: 24px;
   }

   .development-features {
     flex-direction: column;
     gap: 12px;
   }

   .development-actions {
     flex-direction: column;
   }

   .development-actions .btn {
     min-width: auto;
   }

   .gallery-modal-content {
     max-width: 95vw;
     max-height: 95vh;
   }

   .gallery-modal-main {
     height: 50vh;
   }

   .gallery-nav {
     width: 40px;
     height: 40px;
   }

   .gallery-prev {
     left: 8px;
   }

   .gallery-next {
     right: 8px;
   }
 }

 /* Section Tabs Styles */
 .section-tabs {
   display: flex;
   justify-content: flex-start;
   gap: 8px;
   margin-top: 24px;
   background: var(--muted-100);
   padding: 6px;
   border-radius: 12px;
   width: fit-content;
   margin-left: 0;
   margin-right: auto;
 }

 .tab-btn {
   background: transparent;
   border: none;
   padding: 12px 24px;
   border-radius: 8px;
   font-weight: 600;
   font-size: 14px;
   color: var(--ink-700);
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
 }

 .tab-btn:hover {
   background: rgba(255, 255, 255, 0.5);
   color: var(--brand-700);
 }

 .tab-btn.active {
   background: #fff;
   color: var(--brand-700);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .tab-content {
   display: none;
   margin-top: 40px;
 }

 .tab-content.active {
   display: block;
 }

 /* Development Showcase Styles */
 .developments-showcase {
   max-width: 1200px;
   margin: 0 auto;
 }

 /* Development Mini Cards */
 .developments-grid-showcase {
   margin-top: 48px;
 }

 .development-mini-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
 }

 .development-mini-card {
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 4px 16px rgba(14, 90, 132, 0.08);
   overflow: hidden;
   transition: all 0.3s ease;
 }

 .development-mini-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 32px rgba(14, 90, 132, 0.16);
 }

 .development-mini-card img {
   width: 100%;
   height: 200px;
   object-fit: cover;
 }

 .mini-card-content {
   padding: 20px;
 }

 .mini-card-content h4 {
   font-size: 20px;
   font-weight: 700;
   color: var(--ink-900);
   margin: 0 0 8px 0;
 }

 .mini-status {
   display: inline-block;
   background: var(--accent-500);
   color: white;
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 8px;
 }

 .mini-bonus {
   display: inline-block;
   background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
   color: white;
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 700;
   margin-bottom: 12px;
   margin-left: 8px;
   box-shadow: 0 2px 8px rgba(122, 162, 51, 0.3);
 }

 .mini-card-content p {
   color: var(--ink-700);
   font-size: 14px;
   margin: 0 0 16px 0;
 }

 .mini-card-actions {
   display: flex;
   gap: 8px;
   flex-direction: column;
 }

 .mini-card-actions .btn {
   font-size: 12px;
   padding: 8px 16px;
   border-radius: 8px;
   text-align: center;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.2s ease;
 }

 .mini-card-actions .btn-sm {
   min-height: auto;
 }

 .mini-card-actions .btn-outline {
   background: transparent;
   border: 2px solid var(--brand-700);
   color: var(--brand-700);
 }

 .mini-card-actions .btn-outline:hover {
   background: var(--brand-700);
   color: #fff;
 }

 @media (max-width: 600px) {
   .development-mini-cards {
     grid-template-columns: 1fr;
     gap: 16px;
   }

   .developments-grid-showcase {
     margin-top: 32px;
   }
 }

 .development-showcase-card {
   background: #fff;
   border-radius: 20px;
   box-shadow: 0 8px 32px rgba(14, 90, 132, 0.12);
   overflow: hidden;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .development-showcase-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 48px rgba(14, 90, 132, 0.18);
 }

 .development-showcase-gallery {
   position: relative;
   background: var(--muted-50);
 }

 .showcase-main-image {
   width: 100%;
   height: 300px;
   object-fit: cover;
   transition: transform 0.3s ease;
 }

 .development-showcase-card:hover .showcase-main-image {
   transform: scale(1.05);
 }

 .showcase-thumbnails {
   position: absolute;
   bottom: 16px;
   left: 16px;
   right: 16px;
   display: flex;
   gap: 8px;
 }

 .showcase-thumb {
   width: 60px;
   height: 45px;
   object-fit: cover;
   border-radius: 8px;
   border: 2px solid rgba(255, 255, 255, 0.8);
   transition: all 0.2s ease;
   cursor: pointer;
 }

 .showcase-thumb:hover {
   border-color: #fff;
   transform: scale(1.1);
 }

 .showcase-thumb.active {
   border-color: var(--brand-700);
   transform: scale(1.05);
 }

 .development-showcase-content {
   padding: 32px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .showcase-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
 }

 .showcase-header h3 {
   font-size: 28px;
   margin: 0;
   color: var(--ink-900);
 }

 .showcase-status {
   background: var(--brand-100);
   color: var(--brand-700);
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .showcase-bonus {
   background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
   color: white;
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 700;
   margin-left: 12px;
   box-shadow: 0 4px 12px rgba(122, 162, 51, 0.3);
 }

 .development-showcase-content p {
   color: var(--ink-700);
   line-height: 1.6;
   margin: 0 0 24px;
   font-size: 16px;
 }

 .showcase-features {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 32px;
 }

 .feature-tag {
   background: var(--muted-100);
   color: var(--ink-700);
   padding: 6px 12px;
   border-radius: 16px;
   font-size: 13px;
   font-weight: 500;
 }

 .showcase-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
 }

 .showcase-actions .btn {
   flex: 1;
   min-width: 160px;
   font-size: 14px;
   padding: 12px 20px;
 }

 .showcase-actions .btn-outline {
   background: transparent;
   border: 2px solid var(--brand-700);
   color: var(--brand-700);
 }

 .showcase-actions .btn-outline:hover {
   background: var(--brand-700);
   color: #fff;
 }

 @media (max-width: 768px) {
   .section-tabs {
     width: 100%;
     margin-right: 0;
   }

   .tab-btn {
     flex: 1;
     padding: 10px 16px;
     font-size: 13px;
   }

   .development-showcase-card {
     grid-template-columns: 1fr;
   }

   .showcase-main-image {
     height: 250px;
   }

   .development-showcase-content {
     padding: 24px;
   }

   .showcase-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }

   .showcase-header h3 {
     font-size: 24px;
   }

   .showcase-actions {
     flex-direction: column;
   }

   .showcase-actions .btn {
     min-width: auto;
   }
 }

 /* FINAL OVERRIDE: iOS advisors must be vertical single column - highest priority */
 html.ios #asesores .container .advisors-grid,
 html.ios section#asesores .container .advisors-grid,
 html.ios .section.advisors .container .advisors-grid {
   display: grid !important;
   grid-template-columns: 1fr !important;
   grid-auto-flow: row !important;
   grid-auto-columns: 1fr !important;
   overflow-x: hidden !important;
   overflow-y: visible !important;
   scroll-snap-type: none !important;
 }

 html.ios #asesores .container .advisors-grid .advisor,
 html.ios section#asesores .container .advisors-grid .advisor,
 html.ios .section.advisors .container .advisors-grid .advisor {
   width: 100% !important;
   max-width: 100% !important;
   min-width: 0 !important;
 }