/* Base Styles & Custom Theme */
:root {
    --brand-charcoal: #2d3748; /* Charcoal Gray */
    --brand-cream: #f7fafc;    /* Ivory/Cream */
    --brand-gold: #c09a3e;     /* Burnished Gold */
    --text-primary: #333333;
    --text-secondary: #555555;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--brand-cream);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    font-family: 'Lora', serif;
    font-weight: 600;
}

.header-brand-title {
    font-family: 'Lora', serif;
    color: var(--brand-gold);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    text-decoration: none;
}

.hero-section {
    background-color: var(--brand-charcoal);
    color: var(--brand-cream);
}

.compass-q-logo, .philosophy-letter-logo {
    font-family: 'Lora', serif;
    font-size: 1.5rem; /* Equivalent to Tailwind's text-2xl (24px) */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--brand-gold);
    padding: 0.625rem; /* (2.75rem box - 1.5rem font) / 2 = 0.625rem */
    width: 2.75rem;    /* Adjusted to fit 1.5rem font + padding */
    height: 2.75rem;   /* Adjusted to fit 1.5rem font + padding */
    border-radius: 0.25rem;
    color: var(--brand-gold);
    line-height: 1;
}

.section-title {
    font-size: 2.5rem; /* 40px */
    margin-bottom: 1rem;
}

.section-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem; /* 20px */
    color: var(--text-secondary);
    /* max-width: 3xl; */ /* This is a Tailwind class, apply it in HTML if needed */
    /* margin: 0 auto 3rem auto; */ /* These are Tailwind classes, apply in HTML or convert to CSS */
}

.philosophy-item h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--brand-gold);
}

.portfolio-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0.5rem;
    overflow: hidden;
}

.portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn {
    display: inline-block;
    padding: 0.5rem 1rem; /* Standardized padding */
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-align: center;
}

.btn-gold {
    background-color: var(--brand-gold);
    color: white;
}

.btn-gold:hover {
    background-color: #a58436; /* Darker Gold */
}

.btn-outline-gold {
    background-color: transparent;
    color: var(--brand-gold);
    border: 1px solid var(--brand-gold);
}

.btn-outline-gold:hover {
    background-color: var(--brand-gold);
    color: white;
}

.footer {
    background-color: var(--brand-charcoal);
    color: var(--brand-cream);
}

html {
    scroll-behavior: smooth;
}

#mobile-menu {
    transition: max-height 0.3s ease-out;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 90%;
    max-width: 400px; /* Max width for the modal */
    position: relative;
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280; /* Gray-500 */
}

.modal-close-btn:hover {
    color: #1f2937; /* Gray-800 */
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db; /* Gray-300 */
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(192, 154, 62, 0.3); /* Gold focus ring */
}

/* Note: Tailwind utility classes like 'max-w-3xl', 'mx-auto', 'mb-3' etc.,
   are applied directly in the HTML and will work because Tailwind CSS is
   loaded via CDN in the index.html. If you were to remove the Tailwind CDN,
   you would need to replicate these utilities in this CSS file.
   For example, for .section-subtitle:
   .section-subtitle {
       font-family: 'Inter', sans-serif;
       font-size: 1.25rem;
       color: var(--text-secondary);
       max-width: 48rem; /* Corresponds to max-w-3xl in Tailwind */
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 3rem;
   }
*/