@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');
:root{
  --olive:#4a4e3a;--beige:#f5f3ef;--beige-dark:#e8e4dd;
  --tan:#8c7e6a;--tan-light:#a89880;
  --text:#2c2c2c;--text-light:#666;--text-muted:#999;
  --white:#ffffff;--border:#ddd8d0;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Jost','Helvetica Neue',sans-serif;
  --nav-h:70px;--transition:.3s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:15px;color:var(--text);background:var(--white);line-height:1.7}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.2;color:var(--text)}
h1{font-size:clamp(2.2rem,5vw,3.8rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.8rem)}
p{color:var(--text-light)}
 
/* NAV */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:#ffffff;z-index:1000;border-bottom:1px solid transparent;transition:border-color var(--transition)}
.navbar.scrolled{border-bottom-color:var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 2rem;height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo img{height:56px;width:auto;background:transparent}
.nav-links{display:flex;gap:2.5rem;align-items:center}
.nav-links a{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);position:relative;padding-bottom:2px;transition:color var(--transition)}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--tan);transition:width var(--transition)}
.nav-links a:hover,.nav-links a.active{color:var(--tan)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.1);min-width:220px;padding:.5rem 0;opacity:0;pointer-events:none;transition:opacity var(--transition);z-index:1001}
.nav-dropdown-menu.open{opacity:1;pointer-events:all}
.nav-dropdown-menu li a{display:block;padding:.5rem 1.2rem;font-size:.75rem;color:var(--text-light);transition:color var(--transition),background var(--transition)}
.nav-dropdown-menu li a:hover{color:var(--tan);background:var(--beige)}
.dropdown-divider{border-top:.5px solid var(--border);margin-top:.3rem;padding-top:.3rem}
.dropdown-divider a{color:var(--tan)!important;font-weight:500}
/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:24px;height:1.5px;background:var(--text);transition:var(--transition)}
 
/* HERO */
.hero{margin-top:var(--nav-h);height:calc(100vh - var(--nav-h));min-height:480px;position:relative;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.3))}
 
/* SECTIONS */
.section{padding:6rem 2rem}
.section-sm{padding:4rem 2rem}
.container{max-width:1100px;margin:0 auto}
 
/* ABOUT STRIP */
.about-strip{padding:5rem 2rem;background:var(--beige)}
.about-strip-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:280px 1fr;gap:4rem;align-items:center}
.about-strip-photo{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.about-strip-content h2{color:var(--tan);margin-bottom:1rem}
.about-strip-content p{margin-bottom:1.5rem}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}
.about-cols h4{color:var(--tan);margin-bottom:.5rem;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
 
/* SERVICES STRIP */
.services-strip{padding:5rem 2rem}
.section-header{text-align:center;margin-bottom:3rem}
.section-header p{font-size:.9rem;color:var(--text-muted);margin-top:.5rem}
.services-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem}
.service-item h4{font-size:.9rem;font-weight:500;margin-bottom:.3rem}
.service-item p{font-size:.85rem}
 
/* CTA */
.cta-banner{background:var(--olive);color:var(--white);padding:5rem 2rem;text-align:center}
.cta-banner h2{color:var(--white);margin-bottom:1rem}
.cta-banner p{color:rgba(255,255,255,.75);margin-bottom:2rem;font-size:.95rem}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
 
/* PROJECTS GRID */
.projects-section{padding:5rem 2rem;background:var(--beige)}
.projects-header{max-width:1100px;margin:0 auto 2.5rem;display:flex;align-items:baseline;justify-content:space-between}
.proj-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.project-card{position:relative;overflow:hidden;cursor:pointer}
.project-card img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s ease}
.project-card:hover img{transform:scale(1.04)}
.project-card-info{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);padding:1.5rem 1rem .8rem;opacity:0;transform:translateY(6px);transition:all var(--transition)}
.project-card:hover .project-card-info{opacity:1;transform:translateY(0)}
.project-card-info h4{color:var(--white);font-size:.95rem}
.project-card-info span{color:rgba(255,255,255,.7);font-size:.75rem}
 
