:root{
  --green:#173524;--green-dark:#142a1d;--green-mid:#1d4630;
  --copper:#c07a33;--copper-light:#e3b27e;--copper-hover:#a96826;
  --cream:#fbf8ef;--cream-bg:#f4efe3;--cream-alt:#ece5d4;
  --ink:#1b241c;--muted:#5f6b5c;--muted-light:#aebca5;
  --serif:'Spectral',Georgia,serif;--sans:'Work Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --max:1200px;
}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/spectral-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('fonts/worksans.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--ink);background:var(--cream-bg);-webkit-font-smoothing:antialiased;}
::selection{background:var(--copper);color:var(--cream);}
input,textarea{font-family:inherit;}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ===== PROMO BANNER ===== */
.banner{background:var(--copper);color:var(--cream);text-align:center;font-size:13px;letter-spacing:0.04em;padding:9px 16px;font-weight:500;}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:50;background:var(--green);border-bottom:1px solid rgba(255,255,255,0.08);}
.nav__inner{max-width:var(--max);margin:0 auto;padding:0 32px;height:74px;display:flex;align-items:center;justify-content:space-between;}
/* Logo overflows below the short green bar onto the matching dark-green hero,
   so it reads large without making the header taller. Anchored to the left
   gutter (outside the centered content column) so its overflow sits over the
   empty margin and never covers section text when the page scrolls.
   Two pixel-aligned layers: a static layer (leaf + copper "LEAF") and an ink
   layer (the "ONCE UPON A" + tagline) recoloured live via --logo-ink as the
   page scrolls over light/dark sections. */
.brand{position:absolute;left:24px;top:6px;width:214px;height:150px;z-index:2;text-decoration:none;}
.brand__logo{position:absolute;inset:0;display:block;}
.brand__layer{position:absolute;inset:0;width:100%;height:100%;}
.brand__static{object-fit:contain;}
.brand__ink{-webkit-mask:url('images/logo-ink.png') no-repeat center/contain;
  mask:url('images/logo-ink.png') no-repeat center/contain;
  background-color:var(--logo-ink,#fbf8ef);
  transition:background-color .25s linear;}
.nav__links{display:flex;align-items:center;gap:34px;margin-left:auto;}
.nav__link{color:#d8e0d2;text-decoration:none;font-size:15px;font-weight:400;}
.nav__link:hover{color:#ffffff;}
.nav__phone{color:var(--cream);text-decoration:none;font-size:15px;font-weight:500;display:flex;align-items:center;gap:7px;}

/* ===== BUTTONS ===== */
.btn{text-decoration:none;display:inline-block;}
.btn--primary{background:var(--copper);color:var(--cream);font-size:14px;font-weight:600;padding:11px 20px;border-radius:6px;letter-spacing:0.01em;}
.btn--primary:hover{background:var(--copper-hover);}
.btn--ghost{background:transparent;color:var(--cream);font-size:16px;font-weight:500;padding:16px 26px;border-radius:7px;border:1px solid rgba(251,248,239,0.35);}
.btn--ghost:hover{border-color:var(--cream);}
.btn--outline{display:block;text-align:center;background:transparent;color:var(--green);font-size:15px;font-weight:600;padding:13px;border-radius:7px;border:1.5px solid var(--green);}
.btn--outline:hover{background:var(--green);color:var(--cream);}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;background:var(--green);}
.hero__bg{position:absolute;inset:0;background-image:url('images/hero.webp');background-size:cover;background-position:center;}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(95deg,rgba(18,40,27,0.95) 0%,rgba(18,40,27,0.82) 42%,rgba(18,40,27,0.45) 100%);}
.hero__note{position:absolute;right:18px;bottom:14px;font-family:'Work Sans',monospace;font-size:11px;letter-spacing:0.08em;color:rgba(251,248,239,0.45);text-transform:uppercase;}
.hero__inner{position:relative;max-width:var(--max);margin:0 auto;padding:96px 32px 104px;}
.hero__inner>div{max-width:660px;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--copper);font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:16px;}
.eyebrow--light{color:var(--copper-light);margin-bottom:24px;}
.eyebrow__rule{width:26px;height:1px;background:var(--copper);}
.h1{font-family:var(--serif);font-weight:600;font-size:62px;line-height:1.05;color:var(--cream);margin:0 0 22px;letter-spacing:-0.01em;text-wrap:balance;}
.lead{font-size:19px;line-height:1.6;color:#cdd6c6;margin:0 0 36px;max-width:540px;font-weight:300;}
.hero__cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.hero__cta .btn--primary{font-size:16px;padding:16px 30px;border-radius:7px;}
.trust{display:flex;align-items:center;gap:26px;margin-top:44px;flex-wrap:wrap;color:var(--muted-light);font-size:14px;font-weight:500;}
.trust span{display:flex;align-items:center;gap:8px;}
.trust span span{width:6px;height:6px;border-radius:50%;background:var(--copper);}

/* ===== SECTION (services / pricing) ===== */
.section{max-width:var(--max);margin:0 auto;padding:104px 32px;}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:56px;flex-wrap:wrap;}
.section__head>div{max-width:620px;}
.section__head p{max-width:340px;font-size:16px;line-height:1.6;color:var(--muted);margin:0;}
.h2{font-family:var(--serif);font-weight:600;font-size:42px;line-height:1.1;margin:0;color:var(--ink);letter-spacing:-0.01em;}

