:root {
    --gold: #D4A94A;       /* crown gold */
    --gold-deep: #9A6B14;  /* darker gold, readable on white */
    --gold-light: #EACE61;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Roboto', sans-serif;
    background: #000;
    color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 5%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: background 0.4s ease;
}

/* Two versions of the logo: white "R" for the dark header, black "R" for the
   white header. They sit on top of each other and cross-fade. */
.logo {
    display: block;
    position: relative;
    line-height: 0;
}

.logo img {
    height: 52px;
    width: auto;
    display: block;
    transition: opacity 0.4s ease;
}

.logo .logo-on-light {
    position: absolute;
    inset: 0;
    opacity: 0;
}

header.light .logo .logo-on-dark { opacity: 0; }
header.light .logo .logo-on-light { opacity: 1; }

nav ul {
    margin-left: 150px;
    display: flex;
    gap: 2rem;
    list-style: none;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s;
}

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

input[type="search"] {
    padding: 0.8rem;
    border: none;
    border-radius: 4px;
    background: #222;
    color: #fff;
}

/* Updated Hero (Inspired Layout – Dark Theme) */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 5% 3rem;
    background: #000; /* Keep dark */
}

.main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
}

.img-term {
    flex: 1;
    text-align: center;
}

.men {
    max-width: 100%;
    height: auto;
    border-radius: 20%; /* Circular photo for modern feel */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Blue glow */
}

.main-detail {
    flex: 1;
    padding-left: 4rem;
}

.main-detail p {
    font-size: 1.5rem;
    color: #ccc;
}

.main-detail h1 {
    font-size: 4rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.typewriter {
    font-size: 2rem;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.typewriter-text {
    color: var(--gold); /* Blue accent */
}

.cursor {
    display: inline-block;
    width: 0.1em;
    height: 1.5em;
    background: #fff;
    margin-left: 0.2rem;
    animation: blink 0.75s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.btn {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-1, .btn-2 {
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.btn-1 {
    background: var(--gold);
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

.btn-1:hover {
    background: var(--gold-light);
    transform: scale(1.05);
}

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

.btn-2:hover {
    background: var(--gold);
    color: #000;
    transform: scale(1.05);
}


/* Rest of Site (Unchanged) */
.section {
    padding: 8rem 5%;
    text-align: center;
}

/* About is currently just a title + one line, which — once you scroll to
   it — barely occupies any of the screen before Projects is already
   visible underneath, making it feel like the link "skipped" to Projects.
   Giving it real height makes it read as its own destination. Remove
   this once About has more actual content. */
#about {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#about p {
    max-width: 700px;
    margin: 0 auto 1.5rem;
    line-height: 1.85;
    color: #ccc;
    font-size: 1.05rem;
}

#about .about-intro {
    font-size: 1.5rem;
    font-style: italic;
    color: #fff;
    margin-bottom: 2.2rem;
}

#about .about-tagline {
    margin-top: 2rem;
    margin-bottom: 0;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    font-size: 1.1rem;
    animation: tagline-glow 3s ease-in-out infinite;
}

@keyframes tagline-glow {
    0%, 100% { text-shadow: 0 0 6px rgba(212, 169, 74, 0.25); }
    50% { text-shadow: 0 0 18px rgba(212, 169, 74, 0.75); }
}

@media (max-width: 768px) {
    #about .about-intro {
        font-size: 1.25rem;
    }
    #about p {
        font-size: 1rem;
    }
}

/* Same issue as About: with no projects added yet, this section is just
   a title + placeholder text — short enough that Contact (the next
   section) can already be peeking into view on a phone screen while
   you're still looking at Projects, which confuses the scroll
   highlighting. This floor keeps it from happening. */
#projects {
    min-height: 60vh;
}

/* ===== Projects carousel (homepage teaser) =====
   Same mechanics as the brand-carousel reference: two back-to-back
   copies of the track scroll left forever, snapping back to 0 exactly
   when the seam is invisible. Each slide is a fixed-size box so any
   source image — whatever its original size — looks uniform via
   object-fit: cover. */
