/* CSS Variables */
:root {
    --primary: #0a1628; /* Deep Navy */
    --secondary: #ff6b35; /* Vivid Orange */
    --accent: #f7931e; /* Warm Amber */
    --light: #ffe8d1; /* Pale Apricot */
    --bg-cream: #faf8f5; /* Main background */
    --white: #ffffff;
    --black: #000000;

    --text-dark: #1a1a1a; /* For primary text */
    --text-light: #555f6e; /* Slightly adjusted for better contrast, was #6b7280 */

    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Purple-Blue */
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); /* Pink-Coral */
    --gradient-3: linear-gradient(135deg, #fa709a 0%, #fee140 100%); /* Rose-Gold */

    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08); /* Slightly softer */
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.1); /* Slightly deeper */
    --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.15); /* More pronounced on hover */

    --radius: 12px;
    --radius-small: 8px; /* Slightly larger small radius */
    --radius-large: 24px; /* Slightly larger large radius */

    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */

    --max-width: 1320px; /* Max container width */

    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Added fallbacks */
}

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

html {
    font-size: 100%; /* 16px base */
    scroll-behavior: smooth;
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

body {
    font-family: var(--font-primary);
    line-height: 1.7; /* Increased for better readability */
    background: var(--bg-cream);
    color: var(--text-dark);
    overflow-x: hidden; /* Reinforce no horizontal scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga" 1, "calt" 1; /* Enable ligatures and contextual alternates */
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Ensures images cover their containers well */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3; /* Adjusted for better heading spacing */
    letter-spacing: -0.02em; /* Subtle tightening */
    color: var(--primary); /* Default heading color */
}

h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* Slightly larger base and max */
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 35%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback for browsers not supporting background-clip */
    margin-bottom: 1rem; /* Added default margin */
}

h2 {
    font-size: clamp(2rem, 5vw, 3rem); /* Slightly larger max */
    margin-bottom: 3rem; /* Increased bottom margin */
    position: relative;
    text-align: center;
}

h2::after {
    content: '';
    position: absolute;
    bottom: -12px; /* Adjusted position */
    left: 50%;
    transform: translateX(-50%);
    width: 70px; /* Slightly wider */
    height: 4px;
    background: var(--secondary);
    border-radius: 2px;
    transition: var(--transition);
}

h2:hover::after {
    width: 90px; /* Wider on hover */
}

/* Helper for left-aligned headings */
h2.left-heading {
    text-align: left;
}

h2.left-heading::after {
    left: 0;
    transform: none;
}

h3 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem); /* Slightly larger */
    margin-bottom: 1.5rem;
}

h4 {
    font-size: clamp(1.25rem, 2.8vw, 1.6rem); /* Slightly larger */
    font-weight: 600;
    margin-bottom: 1rem;
}

p {
    max-width: 65ch; /* Slightly reduced for optimal readability */
    margin-bottom: 1.5rem; /* Increased paragraph spacing */
    color: var(--text-light);
    font-size: clamp(0.95rem, 1.8vw, 1.05rem); /* Responsive font size for paragraphs */
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}

a:hover,
a:focus-visible { /* Added focus-visible for accessibility */
    color: var(--accent);
    opacity: 0.85;
    outline: 2px solid var(--accent); /* Clearer focus outline */
    outline-offset: 2px;
}
a:focus:not(:focus-visible) { /* Remove outline for mouse users if not focus-visible */
    outline: none;
}


/* Layout helpers */
.container {
    width: 90%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Consistent padding */
    padding-right: 1rem;
}

section {
    padding: clamp(4rem, 10vw, 6rem) 0; /* Increased padding for sections */
    position: relative;
    overflow: hidden; /* Keep to prevent unexpected overflows */
}

/* Header & Navigation */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0; /* Increased default padding */
    background: transparent;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

header.scrolled {
    background: rgba(250, 248, 245, 0.95); /* Slightly more opaque */
    backdrop-filter: blur(10px); /* Standard blur */
    -webkit-backdrop-filter: blur(10px); /* Safari */
    box-shadow: var(--shadow-medium);
    padding: 0.75rem 0; /* Slightly increased scrolled padding */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 70px; /* Increased min-height for a larger navbar */
    position: relative;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Increased gap */
    transition: transform 0.25s ease;
    padding: 0.25rem; /* Add some padding for easier clicking */
}