/* ===== SERVICES GRID ===== */
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.card{background:var(--cream);border:1px solid rgba(23,53,36,0.1);border-radius:12px;padding:32px 28px;}
.card:hover{border-color:rgba(192,122,51,0.5);}
.card__num{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--copper);margin-bottom:18px;letter-spacing:0.05em;}
.h3{font-family:var(--serif);font-size:21px;font-weight:600;margin:0 0 10px;color:var(--ink);}
.card p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;}

/* ===== PROCESS BAND ===== */
.process{background:var(--green);}
.process__grid{max-width:var(--max);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;gap:0;}
.process__copy{padding:88px 56px 88px 0;display:flex;flex-direction:column;justify-content:center;}
.process__copy .h2{font-size:38px;line-height:1.12;margin:0 0 32px;color:var(--cream);}
.steps{display:flex;flex-direction:column;gap:24px;}
.step{display:flex;gap:18px;align-items:flex-start;}
.step__num{font-family:var(--serif);font-size:16px;color:var(--copper);font-weight:600;width:28px;flex-shrink:0;padding-top:2px;}
.step__title{font-size:17px;font-weight:600;color:var(--cream);margin-bottom:4px;}
.step__desc{font-size:15px;color:var(--muted-light);line-height:1.55;}
.process__photo{position:relative;min-height:440px;margin:48px 0;background-image:url('images/yard.webp');background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-composite:intersect;}

