/* ============ Tokens ============ */
:root{
  --green-950:#141c15;
  --green-900:#1d271e;
  --green-800:#2a372b;
  --gold:#b9905c;
  --gold-soft:#d9bd8f;
  --cream:#f7f2e6;
  --cream-2:#efe6d2;
  --ink:#211d17;
  --ink-soft:#4a453c;
  --wood:#7a5233;
  --line:rgba(33,29,23,0.12);
  --line-on-dark:rgba(247,242,230,0.16);
  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0 0 0.5em;color:var(--ink);}
p{line-height:1.7;margin:0 0 1em;color:var(--ink-soft);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* subtle grain overlay for warmth, very low opacity */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Header ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.solid{
  background:rgba(247,242,230,0.92);
  backdrop-filter:blur(10px);
  padding:12px 0;
  box-shadow:0 1px 0 var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;}
.brand-mark{height:30px;width:auto;border-radius:3px;}
.main-nav{display:flex;align-items:center;gap:30px;font-size:14.5px;}
.main-nav a{color:#f2ede1;opacity:0.9;transition:opacity .2s;}
.site-header.solid .main-nav a{color:var(--ink);}
.main-nav a:hover{opacity:1;}
.nav-cta{
  background:var(--gold);color:#1a1712 !important;padding:9px 18px;border-radius:2px;
  font-weight:500;opacity:1 !important;
}
.nav-toggle{display:none;background:none;border:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;}
.nav-toggle span{width:22px;height:2px;background:#f2ede1;display:block;}
.site-header.solid .nav-toggle span{background:var(--ink);}

/* ============ Hero ============ */
.hero{
  display:grid;grid-template-columns:0.85fr 1.15fr;
  min-height:100vh;background:var(--green-950);
}
.hero-copy{
  color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:140px 56px 80px 28px;
  max-width:560px;
}
.hero-eyebrow{
  font-family:var(--sans);font-size:13.5px;letter-spacing:0.02em;color:var(--gold-soft);
  margin-bottom:22px;
}
.hero-title{
  font-size:clamp(2.1rem, 3.4vw, 3.1rem);
  color:#faf6ec;
  margin-bottom:24px;
}
.hero-sub{
  font-size:16.5px;color:#cdc7b8;max-width:440px;margin-bottom:36px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-block;padding:14px 26px;font-size:14.5px;font-weight:500;
  border-radius:2px;transition:transform .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:#1a1712;}
.btn-line{border:1px solid var(--line-on-dark);color:var(--cream);}
.hero-media{position:relative;overflow:hidden;}
.hero-media img{width:100%;height:100%;object-fit:cover;min-height:100vh;}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(20,28,21,0.55) 0%, rgba(20,28,21,0) 22%);
}

/* ============ Sections generic ============ */
.section{padding:110px 0;}
.kicker{
  font-family:var(--sans);font-size:13.5px;color:var(--wood);letter-spacing:0.01em;
  margin-bottom:14px;font-weight:600;
}
.kicker-on-dark{color:var(--gold-soft);}

/* ============ About ============ */
.about-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:70px;align-items:center;}
.about-text h2{font-size:clamp(1.7rem,2.4vw,2.3rem);max-width:520px;}
.about-text p{max-width:480px;}
.about-text em{font-style:italic;color:var(--wood);}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px;padding-top:32px;border-top:1px solid var(--line);}
.vm-label{display:block;font-family:var(--serif);font-style:italic;color:var(--wood);font-size:15px;margin-bottom:10px;}
.vm-block p{font-size:14.5px;margin:0;}
.about-media{position:relative;}
.about-media img{border-radius:2px;}
.about-media img:first-child{width:100%;aspect-ratio:4/5;object-fit:cover;}
.about-media-small{
  position:absolute;bottom:-40px;left:-60px;width:58%;aspect-ratio:4/3;object-fit:cover;
  border:6px solid var(--cream);box-shadow:0 20px 40px rgba(20,20,10,0.18);
}

