/* Reynolds Groundworks & Landscapes — Custom Styles */

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #FAFAF7; }
::-webkit-scrollbar-thumb { background: #6B7C4A; border-radius: 3px; }

/* ── Hero background grain texture ──────────────────────────────── */
.hero-bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── Sticky nav on scroll ────────────────────────────────────────── */
#site-header { background: transparent; }
#site-header.scrolled {
    background-color: #1C2B40;
    box-shadow: 0 1px 30px rgba(0,0,0,0.4);
}

/* ── Hero fade-in animations ─────────────────────────────────────── */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.fade-in-up.delay-100 { animation-delay: 0.15s; }
.fade-in-up.delay-200 { animation-delay: 0.3s; }
.fade-in-up.delay-300 { animation-delay: 0.48s; }

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

/* ── Scroll reveal ───────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Service card lift on hover ──────────────────────────────────── */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover { transform: translateY(-5px); }

/* ── Scroll indicator fade-out ───────────────────────────────────── */
.scroll-indicator { animation: siHide 1s ease 3.5s forwards; }
@keyframes siHide { to { opacity: 0; pointer-events: none; } }

/* ── Inner page hero ─────────────────────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, #1C2B40 0%, #1e3a28 55%, #1C2B40 100%);
}

/* ── Form inputs ─────────────────────────────────────────────────── */
.form-input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: #2D2D2A;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    font-family: 'Inter', system-ui, sans-serif;
    appearance: none;
}
.form-input:focus {
    border-color: #6B7C4A;
    box-shadow: 0 0 0 3px rgba(107, 124, 74, 0.12);
}
.form-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #2D2D2A;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

/* ── Testimonial carousel ────────────────────────────────────────── */
#testimonial-slides { display: flex; }
.testimonial-slide { flex: 0 0 100%; }

/* ── Calendly placeholder ────────────────────────────────────────── */
.calendly-placeholder {
    background: linear-gradient(135deg, #f0ede8, #e8e4de);
    border: 2px dashed #c4a882;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #6B7C4A;
    text-align: center;
    padding: 2rem;
}

/* ── Image placeholder blocks ────────────────────────────────────── */
.img-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.3);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 2rem;
}

/* ── Tag pills ───────────────────────────────────────────────────── */
.tag-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(107,124,74,0.1);
    color: #6B7C4A;
}

/* ── Section divider line ────────────────────────────────────────── */
.section-divider {
    width: 40px;
    height: 2px;
    background: #6B7C4A;
    margin: 1rem auto 0;
}

/* ── Print / no-JS safety ────────────────────────────────────────── */
@media print {
    #site-header, .scroll-indicator { display: none; }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Lightbox ────────────────────────────────────────────────────── */
img[data-lightbox] { cursor: zoom-in; }

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(28, 43, 64, 0.92);
    padding: 2rem;
}
.lightbox-overlay.open { display: flex; }

.lightbox-overlay figure {
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}
.lightbox-overlay figure img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 10px 60px rgba(0,0,0,0.5);
}
.lightbox-overlay figcaption {
    color: rgba(255,255,255,0.65);
    font-size: 0.8rem;
    text-align: center;
    max-width: 70ch;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: fixed;
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 9999px;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    user-select: none;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.2); color: #fff; }

.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-prev  { left: 1.25rem;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }