/* Armstrong Lawn and Landscape. Mown stripes, the shield's rim, a cream page for the paperwork. */
:root {
  --green: #054217; --stripe: #10592a; --green-deep: #032e10; --gold: #F1B119; --lawn: #8db648;
  --lawn-ink: #46661a; --paper: #F4F3EA; --white: #fff; --ink: #11241A; --muted: #46564b;
  --rule: #d3d7c6; --on-green: #e3ebdd; --on-green-2: #bed1b9;
  --display: 'Besley', Georgia, serif; --text: 'Instrument Sans', system-ui, sans-serif;
  --m-dur: .9s; --m-ease: cubic-bezier(.2, .7, .1, 1); --m-rise: 22px; --m-word: 60ms;
  --gutter: 20px; --top-h: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--green); margin: 0; }
p { margin: 0; }
[id] { scroll-margin-top: 72px; }
.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.label { font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.label .n { font-family: var(--display); font-weight: 700; letter-spacing: .04em; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--gold); color: var(--ink); padding: 10px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.preview { background: var(--ink); color: #d9e2d4; font-size: .8rem; text-align: center; padding: 7px 16px; letter-spacing: .02em; }
.sec-h2 { font-size: clamp(2.4rem, 7.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.01em; margin-top: 8px; }

/* header: a green bar that reads as part of the hero field */
.top { position: sticky; top: 0; z-index: 30; background: var(--green); color: var(--white); }
.top.is-scrolled { box-shadow: 0 1px 0 rgba(241, 177, 25, .35); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--top-h); }
.mark { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: .09em; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.mark span { color: var(--gold); }
.nav { display: none; }
.top-call { font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }

/* hero: the lawn drawn in CSS, inside the shield's triple rim */
.hero { background: var(--green); color: var(--white); padding: 0 10px 10px; }
.rim { position: relative; overflow: hidden; border: 2px solid rgba(255, 255, 255, .9); display: flex; flex-direction: column; }
.rim::before { content: ""; position: absolute; inset: 5px; border: 2px solid var(--gold); pointer-events: none; z-index: 3; }
.lawn { position: absolute; inset: 7px; overflow: hidden; z-index: 0; }
.lanes { position: absolute; top: -10%; bottom: -10%; left: -55%; right: -55%; display: flex; transform: skewX(-14deg); }
.lanes i { flex: 1; background: var(--green); }
.lanes i:nth-child(even) { background: var(--stripe); }
.name { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 22px 32px; }
.name h1 { color: var(--white); font-weight: 800; line-height: .96; letter-spacing: -.015em; }
.name h1 .a { display: block; font-size: clamp(3rem, 12.8vw, 11rem); }
.name h1 .b { display: block; font-style: italic; font-weight: 500; font-size: clamp(2.1rem, 10vw, 5rem); color: var(--gold); letter-spacing: -.01em; line-height: 1.05; margin-top: .1em; }
.name h1 .w { display: inline-block; }
.name .line { margin-top: 20px; max-width: 34ch; color: var(--on-green); font-size: 1.0625rem; }
.name .cities { margin-top: 16px; color: var(--on-green-2); }
.door { position: relative; z-index: 2; margin: 0 7px 7px; background: var(--green-deep); border-top: 1px solid rgba(241, 177, 25, .55); padding: 18px 16px 10px; }
.door .label { color: var(--on-green-2); display: block; }
.num { display: inline-block; font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 10.6vw, 6.25rem); line-height: 1.08; color: var(--gold); letter-spacing: -.01em; text-decoration: none; }
.acts { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 2px; }
.acts a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; color: var(--white); }
.acts .est { color: var(--gold); }
/* Call and Text as real buttons: solid gold and a gold outline, each half the width on phones */
.calls { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 12px; }
.cbtn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1.5px solid var(--gold); font-weight: 600; text-decoration: none; }
.cbtn.call { background: var(--gold); color: var(--green); --m-fill: rgba(255, 255, 255, .4); }
.cbtn.text { color: var(--gold); --m-fill: rgba(241, 177, 25, .2); }
.calls .est { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--gold); }

/* hero entrance, in CSS from first paint: the rim draws, the stripes come in pass by pass like a mower,
   then the name, the line, and the number band rises from under the rim */
