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

/* ─── RESET & TOKENS ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --lime:  #AADF00;
    --black: #000000;
    --white: #FFFFFF;
    --dark:  #0c0c0c;
    --mid:   #161616;
    --muted: #555;
    --H: 'Josefin Sans', sans-serif;
    --B: 'Cormorant Garamond', Georgia, serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--B); background: var(--dark); color: var(--white); overflow-x: hidden; }

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
nav {
    position: fixed; top:0; left:0; width:100%; z-index:300;
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 24px 52px;
    transition: background .45s ease, padding .45s ease;
}
nav.scrolled {
    background: rgba(0,0,0,.93);
    backdrop-filter: blur(14px);
    padding: 14px 52px;
}

/* nav links stay white always — logo image handles dark/light switch */
nav a {
    font-family: var(--H); font-size:.6rem; font-weight:300;
    letter-spacing:.28em; text-transform:uppercase;
    color: var(--white); text-decoration:none;
    position:relative; white-space:nowrap;
    transition: color .3s;
}
nav a::after {
    content:''; position:absolute; bottom:-4px; left:0;
    width:0; height:1px; background:var(--lime);
    transition: width .3s;
}
nav a:hover { color: var(--lime); }
nav a:hover::after { width:100%; }

.nav-left  { display:flex; gap:36px; justify-content:flex-start; align-items:center; }
.nav-right { display:flex; gap:36px; justify-content:flex-end;   align-items:center; }
.nav-logo  { text-align:center; }

/* Two logo variants — JS toggles .nav-dark class on <nav> */
.logo-light { display:block;  height:50px; width:auto; margin:0 auto; transition:opacity .4s; }
.logo-dark  { display:none;   height:50px; width:auto; margin:0 auto; transition:opacity .4s; }

nav.nav-dark .logo-light { display:none;  }
nav.nav-dark .logo-dark  { display:block; }

/* ═══════════════════════════════════════
   HERO SLIDER — homepage only
═══════════════════════════════════════ */
.hero {
    position:relative; width:100%; height:100vh;
    overflow:hidden; background:var(--black);
}
.hero-slide {
    position:absolute; inset:0; opacity:0;
    transition: opacity 2s ease;
}
.hero-slide.active { opacity:1; }

.hero-slide img {
    width:100%; height:100%; object-fit:cover;
    filter:brightness(.52);
    animation: kenBurns 9s ease-in-out forwards;
}
@keyframes kenBurns {
    from { transform: scale(1.06) translate(0,0); }
    to   { transform: scale(1.00) translate(-1%,.5%); }
}

.hero-overlay {
    position:absolute; inset:0; z-index:1;
    background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 100%);
}

/* Tagline */
.hero-tagline {
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:20px;
    pointer-events:none; text-align:center;
    padding: 0 24px;
}
.hero-tagline h1 {
    font-family: var(--H); font-weight:100;
    font-size: clamp(1.4rem, 4.5vw, 3.2rem);
    letter-spacing:.55em; text-transform:uppercase;
    color:var(--white); line-height:1.3;
}
.hero-tagline p {
    font-family:var(--H); font-size:.58rem; font-weight:300;
    letter-spacing:.55em; text-transform:uppercase;
    color:var(--lime);
}

/* 3 category buttons */
.hero-buttons {
    position:absolute; bottom:40%; left:50%;
    transform:translateX(-50%); z-index:2;
    display:flex; gap:12px; align-items:stretch;
    flex-wrap:nowrap;
}
.hero-btn {
    font-family:var(--H); font-size:.56rem; font-weight:300;
    letter-spacing:.28em; text-transform:uppercase;
    color:var(--white); text-decoration:none;
    padding:14px 28px;
    border:1px solid rgba(255,255,255,.5);
    background:rgba(0,0,0,.28); backdrop-filter:blur(8px);
    transition: all .35s ease; white-space:nowrap;
}
.hero-btn:last-child { border-right: 1px solid rgba(255,255,255,.5); }
.hero-btn:hover, .hero-btn.active {
    background:var(--lime); border-color:var(--lime);
    color:var(--black);
}

/* Scroll cue — bottom right */
.scroll-cue {
    position:absolute; bottom:32px; right:52px; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    opacity:.4; pointer-events:none;
}
.scroll-cue span {
    font-family:var(--H); font-size:.42rem; letter-spacing:.4em;
    text-transform:uppercase; writing-mode:vertical-rl;
}
.scroll-cue-line {
    width:1px; height:52px; background:var(--white);
    animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.25} 50%{opacity:1} }

