/*
Theme Name: Spunky Cow Astra Child
Theme URI: https://spunkycow.com/
Description: Astra child theme for a friendly web design business with a modern cow, barn, and pasture-inspired homepage.
Author: Spunky Cow
Template: astra
Version: 1.0.9
Text Domain: spunkycow-astra-child
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,500..800,55&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --sc-cream: #fff9ec;
  --sc-milk: #fffef8;
  --sc-grass: #dceec8;
  --sc-field: #a9c987;
  --sc-pasture: #426b45;
  --sc-pasture-dark: #244332;
  --sc-barn: #b93f36;
  --sc-barn-dark: #7f2e28;
  --sc-sky: #d9ecf3;
  --sc-hay: #f2c96d;
  --sc-ink: #1d211a;
  --sc-muted: #5d6958;
  --sc-line: rgba(36, 67, 50, 0.18);
  --sc-shadow: 0 24px 60px rgba(36, 67, 50, 0.14);
  --sc-radius: 8px;
}

body {
  background: var(--sc-cream);
  color: var(--sc-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-content,
.ast-container,
.entry-content {
  padding: 0;
  margin: 0;
  max-width: none;
}

.ast-container {
  display: block;
}

.entry-title,
.site-header,
.site-footer,
#masthead,
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header-bar,
.ast-below-header-bar {
  display: none;
}

.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
  background: transparent;
  padding: 0;
}

.sc-page {
  background:
    linear-gradient(180deg, #d9ecf3 0, #eff7df 26rem, var(--sc-cream) 26rem),
    repeating-linear-gradient(90deg, rgba(36, 67, 50, 0.035) 0 1px, transparent 1px 38px),
    var(--sc-cream);
  color: var(--sc-ink);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.sc-page::after {
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(66, 107, 69, 0.12) 48% 52%, transparent 53%),
    linear-gradient(45deg, transparent 0 47%, rgba(66, 107, 69, 0.1) 48% 52%, transparent 53%);
  background-size: 180px 180px;
  bottom: 0;
  content: "";
  height: 24rem;
  left: -4rem;
  opacity: 0.75;
  pointer-events: none;
  position: absolute;
  right: -4rem;
}

.sc-shell {
  margin: 0 auto;
  position: relative;
  width: min(1180px, calc(100% - 40px));
  z-index: 1;
}

.sc-topbar {
  align-items: center;
  display: grid;
  gap: 22px;
  grid-template-columns: auto 1fr;
  margin-top: 12px;
  padding: 8px 0 4px;
}

.sc-brand {
  align-items: center;
  color: var(--sc-ink);
  display: inline-flex;
  gap: 12px;
  justify-self: start;
  text-decoration: none;
}

.sc-brand img {
  background: var(--sc-milk);
  border: 2px solid var(--sc-pasture-dark);
  border-radius: 50%;
  box-shadow: 0 7px 0 rgba(185, 63, 54, 0.18);
  height: 64px;
  object-fit: contain;
  padding: 6px;
  width: 64px;
}

.sc-brand span {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 800;
  line-height: 0.94;
}

.sc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.sc-nav a,
.sc-kicker,
.sc-tag {
  color: var(--sc-pasture-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sc-nav a {
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 8px 11px;
  text-decoration: none;
}

.sc-nav a:hover,
.sc-nav a:focus {
  background: rgba(255, 254, 248, 0.72);
  border-color: var(--sc-pasture-dark);
  color: var(--sc-barn-dark);
}

.sc-hero {
  display: grid;
  gap: clamp(26px, 5vw, 58px);
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  min-height: min(720px, calc(100vh - 110px));
  padding: clamp(34px, 6vw, 78px) 0 38px;
}

.sc-hero-main {
  align-self: center;
  max-width: 900px;
}

.sc-hero h1,
.sc-section h2,
.sc-service h3,
.sc-hero-aside p,
.sc-price strong,
.sc-contact h2 {
  color: var(--sc-pasture-dark);
  font-family: Fraunces, Georgia, serif;
  font-weight: 800;
  letter-spacing: 0;
}

.sc-hero h1 {
  font-size: clamp(58px, 10vw, 132px);
  line-height: 0.84;
  margin: 12px 0 0;
  max-width: 820px;
}

.sc-hero h1 em {
  color: var(--sc-barn);
  font-style: normal;
}

.sc-hero-lede {
  color: var(--sc-muted);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.42;
  margin: 22px 0 0;
  max-width: 680px;
}

.sc-hero-aside {
  align-self: stretch;
  min-height: 500px;
  padding: 28px;
  position: relative;
}

.sc-pasture-card {
  background:
    linear-gradient(180deg, rgba(217, 236, 243, 0.88) 0 38%, transparent 38%),
    radial-gradient(ellipse at 50% 100%, #8eb86b 0 38%, #6e9f56 39% 56%, #426b45 57% 100%);
  border: 3px solid var(--sc-pasture-dark);
  border-radius: 26px 26px var(--sc-radius) var(--sc-radius);
  box-shadow: 14px 14px 0 rgba(185, 63, 54, 0.24), var(--sc-shadow);
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-height: 100%;
  overflow: hidden;
  padding: 26px;
  position: relative;
}

.sc-pasture-card::before {
  background:
    linear-gradient(var(--sc-milk) 0 0) 0 32px / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 254, 248, 0.74) 0 10px, transparent 10px 66px);
  bottom: 108px;
  content: "";
  height: 72px;
  left: 0;
  position: absolute;
  right: 0;
}

.sc-pasture-card::after {
  background: linear-gradient(180deg, rgba(36, 67, 50, 0), rgba(36, 67, 50, 0.28));
  bottom: 0;
  content: "";
  height: 108px;
  left: 0;
  position: absolute;
  right: 0;
  opacity: 0.55;
}

.sc-sun {
  background: var(--sc-hay);
  border: 3px solid var(--sc-pasture-dark);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(242, 201, 109, 0.25);
  height: 76px;
  position: absolute;
  right: 26px;
  top: 26px;
  width: 76px;
}

.sc-barn-graphic {
  align-self: end;
  background:
    linear-gradient(135deg, transparent 0 46%, var(--sc-barn-dark) 47% 53%, transparent 54%),
    repeating-linear-gradient(90deg, var(--sc-barn) 0 26px, var(--sc-barn-dark) 26px 31px);
  border: 4px solid var(--sc-pasture-dark);
  border-radius: 10px 10px 6px 6px;
  box-shadow: 12px 13px 0 rgba(36, 67, 50, 0.18);
  height: 190px;
  justify-self: center;
  margin-bottom: 104px;
  position: relative;
  width: min(78%, 330px);
  z-index: 1;
}

.sc-barn-graphic::before {
  border-bottom: 86px solid var(--sc-barn-dark);
  border-left: 174px solid transparent;
  border-right: 174px solid transparent;
  content: "";
  left: 50%;
  position: absolute;
  top: -90px;
  transform: translateX(-50%);
  width: 0;
}

.sc-barn-graphic::after {
  background:
    linear-gradient(135deg, transparent 0 47%, var(--sc-milk) 48% 52%, transparent 53%),
    linear-gradient(45deg, transparent 0 47%, var(--sc-milk) 48% 52%, transparent 53%),
    var(--sc-barn-dark);
  border: 3px solid var(--sc-pasture-dark);
  bottom: 0;
  content: "";
  height: 84px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 96px;
}

.sc-barn-graphic span {
  background: var(--sc-milk);
  border: 3px solid var(--sc-pasture-dark);
  height: 42px;
  left: 34px;
  position: absolute;
  top: 38px;
  width: 48px;
}

.sc-pasture-card p {
  align-self: end;
  color: var(--sc-milk);
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 0.94;
  margin: 0;
  position: relative;
  z-index: 1;
}

.sc-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.sc-button {
  align-items: center;
  background: var(--sc-barn);
  border: 2px solid var(--sc-barn);
  border-radius: var(--sc-radius);
  box-shadow: 0 8px 0 var(--sc-barn-dark);
  color: var(--sc-milk);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  min-height: 48px;
  padding: 13px 17px;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.sc-button:hover,
.sc-button:focus {
  background: var(--sc-pasture-dark);
  border-color: var(--sc-pasture-dark);
  box-shadow: 0 5px 0 #15271e;
  color: var(--sc-milk);
  transform: translateY(3px);
}

.sc-button.is-light {
  background: var(--sc-milk);
  border-color: var(--sc-pasture-dark);
  box-shadow: 0 8px 0 rgba(36, 67, 50, 0.22);
  color: var(--sc-pasture-dark);
}

.sc-button.is-light:hover,
.sc-button.is-light:focus {
  background: var(--sc-grass);
  color: var(--sc-pasture-dark);
}

.sc-section {
  padding: 54px 0;
}

.sc-section-header {
  align-items: start;
  display: grid;
  gap: 32px;
  grid-template-columns: 0.82fr 1.18fr;
}

.sc-section-header::before {
  background:
    linear-gradient(90deg, var(--sc-barn) 0 72px, transparent 72px),
    linear-gradient(90deg, var(--sc-line), var(--sc-line));
  content: "";
  grid-column: 1 / -1;
  height: 4px;
  margin-bottom: 4px;
  width: 100%;
}

.sc-section h2 {
  font-size: clamp(42px, 6.5vw, 78px);
  line-height: 0.98;
  margin: 8px 0 0;
}

.sc-section-header p {
  color: var(--sc-muted);
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.5;
  margin: 6px 0 0;
}

.sc-copy-stack {
  display: grid;
  gap: 14px;
}

.sc-copy-stack p {
  margin: 0;
}

.sc-copy-stack .sc-promise {
  color: var(--sc-pasture-dark);
  font-weight: 800;
}

.sc-services {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
  padding: 8px 0 28px;
  position: relative;
}

.sc-service {
  background:
    radial-gradient(ellipse at 10% 16%, rgba(169, 201, 135, 0.34) 0 56px, transparent 57px),
    radial-gradient(ellipse at 92% 18%, rgba(185, 63, 54, 0.11) 0 60px, transparent 61px),
    radial-gradient(ellipse at 86% 84%, rgba(242, 201, 109, 0.25) 0 58px, transparent 59px),
    linear-gradient(180deg, rgba(255, 254, 248, 0.96), rgba(255, 249, 236, 0.98));
  border: 3px solid var(--sc-pasture-dark);
  border-radius: 32% 68% 58% 42% / 52% 34% 66% 48%;
  box-shadow: 12px 14px 0 rgba(36, 67, 50, 0.14);
  display: grid;
  min-height: 350px;
  overflow: hidden;
  padding: 58px 34px 44px;
  position: relative;
}

.sc-service::before {
  display: none;
}

.sc-service::after {
  display: none;
}

.sc-service:nth-child(2) {
  background:
    radial-gradient(ellipse at 11% 18%, rgba(66, 107, 69, 0.22) 0 52px, transparent 53px),
    radial-gradient(ellipse at 93% 19%, rgba(169, 201, 135, 0.36) 0 64px, transparent 65px),
    radial-gradient(ellipse at 10% 88%, rgba(242, 201, 109, 0.24) 0 62px, transparent 63px),
    linear-gradient(180deg, rgba(255, 254, 248, 0.96), rgba(239, 247, 223, 0.98));
  border-radius: 68% 32% 44% 56% / 38% 62% 42% 58%;
  transform: translateY(26px);
}

.sc-service:nth-child(2)::before {
  display: none;
}

.sc-service:nth-child(3) {
  background:
    radial-gradient(ellipse at 10% 16%, rgba(242, 201, 109, 0.25) 0 58px, transparent 59px),
    radial-gradient(ellipse at 90% 16%, rgba(185, 63, 54, 0.12) 0 52px, transparent 53px),
    radial-gradient(ellipse at 92% 82%, rgba(66, 107, 69, 0.18) 0 66px, transparent 67px),
    linear-gradient(180deg, rgba(255, 254, 248, 0.96), rgba(255, 249, 236, 0.98));
  border-radius: 38% 62% 70% 30% / 62% 38% 52% 48%;
}

.sc-service:nth-child(3)::before {
  display: none;
}

.sc-service .sc-tag {
  align-self: start;
  background: var(--sc-milk);
  border: 2px solid var(--sc-pasture-dark);
  border-radius: 60% 40% 54% 46%;
  box-shadow: 5px 6px 0 rgba(36, 67, 50, 0.14);
  color: var(--sc-milk);
  color: var(--sc-pasture-dark);
  justify-self: start;
  line-height: 1;
  display: block;
  margin: 0 0 24px;
  padding: 10px 13px;
  position: relative;
  transform: rotate(-3deg);
  z-index: 1;
}

.sc-service h3 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.02;
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
}

.sc-service p,
.sc-process p,
.sc-price p,
.sc-contact p {
  color: var(--sc-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
}

.sc-process {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(169, 201, 135, 0.78) 0 64%, transparent 65%),
    linear-gradient(180deg, rgba(220, 238, 200, 0.58), rgba(255, 249, 236, 0.1));
  border: 0;
  border-radius: 46px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 38px;
  padding: 70px 34px 62px;
  position: relative;
}

.sc-process::before {
  background:
    linear-gradient(var(--sc-pasture-dark) 0 0) 0 26px / 100% 7px no-repeat,
    linear-gradient(var(--sc-pasture-dark) 0 0) 0 calc(100% - 34px) / 100% 7px no-repeat;
  content: "";
  inset: 12px 0 10px;
  opacity: 0.34;
  position: absolute;
  z-index: 0;
}

.sc-process::after {
  display: none;
}

.sc-process article {
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  min-height: 370px;
  margin: -12px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.sc-process article:nth-child(even) {
  transform: translateY(34px);
}

.sc-process article:nth-child(4) {
  grid-column: 2 / span 2;
}

.sc-process article:nth-child(5) {
  grid-column: 4 / span 2;
}

.sc-process article::before {
  background: var(--sc-pasture-dark);
  bottom: 0;
  content: "";
  height: 92px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 8px;
  z-index: 0;
}

.sc-process article::after {
  background:
    radial-gradient(ellipse at 8% 18%, rgba(169, 201, 135, 0.28) 0 54px, transparent 55px),
    radial-gradient(ellipse at 92% 16%, rgba(242, 201, 109, 0.22) 0 62px, transparent 63px),
    radial-gradient(ellipse at 90% 83%, rgba(185, 63, 54, 0.09) 0 58px, transparent 59px),
    linear-gradient(180deg, rgba(255, 254, 248, 0.98), rgba(255, 249, 236, 0.98));
  border: 3px solid var(--sc-pasture-dark);
  border-radius: 58% 42% 54% 46% / 46% 56% 44% 54%;
  box-shadow: 8px 9px 0 rgba(36, 67, 50, 0.14);
  content: "";
  inset: 0 0 74px;
  position: absolute;
  transform: rotate(-2deg);
  z-index: 0;
}

.sc-process article:nth-child(2)::after,
.sc-process article:nth-child(4)::after {
  border-radius: 42% 58% 38% 62% / 58% 40% 60% 42%;
  transform: rotate(2deg);
}

.sc-process article:nth-child(3)::after {
  background:
    radial-gradient(ellipse at 7% 20%, rgba(169, 201, 135, 0.28) 0 54px, transparent 55px),
    radial-gradient(ellipse at 92% 20%, rgba(185, 63, 54, 0.1) 0 62px, transparent 63px),
    radial-gradient(ellipse at 12% 84%, rgba(242, 201, 109, 0.24) 0 56px, transparent 57px),
    repeating-linear-gradient(90deg, rgba(185, 63, 54, 0.12) 0 16px, transparent 16px 34px),
    linear-gradient(180deg, rgba(255, 254, 248, 0.96), rgba(255, 249, 236, 0.98));
  border-radius: 56% 44% 48% 52% / 36% 60% 40% 64%;
}

.sc-process article:nth-child(5)::after {
  background:
    radial-gradient(ellipse at 8% 18%, rgba(66, 107, 69, 0.2) 0 56px, transparent 57px),
    radial-gradient(ellipse at 90% 17%, rgba(169, 201, 135, 0.34) 0 64px, transparent 65px),
    radial-gradient(ellipse at 86% 84%, rgba(242, 201, 109, 0.2) 0 54px, transparent 55px),
    linear-gradient(180deg, rgba(255, 254, 248, 0.98), rgba(239, 247, 223, 0.98));
  border-radius: 48% 52% 60% 40% / 58% 42% 56% 44%;
}

.sc-process strong {
  align-items: center;
  background: var(--sc-barn);
  border: 3px solid var(--sc-pasture-dark);
  border-radius: 50%;
  color: var(--sc-milk);
  display: inline-flex;
  font-family: Fraunces, Georgia, serif;
  font-size: 28px;
  font-weight: 800;
  height: 54px;
  justify-content: center;
  line-height: 1;
  margin: 48px 44px 18px;
  position: relative;
  width: 54px;
  z-index: 1;
}

.sc-process h3 {
  color: var(--sc-pasture-dark);
  font-size: 18px;
  font-weight: 800;
  margin: 0 44px 12px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.sc-process p {
  color: var(--sc-ink);
  font-size: 16px;
  font-weight: 600;
  margin: 0 44px;
}

.sc-process h3:last-child {
  margin-bottom: 0;
}

.sc-pricing {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  margin-top: 30px;
}

.sc-price {
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  display: grid;
  min-height: 320px;
  padding: 26px;
}

.sc-price:first-child {
  background:
    linear-gradient(135deg, rgba(255, 254, 248, 0.1) 0 14%, transparent 14% 28%, rgba(255, 254, 248, 0.08) 28% 42%, transparent 42%),
    var(--sc-barn);
  color: var(--sc-milk);
}

.sc-price:first-child strong,
.sc-price:first-child h3,
.sc-price:first-child p,
.sc-price:first-child .sc-tag {
  color: var(--sc-milk);
}

.sc-price:last-child {
  background: var(--sc-milk);
  border: 1px solid var(--sc-line);
}

.sc-price strong {
  align-self: end;
  display: block;
  font-size: clamp(64px, 9vw, 104px);
  line-height: 0.86;
  margin: 48px 0 18px;
}

.sc-price strong span {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.sc-contact {
  background:
    linear-gradient(180deg, rgba(255, 254, 248, 0.1), rgba(255, 254, 248, 0)),
    var(--sc-pasture-dark);
  color: var(--sc-milk);
  margin-top: 42px;
  padding: clamp(38px, 7vw, 78px) 0;
  position: relative;
}

.sc-contact::before {
  background:
    linear-gradient(var(--sc-milk) 0 0) 0 25px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 254, 248, 0.3) 0 7px, transparent 7px 72px);
  content: "";
  height: 58px;
  left: 0;
  opacity: 0.42;
  position: absolute;
  right: 0;
  top: 0;
}

.sc-contact .sc-shell {
  align-items: start;
  display: grid;
  gap: 34px;
  grid-template-columns: 1.2fr 0.8fr;
}

.sc-contact h2 {
  color: var(--sc-milk);
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.96;
  margin: 0;
}

.sc-contact p {
  color: rgba(255, 254, 248, 0.82);
  font-size: 18px;
  margin-bottom: 20px;
}

.sc-contact .sc-kicker {
  color: var(--sc-hay);
}

.sc-inquiry-form {
  background:
    radial-gradient(ellipse at 10% 12%, rgba(29, 33, 26, 0.08) 0 32px, transparent 33px),
    radial-gradient(ellipse at 92% 18%, rgba(29, 33, 26, 0.07) 0 38px, transparent 39px),
    var(--sc-milk);
  border: 3px solid var(--sc-pasture-dark);
  border-radius: var(--sc-radius);
  box-shadow: 12px 14px 0 rgba(23, 38, 31, 0.28);
  color: var(--sc-ink);
  padding: 24px;
}

.sc-form-status {
  color: var(--sc-barn-dark);
  font-weight: 800;
  margin: 0 0 14px;
}

.sc-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.sc-inquiry-form label,
.sc-inquiry-form fieldset {
  display: grid;
  gap: 7px;
  margin: 0;
}

.sc-inquiry-form span,
.sc-inquiry-form legend {
  color: var(--sc-pasture-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sc-inquiry-form input,
.sc-inquiry-form select,
.sc-inquiry-form textarea {
  background: #fff;
  border: 2px solid rgba(36, 67, 50, 0.28);
  border-radius: var(--sc-radius);
  color: var(--sc-ink);
  font: inherit;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.sc-inquiry-form textarea {
  resize: vertical;
}

.sc-inquiry-form fieldset {
  border: 2px dashed rgba(36, 67, 50, 0.26);
  border-radius: var(--sc-radius);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.sc-inquiry-form fieldset legend {
  padding: 0 6px;
}

.sc-inquiry-form fieldset label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.sc-inquiry-form input[type="checkbox"] {
  min-height: 0;
  width: auto;
}

.sc-form-wide,
.sc-inquiry-form button {
  grid-column: 1 / -1;
}

.sc-inquiry-form button {
  cursor: pointer;
  margin-top: 16px;
}

.sc-honeypot {
  left: -9999px;
  position: absolute;
}

.sc-footer {
  background: #17261f;
  color: var(--sc-milk);
  font-size: 12px;
  font-weight: 800;
  padding: 18px 0;
  text-transform: uppercase;
}

.sc-footer .sc-shell {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .sc-topbar,
  .sc-hero,
  .sc-section-header,
  .sc-contact .sc-shell {
    grid-template-columns: 1fr;
  }

  .sc-topbar {
    justify-items: center;
    text-align: center;
  }

  .sc-brand {
    justify-self: center;
  }

  .sc-nav {
    justify-content: center;
  }

  .sc-services,
  .sc-pricing {
    grid-template-columns: 1fr 1fr;
  }

  .sc-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 58px 24px 52px;
  }

  .sc-process article,
  .sc-process article:nth-child(4),
  .sc-process article:nth-child(5) {
    grid-column: auto;
    margin: -4px;
    min-height: 350px;
  }

  .sc-process article:nth-child(even) {
    transform: none;
  }

  .sc-service:nth-child(2) {
    transform: none;
  }

  .sc-hero-aside {
    min-height: 480px;
  }
}

@media (max-width: 620px) {
  .sc-shell {
    width: min(100% - 28px, 1180px);
  }

  .sc-topbar {
    padding: 14px;
  }

  .sc-brand {
    flex-direction: column;
    gap: 8px;
  }

  .sc-services,
  .sc-pricing,
  .sc-process {
    grid-template-columns: 1fr;
  }

  .sc-hero {
    padding-top: 34px;
  }

  .sc-hero h1 {
    font-size: clamp(50px, 15vw, 78px);
  }

  .sc-hero-aside img {
    height: 118px;
    width: 118px;
  }

  .sc-hero-aside {
    min-height: 430px;
    padding: 0;
  }

  .sc-pasture-card {
    min-height: 430px;
  }

  .sc-barn-graphic {
    height: 150px;
    margin-bottom: 98px;
    width: min(78%, 260px);
  }

  .sc-barn-graphic::before {
    border-bottom-width: 68px;
    border-left-width: 132px;
    border-right-width: 132px;
    top: -72px;
  }

  .sc-service {
    min-height: 330px;
  }

  .sc-process {
    background:
      linear-gradient(var(--sc-pasture-dark) 0 0) 34px 0 / 7px 100% no-repeat,
      linear-gradient(90deg, transparent 0 18px, var(--sc-pasture-dark) 18px 26px, transparent 26px) 0 34px / 78px 8px repeat-x,
      linear-gradient(90deg, transparent 0 18px, var(--sc-pasture-dark) 18px 26px, transparent 26px) 0 calc(100% - 34px) / 78px 8px repeat-x,
      radial-gradient(ellipse at 50% 50%, rgba(169, 201, 135, 0.52) 0 70%, transparent 71%);
    gap: 18px;
    padding: 42px 0 36px 58px;
  }

  .sc-process::before {
    display: none;
  }

  .sc-process::after {
    display: none;
  }

  .sc-process article,
  .sc-process article:nth-child(even) {
    grid-column: auto;
    margin: 0;
    min-height: 0;
    padding-bottom: 78px;
    transform: none;
  }

  .sc-process article::before {
    left: -20px;
  }

  .sc-process article::after {
    inset: 0 0 54px;
  }

  .sc-process strong,
  .sc-process h3,
  .sc-process p {
    margin-left: 28px;
    margin-right: 28px;
  }

  .sc-form-grid,
  .sc-inquiry-form fieldset {
    grid-template-columns: 1fr;
  }

  .sc-footer .sc-shell {
    flex-direction: column;
  }
}