/* ============================================================
   JM LANDSCAPE LLC: the quiet pages.
   Privacy, terms and the 404 share this one stylesheet. They
   carry no video, no scroll work and no libraries, so they load
   instantly and still look like the rest of the site: same bone
   canvas, same Literata headings, same leaf red.
   ============================================================ */
:root{
  --canvas:#F5F1EA;
  --panel:#FBF9F5;
  --accent:#B4271A;
  --accent-hover:#8E1D12;
  --teal:#0B6A69;
  --text-primary:#1A1714;
  --text-secondary:#5C554D;
  --line:rgba(26,23,20,.13);
  --display:"Literata",Georgia,"Times New Roman",serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased}

/* the skip link, same as the main page */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:#fff;padding:12px 18px;border-radius:0 0 8px 0;font-family:var(--mono);font-size:13px}
.skip:focus{left:0}

a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:min(720px,92vw);margin:0 auto}
/* the reading column is 720px; sections with two columns need the room */
.wrap--wide{width:min(1180px,92vw)}

/* --- the header, a plainer version of the site's nav --- */
.ph{border-bottom:1px solid var(--line);background:rgba(245,241,234,.9);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.ph__in{width:min(1180px,92vw);margin:0 auto;height:70px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.ph__mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-primary)}
.ph__mark b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;
  white-space:nowrap}
/* the legal suffix, set smaller the way a wordmark carries one */
.ph__mark b .llc{font-size:.62em;letter-spacing:.05em;opacity:.72;margin-left:.06em;
  vertical-align:.04em}
.ph__mark img{display:block;width:28px;height:28px}
.ph__back{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--teal)}
.ph__back:hover{color:var(--accent)}
/* on a phone the name and the back link were each wrapping onto two lines */
@media(max-width:520px){
  .ph__in{height:62px;gap:10px}
  .ph__mark{gap:8px}
  .ph__mark b{font-size:17px}
  .ph__mark img{width:24px;height:24px}
  .ph__back{font-size:10.5px;letter-spacing:.07em;white-space:nowrap}
}
/* at 320px the back link still pushed 6px past the edge, so it loses the
   words it can spare rather than the page gaining a sideways scroll */
@media(max-width:360px){
  .ph__back span{display:none}
  .ph__mark b{font-size:16px}
}

/* --- the words --- */
main{padding:clamp(44px,7vw,86px) 0 clamp(60px,9vw,110px)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);margin:0 0 14px}
h1{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(34px,5.4vw,52px);margin:0 0 18px}
h2{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.2;
  font-size:clamp(21px,2.6vw,25px);margin:44px 0 12px}
p{margin:0 0 16px;color:var(--text-secondary);max-width:64ch}
h1 + p.lede{font-size:19px;color:var(--text-primary);max-width:56ch}
ul{margin:0 0 16px;padding-left:22px;color:var(--text-secondary);max-width:64ch}
li{margin:0 0 9px}
strong{color:var(--text-primary);font-weight:500}
.effective{font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--text-secondary);margin:-4px 0 26px}
.updated{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  color:var(--text-secondary);margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}

/* the contact block at the end of each page */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:clamp(20px,3vw,28px);margin-top:28px}
.card p{margin:0 0 8px}
.card p:last-child{margin:0}

/* --- the 404 --- */
.lost{min-height:calc(100vh - 70px);display:grid;place-items:center;text-align:center;
  padding:40px 0 90px}
.lost h1{margin-bottom:14px}
.lost p{margin-left:auto;margin-right:auto}
.lost__num{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--accent);
  margin:0 0 18px}
.lost__go{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;
  text-decoration:none;font-size:15px;padding:13px 24px;border-radius:999px;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:var(--accent-hover);color:#fff;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--text-primary);
  box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:transparent;color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent)}

/* ============================================================
   THE DARK OPENING BAND
   The quiet pages used to start with a headline on the bone
   canvas, which made them read as small print. A dark band with
   the name of the county, the title, what the business is worth
   trusting for, and two ways to reach it gives each page a front
   door of its own. Same ink as the estimate section on the home
   page, so it belongs to the same site.
   ============================================================ */