/* ============ Services ============ */
.services{background:var(--green-950);color:var(--cream);}
.services-heading{color:#faf6ec;max-width:600px;font-size:clamp(1.7rem,2.4vw,2.3rem);}
.service-row{
  display:grid;grid-template-columns:110px 1fr;gap:24px;
  padding:36px 0;border-top:1px solid var(--line-on-dark);
}
.service-row:last-child{border-bottom:1px solid var(--line-on-dark);}
.service-index{font-family:var(--serif);font-size:2.4rem;color:var(--gold);font-weight:400;line-height:1;}
.service-body h3{color:#faf6ec;font-size:1.4rem;margin-bottom:10px;}
.service-body p{color:#cdc7b8;max-width:640px;margin:0;}

/* ============ Values ============ */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:20px;}
.value-card{padding-top:22px;border-top:2px solid var(--gold);}
.value-card h3{font-size:1.2rem;margin-bottom:10px;}
.value-card p{font-size:14.5px;margin:0;}

/* ============ Portfolio ============ */
.portfolio h2{font-size:clamp(1.7rem,2.4vw,2.3rem);max-width:560px;}
.tabs{display:flex;gap:10px;margin:34px 0 36px;flex-wrap:wrap;}
.tab{
  font-family:var(--sans);font-size:14px;padding:10px 20px;border-radius:20px;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;
  transition:all .2s ease;
}
.tab.active,.tab:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.gallery{
  columns:3 260px;column-gap:18px;
}
.g-item{
  break-inside:avoid;margin:0 0 18px;position:relative;overflow:hidden;border-radius:2px;
  display:none;
}
.g-item.show{display:block;}
.g-item img{width:100%;display:block;transition:transform .5s ease;}
.g-item:hover img{transform:scale(1.04);}
.g-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;
  font-size:13px;color:#f2ede1;
  background:linear-gradient(0deg, rgba(20,20,14,0.75) 0%, rgba(20,20,14,0) 100%);
  opacity:0;transition:opacity .25s ease;
}
.g-item:hover figcaption{opacity:1;}

/* ============ Team ============ */
.team h2{font-size:clamp(1.7rem,2.4vw,2.3rem);max-width:560px;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:36px;}
.team-card{padding:34px 26px;background:var(--cream-2);border-radius:2px;}
.team-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;border:1.5px solid var(--gold);
  font-family:var(--serif);font-style:italic;color:var(--wood);font-size:16px;
  margin-bottom:20px;
}
.team-card h3{font-size:1.15rem;margin-bottom:6px;}
.team-role{font-size:13.5px;color:var(--wood);margin:0;}

/* ============ Contact ============ */
.contact{background:var(--green-950);color:var(--cream);}
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;}
.contact-heading{color:#faf6ec;font-size:clamp(1.6rem,2.2vw,2.1rem);max-width:480px;}
.contact-sub{color:#cdc7b8;max-width:420px;margin-bottom:32px;}
.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-content:start;}
.contact-item{display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:#e6e1d2;}
.contact-label{font-size:12.5px;color:var(--gold-soft);letter-spacing:0.01em;margin-bottom:2px;}
.contact-item a:hover{color:var(--gold-soft);}

/* ============ Footer ============ */
.site-footer{background:var(--green-950);border-top:1px solid var(--line-on-dark);padding:26px 0 34px;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.footer-mark{height:22px;filter:brightness(0) invert(1);opacity:0.7;}
.footer-inner p{margin:0;font-size:12.5px;color:#a8a196;}

/* ============ Reveal-on-load hero animation ============ */
.hero-copy > *{opacity:0;transform:translateY(14px);animation:riseIn .7s ease forwards;}
.hero-eyebrow{animation-delay:.05s;}
.hero-title{animation-delay:.15s;}
.hero-sub{animation-delay:.28s;}
.hero-actions{animation-delay:.4s;}
@keyframes riseIn{to{opacity:1;transform:translateY(0);}}

/* ============ Responsive ============ */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;}
  .hero-media img{min-height:52vh;}
  .hero-copy{padding:120px 24px 50px;max-width:100%;}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:44px;}
  .about-media{margin-top:10px;}
  .about-media-small{left:0;bottom:-30px;width:55%;}
  .values-grid,.team-grid{grid-template-columns:1fr;gap:26px;}
  .contact-details{grid-template-columns:1fr 1fr;}
  .gallery{columns:2 200px;}
}
@media(max-width:640px){
  .main-nav{
    position:fixed;top:0;right:0;height:100vh;width:78vw;max-width:320px;
    background:var(--green-950);flex-direction:column;align-items:flex-start;
    padding:100px 30px;gap:26px;transform:translateX(100%);transition:transform .35s ease;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{color:var(--cream) !important;font-size:16px;}
  .nav-toggle{display:flex;}
  .site-header.solid .nav-toggle span{background:#f2ede1;}
  .site-header.solid{background:rgba(20,28,21,0.9);}
  .site-header.solid .main-nav a:not(.nav-cta){color:#f2ede1;}
  .section{padding:70px 0;}
  .service-row{grid-template-columns:1fr;gap:8px;}
  .gallery{columns:1;}
  .contact-details{grid-template-columns:1fr;}
  .vm-grid{grid-template-columns:1fr;}
}