/* CSS VARIABLES & RESET */
 :root {
     --c-white: #FFFFFF;
     --c-black: #000000;
     --c-orange: #F47D30;
     --c-gray: #717074;

     /* Opacity variants of allowed colors */
     --c-shadow: rgba(0, 0, 0, 0.08);
     --c-shadow-hover: rgba(0, 0, 0, 0.18);
     --c-border: rgba(113, 112, 116, 0.2);
     --c-bg-light: rgba(113, 112, 116, 0.05);
     --c-overlay: rgba(0, 0, 0, 0.6);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }

 body {
     background-color: var(--c-white);
     color: var(--c-black);
     line-height: 1.6;
     overflow-x: hidden;
 }

 html {
     scroll-behavior: smooth;
 }

 section {
     scroll-margin-top: 80px;
 }

 /* TYPOGRAPHY */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-weight: 700;
     line-height: 1.2;
     color: var(--c-black);
 }

 p {
     color: var(--c-gray);
 }

 /* REUSABLE CLASSES */
 .container {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .section-padding {
     padding: 80px 0;
 }

 .section-title {
     font-size: 2.5rem;
     text-align: center;
     margin-bottom: 10px;
 }

 .section-subtitle {
     text-align: center;
     color: var(--c-gray);
     margin-bottom: 50px;
     font-size: 1.1rem;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
 }

 /* BUTTONS */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 24px;
     font-size: 1rem;
     font-weight: 600;
     text-decoration: none;
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
     outline: none;
 }

 .btn-primary {
     background-color: var(--c-orange);
     color: var(--c-white);
 }

 .btn-primary:hover {
     background-color: var(--c-black);
     color: var(--c-white);
 }

 .btn-outline {
     background-color: transparent;
     color: var(--c-white);
     border: 2px solid var(--c-white);
 }

 .btn-outline:hover {
     background-color: var(--c-white);
     color: var(--c-black);
 }

 .btn-black {
     background-color: var(--c-black);
     color: var(--c-white);
 }

 .btn-black:hover {
     background-color: var(--c-orange);
 }

 .btn-outline-dark {
     background-color: transparent;
     color: var(--c-black);
     border: 2px solid var(--c-black);
 }

 .btn-outline-dark:hover {
     background-color: var(--c-black);
     color: var(--c-white);
 }

 /* ANIMATIONS */
 .reveal {
     opacity: 0;
     transform: translateY(40px);
     transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
 }

 .reveal.active {
     opacity: 1;
     transform: translateY(0);
 }

 /* HERO SECTION */
 .hero {
     position: relative;
     height: 70vh;
     min-height: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-image: url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
     background-size: cover;
     background-position: center;
     text-align: center;
     padding: 0 20px;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(var(--c-overlay), rgba(0, 0, 0, 0.8));
 }

 .hero-content {
     position: relative;
     z-index: 1;
     max-width: 800px;
     animation: fadeIn 1s ease-out forwards;
 }

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

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

 .hero h1 {
     color: var(--c-white);
     font-size: 3.5rem;
     margin-bottom: 20px;
 }

 .hero p {
     color: var(--c-white);
     font-size: 1.2rem;
     margin-bottom: 40px;
     opacity: 0.9;
 }

 /* SEARCH & FILTER BAR (STICKY, UNIFIED ROW) */
 .search-bar-wrapper {
     position: sticky;
     top: 0;
     z-index: 100;
     background-color: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(8px);
     box-shadow: 0 4px 15px var(--c-shadow);
     padding: 15px 0;
 }

 .search-grid {
     display: flex;
     align-items: stretch;
     background: var(--c-white);
     border: 1px solid var(--c-border);
     border-radius: 8px;
     box-shadow: 0 2px 8px var(--c-shadow);
 }

 .search-field {
     flex: 1;
     border-right: 1px solid var(--c-border);
     position: relative;
 }

 .search-field:first-child select {
     border-radius: 8px 0 0 8px;
 }

 .search-field select {
     width: 100%;
     height: 100%;
     padding: 15px 40px 15px 20px;
     border: none;
     border-radius: 0;
     font-size: 1rem;
     color: var(--c-black);
     background-color: transparent;
     cursor: pointer;
     outline: none;
     appearance: none;
     -webkit-appearance: none;
     background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23717074" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     transition: background-color 0.2s ease;
 }

 .search-field select:focus,
 .search-field select:hover {
     background-color: var(--c-bg-light);
 }

 .btn-search {
     border-radius: 0 8px 8px 0;
     padding: 15px 30px;
     white-space: nowrap;
 }

 /* FEATURED RENTALS GRID */
 .properties-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 30px;
 }

 .property-card {
     background: var(--c-white);
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 10px var(--c-shadow);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     position: relative;
 }

 .property-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px var(--c-shadow-hover);
 }

 .property-img-wrapper {
     position: relative;
     height: 220px;
     overflow: hidden;
 }

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

 .property-card:hover .property-img {
     transform: scale(1.1);
 }

 .fav-btn {
     position: absolute;
     top: 15px;
     right: 15px;
     background: var(--c-white);
     border: none;
     border-radius: 50%;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 2px 5px var(--c-shadow);
     z-index: 2;
 }

 .fav-btn svg {
     width: 18px;
     height: 18px;
     fill: var(--c-gray);
     transition: fill 0.3s;
 }

 .fav-btn.active svg {
     fill: var(--c-orange);
 }

 .property-badge {
     position: absolute;
     top: 15px;
     left: 15px;
     background: var(--c-black);
     color: var(--c-white);
     padding: 4px 12px;
     font-size: 0.8rem;
     font-weight: 600;
     border-radius: 4px;
     z-index: 2;
 }

 .property-content {
     padding: 20px;
 }

 .property-price {
     font-size: 1.5rem;
     color: var(--c-orange);
     font-weight: 700;
     margin-bottom: 5px;
 }

 .price-period {
     font-size: 0.9rem;
     color: var(--c-gray);
     font-weight: 400;
 }

 .property-title {
     font-size: 1.1rem;
     margin-bottom: 5px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .property-location {
     color: var(--c-gray);
     font-size: 0.9rem;
     margin-bottom: 15px;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .property-features {
     display: flex;
     justify-content: space-between;
     border-top: 1px solid var(--c-border);
     border-bottom: 1px solid var(--c-border);
     padding: 10px 0;
     margin-bottom: 15px;
 }

 .feature {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 0.9rem;
     color: var(--c-gray);
 }

 .property-desc {
     font-size: 0.9rem;
     margin-bottom: 20px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .property-card .btn {
     width: 100%;
 }

 /* INSPECTION TIMES */
 .inspections-section {
     background-color: var(--c-bg-light);
 }

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

 .inspection-card {
     background: var(--c-white);
     border-left: 4px solid var(--c-orange);
     padding: 20px;
     border-radius: 4px;
     box-shadow: 0 2px 10px var(--c-shadow);
     transition: transform 0.3s;
 }

 .inspection-card:hover {
     transform: translateX(5px);
     border-left-color: var(--c-black);
 }

 .insp-date-time {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 700;
     color: var(--c-black);
     margin: 10px 0;
     font-size: 1.1rem;
 }

 /* LANDLORD SERVICES */
 .services-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 .service-card {
     background: var(--c-white);
     padding: 30px;
     border: 1px solid var(--c-border);
     border-radius: 8px;
     text-align: center;
     transition: all 0.3s;
 }

 .service-card:hover {
     border-color: var(--c-orange);
     box-shadow: 0 10px 20px var(--c-shadow);
     transform: translateY(-5px);
 }

 .service-icon {
     width: 50px;
     height: 50px;
     background: var(--c-bg-light);
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     color: var(--c-orange);
 }

 .service-icon svg {
     width: 24px;
     height: 24px;
     fill: currentColor;
 }

 .service-card h4 {
     margin-bottom: 15px;
     font-size: 1.2rem;
 }

 /* RENTING TIPS */
 .tips-section {
     background-color: var(--c-bg-light);
 }

 .tips-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
 }

 .tip-card {
     background: var(--c-white);
     padding: 25px;
     border-radius: 8px;
     border-left: 3px solid var(--c-gray);
     transition: all 0.3s;
 }

 .tip-card:hover {
     border-left-color: var(--c-orange);
     box-shadow: 0 4px 15px var(--c-shadow);
 }

 .tip-card h4 {
     margin-bottom: 10px;
     color: var(--c-black);
 }

 /* TENANT CHECKLIST */
 .checklist-container {
     max-width: 800px;
     margin: 0 auto;
     background: var(--c-white);
     padding: 40px;
     border-radius: 8px;
     box-shadow: 0 4px 20px var(--c-shadow);
     border-top: 4px solid var(--c-orange);
 }

 .progress-wrapper {
     margin-bottom: 30px;
 }

 .progress-header {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
     font-weight: 600;
 }

 .progress-bar-bg {
     height: 10px;
     background-color: var(--c-border);
     border-radius: 5px;
     overflow: hidden;
 }

 .progress-bar-fill {
     height: 100%;
     background-color: var(--c-orange);
     width: 0%;
     transition: width 0.4s ease;
 }

 .check-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 15px;
     padding: 12px;
     border-radius: 4px;
     transition: background 0.3s;
     cursor: pointer;
     border: 1px solid transparent;
 }

 .check-item:hover {
     background-color: var(--c-bg-light);
     border-color: var(--c-border);
 }

 .check-item input[type="checkbox"] {
     appearance: none;
     width: 24px;
     height: 24px;
     border: 2px solid var(--c-gray);
     border-radius: 4px;
     margin-right: 15px;
     cursor: pointer;
     position: relative;
     transition: all 0.2s;
     flex-shrink: 0;
     margin-top: 2px;
 }

 .check-item input[type="checkbox"]:checked {
     background-color: var(--c-orange);
     border-color: var(--c-orange);
 }

 .check-item input[type="checkbox"]:checked::after {
     content: '';
     position: absolute;
     top: 2px;
     left: 7px;
     width: 6px;
     height: 12px;
     border: solid var(--c-white);
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 .check-text-wrap {
     display: flex;
     flex-direction: column;
 }

 .check-item span.title {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--c-black);
     transition: color 0.3s;
 }

 .check-item span.desc {
     font-size: 0.85rem;
     color: var(--c-gray);
     margin-top: 4px;
 }

 .check-item input[type="checkbox"]:checked~.check-text-wrap span.title {
     color: var(--c-gray);
     text-decoration: line-through;
 }

 /* PROPERTY ALERTS & CTA */
 .alert-form-wrapper {
     max-width: 600px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .alert-form-wrapper input,
 .alert-form-wrapper select {
     padding: 15px;
     border: 1px solid var(--c-border);
     border-radius: 4px;
     font-size: 1rem;
     outline: none;
 }

 .alert-form-wrapper input:focus,
 .alert-form-wrapper select:focus {
     border-color: var(--c-orange);
 }

 .alert-msg {
     display: none;
     padding: 15px;
     border-radius: 4px;
     text-align: center;
     font-weight: 600;
 }

 .alert-msg.success {
     display: block;
     background: #e8f5e9;
     color: #2e7d32;
 }

 .bottom-cta {
     background-color: #717074;
     color: var(--c-white);
     text-align: center;
     padding: 100px 20px;
 }

 .bottom-cta h2 {
     color: var(--c-white);
     font-size: 3rem;
     margin-bottom: 30px;
 }

 .bottom-cta .btn {
     margin: 0 10px;
 }

 /* MODAL */
 .modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     z-index: 1000;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s;
 }

 .modal.show {
     display: flex;
     opacity: 1;
 }

 .modal-content {
     background: var(--c-white);
     padding: 40px;
     border-radius: 8px;
     width: 90%;
     max-width: 500px;
     position: relative;
     transform: translateY(-20px);
     transition: transform 0.3s;
 }

 .modal.show .modal-content {
     transform: translateY(0);
 }

 .modal-close {
     position: absolute;
     top: 15px;
     right: 20px;
     font-size: 1.5rem;
     cursor: pointer;
     border: none;
     background: none;
     color: var(--c-gray);
 }

 /* ICONS SVG HELPER CLASSES */
 .icon {
     width: 16px;
     height: 16px;
     fill: currentColor;
 }

 /* RESPONSIVE DESIGN */
 @media (max-width: 1024px) {
     .search-grid {
         flex-wrap: wrap;
         border: none;
         background: transparent;
         box-shadow: none;
         gap: 10px;
     }

     .search-field {
         flex: 1 1 45%;
         border: 1px solid var(--c-border);
         border-radius: 8px;
         background: var(--c-white);
     }

     .search-field:first-child select,
     .search-field select {
         border-radius: 8px;
     }

     .btn-search {
         flex: 1 1 100%;
         border-radius: 8px;
     }

     .services-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .hero h1 {
         font-size: 2.8rem;
     }
 }

 @media (max-width: 768px) {
     .search-grid {
         flex-direction: column;
         gap: 10px;
     }

     .search-field {
         flex: 1 1 100%;
         width: 100%;
     }

     .services-grid {
         grid-template-columns: 1fr;
     }

     .hero h1 {
         font-size: 2.2rem;
     }

     .bottom-cta h2 {
         font-size: 2rem;
     }

     .bottom-cta .btn {
         display: block;
         margin: 10px auto;
         width: 80%;
     }

     .section-padding {
         padding: 50px 0;
     }
 }