.projects-slider {
    overflow: hidden;
    width: 100%;
    margin-top: 3rem;
    min-height: 200px;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.projects-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 1.8rem;
    animation: projects-scroll linear infinite;
    animation-duration: 40s; /* fallback; render-carousel.js sets the real value */
    will-change: transform;
}

.projects-slider:hover .projects-track {
    animation-play-state: paused;
}

@keyframes projects-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--scroll-distance, -50%)); }
}

.project-slide {
    position: relative;
    flex: 0 0 200px;
    width: 200px;
    height: 320px;
    overflow: hidden;
    border-radius: 10px;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #111;
}

.project-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.08);
    transition: transform 0.5s ease;
}

.project-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    transition: background 0.5s ease;
}

.project-slide:hover::after {
    background: rgba(0, 0, 0, 0.12);
}

.project-slide:hover img {
    transform: scale(1);
}

.slide-placeholder {
    width: 100%;
    height: 100%;
    background: #181818;
}

.slide-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.slide-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 1.1rem 1.2rem 0.9rem;
    color: #fff;
    font-weight: bold;
    font-size: 1.05rem;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

.projects-status {
    color: #ccc;
    font-size: 1.05rem;
}

.view-all-btn {
    display: inline-block;
    margin-top: 2.5rem;
    text-decoration: none;
    text-align: center;
}

@media (max-width: 480px) {
    .project-slide {
        flex: 0 0 140px;
        width: 140px;
        height: 220px;
    }
    .slide-label {
        font-size: 0.9rem;
        padding: 0.8rem 0.9rem 0.6rem;
    }
    .projects-slider {
        min-height: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-track {
        animation: none;
    }
    #about .about-tagline {
        animation: none;
    }
}

