/* Gone Stumpin' - shared styles, rebuilt to the Oct 22 redesign spec (section 3). */
:root{
  --green-900:#123324;
  --green-700:#1d4634;
  --green-500:#2a5c43;
  --orange-600:#c95412;
  --orange-500:#f26d21;
  --orange-100:#fde3d0;
  --cream-100:#fdfaf0;
  --cream-200:#f7f1df;
  --bark-700:#6b4a2b;
  --ink:#23301f;
  --white:#ffffff;
  --gutter:clamp(20px,4vw,64px);
  --radius:24px;
  --shadow:0 10px 30px rgba(18,51,36,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
.hero-grid>*,.split>*,.tiles>*,.steps>*,.foot-grid>*,.town-strip>*,.join-form>*{min-width:0}
.pills{max-width:100%}
body{
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--cream-200);
  color:var(--ink);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2{
  font-family:"Lilita One","Nunito",sans-serif;
  font-weight:400;
  line-height:1.1;
  letter-spacing:.01em;
  color:var(--green-900);
}
h1{font-size:clamp(2.5rem,6vw,4.5rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-family:"Nunito",sans-serif;font-weight:800;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.3;color:var(--green-900)}
p.lead{font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.55;max-width:68ch}
img{max-width:100%;height:auto}
a{color:var(--orange-600)}
.note{
  font-family:"Permanent Marker",cursive;
  font-size:clamp(1.15rem,2vw,1.4rem);
  transform:rotate(-3deg);
  display:inline-block;
  color:var(--orange-600);
}
.accent{color:var(--orange-600)}
.band-green .accent,.band-lake .accent{color:var(--orange-500)}

/* ---------- bands and containers ---------- */
.band{position:relative;padding:clamp(64px,8vw,128px) 0;overflow:hidden}
.band-inner{width:min(calc(100% - 2*var(--gutter)),1440px);margin-inline:auto;position:relative;z-index:1}
.band-cream{background:var(--cream-200);color:var(--ink)}
.band-green{background:var(--green-700);color:var(--cream-100)}
.band-green h1,.band-green h2,.band-green h3{color:var(--white)}
.band-orange{background:var(--orange-500);color:var(--green-900)}
.band-orange h1,.band-orange h2,.band-orange h3{color:var(--green-900)}
.band-lake{background:var(--green-700);color:var(--cream-100)}
.band-lake::before{content:"";position:absolute;inset:0;background:rgba(47,111,143,.3);pointer-events:none}
.band-lake h1,.band-lake h2,.band-lake h3{color:var(--white)}
.band h2{margin-bottom:.5rem}
.band .band-sub{max-width:68ch}

/* ---------- drifting mulchbits (hero and green bands only) ---------- */
.mulchbits{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bit{position:absolute;top:-40px;border-radius:3px;opacity:.2;animation:drift linear infinite}
@keyframes drift{
  0%{transform:translateY(-40px) rotate(0deg)}
  100%{transform:translateY(105vh) rotate(340deg)}
}

/* ---------- top stack: opening strip + header ---------- */
.top-stack{position:sticky;top:0;z-index:60;box-shadow:0 4px 14px rgba(18,51,36,.15)}
.opening-strip{
  display:block;text-align:center;text-decoration:none;
  height:40px;line-height:40px;padding:0 1rem;
  font-weight:800;font-size:.95rem;color:var(--green-900);
  background:repeating-linear-gradient(45deg,var(--orange-500) 0 26px,var(--orange-600) 26px 52px);
  background-size:74px 74px;
  animation:stripes 30s linear infinite;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@keyframes stripes{to{background-position:296px 0}}
header.site-head{background:var(--cream-100);border-bottom:4px solid var(--green-700)}
.head-inner{
  width:min(calc(100% - 2*var(--gutter)),1440px);margin-inline:auto;
  padding:.55rem 0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{width:56px;height:56px;border-radius:50%;border:3px solid var(--orange-500);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.brand:hover img{transform:rotate(-12deg) scale(1.08)}
.brand-name{font-family:"Lilita One",sans-serif;font-size:1.45rem;color:var(--green-900);letter-spacing:.02em}
.brand-name span{color:var(--orange-600)}
nav.main-nav{margin-left:auto;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
nav.main-nav>a,.drop-btn{
  text-decoration:none;font-weight:800;color:var(--green-900);font-size:1rem;
  padding:.5rem .85rem;border-radius:999px;border:2px solid transparent;background:none;
  font-family:inherit;cursor:pointer;transition:all .2s;
}
nav.main-nav>a:hover,.drop-btn:hover,nav.main-nav>a.active{background:var(--green-700);color:var(--cream-100)}
.has-drop{position:relative}
.drop{
  position:absolute;top:calc(100% + 6px);left:0;min-width:230px;
  background:var(--cream-100);border:3px solid var(--green-700);border-radius:16px;
  box-shadow:var(--shadow);padding:.4rem;display:none;z-index:70;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block;text-decoration:none;font-weight:800;color:var(--green-900);padding:.5rem .8rem;border-radius:10px}
.drop a:hover{background:var(--orange-100)}
.head-join{margin-left:.4rem}
.burger{
  display:none;margin-left:auto;background:var(--green-700);color:var(--cream-100);
  border:none;border-radius:12px;width:48px;height:48px;font-size:1.4rem;cursor:pointer;
}
.mobile-sheet{
  position:fixed;inset:0;z-index:80;background:var(--green-900);color:var(--cream-100);
  padding:2rem var(--gutter);overflow:auto;
}
.mobile-sheet[hidden]{display:none}
.mobile-sheet nav{display:flex;flex-direction:column;gap:.4rem;margin-top:2.5rem}
.mobile-sheet nav a{
  color:var(--cream-100);text-decoration:none;font-family:"Lilita One",sans-serif;
  font-size:1.9rem;padding:.35rem 0;
}
.mobile-sheet nav a.sub{font-size:1.35rem;padding-left:1.2rem;color:var(--orange-100)}
.sheet-close{
  position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--cream-100);
  font-size:2.2rem;cursor:pointer;line-height:1;
}
.sheet-stanley{position:absolute;bottom:.5rem;right:1rem;width:110px;opacity:.95}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--orange-500);color:var(--white);text-decoration:none;
  font-family:"Nunito",sans-serif;font-weight:800;font-size:1.1rem;
  padding:16px 32px;min-height:48px;border-radius:999px;border:none;
  border-bottom:4px solid var(--orange-600);
  box-shadow:0 6px 0 var(--green-900);
  transition:transform .15s,box-shadow .15s,background .15s;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--green-900)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-900)}
.btn.green{background:var(--green-700);border-bottom-color:var(--green-900)}
.btn.green:hover{background:var(--green-500)}
.btn.cream{background:var(--cream-100);color:var(--green-900);border-bottom-color:var(--green-900)}
.btn.small{padding:10px 22px;font-size:1rem;min-height:44px}
.btn-row{margin-top:1.4rem;display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.text-link{font-weight:800}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- hero (home) ---------- */
.hero{background:var(--green-700);position:relative;overflow:hidden}
.hero-art{display:block;width:100%;height:clamp(220px,34vw,540px);object-fit:cover;object-position:center 40%}
.hero-divider{display:block;width:100%;height:48px;margin-bottom:-1px}
.hero-panel{background:var(--cream-200);padding:clamp(48px,6vw,88px) 0 clamp(64px,7vw,104px)}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:start}
.hero-text h1{margin-bottom:.7rem}
.pills{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.2rem}
.pill{
  background:var(--white);border:2px solid var(--green-700);color:var(--green-900);
  font-weight:800;font-size:.92rem;padding:.4rem .85rem;border-radius:999px;
}
.pill.hot{background:var(--orange-100);border-color:var(--orange-600);color:var(--green-900)}
.hero-form-card{position:relative;margin-top:56px}

/* ---------- form cards ---------- */
.form-card{
  background:var(--cream-100);border:3px solid var(--green-900);border-radius:var(--radius);
  padding:clamp(20px,3vw,32px);box-shadow:var(--shadow);position:relative;
}
.form-card.green{background:linear-gradient(160deg,var(--green-700),var(--green-900));color:var(--cream-100);border-color:var(--green-900)}
.form-card.green h2,.form-card.green h3{color:var(--white)}
.form-card h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:.4rem}
.join-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.1rem}
.join-form label{font-weight:800;font-size:.92rem;display:block}
.join-form input,.join-form select{
  width:100%;margin-top:.3rem;min-height:48px;padding:.7rem .9rem;border-radius:12px;
  border:2px solid #d8cba6;font-size:1rem;font-family:inherit;background:var(--white);color:var(--ink);
}
.join-form input:focus,.join-form select:focus{outline:3px solid var(--orange-500);outline-offset:1px;border-color:var(--orange-600)}
.join-form .full{grid-column:1/-1}
.join-form .btn{width:100%}
.form-note{font-size:.9rem;font-weight:700;margin-top:.8rem}
.join-msg{margin-top:.8rem;font-weight:800;min-height:1.4em}
.join-msg.err{color:#b3261e}
.form-card.green .join-msg.err{color:#ffb3ab}
.form-card.success .join-form,.form-card.success .form-note{display:none}
.form-success{display:none;text-align:center;padding:1rem 0 .4rem}
.form-card.success .form-success{display:block}
.form-success .stanley{width:130px;height:130px}
.success-big{font-family:"Lilita One",sans-serif;font-size:1.5rem;color:var(--green-900);margin-top:.4rem}
.form-card.green .success-big{color:var(--white)}
.stanley-say{
  font-family:"Permanent Marker",cursive;font-size:1.3rem;color:var(--orange-600);
  transform:rotate(-3deg);display:inline-block;margin-top:.3rem;
}
.form-card.green .stanley-say{color:var(--orange-500)}
.confetti-bit{position:absolute;border-radius:3px;pointer-events:none;z-index:5;animation:confetti .95s ease-out forwards}
@keyframes confetti{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--cx),var(--cy)) rotate(320deg);opacity:0}
}

