/* ============================================
   FINDING HOME - ULTRA LUXURY DESIGN SYSTEM
   Global Styles & Design Tokens
   ============================================ */

/* ========== CSS VARIABLES / DESIGN TOKENS ========== */
:root {
  /* Color Palette */
  --gold: #D4AF37;
  --gold-2: #C89B2E;
  --gold-light: rgba(212, 175, 55, 0.1);
  --gold-glow: rgba(212, 175, 55, 0.3);
  --black: #000000;
  --white: #FFFFFF;
  --ivory: #FBF9F6;
  --grey-dark: #1A1A1A;
  --grey-medium: #3A3A3A;
  --grey-light: #E5E5E5;
  
  /* Typography - Font Families */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Typography - Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  --text-8xl: 6rem;        /* 96px */
  
  /* Spacing */
  --space-1: 0.25rem;      /* 4px */
  --space-2: 0.5rem;       /* 8px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.5rem;       /* 24px */
  --space-6: 2rem;         /* 32px */
  --space-8: 3rem;         /* 48px */
  --space-10: 4rem;        /* 64px */
  --space-12: 6rem;        /* 96px */
  --space-16: 8rem;        /* 128px */
  
  /* Motion Tokens - Durations */
  --duration-fast: 0.18s;
  --duration-medium: 0.45s;
  --duration-slow: 0.9s;
  
  /* Motion Tokens - Easing */
  --ease-standard: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-gold: 0 0 20px var(--gold-glow);
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  
  /* Layout */
  --container-max: 1440px;
  --container-padding: 2rem;
}

