:root {
  color-scheme: dark;
  --navy: #061a29;
  --panel: #121f2e;
  --line: #314252;
  --muted: #bccad4;
  --green: #a6ce96;
  --action: #294b26;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--navy); color: #f7fafc; font: 1rem/1.55 system-ui, sans-serif; }
[hidden] { display: none !important; }
a { color: inherit; }
a:hover { color: var(--green); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.shell { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: absolute; z-index: 2; padding: .75rem; background: var(--navy); }
.header { background: #030821; border-bottom: 2px solid #508a10; }
.header-inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 5.5rem; }
.brand { display: block; width: clamp(10rem, 22vw, 16rem); aspect-ratio: 1.88; overflow: hidden; position: relative; margin-right: auto; flex: none; }
.brand img { position: absolute; width: 100%; height: auto; top: 50%; transform: translateY(-48%); }
nav { display: flex; gap: 1.25rem; order: 0; }
nav a, .phone { text-decoration: none; font-weight: 650; }
.phone { order: 1; white-space: nowrap; border: 1px solid var(--green); border-radius: 2rem; padding: .55rem .85rem; color: #fff; background: linear-gradient(#366e0e, #193b06); }
.menu { order: 2; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: .4rem; min-width: 44px; min-height: 44px; cursor: pointer; }
.hero { display: grid; grid-template-columns: 33% minmax(0, 1fr); background: linear-gradient(120deg, #041320, #0b2b3d); border-bottom: 5px solid #477A38; }
.crew { grid-column: 2; grid-row: 1; display: block; width: 100%; height: auto; align-self: center; }
.crew img { display: block; width: 100%; height: auto; }
.hero-inner { grid-column: 1; grid-row: 1; width: 100%; padding: clamp(1.2rem, 2.5vw, 3rem) clamp(1rem, 2.7vw, 3rem); align-self: center; }
.eyebrow { color: var(--green); text-transform: uppercase; font-size: .78rem; font-weight: 800; letter-spacing: .15em; margin: 0 0 .85rem; display: flex; align-items: center; gap: .65rem; }
.eyebrow span { width: 1.5rem; height: 2px; background: currentColor; }
h1, h2 { line-height: 1.04; letter-spacing: -.045em; margin: 0; }
h1 { font-size: clamp(2rem, 4.1vw, 5rem); font-style: italic; font-weight: 950; text-transform: uppercase; letter-spacing: -.055em; }
h1 em { display: block; color: var(--green); font-style: inherit; }
h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.lead { font-size: clamp(1rem, 2vw, 1.3rem); max-width: 40ch; margin: 1.4rem 0 1.8rem; color: var(--muted); }
.button { display: inline-flex; gap: .75rem; align-items: center; justify-content: center; min-height: 48px; padding: .65rem 1.15rem; background: linear-gradient(#477A38, var(--action)); color: #fff; border: 2px solid var(--green); border-radius: 2rem; text-decoration: none; font-weight: 800; cursor: pointer; }
.button:hover { background: #32650b; color: #fff; }
.hero .button { text-transform: uppercase; }
.button:disabled { opacity: .7; cursor: default; }
.trust { background: #082131; border-block: 4px solid #477A38; }
.trust ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin-block: 0; padding: 1.4rem 0; font-weight: 750; }
.trust li { display: flex; align-items: center; gap: .6rem; font-size: 1.125rem; line-height: 1.3; }
.trust svg { width: 2.25rem; height: 2.25rem; flex: none; color: var(--green); }
.lead span { color: var(--green); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
#services { padding-block: 0 .65rem; }
.work { padding-block: 1.35rem; }
.work h2 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); }
.service-heading { position: relative; width: fit-content; margin: -.6rem auto .65rem; padding: .45rem 1.5rem; border: 1px solid #6ca25b; background: linear-gradient(#477A38, #203b20); font-size: clamp(1.3rem, 2.5vw, 2.3rem); text-align: center; font-style: italic; font-weight: 900; text-transform: uppercase; }
.intro { color: var(--muted); margin: .9rem 0 1.6rem; }
.services { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .6rem; align-items: start; }
details { background: #092334; border: 1px solid var(--line); border-radius: .35rem; }
details[open] { border-color: #64945f; }
summary { min-height: 9rem; padding: .85rem .65rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .5rem; text-align: center; list-style: none; cursor: pointer; font-size: .88rem; font-weight: 700; overflow-wrap: anywhere; }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--green); }
summary svg { width: 2rem; height: 2rem; color: var(--green); flex: none; }
.toggle { color: var(--green); }
.toggle::before { content: '+'; }
details[open] .toggle::before { content: '−'; }
details p { font-size: .88rem; color: var(--muted); padding: .75rem; margin: 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.work { background: #101d2a; border-block: 1px solid var(--line); }
.checklist { padding: 0; list-style: none; margin: 0; columns: 2; column-gap: 2rem; column-rule: 1px solid #477A38; }
.checklist li { break-inside: avoid; padding: .25rem 0; display: flex; gap: .7rem; align-items: baseline; }
.checklist li::before { content: '✓' / ''; color: var(--green); flex: 0 0 1.25rem; font-size: 1.3125rem; font-weight: 900; line-height: 1; }
.quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items: start; gap: clamp(2rem, 6vw, 5rem); }
.quote-intro { padding-top: .5rem; }
.quote-intro .intro { max-width: 36ch; font-size: 1.125rem; }
.quote-phone { display: inline-flex; align-items: center; gap: .65rem; padding: .6rem 1rem; border: 1px solid #477A38; border-radius: .55rem; color: var(--green); font-size: 1.2rem; font-weight: 750; text-decoration: none; }
.quote-phone:hover { background: var(--panel); }
.quote-reassurance { color: var(--muted); margin-bottom: 0; }
form { min-width: 0; padding: clamp(1.1rem, 3vw, 2.25rem); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid #477A38; border-radius: .75rem; }
form p { margin: 0 0 1rem; color: var(--muted); }
form strong { color: var(--green); }
#demo { padding: .8rem 1rem; background: var(--navy); border-left: 3px solid #477A38; border-radius: .25rem; }
#required-note { font-size: .9rem; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
label { display: block; min-width: 0; font-weight: 650; }
label span { color: var(--muted); }
input, select, textarea { display: block; width: 100%; min-height: 48px; margin-top: .4rem; padding: .65rem .75rem; background: var(--navy); color: inherit; border: 1px solid #627586; border-radius: .4rem; }
textarea { resize: vertical; }
.quote form .button { margin-top: 1.25rem; min-height: 50px; }
.status:not(:empty) { margin: .75rem 0 0; }
.status:empty { margin: 0; }
footer { border-top: 1px solid var(--line); color: var(--muted); }
footer .shell { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding-block: 1.5rem; }
footer strong { color: #fff; }
@media (max-width: 62rem) {
  .services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 62.01rem) {
  body { background: #041925; }
  .header { position: relative; z-index: 2; border: 0; background: radial-gradient(ellipse at 55% 0, #17486b, #041925 75%); }
  .header-inner { width: 100%; min-height: 4.7vw; padding: 0 1.6vw 0 35vw; gap: 3vw; justify-content: space-between; }
  .brand { position: absolute; inset: 0 auto auto 0; width: 32.3vw; height: 11.15vw; aspect-ratio: auto; isolation: isolate; }
  .brand::before, .brand::after { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 81% 100%, 0 100%); }
  .brand::before { background: linear-gradient(110deg, #286900, #96ed0c 55%, #1d5100); z-index: -2; }
  .brand::after { inset: 0 2vw .5vw 0; background: radial-gradient(ellipse at right top, #103853, #031526 70%); z-index: -1; }
  .brand img { left: 3vw; width: 23vw; transform: translateY(-49%); mix-blend-mode: lighten; }
  nav { flex: 1; justify-content: space-between; gap: 1vw; }
  nav a, .phone { font: 750 clamp(.95rem, 1.65vw, 1.7rem)/1.15 'Arial Narrow', Arial, sans-serif; text-shadow: 0 2px 3px #000; }
  nav a { padding: .45em .32em; border-bottom: .2em solid transparent; }
  nav a:first-child { border-bottom-color: var(--green); }
  .phone, .hero .button { background: linear-gradient(#67aa0c, #2b6600 48%, #123500 51%, #295d00); box-shadow: inset 0 1px 2px #edffa5, 0 3px 8px #0009; }
  .phone { padding: .3em .75em; }
  .hero { position: relative; display: block; min-height: 34.15vw; border-bottom: 1.05vw solid #529e00; background: radial-gradient(ellipse at right, #123b50, #031928 72%); }
  .hero::after { content: ''; position: absolute; inset: 100% 0 auto; height: 1.05vw; background: linear-gradient(#d7ff7b 0 10%, #66be08 18%, #327800 90%); }
  .crew { position: absolute; top: 0; right: 0; width: 76.04%; height: 100%; }
  .crew img { height: 100%; object-fit: cover; object-position: center top; }
  .hero-inner { position: relative; width: 34%; margin: 0; padding: 7.7vw 0 2.1vw 3vw; }
  .hero .eyebrow { display: none; }
  .hero h1 { font: italic 950 4.24vw/.88 system-ui, sans-serif; letter-spacing: -.055em; text-shadow: 0 3px 8px #000; }
  .hero h1 span { display: block; transform: scaleX(1.13); transform-origin: left; }
  .hero h1 em { color: #83d610; transform: scaleX(.96); transform-origin: left; }
  .hero h1::after { content: ''; display: block; width: 78%; height: .38vw; margin-top: .65vw; background: #a7ed11; border-radius: 95% 100% 0 0; }
  .hero .lead { margin: .65vw 0 .95vw; color: #fff; font: 750 1.62vw/1.12 'Arial Narrow', Arial, sans-serif; text-shadow: 0 2px 5px #000; white-space: nowrap; }
  .hero .button { min-height: 0; padding: .38em 1.13em; border-color: #b2ef31; font-size: 1.65vw; line-height: 1.1; text-shadow: 0 2px 3px #000; }
  .hero .lead span { color: #b2ef31; }
  #services { width: calc(100% - 4vw); padding-bottom: .35vw; }
  .service-heading { isolation: isolate; z-index: 1; margin: -2.2vw auto .15vw; padding: .55vw 4vw; background: none; border: 0; font-size: 2.46vw; text-shadow: 0 2px 4px #000; }
  .service-heading::before { content: ''; position: absolute; z-index: -1; inset: 0; transform: skewX(-30deg); border: 2px solid #80ad6f; background: linear-gradient(#477A38, #345e2b 52%, #203b20); }
  .services { gap: 0; grid-template-columns: 1fr 1.05fr .95fr .85fr 1.05fr .98fr 1.1fr .96fr; }
  .services details { position: relative; background: transparent; border: 0; border-radius: 0; }
  .services details:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 1.1vw; height: 5.3vw; border-right: 1px solid #477A38; }
  summary { position: relative; min-height: 7vw; justify-content: flex-start; gap: .24vw; padding: .3vw .8vw .75vw; font: 750 1.42vw/1.04 'Arial Narrow', Arial, sans-serif; }
  summary svg { width: 3.65vw; height: 3.35vw; color: #f7fafc; stroke-width: 1.8; filter: drop-shadow(0 2px 2px #000); }
  details:first-child svg, details:nth-child(7) svg, details:last-child svg { color: var(--green); }
  .toggle { position: absolute; right: .35vw; bottom: .1vw; font-size: .9rem; }
  details[open] p { background: #092334; }
  .work { background: #041925; padding: 1.75rem 0; border-image: linear-gradient(90deg, transparent, #638476, transparent) 1; }
  .work .shell { width: 90%; }
  .checklist { columns: 3; column-gap: 3vw; color: #fff; font: 700 1.1875rem/1.5 Arial, sans-serif; }
  .checklist li { padding-block: .375rem; }
  .checklist li::before { font-size: 1.375rem; }
  .trust { position: relative; isolation: isolate; background: #031925; border-block: 6px solid #477A38; }
  .trust::before, .trust::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; width: 3.4vw; background: linear-gradient(120deg, #477A38, #294b26); }
  .trust::before { left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .trust::after { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
  .trust ul { width: 91%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 1.5rem 0; }
  .trust li { justify-content: center; gap: .75rem; padding: 0 .85rem; font: 750 1.125rem/1.3 Arial, sans-serif; }
  .trust li + li { border-left: 1px solid #477A38; }
}
@media (max-width: 52rem) {
  .header-inner { flex-wrap: wrap; gap: .6rem; padding-block: .75rem; }
  nav { flex-basis: 100%; order: 3; flex-wrap: wrap; }
  nav a { padding: .55rem 0; }
  .quote { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .crew { grid-column: 1; height: auto; }
  .hero-inner { grid-row: 2; padding: 1.35rem 1rem 1.7rem; }
  h1 { font-size: clamp(2.1rem, 7.5vw, 4rem); }
  .hero .lead { margin: .85rem 0 1rem; }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
  .header-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .brand { width: min(100%, 10rem); }
  .phone { order: 3; grid-column: 1 / -1; text-align: center; }
  nav { order: 4; grid-column: 1 / -1; }
  summary { min-height: 7.5rem; }
  .checklist { columns: 1; }
  .trust ul { grid-template-columns: 1fr; }
  .fields { grid-template-columns: minmax(0,1fr); }
  .quote form .button { width: 100%; }
}