:root {
  --ink: #20221f;
  --green: #2f382b;
  --green-dark: #20251f;
  --hay: #b48a48;
  --hay-light: #d8c39a;
  --paper: #f4f0e6;
  --paper-dark: #e8e1d3;
  --line: rgba(32,34,31,.18);
  --muted: #66685f;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Sans 3", system-ui, sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(20px, calc((100vw - var(--max)) / 2));
  background: rgba(244,240,230,.97);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-name {
  font: 700 29px/.9 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .015em;
}
.brand-sub {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--muted);
}
.site-nav { display: flex; gap: 26px; align-items: center; }
.site-nav a {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { border-color: var(--ink); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 7px; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; }

.hero { border-bottom: 1px solid var(--line); }
.hero-grid {
  min-height: 650px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center;
  padding-block: 72px;
}
.location, .section-label {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}
h1, h2, h3 { margin: 0; }
h1 {
  max-width: 520px;
  font: 700 clamp(66px, 8vw, 108px)/.86 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.hero-text {
  max-width: 500px;
  margin: 28px 0 22px;
  font-size: 22px;
  line-height: 1.35;
  color: #44473f;
}
.text-link {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  font-weight: 700;
}

.field-art {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background: #b3ae94;
  border: 1px solid rgba(32,34,31,.25);
}
.sky { position: absolute; inset: 0 0 46% 0; background: #a6aca0; }
.horizon { position: absolute; inset: 43% 0 0; background: #8d8a62; }
.field-art::after {
  content: "";
  position: absolute;
  left: -15%; right: -15%; bottom: -9%; height: 55%;
  background: repeating-linear-gradient(8deg, #b79a5d 0 5px, #937a49 5px 8px, #c3a96f 8px 12px);
  transform: perspective(450px) rotateX(57deg);
  transform-origin: bottom;
}
.windrow { position: absolute; z-index: 2; height: 9px; background: #d1b677; transform: rotate(-5deg); box-shadow: 0 2px 0 #8f7546; }
.windrow-one { left: 8%; right: 38%; bottom: 25%; }
.windrow-two { left: 24%; right: 4%; bottom: 15%; }
.windrow-three { left: -4%; right: 60%; bottom: 8%; }
.bale { position: absolute; z-index: 3; width: 84px; height: 55px; background: #caa75f; border: 2px solid #7c663d; box-shadow: inset 0 0 0 5px rgba(255,255,255,.08); }
.bale::before, .bale::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: #66533a; }
.bale::before { left: 28%; }
.bale::after { right: 28%; }
.bale-one { right: 13%; bottom: 18%; }
.bale-two { right: 33%; bottom: 10%; transform: scale(.75); }
.bale-three { right: 48%; bottom: 29%; transform: scale(.5); }
.art-label {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  padding: 6px 9px;
  background: rgba(32,37,31,.86);
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.what-we-do { padding: 105px 0; }
.section-intro { max-width: 760px; margin-bottom: 64px; }
.section-intro h2, .area h2, .contact h2, .bale-copy h2 {
  font: 700 clamp(42px, 5vw, 66px)/.95 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.section-intro > p:last-child { max-width: 660px; margin: 26px 0 0; font-size: 18px; color: #53564e; }
.service-list { border-top: 1px solid var(--ink); }
.service-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.service-row h3 { font: 700 38px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.service-row p { max-width: 620px; margin: 3px 0 0; color: #5c5f57; font-size: 16px; }

.bale-feature { background: var(--green-dark); color: #f4f0e6; }
.bale-grid { min-height: 570px; display: grid; grid-template-columns: 1fr .85fr; gap: 90px; align-items: center; padding-block: 80px; }
.bale-graphic { position: relative; min-height: 370px; display: grid; place-items: center; }
.large-bale {
  position: relative;
  width: min(82%, 440px);
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(0deg, #b58d4e 0 5px, #a37d43 5px 8px, #c09b5d 8px 12px);
  border: 4px solid #8b6939;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.035);
}
.twine { position: absolute; top: 0; bottom: 0; width: 3px; background: #47423b; }
.twine-one { left: 24%; }.twine-two { left: 50%; }.twine-three { left: 76%; }
.dimension { position: absolute; font: 700 13px/1 "Source Sans 3", sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--hay-light); }
.dimension-top { top: 12px; left: 50%; transform: translateX(-50%); }
.dimension-side { left: 8px; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.section-label.light { color: var(--hay-light); }
.big-number { margin: 0; font: 700 clamp(90px, 11vw, 150px)/.78 "Barlow Condensed", sans-serif; color: var(--hay-light); }
.bale-copy h2 { margin-top: 20px; }
.bale-copy > p:last-child { max-width: 500px; margin: 26px 0 0; color: rgba(244,240,230,.7); font-size: 17px; }

.area { padding: 100px 0; background: var(--paper-dark); }
.area-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.area-copy { max-width: 640px; }
.area-copy > p:first-child { margin-top: 4px; font-size: 19px; color: #4f524a; }
.area-note { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }

.contact { padding: 100px 0; background: var(--green); color: #f4f0e6; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.contact-copy { max-width: 560px; }
.contact-copy > p:first-child { margin-top: 3px; color: rgba(244,240,230,.72); font-size: 18px; }
.contact-name { margin: 34px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); font-weight: 700; font-size: 20px; }
.contact-name + p { margin-top: 2px; color: rgba(244,240,230,.65); }

.site-footer { padding: 32px 0; background: #171a16; color: rgba(255,255,255,.62); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; font-size: 12px; }
.footer-inner > div { display: flex; align-items: baseline; gap: 14px; }
.footer-inner strong { color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.footer-inner span { text-transform: uppercase; letter-spacing: .07em; font-size: 10px; }

@media (max-width: 850px) {
  .site-nav { display: none; position: absolute; top: 74px; left: 0; right: 0; padding: 18px 20px 24px; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; }
  .site-nav.open { display: flex; }
  .menu-toggle { display: block; }
  .hero-grid, .bale-grid, .area-grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .hero-grid { padding-block: 58px; }
  .field-art { min-height: 390px; }
  .service-row { grid-template-columns: 1fr; gap: 12px; }
  .bale-grid { padding-block: 70px; }
}

@media (max-width: 560px) {
  .wrap { width: min(calc(100% - 28px), var(--max)); }
  .site-header { height: 68px; padding-inline: 14px; }
  .site-nav { top: 68px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 27px; }
  h1 { font-size: clamp(60px, 20vw, 82px); }
  .hero-text { font-size: 18px; }
  .field-art { min-height: 310px; }
  .art-label { font-size: 9px; }
  .what-we-do, .area, .contact { padding: 76px 0; }
  .section-intro { margin-bottom: 44px; }
  .service-row { padding: 24px 0; }
  .bale-graphic { min-height: 290px; }
  .footer-inner, .footer-inner > div { flex-direction: column; align-items: flex-start; gap: 8px; }
}