@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
    --primary-text: #2b2927;
    --secondary-text: #59544c;
    --bg-color: #f7f5f0;
    --accent-color: #8b7d6b;
    /* Muted taupe/earth tone */
    --pine-green: #3e4a3d;
    /* Muted forest green */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Cormorant Garamond', serif;
    --font-script: 'Cormorant Garamond', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--primary-text);
    background-color: var(--bg-color);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.script-text {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 4.5rem;
    color: white;
    text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
    display: inline-block;
    min-height: 5.5rem;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 1s ease;
}

.script-text.visible {
    opacity: 1;
}

.script-text em {
    font-style: italic;
}

.script-dark {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 3.5rem;
    color: var(--primary-text);
}

/* Navigation */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 2.5rem 5%;
    box-sizing: border-box;
    z-index: 1000;
    /* Frosted-glass bar before scroll so the nav stays readable over photos */
    background-color: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.main-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 2rem;
    width: 100%;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
}

.nav-left {
    justify-content: flex-start;
}

.nav-right {
    justify-content: flex-end;
}

header.scrolled {
    background-color: rgba(253, 253, 252, 0.95);
    padding: 1.5rem 5%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

header.scrolled nav ul li a,
header.scrolled .logo {
    color: var(--primary-text);
}

.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    grid-column: 2;
    justify-self: center;
    line-height: 1.15;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 400;
    color: white;
    text-decoration: none;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: text-shadow 0.3s ease;
}

.logo-reveal {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.5px;
    margin-top: 0.15rem;
    opacity: 0;
    animation: reveal-logo-text 1.2s ease forwards;
    animation-delay: 1s;
}

@keyframes reveal-logo-text {
    to {
        opacity: 1;
    }
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

/* Glow on hover (nav links + center logo): bright white glow over the hero, warm accent glow once the header is light */
nav ul li a:hover,
nav ul li a:focus-visible,
.logo:hover,
.logo:focus-visible {
    text-shadow: 0 0 4px #ffffff, 0 0 10px #ffffff, 0 0 20px rgba(255, 255, 255, 0.9), 0 0 36px rgba(255, 255, 255, 0.7), 0 0 60px rgba(255, 255, 255, 0.5);
}

header.scrolled nav ul li a:hover,
header.scrolled nav ul li a:focus-visible,
header.scrolled .logo:hover,
header.scrolled .logo:focus-visible {
    text-shadow: 0 0 4px rgba(139, 125, 107, 1), 0 0 10px rgba(139, 125, 107, 0.95), 0 0 20px rgba(139, 125, 107, 0.8), 0 0 36px rgba(139, 125, 107, 0.6), 0 0 60px rgba(139, 125, 107, 0.4);
}

/* Current-page indicator: the shared header partial (partials/header.html) sets
   data-active="<page>" per file via build-header.js; this maps it to the matching link. */
header[data-active="about"] .nav-left a[href="about.html"],
header[data-active="portfolio"] .nav-left a[href="portfolio.html"],
header[data-active="investment"] .nav-right a[href="investment.html"],
header[data-active="faq"] .nav-right a[href="faq.html"] {
    border-bottom: 1px solid currentColor;
}

nav ul li a.nav-contact-btn {
    background-color: var(--pine-green);
    color: white !important;
    padding: 0.5rem 1.2rem;
    border-radius: 4px;
    border: 1px solid var(--pine-green);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;
}

nav ul li a.nav-contact-btn:hover,
nav ul li a.nav-contact-btn:focus-visible {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    opacity: 1;
    box-shadow: 0 0 10px rgba(139, 125, 107, 1), 0 0 22px rgba(139, 125, 107, 0.85), 0 0 40px rgba(139, 125, 107, 0.6), 0 0 64px rgba(139, 125, 107, 0.4);
}

/* Hero Section */
.hero {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(to bottom, rgba(247, 245, 240, 0) 0%, var(--bg-color) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

/* Dynamic Text Section */
/* One background photo behind both the rotating text and the three cards.
   Anchored to the bottom so the field and trail sit under the cards and the
   lighter sky sits behind the text. */
.landscape-section {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);
}

/* The photo layer is a little taller than the section so script.js can drift
   it up and down slightly as the page scrolls (a gentle parallax) */
.landscape-bg {
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 116%;
    background: url('assets/landscape_field_path.jpg') center bottom / cover no-repeat;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* Cream fades blend the photo into the hero above and the section below */
.landscape-section::before,
.landscape-section::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 1;
    pointer-events: none;
}

.landscape-section::before {
    top: 0;
    background: linear-gradient(to bottom, var(--bg-color) 0%, rgba(247, 245, 240, 0) 100%);
}

.landscape-section::after {
    bottom: 0;
    background: linear-gradient(to bottom, rgba(247, 245, 240, 0) 0%, var(--bg-color) 100%);
}

.dynamic-text-section {
    padding: 8rem 5%;
    text-align: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.dynamic-text-section h2 {
    position: relative;
    z-index: 2;
    font-size: 2.5rem;
    font-weight: 300;
}

.floating-photos {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.floating-photo {
    position: absolute;
    width: 220px;
    height: 280px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 1s ease;
}

.floating-photo.show {
    opacity: 1;
}

@media (max-width: 700px) {
    .floating-photo {
        width: 72px;
        height: 90px;
    }
}

.word-carousel {
    display: inline-block;
    position: relative;
    width: 250px;
    height: 3rem;
    vertical-align: bottom;
}

.word-carousel span {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
    font-size: 3rem;
    color: var(--accent-color);
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.word-carousel span.active {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax Section & Staggered Cards */
.parallax-section {
    position: relative;
    min-height: 160vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 5% 10rem;
    gap: 4rem;
    z-index: 2;
    overflow: hidden;
}

.parallax-content {
    background: rgba(253, 253, 252, 0.93);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 3rem;
    width: 100%;
    max-width: 550px;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(139, 125, 107, 0.25);
    z-index: 2;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

.parallax-content:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    border-color: var(--accent-color);
}

#parallax-box-process {
    align-self: flex-end;
    margin-right: 5%;
}

#parallax-box-2 {
    align-self: flex-start;
    margin-left: 5%;
}

#parallax-box-3 {
    align-self: flex-end;
    margin-right: 5%;
}

.parallax-card-title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: var(--primary-text);
    font-family: var(--font-heading);
}

.parallax-card-teaser {
    color: var(--secondary-text);
    line-height: 1.7;
    font-size: 1rem;
}

.parallax-card-teaser + .parallax-card-teaser {
    margin-top: 1rem;
}

.parallax-expanded-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.4s ease, padding-top 0.4s ease;
    margin-top: 0;
    border-top: 1px solid transparent;
    padding-top: 0;
}

.parallax-content.expanded .parallax-expanded-details {
    max-height: 600px;
    opacity: 1;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(139, 125, 107, 0.25);
    padding-top: 1.5rem;
}

/* The Process and Experience cards have longer copy than the others, so they need more room when expanded */
#parallax-box-process.expanded .parallax-expanded-details,
#parallax-box-2.expanded .parallax-expanded-details {
    max-height: 1600px;
}

.process-step,
.experience-pillar {
    margin-bottom: 1.2rem;
    text-align: left;
}

.process-step:last-child,
.experience-pillar:last-child {
    margin-bottom: 0;
}

.process-step h4,
.experience-pillar h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--accent-color);
    margin-bottom: 0.3rem;
    letter-spacing: 1px;
}

.process-step p,
.experience-pillar p {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.6;
}

.trait-checklist {
    list-style: none;
    text-align: left;
}

.trait-checklist li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.6;
}

.trait-checklist li:last-child {
    margin-bottom: 0;
}

.trait-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-family: var(--font-heading);
    font-weight: 600;
}

.parallax-card-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(139, 125, 107, 0.3);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    color: var(--accent-color);
    transition: color 0.3s ease;
}

.parallax-content:hover .parallax-card-btn {
    color: var(--primary-text);
}