/* ═══════════════════════════════════════
   GALLERY PAGE HEADER (project pages)
═══════════════════════════════════════ */
.gallery-header {
    height:100vh; position:relative; overflow:hidden;
}
.gallery-header img.bg {
    width:100%; height:100%; object-fit:cover;
    filter:brightness(.42); display:block;
}
.gallery-header .hero-overlay { position:absolute; inset:0; z-index:1; }
.gallery-header .gallery-title {
    position:absolute; bottom:52%; left:50%;
    transform:translateX(-50%);
    text-align:center; white-space:nowrap; z-index:2;
}
.gallery-header .gallery-title h2 {
    font-family:var(--H); font-weight:100;
    font-size: clamp(1.8rem,4.5vw,3.4rem);
    letter-spacing:.5em; text-transform:uppercase; color:var(--white);
}
.gallery-header .gallery-title p {
    font-family:var(--H); font-size:.58rem; font-weight:300;
    letter-spacing:.4em; text-transform:uppercase;
    color:var(--lime); margin-top:12px;
}
.gallery-header .hero-buttons { bottom:40%; z-index:2; gap:12px; }

/* ═══════════════════════════════════════
   PROJECT GRID
═══════════════════════════════════════ */
.projects-grid {
    display:grid;
    grid-template-columns: repeat(12,1fr);
    gap:3px; background:var(--black); width:100%;
}
.proj-item {
    position:relative; overflow:hidden; cursor:pointer;
    background:#111; height:0; padding-bottom:60%;
}
.proj-item:nth-child(6n+1) { grid-column:span 7; }
.proj-item:nth-child(6n+2) { grid-column:span 5; }
.proj-item:nth-child(6n+3) { grid-column:span 5; }
.proj-item:nth-child(6n+4) { grid-column:span 7; }
.proj-item:nth-child(6n+5) { grid-column:span 6; }
.proj-item:nth-child(6n+6) { grid-column:span 6; }

.proj-item img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;
    filter:brightness(.72);
    transition: transform .8s cubic-bezier(.25,.46,.45,.94), filter .5s ease;
    loading:lazy;
}
.proj-item:hover img { transform:scale(1.06); filter:brightness(.4); }

.proj-info {
    position:absolute; bottom:0; left:0; width:100%;
    padding:26px 30px; z-index:2;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 100%);
    opacity:0; transform:translateY(12px);
    transition: opacity .4s ease, transform .4s ease;
}
.proj-item:hover .proj-info { opacity:1; transform:translateY(0); }

.proj-category {
    font-family:var(--H); font-size:.48rem; font-weight:300;
    letter-spacing:.45em; text-transform:uppercase;
    color:var(--lime); display:block; margin-bottom:6px;
}
.proj-name {
    font-family:var(--H); font-size:1.35rem; font-weight:200;
    letter-spacing:.05em; color:var(--white); line-height:1.2;
}
.proj-location {
    font-family:var(--H); font-size:.48rem; font-weight:300;
    letter-spacing:.3em; color:rgba(255,255,255,.55);
    margin-top:4px; text-transform:uppercase;
}

.proj-placeholder {
    position:absolute; inset:0; background:#111;
    border:1px solid #1e1e1e;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:10px; color:#2a2a2a;
    font-family:var(--H); font-size:.46rem;
    letter-spacing:.3em; text-transform:uppercase;
}
.proj-placeholder svg { opacity:.1; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
    border-top:1px solid #1a1a1a;
    padding:40px 52px;
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    background:var(--dark);
    gap:16px;
}
footer .f-left  { display:flex; flex-direction:column; gap:6px; }
footer .f-center { text-align:center; }
footer .f-center img { height:36px; width:auto; opacity:.6; }
footer .f-right { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }

footer p, footer a {
    font-family:var(--H); font-size:.5rem; font-weight:300;
    letter-spacing:.22em; color:var(--muted);
    text-transform:uppercase; text-decoration:none;
    transition:color .3s;
}
footer a:hover { color:var(--lime); }

