/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --header-height: 64px; /* adjust if you want a different fixed header height */
}

/* Use locally-hosted Inter first (InterLocal). If fonts/Inter-*.ttf are missing, fall back to system fonts */
body {
    font-family: 'InterLocal', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

/* Local Inter font-face definitions (fonts downloaded into /fonts/) */
@font-face {
        font-family: 'InterLocal';
        src: url('fonts/Inter-1.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
}

@font-face {
        font-family: 'InterLocal';
        src: url('fonts/Inter-2.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
}

html {
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--header-height);
    background: #000; /* black top bar */
    color: #fff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
    z-index: 1000;
    transition: all 0.2s ease;
    padding: 0; /* reduce extra spacing from header wrapper */
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 1.5rem; /* tighter to match screenshot */
    max-width: 1200px;
    margin: 0 auto;
}

.nav-brand h1 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

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

.nav-link {
    text-decoration: none;
    color: #fff; /* white links on black bar */
    font-weight: 600;
    transition: color 0.18s ease;
    position: relative;
    letter-spacing: 0.06em;
    font-size: 0.9rem;
    padding: 10px 0; /* slightly taller clickable area */
}

.nav-link:hover {
    color: #9be6b5; /* light green on hover */
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -8px;
    left: 0;
    background: transparent;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.nav-link:hover::after {
    width: 100%;
    background: rgba(155,230,181,0.9);
}

/* Active link styling (emerald green) */
.nav-link.active,
.nav-link[aria-current="page"] {
    color: #0db76b; /* precise emerald green */
}
.nav-link.active::after,
.nav-link[aria-current="page"]::after {
    width: 100%;
    background: #0db76b;
}
.hero {
    /* let the hero content flow below the fixed header */
    padding-top: var(--header-height);
    display: block;
    text-align: center;
    color: white;
    position: relative;
    overflow: visible;
    background: none; /* remove gradient for exact skyline view */
}

.hero::before {
    /* removed grain/dim overlay to show the skyline image clearly */
    content: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

/* Local hero image styling (skyline) */
.hero-image {
    position: relative; /* flow normally under header */
    display: block;
    width: auto; /* don't force full-width scaling */
    max-width: 1200px; /* scale down on smaller screens, but avoid stretching */
    height: auto; /* show full image height */
    object-fit: unset;
    margin: 36px auto 0; /* center and add spacing under header */
    z-index: 1;
    filter: grayscale(100%) contrast(95%);
}

.hero::before { content: ''; /* removed dim overlay for clearer skyline */ }

.hero-title {
    font-size: 2.8rem; /* slightly reduced for better balance */
    font-weight: 700;
    margin-bottom: 0.75rem;
    animation: fadeInUp 1s ease;
}

.hero-subtitle {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    animation: fadeInUp 1s ease 0.15s both;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.4s both;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: white;
    color: #667eea;
    border-color: white;
}

.btn-primary:hover {
    background: transparent;
    color: white;
    border-color: white;
}

.btn-secondary {
    background: transparent;
    color: white;
    border-color: white;
}

.btn-secondary:hover {
    background: white;
    color: #667eea;
}

/* Sections */
.section {
    padding: 80px 0;
}

.section:nth-child(even) {
    background-color: #f8f9fa;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* About Section */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.about-text p {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.about-image, .placeholder-image {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-weight: 500;
    border: 2px dashed #ccc;
}

/* Services Section */
.services {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.services .section-title {
    color: white;
    background: none;
    -webkit-text-fill-color: white;
}

.services .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.service-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.service-card p {
    opacity: 0.9;
    line-height: 1.6;
}

/* Portfolio Section */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.portfolio-item {
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.portfolio-item .placeholder-image {
    height: 200px;
    transition: transform 0.3s ease;
}

.portfolio-item:hover .placeholder-image {
    transform: scale(1.05);
}

/* Contact Section */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #333;
}

.contact-info p {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.contact-item {
    margin-bottom: 1rem;
    color: #666;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.footer {
    background: #1a1a1a;
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand p {
    color: #ccc;
}

.footer-links h4 {
    margin-bottom: 1rem;
    color: #fff;
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 0.5rem;
}

.footer-links ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: #667eea;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333;
    color: #999;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .section-title {
        font-size: 2rem;
    }

    .about-content,
    .contact-content,
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .nav {
        padding: 1rem;
    }

    .container {
        padding: 0 15px;
    }

    .section {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }

    .service-card,
    .portfolio-item {
        margin: 0 10px;
    }
}

/* ==== Gentle global scale-down overrides ====
     The site appeared visually too large on some viewports after merging styles.
     These conservative overrides reduce base font-size and large component heights
     while preserving the site's layout and responsive breakpoints.
*/
html, body {
    /* reduce the root font-size slightly to make type and spacing smaller */
    font-size: 15px; /* was implicit ~16px in many browsers */
}

/* reduce hero sizing */
.hero { height: 50vh; min-height: 380px; }
.hero-inner{max-width:680px;margin-left:28px;padding:28px}
.hero h1{font-size:clamp(24px,4vw,48px)}

/* shrink cards and thumbnails a bit */
.cards{gap:14px}
.card img{height:140px}
.card h3{font-size:15px}

.project-thumb{max-width:180px}

/* contact card adjustments */
.contact-card{padding:20px}
.contact-card-left h2{font-size:22px}

@media (max-width:900px){
    html, body { font-size: 14.5px; }
    .hero{height:44vh;min-height:320px}
    .project-thumb{max-width:140px}
}


/* === Modern styles merged from modern.css (appended) ===
     These rules were appended to preserve the original theme in this single stylesheet.
     If you prefer to keep modern.css separate, revert by removing this block and restoring
     the original link in index.html to modern.css. */

:root{
    --accent:#6d4aff;
    --muted:#6b7280;
    --bg:#fff;
    --max:1100px;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.45;color:#111;background:var(--bg);margin:0}
.mf-container{max-width:var(--max);margin:0 auto;padding:0 20px}
.mf-header{display:none}
.header-inner{display:block}
.logo{height:auto;display:none}

/* slim topbar for large screens */
.topbar{position:fixed;inset:0 0 auto 0;height:56px;display:flex;align-items:center;background:rgba(255,255,255,0.85);backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,0,0,0.04);z-index:40}
.topbar-inner{display:flex;align-items:center;justify-content:flex-end}
.topnav a{margin-left:18px;color:var(--muted);text-decoration:none;font-weight:700}
.topnav a:hover{color:#111}

/* offset hero when topbar is visible */
.hero{margin-top:56px}
.mf-nav a{color:#111;margin:0 12px;text-decoration:none;font-weight:600}
.mf-nav a.active{color:var(--accent)}
.hero{position:relative;height:60vh;min-height:420px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:contrast(1.02) saturate(1.05);opacity:0.95}
.hero-inner{position:relative;z-index:2;color:white;padding:40px;max-width:780px;margin-left:40px}
.hero h1{font-size:clamp(28px,4.5vw,56px);margin:0 0 10px;text-shadow:0 6px 20px rgba(0,0,0,0.45)}
.hero .lead{font-size:18px;margin:0 0 18px;color:rgba(255,255,255,0.95)}
.hero-ctas{display:flex;gap:12px;margin-top:14px}
.cta{display:inline-block;padding:12px 20px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:700}
.cta.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.26)}
.cards-section{padding:48px 20px}
.section-title{font-size:20px;color:var(--muted);margin-bottom:18px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(11,15,30,0.04);text-align:left}
.card img{width:100%;height:160px;object-fit:cover;display:block}
.card h3{margin:12px 16px 6px;font-size:16px}
.card p{margin:0 16px 16px;color:var(--muted);font-size:14px}
.newsletter{background:linear-gradient(180deg,#faf7ff,#fff);padding:36px 20px}
.newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.signup-form{display:flex;gap:10px}
.signup-form input{padding:12px 14px;border-radius:10px;border:1px solid #e6e6ea;min-width:240px}
.signup-form button{background:var(--accent);color:#fff;border:none;padding:12px 18px;border-radius:10px;font-weight:700}
.site-footer{border-top:1px solid rgba(0,0,0,0.05);padding:18px 0;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

@media (max-width:900px){
    .cards{grid-template-columns:repeat(2,1fr)}
    .hero-inner{margin-left:20px}
    .newsletter-inner{flex-direction:column;align-items:flex-start}
}

@media (max-width:520px){
    .cards{grid-template-columns:1fr}
    .mf-nav{display:none}
    .hero{height:48vh}
    .hero-inner{padding:20px}
}

@media (max-width:900px){
    .topbar{display:none}
    .hero{margin-top:0}
}

/* About section */
.about-section{padding:48px 20px;background:linear-gradient(180deg,#fff,#fbfbff)}
.about-inner{max-width:860px;margin:0 auto;color:#111}
.about-inner h2{font-size:28px;margin-bottom:12px}
.about-inner p{color:var(--muted);font-size:16px;margin-bottom:14px}

/* smooth scrolling for in-page anchors */
html{scroll-behavior:smooth}

/* mission section */
.mission-section{padding:44px 20px;background:#fff}
.mission-inner{max-width:860px;margin:0 auto;color:#111}
.mission-inner h2{font-size:26px;margin-bottom:10px}
.mission-inner p{color:var(--muted);font-size:16px}

/* projects section */
.projects-section {
    padding: 48px 20px;
    background: #f7f7ff;
}

.projects-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: row;       /* desktop: text left, images right */
    align-items: flex-start;
    gap: 32px;
}

/* left text column grows */
.projects-text {
    flex: 1 1 60%;
    color: var(--muted);
}

/* right media column holds the row of images */
.project-media {
    flex: 0 0 33%;
    display: flex;
    gap: 16px;
    justify-content: flex-end; /* right-align images inside column */
    align-items: center;
    flex-wrap: nowrap;
}

/* project thumbnails: keep them small so three fit on one line */
.project-thumb {
    max-width: 204px; /* ~85% sizing (updated) */
    width: auto;
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

/* ensure any image inside the project-media column is constrained (fallback if class missing) */
.project-media img {
    max-width: 204px; /* match thumbnail sizing */
    height: auto;
    display: block;
}

@media (max-width: 760px) {
    .project-thumb { max-width: 136px; } /* mobile-adjusted size (~85% of previous mobile value) */
}

/* Contact card styles (modernized) */
.contact-section{padding:48px 20px;background:#fff}
.contact-card{max-width:var(--max);margin:0 auto;display:flex;gap:28px;align-items:center;padding:28px;background:linear-gradient(180deg,#fbfbff,#fff);border-radius:14px;box-shadow:0 12px 30px rgba(11,15,30,0.06)}
.contact-card-left{flex:1}
.contact-card-left h2{margin:0 0 8px;font-size:26px}
.contact-intro{color:var(--muted);margin-bottom:18px}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--muted);color:#fff}
.btn-outline{background:transparent;color:var(--muted);border:2px solid rgba(107,114,128,0.12)}
.contact-card-right{min-width:220px;text-align:left}
.contact-line{margin:8px 0;color:var(--muted)}
.wholesale-label{margin-top:12px;color:var(--muted);font-weight:600}
.wholesale-email{display:inline-block;margin-top:8px;color:var(--muted);text-decoration:underline}

/* form styles */
.contact-form{margin-top:18px;display:block;gap:12px}
.contact-form .form-row{display:flex;flex-direction:column;margin-bottom:10px}
.contact-form label{font-size:13px;margin-bottom:6px;color:var(--muted);font-weight:600}
.contact-form input,.contact-form textarea{padding:10px 12px;border-radius:8px;border:1px solid #e6e6ea;font-size:15px}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:8px}

@media (max-width:900px){
    .contact-form input,.contact-form textarea{width:100%}
}

@media (max-width:900px){
    .contact-card{flex-direction:column;align-items:flex-start;padding:22px}
    .contact-card-right{width:100%;min-width:0}
}