.expand-icon {
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.parallax-content.expanded .expand-icon {
    transform: rotate(45deg);
}

@media (max-width: 900px) {

    #parallax-box-process,
    #parallax-box-2,
    #parallax-box-3 {
        align-self: center;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
}

/* Clever CTA */
.clever-cta {
    padding: 6rem 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background-color: var(--bg-color);
    position: relative;
}

.cta-text {
    text-align: right;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.cta-text.in-view {
    opacity: 1;
    transform: translateY(0);
}

.cta-text .script-dark {
    display: block;
    margin-bottom: -10px;
}

.cta-text .cta-subtext {
    max-width: 340px;
    margin: 1rem 0 0 auto;
    font-size: 1.05rem;
    line-height: 1.6;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: var(--primary-text);
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: var(--accent-color);
}

.cta-image {
    width: 300px;
    height: 400px;
    object-fit: cover;
    border-radius: 4px;
}

/* Testimonial Section & Slider */
.testimonial-section {
    padding: 7rem 5%;
    background-color: var(--bg-color);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* All slides share one grid cell, so the slider is always as tall as the
   longest quote and the page doesn't jump as slides rotate */
.testimonial-slider {
    display: grid;
    align-items: center;
}

.testimonial-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.testimonial-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.testimonial-quote {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
}

.testimonial-author {
    margin-top: 2rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-text);
    font-size: 0.95rem;
}

.testimonial-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2.5rem;
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

/* Bare chevrons, no circle or fill */
.testimonial-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0.25rem;
    color: var(--primary-text);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.testimonial-arrow svg {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.testimonial-arrow:hover,
.testimonial-arrow:focus-visible {
    color: var(--accent-color);
}

.testimonial-prev:hover {
    transform: translateX(-3px);
}

.testimonial-next:hover {
    transform: translateX(3px);
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--accent-color);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

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

/* FAQ Section */
.faq-section {
    padding: 8rem 5%;
    background-color: var(--bg-color);
    position: relative;
    overflow: hidden;
}

.faq-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.02);
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
}

.faq-container {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    display: none;
    text-align: center;
}

.faq-item.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

.faq-item h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-script);
    font-weight: 400;
    color: var(--accent-color);
}

.faq-item p {
    font-size: 1.1rem;
    color: var(--secondary-text);
    margin-bottom: 2rem;
}

.next-btn {
    background: transparent;
    border: 1px solid var(--primary-text);
    padding: 0.8rem 2rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.next-btn:hover {
    background: var(--primary-text);
    color: #fff;
}

/* Footer */
footer {
    /* Positioned above the fixed full-screen backgrounds on FAQ/Contact,
       which would otherwise paint over the footer */
    position: relative;
    z-index: 2;
    padding: 4rem 5%;
    text-align: center;
    background-color: var(--bg-color);
}

.social-links {
    margin-bottom: 2rem;
}

footer p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

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

.social-links a {
    color: var(--primary-text);
    text-decoration: none;
    margin: 0 1rem;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .script-text {
        font-size: 3rem;
    }

    .clever-cta {
        flex-direction: column;
        text-align: center;
    }

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

    .cta-text .cta-subtext {
        margin: 1rem auto 0;
    }

    header {
        padding: 1.25rem 5%;
    }

    .main-nav {
        grid-template-columns: 1fr;
        row-gap: 0.85rem;
    }

    .logo {
        grid-column: 1;
        font-size: 1.3rem;
    }

    .nav-left,
    .nav-right {
        justify-content: center;
    }

    nav ul {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* Image protection (deterrent only: anything shown on screen can still be
   screenshotted). Images ignore the pointer, so right-click, drag and
   long-press land on the surrounding card instead of the photo itself. */
img {
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* The lightbox closes when you click outside the photo, so its image has to
   keep receiving clicks; script.js blocks its right-click menu instead. */
#lightbox-img {
    pointer-events: auto;
}

/* Photos drawn as CSS backgrounds (album covers, fan cards, page backgrounds) */
.album-cover,
.fan-card,
.faq-bg-img,
.contact-bg-img,
.landscape-section,
.hero {
    -webkit-touch-callout: none;
}

.footer-image-notice {
    font-size: 0.8rem;
    color: var(--secondary-text);
    margin-bottom: 0.5rem;
}

/* Footer copy inside an opened portfolio album (added by script.js);
   hidden while a single photo is expanded in the lightbox */
.album-view .album-footer {
    background-color: transparent;
    border-top: 1px solid rgba(139, 125, 107, 0.25);
}
.album-view.lightbox-open .album-footer {
    visibility: hidden;
}