.footer-socials { display:flex; gap:20px; margin-top:4px; align-items:center; }
.footer-socials a { display:flex; align-items:center; justify-content:center; color:var(--muted); transition:color .3s; }
.footer-socials a:hover { color:var(--lime); }
.footer-socials svg { width:16px; height:16px; fill:currentColor; display:block; }

/* ═══════════════════════════════════════
   INNER PAGE HERO
═══════════════════════════════════════ */
.page-hero {
    position:relative; height:64vh; overflow:hidden;
}
.page-hero img {
    width:100%; height:100%; object-fit:cover;
    filter:brightness(.38); display:block;
}
.page-hero::after {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.58) 100%);
}
.page-hero-title {
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
}
.page-hero-title h2 {
    font-family:var(--H); font-weight:100;
    font-size: clamp(2rem,5vw,3.8rem);
    letter-spacing:.5em; text-transform:uppercase; color:var(--white);
}
.page-hero-title span {
    font-family:var(--H); font-size:.58rem; font-weight:300;
    letter-spacing:.45em; text-transform:uppercase; color:var(--lime);
}

/* ═══════════════════════════════════════
   PAGE SECTIONS
═══════════════════════════════════════ */
.page-section { max-width:1160px; margin:0 auto; padding:100px 52px; }

.section-label {
    font-family:var(--H); font-size:.52rem; font-weight:300;
    letter-spacing:.55em; text-transform:uppercase;
    color:var(--lime); display:block; margin-bottom:18px;
}
.section-title {
    font-family:var(--H); font-weight:100;
    font-size: clamp(1.8rem,3.5vw,2.9rem);
    letter-spacing:.07em; color:var(--white);
    margin-bottom:28px; line-height:1.25;
}
.section-body {
    font-family:var(--B); font-size:1.05rem;
    line-height:2; color:#888; max-width:640px;
}
.divider { width:38px; height:1px; background:var(--lime); margin:26px 0; }

/* ─── ABOUT PAGE ─── */
.about-intro {
    display:grid; grid-template-columns:1fr 1fr;
    gap:80px; align-items:center;
}
.about-intro img {
    width:100%; aspect-ratio:3/4;
    object-fit:cover; filter:brightness(.88); display:block;
}

/* services strip inside about */
.about-services {
    margin-top:90px; padding-top:80px;
    border-top:1px solid #1a1a1a;
}
.about-services-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:2px; margin-top:48px;
}
.about-service-item {
    background:var(--mid); padding:40px 30px;
    border:1px solid #1e1e1e;
    transition: border-color .3s, background .3s;
}
.about-service-item:hover { border-color:var(--lime); background:#131313; }
.about-service-item span {
    font-family:var(--H); font-size:.46rem; font-weight:300;
    letter-spacing:.45em; color:var(--lime); display:block; margin-bottom:18px;
}
.about-service-item h3 {
    font-family:var(--H); font-size:1.1rem; font-weight:300;
    color:var(--white); letter-spacing:.05em; margin-bottom:12px;
}
.about-service-item p {
    font-family:var(--B); font-size:.88rem; line-height:1.9; color:#666;
}

/* values grid */
.values-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:2px; margin-top:48px;
}
.value-card {
    background:var(--mid); padding:36px 28px;
    border:1px solid #1e1e1e;
    transition: border-color .3s;
}
.value-card:hover { border-color:var(--lime); }
.value-card span {
    font-family:var(--H); font-size:.44rem; font-weight:300;
    letter-spacing:.45em; color:var(--lime); display:block; margin-bottom:14px;
}
.value-card h4 {
    font-family:var(--H); font-size:1.05rem; font-weight:300;
    color:var(--white); margin-bottom:10px; letter-spacing:.05em;
}
.value-card p {
    font-family:var(--B); font-size:.86rem; line-height:1.85; color:#666;
}