.section-title {
    font-size: 3rem;
    margin-bottom: 4rem;
    grid-column: 1 / -1; /* only has an effect inside a grid (e.g. the Projects listing) — spans the full row so the title never gets squeezed into one column */
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.card {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.4s;
}

.card:hover {
    box-shadow: 0 0 30px rgba(212, 169, 74, 0.4);
}

.card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.card-content {
    padding: 2rem;
    text-align: left;
}

.card-content h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.tag {
    display: inline-block;
    background: rgba(212, 169, 74, 0.12);
    border: 1px solid rgba(212, 169, 74, 0.55);
    color: var(--gold);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 0.5rem;
    margin-top: 1rem;
}

/* Footer (Unchanged) */
footer {
    text-align: center;
    padding: 4rem 5% 2rem;
    background: var(--gold);
    color: #000;
    font-size: 0.9rem;
}

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

.social-links a {
    color: #000;
    font-size: 2.2rem;
    margin: 0 1.5rem;
    transition: all 0.3s ease;
    opacity: 0.85;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.social-links a:hover {
    color: #fff;
    opacity: 1;
    text-decoration: none;
}

/* Responsive */

/* Hamburger button — hidden on desktop, shown once nav can't fit */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    header {
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: flex;
    }

    input[type="search"] {
        display: none;
    }

    /* Nav becomes a dropdown panel anchored to the (already fixed) header */
    header nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.97);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    header nav.open {
        max-height: 400px;
    }

    header nav ul {
        flex-direction: column;
        gap: 0;
        margin-left: 0;
        padding: 0.5rem 5% 1.5rem;
    }

    header nav ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    header nav ul li a {
        display: block;
        padding: 0.9rem 0;
    }

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

    .img-term {
        max-width: 260px;
        margin: 0 auto;
    }

    .main-detail {
        padding-left: 0;
        padding-top: 2rem;
    }

    .main-detail h1 {
        font-size: 2.6rem;
    }

    .main-detail p {
        font-size: 1.2rem;
    }

    .typewriter {
        font-size: 1.4rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn {
        justify-content: center;
    }

    .btn-1, .btn-2 {
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
    }

    .section {
        padding: 5rem 6% 4rem;
    }

    .section-title {
        font-size: 2.2rem;
        margin-bottom: 2.5rem;
    }

    .project-detail,
    .admin-wrap {
        padding-top: 7rem;
        padding-left: 6%;
        padding-right: 6%;
    }

    .project-detail h1 {
        font-size: 2rem;
    }

    .project-media {
        margin-top: 1.8rem;
    }

    .thumb-row {
        gap: 0.6rem;
    }

    .video-player .play-overlay svg {
        width: 3.5rem;
        height: 3.5rem;
        padding: 1rem;
    }

    .detail-grid {
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .social-links a { font-size: 1.8rem; margin: 0 1rem; }
}

@media (max-width: 420px) {
    .card-content { padding: 1.4rem; }
    .card-content h3 { font-size: 1.4rem; }
    .thumb-row img { width: 80px; height: 52px; }
    .admin-panel { padding: 1.3rem; }

    .project-detail h1 {
        font-size: 1.6rem;
        margin-top: 1rem;
    }

    .project-detail .back-link {
        font-size: 0.85rem;
    }

    .project-detail .project-type {
        font-size: 0.75rem;
    }

    .detail-grid h2 {
        font-size: 0.75rem;
    }

    .detail-grid p {
        font-size: 0.9rem;
    }
}

.static-text {
    white-space: nowrap;
}

.actions-row {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

nav a.active {
    color: var(--gold) !important; /* Bright orange */
    font-weight: 700;
    position: relative;
}

nav a.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
}

/* Projects grid: cards are now <a> tags rendered from Firebase */
.card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.projects-status {
    grid-column: 1 / -1;
    color: #ccc;
    font-size: 1.1rem;
}

.card-video-thumb {
    position: relative;
}

.card-video-thumb img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-badge svg {
    background: var(--gold);
    color: #000;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    padding: 0.9rem;
    box-sizing: border-box;
}

.card-placeholder {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    background: #1a1a1a;
    font-size: 0.9rem;
}

/* Project detail page (project.html) */
.project-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: 10rem 5% 6rem;
}

.project-detail .back-link {
    color: var(--gold);
    text-decoration: none;
    font-size: 0.95rem;
}

.project-detail .back-link:hover { text-decoration: underline; }

.project-detail h1 {
    font-size: 2.8rem;
    margin: 1.5rem 0 0.5rem;
}

.project-detail .project-type {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}

.project-media {
    margin-top: 2.5rem;
}

.project-media .main-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    background: #111;
    display: block;
}

.thumb-row {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.8rem;
    overflow-x: auto;
}

.thumb-row img {
    width: 100px;
    height: 65px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.thumb-row img.active {
    opacity: 1;
    border-color: var(--gold);
}

.video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
}

.video-player img,
.video-player iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    display: block;
}

.video-player .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    border: none;
    padding: 0;
}

.video-player .play-overlay svg {
    background: var(--gold);
    color: #000;
    border-radius: 50%;
    width: 4.5rem;
    height: 4.5rem;
    padding: 1.3rem;
    box-sizing: border-box;
}

.watch-link {
    display: inline-block;
    margin-top: 0.6rem;
    color: var(--gold);
    font-size: 0.85rem;
    text-decoration: none;
}

.watch-link:hover { text-decoration: underline; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.detail-grid h2 {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
}

.detail-grid p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Admin (admin.html) */
.admin-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 10rem 5% 6rem;
}

.admin-login {
    max-width: 380px;
    margin: 4rem auto 0;
}

.admin-wrap input,
.admin-wrap textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
}

.admin-wrap textarea { min-height: 90px; resize: vertical; }

.admin-wrap input:focus,
.admin-wrap textarea:focus {
    outline: none;
    border-color: var(--gold);
}

.admin-wrap label {
    display: block;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
}

.field { margin-bottom: 1.2rem; }