/* ---------- Stanley mascot ---------- */
.stanley{flex:0 0 auto}
.stanley .face-scared,.stanley .sweat{display:none}
.stanley-box{cursor:pointer}
.stanley-box:hover .stanley .face-calm,.stanley.nervous .face-calm{display:none}
.stanley-box:hover .stanley .face-scared,.stanley.nervous .face-scared{display:block}
.stanley-box:hover .stanley .sweat,.stanley.nervous .sweat{display:block}
.stanley-box:hover .stanley,.stanley.nervous{animation:shiver .3s ease-in-out infinite}
.stanley-idle{animation:idle 6s ease-in-out infinite}
@keyframes idle{
  0%,82%,100%{transform:rotate(0)}
  86%{transform:rotate(-2.5deg)}
  90%{transform:rotate(2.5deg)}
  94%{transform:rotate(-1.5deg)}
}
@keyframes shiver{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-3deg) translateX(-2px)}
  75%{transform:rotate(3deg) translateX(2px)}
}
.stanley.relieved .arm-wave{transform-box:fill-box;transform-origin:bottom left;animation:wave .5s ease-in-out infinite alternate}
@keyframes wave{from{transform:rotate(0)}to{transform:rotate(-26deg)}}
.stanley-peek{position:absolute;top:-58px;right:16px;width:96px;z-index:3}

