/* ============================================
   13 HOMES — Main Stylesheet
   ============================================ */

/* --- CSS Variables --- */
:root {
    --primary: #1a1a2e;
    --primary-light: #16213e;
    --accent: #c9a84c;
    --accent-hover: #b8932f;
    --accent-light: #f5ecd7;
    --white: #ffffff;
    --off-white: #f8f7f4;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --text: #2d2d2d;
    --text-light: #6b6b6b;
    --text-muted: #9a9a9a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-md: 0 10px 25px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.12);
    --shadow-xl: 0 25px 60px rgba(0,0,0,0.15);
    --radius: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --container: 1200px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.7;
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

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

ul {
    list-style: none;
}

/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s, visibility 0.5s;
}

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader {
    text-align: center;
    animation: pulse 1.5s ease-in-out infinite;
}

.loader-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    color: var(--accent);
}

.loader-text {
    display: block;
    font-family: var(--font-body);
    font-size: 1.2rem;
    letter-spacing: 0.5em;
    color: var(--white);
    margin-top: -5px;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* --- Container --- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Header --- */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition);
}

#header.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    padding: 12px 0;
    box-shadow: var(--shadow);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Logo --- */
.logo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.logo-img {
    height: 62px;
    width: auto;
    transition: var(--transition);
}

.logo-dark {
    display: none;
}

.logo-white {
    display: block;
}

#header.scrolled .logo-dark {
    display: block;
}

#header.scrolled .logo-white {
    display: none;
}

.footer-logo .logo-img {
    height: 52px;
}

/* Legacy text logo fallback */
.logo-number {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.logo-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--white);
    transition: var(--transition);
}

#header.scrolled .logo-text {
    color: var(--primary);
}

/* --- Nav Links --- */
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    position: relative;
    padding: 4px 0;
    transition: var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

#header.scrolled .nav-link {
    color: var(--text);
}

#header.scrolled .nav-link:hover,
#header.scrolled .nav-link.active {
    color: var(--accent);
}

.nav-cta {
    display: none;
}

/* --- Hamburger --- */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--white);
    transition: var(--transition);
}

#header.scrolled .hamburger span {
    background: var(--primary);
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: var(--primary);
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(201, 168, 76, 0.35);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.4);
}

.btn-outline:hover {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
    transform: translateY(-2px);
}

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

.btn-white:hover {
    background: var(--off-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.btn-outline-white {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.5);
}

.btn-outline-white:hover {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.btn-full {
    width: 100%;
}

/* --- Section Styles --- */
.section {
    padding: 100px 0;
}

.section-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 20px;
}

.section-description {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    line-height: 1.8;
}

.text-center {
    text-align: center;
}

.text-center .section-description {
    margin: 0 auto;
}

.section-header {
    margin-bottom: 60px;
}

/* --- Image Placeholders --- */
.img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: var(--radius-lg);
    position: relative;
}

.img-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--gray-400);
}

.img-placeholder::after {
    content: attr(data-label);
    font-size: 0.85rem;
    color: var(--gray-400);
    font-weight: 500;
}