@keyframes pass-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes pass-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes rim-draw { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes band-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero { --q: cubic-bezier(.25, 1, .5, 1); }
  .hero .rim::before { animation: rim-draw .9s var(--q) -.25s both; }
  .hero .lanes i:nth-child(4n+2) { animation: pass-up .7s var(--q) both; }
  .hero .lanes i:nth-child(4n) { animation: pass-down .7s var(--q) both; }
  .hero .lanes i:nth-child(2) { animation-delay: -250ms; }
  .hero .lanes i:nth-child(4) { animation-delay: -130ms; }
  .hero .lanes i:nth-child(6) { animation-delay: -10ms; }
  .hero .lanes i:nth-child(8) { animation-delay: 110ms; }
  .hero h1 .a { animation: rise-in .6s var(--q) .6s both; }
  .hero h1 .w { animation: rise-in .6s var(--q) .8s both; }
  .hero h1 .w + .w { animation-delay: .88s; }
  .hero h1 .w + .w + .w { animation-delay: .96s; }
  .hero .line { animation: rise-in .6s var(--q) 1.1s both; }
  .hero .cities { animation: rise-in .6s var(--q) 1.2s both; }
  .hero .door { animation: band-up .6s var(--q) 1.3s both; }
}

/* before / after: the page's second big moment. Full width on phones, the after wipes in along the stripe angle */
.work { padding: 88px 0 56px; overflow-x: clip; }
.work .label { color: var(--lawn-ink); }
.work .head { margin-bottom: 40px; padding-inline: var(--gutter); }
.pair { display: grid; gap: 0; margin-inline: calc(-1 * var(--gutter)); }
.pair figure { margin: 0; position: relative; }
.ph { position: relative; overflow: hidden; }
.ph img { width: 100%; aspect-ratio: 1080 / 538; object-fit: cover; }
.ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); pointer-events: none; }
.pair figcaption { position: absolute; z-index: 2; left: 16px; bottom: 14px; color: var(--white); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1; pointer-events: none; }
.pair .before figcaption { transition: opacity .4s ease .5s; }
.pair .after figcaption { transition: opacity .4s ease 1.1s; }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .pair .ph[data-reveal="wipe"] { opacity: 1; transform: none; clip-path: polygon(0 0, 0 0, -25% 100%, 0 100%); }
  .pair .ph[data-reveal="wipe"].is-in { clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%); }
  .pair .ph:not(.is-in) + figcaption { opacity: 0; }
}

/* services: the work order */
.order { background: var(--paper); padding: 0 0 56px; }
.order > .wrap { border-top: 6px double var(--gold); padding-top: 88px; }
.order .label { color: var(--lawn-ink); }
.order .sec-h2 { margin-bottom: 32px; font-size: 2.5rem; }
.order .side .est { display: none; }
.order ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.order li { display: grid; grid-template-columns: 40px 1fr; gap: 6px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.order .no { display: grid; place-items: center; width: 40px; height: 40px; background: var(--green); color: var(--gold); font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1; }
.order h3 { font-size: 1.3rem; line-height: 1.2; }
.order li p { grid-column: 2; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.order .ofoot { display: grid; gap: 8px; padding-top: 28px; }
.order .ofoot .said { text-wrap: balance; font-family: var(--display); font-style: italic; font-size: 1.35rem; line-height: 1.3; color: var(--green); }
.order .ofoot .free { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lawn-ink); }
.order .ofoot .free a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--green); text-decoration: none; }

