/**
 * ===========================================================================
 * RESPONSIVE DESIGN SYSTEM (GOLDEN RULE — WITH SCALING INTENT)
 * ===========================================================================
 *
 * WHY (Intent)
 * - Desktop (1440px) is the primary design reference
 * - Figma designs may exist ONLY for desktop initially
 * - UI must remain readable and balanced on all devices
 * - Responsive behavior must be predictable, not improvised
 *
 * Responsive design exists to PRESERVE INTENT, not exact sizes.
 *
 *
 * HOW (Strategy & Governance)
 *
 * 1. PRIMARY DESIGN REFERENCE (LOCKED)
 *    - 1440px is the ONLY authoritative design reference
 *    - All sizes (font, spacing, layout) are evaluated here first
 *
 *    Example:
 *    - Desktop heading = 74px
 *    - Desktop spacing = 6rem
 *
 *
 * 2. RESPONSIVE SCALING PHILOSOPHY
 *    - Desktop values define INTENT
 *    - Other devices receive DERIVED values
 *
 *    Derived values must:
 *    - preserve hierarchy
 *    - preserve readability
 *    - avoid visual dominance or crowding
 *
 *    Pixel-perfect matching on non-desktop devices is NOT required.
 *
 *
 * 3. AUTO-SCALING PERMISSION (IMPORTANT)
 *    When Figma designs for tablet/mobile are NOT available:
 *
 *    - Developer/Agent MAY derive responsive values using media queries
 *    - BUT ONLY for:
 *      • font-size
 *      • vertical spacing
 *
 *    - Structural changes are NOT allowed
 *
 *
 * 4. SCALING RULE OF THUMB (INDUSTRY PRACTICE)
 *    - Tablet (≤768px):
 *      • Reduce large text by ~25–30%
 *      • Reduce section spacing by ~30–40%
 *
 *    - Mobile (<576px):
 *      • Reduce large text by ~40–50%
 *      • Reduce section spacing by ~50%
 *
 *    These are GUIDELINES, not strict math.
 *
 *
 * 5. CONFIRMATION RULE (SAFETY VALVE)
 *    - If a responsive adjustment affects:
 *      • visual hierarchy
 *      • brand prominence
 *      • key headings (hero / page title)
 *
 *    → Developer MUST confirm before implementation.
 *
 *
 * WHAT (Implementation Rules)
 *
 * - Desktop values live in style.css
 * - Responsive reductions live ONLY in media.css
 *
 * - media.css MAY:
 *   • reduce font-size
 *   • reduce padding / margin
 *   • hide non-critical elements
 *
 * - media.css MUST NOT:
 *   • increase sizes beyond desktop
 *   • redefine layout structure
 *   • change grid logic
 *
 * - Units:
 *   • rem preferred (allows natural scaling)
 *   • px allowed ONLY when matching Figma exactly on desktop
 *
 *
 * DESIGN REVIEW REFERENCES
 * - Desktop review at 1440px
 * - Tablet sanity check at 768px
 * - Mobile sanity check at 402px
 *
 *
 * GOLDEN RULE (DO NOT BREAK)
 * - Desktop defines intent.
 * - Other devices adapt the intent.
 * - media.css refines, never re-designs.
 * - When in doubt, ASK before scaling.
 * ===========================================================================
 */

/* tablet size */
@media (max-width: 1024px) {
    .container-padding-x {
        padding-left: var(--container-padding-x-tablet);
        padding-right: var(--container-padding-x-tablet);
    }

    .container-padding-y {
        padding-top: var(--container-padding-y-tablet);
        padding-bottom: var(--container-padding-y-tablet);
    }
}