.logo-link:hover {
    transform: scale(1.03); /* Subtle hover scale */
}
.logo-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-small);
}


.logo-image {
    height: clamp(40px, 6vw, 55px); /* Increased logo size */
    width: auto; /* Maintain aspect ratio */
}

.logo-text {
    font-size: clamp(1.4rem, 2.8vw, 1.8rem); /* Increased logo text size */
    font-weight: 700;
    color: var(--primary);
    transition: color 0.25s ease;
    line-height: 1; /* Ensure text aligns well with image */
}

.logo-link:hover .logo-text {
    color: var(--secondary);
}

.nav-links {
    display: flex;
    gap: clamp(1.5rem, 3vw, 2.5rem); /* Increased gap between nav links */
    align-items: center;
}

.nav-links a {
    position: relative;
    font-size: 1rem; /* Slightly larger base font size */
    color: var(--text-dark);
    padding: 0.8rem 0.4rem; /* Increased padding */
    letter-spacing: 0.03em; /* Slightly more spacing */
    font-weight: 500;
    transition: var(--transition);
}

.nav-links a::before {
    content: '';
    position: absolute;
    bottom: 0; /* Underline closer to text */
    left: 50%;
    transform: translateX(-50%);
    height: 3px; /* Slightly thicker underline */
    width: 0;
    background: var(--secondary);
    border-radius: 2px;
    transition: width 0.3s ease-in-out;
}

.nav-links a:hover,
.nav-links a:focus, /* Added focus state */
.nav-links a.active { /* Ensure active class also gets underline */
    color: var(--secondary);
    transform: translateY(-2px);
}

.nav-links a:hover::before,
.nav-links a:focus::before,
.nav-links a.active::before {
    width: 90%; /* Wider underline on hover/focus/active */
}


/* Mobile menu button */
.mobile-menu {
    display: none; /* Hidden by default, shown in media query */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem; /* Increased padding for easier tap */
    z-index: 1001; /* Ensure it's above other nav elements */
    position: relative; /* For potential pseudo-elements if needed */
}

.mobile-menu span {
    display: block;
    width: 30px; /* Slightly wider bars */
    height: 3px;
    background: var(--primary);
    margin: 6px 0; /* Increased margin for better separation */
    border-radius: 3px;
    transition: var(--transition);
}

/* Active state for mobile menu icon (hamburger to X) */
.mobile-menu.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.mobile-menu.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.mobile-menu.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Mobile navigation drawer */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen */
    width: min(80vw, 320px); /* Responsive width */
    height: 100%;
    background: var(--white);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15); /* Softer shadow */
    padding: 6rem 1.5rem 2rem; /* More top padding to avoid overlap with header */
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Increased gap */
    overflow-y: auto; /* Scroll if content overflows */
    transition: right 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); /* Smoother transition */
    z-index: 1000; /* Below mobile-menu button but above content */
}

.mobile-nav.active {
    right: 0; /* Slide in */
}

.mobile-nav a {
    font-size: 1.2rem; /* Larger font size for mobile links */
    font-weight: 500;
    padding: 1rem 1.25rem; /* Generous padding for tap targets */
    color: var(--text-dark);
    border-radius: var(--radius-small);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    display: block; /* Make links take full width for easier tapping */
}

.mobile-nav a:hover,
.mobile-nav a:focus {
    background: var(--light);
    color: var(--secondary);
    transform: translateX(5px); /* Subtle shift on hover/focus */
}

/* Responsive adjustments */
@media (max-width: 991px) { /* Tablet and below */
    .nav-links {
        display: none; /* Hide desktop nav links */
    }

    .mobile-menu {
        display: block; /* Show mobile menu button */
    }
}

@media (max-width: 767px) { /* Mobile */
    header {
        padding: 0.75rem 0; /* Adjust padding for mobile header */
    }
    header.scrolled {
        padding: 0.5rem 0;
    }

    h2::after {
        bottom: -10px;
        width: 60px;
    }
    h2:hover::after {
        width: 80px;
    }
    section {
        padding: clamp(3rem, 8vw, 5rem) 0;
    }
}

