:root{
  --paper:#F2EEE6;
  --charcoal:#282828;
  --forest:#304038;
  --olive:#98A058;
  --ink:#1F211F
}
*{
  box-sizing:border-box
}

html,body{
  height:100%
}

body{
  margin:0;
  font-family:'Merriweather',serif;
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6
}
.wrap{
  width:min(1100px,92vw);
  margin-inline:auto
}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(to bottom,rgba(242,238,230,.97),rgba(242,238,230,.86));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,0,0,.05)
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem 0
}
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--forest);
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  letter-spacing:.02em
}
.brand .brand-text{
  font-size:1.15rem;
  text-transform:uppercase
}

.logo-mark{
  width:28px;
  height:28px;
  background:var(--olive);
  border-radius:6px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)
}
.nav a{
  margin-left:1rem;
  text-decoration:none;
  color:var(--ink);
  font-family:'Montserrat',sans-serif
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.7rem 1rem;
  border-radius:12px;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--forest);
  color:var(--forest);
  background:transparent
}
.btn.primary{
  background:var(--olive);
  color:#0f130e;
  border-color:var(--olive)
}

.btn.ghost{
  background:transparent
}
.hero{
  padding:6rem 0 4rem;
  background:radial-gradient(1200px 400px at 75% 10%,rgba(152,160,88,.25),transparent 60%),linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 100%)
}
.hero-inner{
  display:grid;
  align-items:center;
  gap:3rem;
  grid-template-columns:1.05fr .95fr
}
.hero h1{
  font-family:'Montserrat',sans-serif;
  color:var(--forest);
  font-size:clamp(2rem,3.2vw + .8rem,3.2rem);
  line-height:1.1;
  margin:0 0 .75rem;
  letter-spacing:.01em;
  text-transform:uppercase
}

/* Social icons (small) */
.social {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 1rem;  /* add space above the icons */
}

.social a,
.social img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.lead{
  font-size:clamp(1.05rem,1.1vw + .4rem,1.25rem);
  margin:0 0 1rem
}

.cta{
  display:flex;
  gap:.75rem;
  margin:1.25rem 0 0
}
.hero-card{
  display:flex;
  justify-content:center
}

.card{
  width:min(420px,85%);
  aspect-ratio:2.2/3.5;
  position:relative;
  perspective:1200px
}
.card-front,.card-back{
  position:absolute;
  inset:0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  backface-visibility:hidden;
  transform-style:preserve-3d
}
.card-front{
  background:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:1.25rem;
  border:1px solid rgba(0,0,0,.06)
}
.pw-title{
  font-family:'Montserrat',sans-serif;
  color:var(--forest);
  text-align:center;
  letter-spacing:.04em
}

.pw-title span{
  display:block;
  font-weight:800;
  font-size:clamp(1.6rem,2.8vw + .4rem,2.6rem)
}
.pw-tag{
  margin-top:1.2rem;
  font-size:.9rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
  opacity:.8
}

.pw-band{
  height:54px;
  background:var(--olive);
  width:100%;
  position:absolute;
  bottom:0;
  left:0
}
.card-back{
  background:var(--charcoal);
  color:#f1f1f1;
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  gap:.4rem;
  justify-content:center;
  align-items:flex-start;
  padding:2rem
}
.services{
  padding:3.5rem 0
}

.services h2,.gallery h2,.about h2{
  font-family:'Montserrat',sans-serif;
  color:var(--forest);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 1.2rem
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem
}

.tile{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:1.2rem;
  box-shadow:0 10px 20px rgba(0,0,0,.06)
}
.gallery{
  padding:3rem 0
}

.shots{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(3,1fr)
}

.shot{
  border-radius:14px;
  height:180px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03),0 6px 18px rgba(0,0,0,.05)
}

.about{
  padding:3.5rem 0
}

.about-inner{
  display:grid;
  gap:2rem;
  grid-template-columns:1.1fr .9fr;
  align-items:start
}
.site-footer{
  padding:2rem 0;
  border-top:1px solid rgba(0,0,0,.07);
  background:#fff
}

.site-footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem
}
.brand.foot .brand-text{
  font-size:1rem;
  color:var(--forest)
}
@media (max-width:900px){
  .hero-inner{
  grid-template-columns:1fr
}

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

.shots{
  grid-template-columns:1fr 1fr
}

.about-inner{
  grid-template-columns:1fr
}
}

/* Featured Work grid */
.gallery .shots {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Featured Work grid */
.gallery .shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* exactly 3 columns */
  grid-template-rows: repeat(2, auto);   /* exactly 2 rows */
  gap: 24px;
}

/* Image should fill the tile */
.gallery .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* crop to fill without distortion */
  display: block;
  transition: transform .35s ease;
}

/* Subtle hover */
.gallery .shot:hover img {
  transform: scale(1.03);
}

.woodgrain{
  background-image:linear-gradient(12deg,rgba(0,0,0,.06),rgba(0,0,0,0)),repeating-linear-gradient(90deg,rgba(48,64,48,.12) 0,rgba(48,64,48,.12) 10px,rgba(152,160,88,.10) 10px,rgba(152,160,88,.10) 20px)
}

/* ----------------------------------- */
/* ---------- Project pages ---------- */
/* ----------------------------------- */
body.project .project-hero {
  padding: 2.5rem 0 0.5rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0));
}
body.project .crumb {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: .95rem;
  opacity: .7;
  text-decoration: none;
}
body.project h1 {
  margin: 0 0 .5rem;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
}
.project-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 1.25rem;
}
.project-meta .badge {
  background: #e7eddc;         /* soft green tint */
  color: #314432;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 600;
  font-size: .9rem;
}
.project-meta .price {
  font-weight: 800;
  font-size: 1.2rem;
}

.project-body { padding: 1rem 0 3rem; }
.project-layout {
  display: grid;
  grid-template-columns: 1.2fr .9fr; /* gallery : details */
  gap: 36px;
}
@media (max-width: 900px) {
  .project-layout { grid-template-columns: 1fr; }
}

.project .gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Make images responsive and prevent overlap */
.project .gallery img {
  width: 100%;
  height: 240px;     /* pick a mobile-friendly height */
  object-fit: cover; /* crops edges, keeps proportions */
  display: block;
  border-radius: 16px; /* if you’re rounding corners */
  overflow: hidden;
}

/* Stack on phones */
@media (max-width: 768px) {
  .project .gallery {
    grid-template-columns: 1fr;  /* 1 column on mobile */
    gap: 14px;
  }
}


.project article.details h2 { margin-top: 0; }
.project article.details .specs {
  margin: .25rem 0 1.25rem;
  padding-left: 1.1rem;
}
.project article.details .ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: .75rem 0 1rem;
}
.project .notes .small {
  opacity: .75;
  font-size: .9rem;
}

/* ----------------------------------- */
/* ---------- Order Form ---------- */
/* ----------------------------------- */

.order {
  padding: 4rem 0;
  background: #f8f7f2; /* light neutral, same vibe as hero/about */
}

.order h2 {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Form layout */
.order-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-form .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.order-form input,
.order-form select,
.order-form textarea {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  width: 100%;
}

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

/* Button already styled by .btn / .primary */
.order-form button {
  align-self: flex-start;
}