/* the owner's question: one statement on cream */
.ask { padding: 0 0 80px; }
.ask > .wrap { border-top: 6px double var(--gold); padding-top: 56px; }
.ask .label { color: var(--lawn-ink); }
.ask blockquote { margin: 20px 0 0; }
.ask blockquote p { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 8.2vw, 4.4rem); line-height: 1.12; letter-spacing: -.01em; color: var(--green); }
.ask .answer { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--green); display: grid; gap: 24px; justify-items: start; }
.ask .answer .then { font-family: var(--display); font-size: 1.375rem; line-height: 1.35; color: var(--ink); max-width: 36ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; background: var(--green); color: var(--white); font: 600 1rem/1 var(--text); text-decoration: none; border: 0; border-radius: 0; cursor: pointer; --m-fill: rgba(241, 177, 25, .28); }
.btn:hover { background: #0a4f1f; }

/* reviews: solid shield green, gold quote marks */
.reviews { background: var(--green); color: var(--white); padding: 64px 0 72px; }
.reviews .label { color: var(--lawn); font-family: var(--text); }
.quotes { margin-top: 28px; display: grid; gap: 0; }
.quote { margin: 0; padding: 32px 0 20px; border-top: 1px solid rgba(255, 255, 255, .22); position: relative; }
.quote.lead::before { content: "\201C"; display: block; font-family: var(--display); font-weight: 700; font-size: 4.5rem; line-height: .6; height: .42em; color: var(--gold); }
.quote p { font-family: var(--display); font-style: italic; font-size: 1.125rem; line-height: 1.45; color: var(--white); text-wrap: pretty; }
.quote.lead p { font-size: 1.5rem; line-height: 1.3; }
.quote.one, .quote.two { padding: 20px 0; }
.quote.two { padding-bottom: 0; }
.quote.two p:not(.cite) { text-wrap: wrap; }
.quote.one p:not(.cite), .quote.two p:not(.cite) { font-size: 1.0625rem; line-height: 1.5; }
.quote p.cite { margin-top: 20px; font-family: var(--text); font-style: normal; font-weight: 600; font-size: .75rem; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: #9fb89f; }
.quote .cite b { color: var(--paper); font-weight: 600; white-space: nowrap; }

/* service area + about: editorial split */
.area { padding: 88px 0 96px; }
.area .label { color: var(--lawn-ink); }
.cities-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.cities-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.cities-list li { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--green); padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cities-list li:last-child { grid-column: 1 / -1; }
.cities-list li small { font-family: var(--text); font-weight: 600; font-size: .78rem; letter-spacing: .14em; color: var(--lawn-ink); }
.where { margin-top: 64px; }
.where .cities-list { margin-top: 24px; }
.area .where-h { font-family: var(--text); font-weight: 600; color: var(--lawn-ink); }
.about h2 { font-size: clamp(1.7rem, 5.4vw, 2.25rem); line-height: 1.15; }
.about p { margin-top: 16px; max-width: 60ch; }
.about > .label:first-child { margin-top: 0; }
.about .lede { text-wrap: balance; margin-top: 20px; font-family: var(--display); font-size: 1.375rem; line-height: 1.35; color: var(--ink); }
.about .away { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--green); font-family: var(--display); font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--green); }
.about .sign { margin-top: 20px; color: var(--muted); }
.about .sign b { display: block; font-family: var(--display); font-size: 1.3rem; color: var(--green); letter-spacing: 0; text-transform: none; }

/* free estimate: the number band again, one pass of stripes, form on cream */
.estimate { background: var(--white); border-top: 1px solid var(--rule); overflow: clip; }
/* one pass of stripes, the hero's angle and tones, edge to edge */
.band { --lane: 82px; position: relative; color: var(--white); padding: 72px var(--gutter) 64px; background: repeating-linear-gradient(104deg, var(--green) 0 var(--lane), var(--stripe) var(--lane) calc(2 * var(--lane))); }
.band-in { position: relative; z-index: 1; }
.band .calls { max-width: 420px; }
.band .label { color: var(--lawn); }
.band h2 { color: var(--white); }
.band .intro { margin-top: 16px; color: var(--on-green); max-width: 36ch; }
.band .num { display: inline-block; margin-top: 32px; font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 10.6vw, 4.6rem); line-height: 1.05; color: var(--gold); text-decoration: none; }
.band .acts { margin-top: 4px; }
.band .mail { margin-top: 20px; color: var(--on-green-2); overflow-wrap: anywhere; }
.band .mail a { color: var(--white); }
.form-side { padding: 64px var(--gutter) 88px; background: var(--paper); }
.form-side h3 { font-size: 1.7rem; line-height: 1.2; }
.form-side > p { margin-top: 12px; font-size: 1.0625rem; color: #4a5a4f; }

.form { margin-top: 32px; display: grid; gap: 28px; }
.group { border: 0; padding: 0; margin: 0; display: grid; gap: 20px; min-width: 0; }
.group legend { padding: 0; margin-bottom: 4px; font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lawn-ink); }
.row2 { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field .lab { font-weight: 600; font-size: 1rem; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; font: 400 1rem/1.4 var(--text); color: var(--ink); background: var(--white); border: 1.5px solid #9aa596; border-radius: 0; padding: 12px 14px; min-height: 50px; }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(241, 177, 25, .55); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #a3261b; }

.field input[type="file"] { padding: 10px; background: var(--white); }
.field input[type="file"]::file-selector-button { font: 600 .95rem var(--text); background: var(--green); color: var(--white); border: 0; padding: 10px 14px; margin-right: 12px; cursor: pointer; }
.hint { font-size: .9rem; color: var(--muted); }
.ticks { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.ticks label { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--rule); cursor: pointer; font-weight: 400; }
.ticks input { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; margin: 0 0 0 -11px; flex: none; font-size: 16px; cursor: pointer; background: none; box-shadow: none; border: 0; position: relative; }
.ticks input::before { content: ""; position: absolute; left: 11px; top: 11px; width: 22px; height: 22px; border: 1.5px solid #8b9787; background: var(--white); box-sizing: border-box; }
.ticks input[type="radio"]::before { border-radius: 50%; }
.ticks input:checked::before { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 4px var(--white); }
.ticks input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 19px; top: 15px; width: 6px; height: 11px; border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ticks input[type="checkbox"]:checked::before { box-shadow: none; }
.form .ticks input:focus, .form .ticks input:focus-visible { outline: none; box-shadow: none; }
.ticks input:focus-visible::before { outline: 3px solid var(--gold); outline-offset: 2px; }
.ticks label { gap: 4px; }
.inline { display: flex; flex-wrap: wrap; gap: 0 28px; border-top: 0; }
.inline label { border-bottom: 0; }
/* home or business: the label and its two radios on one row */
.field.kind { grid-template-columns: auto 1fr; align-items: center; column-gap: 32px; }
.field.kind .inline { justify-content: flex-start; flex-wrap: nowrap; gap: 0 24px; }
.field.kind .lab { white-space: nowrap; }
.field.kind .field-error { grid-column: 1 / -1; }
.field-error { color: #a3261b; font-size: .92rem; min-height: 0; }
.field-error:empty { display: none; }
.form-foot { display: grid; gap: 12px; justify-items: start; }
.form-foot .btn { min-width: 220px; }
.privacy-line { font-size: .92rem; color: var(--muted); }
.form-status:empty { display: none; }
.form-status { padding: 14px 16px; border-left: 4px solid var(--green); background: var(--white); font-weight: 600; }
.form-status.is-error, .form-status[data-state="error"] { border-left-color: #a3261b; color: #7d1d14; }
.form { position: relative; }
.hp { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.hp input { width: 1px; height: 1px; font-size: 16px; opacity: 0; }

/* footer: shield green, the crest once, closed by the triple rim */
.foot { position: relative; margin-top: -1px; background: var(--green); color: var(--on-green); padding: 80px 0 0; }
.foot a { color: var(--white); }
.foot-grid { display: grid; gap: 40px; }
.crest img { width: 200px; height: auto; }
.crest .fcities { margin-top: 24px; font-size: .95rem; color: var(--on-green-2); }
.foot h2 { font-family: var(--text); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lawn); margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; }
.foot .bignum { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--gold); text-decoration: none; }
.foot .area-li li { line-height: 1.9; }
.foot-legal { margin-top: 56px; padding: 20px 0 28px; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; gap: 8px; font-size: .92rem; color: var(--on-green-2); }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
.trim { height: 18px; background: linear-gradient(var(--green) 0 4px, var(--white) 4px 8px, var(--green) 8px 11px, var(--gold) 11px 15px, var(--green) 15px); }

/* phone action bar: the number band in small */
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.4fr; background: var(--green-deep); border-top: 2px solid var(--gold); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--white); font-weight: 600; text-decoration: none; --m-fill: rgba(241, 177, 25, .2); }
.actionbar a + a { border-left: 1px solid rgba(255, 255, 255, .16); }
.actionbar .est { color: var(--gold); }
body { padding-bottom: 0; }
/* room for the phone action bar sits above the copyright row, so the triple rim stays the last pixels of the page */
@media (max-width: 899px) { .foot-legal { margin-bottom: calc(40px + env(safe-area-inset-bottom)); } }

/* 404 */
.lost { background: var(--green); color: var(--white); padding: 0 10px 10px; }
.lost .rim { min-height: calc(100svh - var(--top-h) - 42px); }
.lost .name h1 { font-size: clamp(2.6rem, 11vw, 6rem); line-height: 1; }
.lost .big { position: relative; z-index: 2; font-family: var(--display); font-weight: 800; font-size: clamp(6rem, 34vw, 18rem); line-height: .9; color: var(--gold); }
.lost .acts { margin-top: 16px; }

@media (min-width: 600px) {
  .row2 { grid-template-columns: 1fr 1fr; }
  .inline-wide { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  :root { --gutter: 56px; --top-h: 76px; }
  .wrap { width: min(1240px, 100% - 112px); }
  .grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .nav { display: flex; gap: 32px; margin-left: auto; }
  .nav a { text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; color: var(--on-green); }
  .nav a:hover { color: var(--white); }
  .top-call { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, .25); }
  .mark { font-size: 1.5rem; }

  .hero { padding: 0 22px 22px; }
  .rim { min-height: calc(100svh - var(--top-h) - 54px); }
  .name { padding: 64px 56px 56px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-content: end; }
  .name > * { grid-column: 1 / 12; }
  .name .line { grid-column: 1 / 7; font-size: 1.15rem; }
  .name .cities { grid-column: 1 / 10; }
  .rim { min-height: calc(100svh - var(--top-h) - 54px); }
  .door { margin: 0 7px 7px; padding: 24px 49px 22px; }
  .door-row { display: flex; align-items: flex-end; gap: 48px; }
  .door .num { line-height: 1; }
  .door .calls { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
  .cbtn { min-width: 160px; min-height: 56px; font-size: 1.0625rem; }
  .calls .est { margin-left: 20px; font-size: 1.125rem; }

  .work { padding: 88px 0 72px; }
  /* heading in columns 1-3 beside the pair, before and after at equal height, labels inside the frames */
  /* the pair runs from column 4 to the right edge of the screen, each frame up to 540px (half its native width) */
  .pair { margin-inline: 0 calc((100% - 100vw) / 2); grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(0, 540px)); column-gap: 2px; align-items: end; }
  .work .head { grid-column: 1; grid-row: 1; margin: 0; padding: 0 32px 0 0; }
  .work .head .sec-h2 { line-height: .96; }
  .work .head .sec-h2 { margin-top: 16px; }
  .pair .before { grid-column: 2; grid-row: 1; }
  .pair .after { grid-column: 3; grid-row: 1; }
  .pair figcaption { left: 20px; bottom: 16px; }

  .order { padding: 0 0 104px; }
  .order > .wrap { padding-top: 144px; }
  .order .side .est span:first-child { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lawn-ink); }
  .order .side .est .said { text-wrap: balance; }
  .order .side { grid-column: 1 / 5; position: sticky; top: 112px; align-self: start; }
  .order .side .est { display: block; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--rule); }
  .order .side .est span { display: block; font-weight: 600; }
  .order .side .est a { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 2.5rem; line-height: 1.15; color: var(--green); text-decoration: none; }
  .order .side .est .said { display: block; margin-top: 32px; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--green); }
  .order .list { grid-column: 5 / 13; }
  .order li { grid-template-columns: 56px minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 24px; align-items: center; padding: 22px 0; }
  .order .no { width: 56px; height: 56px; font-size: 1.75rem; }
  .order li p { grid-column: 3; font-size: 1.0625rem; line-height: 1.6; }
  .order h3 { font-size: 1.6rem; }
  .order .ofoot { display: none; }

  .ask { padding: 0 0 120px; }
  .ask > .wrap { padding-top: 120px; }
  .ask .label { grid-column: 1 / 13; }
  .ask blockquote { grid-column: 1 / 11; margin-top: 28px; }
  .ask .answer { grid-column: 1 / 13; margin-top: 40px; padding-top: 32px; }
  .ask .answer .then { font-size: 1.5rem; }

  .reviews { padding: 128px 0 120px; }
  .quotes { grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: 56px; }
  /* Debra's rule runs the full width like the row below; her quote keeps the 10-column measure */
  .quote.lead { grid-column: 1 / 13; padding: 40px 0 56px; }
  .quote.lead p { max-width: calc((100% - 264px) / 12 * 10 + 216px); }
  .quote.lead p:not(.cite) { font-size: 2.5rem; }
  .quotes { grid-template-rows: auto auto auto; }
  .quote.lead { grid-row: 1; }
  .quote.one p:not(.cite), .quote.two p:not(.cite) { font-size: 1.25rem; line-height: 1.5; text-wrap: pretty; }
  /* both credits share one row, so they sit on one baseline */
  .quote.one, .quote.two { grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; align-content: start; padding: 32px 0 0; }
  .quote.one p.cite, .quote.two p.cite { align-self: start; }
  .quote.one { grid-column: 1 / 6; }
  .quote.two { grid-column: 7 / 13; }

  .area { padding: 144px 0 152px; }
  .about { grid-column: 1 / 6; grid-row: 1; }
  .where { grid-column: 7 / 13; grid-row: 1; margin-top: 0; }
  .about p:not(.label) { font-size: 1.25rem; line-height: 1.6; }
  .about p.lede { font-size: 1.625rem; line-height: 1.3; }
  .about p.away { font-size: 1.375rem; line-height: 1.4; }

  .est-grid { display: grid; grid-template-columns: 5fr 7fr; }
  .band { --lane: 220px; padding: 160px 56px 120px; }
  .band .num { font-size: clamp(2.6rem, 3.9vw, 3.75rem); white-space: nowrap; }
  .band-in { position: sticky; top: 120px; }
  .form-side { padding: 120px 56px 136px; }
  .form-side .inner { max-width: 640px; }
  .form-side > p { margin-top: 10px; }

  .foot { padding-top: 112px; }
  .foot-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .crest { grid-column: 1 / 7; }
  .foot .contact { grid-column: 8 / 13; }
  .foot-legal { grid-template-columns: 1fr auto; align-items: center; }
  .actionbar { display: none; }
}
@media (min-width: 1200px) {
  .band { padding-left: max(56px, calc((100vw - 1240px) / 2)); }
}
.ask h2.label { font-family: var(--text); font-weight: 600; color: var(--lawn-ink); }
.form[data-state="sending"] .btn { opacity: .7; pointer-events: none; }
html body [data-reveal="words"] .m-w { padding-bottom: .24em; margin-bottom: -.24em; }
@media (max-width: 380px) { .mark { font-size: 1.1rem; letter-spacing: .07em; } .top-in { gap: 12px; } .top-call { font-size: 1rem; } }

/* service area: Southside Hampton Roads drawn from Census boundaries. Only the five cities are tinted; the land around
   them is the cream page with a faint coastline. One 1000x799 drawing, cropped per screen: on phones the five cities
   fill the width and North Carolina runs out at the bottom; on desktop it shows the Bay above them. */
.map { position: relative; margin: 20px calc(-1 * var(--gutter)) 0; overflow: hidden; aspect-ratio: 898 / 505; }
.map-in { position: relative; width: calc(100% * 1000 / 898); margin: calc(-100% * 240 / 898) 0 0 calc(-100% * 50 / 898); }
.map-svg { display: block; width: 100%; height: auto; }
.m-other { fill: var(--paper); stroke: var(--green); stroke-opacity: .2; stroke-width: 1; vector-effect: non-scaling-stroke; fill-rule: evenodd; stroke-linejoin: round; }
.m-city { fill: #dce1d5; stroke: var(--green); stroke-width: 1.25; vector-effect: non-scaling-stroke; fill-rule: evenodd; stroke-linejoin: round; }
.ml { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; pointer-events: none; }
.ml.c { font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; color: var(--green); text-shadow: 0 0 3px #dce1d5, 0 0 3px #dce1d5; }
/* Norfolk and Portsmouth are too narrow to hold their names: set on the water just north of them, no leader lines */
.ml-por, .ml-nor { text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper); }
.ml-vb { letter-spacing: .04em; }
.ml.w { display: none; font-family: var(--display); font-style: italic; font-size: .9375rem; line-height: 1.2; color: var(--lawn-ink); }
.ml.s { font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); opacity: .5; }
.ml-suf { left: 30.1%; top: 70.1%; }
.ml-che { left: 58.6%; top: 75.1%; }
.ml-por { left: 41.6%; top: 37.7%; }
.ml-nor { left: 62%; top: 32.7%; }
.ml-vb { left: 73.8%; top: 56.4%; }
.ml-bay { left: 78%; top: 24.8%; }
.ml-oc { left: 90.4%; top: 66.1%; }
.ml-nc { left: 40%; top: 90.4%; }
/* the five cities draw in once, like a line laid down on paper */
.map[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html.m-on .map .m-city { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; fill-opacity: 0; transition: stroke-dashoffset .9s cubic-bezier(.25, 1, .5, 1), fill-opacity .6s ease .6s; }
  html.m-on .map .m-city:nth-of-type(3) { transition-delay: .08s, .68s; }
  html.m-on .map .m-city:nth-of-type(4) { transition-delay: .16s, .76s; }
  html.m-on .map .m-city:nth-of-type(5) { transition-delay: .24s, .84s; }
  html.m-on .map .m-city:nth-of-type(6) { transition-delay: .32s, .92s; }
  html.m-on .map .ml { opacity: 0; transition: opacity .5s ease 1s; }
  html.m-on .map.is-in .m-city { stroke-dashoffset: 0; fill-opacity: 1; }
  html.m-on .map.is-in .ml { opacity: 1; }
  html.m-on .map.is-in .ml.s { opacity: .5; }
}
@media (min-width: 600px) {
  .map { margin-inline: 0; }
}
@media (min-width: 900px) {
  /* the map runs from column 7 off the right edge of the screen, like the work pair, and replaces the city list */
  .map { margin: 28px calc((min(1240px, 100vw - 112px) - 100vw) / 2) 0 0; aspect-ratio: 912 / 610; }
  .map-in { width: calc(100% * 1000 / 912); margin: calc(-100% * 130 / 912) 0 0 calc(-100% * 40 / 912); }
  .ml.c { font-size: .8125rem; }
  .ml-vb { left: 77%; top: 56.8%; letter-spacing: .1em; }
  .ml-che { left: 59%; }
  .ml-por { left: 42%; top: 38%; }
  .ml-nor { top: 33.5%; }
  .ml-nc { top: 89.9%; }
  .ml.w { display: block; }
  .where .cities-list { display: none; }
}