@media (max-width: 480px) { /* Small Mobile */
    .container {
        width: 95%; /* Slightly more width on small screens */
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    h1 {
        font-size: clamp(2rem, 8vw, 2.8rem); /* Adjust h1 for small screens */
    }
    h2 {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
    }
    h3 {
        font-size: clamp(1.4rem, 6vw, 1.8rem);
    }

    p {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        line-height: 1.65;
    }
    .logo-image {
        height: clamp(35px, 8vw, 45px);
    }
    .logo-text {
        font-size: clamp(1.2rem, 5vw, 1.5rem);
    }
}

/* Loader */
.loader {
    position: fixed;
    inset: 0;
    background: var(--bg-cream);
    z-index: 9999; /* Highest z-index */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* Smooth fade out */
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-house { /* Style for the house SVG if needed */
    width: 80px;
    animation: pulseHouse 1.5s ease-in-out infinite;
}

@keyframes pulseHouse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Custom Cursor (Desktop Only) - ensure these are not displayed on mobile */
.cursor, .cursor-follower {
    display: none; /* Hidden by default */
}

@media (hover: hover) and (pointer: fine) { /* Only show for devices that support hover and have a fine pointer */
    .cursor, .cursor-follower {
        display: block;
        position: fixed;
        border-radius: 50%;
        pointer-events: none; /* So they don't interfere with clicks */
        z-index: 9998; /* Below loader, above everything else */
        transform: translate(-50%, -50%);
        transition: transform 0.1s ease-out, opacity 0.2s ease-out; /* Smooth transitions */
    }
    .cursor {
        width: 10px;
        height: 10px;
        background-color: var(--secondary);
        /* transition: width 0.2s ease, height 0.2s ease, transform 0.1s ease-out; */
    }
    .cursor-follower {
        width: 30px;
        height: 30px;
        background-color: rgba(255, 107, 53, 0.3); /* Semi-transparent secondary color */
        /* transition: width 0.2s ease, height 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    }
}


/* Buttons */
.btn,
button { /* Unified button styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.8rem; /* Slightly larger padding */
    border: 2px solid transparent; /* For consistent sizing with outline buttons */
    border-radius: var(--radius-small);
    background: var(--secondary);
    color: var(--white);
    font-size: 1rem; /* Base font size for buttons */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    line-height: 1.2; /* Ensure text is centered vertically */
}

.btn:hover,
button:hover {
    background: var(--accent);
    transform: translateY(-3px); /* More pronounced hover effect */
    box-shadow: var(--shadow-hover);
}
.btn:focus-visible, button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    background-color: var(--accent); /* Indicate focus */
}


.btn.outline {
    background: transparent;
    border-color: var(--secondary);
    color: var(--secondary);
    box-shadow: none;
}

.btn.outline:hover {
    background: var(--secondary);
    color: var(--white);
    box-shadow: var(--shadow-soft);
}

/* Utility classes */
.text-center {
    text-align: center;
}
.text-center h2::after { /* Ensure centered heading underline also centers */
    left: 50%;
    transform: translateX(-50%);
}

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

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* Footer */
footer {
    background: var(--primary);
    color: rgba(255, 255, 255, 0.85); /* Lighter text for better contrast on dark bg */
    padding: clamp(3rem, 8vw, 4.5rem) 0; /* Responsive padding */
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Spacing between footer elements */
}

.footer-logo {
    font-size: 1.8rem; /* Larger footer logo */
    font-weight: 700;
    color: var(--white);
}

.footer-tagline {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 45ch;
}

.footer-links {
    display: flex;
    flex-wrap: wrap; /* Allow links to wrap on smaller screens */
    justify-content: center;
    gap: 1rem 1.5rem; /* Spacing between links */
}

.footer-links a {
    color: var(--secondary);
    font-size: 0.95rem;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--accent);
    text-decoration: underline;
}

.footer-copyright {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
}
.footer-accessibility a {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: underline;
}
.footer-accessibility a:hover {
    color: var(--accent);
}


/* Animation for elements fading up on scroll */
.animate-fade-up {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.animate-fade-up.visible { /* This class will be added by JS when element is in view */
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility: Skip to content link */
.skip-link {
    position: absolute;
    top: -100px; /* Hide off-screen */
    left: 0;
    background: var(--primary);
    color: var(--white);
    padding: 10px 15px;
    z-index: 9999;
    transition: top 0.3s ease;
    border-radius: 0 0 var(--radius-small) 0;
}

.skip-link:focus {
    top: 0; /* Bring into view on focus */
}