.admin-error {
    color: #ff6b6b;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.admin-notice {
    color: var(--gold);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(212, 169, 74, 0.4);
    padding: 0.8rem 1rem;
    border-radius: 6px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.admin-panel {
    background: #111;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.admin-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #222;
}

.admin-list-row img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.admin-list-row .row-info { display: flex; align-items: center; gap: 1rem; }
.admin-list-row .row-actions { display: flex; gap: 1rem; font-size: 0.9rem; }
.admin-list-row .row-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
}
.admin-list-row .edit-btn { color: var(--gold); }
.admin-list-row .delete-btn { color: #ff6b6b; }

.existing-images { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }
.existing-images .thumb-wrap { position: relative; }
.existing-images img { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; }
.existing-images .remove-thumb {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}
/* ===== Project detail — expanded layout ===== */
.project-detail { max-width: 1000px; }

.project-hero { margin-top: 1.5rem; }
.project-hero h1 { margin: 0.5rem 0 1rem; }
.project-summary {
    color: #ccc;
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 720px;
}
.project-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.project-actions a { text-decoration: none; }

.fact-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
    padding: 1.4rem 1.6rem;
    background: #111;
    border-radius: 12px;
    border: 1px solid #222;
}
.fact-bar dt {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    margin-bottom: 0.3rem;
}
.fact-bar dd { color: #fff; font-size: 0.95rem; margin: 0; }

.detail-section { margin-top: 3rem; }
.detail-section h2 {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.detail-section p { color: #ccc; line-height: 1.8; font-size: 1rem; margin-bottom: 1rem; max-width: 760px; }

.feature-list { list-style: none; padding: 0; display: grid; gap: 0.8rem; max-width: 760px; }
.feature-list li { display: flex; gap: 0.8rem; color: #ddd; line-height: 1.6; }
.feature-list i { color: var(--gold); margin-top: 0.3rem; font-size: 0.85rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pn-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 4rem;
    border-top: 1px solid #222;
    padding-top: 2rem;
}
.pn-nav a {
    color: #fff;
    text-decoration: none;
    padding: 1rem 1.2rem;
    border: 1px solid #222;
    border-radius: 10px;
    transition: border-color 0.3s;
}
.pn-nav a:hover { border-color: var(--gold); }
.pn-nav a span { display: block; color: var(--gold); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.pn-nav a.next { text-align: right; }

.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.more-card { display: block; text-decoration: none; color: inherit; background: #111; border-radius: 10px; overflow: hidden; transition: transform 0.3s; }
.more-card:hover { transform: translateY(-4px); }
.more-card img, .more-placeholder { width: 100%; height: 150px; object-fit: cover; display: block; background: #181818; }
.more-card div:last-child { padding: 1rem 1.2rem; }
.more-card h3 { font-size: 1.05rem; color: #fff; }
.more-card p { color: #888; font-size: 0.8rem; margin: 0.2rem 0 0; }

@media (max-width: 600px) {
    .pn-nav { grid-template-columns: 1fr; }
    .pn-nav a.next { text-align: left; }
    .project-summary { font-size: 1.02rem; }
}


/* ===== Header + sections that follow the page colours =====
   Home & Projects are black; About & Contact are white (like the R in the
   logo). scripts.js sets header.light while a white section is under it. */
#about, #contact { background: #fff; color: #111; }
#about p { color: #333; }
#about .about-intro { color: #000; }
#about .about-tagline { color: var(--gold-deep); animation: none; }
#contact p { color: #333; }
#contact a { color: var(--gold-deep) !important; font-weight: 700; }
#about .section-title, #contact .section-title { color: #000; }

header.light { background: rgba(255, 255, 255, 0.92); }
header.light nav a { color: #111; }
header.light nav a:hover { color: var(--gold-deep); }
header.light nav a.active { color: var(--gold-deep) !important; }
header.light nav a.active::after { background: var(--gold-deep); }
header.light .nav-toggle span { background: #111; }
header.light input[type="search"] { background: #eee; color: #111; }

@media (max-width: 768px) {
    header.light nav { background: rgba(255, 255, 255, 0.98); }
    header.light nav ul li { border-bottom-color: rgba(0, 0, 0, 0.08); }
}

/* Give Contact enough height that scrolling to it lands it at the top of
   the screen (so the white header matches the white section). */
#contact {
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}