/* ---------- feature tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:1.6rem}
.tiles.cols-3{grid-template-columns:repeat(3,1fr)}
.tile{
  background:var(--cream-100);border:2px solid var(--green-700);border-radius:var(--radius);
  padding:26px;color:var(--ink);
  box-shadow:0 5px 0 rgba(18,51,36,.22);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.tile:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 12px 22px rgba(18,51,36,.22)}
.tile h3{margin-bottom:.35rem}
.tile p{font-size:.98rem}
.tile .icon{width:52px;height:52px;margin-bottom:.6rem;color:var(--green-700)}
.tile .icon svg{width:100%;height:100%}

/* ---------- estimate steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:2rem;position:relative}
.steps::before{
  content:"";position:absolute;top:32px;left:12%;right:12%;
  border-top:4px dotted currentColor;opacity:.35;
}
.step{text-align:center;position:relative;padding:0 .4rem}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--orange-500);color:var(--white);
  font-family:"Lilita One",sans-serif;font-size:1.7rem;
  border:3px solid var(--orange-600);box-shadow:0 5px 0 var(--green-900);
  position:relative;z-index:1;margin-bottom:.7rem;
}
.step h3{margin-bottom:.3rem}
.step p{font-size:.98rem;max-width:34ch;margin-inline:auto}
.band-orange .step-num{background:var(--cream-100);color:var(--green-900);border-color:var(--green-900)}
.steps.mini{gap:20px;margin-top:1.2rem}
.steps.mini .step-num{width:52px;height:52px;font-size:1.35rem}
.steps.mini::before{top:26px}

/* ---------- photo blocks ---------- */
.photo-frame{position:relative;max-width:520px}
.photo-frame img{
  display:block;width:100%;border-radius:var(--radius);
  border:4px solid var(--green-900);box-shadow:var(--shadow);
}
.photo-frame .tape{
  position:absolute;top:-13px;left:28px;width:96px;height:27px;z-index:2;
  background:rgba(242,109,33,.88);border-radius:3px;transform:rotate(-4deg);
  box-shadow:0 2px 5px rgba(18,51,36,.25);
}
.photo-cap{margin-top:.9rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.split.flip .photo-frame{order:2;justify-self:end}
.photo-frame.right{justify-self:end}

/* ---------- town strip ---------- */
.town-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:1.6rem}
.town-card{
  display:block;text-decoration:none;background:var(--green-700);color:var(--cream-100);
  border-radius:var(--radius);border:3px solid var(--green-900);
  box-shadow:0 6px 0 var(--green-900);overflow:hidden;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s;
}
.town-card:hover{transform:translateY(-5px) rotate(.8deg);background:var(--green-500)}
.town-card .sil{display:block;width:100%;height:74px;color:var(--green-900);opacity:.55}
.town-card .sil svg{display:block;width:100%;height:100%}
.town-card .town-name{
  display:block;font-family:"Lilita One",sans-serif;font-size:1.5rem;color:var(--white);
  padding:.4rem 1.1rem 0;
}
.town-card small{display:block;font-weight:700;font-size:.88rem;color:var(--orange-100);padding:0 1.1rem 1.05rem}

