:root {
  --green:#0a714e;
  --cream:#f5f0e6;
  --white:#fff;
  --display:"League Spartan",Arial,sans-serif;
  --serif:"Sanchez",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--display);color:#fff;background:#111}
a{color:inherit;text-decoration:none}
.hero{
  position:relative;
  height:100svh;
  min-height:650px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.hero-photo{
  position:absolute;
  inset:0;
  background-image:url("funny-farm-storefront.jpg");
  background-size:cover;
  background-position:center center;
  transform:scale(1.01);
}
.shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.04) 42%,rgba(0,0,0,.46) 100%);
}
.nav,.hero-content,.bottom{position:relative;z-index:2}
.nav{
  height:92px;
  padding:0 5vw;
  display:flex;
  align-items:center;
  gap:40px;
}
.logo{
  display:flex;
  flex-direction:column;
  line-height:.82;
  margin-right:auto;
}
.logo span{font-size:18px;font-weight:800;letter-spacing:.02em}
.logo strong{font:italic 23px var(--serif);font-weight:400}
.nav nav{display:flex;gap:32px}
.nav nav a,.order,.bottom{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.order{
  padding:13px 20px;
  background:var(--green);
}
.hero-content{
  margin:auto;
  text-align:center;
  transform:translateY(-2%);
}
.hero-content p{
  margin:0 0 18px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
}
.hero-content h1{
  margin:0;
  font-size:clamp(64px,9vw,125px);
  line-height:.78;
  letter-spacing:-.055em;
  text-shadow:0 3px 24px rgba(0,0,0,.22);
}
.hero-content em{font:400 .78em var(--serif)}
.actions{
  margin-top:35px;
  display:flex;
  justify-content:center;
  gap:10px;
}
.button{
  min-width:145px;
  padding:15px 22px;
  background:var(--green);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.button.ghost{
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.8);
}
.button:hover,.order:hover{filter:brightness(.9)}
.bottom{
  padding:0 5vw 30px;
  display:flex;
  justify-content:center;
  gap:13px;
}
.placeholder,.visit{
  min-height:70vh;
  padding:12vw 9vw;
  color:#18221e;
  background:var(--cream);
}
.placeholder.green{
  color:#fff;
  background:var(--green);
}
.placeholder p,.visit p{
  margin:0 0 20px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}
.placeholder h2,.visit h2{
  margin:0 0 30px;
  font-size:clamp(48px,7vw,90px);
  line-height:.88;
  letter-spacing:-.05em;
}
.placeholder h2 em{font:400 .85em var(--serif)}
.placeholder a,.visit a{
  display:inline-block;
  padding-bottom:8px;
  border-bottom:1px solid currentColor;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
@media(max-width:700px){
  .hero{min-height:600px}
  .nav{height:76px;padding:0 6vw}
  .nav nav{display:none}
  .logo span{font-size:15px}
  .logo strong{font-size:19px}
  .order{padding:11px 15px}
  .hero-photo{background-position:58% center}
  .hero-content h1{font-size:clamp(56px,16vw,86px)}
  .bottom{font-size:9px;padding-bottom:22px}
  .placeholder,.visit{min-height:60vh;padding:22vw 8vw}
}

/* ---- added sections ---- */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}
.intro > p{grid-column:1/-1;margin:0}
.intro h2{margin:0}
.intro-text .lead{font:400 clamp(20px,2vw,28px)/1.3 var(--serif);margin:0 0 20px;letter-spacing:0}
.intro-text p{font:400 17px/1.7 var(--serif);letter-spacing:0;margin:0 0 30px;color:#4d5953}
.intro-text .lead{color:#18221e}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);background:#e9dfcf;color:#18221e}
.pillars article{padding:7vw 5vw;border-right:1px solid rgba(24,34,30,.15)}
.pillars article:last-child{border-right:0}
.pillars span{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--green)}
.pillars h3{margin:18px 0 14px;font-size:clamp(26px,2.6vw,38px);line-height:.95;letter-spacing:-.04em}
.pillars p{margin:0;font:400 16px/1.65 var(--serif);color:#4d5953}
.contact-line{font:400 20px var(--serif)!important;letter-spacing:0!important}
.social{padding:10vw 9vw;background:var(--green);text-align:center}
.social p{margin:0 0 20px;font-size:11px;font-weight:800;letter-spacing:.18em}
.social h2{margin:0 0 30px;font-size:clamp(44px,6vw,80px);line-height:.9;letter-spacing:-.05em}
.social h2 em{font:400 .85em var(--serif)}
.social a{display:inline-block;padding-bottom:8px;border-bottom:1px solid currentColor;font-size:12px;font-weight:800;letter-spacing:.1em}
.footer{padding:50px 9vw 35px;background:#111;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:center}
.logo-foot{display:flex;flex-direction:column;line-height:.84}
.logo-foot span{font-size:20px;font-weight:800}
.logo-foot strong{font:italic 24px var(--serif);font-weight:400}
.footer nav{display:flex;flex-wrap:wrap;gap:24px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.footer nav a:hover{color:#7fd1ae}
.footer small{width:100%;padding-top:25px;border-top:1px solid rgba(255,255,255,.2);color:#aaa;font-size:12px}
@media(max-width:800px){
  .intro{grid-template-columns:1fr;gap:30px}
  .pillars{grid-template-columns:1fr}
  .pillars article{border-right:0;border-bottom:1px solid rgba(24,34,30,.15);padding:12vw 8vw}
}

/* hours */
.hours{list-style:none;margin:0 0 35px;padding:0;max-width:380px}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid rgba(24,34,30,.18);font:400 17px var(--serif)}
.hours li span:first-child{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;align-self:center}

/* mobile menu */
.nav{z-index:10}
.menu-toggle{display:none;width:44px;height:44px;padding:0;border:0;background:none;color:#fff;cursor:pointer;position:relative;z-index:12}
.menu-toggle span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .25s ease,top .25s ease}
.menu-toggle span:nth-child(1){top:16px}
.menu-toggle span:nth-child(2){top:26px}
.nav.open .menu-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav.open .menu-toggle span:nth-child(2){top:21px;transform:rotate(-45deg)}
.nav .logo,.nav .order{position:relative;z-index:12}
@media(max-width:700px){
  .nav{gap:14px}
  .menu-toggle{display:block}
  .nav nav{
    position:fixed;inset:0;z-index:11;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;
    background:rgba(10,113,78,.97);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
  }
  .nav nav a{font:800 clamp(34px,10vw,52px)/1 var(--display);letter-spacing:-.03em}
  .nav.open nav{opacity:1;visibility:visible}
  body.menu-open{overflow:hidden}
}

/* larger hero call to action */
.actions{margin-top:42px;gap:14px;flex-wrap:wrap}
.hero-content .button{min-width:210px;padding:22px 36px;font-size:15px;letter-spacing:.1em}
.hero-content p{font-size:13px}
@media(max-width:700px){
  .actions{flex-direction:column;align-items:center;padding:0 6vw}
  .hero-content .button{width:100%;max-width:340px;min-width:0;padding:20px 24px;font-size:14px;text-align:center}
}

/* social links */
.social-links{display:flex;justify-content:center;flex-wrap:wrap;gap:20px 40px}