/* ========== RESET & BASE STYLES ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--grey-dark);
  background-color: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--text-6xl);
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--text-5xl);
}

h3 {
  font-size: var(--text-4xl);
}

h4 {
  font-size: var(--text-3xl);
}

h5 {
  font-size: var(--text-2xl);
}

h6 {
  font-size: var(--text-xl);
}

p {
  margin-bottom: var(--space-4);
  color: var(--grey-medium);
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--gold-2);
}

/* ========== UTILITY CLASSES ========== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

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

.text-gold {
  color: var(--gold);
}

.bg-black {
  background-color: var(--black);
}

.bg-white {
  background-color: var(--white);
}

.bg-ivory {
  background-color: var(--ivory);
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes goldGlow {
  0%, 100% {
    box-shadow: 0 0 10px var(--gold-glow);
  }
  50% {
    box-shadow: 0 0 25px var(--gold-glow);
  }
}

@keyframes parallaxFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}

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

/* Stagger children animations */
.stagger-children > * {
  animation: fadeIn var(--duration-medium) var(--ease-standard) backwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== RESPONSIVE TYPOGRAPHY ========== */
@media (max-width: 1024px) {
  :root {
    --text-6xl: 3rem;      /* 48px */
    --text-5xl: 2.5rem;    /* 40px */
    --text-4xl: 2rem;      /* 32px */
  }
}

@media (max-width: 768px) {
  :root {
    --text-6xl: 2.5rem;    /* 40px */
    --text-5xl: 2rem;      /* 32px */
    --text-4xl: 1.75rem;   /* 28px */
    --container-padding: 1.5rem;
  }
  
  h1 {
    letter-spacing: -0.02em;
  }
}

@media (max-width: 480px) {
  :root {
    --text-6xl: 2rem;      /* 32px */
    --text-5xl: 1.75rem;   /* 28px */
    --text-4xl: 1.5rem;    /* 24px */
    --container-padding: 1rem;
  }
}

/* ========== ACCESSIBILITY ========== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus styles */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Enhanced focus for buttons and interactive elements */
.btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

/* High contrast adjustments */
@media (prefers-contrast: high) {
  :root {
    --grey-medium: #2A2A2A;
  }
  
  .btn-primary,
  .btn-premium {
    border: 2px solid var(--black);
  }
}


/* ---------- CTA button alignment (paste into css/global.css) ---------- */
.cta-content { text-align:center; padding:48px 16px; }
.cta-actions { display:flex; justify-content:center; gap:20px; margin-top:18px; flex-wrap:wrap; }
.cta-actions .btn { min-width:220px; display:inline-flex; justify-content:center; align-items:center; }

/* For dark CTA section */
.cta-section.bg-black .btn { border-radius:8px; padding:16px 28px; }

/* mobile */
@media (max-width: 768px) {
  .cta-actions { flex-direction:column; gap:12px; align-items:center; }
  .cta-actions .btn { width:100%; max-width:420px; }
}


/* ---------- Collapsible FAQ styles (paste into css/about.css) ---------- */
.faq-section { padding:48px 16px; background: #fffaf6; }
.section-title { font-family: "Playfair Display", serif; font-size:36px; margin-bottom:18px; }

.faq-list { display:block; max-width:1100px; margin:0 auto; gap:12px; }

.faq-item { border-bottom:1px solid #eee; padding:12px 0; }
.faq-question {
  width:100%;
  background:transparent;
  border:0;
  text-align:left;
  font-weight:600;
  padding:12px 6px;
  font-size:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}
.faq-toggle-icon { font-size:20px; transform:rotate(0deg); transition:transform .2s ease; color:#222; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .28s ease, padding .2s ease; padding:0 6px; }
.faq-answer p { margin:10px 0 18px; color:#333; line-height:1.6; }

/* when open — JS toggles .open class on the button */
.faq-question.open .faq-toggle-icon { transform:rotate(45deg); }

/* For accessibility focus state */
.faq-question:focus { outline: 2px dashed #d3aa2b; outline-offset:6px; }

/* mobile */
@media (max-width: 768px) {
  .section-title { font-size:28px; }
  .faq-question { font-size:16px; }
  .faq-answer p { font-size:15px; }
}


/* ===== HERO MOBILE FIX ===== */

.hero{
    min-height:100vh;
    padding-top:90px; /* space for fixed header */
    display:flex;
    align-items:center;
}

@media (max-width:768px){

.hero{
    min-height:100vh;
    padding-top:110px; /* slightly larger for mobile menu */
}

.hero-title{
    font-size:32px;
    line-height:1.3;
}

.hero-actions{
    margin-top:20px;
}

}


/* HEADER LOGO */

.logo{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
font-weight:700;
font-size:18px;
}

.header-logo{
height:38px;
width:auto;
}

@media (max-width:768px){

.header-logo{
height:32px;
}

.logo span{
font-size:16px;
}

}


.faq-section{
padding:60px 0;
background:#fff;
}

.faq-title{
text-align:center;
margin-bottom:40px;
font-size:32px;
font-weight:700;
}

.faq-item{
border-bottom:1px solid #e5e5e5;
margin-bottom:10px;
}

.faq-question{
width:100%;
background:none;
border:none;
text-align:left;
font-size:18px;
font-weight:600;
padding:18px;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
}

.faq-icon{
font-size:22px;
transition:0.3s;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.4s ease;
padding:0 18px;
}

.faq-answer p{
padding-bottom:15px;
line-height:1.6;
color:#555;
}

.faq-item.active .faq-answer{
max-height:200px;
}

.faq-item.active .faq-icon{
transform:rotate(45deg);
}


.seo-content{
padding:60px 0;
background:#ffffff;
}

.seo-content h2{
font-size:28px;
margin-top:30px;
margin-bottom:15px;
}

.seo-content p{
font-size:16px;
line-height:1.8;
margin-bottom:15px;
color:#444;
}

img{
max-width:100%;
height:auto;
}

html, body {
    overflow-x: hidden;
}


.breadcrumb-section{
padding:18px 0;
background:#fff;
border-bottom:1px solid #eee;
}

.breadcrumb{
font-size:14px;
flex-wrap:wrap;
line-height:1.6;
}