/* mobile size */
@media (max-width: 768px) {
    .desktop-show {
        display: none;
    }

    .mobile-show {
        display: block;
    }

    .mobile-hide {
        display: none;
    }

    .container-padding-x {
        padding-left: var(--container-padding-x-mobile);
        padding-right: var(--container-padding-x-mobile);
    }

    .container-padding-y {
        padding-top: var(--container-padding-y-mobile);
        padding-bottom: var(--container-padding-y-mobile);
    }

    .container-padding-bottom {
        padding-bottom: var(--container-padding-y-mobile);
    }

    .container-padding-top {
        padding-top: var(--container-padding-y-mobile);
    }

    .container-padding-y-header {
        padding-top: var(--header-padding-y-mobile);
        padding-bottom: var(--header-padding-y-mobile);
    }

    .container-padding-x-header {
        padding-left: var(--header-padding-x-mobile);
        padding-right: var(--header-padding-x-mobile);
    }

    .container-padding-x-md {
        padding-left: var(--container-padding-x-md-mobile);
        padding-right: var(--container-padding-x-md-mobile);
    }

    .container-padding-y-md {
        padding-top: var(--container-padding-y-tablet);
        padding-bottom: var(--container-padding-x-tablet);
    }

    p {
        line-height: var(--text_line_height_fixed_xs_special);
        margin-bottom: 0px;
        font-size: var(--text_font_size_xs_special);
        font-weight: var(--text_font_weight_normal);
    }

    .mobile-menu-icon-wrap .mobile-menu-icon {
        width: 16px;
        height: 16px;
    }

    .mobile-menu-column-open {
        display: block;
    }

    .header-container {
        flex-direction: column;
        align-items: stretch;
    }

    .header-brand {
        width: 100%;
    }

    .header-nav-wrap {
        justify-content: flex-start;
        width: 100%;
    }

    .header-nav-list {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }

    .header-nav-link {
        font-size: var(--font-size-lg);
    }

    .header-nav-item {
        padding: var(--space-sm) 0px;
    }

    .header-nav-submenu {
        display: none;
        position: static;
        min-width: 0;
        padding: 8px 0 0 16px;
        background: transparent;
    }

    .header-nav-item-has-children.is-open .header-nav-submenu {
        display: block;
    }

    .why-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .why-testimonial-col--left {
        padding-right: 0;
    }

    .why-testimonial-col--right {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--color-gray-100);
        padding-top: var(--space-3xl);
        margin-top: var(--space-3xl);
    }

    .services-strip.d-grid {
        grid-template-columns: 1fr;
        margin-top:32px;
    }

    .services-strip>.d-flex+.d-flex {
        border-left: none;
        border-top: 1px solid var(--color-gray-100);
        padding-top: var(--space-xl);
        margin-top: var(--space-xl);
    }

    .home-stats-section {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .home-stats-row.equal-cols {
        flex-direction: column;
        align-items: center;
    }

    .home-stats-row.equal-cols>* {
        flex: 0 1 auto;
    }

    .footer-inner {
        padding-top: calc(var(--footer-padding-top) * 0.65);
    }

    .footer-main {
        flex-direction: column;
        gap: 32px;
    }

    .footer-main-col-wrap {
        flex-direction: column;
        gap: 32px;
    }

    .footer-option-wrap {
        gap: 8px;
    }

    .footer-first-col-wrap {
        max-width: 100%;
    }

    .footer-newsletter-wrap {
        margin-top: 0px;
    }

    .footer-legal.d-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-legal-wrap {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }

    .footer-bottom.d-flex {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .footer-bottom-text {
        flex-direction: column;
    }

    .properties-worth-wrap.d-grid {
        grid-template-columns: 1fr;
    }

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

    .reviews-cards.d-flex {
        flex-direction: column;
    }

    .reviews-cards.equal-cols>* {
        flex: 0 1 auto;
    }

    .featured-properties-grid.d-grid {
        grid-template-columns: 1fr;
    }

    .follow-journey-row.d-flex {
        flex-direction: column;
    }

    .follow-journey-row.equal-cols>* {
        flex: 0 1 auto;
    }

    .cta-actions.d-flex {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .btn-cta-primary,
    .cta-actions .btn-cta-primary-bordered {
        width: 100%;
    }

    .home-hero-content-wrap {
        padding: 0px 32px;
    }

    .home-banner-button-wrap {
        flex-direction: column;
    }

    .home-hero-title {
        font-size: var(--font-size-2xl);
    }

    .home-hero-subtitle {
        font-size: var(--font-size-md);
    }

    .home-stats-wrap {
        flex-direction: column;
        gap: 32px;
        align-items: center;
    }

    .home-stats-item {
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home-stats-value {
        font-size: var(--font-size-2xl);
    }

    .philosophy-title {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-normal);
    }

    .properties-grid>article {
        max-width: 100%;
    }

    .property-card {
        max-width: 100%;
        margin-bottom: 32px;
    }

    .property-card-image {
        height: 220px;
    }

    .services-intro-heading span:first-child {
        font-weight: var(--font-weight-normal);
    }

    .team-title-heading {
        font-size: var(--font-size-2xl);
    }

    .team-title-content {
        font-size: var(--font-size-base);
    }

    .property-service-title-wrap {
        max-width: 360px;
        font-weight: var(--font-weight-normal);
        font-size: var(--font-size-2xl);
    }

    .property-service {
        flex-direction: column;
        gap: 32px
    }

    .feature-detail {
        flex-direction: column;
    }

    .section-subtitle {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-normal);
        line-height: 20px;
        letter-spacing: 4.2px;
        text-transform: uppercase;
    }

    .page-register {
        flex-direction: column;
    }

    .management-pathway {
        flex-direction: column;
    }

    .letting-service {
        flex-direction: column;
    }

    .property-services-card-image-wrap {
        max-width: 100%;
        width: 100%;
    }

    .property-services-card-image-wrap img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 16px;
    }

    .property-services-philosophy-wrapper {
        flex-direction: column;
        gap: 24px;
    }

    .contact-services strong {
        font-family: var(--font-base);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        line-height: 120%;
        letter-spacing: 0%;
    }

    .page-register-heading,
    .recruitment-enquiry-heading {
        font-family: var(--font-base);
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-normal);
        line-height: 110%;
        letter-spacing: -2.4px;
    }

    .form-box {
        flex-direction: column;
    }

    .home-banner-button-wrap .btn {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .management-pathway-card-subtitle {
        padding-top: 29px;
        padding-bottom: 29px;
    }

    .policy-hero-title-wrap {
        flex-direction: column-reverse;
    }

    .recruitment-enquiry {
        flex-direction: column;
        gap: 24px;
    }

    .feature-detail {
        flex-direction: column-reverse;
        gap: 24px;
    }

    .property-services-wrap {
        flex-direction: column;

    }

    .property-services-btn-wrap {
        flex-direction: column;
    }

    .feature-detail-card-img-wrap {
        flex-direction: column-reverse;
        gap: 24px;
    }

    .property-services-card-content-wrap {
        padding-top: 16px;
    }

    .property-services-instruction-wrap {
        flex-direction: column;
    }

    .property-services-benifit-wrap {
        flex-direction: column-reverse;
        gap: 0px;
    }

    .letting-card-wrap {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .letting-card-content-wrap {
        gap: 16px;
    }

    .letting-card-title {
        font-size: var(--font-size-lg);
    }

    .property-filter-sub-wrap {
        flex-direction: column;
    }

    .property-btn-wrap {
        flex-direction: column;
    }

    .property-banner-wrap {
        width: 100%;
    }

    .property-banner-right-wrap {
        display: none;
    }

    .gallery-wrap {
        padding-left: var(--container-padding-x-mobile);
        padding-right: var(--container-padding-x-mobile);
    }

    .gallery-header {
        padding: 12px 0;
    }

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

    .gallery-main-center {
        left: 44px;
        right: 44px;
    }

    .gallery-thumbs {
        height: 72px;
        padding: 12px 0;
    }

    .gallery-thumb {
        height: 48px;
    }

    .property-detail-media-wrap {
        flex-direction: column;
    }

    .property-detail-media-image {
        height: 220px;
        max-height: 220px;
    }

    .property-detail-media-image img {
        max-height: 220px;
    }

    .property-detail-map iframe {
        height: 280px;
    }

    .property-detail-wrap {
        flex-direction: column;
    }

    .property-detail-enquiry-wrap {
        flex-direction: column;
    }

    .recruitment-enquiry-wrap {
        flex-direction: column;
    }

    .recruitment-wrap {
        align-items: flex-start;
        width: 100%;
    }

    .case-study-heading{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .case-study-wrap {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 24px;
        width: 100%;
    }

    .case-study {
        width: 100%;
        max-width: 100%;
    }

    .case-study-logo,
    .case-study-logo-arrow {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .case-study-content,
    .case-study-list {
        text-align: left;
        width: 100%;
    }

    .case-study-list {
        padding-left: 20px;
        margin: 0;
    }


    #partner-logos .partner-logos-carousel .owl-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .featured-properties-view-all-wrap {
        margin-top: 16px;
    }

    .team-lower-wrap p,
    h2 {
        text-align: center;
    }

    .team-lower-wrap>.profile-wrap {
        flex-direction: column-reverse;
        gap: 8px;
        padding: 0px 0px 16px 0px;
        border-bottom: 2px solid rgba(114, 114, 114, 0.32);
    }

    .team-portait-detial-wrap {
        top: 0;
    }

    .team-portrait-wrap {
        max-height: 267px;
        display: flex;
        min-width: 100%;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        background-color: rgba(97, 97, 99, 0.32);
    }

    .home-team-portrait {
        width: auto;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .team-portait-detial-wrap {
        width: 100%;
    }

    .home-team-name {
        text-align: left !important;
        font-size: 32px;
    }

    .home-team-role {
        text-align: left !important;
        font-size: 24px;
        color: rgba(255, 255, 255, 0.64);
    }

    .home-team-strip {
        background-color: var(--color-gray-900);
        padding: 0px 16px;
    }

    .home-team-thumb-wrap-item {
        width: 64px;
        height: 64px;
    }

    .home-team-thumb-carousel .owl-nav {
        display: none;
    }

    .home-testimonials-btn-learn-more {
        width: 100%;
    }

    .home-testimonial-carousel-wrap {
        max-width: 100%;
    }

    .stories-carousel.theme-carousel-nav-dots,
    .follow-insta-carousel.theme-carousel-nav-dots,
    .property-services-stories-carousel.theme-carousel-nav-dots,
    .home-testimonial-carousel.theme-carousel-nav-dots {
        padding-bottom: 20px;
    }

    .follow-insta-carousel .owl-item,
    .stories-carousel .owl-item,
    .property-services-stories-carousel .owl-item {
        min-width: 0;
    }

    .stories-carousel .stories-card-img-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        max-height: 500px;
    }

    .stories-carousel .stories-card-img {
        display: block;
        max-width: 100%;
        max-height: 500px;
        width: auto;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
        object-position: center;
    }

    .stories-video-card {
        max-width: 320px;
        margin: 0 auto;
        aspect-ratio: 3 / 5.3;
    }

    .stories-video-card-body {
        padding: 72px 14px 14px;
        gap: 14px;
    }

    .stories-video-card-quote,
    .stories-video-card-name {
        font-size: var(--font-size-sm);
    }

    .stories-video-card-category {
        font-size: var(--font-size-xs);
    }

    .services-intro-heading {
        font-size: var(--font-size-2xl);
    }

    .home-cta-content {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .home-cta-btn-wrap {
        width: 100%;
    }

    .home-cta-btn-wrap .btn {
        width: 100%;
    }

    .home-cta-title {
        font-size: var(--font-size-2xl);
    }

    .page-title-icon-wrap .page-title-icon {
        height: 48px;
        width: 48px;
    }

    .property-services-title {
        text-align: left;
    }

    .property-services-content {
        font-size: var(--font-size-base);
    }

    .property-services-philosophy-heading {
        font-size: var(--font-size-2xl);
        line-height: 110%;
        letter-spacing: 0px;
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .property-services-philosophy-card {
        padding: 2rem 20vw;
    }

    .page-features-title {
        font-size: var(--font-size-2xl);
    }

    .instruction-card {
        flex-direction: row;
    }

    .instruction-card-img-wrap {
        flex-direction: column;
    }

    .property-services-process-image-wrap img {
        transform: rotate(90deg);
        width: 40px;
    }

    .property-services-instruction-heading {
        text-align: left;
    }

    .property-services-instruction-content {
        font-weight: var(--font-weight-ultra-light);
    }

    .property-services-benifit-image-wrap img {
        min-width: 100%;
    }

    .property-services-benifit-title {
        text-align: left;
        font-weight: var(--font-weight-normal);
        font-size: var(--font-size-smxl);
    }

    .presenting-property-wrap {
        gap: 32px;
    }

    .presenting-property-wrap-secondary {
        flex-direction: column;
    }

    .letting-services-card-subheading {
        font-size: var(--font-size-base);
        color: rgba(28, 30, 34, 1);
    }

    .letting-card-content {
        font-size: var(--font-size-base);
    }

    .management-pathway-card-content {
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-light);
    }

    .letting-service-card-wrap {
        padding: 8px;
    }

    .letting-services-card-heading {
        font-size: var(--font-size-smxl);
    }

    .property-filter-sub-wrap .first-child {
        width: 100%;
    }

    .property-filter-sub-wrap .second-child {
        width: 100%;
    }

    .properties-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .property-list-contact-us-wrap .icon-wrapper {
        margin: 0;
        display: flex;
    }

    .property-list-contact-us-icon-wrap {
        gap: 8px;
        width: 100%;
    }

    .insider-cta-form-wrap {
        flex-direction: column;
    }

    .page-features-card-subheading {
        text-align: left;
    }

    .page-features-card-heading {
        font-family: var(--font-base);
        font-size: var(--font-size-smxl);
        font-weight: var(--font-weight-normal);
        line-height: 110%;
        letter-spacing: 0%;
    }

    .property-details-wrap {
        flex-direction: column;
    }

    .property-details-wrap-left {
        width: 100%;
    }

    .property-details-wrap .family-home-heading {
        text-align: left;
        font-size: var(--font-size-2xl);
    }

    .property-details-wrap .family-home-subheading {
        text-align: left;
        font-size: var(--font-size-lg);
    }

    .property-details-wrap-right {
        width: 100%;
    }

    .property-details-wrap-right .property-price {
        text-align: left;
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-normal);
    }

    .property-detail-media-image img {
        max-width: 100%;
    }

    .property-details-description {
        text-align: left;
    }

    .details-enquiry-heading {
        text-align: center;
    }

    .case-study-logo-arrow {
        transform: rotate(90deg);
    }
    .feature-detail-card-wrap
    {
        gap:32px;
    }
    .management-pathway-card-wrap 
    {
        min-width:200px;
    }
}

/* small mobile */
@media (max-width: 480px) {}