.img-placeholder.dark {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.img-placeholder.dark svg {
    color: var(--accent);
}

.img-placeholder.dark::after {
    color: rgba(255,255,255,0.5);
}

/* --- Hero --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(201, 168, 76, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(15, 52, 96, 0.4) 0%, transparent 50%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 120px 0 80px;
}

.hero-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 24px;
}

.highlight {
    color: var(--accent);
}

.hero-description {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 550px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 60px;
}

.hero-stats {
    display: flex;
    gap: 48px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.stat-suffix {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

.hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.hero-scroll a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.scroll-text {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

.scroll-line {
    display: block;
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.5); opacity: 0.5; }
}

/* --- About --- */
.about {
    background: var(--off-white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-images {
    position: relative;
}

.about-img-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about-img-secondary {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 55%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 5px solid var(--off-white);
}

.about-img-secondary .img-placeholder {
    min-height: 200px;
}

.about-experience-badge {
    position: absolute;
    top: -20px;
    right: 20px;
    background: var(--accent);
    color: var(--primary);
    padding: 20px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.badge-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.badge-text {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.about-lead {
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 500;
    margin-bottom: 16px;
}

.about-content p {
    color: var(--text-light);
    margin-bottom: 16px;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 32px;
}

.about-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.feature-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--accent-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
}

.about-feature h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.about-feature p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0 !important;
}

/* --- Services --- */
.services {
    background: var(--white);
}

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

.service-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card.featured {
    background: var(--primary);
    border-color: var(--primary);
}

.service-card.featured h3 {
    color: var(--white);
}

.service-card.featured p {
    color: rgba(255,255,255,0.7);
}

.service-card.featured .service-icon {
    background: rgba(201, 168, 76, 0.15);
}

.service-card.featured .service-icon svg {
    color: var(--accent);
}

.service-card.featured .service-link {
    color: var(--accent);
}

.service-card.featured::before {
    background: var(--accent);
    transform: scaleX(1);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.service-icon svg {
    width: 28px;
    height: 28px;
    color: var(--accent);
}

.service-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
}

.service-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}

.service-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.service-link span {
    transition: var(--transition);
}

.service-link:hover span {
    transform: translateX(4px);
}

/* --- Designs --- */
.designs {
    background: var(--off-white);
}

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

.design-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.design-image {
    position: relative;
    overflow: hidden;
}

.design-image .img-placeholder {
    min-height: 260px;
    border-radius: 0;
}

.design-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 16px;
    background: var(--accent);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 100px;
}

.design-badge.accent {
    background: var(--primary);
    color: var(--white);
}

.design-badge.gold {
    background: linear-gradient(135deg, #c9a84c, #e8d48b);
    color: var(--primary);
}

.design-content {
    padding: 32px;
}

.design-content h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
}

.design-content p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}

.design-features {
    margin-bottom: 24px;
}

.design-features li {
    font-size: 0.85rem;
    color: var(--text);
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
}

.design-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

/* --- Process --- */
.process {
    background: var(--white);
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 35px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--gray-200);
}

.process-step {
    text-align: center;
    position: relative;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.step-content h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.step-content p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.7;
}

/* --- Service Areas --- */
.areas {
    background: var(--primary);
}

.areas .section-tag {
    color: var(--accent);
}

.areas .section-title {
    color: var(--white);
}

.areas .section-description {
    color: rgba(255,255,255,0.6);
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.area-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: var(--transition);
}

.area-card:hover {
    background: rgba(201, 168, 76, 0.1);
    border-color: var(--accent);
    transform: translateY(-4px);
}

.area-icon {
    margin-bottom: 12px;
}

.area-icon svg {
    width: 32px;
    height: 32px;
    color: var(--accent);
    margin: 0 auto;
}

.area-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
}

/* --- Testimonials --- */
.testimonials {
    background: var(--off-white);
}

.testimonials-slider {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.testimonial-card {
    display: none;
    text-align: center;
    padding: 40px;
    animation: fadeIn 0.5s ease;
}

.testimonial-card.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.testimonial-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 24px;
}

.testimonial-stars svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
}

.testimonial-card blockquote {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 32px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.testimonial-author strong {
    display: block;
    font-size: 1rem;
    color: var(--primary);
}

.testimonial-author span {
    font-size: 0.85rem;
    color: var(--text-light);
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gray-300);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background: var(--accent);
    transform: scale(1.2);
}

/* --- Blog --- */
.blog-section {
    background: var(--white);
}

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

.blog-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.blog-image .img-placeholder {
    min-height: 200px;
    border-radius: 0;
}

.blog-content {
    padding: 28px;
}

.blog-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.blog-content h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.blog-content p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 16px;
}

