@font-face{font-family:Dirt Navigation;src:url(navigation.otf) format("opentype");font-weight:700;font-display:swap}
:root{--ink:#172119;--paper:#f4ead6;--orange:#ec751a;--cream:#fbf6eb}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--cream);font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
a:focus-visible{outline:3px solid #93602e;outline-offset:5px}
.masthead{min-height:clamp(82px,11.6vw,146px);display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,76px);padding:12px 3% 12px 5%;background:#142918;color:#fff}
.brand{display:block;flex:none}
.brand img{display:block;width:clamp(89.775px,10.9725vw,142.6425px);height:auto;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,64px);margin-left:auto}
nav a{color:#FCF2E2;font-family:"Dirt Navigation",Arial,sans-serif;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.055em;text-decoration:none;font-size:clamp(14px,1.55vw,20px)}
nav a:hover{text-decoration:underline;text-underline-offset:.25em}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:clamp(12px,1.8vw,25px) clamp(13px,2.25vw,35px);background:var(--orange);color:#23190e;border-radius:9px;font-size:clamp(11px,1.55vw,20px);font-weight:800;text-transform:uppercase;letter-spacing:.035em;text-decoration:none;white-space:nowrap}
.button:hover{background:#ff912d}
.hero{background:#293a1c url(garden.webp) center center/cover no-repeat;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,transparent 45%,rgba(10,20,10,.42) 74%,rgba(10,20,10,.48))}
.hero-inner{width:min(100%,1560px);margin:auto;min-height:clamp(350px,49vw,730px);display:grid;grid-template-columns:62% 32%;gap:6%;align-items:center;padding:3.3% 3.4% 3.6% 7%}
.hero-tape{margin:0;width:min(100%,760px)}
.hero-tape img{display:block;width:100%;height:auto}
.hero p{grid-column:2;font-family:"Dirt Navigation",Arial,sans-serif;color:var(--cream);font-size:clamp(17px,2.28vw,34px);line-height:1.35;font-weight:700;max-width:15em;margin:32% 0 0;text-shadow:0 1px 5px #151b11}
.section{max-width:1180px;margin:auto;padding:clamp(48px,7vw,105px) 5%;scroll-margin-top:24px}
#services{position:relative;padding-top:clamp(60px,7vw,86px);padding-bottom:clamp(40px,6vw,92px)}
.services-tape{position:absolute;z-index:2;top:0;left:50%;transform:translate(-50%,-50%);display:block;width:clamp(200px,34vw,330px);height:auto;pointer-events:none}
.kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
h2{margin:.15em 0 .5em;font-size:clamp(34px,5vw,64px);letter-spacing:-.045em}
h3{margin:0 0 .4em;font-size:1.25rem}
.section p:not(.kicker){line-height:1.6;max-width:62ch}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 48px}
.services article{border-top:2px solid #bdaf93;padding-top:18px}
.services p{margin:0}
.about{background:#0C2B15;color:var(--cream)}
footer{background:#D6BFA3;padding:7px 5%;font-weight:800;display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between}
footer span{font-weight:400}
@media(max-width:640px){
.masthead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:9px 5% 5px}
.masthead .brand{justify-self:start}
.masthead nav{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;gap:4px}
.masthead nav a{display:grid;place-items:center;min-height:44px;text-align:center}
.masthead .button{grid-row:1;grid-column:2}
.hero-inner{grid-template-columns:1fr;gap:23px;padding:36px 8% 28px}
.hero-tape{width:min(100%,420px)}
.hero p{grid-column:1;margin:0;font-size:17px;max-width:23em}
.hero::before{background:linear-gradient(transparent 35%,rgba(10,20,10,.72))}
.services{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.masthead .button{background:#EB6403;color:#FCF2E2}
.masthead .button:hover{background:#da5b03}

.hero-backdrops,.hero-backdrop{position:absolute;inset:0}
.hero-backdrops{z-index:-2;pointer-events:none}
.hero-backdrop{opacity:0;background-position:center;background-size:cover}
.hero-backdrop.flowers{background-image:url(garden-flowers.webp)}
.hero-backdrop.kale{background-image:url(garden-kale.webp)}
@media(prefers-reduced-motion:no-preference){
.hero.is-rotating .flowers{animation:hero-flowers 12s ease-in-out infinite}
.hero.is-rotating .kale{animation:hero-kale 12s ease-in-out infinite}
}
@keyframes hero-flowers{0%,25%,75%,100%{opacity:0}33.333333%,66.666667%{opacity:1}}
@keyframes hero-kale{0%,58.333333%,100%{opacity:0}66.666667%,91.666667%{opacity:1}}

#about h2{font-size:clamp(27.2px,4vw,51.2px)}

.about-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.about-cutout{display:block;width:min(100%,520px);height:auto;justify-self:end}
@media(max-width:640px){.about-layout{grid-template-columns:1fr}}

.contact-quote{display:block;width:min(66.5%,279.3px);height:auto}
.contact-quote img{display:block;width:100%;height:auto}

.contact{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;padding-top:clamp(22px,3vw,36px);padding-bottom:clamp(28px,4vw,52px)}
.contact-copy{padding-top:clamp(32px,5vw,72px)}
.contact-note{position:relative;display:block;width:min(100%,320px);height:auto;justify-self:center;margin-top:16px}

.contact-note img{display:block;width:100%;height:auto}
.contact-note a{position:absolute;left:13%;width:74%;height:11%;border-radius:4px}
.contact-note a:hover,.contact-note a:focus-visible{outline:2px solid #0C2B15}
.note-email{top:38%}
.note-phone{top:60%}
.note-instagram{top:82%}

.contact-tape{position:absolute;z-index:2;top:0;left:50%;transform:translate(-50%,-50%);display:block;width:clamp(180px,32vw,320px);height:auto;pointer-events:none}


footer{align-items:center}
.footer-logo{display:block;width:min(60%,144px);height:auto}

@media(max-width:640px){
#contact{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:48px}
#contact .contact-copy{padding-top:0;text-align:center}
#contact .contact-copy p{margin:0 auto}
#contact .contact-copy h2{margin:10px 0 12px}
#contact .contact-quote{width:min(100%,240px);margin-inline:auto}
#contact .contact-note{width:min(100%,280px);margin-top:0}
#contact .contact-note a{height:13%}
#contact .note-email{top:37%}
#contact .note-phone{top:59.5%}
#contact .note-instagram{top:81%}
footer{flex-direction:column;gap:5px;padding-block:9px;text-align:center}
footer .footer-logo{width:min(100%,120px)}
footer span{max-width:100%;font-size:.875rem;line-height:1.4}
}

@media (min-width:641px) and (max-width:1024px) and (orientation:portrait) and (pointer:coarse){
  .masthead{gap:clamp(14px,2.5vw,26px)}
  .masthead nav{gap:clamp(4px,1.5vw,16px)}
  .masthead nav a{display:grid;place-items:center;min-height:44px;padding-inline:6px}
  #contact{align-items:center;padding-top:48px}
  #contact .contact-copy{padding-top:0}
  #contact .contact-quote{width:min(100%,279.3px)}
  #contact .contact-note{margin-top:0}
}