/* Artificial Turf Prices. One container (1200px), one 12-column grid, spacing 4/8/16/24/32/48/64/96, one type
   scale, one button system, one radius (16px). Ryan picked hero option C on 2026-10-08. */
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/albert-sans-var-latin.woff2") format("woff2"); }

:root {
  --canvas: #ffffff; --ink: #111111; --muted: #4d4d4d; --mint: #4ade80; --mint-hover: #3fcf73; --stone: #f1f2ee;
  --dark: #111111; --dark-2: #222222; --link-line: #16a34a;
  --radius: 16px; --gutter: 32px; --gap: 24px; --section: 96px;
  --font: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1: 64px; --h2: 40px; --h3: 22px; --lede: 20px; --body: 18px; --label: 16px; --stat: 56px;
}
@media (max-width: 1023px) { :root { --h1: 52px; --h2: 34px; --stat: 48px; } }
@media (max-width: 767px) { :root { --gutter: 20px; --gap: 16px; --section: 64px; --h1: 40px; --h2: 30px; --stat: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: var(--body); line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--font); color: inherit; }
h1 { font-size: var(--h1); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--h2); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: var(--h3); line-height: 1.3; font-weight: 700; }
p, ul, ol { margin: 0; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--mint); }
.band-dark :focus-visible, .site-footer :focus-visible, .tile.dark :focus-visible { outline-color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; background: var(--ink); color: #fff; padding: 12px 16px; z-index: 20; border-radius: var(--radius); }
.skip:focus { top: 16px; }

/* Container and grid */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1264px) { .wrap { padding: 0; } }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
ul.grid, ol.grid { list-style: none; padding: 0; margin: 0; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; }
.span-12 { grid-column: span 12; }
@media (max-width: 1023px) {
  .t-6 { grid-column: span 6; } .t-12 { grid-column: span 12; } .t-4 { grid-column: span 4; } .t-3 { grid-column: span 3; }
}
@media (max-width: 767px) { .grid > * { grid-column: span 12; } .grid > .m-6 { grid-column: span 6; } }