/* city lines break between whole names; on phones, two fixed lines */
.cities .c, .fcities .c { white-space: nowrap; }
.br2 { display: none; }
@media (max-width: 479px) {
  .cities .sep, .fcities .sep { display: none; }
  .br2 { display: inline; }
}

/* phones: the whole header waits above the screen until the hero has scrolled away, so the rim starts at the top
   and the number shows once on the first screen */
@media (max-width: 899px) and (scripting: enabled) {
  .top { position: fixed; left: 0; right: 0; transform: translateY(-100%); transition: transform .3s cubic-bezier(.25, 1, .5, 1), translate .5s var(--m-ease), background-color .35s ease, box-shadow .35s ease; }
  .top.past-hero { transform: none; }
}

/* final pass (round 9): form subline spacing, footer seam, shorter phone question and footer, city list as the map's key */
.form-side .inner > h3 + p { margin-top: 12px; font-size: 1.0625rem; color: #4a5a4f; }
.foot { margin-top: -2px; box-shadow: 0 -2px 0 var(--green); }
.cities-list li { font-weight: 600; font-size: 1.375rem; padding: 10px 0; border-bottom-color: rgba(5, 66, 23, .15); }
@media (max-width: 899px) {
  .ask { padding-bottom: 72px; }
  .ask blockquote p { font-size: 1.875rem; line-height: 1.15; }
  .ask .answer { margin-top: 24px; padding-top: 24px; gap: 24px; }
  .ask .answer .then { font-size: 1.1875rem; }
  .crest img { width: 160px; }
  .crest .fcities { display: none; }
}
@media (min-width: 900px) { .form-side .inner > h3 + p { margin-top: 10px; } }