/* ==========================================================================
   JA Development Group - Landing Page Styles
   Bold Craftsman Aesthetic with New Mexico Character
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Face Declarations - PP Fraktion Sans (Self-hosted)
   Using font-weight ranges to consolidate declarations pointing to same files
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'PP Fraktion Sans';
    src: url('fonts/PPFraktionSans-Light.woff2') format('woff2');
    font-weight: 300 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Fraktion Sans';
    src: url('fonts/PPFraktionSans-Bold.woff2') format('woff2');
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

/* PP Fraktion Mono - Used for buttons */
@font-face {
    font-family: 'PP Fraktion Mono';
    src: url('fonts/PPFraktionMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Fraktion Mono';
    src: url('fonts/PPFraktionMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
    /* New Mexico Earth Palette - Stronger */
    --color-sand: #F2EDE6;
    --color-adobe: #E0D7CA;
    --color-terracotta: #9e5a47;
    --color-sage: #6B7D62;
    --color-mesa: #C9B898;
    --color-charcoal: #1F1F1F;
    --color-stone: #595550;
    --color-cream: #FAF9F7;
    --color-white: #FFFFFF;
    --color-black: #0a0908;

    /* Semantic Colors */
    --color-text: #0a0908;
    --color-text-light: #5c5c5c;
    --color-text-inverse: var(--color-white);
    --color-bg: var(--color-white);
    --color-bg-alt: var(--color-sand);
    --color-accent: var(--color-terracotta);
    --color-accent-soft: var(--color-sage);

    /* Figma Color Schemes */
    /* Scheme 1 - White (light text) */
    --scheme-1-bg: #ffffff;
    --scheme-1-fg: #f2f2f2;
    --scheme-1-text: #0a0908;
    --scheme-1-border: rgba(10, 9, 8, 0.15);
    --scheme-1-accent: #0a0908;

    /* Scheme 2 - Spring Wood Light (light text) */
    --scheme-2-bg: #f5f2ed;
    --scheme-2-fg: #f2ede6;
    --scheme-2-text: #0a0908;
    --scheme-2-border: rgba(10, 9, 8, 0.15);
    --scheme-2-accent: #0a0908;

    /* Scheme 3 - Rodeo Dust Lighter (light text) */
    --scheme-3-bg: #f4f0ea;
    --scheme-3-fg: #f9f7f4;
    --scheme-3-text: #0a0908;
    --scheme-3-border: rgba(10, 9, 8, 0.15);
    --scheme-3-accent: #0a0908;

    /* Scheme 4 - Rodeo Dust (light text) */
    --scheme-4-bg: #d9cdb6;
    --scheme-4-fg: #c9b898;
    --scheme-4-text: #0a0908;
    --scheme-4-border: rgba(10, 9, 8, 0.15);
    --scheme-4-accent: #0a0908;

    /* Scheme 5 - Black (dark - light text) */
    --scheme-5-bg: #0a0908;
    --scheme-5-fg: #222120;
    --scheme-5-text: #ffffff;
    --scheme-5-border: rgba(255, 255, 255, 0.20);
    --scheme-5-accent: #f2ede6;

    /* Scheme 6 - Terracotta (dark - light text) */
    --scheme-6-bg: #9e5a47;
    --scheme-6-fg: #93482f;
    --scheme-6-text: #ffffff;
    --scheme-6-border: rgba(255, 255, 255, 0.20);
    --scheme-6-accent: #f2ede6;

    /* Scheme 7 - Sage (dark - light text) */
    --scheme-7-bg: #6b7d62;
    --scheme-7-fg: #55644e;
    --scheme-7-text: #ffffff;
    --scheme-7-border: rgba(255, 255, 255, 0.20);
    --scheme-7-accent: #f2ede6;

    /* ========== GRADIENTS ========== */
    /* Light Gradients */
    --gradient-light-1: linear-gradient(180deg, #ffffff 0%, #f5f2ed 100%);
    --gradient-light-2: linear-gradient(180deg, #f5f2ed 0%, #f4f0ea 100%);
    --gradient-earth: linear-gradient(180deg, #f4f0ea 0%, #d9cdb6 100%);
    --gradient-mesa: linear-gradient(135deg, #d9cdb6 0%, #c9b898 50%, #f2ede6 100%);

    /* Dark Gradients */
    --gradient-dark: linear-gradient(180deg, #222120 0%, #0a0908 100%);
    --gradient-charcoal: linear-gradient(180deg, #0a0908 0%, #000000 100%);

    /* Color Gradients */
    --gradient-terracotta: linear-gradient(180deg, #cd8b75 0%, #9e5a47 50%, #93482f 100%);
    --gradient-sage: linear-gradient(180deg, #97a491 0%, #6b7d62 50%, #55644e 100%);
    --gradient-sunset: linear-gradient(135deg, #9e5a47 0%, #c9b898 50%, #f2ede6 100%);
    --gradient-desert: linear-gradient(135deg, #f4f0ea 0%, #d9cdb6 25%, #9e5a47 50%, #6b7d62 75%, #0a0908 100%);

    /* Radial Gradients */
    --gradient-radial-light: radial-gradient(ellipse at center, #ffffff 0%, #f5f2ed 70%, #f4f0ea 100%);
    --gradient-radial-dark: radial-gradient(ellipse at center, #222120 0%, #0a0908 70%, #000000 100%);
    --gradient-radial-spotlight: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%, transparent 70%);
    --gradient-radial-vignette: radial-gradient(ellipse at center, transparent 0%, rgba(10,9,8,0.3) 100%);

    /* Mesh/Aurora Gradients */
    --gradient-aurora: linear-gradient(135deg, #f5f2ed 0%, #f4f0ea 20%, #d9cdb6 40%, #c9b898 60%, #f2ede6 80%, #ffffff 100%);
    --gradient-warm-glow: radial-gradient(ellipse at 30% 30%, rgba(158, 90, 71, 0.15) 0%, transparent 50%),
                          radial-gradient(ellipse at 70% 70%, rgba(201, 184, 152, 0.2) 0%, transparent 50%);

    /* ========== SHADOWS ========== */
    /* Elevation Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(10, 9, 8, 0.05);
    --shadow-sm: 0 2px 4px -1px rgba(10, 9, 8, 0.08), 0 1px 2px -1px rgba(10, 9, 8, 0.04);
    --shadow-md: 0 4px 8px -2px rgba(10, 9, 8, 0.10), 0 2px 4px -2px rgba(10, 9, 8, 0.06);
    --shadow-lg: 0 8px 16px -4px rgba(10, 9, 8, 0.12), 0 4px 8px -4px rgba(10, 9, 8, 0.08);
    --shadow-xl: 0 12px 24px -6px rgba(10, 9, 8, 0.15), 0 6px 12px -6px rgba(10, 9, 8, 0.10);
    --shadow-2xl: 0 24px 48px -12px rgba(10, 9, 8, 0.20), 0 12px 24px -12px rgba(10, 9, 8, 0.12);

    /* Inset Shadows */
    --shadow-inset-xs: inset 0 1px 2px 0 rgba(10, 9, 8, 0.06);
    --shadow-inset-sm: inset 0 2px 4px 0 rgba(10, 9, 8, 0.08);
    --shadow-inset-md: inset 0 4px 8px 0 rgba(10, 9, 8, 0.10);
    --shadow-inset-lg: inset 0 8px 16px 0 rgba(10, 9, 8, 0.12);

    /* Colored Glows */
    --glow-terracotta: 0 0 20px rgba(158, 90, 71, 0.4), 0 0 40px rgba(158, 90, 71, 0.2);
    --glow-sage: 0 0 20px rgba(107, 125, 98, 0.4), 0 0 40px rgba(107, 125, 98, 0.2);
    --glow-white: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.2);
    --glow-warm: 0 0 20px rgba(201, 184, 152, 0.5), 0 0 40px rgba(201, 184, 152, 0.25);
    --glow-dark: 0 0 20px rgba(10, 9, 8, 0.6), 0 0 40px rgba(10, 9, 8, 0.3);

    /* Text Shadows */
    --text-shadow-sm: 0 1px 2px rgba(10, 9, 8, 0.2);
    --text-shadow-md: 0 2px 4px rgba(10, 9, 8, 0.3), 0 1px 2px rgba(10, 9, 8, 0.2);
    --text-shadow-lg: 0 4px 8px rgba(10, 9, 8, 0.4), 0 2px 4px rgba(10, 9, 8, 0.3);
    --text-shadow-white-sm: 0 1px 2px rgba(255, 255, 255, 0.3);
    --text-shadow-white-md: 0 2px 4px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(255, 255, 255, 0.3);

    /* Typography - Figma Design System */
    --font-display: 'General Sans', system-ui, sans-serif;
    --font-body: 'PP Fraktion Sans', 'Inter', system-ui, sans-serif;
    --font-mono: 'PP Fraktion Mono', monospace;

    /* Type Scale - Figma Relume Kit */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.375rem;    /* 22px */
    --text-2xl: 1.75rem;    /* 28px */
    --text-3xl: 2.25rem;    /* 36px */
    --text-4xl: 2.75rem;    /* 44px */
    --text-5xl: 3.25rem;    /* 52px */
    --text-6xl: 4.5rem;     /* 72px */

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 10rem;

    /* Layout */
    --container-max: 1280px;
    --container-narrow: 800px;
    --gutter: clamp(1.5rem, 5vw, 4rem);

    /* Transitions - Fast & Elegant */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration: 0.25s;
    --duration-fast: 0.15s;

    /* Animation Delays */
    --delay-unit: 0.1s;
    --stagger-unit: 0.05s;

    /* Hover Transform */
    --hover-lift: translateY(-1px);

    /* Button Shadows - Dark buttons (primary) */
    --btn-shadow-dark:
        0 32px 24px 0 rgba(255, 255, 255, 0.05) inset,
        0 2px 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 0 0 1px rgba(0, 0, 0, 0.15) inset,
        0 -2px 1px 0 rgba(0, 0, 0, 0.20) inset,
        0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --btn-shadow-dark-hover:
        0 32px 24px 0 rgba(255, 255, 255, 0.07) inset,
        0 2px 1px 0 rgba(255, 255, 255, 0.30) inset,
        0 0 0 1px rgba(0, 0, 0, 0.15) inset,
        0 -2px 1px 0 rgba(0, 0, 0, 0.20) inset,
        0 4px 8px 0 rgba(0, 0, 0, 0.15);
    --btn-shadow-dark-active:
        0 32px 24px 0 rgba(255, 255, 255, 0.03) inset,
        0 2px 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 0 0 1px rgba(0, 0, 0, 0.20) inset,
        0 -2px 1px 0 rgba(0, 0, 0, 0.25) inset,
        0 1px 2px 0 rgba(0, 0, 0, 0.05);

    /* Button Shadows - Light buttons (secondary) */
    --btn-shadow-light:
        0 0 0 1px rgba(10, 9, 8, 0.05) inset,
        0 -2px 1px 0 rgba(10, 9, 8, 0.05) inset,
        0 1px 2px 0 rgba(10, 9, 8, 0.05);
    --btn-shadow-light-hover:
        0 0 0 1px rgba(10, 9, 8, 0.10) inset,
        0 -2px 1px 0 rgba(10, 9, 8, 0.08) inset,
        0 4px 8px 0 rgba(10, 9, 8, 0.08);
    --btn-shadow-light-active:
        0 0 0 1px rgba(10, 9, 8, 0.12) inset,
        0 -2px 1px 0 rgba(10, 9, 8, 0.10) inset,
        0 1px 2px 0 rgba(10, 9, 8, 0.05);

    /* Button Shadows - White buttons (for dark backgrounds) */
    --btn-shadow-white:
        0 32px 24px 0 rgba(0, 0, 0, 0.03) inset,
        0 2px 1px 0 rgba(255, 255, 255, 0.80) inset,
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        0 -2px 1px 0 rgba(0, 0, 0, 0.08) inset,
        0 1px 2px 0 rgba(0, 0, 0, 0.10);
    --btn-shadow-white-hover:
        0 32px 24px 0 rgba(0, 0, 0, 0.03) inset,
        0 2px 1px 0 rgba(255, 255, 255, 0.90) inset,
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        0 -2px 1px 0 rgba(0, 0, 0, 0.08) inset,
        0 4px 8px 0 rgba(0, 0, 0, 0.20);
    --btn-shadow-white-active:
        0 32px 24px 0 rgba(0, 0, 0, 0.05) inset,
        0 2px 1px 0 rgba(255, 255, 255, 0.60) inset,
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 -2px 1px 0 rgba(0, 0, 0, 0.12) inset,
        0 1px 2px 0 rgba(0, 0, 0, 0.10);

    /* Button Shadows - Alt (transparent on dark backgrounds) */
    --btn-shadow-alt:
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        0 -2px 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 1px 2px 0 rgba(0, 0, 0, 0.10);
    --btn-shadow-alt-hover:
        0 0 0 1px rgba(255, 255, 255, 0.20) inset,
        0 -2px 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 4px 8px 0 rgba(0, 0, 0, 0.20);
    --btn-shadow-alt-active:
        0 0 0 1px rgba(255, 255, 255, 0.25) inset,
        0 -2px 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 1px 2px 0 rgba(0, 0, 0, 0.10);

    /* Details */
    --border-fine: 1px solid rgba(0, 0, 0, 0.08);
    --border-strong: 2px solid var(--color-black);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Subtle Grain Texture Overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
address { font-style: normal; }

/* Text Links - for inline/body links */
.text-link {
    color: var(--color-terracotta);
    font-weight: 500;
    position: relative;
    transition: color 0.2s ease-out;
}

.text-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.3;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

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

.text-link:hover::after {
    opacity: 1;
    transform: translateY(-1px);
}

::selection {
    background-color: var(--color-terracotta);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

h1, h2 { line-height: 1.2; }
h3 { line-height: 1.3; }
h4, h5, h6 { line-height: 1.4; }

/* Type Scale: H1 72/40, H2 52/36, H3 44/32, H4 36/24, H5 28/20, H6 22/18 */
h1 { font-size: clamp(2.5rem, 8vw, var(--text-6xl)); }
h2 { font-size: clamp(2.25rem, 5vw, var(--text-5xl)); }
h3 { font-size: clamp(2rem, 4vw, var(--text-4xl)); }
h4 { font-size: clamp(1.5rem, 3vw, var(--text-3xl)); }
h5 { font-size: clamp(1.25rem, 2.5vw, var(--text-2xl)); }
h6 { font-size: clamp(1.125rem, 2vw, var(--text-xl)); }

p { max-width: 60ch; }
p + p { margin-top: 1.25em; }

em { font-style: normal; color: var(--color-accent); }

strong { font-weight: 500; }

/* Section Label/Tagline - Figma: 16px, Bold, Uppercase, 4% letter-spacing */
.label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

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

.container--narrow {
    max-width: var(--container-narrow);
}

section {
    padding: 112px 0;
}

@media (max-width: 1023px) {
    section {
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    section {
        padding: 64px 0;
    }
}

/* --------------------------------------------------------------------------
   Buttons - Figma Relume Kit Style
   Font: PP Fraktion Mono Bold, Uppercase, 16px
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Primary Button - Solid black background */
.btn--primary {
    background-color: #0a0908;
    color: #ffffff;
    border-color: transparent;
    border-radius: 2px;
    box-shadow: var(--btn-shadow-dark);
}

.btn--primary:hover {
    background-color: #1a1918;
    transform: var(--hover-lift);
    box-shadow: var(--btn-shadow-dark-hover);
}

.btn--primary:active {
    background-color: #000000;
    transform: translateY(0);
    box-shadow: var(--btn-shadow-dark-active);
}

/* Secondary Button - Light transparent background */
.btn--secondary {
    background-color: rgba(0, 0, 0, 0.05);
    color: #0a0908;
    border-color: transparent;
    border-radius: 2px;
    box-shadow: var(--btn-shadow-light);
}

.btn--secondary:hover {
    background-color: rgba(0, 0, 0, 0.08);
    transform: var(--hover-lift);
    box-shadow: var(--btn-shadow-light-hover);
}

.btn--secondary:active {
    background-color: rgba(0, 0, 0, 0.12);
    transform: translateY(0);
    box-shadow: var(--btn-shadow-light-active);
}

/* Outline Button - Same as secondary */
.btn--outline {
    background-color: transparent;
    color: #0a0908;
    border-color: #0a0908;
}

.btn--outline:hover {
    background-color: rgba(10, 9, 8, 0.05);
}

.btn--outline:active {
    background-color: rgba(10, 9, 8, 0.1);
}

/* Tertiary Button - Text only, background appears on hover */
.btn--tertiary {
    background: transparent;
    color: #0a0908;
    border-color: transparent;
    border-radius: 2px;
    padding: 12px 24px;
}

.btn--tertiary:hover {
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: var(--btn-shadow-light);
}

.btn--tertiary:active {
    background-color: rgba(0, 0, 0, 0.08);
}

/* Link Button - Text only, no padding */
.btn--link {
    background: transparent;
    border: none;
    padding: 0;
    color: #0a0908;
    font-weight: 700;
    gap: 8px;
    text-decoration: none;
}

.btn--link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.btn--link:active {
    opacity: 0.7;
}

/* Small Button variant */
.btn--small {
    padding: 10px 20px;
    font-size: 14px;
}

/* Large Button variant */
.btn--large {
    padding: 16px 32px;
    font-size: 18px;
}

/* Button icon */
.btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Alternate buttons (for dark backgrounds) */
.btn--primary-alt,
.btn--white {
    background-color: #ffffff;
    color: #0a0908;
    border-color: transparent;
    border-radius: 2px;
    box-shadow: var(--btn-shadow-white);
}

.btn--primary-alt:hover,
.btn--white:hover {
    background-color: #f5f5f5;
    transform: var(--hover-lift);
    box-shadow: var(--btn-shadow-white-hover);
}

.btn--primary-alt:active,
.btn--white:active {
    background-color: #eeeeee;
    transform: translateY(0);
    box-shadow: var(--btn-shadow-white-active);
}

.btn--secondary-alt {
    background-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border-color: transparent;
    border-radius: 2px;
    box-shadow: var(--btn-shadow-alt);
}

.btn--secondary-alt:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: var(--hover-lift);
    box-shadow: var(--btn-shadow-alt-hover);
}

.btn--secondary-alt:active {
    background-color: rgba(255, 255, 255, 0.20);
    transform: translateY(0);
    box-shadow: var(--btn-shadow-alt-active);
}

/* Tertiary Alt - Text only on dark background */
.btn--tertiary-alt {
    background: transparent;
    color: #ffffff;
    border-color: transparent;
    border-radius: 2px;
    padding: 12px 24px;
}

.btn--tertiary-alt:hover {
    background-color: rgba(255, 255, 255, 0.10);
    box-shadow: var(--btn-shadow-alt);
}

.btn--tertiary-alt:active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Link Alt - Text only on dark background */
.btn--link-alt {
    background: transparent;
    border: none;
    padding: 0;
    color: #ffffff;
    font-weight: 700;
    gap: 8px;
    text-decoration: none;
}

.btn--link-alt:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.btn--link-alt:active {
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Cards - Figma Relume Kit Style
   -------------------------------------------------------------------------- */

/* Base Card */
.card {
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    overflow: hidden;
    background-color: var(--card-bg, var(--scheme-1-bg));
    color: var(--card-text, var(--scheme-1-text));
    border: 1px solid var(--card-border, var(--scheme-1-border));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.card__tagline {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: inherit;
    opacity: 0.6;
}

.card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.3;
    color: inherit;
    margin: 0;
}

.card__description {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    opacity: 0.8;
    margin: 0;
}

.card__meta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: inherit;
    opacity: 0.6;
    margin-top: auto;
}

/* Card Hover - Lift */
.card--hover-lift {
    cursor: pointer;
}

.card--hover-lift:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 24px -8px rgba(10, 9, 8, 0.15),
        0 4px 8px -2px rgba(10, 9, 8, 0.08);
}

/* Card Hover - Scale Image */
.card--hover-zoom {
    cursor: pointer;
}

.card--hover-zoom:hover .card__image {
    transform: scale(1.05);
}

/* Card Hover - Border Glow (for dark cards) */
.card--hover-glow {
    cursor: pointer;
}

.card--hover-glow:hover {
    border-color: var(--card-accent, var(--scheme-5-accent));
    box-shadow: 0 0 0 1px var(--card-accent, var(--scheme-5-accent));
}

/* Card Hover - Combined (lift + zoom) */
.card--hover-full {
    cursor: pointer;
}

.card--hover-full:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 24px -8px rgba(10, 9, 8, 0.15),
        0 4px 8px -2px rgba(10, 9, 8, 0.08);
}

.card--hover-full:hover .card__image {
    transform: scale(1.05);
}

/* Color Scheme Variants */
.card--scheme-1 {
    --card-bg: var(--scheme-1-bg);
    --card-fg: var(--scheme-1-fg);
    --card-text: var(--scheme-1-text);
    --card-border: var(--scheme-1-border);
    --card-accent: var(--scheme-1-accent);
}

.card--scheme-2 {
    --card-bg: var(--scheme-2-bg);
    --card-fg: var(--scheme-2-fg);
    --card-text: var(--scheme-2-text);
    --card-border: var(--scheme-2-border);
    --card-accent: var(--scheme-2-accent);
}

.card--scheme-3 {
    --card-bg: var(--scheme-3-bg);
    --card-fg: var(--scheme-3-fg);
    --card-text: var(--scheme-3-text);
    --card-border: var(--scheme-3-border);
    --card-accent: var(--scheme-3-accent);
}

.card--scheme-4 {
    --card-bg: var(--scheme-4-bg);
    --card-fg: var(--scheme-4-fg);
    --card-text: var(--scheme-4-text);
    --card-border: var(--scheme-4-border);
    --card-accent: var(--scheme-4-accent);
}

.card--scheme-5 {
    --card-bg: var(--scheme-5-bg);
    --card-fg: var(--scheme-5-fg);
    --card-text: var(--scheme-5-text);
    --card-border: var(--scheme-5-border);
    --card-accent: var(--scheme-5-accent);
}

.card--scheme-5:hover {
    box-shadow:
        0 12px 24px -8px rgba(0, 0, 0, 0.4),
        0 4px 8px -2px rgba(0, 0, 0, 0.2);
}

.card--scheme-6 {
    --card-bg: var(--scheme-6-bg);
    --card-fg: var(--scheme-6-fg);
    --card-text: var(--scheme-6-text);
    --card-border: var(--scheme-6-border);
    --card-accent: var(--scheme-6-accent);
}

.card--scheme-6:hover {
    box-shadow:
        0 12px 24px -8px rgba(158, 90, 71, 0.4),
        0 4px 8px -2px rgba(158, 90, 71, 0.2);
}

.card--scheme-7 {
    --card-bg: var(--scheme-7-bg);
    --card-fg: var(--scheme-7-fg);
    --card-text: var(--scheme-7-text);
    --card-border: var(--scheme-7-border);
    --card-accent: var(--scheme-7-accent);
}

.card--scheme-7:hover {
    box-shadow:
        0 12px 24px -8px rgba(107, 125, 98, 0.4),
        0 4px 8px -2px rgba(107, 125, 98, 0.2);
}

/* Card without image (content-only) */
.card--no-image .card__content {
    padding: 32px;
}

/* Card horizontal layout */
.card--horizontal {
    flex-direction: row;
}

.card--horizontal .card__image {
    width: 40%;
    aspect-ratio: auto;
    min-height: 200px;
}

.card--horizontal .card__content {
    width: 60%;
}

@media (max-width: 767px) {
    .card--horizontal {
        flex-direction: column;
    }

    .card--horizontal .card__image,
    .card--horizontal .card__content {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Gradients - Utility Classes
   -------------------------------------------------------------------------- */

/* Linear Gradients */
.bg-gradient-light-1 { background: var(--gradient-light-1); }
.bg-gradient-light-2 { background: var(--gradient-light-2); }
.bg-gradient-earth { background: var(--gradient-earth); }
.bg-gradient-mesa { background: var(--gradient-mesa); }
.bg-gradient-dark { background: var(--gradient-dark); }
.bg-gradient-charcoal { background: var(--gradient-charcoal); }
.bg-gradient-terracotta { background: var(--gradient-terracotta); }
.bg-gradient-sage { background: var(--gradient-sage); }
.bg-gradient-sunset { background: var(--gradient-sunset); }
.bg-gradient-desert { background: var(--gradient-desert); }

/* Radial Gradients */
.bg-gradient-radial-light { background: var(--gradient-radial-light); }
.bg-gradient-radial-dark { background: var(--gradient-radial-dark); }

/* Overlay Gradients (for layering) - use shared pseudo-element base */
.overlay-spotlight,
.overlay-vignette,
.overlay-warm-glow {
    position: relative;
}

.overlay-spotlight::before,
.overlay-vignette::before,
.overlay-warm-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.overlay-spotlight::before { background: var(--gradient-radial-spotlight); }
.overlay-vignette::before { background: var(--gradient-radial-vignette); }
.overlay-warm-glow::before { background: var(--gradient-warm-glow); }

/* Gradient Text */
.text-gradient-terracotta {
    background: var(--gradient-terracotta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-sage {
    background: var(--gradient-sage);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-sunset {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --------------------------------------------------------------------------
   Shadows - Utility Classes
   -------------------------------------------------------------------------- */

/* Elevation Shadows */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-none { box-shadow: none; }

/* Inset Shadows */
.shadow-inset-xs { box-shadow: var(--shadow-inset-xs); }
.shadow-inset-sm { box-shadow: var(--shadow-inset-sm); }
.shadow-inset-md { box-shadow: var(--shadow-inset-md); }
.shadow-inset-lg { box-shadow: var(--shadow-inset-lg); }

/* Colored Glows */
.glow-terracotta { box-shadow: var(--glow-terracotta); }
.glow-sage { box-shadow: var(--glow-sage); }
.glow-white { box-shadow: var(--glow-white); }
.glow-warm { box-shadow: var(--glow-warm); }
.glow-dark { box-shadow: var(--glow-dark); }

/* Text Shadows */
.text-shadow-sm { text-shadow: var(--text-shadow-sm); }
.text-shadow-md { text-shadow: var(--text-shadow-md); }
.text-shadow-lg { text-shadow: var(--text-shadow-lg); }
.text-shadow-white-sm { text-shadow: var(--text-shadow-white-sm); }
.text-shadow-white-md { text-shadow: var(--text-shadow-white-md); }

/* --------------------------------------------------------------------------
   Textures - Utility Classes
   All texture classes share common pseudo-element base styles
   -------------------------------------------------------------------------- */

/* Shared base: position relative for parent */
.texture-grain,
.texture-grain-light,
.texture-grain-heavy,
.texture-dots,
.texture-grid,
.texture-lines,
.texture-paper {
    position: relative;
}

/* Shared base: pseudo-element overlay */
.texture-grain::after,
.texture-grain-light::after,
.texture-grain-heavy::after,
.texture-dots::after,
.texture-grid::after,
.texture-lines::after,
.texture-paper::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Grain textures - shared SVG noise pattern */
.texture-grain::after,
.texture-grain-light::after,
.texture-grain-heavy::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
}

.texture-grain-light::after { opacity: 0.08; mix-blend-mode: overlay; }
.texture-grain::after { opacity: 0.12; mix-blend-mode: multiply; }
.texture-grain-heavy::after { opacity: 0.20; mix-blend-mode: multiply; }

/* Dot Pattern */
.texture-dots::after {
    opacity: 0.20;
    background-image: radial-gradient(circle, #0a0908 1px, transparent 1px);
    background-size: 16px 16px;
}

/* Grid Pattern */
.texture-grid::after {
    opacity: 0.25;
    background-image:
        linear-gradient(to right, rgba(10, 9, 8, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 9, 8, 0.3) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Lines Pattern */
.texture-lines::after {
    opacity: 0.20;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 11px,
        rgba(10, 9, 8, 0.4) 11px,
        rgba(10, 9, 8, 0.4) 12px
    );
}

/* Paper Texture */
.texture-paper::after {
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 400px 400px;
}

/* --------------------------------------------------------------------------
   Navigation - Theme Variants
   -------------------------------------------------------------------------- */

/* Light Theme (default) */
.nav--light,
.nav:not(.nav--dark):not(.nav--transparent) {
    --nav-bg: var(--color-white);
    --nav-text: var(--color-text);
    --nav-border: rgba(10, 9, 8, 0.08);
    --nav-logo-dark: 1;
    --nav-logo-light: 0;
    --nav-toggle-color: var(--color-black);
    --nav-cta-bg: #0a0908;
    --nav-cta-text: #ffffff;
}

/* Dark Theme */
.nav--dark {
    --nav-bg: #0a0908;
    --nav-text: var(--color-white);
    --nav-border: rgba(255, 255, 255, 0.12);
    --nav-logo-dark: 0;
    --nav-logo-light: 1;
    --nav-toggle-color: var(--color-white);
    --nav-cta-bg: #ffffff;
    --nav-cta-text: #0a0908;
}

/* Transparent Theme - starts transparent, transitions to light on scroll */
.nav--transparent {
    --nav-bg: transparent;
    --nav-text: var(--color-white);
    --nav-border: rgba(10, 9, 8, 0.08);
    --nav-logo-dark: 0;
    --nav-logo-light: 1;
    --nav-toggle-color: var(--color-white);
    --nav-cta-bg: #ffffff;
    --nav-cta-text: #0a0908;
}

/* Transparent theme transitions to light on scroll */
.nav--transparent.nav--scrolled {
    --nav-text: var(--color-text);
    --nav-logo-dark: 1;
    --nav-logo-light: 0;
    --nav-toggle-color: var(--color-black);
    --nav-cta-bg: #0a0908;
    --nav-cta-text: #ffffff;
}

/* --------------------------------------------------------------------------
   Navigation - Base Styles
   -------------------------------------------------------------------------- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--nav-bg);
    transition: background-color var(--duration) var(--ease-out);
}

.nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-white);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
    border-bottom: 1px solid transparent;
}

.nav.nav--scrolled::before {
    opacity: 1;
    border-bottom-color: var(--nav-border);
}

/* Dark theme scrolled state needs dark background */
.nav--dark::before {
    background-color: #0a0908;
}

.nav__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 64px;
    min-height: 72px;
}

/* Logo */
.nav__logo {
    display: flex;
    align-items: center;
    position: relative;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.nav__logo:hover {
    opacity: 0.7;
}

.nav__logo-img {
    width: 84px;
    height: 44px;
    object-fit: contain;
    transition: opacity var(--duration) var(--ease-out);
}

/* Dual logo system - dark logo for light backgrounds */
.nav__logo-img--dark {
    opacity: var(--nav-logo-dark);
}

/* Light logo for dark backgrounds - positioned absolute */
.nav__logo-img--light {
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--nav-logo-light);
}

/* Right side: nav links + actions */
.nav__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Menu */
.nav__menu {
    display: none;
}

@media (min-width: 1024px) {
    .nav__menu {
        display: block;
    }
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link {
    font-family: 'PP Fraktion Mono', var(--font-body), monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--nav-text);
    text-decoration: none;
    transition: color var(--duration) var(--ease-out), opacity 0.2s ease-out;
}

.nav__link:hover {
    opacity: 0.6;
}

/* Nav Actions */
.nav__actions {
    display: none;
}

@media (min-width: 1024px) {
    .nav__actions {
        display: flex;
        align-items: center;
    }
}

/* Responsive nav padding */
@media (max-width: 1023px) {
    .nav__container {
        padding: 0 24px;
    }
}

/* Mobile Toggle */
.nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 24px;
    height: 24px;
    z-index: 1001;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

@media (min-width: 1024px) {
    .nav__toggle { display: none; }
}

.nav__toggle span {
    width: 100%;
    height: 2px;
    background-color: var(--nav-toggle-color);
    transition: all 0.3s ease, background-color var(--duration) var(--ease-out);
}

.nav__toggle.active span:first-child {
    transform: rotate(45deg) translateY(4px);
}

.nav__toggle.active span:last-child {
    transform: rotate(-45deg) translateY(-4px);
}

/* Nav CTA Button Theming */
.nav__cta.btn {
    background-color: var(--nav-cta-bg);
    color: var(--nav-cta-text);
    padding: 8px 20px;
    transition: background-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out),
                transform 0.2s ease,
                box-shadow 0.2s ease;
    box-shadow: var(--btn-shadow-dark);
}

.nav__cta.btn:hover {
    transform: var(--hover-lift);
}

/* --------------------------------------------------------------------------
   Mobile Menu - Theme Aware
   -------------------------------------------------------------------------- */
.nav__menu.active {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 120px 64px 48px;
    z-index: 999;
}

/* Light mobile menu (default, transparent) */
.nav--light .nav__menu.active,
.nav:not(.nav--dark):not(.nav--transparent) .nav__menu.active,
.nav--transparent .nav__menu.active {
    background-color: var(--color-white);
}

/* Dark mobile menu */
.nav--dark .nav__menu.active {
    background-color: #0a0908;
}

.nav__menu.active .nav__list {
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    text-align: left;
}

/* Mobile menu links - Figma spec: PP Fraktion Sans 36px */
.nav__menu.active .nav__link {
    font-family: 'PP Fraktion Sans', var(--font-body), sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.36px;
    text-transform: uppercase;
}

/* Light mobile menu text */
.nav--light .nav__menu.active .nav__link,
.nav:not(.nav--dark):not(.nav--transparent) .nav__menu.active .nav__link,
.nav--transparent .nav__menu.active .nav__link {
    color: var(--color-text);
}

/* Dark mobile menu text */
.nav--dark .nav__menu.active .nav__link {
    color: var(--color-white);
}

/* Mobile menu contact info */
.nav__contact {
    display: none;
    flex-direction: column;
    gap: 8px;
    font-family: 'PP Fraktion Sans', var(--font-body), sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.nav__menu.active .nav__contact {
    display: flex;
    margin-top: auto;
}

/* Light mobile menu contact */
.nav--light .nav__menu.active .nav__contact,
.nav:not(.nav--dark):not(.nav--transparent) .nav__menu.active .nav__contact,
.nav--transparent .nav__menu.active .nav__contact {
    color: var(--color-text);
}

.nav--light .nav__menu.active .nav__contact a,
.nav:not(.nav--dark):not(.nav--transparent) .nav__menu.active .nav__contact a,
.nav--transparent .nav__menu.active .nav__contact a {
    color: var(--color-text);
    text-decoration: underline;
}

/* Dark mobile menu contact */
.nav--dark .nav__menu.active .nav__contact {
    color: var(--color-white);
}

.nav--dark .nav__menu.active .nav__contact a {
    color: var(--color-white);
    text-decoration: underline;
}

/* Mobile Contact link - hidden on desktop, shown in mobile menu */
.nav__list-item--mobile {
    display: none;
}

@media (max-width: 1023px) {
    /* Show Contact in mobile menu list, hide nav__actions button */
    .nav__menu.active .nav__list-item--mobile {
        display: block;
    }

    .nav__menu.active ~ .nav__actions {
        display: none;
    }
}

@media (max-width: 767px) {
    .nav__menu.active {
        padding: 100px 24px 48px;
    }
}

/* --------------------------------------------------------------------------
   Hero - Figma Header/71 Style
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 80px;
    background-color: var(--color-white);
    padding-top: calc(72px + 48px); /* nav height + section padding */
}

@media (max-width: 767px) {
    .hero {
        gap: 48px;
        padding-top: calc(72px + 32px);
    }
}

.hero__content {
    width: 100%;
}

.hero__column {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 768px;
}

@media (max-width: 767px) {
    .hero__column {
        gap: 24px;
    }
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero__title {
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.72px;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 1023px) {
    .hero__title {
        font-size: 56px;
    }
}

@media (max-width: 767px) {
    .hero__title {
        font-size: 40px;
        letter-spacing: 0.4px;
    }
}

.hero__subtitle {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 767px) {
    .hero__subtitle {
        font-size: 16px;
    }
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Hero image - full width */
.hero__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 720;
    overflow: hidden;
    /* New Mexico landscape gradient placeholder */
    background:
        linear-gradient(
            to bottom,
            rgba(17, 17, 17, 0.05) 0%,
            rgba(17, 17, 17, 0.2) 100%
        ),
        linear-gradient(
            170deg,
            #1a1612 0%,
            #3a2a1e 20%,
            #7a5438 40%,
            #c48a5a 60%,
            #dbb07a 75%,
            #d4c4b0 90%,
            #b8c4cc 100%
        );
    background-size: cover;
    background-position: center;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Animated Background Transitions
   -------------------------------------------------------------------------- */
.bg-transition-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: var(--color-bg);
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Section background color definitions */
section {
    position: relative;
}

/* Using Figma color scheme system for consistency */
.philosophy { --section-bg: var(--scheme-1-bg); }      /* White */
.process { --section-bg: var(--scheme-2-bg); }         /* Spring Wood Light */
.sustainability { --section-bg: var(--scheme-2-bg); }  /* Spring Wood Light */
.communities { --section-bg: var(--scheme-2-bg); }     /* Spring Wood Light */
.portfolio { --section-bg: var(--scheme-1-bg); }       /* White */
.journal { --section-bg: var(--scheme-3-bg); }         /* Rodeo Dust Lighter */
.faq { --section-bg: var(--scheme-3-bg); }             /* Rodeo Dust Lighter */
.founder { --section-bg: var(--scheme-4-bg); }         /* Rodeo Dust */
.cta { --section-bg: var(--scheme-5-bg); }             /* Black */

/* --------------------------------------------------------------------------
   Decorative Elements
   -------------------------------------------------------------------------- */

/* Section top accent line */
.section-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-terracotta);
}

/* Decorative divider with diamond */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
}

.divider::before,
.divider::after {
    content: '';
    height: 1px;
    width: 80px;
    background: linear-gradient(
        to right,
        transparent,
        var(--color-stone),
        transparent
    );
    opacity: 0.3;
}

.divider__diamond {
    width: 8px;
    height: 8px;
    background-color: var(--color-terracotta);
    transform: rotate(45deg);
}

/* Craftsman corner accents for feature blocks */
.corner-accent {
    position: relative;
}

.corner-accent::before,
.corner-accent::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--color-terracotta);
    border-style: solid;
    opacity: 0.6;
    transition: opacity 0.3s ease-out;
}

.corner-accent::before {
    top: -8px;
    left: -8px;
    border-width: 2px 0 0 2px;
}

.corner-accent::after {
    bottom: -8px;
    right: -8px;
    border-width: 0 2px 2px 0;
}

.corner-accent:hover::before,
.corner-accent:hover::after {
    opacity: 1;
}

/* Subtle pattern overlay for sections */
.pattern-dots {
    position: relative;
}

.pattern-dots::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    opacity: 0.03;
    background-image: radial-gradient(var(--color-black) 1px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Philosophy - Figma Layout/1 Style
   -------------------------------------------------------------------------- */
.philosophy {
    background-color: transparent;
}

.philosophy__grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 1024px) {
    .philosophy__grid {
        flex-direction: row;
        gap: 80px;
        align-items: center;
    }
}

.philosophy__content {
    flex: 1;
}

.philosophy__tagline {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin: 0 0 16px 0;
}

.philosophy__title {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.52px;
    color: var(--color-text);
    margin: 0 0 24px 0;
}

@media (max-width: 1023px) {
    .philosophy__title {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .philosophy__title {
        font-size: 32px;
        letter-spacing: 0.32px;
    }
}

.philosophy__text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
}

.philosophy__text p {
    margin: 0 0 0.75em 0;
}

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

@media (max-width: 767px) {
    .philosophy__text {
        font-size: 16px;
    }
}

/* Philosophy Image - Portrait 3:4 */
.philosophy__image {
    flex: 1;
    aspect-ratio: 600 / 800;
    min-height: 400px;
}

@media (min-width: 1024px) {
    .philosophy__image {
        aspect-ratio: 600 / 800;
        min-height: auto;
    }
}

.philosophy__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Desert landscape placeholder */
    background:
        linear-gradient(
            160deg,
            #b8c4cc 0%,
            #d4c4b0 20%,
            #dbb07a 40%,
            #c48a5a 60%,
            #7a5438 80%,
            #3a2a1e 100%
        );
}

/* --------------------------------------------------------------------------
   Process - Figma Layout/620 Style
   -------------------------------------------------------------------------- */
.process {
    background-color: transparent;
}

.process__header {
    max-width: 768px;
    margin-bottom: 80px;
}

@media (max-width: 767px) {
    .process__header {
        margin-bottom: 48px;
    }
}

.process__tagline {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin: 0 0 16px 0;
}

.process__title {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.52px;
    color: var(--color-text);
    margin: 0 0 24px 0;
}

@media (max-width: 1023px) {
    .process__title {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .process__title {
        font-size: 32px;
    }
}

.process__intro {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 767px) {
    .process__intro {
        font-size: 16px;
    }
}

/* Process List - 3 columns with dividers */
.process__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(10, 9, 8, 0.15);
}

@media (min-width: 768px) {
    .process__list {
        flex-direction: row;
    }
}

.process__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px;
    border-bottom: 1px solid rgba(10, 9, 8, 0.15);
    transition: background-color 0.3s ease;
}

/* Accent colors per item */
.process__item:nth-child(1) { --accent: #a09379; }
.process__item:nth-child(2) { --accent: #6b7d62; }
.process__item:nth-child(3) { --accent: #9e5a47; }

@media (min-width: 768px) {
    .process__item {
        padding: 32px;
        border-bottom: none;
        border-right: 1px solid rgba(10, 9, 8, 0.15);
    }

    .process__item:last-child {
        border-right: none;
    }
}

/* Hover state - background fills with accent color */
.process__item:hover {
    background-color: var(--accent);
}

.process__item:hover .process__number,
.process__item:hover .process__item-title,
.process__item:hover .process__item-text {
    color: #f5f2ed;
}

.process__number {
    font-family: 'PP Fraktion Mono', var(--font-mono), monospace;
    font-size: 104px;
    font-weight: 700;
    line-height: 0.8;
    color: var(--accent);
    transition: color 0.3s ease;
}

@media (max-width: 1023px) {
    .process__number {
        font-size: 80px;
    }
}

@media (max-width: 767px) {
    .process__number {
        font-size: 64px;
    }
}

.process__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.process__item-title {
    font-family: 'PP Fraktion Sans', var(--font-body), sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.36px;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
    transition: color 0.3s ease;
}

@media (max-width: 1023px) {
    .process__item-title {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .process__item-title {
        font-size: 24px;
    }
}

.process__item-text {
    font-family: 'PP Fraktion Sans', var(--font-body), sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
    transition: color 0.3s ease;
}

/* --------------------------------------------------------------------------
   Sustainability
   -------------------------------------------------------------------------- */
.sustainability {
    background-color: transparent;
}

.sustainability__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 768px;
    margin: 0 auto 80px;
    gap: 16px;
}

@media (max-width: 767px) {
    .sustainability__header {
        margin-bottom: 48px;
    }
}

.sustainability__tagline {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
}

.sustainability__title {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.52px;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 1023px) {
    .sustainability__title {
        font-size: 44px;
    }
}

@media (max-width: 767px) {
    .sustainability__title {
        font-size: 36px;
    }
}

.sustainability__intro {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin: 8px 0 0 0;
}

.sustainability__grid {
    display: grid;
    gap: 32px;
}

@media (min-width: 768px) {
    .sustainability__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sustainability__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sustainability__card {
    position: relative;
    height: 630px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

@media (max-width: 767px) {
    .sustainability__card {
        height: 500px;
    }
}

.sustainability__card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s var(--ease-out);
}

.sustainability__card:hover .sustainability__card-bg {
    transform: scale(1.05);
}

/* Background gradients (placeholders) */
.sustainability__card-bg--1 {
    background: linear-gradient(170deg, #7a9a8a 0%, #4a6a5a 40%, #3a5a4a 100%);
}

.sustainability__card-bg--2 {
    background: linear-gradient(170deg, #c4a870 0%, #9a7840 40%, #7a5830 100%);
}

.sustainability__card-bg--3 {
    background: linear-gradient(170deg, #b0a090 0%, #8a7a6a 40%, #6a5a4a 100%);
}

.sustainability__card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.sustainability__card-content {
    position: relative;
    z-index: 2;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: white;
}

.sustainability__card-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sustainability__card-tagline {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    color: white;
    margin: 0;
}

.sustainability__card-title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.36px;
    color: white;
    margin: 0;
}

@media (max-width: 767px) {
    .sustainability__card-title {
        font-size: 28px;
    }
}

.sustainability__card-bottom {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sustainability__card-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: white;
    margin: 0;
}

.sustainability__card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.sustainability__card-link:hover {
    opacity: 0.8;
}

.sustainability__card-link svg {
    width: 24px;
    height: 24px;
}

/* --------------------------------------------------------------------------
   Communities
   -------------------------------------------------------------------------- */
.communities {
    background-color: transparent;
}

.communities__header {
    max-width: var(--container-narrow);
    margin-bottom: var(--space-2xl);
}

.communities__title {
    margin-bottom: var(--space-md);
}

.communities__intro {
    font-size: var(--text-lg);
    color: var(--color-text-light);
}

.communities__grid {
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .communities__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.community {
    background-color: var(--color-bg);
    overflow: hidden;
    border: 2px solid transparent;
    transition:
        border-color 0.25s ease-out;
    cursor: pointer;
}

.community:hover {
    border-color: var(--color-black);
}

.community__image {
    aspect-ratio: 16/10;
    transition: transform 0.6s var(--ease-out);
}

.community:hover .community__image {
    transform: scale(1.05);
}

/* NM landscape gradients */
.community__image--sandia {
    background: linear-gradient(170deg, #9aa8b0 0%, #c49868 40%, #7a5a3a 100%);
}

.community__image--edgewood {
    background: linear-gradient(170deg, #b0b8c0 0%, #c4a880 40%, #8a6848 100%);
}

.community__image--paako {
    background: linear-gradient(170deg, #8a9a88 0%, #a8a070 40%, #5a6848 100%);
}

.community__content {
    padding: var(--space-md);
}

.community__name {
    font-size: var(--text-lg);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.community__elevation {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: var(--space-sm);
}

.community__description {
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.communities__cta {
    margin-top: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Portfolio
   -------------------------------------------------------------------------- */
.portfolio {
    background-color: transparent;
}

.portfolio__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 768px;
    margin: 0 auto 80px;
    gap: 16px;
}

@media (max-width: 767px) {
    .portfolio__header {
        margin-bottom: 48px;
    }
}

.portfolio__tagline {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
}

.portfolio__title {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.52px;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 1023px) {
    .portfolio__title {
        font-size: 44px;
    }
}

@media (max-width: 767px) {
    .portfolio__title {
        font-size: 36px;
    }
}

.portfolio__intro {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin: 8px 0 0 0;
}

.portfolio__grid {
    display: grid;
    gap: 32px;
}

@media (min-width: 768px) {
    .portfolio__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .portfolio__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.portfolio__item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 2px;
    transition: box-shadow var(--duration) var(--ease-out);
}

.portfolio__item:hover {
    box-shadow: var(--shadow-xl);
}

.portfolio__item:hover .portfolio__image {
    transform: scale(1.05);
}

.portfolio__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s var(--ease-out);
}

/* Warm stone/adobe tones (placeholders) */
.portfolio__image--1 {
    background: linear-gradient(135deg, #c4b8a8 0%, #a08878 50%, #6b5b4b 100%);
}

.portfolio__image--2 {
    background: linear-gradient(135deg, #d4c8b8 0%, #b09888 50%, #7b6b5b 100%);
}

.portfolio__image--3 {
    background: linear-gradient(135deg, #c8bcac 0%, #a89888 50%, #786858 100%);
}

.portfolio__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.portfolio__content {
    position: relative;
    z-index: 2;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: white;
}

@media (max-width: 767px) {
    .portfolio__content {
        padding: 32px;
    }
}

.portfolio__item-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.28px;
    color: white;
    margin: 0;
}

@media (max-width: 767px) {
    .portfolio__item-title {
        font-size: 24px;
    }
}

.portfolio__item-meta {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    color: white;
    margin: 0;
}

.portfolio__item-tags {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: white;
    margin: 0;
}

.portfolio__footer {
    display: flex;
    justify-content: center;
    margin-top: 64px;
}

@media (max-width: 767px) {
    .portfolio__footer {
        margin-top: 48px;
    }
}

/* --------------------------------------------------------------------------
   Founder
   -------------------------------------------------------------------------- */
.founder {
    background-color: transparent;
}

.founder__grid {
    display: grid;
    min-height: 720px;
}

@media (min-width: 1024px) {
    .founder__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.founder__image {
    min-height: 400px;
    background: linear-gradient(170deg, #8a7a6a 0%, #5a4a3a 100%);
    background-size: cover;
    background-position: center;
}

@media (min-width: 1024px) {
    .founder__image {
        min-height: 720px;
    }
}

.founder__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px;
}

@media (min-width: 1024px) {
    .founder__content {
        padding: 112px 64px 112px 80px;
    }
}

@media (max-width: 767px) {
    .founder__content {
        padding: 48px 24px;
    }
}

.founder__inner {
    max-width: 560px;
}

.founder__tagline {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0 0 16px 0;
}

.founder__title {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 24px 0;
}

@media (max-width: 1023px) {
    .founder__title {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .founder__title {
        font-size: 32px;
    }
}

.founder__text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: 24px;
}

.founder__text p {
    margin: 0 0 1em 0;
}

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

.founder__signature {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 24px;
}

.founder__name {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}

.founder__role {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cta {
    background-color: transparent;
    color: white;
    text-align: center;
}

.cta__content {
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.cta__title {
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.72px;
    color: white;
    margin: 0;
}

@media (max-width: 1023px) {
    .cta__title {
        font-size: 56px;
    }
}

@media (max-width: 767px) {
    .cta__title {
        font-size: 40px;
    }
}

.cta__text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: white;
    margin: -8px 0 0 0;
}

.cta__actions {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
    background-color: #0a0908;
    color: #ffffff;
    padding: 80px 0;
}

@media (max-width: 767px) {
    .footer {
        padding: 64px 0;
    }
}

.footer__card {
    background-color: #222120;
    border-radius: 0;
    padding: 48px;
}

@media (max-width: 767px) {
    .footer__card {
        padding: 32px 24px;
    }
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
}

@media (max-width: 1023px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 767px) {
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

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

.footer__logo {
    display: block;
    margin-bottom: 32px;
}

.footer__logo-img {
    height: 32px;
    width: auto;
}

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

.footer__info-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer__label {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.footer__value {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

.footer__link {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease-out;
}

.footer__link:hover {
    opacity: 0.7;
}

.footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__nav-list a {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    transition: opacity 0.2s ease-out;
}

.footer__nav-list a:hover {
    opacity: 0.7;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 48px;
}

@media (max-width: 767px) {
    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-top: 32px;
    }
}

.footer__copyright {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

.footer__legal-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.footer__legal-links a {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease-out;
}

.footer__legal-links a:hover {
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.5s var(--ease-out),
        transform 0.5s var(--ease-out);
}

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

/* Reveal delays use --delay-unit (0.1s) multiplied by index */
.reveal--delay-1 { transition-delay: calc(var(--delay-unit) * 1); }
.reveal--delay-2 { transition-delay: calc(var(--delay-unit) * 2); }
.reveal--delay-3 { transition-delay: calc(var(--delay-unit) * 3); }
.reveal--delay-4 { transition-delay: calc(var(--delay-unit) * 4); }
.reveal--delay-5 { transition-delay: calc(var(--delay-unit) * 5); }
.reveal--delay-6 { transition-delay: calc(var(--delay-unit) * 6); }

/* Stagger children use --stagger-unit (0.05s) multiplied by index */
.stagger-children > *:nth-child(1) { transition-delay: calc(var(--stagger-unit) * 1); }
.stagger-children > *:nth-child(2) { transition-delay: calc(var(--stagger-unit) * 2); }
.stagger-children > *:nth-child(3) { transition-delay: calc(var(--stagger-unit) * 3); }
.stagger-children > *:nth-child(4) { transition-delay: calc(var(--stagger-unit) * 4); }
.stagger-children > *:nth-child(5) { transition-delay: calc(var(--stagger-unit) * 5); }
.stagger-children > *:nth-child(6) { transition-delay: calc(var(--stagger-unit) * 6); }

/* --------------------------------------------------------------------------
   Journal / Perspectives
   -------------------------------------------------------------------------- */
.journal {
    background-color: transparent;
}

.journal__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 768px;
    gap: 16px;
    margin-bottom: 64px;
}

@media (max-width: 767px) {
    .journal__header {
        margin-bottom: 48px;
    }
}

.journal__tagline {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
}

.journal__title {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.52px;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 1023px) {
    .journal__title {
        font-size: 44px;
    }
}

@media (max-width: 767px) {
    .journal__title {
        font-size: 36px;
    }
}

.journal__intro {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin: 8px 0 0 0;
}

.journal__grid {
    display: grid;
    gap: 48px;
}

@media (min-width: 768px) {
    .journal__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.journal-card {
    background-color: var(--scheme-3-fg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    transition: box-shadow var(--duration) var(--ease-out);
}

.journal-card:hover {
    box-shadow: var(--shadow-lg);
}

.journal-card__image {
    aspect-ratio: 616 / 346.5;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s var(--ease-out);
}

.journal-card:hover .journal-card__image {
    transform: scale(1.03);
}

/* Journal card image gradients (placeholders) */
.journal-card__image--1 {
    background: linear-gradient(170deg, #9aa8b0 0%, #c49868 40%, #7a5a3a 100%);
}

.journal-card__image--2 {
    background: linear-gradient(170deg, #8a9a88 0%, #a8a070 40%, #5a6848 100%);
}

.journal-card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.journal-card__tag {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
}

.journal-card__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.28px;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 767px) {
    .journal-card__title {
        font-size: 24px;
    }
}

.journal-card__excerpt {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

.journal-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.journal-card__link:hover {
    opacity: 0.7;
}

.journal-card__link svg {
    width: 24px;
    height: 24px;
}

.journal__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 64px;
}

@media (max-width: 767px) {
    .journal__footer {
        margin-top: 48px;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
    background-color: transparent;
}

.faq__layout {
    display: grid;
    gap: 48px;
}

@media (min-width: 1024px) {
    .faq__layout {
        grid-template-columns: 500px 1fr;
        gap: 80px;
        align-items: flex-start;
    }
}

.faq__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 1024px) {
    .faq__intro {
        position: sticky;
        top: 120px;
        gap: 32px;
    }
}

.faq__title {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.52px;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 1023px) {
    .faq__title {
        font-size: 44px;
    }
}

@media (max-width: 767px) {
    .faq__title {
        font-size: 36px;
    }
}

.faq__subtitle {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

.faq__cta {
    margin-top: 8px;
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq__item {
    background-color: #f9f7f4;
}

.faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
    color: var(--color-text);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.faq__question:hover {
    opacity: 0.8;
}

.faq__question span {
    flex: 1;
}

.faq__toggle-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-text);
    transition: transform 0.3s ease;
}

.faq__item[data-open="false"] .faq__toggle-icon {
    transform: rotate(45deg);
}

.faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq__answer p {
    padding: 0 24px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

.faq__item[data-open="true"] .faq__answer {
    max-height: 500px;
}

/* --------------------------------------------------------------------------
   Footer Social
   -------------------------------------------------------------------------- */
.footer__social {
    display: flex;
    gap: 16px;
    margin-top: auto;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: opacity 0.2s ease-out;
}

.footer__social-link:hover {
    opacity: 0.7;
}

.footer__social-link svg {
    width: 24px;
    height: 24px;
}

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

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
    .nav, .hero__scroll, .btn { display: none; }
    body { color: black; background: white; }
    section { page-break-inside: avoid; }
}