/* Height matters here. At the first size this was written at it filled 60% of
   a phone screen, so landing on the page meant landing on a black rectangle.
   It is a doorway, not a room. */
.phero{background:var(--ink,#16130F);color:#F5F1EA;position:relative;overflow:hidden;
  padding:clamp(38px,6vw,72px) 0 clamp(34px,5vw,60px);text-align:center}
/* a suggestion of light coming in from the top, not a photograph */
.phero::before{content:"";position:absolute;inset:-40% -10% auto;height:120%;
  background:radial-gradient(60% 46% at 50% 0%,rgba(196,87,31,.20),transparent 68%);
  pointer-events:none}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55}
.phero__in{position:relative;width:min(900px,92vw);margin:0 auto}
.phero .kicker{color:#C9A227;display:flex;align-items:center;justify-content:center;gap:9px;
  margin-bottom:18px}
.phero .kicker img{width:15px;height:15px;display:block}
.phero h1{color:#F7F4EE;margin:0 0 14px;font-size:clamp(34px,5.8vw,66px);letter-spacing:-.022em}
.phero p{color:#CFC8BD;max-width:54ch;margin:0 auto 22px;font-size:16.5px}

/* the three things worth saying before anything else */
.ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:0 0 24px;
  padding:0;list-style:none}
.ticks li{display:flex;align-items:center;gap:8px;font-size:14px;color:#DCD5CA}
/* On a phone these three take three lines and push the whole page down, and
   every one of them is said again further down. The doorway keeps the title
   and the two buttons. */
@media(max-width:600px){
  .ticks{display:none}
  /* the sub line goes too: on a phone the questions themselves start the page
     faster than a sentence about them does */
  .phero > .phero__in > p{display:none}
  .phero{padding:30px 0 26px}
  .phero .kicker{margin-bottom:14px;font-size:11px}
  .phero h1{margin-bottom:20px}
  .phero .btnrow{flex-direction:column;align-items:center;gap:10px}
  .phero .btnrow .btn{width:100%;max-width:300px;justify-content:center;padding:12px 20px}
}
.ticks svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:#C9A227;stroke-width:2.4}
.phero .btnrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn--ghostdark{background:transparent;color:#F5F1EA;box-shadow:inset 0 0 0 1px rgba(245,241,234,.4)}
.btn--ghostdark:hover{background:rgba(245,241,234,.08);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(245,241,234,.75)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* ============================================================
   THE SPLIT: what we promise on the left, the form on the right
   ============================================================ */
.split{display:grid;gap:clamp(28px,4vw,56px);align-items:start;
  padding:clamp(48px,7vw,86px) 0}
@media(min-width:900px){.split{grid-template-columns:1fr 1.05fr}}
.split__say h2{margin-top:0}
.promise{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:13px}
.promise li{display:flex;gap:11px;align-items:flex-start;font-size:16px;
  color:var(--text-primary)}
.promise svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;fill:none;
  stroke:var(--teal);stroke-width:2.4}
.callnow{display:flex;align-items:center;gap:14px;margin-top:28px}
.callnow__icon{width:46px;height:46px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;flex-shrink:0}
.callnow__icon svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2}
.callnow__k{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-secondary);display:block;margin-bottom:3px}
.callnow a{font-family:var(--display);font-weight:700;font-size:23px;color:var(--text-primary);
  text-decoration:none;letter-spacing:-.01em}
.callnow a:hover{color:var(--accent)}
.formcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,3.4vw,38px);box-shadow:0 18px 44px -28px rgba(26,23,20,.4)}
.formcard h2{margin:6px 0 4px;font-size:clamp(22px,2.6vw,27px)}
.formcard .kicker{margin-bottom:10px}

/* ============================================================
   THE QUESTIONS, as cards that open
   details/summary keeps every answer in the page for a crawler
   and for anyone pressing ctrl+F, open or shut.
   ============================================================ */