/* Text pieces */
.label { font-size: var(--label); font-weight: 700; line-height: 1.4; }
.lede { font-size: var(--lede); line-height: 1.55; color: var(--muted); }
.muted { color: var(--muted); }
.stack > * + * { margin-top: 16px; }
.section { padding: var(--section) 0; }
.band-stone { background: var(--stone); }
.band-dark { background: var(--dark); color: #fff; }
.band-dark .lede, .band-dark .muted { color: #d4d4d4; }
.band-dark a { text-decoration-color: var(--mint); }
.section-head { margin-bottom: 48px; }
.section-head h2 + p { margin-top: 16px; }

/* One button */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border: 0;
  border-radius: var(--radius); background: var(--ink); color: #fff; font: 600 18px/1 var(--font); text-decoration: none;
  white-space: nowrap; cursor: pointer; }
.btn:hover { background: #2b2b2b; }
.btn-mint { background: var(--mint); color: var(--ink); }
.btn-mint:hover { background: var(--mint-hover); }
.btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #fff; }
.band-dark .btn-secondary { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.band-dark .btn-secondary:hover { background: #fff; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* Header */
.site-header { background: var(--canvas); position: relative; z-index: 10; }
.site-header .bar { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }
.brand svg { width: 36px; height: 36px; flex: none; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn { display: none; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 32px; }
.nav li { position: relative; }
.nav a, .nav .parent { font-size: 18px; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.nav > ul > li > a:not(.btn):hover, .nav .parent:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav .parent { display: inline-flex; align-items: center; gap: 8px; cursor: default; padding: 0; background: none; border: 0; font-family: var(--font); color: inherit; }
.nav .parent svg { width: 12px; height: 12px; }
.nav .sub { list-style: none; margin: 0; padding: 16px; position: absolute; top: calc(100% + 16px); left: -16px; min-width: 260px;
  background: var(--canvas); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(17, 17, 17, 0.14); display: none; }
.nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav .sub li + li { margin-top: 8px; }
.nav .sub a { display: block; padding: 8px; border-radius: var(--radius); }
.nav .sub a:hover { background: var(--stone); text-decoration: none; }
.nav li:hover > .sub, .nav li:focus-within > .sub { display: block; }
@media (max-width: 1199px) { .nav > ul { gap: 24px; } }
@media (max-width: 1023px) {
  .menu-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: var(--radius); font: 600 18px/1 var(--font);
    box-shadow: inset 0 0 0 2px var(--ink); cursor: pointer; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 80px; background: var(--canvas); padding: 16px var(--gutter) 32px;
    box-shadow: 0 24px 48px rgba(17, 17, 17, 0.12); }
  .nav-toggle:checked ~ .nav { display: block; }
  .nav-toggle:focus-visible ~ .menu-btn { outline: 3px solid var(--ink); outline-offset: 3px; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li > a, .nav .parent { display: flex; min-height: 48px; align-items: center; }
  .nav .parent svg { display: none; }
  .nav .sub { display: block; position: static; box-shadow: none; padding: 0 0 8px 16px; min-width: 0; }
  .nav .sub::before { display: none; }
  .nav .sub li + li { margin-top: 0; }
  .nav .sub a { min-height: 44px; display: flex; align-items: center; }
  .nav > ul > li:last-child { margin-top: 16px; }
}
@media (max-width: 480px) { .site-header .bar { height: 64px; } .nav { top: 64px; } .brand { font-size: 19px; gap: 10px; } .brand svg { width: 32px; height: 32px; } }

/* Home hero (option C) */
.hero { padding: 48px 0 var(--section); }
.hero h1 + .lede { margin-top: 24px; }
.hero .btn-row { margin-top: 32px; }
.bento { margin-top: 48px; grid-template-rows: auto auto; }
.bento .photo { grid-row: span 2; }
.bento .photo img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.tile { border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.tile.dark { background: var(--dark); color: #fff; }
.tile.light { background: var(--stone); }
.tile .num { font-weight: 800; font-size: var(--stat); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile.dark .num { color: var(--mint); }
.tile .num.long { font-size: calc(var(--stat) * 0.72); white-space: nowrap; }
.tile .what { font-weight: 600; font-size: 20px; line-height: 1.3; }
.tile .src { font-size: var(--label); margin-top: 4px; }
.tile .src a { text-decoration-color: currentColor; }
.tile.dark .src { color: #d4d4d4; }
@media (max-width: 1023px) {
  .bento { grid-template-rows: auto; }
  .bento .photo { grid-column: span 12; grid-row: auto; }
  .bento .tile { grid-column: span 6; }
}
@media (max-width: 767px) { .bento .tile { grid-column: span 12; } .tile { padding: 24px; } }

/* Photo cards (services) and guide cards: image, title, text, and link rows shared through subgrid */
.cards > li { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 16px; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.cards.wide .card img { aspect-ratio: 16 / 10; }
.cards.wide > li { grid-row: span 3; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--link-line); }
.card .go { font-weight: 600; align-self: start; }
@media (max-width: 1023px) { .cards > li { grid-row: auto; display: flex; flex-direction: column; } }

/* Home pricing: prose beside a dark list tile */
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li + li { margin-top: 24px; }
.price-list .num { display: block; font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; color: var(--mint); font-variant-numeric: tabular-nums; }
.price-list .what { display: block; font-weight: 600; margin-top: 4px; }
.price-list .src { display: block; font-size: var(--label); color: #d4d4d4; }

/* Process steps: five equal tracks */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 8px; }
.steps .n { font-weight: 800; font-size: 40px; line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--h3); }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps li { grid-row: auto; display: flex; flex-direction: column; } .steps li:last-child { grid-column: span 2; } }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } .steps li:last-child { grid-column: auto; } }

/* Towns */
.towns { margin-top: 32px; }
.towns li { background: var(--canvas); border-radius: var(--radius); padding: 12px 16px; font-weight: 600; }
.band-stone .towns li { background: var(--canvas); }
.prose .towns li, .towns.on-white li { background: var(--stone); }
.band-stone .prose .towns li { background: var(--canvas); }
.prose ul.towns { padding-left: 0; margin-top: 24px; }
.prose .towns li + li { margin-top: 0; }
@media (max-width: 1023px) { .towns > li { grid-column: span 4; } }
@media (max-width: 767px) { .towns > li { grid-column: span 6; } }

/* FAQ: label and H2 in 4 columns, accordion in 8 */
.faq details { background: var(--stone); border-radius: var(--radius); }
.band-stone .faq details { background: var(--canvas); }
.faq details + details { margin-top: 16px; }
.faq summary { list-style: none; cursor: pointer; padding: 24px 64px 24px 24px; font-weight: 700; font-size: 20px; line-height: 1.35; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 32px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 24px 24px; }
.faq .answer > * + * { margin-top: 16px; }

/* Inner page header */
.page-hero { padding: 32px 0 var(--section); }
.crumbs { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--label); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { display: inline-flex; min-height: 44px; align-items: center; }
.page-hero h1 + .lede { margin-top: 24px; }
.page-hero .btn-row { margin-top: 32px; }
.page-hero .updated { margin-top: 16px; font-size: var(--label); color: var(--muted); }

/* Body: 8-column prose beside a 4-column aside */
.prose > h2 { margin-top: 64px; }
.prose > h2:first-child { margin-top: 0; }
.prose > h2 + *, .prose > h3 + * { margin-top: 16px; }
.prose > h3 { margin-top: 32px; }
.prose > p + p, .prose > p + ul, .prose > ul + p, .prose > p + ol, .prose > ol + p { margin-top: 16px; }
.prose > * + .table-wrap, .prose > .table-wrap + * { margin-top: 24px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.aside { align-self: start; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }
.aside-box { border-radius: var(--radius); padding: 32px; background: var(--stone); }
.aside-box.dark { background: var(--dark); color: #fff; }
.aside-box h2 { font-size: var(--h3); line-height: 1.3; letter-spacing: 0; font-weight: 700; }
.aside-box ul { list-style: none; padding: 0; margin-top: 16px; }
.aside-box li + li { margin-top: 8px; }
.aside-box li a { display: inline-flex; min-height: 44px; align-items: center; }
.aside-box .num { display: block; font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -0.03em; color: var(--mint); margin-top: 16px; font-variant-numeric: tabular-nums; }
.aside-box .what { display: block; margin-top: 8px; font-weight: 600; }
.aside-box .src { display: block; margin-top: 4px; font-size: var(--label); color: #d4d4d4; }
.aside-box .btn { margin-top: 24px; }
@media (max-width: 1023px) { .aside { position: static; } }

/* Tables: zebra rows, no rules */
.table-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--stone); }
table { width: 100%; border-collapse: collapse; font-size: var(--body); font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 700; padding: 24px 24px 8px; }
th, td { text-align: left; padding: 12px 24px; vertical-align: top; }
thead th { font-weight: 700; }
tbody tr:nth-child(odd) { background: #e6e8e1; }

/* Sources list */
.sources { margin-top: 64px; }
.sources h2 { font-size: var(--h3); line-height: 1.3; letter-spacing: 0; }
.sources ol { margin-top: 16px; padding-left: 24px; }
.sources li + li { margin-top: 8px; }

/* Forms (contact, calculator) */
.field { display: flex; flex-direction: column; gap: 8px; }
.field + .field, .fields > * + * { margin-top: 24px; }
.field label, .field legend { font-weight: 700; font-size: var(--label); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field select, .field textarea {
  font: 400 18px/1.4 var(--font); color: var(--ink); background: var(--stone); border: 0; border-radius: var(--radius);
  padding: 0 16px; height: 52px; width: 100%; }
.field textarea { height: auto; min-height: 160px; padding: 16px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 48px; }
.field .hint { font-size: var(--label); color: var(--muted); }
.checks { display: flex; flex-direction: column; gap: 8px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 400; }
.check input { width: 24px; height: 24px; accent-color: var(--ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 16px; font-weight: 600; min-height: 1.6em; }
.form-status.is-error { color: #b42318; }
.form-done { border-radius: var(--radius); background: var(--stone); padding: 32px; font-weight: 700; font-size: 20px; }
#ts-slot { margin-top: 24px; min-height: 0; }

/* Calculator result */
.calc-out { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 32px; }
.calc-out .num { font-weight: 800; font-size: var(--stat); line-height: 1; letter-spacing: -0.03em; color: var(--mint); font-variant-numeric: tabular-nums; }
.calc-out .what { margin-top: 8px; font-weight: 600; }
.calc-out table { margin-top: 24px; color: #fff; font-size: var(--label); }
.calc-out tbody tr:nth-child(odd) { background: var(--dark-2); }
.calc-out th, .calc-out td { padding: 8px 12px; }
.calc-out .note { margin-top: 24px; font-size: var(--label); color: #d4d4d4; }

/* Footer */
.site-footer { background: var(--dark); color: #fff; padding: var(--section) 0 48px; }
.site-footer .brand { color: #fff; min-height: 44px; }
.site-footer h2 { font-size: var(--body); line-height: 1.4; letter-spacing: 0; font-weight: 700; }
.site-footer ul { list-style: none; padding: 0; margin-top: 16px; }
.site-footer li + li { margin-top: 4px; }
.site-footer li a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.site-footer li a:hover, .site-footer li a:focus-visible { text-decoration: underline; text-decoration-color: currentColor; }
.site-footer .blurb { margin-top: 24px; color: #d4d4d4; }
.site-footer .legal { margin-top: 64px; color: #d4d4d4; }
@media (max-width: 1023px) { .site-footer .grid > .span-2 { grid-column: span 3; } .site-footer .grid > .span-4 { grid-column: span 12; } }
@media (max-width: 767px) { .site-footer .grid > .span-2 { grid-column: span 6; } }

/* 404 */
.notfound { padding: var(--section) 0; }

/* Guide header: on-this-page tile */
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.contact-form .btn-row { margin-top: 24px; }
.aside-box .stack { margin-top: 16px; }
.calc-out .table-wrap { background: none; }
.band-stone .field input[type="text"], .band-stone .field input[type="email"], .band-stone .field input[type="tel"],
.band-stone .field input[type="number"], .band-stone .field select, .band-stone .field textarea { background-color: #fff; }
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
fieldset.field legend { padding: 0; margin-bottom: 8px; }
@media (max-width: 767px) {
  .calc-out thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .calc-out tbody, .calc-out tr, .calc-out td { display: block; }
  .calc-out tr { padding: 12px 16px; border-radius: var(--radius); }
  .calc-out td { padding: 0; }
  .calc-out td:first-child { font-weight: 700; }
  .calc-out td:last-child { color: #d4d4d4; }
}