/* ---------- page heroes (town and estimate pages) ---------- */
.page-hero{padding:clamp(56px,7vw,104px) 0 clamp(88px,8vw,128px)}
.page-hero .silhouette{
  position:absolute;left:0;right:0;bottom:0;height:72px;width:100%;
  color:var(--green-900);opacity:.4;pointer-events:none;
}
.page-hero .silhouette svg{display:block;width:100%;height:100%}
.page-hero.cream-hero{background:var(--cream-200);color:var(--ink)}
.page-hero.cream-hero .silhouette{color:var(--green-700);opacity:.3}
.hero-with-stanley{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.hero-with-stanley .stanley{width:190px;height:190px}

/* ---------- FAQ accordion ---------- */
.faq{margin-top:1.4rem;display:flex;flex-direction:column;gap:14px;max-width:900px}
.faq-item{background:var(--green-500);border:2px solid var(--cream-100);border-radius:18px;overflow:hidden}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:"Nunito",sans-serif;font-weight:800;font-size:1.08rem;color:var(--white);
  padding:1rem 1.2rem;min-height:48px;
}
.faq-icon{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--orange-500);color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:800;transition:transform .3s;
}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 1.2rem 1.1rem;color:var(--cream-100);font-size:1rem;max-width:68ch}

/* ---------- measure illustration ---------- */
.measure-box{
  background:var(--cream-100);border:2px solid var(--green-700);border-radius:var(--radius);
  padding:26px;color:var(--ink);box-shadow:0 5px 0 rgba(18,51,36,.22);
}
.measure-box svg{display:block;width:100%;height:auto;margin-bottom:1rem}
.measure-box h3{margin-bottom:.4rem}
.measure-box p{font-size:.98rem}

/* ---------- footer ---------- */
footer{background:var(--green-900);color:var(--cream-100);position:relative;z-index:1}
.foot-inner{width:min(calc(100% - 2*var(--gutter)),1440px);margin-inline:auto;padding:3.2rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px}
.foot-brand img{width:84px;height:84px;border-radius:50%;border:3px solid var(--orange-500);margin-bottom:.8rem}
.foot-brand p{font-size:.95rem;max-width:34ch}
.foot-col h3{color:var(--white);font-size:1.05rem;margin-bottom:.6rem}
.foot-col a{display:block;color:var(--orange-100);text-decoration:none;font-weight:700;padding:.18rem 0}
.foot-col a:hover{color:var(--white);text-decoration:underline}
.foot-col p{font-size:.95rem;margin-bottom:.9rem}
.foot-bottom{
  border-top:1px solid rgba(253,250,240,.25);margin-top:2.4rem;padding-top:1.2rem;
  text-align:center;font-weight:700;font-size:.95rem;
}

/* ---------- responsive ---------- */
@media(max-width:1023px){
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-form-card{margin-top:64px}
  .tiles.cols-3{grid-template-columns:repeat(2,1fr)}
  .town-strip{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps::before{display:none}
  .split{grid-template-columns:1fr}
  .split.flip .photo-frame{order:0}
  .photo-frame,.photo-frame.right{justify-self:center}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  body{font-size:17px}
  nav.main-nav,.head-join{display:none}
  .burger{display:block}
  .hero-art{height:auto;object-fit:initial}
  .pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem}
  .pill{white-space:nowrap}
  .btn{width:100%}
  .btn.small{width:auto}
  .btn-row .btn{width:100%}
  .tiles.cols-3{grid-template-columns:1fr}
  .town-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem}
  .town-card{min-width:80vw;scroll-snap-align:start}
  .join-form{grid-template-columns:1fr}
  .hero-with-stanley{grid-template-columns:1fr}
  .hero-with-stanley .stanley{width:140px;height:140px}
  .foot-grid{grid-template-columns:1fr}
  .sheet-stanley{width:88px}
}
@media(min-width:1600px){
  .hero-art{height:620px}
}

/* ---------- reduced motion ---------- */
@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}
  .opening-strip{animation:none}
  .bit{display:none}
}

/* Hero photo placement (owner request, Oct 22): face first on phones, photo right on desktop */
.hero-text{order:1}
.hero-photo{order:2}
.hero-form-card{max-width:900px;margin-inline:auto;width:100%}
@media(max-width:1023px){
  .hero-photo{order:1;justify-self:center}
  .hero-text{order:2}
}