.qa{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  margin-bottom:12px;overflow:hidden;transition:border-color .25s var(--ease)}
.qa[open]{border-color:rgba(11,106,105,.45)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:19px 22px;font-family:var(--display);font-weight:600;font-size:17.5px;
  line-height:1.35;color:var(--text-primary)}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{margin:0;font:inherit;flex:1}
.qa__sign{width:28px;height:28px;border-radius:50%;flex-shrink:0;margin-top:1px;
  background:rgba(11,106,105,.12);display:grid;place-items:center;
  transition:background .25s var(--ease),transform .3s var(--ease)}
.qa__sign svg{width:14px;height:14px;fill:none;stroke:var(--teal);stroke-width:2.6}
.qa[open] .qa__sign{background:var(--teal);transform:rotate(180deg)}
.qa[open] .qa__sign svg{stroke:#fff}
.qa__a{padding:0 22px 20px 66px}
.qa__a p{margin:0 0 12px}
.qa__a p:last-child{margin:0}
@media(max-width:560px){.qa__a{padding-left:22px}}
.qagroup{margin:38px 0 34px}
.qagroup > h2{margin-bottom:18px}
.qagroup--first{margin-top:clamp(30px,4.5vw,46px)}
.qagroup--first > h2{margin-top:0}

/* the band that sends people to the work, at the end of a page */
.seework{background:var(--canvas-alt,#EBE6DC);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);text-align:center;
  padding:clamp(48px,7vw,80px) 0;margin-top:clamp(40px,6vw,70px)}
.seework h2{margin:0 auto 10px;max-width:22ch}
.seework p{margin:0 auto 24px;max-width:52ch}

/* --- a page with sections worth jumping to --- */
.toc{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}
.toc a{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-decoration:none;
  color:var(--teal);border:1px solid var(--line);border-radius:100px;padding:9px 15px;
  background:var(--panel);transition:border-color .25s var(--ease),color .25s var(--ease)}
.toc a:hover{color:var(--accent);border-color:var(--accent)}
h3{font-family:var(--display);font-weight:600;font-size:18.5px;line-height:1.3;
  letter-spacing:-.004em;margin:30px 0 8px}
h2 + h3{margin-top:22px}
h2{scroll-margin-top:90px}

/* --- the call back form --------------------------------------------------
   Same field shapes as the estimate form on the home page, on the light
   canvas instead of the dark panel. */
.ask{margin:8px 0 14px}
.ask__grid{display:grid;gap:18px;margin-bottom:24px}
@media(min-width:620px){
  .ask__grid{grid-template-columns:1fr 1fr}
  .field--full{grid-column:1/-1}
}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
.field .opt{text-transform:none;letter-spacing:0;opacity:.7}
.field .req{text-transform:none;letter-spacing:0;color:var(--accent);opacity:.85}
.btn--wide{width:100%;justify-content:center}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:16px;
  color:var(--text-primary);background:var(--panel);border:1px solid var(--line-mid,rgba(26,23,20,.22));
  border-radius:10px;padding:13px 15px;transition:border-color .25s var(--ease)}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(180,39,26,.14)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.ask .btn{border:0;cursor:pointer;font-family:var(--body)}
.consent{margin-top:16px;font-size:13.5px;max-width:52ch}
.formnote{padding:14px 16px;border-radius:10px;font-size:15px;margin:0 0 22px;max-width:60ch}
.formnote--bad{background:rgba(180,39,26,.09);border:1px solid rgba(180,39,26,.35);
  color:var(--text-primary)}
/* the robot trap: gone for people, still there for a script reading the HTML */
.nope{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- the footer --- */
.pf{border-top:1px solid var(--line);padding:26px 0;font-family:var(--mono);font-size:12.5px;
  color:var(--text-secondary)}
.pf__in{width:min(1180px,92vw);margin:0 auto;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.pf a{color:var(--text-secondary);text-decoration:none}
.pf a:hover{color:var(--accent)}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}