/* ─── SERVICES PAGE ─── */
.service-row {
    display:grid; grid-template-columns:1fr 1fr;
    gap:0; border-top:1px solid #1a1a1a;
}
.service-row:last-child { border-bottom:1px solid #1a1a1a; }
.service-row.reverse { direction:rtl; }
.service-row.reverse > * { direction:ltr; }

.service-row-img {
    width:100%; aspect-ratio:16/10;
    object-fit:cover; filter:brightness(.8);
    display:block; transition:filter .4s;
}
.service-row:hover .service-row-img { filter:brightness(1); }
.service-row-text {
    padding:64px 56px;
    display:flex; flex-direction:column; justify-content:center;
    background:var(--mid);
}
.service-row-text h3 {
    font-family:var(--H); font-size:clamp(1.2rem,2.5vw,1.7rem);
    font-weight:200; color:var(--white); letter-spacing:.06em; margin-bottom:16px;
}
.service-row-text p {
    font-family:var(--B); font-size:1rem; line-height:1.95; color:#777;
}

/* ─── TEAM PAGE ─── */
.founder-card {
    display:grid; grid-template-columns:1fr 1fr;
    gap:72px; align-items:center;
    padding-bottom:80px; border-bottom:1px solid #1a1a1a;
    margin-bottom:72px;
}
.founder-card img {
    width:100%; aspect-ratio:3/4;
    object-fit:cover; object-position:top;
    filter:brightness(.88); display:block;
}
.founder-text .founder-name {
    font-family:var(--H); font-size:clamp(1.6rem,3vw,2.4rem);
    font-weight:100; letter-spacing:.1em; color:var(--white); margin-bottom:6px;
}
.founder-text .founder-role {
    font-family:var(--H); font-size:.55rem; font-weight:300;
    letter-spacing:.45em; text-transform:uppercase; color:var(--lime); margin-bottom:28px;
}
.founder-text .founder-bio {
    font-family:var(--B); font-size:1.05rem; line-height:2; color:#888;
}

.team-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:40px;
}
.team-card { text-align:center; }
.team-photo, .team-photo-placeholder {
    width:100%; aspect-ratio:3/4;
    object-fit:cover; object-position:top;
    display:block;
}
.team-photo {
    filter:grayscale(10%) brightness(.85);
    transition:filter .4s;
}
.team-card:hover .team-photo { filter:grayscale(0%) brightness(1); }
.team-photo-placeholder {
    background:var(--mid); border:1px solid #1e1e1e;
    display:flex; align-items:center; justify-content:center;
    color:#2e2e2e; font-family:var(--H); font-size:.46rem;
    letter-spacing:.3em; text-transform:uppercase;
    width:100%; aspect-ratio:3/4;
}
.team-name {
    font-family:var(--H); font-size:1.05rem; font-weight:300;
    letter-spacing:.1em; color:var(--white);
    margin-top:18px; margin-bottom:5px;
}
.team-role {
    font-family:var(--H); font-size:.5rem; font-weight:300;
    letter-spacing:.38em; text-transform:uppercase; color:var(--lime);
}
.team-bio {
    font-family:var(--B); font-size:.88rem; line-height:1.85; color:#666;
    margin-top:10px;
}

/* ─── CONTACT PAGE ─── */
.contact-wrap {
    display:grid; grid-template-columns:1fr 1.3fr;
    gap:80px; align-items:start;
}
.contact-info { display:flex; flex-direction:column; gap:36px; }
.contact-item span {
    font-family:var(--H); font-size:.48rem; font-weight:300;
    letter-spacing:.45em; text-transform:uppercase;
    color:var(--lime); display:block; margin-bottom:7px;
}
.contact-item p, .contact-item a {
    font-family:var(--B); font-size:1rem; color:#888; line-height:1.85;
    text-decoration:none; transition:color .3s;
}
.contact-item a:hover { color:var(--lime); }