.blog-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-link span {
    transition: var(--transition);
}

.blog-link:hover span {
    transform: translateX(4px);
}

/* --- CTA Section --- */
.cta-section {
    background: linear-gradient(135deg, var(--accent), #e8d48b);
    padding: 80px 0;
}

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

.cta-content h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

.cta-content p {
    font-size: 1.1rem;
    color: var(--primary-light);
    opacity: 0.8;
    margin-bottom: 32px;
}

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

/* --- Contact --- */
.contact {
    background: var(--off-white);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.contact-info .section-title {
    margin-bottom: 16px;
}

.contact-info > p {
    color: var(--text-light);
    margin-bottom: 40px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.contact-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--accent-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
}

.contact-item strong {
    display: block;
    font-size: 0.95rem;
    color: var(--primary);
    margin-bottom: 4px;
}

.contact-item p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
}

.contact-item a {
    color: var(--text-light);
}

.contact-item a:hover {
    color: var(--accent);
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-links a svg {
    width: 20px;
    height: 20px;
    color: var(--white);
}

.social-links a:hover {
    background: var(--accent);
    transform: translateY(-3px);
}

.social-links a:hover svg {
    color: var(--primary);
}

/* --- Contact Form --- */
.contact-form-wrapper {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 48px;
    box-shadow: var(--shadow-lg);
}

.contact-form h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 32px;
}

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

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    transition: var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
    background: var(--white);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 12px;
}

/* --- Footer --- */
.footer {
    background: var(--gray-900);
    padding: 80px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand .logo {
    margin-bottom: 16px;
}

.footer-brand p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
}

.footer-links h4,
.footer-contact h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 20px;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-contact p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
    line-height: 1.6;
}

.footer-contact a {
    color: rgba(255,255,255,0.5);
}

.footer-contact a:hover {
    color: var(--accent);
}

.footer-bottom {
    padding: 24px 0;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
}

.footer-bottom a {
    color: rgba(255,255,255,0.35);
}

.footer-bottom a:hover {
    color: var(--accent);
}

/* --- Back to Top --- */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--accent);
    color: var(--primary);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition);
    z-index: 999;
    box-shadow: var(--shadow-md);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent-hover);
    transform: translateY(-3px);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* --- Page Hero (Inner Pages) --- */
.page-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 160px 0 80px;
}

.page-hero .section-title {
    color: var(--white);
}

.page-hero .section-description {
    color: rgba(255, 255, 255, 0.65);
}

/* --- Scroll Reveal --- */
/* Disabled: motion.js now handles all scroll-triggered animations */
/* .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
} */


/* ===========================================================
   13 Homes - WordPress port fixes (appended after deploy)
   =========================================================== */

/* Stat value wrapper - keep number + suffix on the same line
   inside the flex-column .stat parent */
.stat .stat-value {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

/* Defensive override: force button-primary text color to win any
   wp-block-library / theme cascade. The static site never needed
   this; added only for the WordPress port. */
.btn.btn-primary,
.btn.btn-primary:link,
.btn.btn-primary:visited,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    color: var(--primary) !important;
    text-decoration: none;
}

/* Defensive: ensure all .btn elements render content inline-flex,
   centered, so text never wraps below the background. */
.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

/* Defensive override: button submit elements in forms can pick up
   browser defaults (white background, system font). Re-assert the
   .btn-primary styling for native button elements. */
button.btn.btn-primary {
    background: var(--accent) !important;
    color: var(--primary) !important;
    border: 2px solid var(--accent) !important;
    font-family: var(--font-body) !important;
}

/* ===========================================================
   Bulletproof magnetic-button fix (v1.0.3)
   The magnetic-button JS in animations.js had a bug where the
   inner span would get stuck translated 38px down, pushing the
   text out of the button. Even with the JS fix, browser-cached
   versions of animations.js might still misbehave -- so this
   CSS rule with !important overrides any inline transform the
   JS might set on the inner span. The OUTER button can still
   magnetize subtly; only the inner text stays anchored.
   =========================================================== */
.magnetic-inner {
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
}

/* Also pin the OUTER button. Without this, the JS in animations.js
   leaves the button translated away from its inner text, which
   leaves the gold rectangle drifting visibly from its label.
   The magnetic effect is fully disabled until the JS bug is fixed. */
[data-magnetic] {
    transform: none !important;
}


/* ===========================================================
   v1.1.3 — WP nav menu compat
   wp_nav_menu()'s link_class param does not actually add the
   class to <a> tags, so WP-assigned menus lose .nav-link.
   These rules apply the same color logic to any <a> inside
   .nav-links, regardless of class.
   =========================================================== */

.nav-links a:not(.btn) {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    position: relative;
    padding: 4px 0;
    transition: var(--transition);
}

.nav-links a:not(.btn):hover {
    color: var(--accent);
}

#header.scrolled .nav-links a:not(.btn) {
    color: var(--text);
}

#header.scrolled .nav-links a:not(.btn):hover {
    color: var(--accent);
}

/* Active/current menu item — WP adds .current-menu-item to the <li> */
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a {
    color: var(--accent) !important;
}


/* ===========================================================
   v1.2.1 — Global FAQ accordion styles
   Used on: contact, KDR, building-process, inclusions,
   home-designs, tips-inspiration, and the 29 suburb pages.
   Originally lived inline in contact.php; moved here so every
   page that renders FAQ markup gets the styled accordion.
   =========================================================== */

.faq-section { background: var(--off-white); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
    background: var(--white);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
}
.faq-item:hover { box-shadow: var(--shadow); }
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    gap: 16px;
    transition: var(--transition);
}
.faq-question:hover { color: var(--accent); }
.faq-question svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--accent);
    transition: transform 0.3s ease;
}
.faq-item.active .faq-question svg { transform: rotate(180deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.active .faq-answer { max-height: 600px; }
.faq-answer-inner {
    padding: 0 24px 20px;
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .faq-question { font-size: 0.95rem; padding: 16px 20px; }
    .faq-answer-inner { padding: 0 20px 16px; font-size: 0.9rem; }
}

/* ===========================================================
   v1.2.1 — Service Area cards as <a> elements (homepage)
   The cards were converted from <div> to <a> so they link
   to the auto-generated suburb landing pages. Strip default
   anchor styling so they look identical to the old divs.
   =========================================================== */
a.area-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
a.area-card:hover {
    text-decoration: none;
}


/* ===========================================================
   v1.2.2 — Footer text fixes
   The existing footer rules in style.css target .footer-brand,
   .footer-links, .footer-contact etc. — but the actual footer.php
   uses .footer-col for every column. None of those rules apply,
   so text inherits browser default colour (dark on dark = invisible).
   These generic rules target ANY content inside .footer.
   =========================================================== */

.footer {
    color: rgba(255, 255, 255, 0.65);
}
.footer .footer-col p,
.footer .footer-col ul,
.footer .footer-col li {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.7;
}
.footer .footer-col h4 {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 18px;
}
.footer .footer-col a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer .footer-col a:hover {
    color: var(--accent);
}
.footer .footer-col strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}
.footer .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer .footer-col ul li {
    margin-bottom: 8px;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 40px;
    padding-top: 24px;
}
.footer-bottom p,
.footer-bottom a {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}
.footer-bottom a:hover {
    color: var(--accent);
}

/* ===========================================================
   v1.2.2 — Inclusions "MOST POPULAR" badge clipping fix
   The .inc-pkg-flag has top: -12px to pop out above the card.
   The parent card and grid must not clip it. Add z-index too
   so it sits above any sibling that might cover it.
   =========================================================== */

.inc-pkg-cards,
.inc-pkg-card {
    overflow: visible !important;
}
.inc-pkg-flag {
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}