@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --ink: #202221;
  --paper: #f3f0ea;
  --cream: #e9e4db;
  --accent: #b85f43;
  --accent-dark: #91452f;
  --sage: #6f786d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: "Manrope", sans-serif; }
a, button { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; }

.site-shell { overflow: hidden; }
.container-wide { width: min(1280px, calc(100% - 2rem)); margin-inline: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 600;
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.35rem;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.logo-mark {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--ink);
  font: 700 1rem/1 "Manrope", sans-serif;
}
.btn-primary, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.25rem;
  padding: .85rem 1.35rem;
  border: 1px solid var(--ink);
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .25s, background .25s, transform .25s;
}
.btn-primary { color: white; background: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.btn-outline:hover { color: white; background: var(--ink); transform: translateY(-2px); }
.hero-title { font-size: clamp(3rem, 8vw, 7.9rem); line-height: .92; letter-spacing: -.065em; }
.page-title { font-size: clamp(2.9rem, 7vw, 7rem); line-height: .95; letter-spacing: -.055em; }
.section-title { font-size: clamp(2.2rem, 4.5vw, 4.8rem); line-height: 1; letter-spacing: -.045em; }
.image-cover { height: 100%; object-fit: cover; }
.image-zoom { overflow: hidden; }
.image-zoom img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.image-zoom:hover img { transform: scale(1.035); }
.card-line { border-top: 1px solid rgba(32,34,33,.28); }
.service-card { transition: background .3s, color .3s, transform .3s; }
.service-card:hover { color: white; background: var(--ink); transform: translateY(-4px); }
.project-card .project-overlay {
  opacity: 0;
  transition: opacity .35s;
}
.project-card:hover .project-overlay { opacity: 1; }
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; animation: marquee 26s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.nav-panel { transition: opacity .25s, visibility .25s; }
.menu-open { overflow: hidden; }
.menu-open .nav-panel { opacity: 1; visibility: visible; }
.menu-open .menu-line:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-line:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-line { transition: transform .25s; }
.field {
  width: 100%;
  padding: 1rem 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(32,34,33,.4);
  outline: none;
}
.field:focus { border-color: var(--accent); }
.field::placeholder { color: #73736f; }
.map-frame { filter: grayscale(.25) sepia(.08); }
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  .container-wide { width: min(100% - 1.25rem, 1280px); }
  .hero-title { font-size: clamp(3.15rem, 16vw, 5.5rem); }
  .project-card .project-overlay { opacity: 1; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}