/* ===== PRICING ===== */
.pricing__head{text-align:center;max-width:600px;margin:0 auto 56px;}
.pricing__head .h2{margin:0 0 14px;}
.pricing__head p{font-size:16px;line-height:1.6;color:var(--muted);margin:0;}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.plan{background:var(--cream);border:1px solid rgba(23,53,36,0.12);border-radius:14px;padding:38px 32px;display:flex;flex-direction:column;}
.plan .btn--outline,.plan__cta{margin-top:auto;}
.plan__name{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.plan__tag{font-size:14px;color:var(--muted);margin-bottom:24px;}
.plan__price{display:flex;align-items:baseline;gap:6px;margin-bottom:28px;}
.plan__price b{font-family:var(--serif);font-size:46px;font-weight:600;color:var(--ink);}
.plan__price span{font-size:15px;color:var(--muted);}
.plan__features{display:flex;flex-direction:column;gap:13px;margin-bottom:32px;}
.plan__features div{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#3a463a;}
.plan__features div span{color:var(--copper);font-weight:600;}
.plan--featured{background:var(--green);border:1px solid var(--green);position:relative;box-shadow:0 24px 50px -24px rgba(23,53,36,0.5);}
.plan--featured .plan__name{color:var(--cream);}
.plan--featured .plan__tag{color:var(--muted-light);}
.plan--featured .plan__price b{color:var(--cream);}
.plan--featured .plan__price span{color:var(--muted-light);}
.plan--featured .plan__features div{color:#e7ece2;}
.plan--featured .plan__features div span{color:var(--copper-light);}
.plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--copper);color:var(--cream);font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:6px 16px;border-radius:20px;}
.plan__cta{display:block;text-align:center;background:var(--copper);color:var(--cream);text-decoration:none;font-size:15px;font-weight:600;padding:13px;border-radius:7px;}
.plan__cta:hover{background:#cf8a44;}

/* ===== QUOTE ===== */
.quote{background:var(--cream-alt);}
.quote__grid{max-width:var(--max);margin:0 auto;padding:96px 32px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.quote .h2{font-size:44px;line-height:1.08;margin:0 0 18px;}
.quote__lead{font-size:17px;line-height:1.6;color:#4a554a;margin:0 0 32px;max-width:420px;}
.quote__contacts{display:flex;flex-direction:column;gap:18px;}
.contact-row{display:flex;align-items:center;gap:14px;}
.contact-row__icon{width:38px;height:38px;border-radius:50%;background:var(--green);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.contact-row__label{font-size:13px;color:var(--muted);}
.contact-row__value{font-size:17px;font-weight:600;color:var(--ink);}

/* ===== FORM ===== */
.form-card{background:var(--cream);border-radius:16px;padding:40px;box-shadow:0 30px 60px -30px rgba(23,53,36,0.35);}
.form-card form{display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;}
.field__label{display:block;font-size:13px;font-weight:600;color:#3a463a;margin-bottom:7px;}
.field__input{width:100%;padding:13px 14px;border:1px solid rgba(23,53,36,0.18);border-radius:8px;font-size:15px;color:var(--ink);background:#fff;outline:none;}
textarea.field__input{resize:vertical;}
select.field__input{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;background-color:#fff;background-repeat:no-repeat;background-position:right 14px center;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%231b241c" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');}
.field__input:focus{border-color:var(--copper);outline:none;}
.field__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-card .btn--primary{border:none;font-size:16px;padding:15px;border-radius:8px;cursor:pointer;margin-top:4px;}
.form-card .btn--primary:disabled{opacity:0.6;cursor:default;}
.form-error{margin:10px 0 0;font-size:14px;line-height:1.5;color:#a23a2a;}
/* Honeypot: off-screen (not display:none, which naive bots skip), inert for humans + AT */
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ===== THANK YOU PANEL ===== */
.thanks{display:none;text-align:center;padding:36px 8px;}
.thanks__check{width:60px;height:60px;border-radius:50%;background:var(--green);color:var(--copper-light);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px;}
.thanks .h3{font-size:26px;margin:0 0 10px;}
.thanks p{font-size:16px;color:var(--muted);line-height:1.6;margin:0;}

/* ===== FOOTER ===== */
.footer{background:var(--green-dark);color:var(--muted-light);}
.footer__grid{max-width:var(--max);margin:0 auto;padding:64px 32px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;}
.footer__brand{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.footer__brand .brand__mark{width:32px;height:32px;}
.footer__brand .brand__mark span{width:10px;height:10px;}
.footer__brand-name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--cream);}
.footer__about{font-size:15px;line-height:1.6;max-width:320px;margin:0;color:#9aa791;}
.footer__col-head{font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--copper-light);margin-bottom:16px;}
.footer__col-links{display:flex;flex-direction:column;gap:11px;font-size:15px;}
.footer__col-links a{color:#c8d2bf;text-decoration:none;}
.footer__col-links a:hover{color:#fff;}
.footer__contact{display:flex;flex-direction:column;gap:11px;font-size:15px;color:#c8d2bf;}
.footer__bottom{border-top:1px solid rgba(255,255,255,0.08);}
.footer__bottom-inner{max-width:var(--max);margin:0 auto;padding:22px 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#7e8c76;}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .services__grid{grid-template-columns:repeat(2,1fr);}
  .price-grid{grid-template-columns:1fr;}
  .process__grid,.quote__grid,.footer__grid{grid-template-columns:1fr;}
  .process__copy{padding:64px 0;}
  .process__photo{margin:0 0 48px;min-height:280px;}
}
@media (max-width:640px){
  /* Mobile: contain the logo fully inside a solid sticky bar (no overflow), so
     the page scrolls cleanly underneath it and the logo never covers content.
     Desktop keeps the larger gutter-overflow logo. */
  .nav__inner{height:96px;padding:0 18px;}
  .brand{left:14px;top:6px;width:120px;height:84px;}
  .nav__links{gap:16px;}
  .nav__link,.nav__phone{display:none;}
  .hero__inner{padding:64px 18px 72px;}
  .h1{font-size:38px;}
  .h2{font-size:30px;}
  .section{padding:64px 18px;}
  .services__grid{grid-template-columns:1fr;}
  .quote{padding:64px 18px;}
  .form-card{padding:26px;}
  .field__row{grid-template-columns:1fr;}
}