.contact-socials { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.contact-socials a {
    display:flex; align-items:center; justify-content:center;
    color:#666; text-decoration:none;
    padding:10px; border:1px solid #222;
    transition: color .3s, border-color .3s;
}
.contact-socials a:hover { color:var(--lime); border-color:var(--lime); }
.contact-socials svg { width:18px; height:18px; fill:currentColor; display:block; }

.map-wrap {
    margin-top:36px; border:1px solid #1e1e1e; overflow:hidden;
    filter:grayscale(100%) brightness(.6) contrast(1.1);
    transition:filter .4s;
}
.map-wrap:hover { filter:grayscale(0%) brightness(.9); }
.map-wrap iframe { display:block; width:100%; height:260px; border:none; }

/* contact form */
.contact-form { display:flex; flex-direction:column; gap:22px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group label {
    font-family:var(--H); font-size:.48rem; font-weight:300;
    letter-spacing:.45em; text-transform:uppercase; color:var(--lime);
}
.form-group input,
.form-group textarea,
.form-group select {
    background:transparent; border:none;
    border-bottom:1px solid #252525;
    padding:11px 0; color:var(--white);
    font-family:var(--B); font-size:1rem;
    outline:none; transition:border-color .3s; width:100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-bottom-color:var(--lime); }
.form-group textarea { resize:none; height:110px; }
.form-group select option { background:var(--dark); color:var(--white); }

.form-submit {
    margin-top:6px; padding:13px 40px; align-self:flex-start;
    border:1px solid rgba(255,255,255,.28); background:transparent;
    color:var(--white); font-family:var(--H); font-size:.52rem;
    font-weight:300; letter-spacing:.38em; text-transform:uppercase;
    cursor:pointer; transition:all .3s;
}
.form-submit:hover {
    background:var(--lime); border-color:var(--lime); color:var(--black);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width:600px) {
    nav, nav.scrolled { padding:12px 16px; }
    .nav-left, .nav-right { gap:12px; }
    nav a { font-size:.44rem; letter-spacing:.1em; }
    .logo-light, .logo-dark, nav.nav-dark .logo-dark { height:30px; }
    .hero-tagline h1 { font-size:1.1rem; letter-spacing:.3em; }
    .hero-buttons {
        flex-direction: column;
        width: 62vw;
        bottom: 50%;
        transform: translate(-50%, 50%);
    }
    .hero-btn {
        border-right: 1px solid rgba(255,255,255,.5) !important;
        border-bottom: none !important;
        text-align: center;
    }
    .hero-btn:last-child {
        border-bottom: 1px solid rgba(255,255,255,.5) !important;
    }
    .gallery-header .gallery-title { bottom: 68%; }
    .gallery-header .gallery-title h2 { font-size:1.5rem; letter-spacing:.3em; }
    .gallery-header .hero-buttons { bottom: 28%; }
    .projects-grid { grid-template-columns:repeat(2,1fr); }
    .proj-item:nth-child(n) { grid-column:span 1; padding-bottom:100%; }
    .proj-name { font-size:.85rem; }
    .page-hero { height:46vh; }
    .page-hero-title h2 { font-size:1.7rem; letter-spacing:.3em; }
    .page-section { padding:60px 20px; }
    .section-title { font-size:1.6rem; }
    .about-intro { grid-template-columns:1fr; gap:32px; }
    .about-services-grid { grid-template-columns:1fr; }
    .values-grid { grid-template-columns:1fr 1fr; }
    .service-row { grid-template-columns:1fr; }
    .service-row.reverse { direction:ltr; }
    .service-row-text { padding:36px 24px; }
    .founder-card { grid-template-columns:1fr; gap:32px; }
    .team-grid { grid-template-columns:1fr 1fr; gap:20px; }
    .contact-wrap { grid-template-columns:1fr; gap:52px; }
    footer { grid-template-columns:1fr; gap:20px; text-align:center; }
    footer .f-right { align-items:center; }
    .footer-socials { justify-content:center; }
    .scroll-cue { display:none; }
}

@media (min-width:601px) and (max-width:900px) {
    nav, nav.scrolled { padding:16px 28px; }
    .nav-left, .nav-right { gap:18px; }
    nav a { font-size:.52rem; }
    .logo-light, .logo-dark { height:38px; }
    .hero-btn { padding:10px 18px; font-size:.5rem; }
    .projects-grid { grid-template-columns:repeat(6,1fr); }
    .proj-item:nth-child(6n+1) { grid-column:span 4; }
    .proj-item:nth-child(6n+2) { grid-column:span 2; }
    .proj-item:nth-child(6n+3) { grid-column:span 2; }
    .proj-item:nth-child(6n+4) { grid-column:span 4; }
    .proj-item:nth-child(6n+5) { grid-column:span 3; }
    .proj-item:nth-child(6n+6) { grid-column:span 3; }
    .about-intro { grid-template-columns:1fr; gap:36px; }
    .about-services-grid { grid-template-columns:1fr 1fr; }
    .values-grid { grid-template-columns:1fr 1fr; }
    .service-row { grid-template-columns:1fr; }
    .service-row.reverse { direction:ltr; }
    .founder-card { grid-template-columns:1fr; gap:40px; }
    .team-grid { grid-template-columns:1fr 1fr; gap:28px; }
    .contact-wrap { grid-template-columns:1fr; gap:56px; }
    .page-section { padding:80px 32px; }
    footer { padding:32px 28px; }
}