/* PAGE HERO */
.page-hero{margin-top:var(--nav-h);height:280px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.page-hero-content{position:relative;z-index:1;padding:2rem;max-width:1100px;margin:0 auto;width:100%}
.page-hero-content h1{color:var(--white)}
.page-hero-content p{color:rgba(255,255,255,.82);font-size:.9rem}
 
/* ABOUT PAGE */
.about-bio{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.about-bio-text h3{color:var(--tan);margin-bottom:1.5rem}
.about-bio-text p{margin-bottom:1rem;font-size:.95rem}
.about-bio-text blockquote{border-left:2px solid var(--tan);padding-left:1.2rem;font-style:italic;color:var(--text);margin:1.5rem 0}
.profile-section{margin-top:1.5rem}
.profile-section h4{font-family:var(--font-body);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem}
.profile-section p,.profile-section li{font-size:.88rem;color:var(--text-light)}
.profile-section ul{padding-left:1rem;list-style:disc}
.profile-section ul li{margin-bottom:.25rem}
.motivations{padding:5rem 2rem;background:var(--beige)}
.motivations h2{text-align:center;margin-bottom:3rem}
.motivations-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.motivation-card{background:var(--tan-light);padding:1.5rem}
.motivation-card h4{color:var(--white);font-size:.85rem;margin-bottom:1rem;line-height:1.4}
.motivation-card p{color:rgba(255,255,255,.88);font-size:.8rem;font-style:italic}
 
/* SERVICES PAGE */
.services-list{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem 5rem}
.service-full-item img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:1.5rem}
.service-full-item h3{margin-bottom:.8rem}
.service-full-item p{font-size:.9rem}
 
/* PORTFOLIO */
.portfolio-list{max-width:1000px;margin:0 auto}
.portfolio-item{display:grid;grid-template-columns:340px 1fr;gap:4rem;align-items:center;padding:4rem 0;border-bottom:1px solid var(--border)}
.portfolio-img{overflow:hidden}
.portfolio-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.portfolio-item:hover .portfolio-img img{transform:scale(1.02)}
.portfolio-text{padding:1rem 0}
.project-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.badge{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .7rem;border:1px solid var(--border);color:var(--text-muted)}
.badge-type{border-color:var(--tan);color:var(--tan)}
.portfolio-text h3{margin-bottom:.8rem}
.portfolio-text p{font-size:.9rem;margin-bottom:1.5rem}
 
 
 
/* CONTACT */
.contact-wrap{max-width:600px;margin:0 auto;padding:5rem 2rem;text-align:center}
.contact-wrap>p{margin-bottom:2.5rem;font-size:.95rem}
.contact-form{text-align:left}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.4rem}
.form-group input,.form-group textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--border);background:var(--beige);font-family:var(--font-body);font-size:.9rem;color:var(--text);outline:none;transition:border-color var(--transition)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--tan)}
.form-group textarea{resize:vertical;min-height:120px}
.alert{padding:.9rem 1.2rem;margin-bottom:1.5rem;font-size:.88rem}
.alert-success{background:#f0f7f0;color:#2d6a2d;border:1px solid #b8d8b8}
.alert-error{background:#fdf0f0;color:#7a2d2d;border:1px solid #e8b8b8}
 
/* BUTTONS */
.btn{display:inline-block;padding:.75rem 2rem;font-family:var(--font-body);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:none;transition:background var(--transition),color var(--transition)}
.btn-primary{background:var(--tan);color:var(--white)}
.btn-primary:hover{background:var(--tan-light)}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.6)}
.btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-outline-dark{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline-dark:hover{border-color:var(--tan);color:var(--tan)}
.btn-sm{padding:.5rem 1.2rem;font-size:.72rem}
 
/* FOOTER */
.footer{background:var(--beige-dark);padding:3.5rem 2rem 2rem}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-logo img{height:60px;margin-bottom:.8rem;background:transparent}
.footer-nav h5,.footer-contact h5{font-family:var(--font-body);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;color:var(--text)}
.footer-nav a,.footer-contact p,.footer-contact a{display:block;font-size:.85rem;color:var(--text-light);margin-bottom:.4rem;transition:color var(--transition)}
.footer-nav a:hover,.footer-contact a:hover{color:var(--tan)}
.footer-bottom{max-width:1100px;margin:0 auto;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.footer-bottom p{font-size:.78rem;color:var(--text-muted)}
.footer-ig a{font-size:1.4rem;color:var(--text-muted);transition:color var(--transition)}
.footer-ig a:hover{color:var(--tan)}
 
/* ADMIN */
.admin-body{font-family:var(--font-body);background:#f5f5f5;min-height:100vh}
.admin-navbar{background:var(--olive);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;color:#fff}
.admin-navbar a{color:rgba(255,255,255,.8);font-size:.85rem}
.admin-navbar a:hover{color:#fff}
.admin-main{max-width:1000px;margin:2rem auto;padding:0 1.5rem}
.admin-card{background:#fff;border-radius:4px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--border);font-size:.88rem}
.admin-table th{font-weight:500;color:var(--text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.admin-table img{width:60px;height:45px;object-fit:cover}
.admin-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.admin-btn{padding:.3rem .8rem;font-size:.78rem;border:none;cursor:pointer;border-radius:2px;font-family:var(--font-body)}
.admin-btn-edit{background:var(--tan);color:#fff}
.admin-btn-delete{background:#c0392b;color:#fff}
.admin-btn-view{background:var(--olive);color:#fff}
.admin-form .form-group{margin-bottom:1.2rem}
.admin-form label{display:block;font-size:.8rem;font-weight:500;margin-bottom:.4rem;color:var(--text)}
.admin-form input,.admin-form textarea,.admin-form select{width:100%;padding:.65rem .9rem;border:1px solid var(--border);font-family:var(--font-body);font-size:.9rem;outline:none}
.admin-form input:focus,.admin-form textarea:focus{border-color:var(--tan)}
.admin-form textarea{min-height:100px;resize:vertical}
.admin-form small{font-size:.75rem;color:var(--text-muted)}
.login-wrap{max-width:380px;margin:8rem auto;padding:0 1.5rem}
 
/* RESPONSIVE */
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--white);padding:2rem;gap:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:999}
  .nav-dropdown-menu{position:static;transform:none;box-shadow:none;border:none;background:var(--beige);padding:.3rem 0 .3rem 1rem;opacity:1!important;pointer-events:all!important;display:none}
  .nav-dropdown-menu.open{display:block}
  .about-strip-inner{grid-template-columns:1fr;gap:2rem}
  .about-cols{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-item{grid-template-columns:1fr;gap:1.5rem}
  .portfolio-item .portfolio-img{order:1!important}
  .portfolio-item .portfolio-text{order:2!important}
  .gallery-main{grid-template-columns:1fr}
  .gallery-thumbs{flex-direction:row;overflow-x:auto}
  .gallery-thumbs img{width:70px;height:70px}
  .project-info{grid-template-columns:1fr}
  .services-list{grid-template-columns:1fr}
  .motivations-grid{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
  .about-bio{grid-template-columns:1fr}
}
@media(max-width:480px){
  .proj-grid{grid-template-columns:1fr}
  .motivations-grid{grid-template-columns:1fr}
}
 
/* ── PROJECT DETAIL ─────────────────────────────────────────────────────── */
 
/* Hero */
.proj-hero {
  margin-top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  min-height: 520px;
  max-height: 800px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.proj-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease;
}
.proj-hero:hover img { transform: scale(1.03); }
.proj-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.1) 100%);
}
.proj-hero-content {
  position: relative;
  z-index: 1;
  padding: 3rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.proj-hero-type {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tan-light);
  margin-bottom: .8rem;
  display: block;
}
.proj-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.proj-hero-location {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: rgba(255,255,255,.7);
}
.proj-hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--white);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--transition);
}
.proj-hero-scroll:hover { background: rgba(255,255,255,.25); }
 
/* Before/After toggle */
.proj-before-section {
  background: var(--beige);
  border-bottom: 1px solid var(--border);
}
.proj-before-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}
.proj-before-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  width: fit-content;
}
.toggle-btn {
  padding: .6rem 1.6rem;
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  border: none;
  transition: all var(--transition);
}
.toggle-btn.active {
  background: var(--tan);
  color: var(--white);
}
 
/* Gallery */
.proj-gallery-section { padding: 2rem 0 0; }
.proj-gallery-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}
.proj-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.proj-gallery-featured {
  grid-column: span 2;
  grid-row: span 2;
}
.proj-gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--beige);
}
.proj-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  display: block;
  min-height: 220px;
}
.proj-gallery-featured img { min-height: 460px; }
.proj-gallery-item:hover img { transform: scale(1.04); }
.proj-gallery-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  color: var(--white);
  opacity: 0;
  transition: opacity var(--transition);
}
.proj-gallery-item:hover .proj-gallery-zoom { opacity: 1; }
 
