:root {
  --forest: #17392f;
  --deep-forest: #102c25;
  --leaf: #577564;
  --cream: #f3efe6;
  --paper: #fbfaf6;
  --stone: #d8d1c4;
  --ink: #1e2a26;
  --muted: #64716d;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.04em;
}
h1 { color: var(--white); font-size: clamp(3.4rem, 7vw, 6.7rem); margin: 0 0 1.4rem; }
h1 em { color: #d7dfd1; font-weight: 400; }
h2 { font-size: clamp(2.3rem, 4vw, 4rem); }
h3 { font-size: 1.12rem; line-height: 1.3; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.section { padding: 7rem max(6vw, calc((100vw - 1320px) / 2)); }
.eyebrow {
  color: var(--leaf);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .17em;
  margin-bottom: 1.3rem;
  text-transform: uppercase;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--forest);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 1.15rem 1.6rem;
  text-transform: uppercase;
  transition: background .2s, transform .2s;
}
.button:hover { background: var(--deep-forest); transform: translateY(-2px); }
.button-small { padding: .8rem 1.1rem; }
.text-link {
  color: var(--white);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.text-link span { display: inline-block; margin-left: .4rem; transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }
.text-link.dark { color: var(--forest); }
.concept-banner {
  background: var(--deep-forest);
  color: #dce6df;
  font-size: .68rem;
  letter-spacing: .08em;
  padding: .42rem;
  text-align: center;
  text-transform: uppercase;
}
.site-header {
  align-items: center;
  background: var(--paper);
  display: flex;
  justify-content: space-between;
  min-height: 82px;
  padding: 0 6vw;
}
.brand { align-items: center; display: flex; gap: .7rem; }
.brand-mark {
  align-items: center;
  background: var(--forest);
  border-radius: 50%;
  color: var(--paper);
  display: flex;
  font-family: "Libre Baskerville", Georgia, serif;
  height: 42px;
  justify-content: center;
  width: 42px;
}
.brand strong, .brand small { display: block; line-height: 1; text-transform: uppercase; }
.brand strong { font-family: "Libre Baskerville", Georgia, serif; font-size: .93rem; letter-spacing: .07em; }
.brand small { color: var(--leaf); font-size: .56rem; font-weight: 700; letter-spacing: .32em; margin-top: .35rem; }
.site-nav { align-items: center; display: flex; gap: 2.1rem; }
.site-nav a { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.menu-toggle { display: none; }
.hero { min-height: 760px; overflow: hidden; position: relative; }
.hero-image {
  background: url("https://images.unsplash.com/photo-1776186243408-3c0489503faa?auto=format&fit=crop&w=2200&q=90") center/cover;
  inset: 0;
  position: absolute;
}
.hero-shade { background: linear-gradient(90deg, rgba(11,36,29,.84), rgba(11,36,29,.34) 62%, rgba(11,36,29,.05)); inset: 0; position: absolute; }
.hero-content { max-width: 870px; padding: 10.5rem 6vw 7rem; position: relative; }
.hero .eyebrow { color: #c8d4cd; }
.hero-copy { color: #edf2ed; font-size: 1.05rem; max-width: 540px; }
.hero-actions { align-items: center; display: flex; gap: 1.7rem; margin-top: 2rem; }
.hero .button { background: var(--paper); color: var(--forest); }
.hero-card {
  background: var(--cream);
  bottom: 0;
  color: var(--forest);
  padding: 2rem 2.5rem;
  position: absolute;
  right: 6vw;
  width: 270px;
}
.hero-card span, .hero-card strong, .hero-card a { display: block; }
.hero-card span { color: var(--leaf); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-card strong { font-family: "Libre Baskerville", Georgia, serif; font-size: 1.35rem; line-height: 1.35; margin: .6rem 0 1rem; }
.hero-card a { font-size: .76rem; font-weight: 700; letter-spacing: .1em; }
.intro { display: grid; gap: 6vw; grid-template-columns: 1fr 1fr; }
.intro h2 { margin-bottom: 0; max-width: 570px; }
.lead { color: var(--muted); font-size: 1.25rem; max-width: 600px; }
.services { background: var(--cream); }
.section-heading { max-width: 720px; }
.service-grid { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); margin-top: 4rem; }
.service-grid article { border-left: 1px solid var(--stone); padding: 0 1.8rem; }
.service-grid span, .process li > span { color: var(--leaf); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .15em; margin-bottom: 2.3rem; }
.service-grid p, .split-heading > p, .process p { color: var(--muted); font-size: .94rem; }
.split-heading { display: grid; gap: 6vw; grid-template-columns: 1fr .7fr; max-width: none; }
.project-grid {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: repeat(2, 290px);
  margin-top: 3.5rem;
}
.project { overflow: hidden; position: relative; }
.project-large { grid-row: 1 / 3; }
.project img { height: 100%; object-fit: cover; transition: transform .5s; width: 100%; }
.project:hover img { transform: scale(1.04); }
.project::after { background: linear-gradient(transparent, rgba(10,27,22,.75)); bottom: 0; content: ""; height: 50%; left: 0; position: absolute; right: 0; }
.project div { bottom: 0; color: var(--white); padding: 1.6rem; position: absolute; z-index: 1; }
.project span { font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.project h3 { font-family: "Libre Baskerville", Georgia, serif; font-size: 1.42rem; font-weight: 400; margin: .35rem 0 0; }
.about { background: var(--forest); color: var(--white); display: grid; grid-template-columns: 1fr 1fr; }
.about-image img { height: 100%; object-fit: cover; width: 100%; }
.about-content { padding: 6.5rem 6vw; }
.about-content .eyebrow { color: #a8c0b4; }
.about-content p { color: #d7e1dd; max-width: 620px; }
.about-facts { border-top: 1px solid rgba(255,255,255,.25); display: flex; gap: 2rem; margin-top: 3rem; padding-top: 2rem; }
.about-facts strong, .about-facts span { display: block; }
.about-facts strong { color: var(--white); font-family: "Libre Baskerville", Georgia, serif; font-size: 2rem; font-weight: 400; }
.about-facts span { color: #aec0ba; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.concept-note { font-size: .72rem; margin-top: 2.4rem; opacity: .72; }
.process ol { list-style: none; margin: 3.5rem 0 0; padding: 0; }
.process li { border-top: 1px solid var(--stone); display: grid; gap: 2rem; grid-template-columns: 70px 1fr; padding: 1.7rem 0; }
.process li > span { margin: .15rem 0 0; }
.process h3, .process p { margin-bottom: .45rem; }
.contact { background: var(--cream); display: grid; gap: 8vw; grid-template-columns: 1fr 1.15fr; padding: 7rem 6vw; }
.contact-copy h2 { max-width: 590px; }
.contact-copy p { color: var(--muted); max-width: 520px; }
.contact-copy a { color: var(--forest); display: block; font-weight: 700; margin-top: .35rem; }
.quote-form { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.quote-form label { color: var(--forest); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.quote-form input, .quote-form select, .quote-form textarea {
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: 0;
  color: var(--ink);
  display: block;
  font: inherit;
  margin-top: .45rem;
  padding: .85rem;
  width: 100%;
}
.full-width { grid-column: 1 / -1; }
.form-message { color: var(--forest); font-size: .9rem; margin: 0; }
footer { align-items: center; background: var(--deep-forest); color: #bdcbc5; display: flex; gap: 3rem; justify-content: space-between; padding: 2rem 6vw; }
footer .brand-mark { background: var(--paper); color: var(--forest); }
footer .brand strong { color: var(--white); }
footer p, footer > span { font-size: .72rem; margin: 0; }
.studio-credit { align-items: center; display: flex; gap: .75rem; }
.studio-credit span { color: #bdcbc5; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.studio-credit img { background: var(--cream); height: 42px; object-fit: contain; padding: .35rem .55rem; width: 142px; }
.mobile-call { display: none; }

@media (max-width: 820px) {
  body { padding-bottom: 54px; }
  .section { padding: 5rem 6vw; }
  .site-header { min-height: 72px; }
  .menu-toggle { background: none; border: 0; display: block; padding: .4rem; }
  .menu-toggle span:not(.sr-only) { background: var(--forest); display: block; height: 2px; margin: 5px; width: 23px; }
  .site-nav { align-items: stretch; background: var(--paper); display: none; flex-direction: column; gap: 0; left: 0; padding: 1rem 6vw 1.4rem; position: absolute; right: 0; top: 103px; z-index: 4; }
  .site-nav.open { display: flex; }
  .site-nav a { border-top: 1px solid var(--stone); padding: 1rem 0; }
  .site-nav .button { border-top: 0; margin-top: .7rem; padding: .9rem; }
  .hero { min-height: 660px; }
  .hero-content { padding: 8.5rem 6vw 5rem; }
  .hero-card { display: none; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .intro, .split-heading, .about, .contact { grid-template-columns: 1fr; }
  .intro { gap: 1.5rem; }
  .service-grid { gap: 2rem; grid-template-columns: 1fr 1fr; }
  .project-grid { display: block; }
  .project { height: 300px; margin-bottom: 1rem; }
  .about-image { height: 350px; }
  .about-content { padding: 5rem 6vw; }
  .about-facts { gap: 1rem; }
  .about-facts strong { font-size: 1.55rem; }
  footer { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .mobile-call { background: var(--forest); bottom: 0; color: var(--white); display: block; font-size: .73rem; font-weight: 700; left: 0; letter-spacing: .12em; padding: 1rem; position: fixed; right: 0; text-align: center; text-transform: uppercase; z-index: 5; }
}

@media (max-width: 520px) {
  h1 { font-size: 3.2rem; }
  .concept-banner { font-size: .56rem; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article { padding-left: 1.3rem; }
  .about-facts { flex-wrap: wrap; }
  .about-facts div { width: 45%; }
  .quote-form { grid-template-columns: 1fr; }
  .quote-form label { grid-column: 1; }
}