/* Fonts: Barlow and Barlow Semi Condensed (SIL Open Font License), hosted on this site so pages don't wait for Google */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/barlow-latin-400-normal.woff2) format('woff2');
}@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/barlow-latin-500-normal.woff2) format('woff2');
}@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/barlow-latin-600-normal.woff2) format('woff2');
}@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/barlow-latin-700-normal.woff2) format('woff2');
}@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2');
}@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2');
}@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/fonts/barlow-semi-condensed-latin-800-normal.woff2) format('woff2');
}/* JM Landscapes — shared styles. Most layout lives inline in each page (as designed);
   this file holds the base, the header states, the menu, the form and the phone/tablet rules. */

html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF}
img{max-width:100%}
a{color:#2F5A2D}a:hover{color:#1F3F1E}
:focus-visible{outline:3px solid #89BD51;outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:#1C2E1B;color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px;top:8px}
/* Links to a section land with the section top just under the pinned header (84px; 72px on phones) */
[id]{scroll-margin-top:84px}
@media (max-width: 760px){ [id]{scroll-margin-top:72px} }

/* header: transparent over the banner, dark green once scrolled */
.site-head{background:transparent;box-shadow:none}
.site-head.scrolled{background:#1C2E1B;box-shadow:0 4px 14px rgba(0,0,0,.18)}

/* menu (tablet + phone) */
.mobile-menu{display:flex;flex-direction:column;background:#1C2E1B;padding:8px 24px 20px;border-top:1px solid rgba(255,255,255,.12)}
.mobile-menu[hidden]{display:none}
.mobile-menu a{color:#FFFFFF;text-decoration:none;font-weight:600;font-size:18px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.site-head.menu-open{background:#1C2E1B}

/* quote form */
.svc-btn{min-height:52px;border-radius:10px;border:1px solid #B6C3AE;background:#FFFFFF;font:inherit;font-size:15px;font-weight:600;color:#1D2A1C;padding:6px;cursor:pointer}
.svc-btn[aria-pressed="true"]{border:2px solid #477B44;background:#EEF5E6;font-weight:700;color:#2F5A2D}
.svc-btn[aria-pressed="true"]::before{content:"\2713\00a0"}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:0;padding:12px 14px;border-radius:10px;background:#EEF5E6;color:#2F5A2D;font-weight:600}
.form-msg.err{background:#FBEDEA;color:#8A2A1B}
.qform input:invalid:focus{border-color:#C0392B}

/* seasonal (leaf clearance) items are hidden out of season by site.js */
[data-season][data-off]{display:none!important}

/* ---------- homepage ---------- */
@media (max-width: 1000px){
 #work-track{margin-left:-24px!important;margin-right:-24px!important;padding-left:24px!important;padding-right:24px!important;scroll-padding-left:24px}
}
@media (min-width: 761px) and (max-width: 1000px){
 .reviews{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
 .reviews blockquote{font-size:17px!important}
}
@media (max-width: 760px){
 .hero-in{height:620px!important}
 .hz1{height:156px!important}
 .hz2{height:auto!important;padding-top:48px!important}
 .hero-p{font-size:18px!important}
 .h2big{font-size:36px!important}
 .qform{padding:20px!important}
 .tile-main{grid-row:auto!important;min-height:340px}
}

/* ---------- service pages ---------- */
@media (min-width: 1001px){
 .mt-hero-img{object-position:50% calc(95px - 21.84vw)!important}
}
/* tablet + phone: same crop as laptop (the same point in the photo sits 95px from the top, so only a little sky) */
@media (max-width: 1000px){
 .mt-hero-img{inset:auto!important;top:95px!important;left:50%!important;width:auto!important;max-width:none;aspect-ratio:1830/1240;height:max(calc((100% - 95px) * 1.4756), 67.76vw)!important;transform:translate(-50%,-32.23%)}
}
@media (min-width: 761px){
 .lw-wide{grid-column: span 2}
}
@media (min-width: 761px) and (max-width: 1000px){
 .svc-tiles{grid-template-columns:1fr 1fr!important}
}
@media (max-width: 760px){
 .svc-hero-in{min-height:460px!important;padding-top:120px!important;padding-bottom:44px!important}
 .svc-hero-in p{font-size:18px!important}
 .svc-tiles{grid-template-columns:1fr 1fr!important;gap:10px!important}
 .svc-tiles a{height:120px!important;font-size:19px!important;padding:12px!important}
 .ba-grid{grid-template-columns:1fr!important}
}

/* ---------- shared tablet + phone ---------- */
@media (min-width: 761px) and (max-width: 1000px){
 .nav-sec{display:none!important}
 .mmenu{display:flex!important;order:3;margin-left:-16px}
 .site-head nav[aria-label="Main"]{order:2;margin-left:auto}
 .site-head nav[aria-label="Main"] > a{white-space:nowrap}
}
@media (min-width: 1001px){ .mobile-menu{display:none!important} }
@media (max-width: 760px){
 .nav-sec{display:none!important}
 .trust{display:grid!important;grid-template-columns:1fr 1fr;justify-items:start;font-size:14px!important;padding:18px 20px!important}
 .sec,#quote{padding-top:48px!important;padding-bottom:56px!important}
 .wbtn{display:none!important}
 .hero-quote{display:none!important}
 .site-head{position:fixed!important;left:0;right:0;top:0;box-shadow:none!important;transition:transform .25s ease,background-color .25s ease!important}
 .site-head:not(.menu-open):not(.scrolled){background:transparent!important}
 .site-head.hide:not(.menu-open){transform:translateY(-100%)}
 .mmenu{display:flex!important;flex:none;margin-right:-10px}
 .site-head nav[aria-label="Main"]{display:none!important}
 /* logo and menu button always on one line, logo shrinks a little on narrow phones */
 .site-head > div{flex-wrap:nowrap!important;gap:12px!important;min-height:72px!important}
 .site-head > div > a:first-child{min-width:0}
 .site-head > div > a:first-child img{height:auto!important;width:min(230px, calc(100vw - 112px))!important}
 /* nothing can make the page slide sideways */
 html,body{overflow-x:clip}
 .mbar{display:grid!important;grid-template-columns:1fr 1fr 1.3fr;position:fixed;left:0;right:0;bottom:0;height:68px;background:#FFFFFF;border-top:1px solid #DDE5D6;box-shadow:0 -4px 14px rgba(0,0,0,.08);z-index:30}
 footer{padding-bottom:96px!important}
 /* open menu scrolls if it's ever taller than the space above the bottom bar */
 .mobile-menu{max-height:calc(100dvh - 72px - 68px);overflow-y:auto;box-sizing:border-box}
 /* last menu line needs no divider */
 .mobile-menu a:last-child{border-bottom:0}
}

/* simple text pages (privacy, 404) */
.prose h2{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:26px;color:#1D2A1C;margin:28px 0 8px}
.prose p,.prose ul{margin:0 0 12px}
/* Phone: quote form service buttons two to a row, so they don't fill the screen */
@media (max-width: 760px){
 .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .svc-grid .svc-btn{font-size:14px;line-height:1.2;padding:6px 8px}
}
/* Quote form photo box: the whole box opens the photo picker; the file input stays reachable by keyboard */
.photo-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.photo-box{position:relative}
.photo-box:hover,.photo-box.drag{border-color:#477B44!important;background:#F4F8F0}
.photo-box:focus-within{outline:3px solid #89BD51;outline-offset:2px}
/* Phone fixes (23 Oct): trust-strip ticks keep their size when the text wraps;
   maintenance tile heading the same size as the other tiles (it's no longer double height on a phone) */
.trust svg{flex:none}
@media (max-width: 760px){
 .tile-main{padding:24px!important;gap:8px!important}
 .tile-main h3{font-size:30px!important;line-height:1.05!important}
 .tile-main p{font-size:15px!important}
}
/* Phone hero: shorter now the quote button is hidden (no empty lawn), heading lifted closer to the logo */
@media (max-width: 760px){
 .hero-in{height:520px!important}
 .hz1{height:120px!important}
 .hz2{padding-top:30px!important}
}
/* Tidy-ups banner: BEFORE / AFTER labels either side of the split on tablets, where only the middle of the photo shows (phones show the after photo instead) */
.ba-tag{display:none}
@media (min-width: 761px) and (max-width: 1000px){ .ba-tag{display:block} }
/* Phone hero: the shading behind the words, wider and softer for the shorter phone hero */
@media (max-width: 760px){
 .hero-scrim{background:radial-gradient(ellipse 95% 30% at 50% 39%, rgba(10,18,9,.36) 0%, rgba(10,18,9,.16) 60%, rgba(10,18,9,0) 100%)!important}
}

/* Phones: tidy-ups shows just the "after" photo (banner via <picture>, homepage tile here), with the writing over it like the other services;
   the garden maintenance tile is the same height as the other tiles */
@media (max-width: 760px){
 .tidy-hero-img{object-position:center 45%!important}
 .tidy-tile{background:linear-gradient(180deg, rgba(20,34,19,var(--sa,0)) var(--ts,15%), rgba(20,34,19,var(--te,.92)) 100%), var(--photo-phone, none) center 55% / cover!important}
 .tidy-tag{display:none}
 .tile-main{min-height:0!important}
}

/* Service banners: soft, wide shading where the words sit, blended into the photo (no visible patch), plus the same soft glow behind the letters as the homepage hero */
.svc-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 20% 80%, rgba(10,18,9,.42) 0%, rgba(10,18,9,.22) 55%, rgba(10,18,9,0) 100%)}
.svc-shade-strong{background:radial-gradient(ellipse 85% 75% at 22% 80%, rgba(10,18,9,.58) 0%, rgba(10,18,9,.3) 55%, rgba(10,18,9,0) 100%)}
.svc-hero-in h1{text-shadow:0 3px 22px rgba(0,0,0,.35)}
.svc-hero-in > p{text-shadow:0 2px 12px rgba(0,0,0,.55)}
@media (max-width: 760px){
 .svc-shade{background:radial-gradient(ellipse 120% 50% at 40% 64%, rgba(10,18,9,.4) 0%, rgba(10,18,9,.2) 60%, rgba(10,18,9,0) 100%)}
 .svc-shade-strong{background:radial-gradient(ellipse 125% 55% at 40% 64%, rgba(10,18,9,.55) 0%, rgba(10,18,9,.28) 60%, rgba(10,18,9,0) 100%)}
}
/* Phone homepage hero: photo and words moved down together (photo shown 17% larger from the top), so the hedge and words sit more centrally with less lawn below */
@media (max-width: 760px){
 .home-hero-img{height:117%!important;bottom:auto!important}
 .hz1{height:146px!important}
 .hz2{padding-top:52px!important}
 .hero-scrim{background:radial-gradient(ellipse 95% 30% at 50% 46%, rgba(10,18,9,.36) 0%, rgba(10,18,9,.16) 60%, rgba(10,18,9,0) 100%)!important}
}

/* Homepage leaf clearance strip (in season): photo, words, button; on phones the button goes full width underneath */
@media (max-width: 760px){
 .leafstrip{flex-wrap:wrap;gap:14px!important;align-items:flex-start!important}
 .leafstrip span{font-size:15px!important}
 .leafstrip img{width:96px!important;height:96px!important}
 .leafstrip > div{flex:1 1 160px!important}
 .leafstrip > a{flex:1 1 100%}
}

/* Phones: service tiles a little taller with lighter shading so more of each photo shows; the words get a soft shadow instead.
   Clearance and tree surgery (brightest photos) keep more shading behind the words. */
@media (max-width: 760px){
 #services .tile-grid > a{min-height:270px!important;--sa:0;--ts:22%;--te:.88}
 #services .tile-grid > a.bright-tile{--sa:.18;--ts:8%;--te:.95}
 #services .tile-grid > a h3{text-shadow:0 2px 10px rgba(0,0,0,.6)!important}
 #services .tile-grid > a p,#services .tile-grid > a > span{text-shadow:0 1px 6px rgba(0,0,0,.8)!important}
}

/* Desktop: Services dropdown in the header (tablet and phone use the menu button) */
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;padding:0;height:48px;border:0;background:transparent;color:#FFFFFF;font:inherit;font-weight:600;cursor:pointer}
.nav-dd-btn svg{transition:transform .15s ease}
.nav-dd-panel{display:none;position:absolute;top:100%;left:-18px;padding-top:6px;z-index:40}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel,.nav-dd.open .nav-dd-panel{display:block}
.nav-dd:hover .nav-dd-btn svg,.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd.shut .nav-dd-panel{display:none!important}
.nav-dd-box{min-width:250px;background:#1C2E1B;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.28);padding:8px;display:flex;flex-direction:column}
.nav-dd-box a{color:#FFFFFF;text-decoration:none;font-weight:600;font-size:16px;padding:11px 14px;border-radius:6px;white-space:nowrap}
.nav-dd-box a:hover,.nav-dd-box a:focus-visible{background:rgba(255,255,255,.08);color:#A9CF82}
.nav-dd-box a[aria-current="page"]{color:#A9CF82}
.nav-dd-box a.nav-dd-all{margin-top:6px;border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 6px 6px;color:#C9D6C2;font-size:15px}

/* Quote form button while sending: three dots that bounce in turn */
button.busy{cursor:progress;opacity:.95}
button.busy .dots{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
button.busy .dots i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:jmdot 1s infinite ease-in-out}
button.busy .dots i:nth-child(2){animation-delay:.15s}
button.busy .dots i:nth-child(3){animation-delay:.3s}
@keyframes jmdot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-5px);opacity:1}}
@media (prefers-reduced-motion: reduce){button.busy .dots i{animation-duration:2s}}