/* Info section */
.proj-info-section {
  padding: 5rem 2rem;
}
.proj-info-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 5rem;
  align-items: start;
}
.proj-desc-label {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1rem;
}
.proj-desc-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300;
  margin-bottom: 1.5rem;
  color: var(--text);
}
.proj-desc-text {
  font-size: .95rem;
  line-height: 1.9;
  color: var(--text-light);
}
 
/* Meta card */
.proj-meta-card {
  background: var(--beige);
  padding: 2rem;
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.proj-meta-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.proj-meta-item:first-child { padding-top: 0; }
.proj-meta-label {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.proj-meta-value {
  font-size: .9rem;
  color: var(--text);
  font-weight: 400;
}
.proj-services-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .3rem;
}
.proj-service-pill {
  display: inline-block;
  font-size: .72rem;
  padding: .3rem .8rem;
  border: 1px solid var(--border);
  color: var(--text-light);
  background: var(--white);
}
 
/* Lightbox with nav */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.95);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 88vw;
  max-height: 88vh;
  object-fit: contain;
  user-select: none;
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  color: var(--white);
  font-size: 2.5rem;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  opacity: .7;
  transition: opacity var(--transition);
}
.lightbox-close:hover { opacity: 1; }
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--white);
  font-size: 3rem;
  cursor: pointer;
  padding: 1rem;
  opacity: .6;
  transition: opacity var(--transition);
  line-height: 1;
}
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
 
/* Responsive project */
@media (max-width: 900px) {
  .proj-gallery-grid { grid-template-columns: repeat(2,1fr); }
  .proj-gallery-featured { grid-column: span 2; grid-row: span 1; }
  .proj-gallery-featured img { min-height: 280px; }
  .proj-info-inner { grid-template-columns: 1fr; }
  .proj-meta-card { position: static; }
  .proj-hero-content { padding: 2rem; }
}
@media (max-width: 600px) {
  .proj-gallery-grid { grid-template-columns: 1fr; gap: 6px; }
  .proj-gallery-featured { grid-column: span 1; }
  .proj-gallery-item img { min-height: 220px; }
}