/* Greenline Lawn & Garden: "field guide" design layered over the shared template.
   Loaded after site.css and theme.css. Colors come from site.json; this file adds the type
   (Bricolage Grotesque with an optical-size axis, IBM Plex Mono for labels and figures),
   graph-paper hero, plate-style photos, spec-sheet service cards and the estimator styles.
   Light only, on purpose. */

@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../assets/fonts/bricolage-latin-opsz.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("../assets/fonts/plex-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500;
  src: url("../assets/fonts/plex-mono-latin-500.woff2") format("woff2");
}

:root {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --flag: #B4441A;              /* survey-flag orange, used only for small markers */
  --deep: #10241A;              /* footer + estimator result panel */
  --on-deep: #E8EFE6;
  --on-deep-muted: #A9BCAD;
  --rule: color-mix(in srgb, var(--fg) 22%, var(--bg));
  --radius-box: 2px;
  color-scheme: light;
}

body { font-size: 17px; font-optical-sizing: auto; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: clamp(2.2rem, 5.4vw, 3.5rem); }
h3 { font-size: 1.45rem; letter-spacing: -0.015em; }
.eyebrow, .wordmark small, .fact .eyebrow, .ph-tag, .demo-tag, .sign-word, .week li small {
  font-family: var(--font-mono); font-style: normal; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Demo banner and header: thin, quiet */
.concept { background: var(--deep); color: var(--on-deep); font-family: var(--font-mono); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.04em; }
.top { border-bottom: 1px solid var(--rule); }
.wordmark { font-weight: 800; font-size: 1.3rem; line-height: 1.1; letter-spacing: -0.02em; display: inline-flex; flex-direction: column; }
.wordmark::before {
  content: ""; width: 22px; height: 22px; margin-bottom: 6px; background: var(--accent);
  /* simple leaf mark */
  border-radius: 0 100% 0 100%;
}
.wordmark small { font-size: 0.66rem; letter-spacing: 0.14em; margin-top: 2px; }
.nav { gap: 28px; }
.nav a { font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }
.nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* Buttons: squared off, flat */
.btn { font-weight: 600; letter-spacing: 0; border-width: 1.5px; }
.btn-primary:hover { filter: brightness(1.15); }
.btn-ghost { color: var(--fg); border-color: var(--fg); }
.btn-ghost:hover { background: var(--accent-soft); }

/* Hero on graph paper; the photo is mounted like a plate with corner marks */
.hero {
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  border-bottom: 1px solid var(--rule);
}
.hero .wrap { padding-block: 40px 56px; }
.hero h1 { font-size: clamp(2.8rem, 8.5vw, 5.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; }
.hero .lede { font-size: 1.05rem; color: var(--muted); }
.hero .lede::before { content: "Service area · Bayhaven & nearby"; display: block; margin-bottom: 14px; font: 500 0.74rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--flag); }
.tagline { font-family: var(--font-body); font-weight: 500; font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.01em; max-width: 30ch; }
.hero--split .photo { border: 1px solid var(--fg); border-radius: 0; padding: 10px; background: var(--bg); overflow: visible; aspect-ratio: auto; }
.hero--split .photo img { aspect-ratio: 4 / 3; height: auto; }
.hero--split .photo figcaption { left: 18px; bottom: 18px; }
.hero--split .photo::before, .hero--split .photo::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--flag); pointer-events: none;
}
.hero--split .photo::before { top: -7px; left: -7px; border-top-width: 2px; border-left-width: 2px; }
.hero--split .photo::after { bottom: -7px; right: -7px; border-bottom-width: 2px; border-right-width: 2px; }
@media (min-width: 900px) { .hero--split .wrap { grid-template-columns: 1fr 1.05fr; padding-block: 64px 80px; } }

/* Open sign as a mono status line */
.sign { border: 1px solid var(--fg); outline: 0; border-radius: 0; background: var(--bg); padding: 8px 12px; margin: 4px 0; gap: 2px 12px; }
.sign-word { font-size: 0.8rem; letter-spacing: 0.12em; }
.sign-word::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.sign .st { font-family: var(--font-mono); font-weight: 400; font-size: 0.85rem; }

/* Section rhythm: hairline rules, mono eyebrow before each heading */
section.block .wrap { padding-block: 72px; }
section.alt { background: var(--surface); }
section.block + section.block { border-top: 1px solid var(--rule); }
.head h2::before {
  display: block; margin-bottom: 12px; font: 500 0.76rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--flag);
}
#hours-h::before { content: "Office" / ""; }
#offerings-h::before { content: "What we do" / ""; }
#photos-h::before { content: "Recent work" / ""; }
#visit-h::before { content: "Find us" / ""; }
#contact-h::before { content: "Next step" / ""; }

/* Hours: compact schedule with mono figures */
.week li { border-radius: 0; border-color: var(--rule); font-weight: 600; }
.week li small { font-size: 0.6rem; letter-spacing: 0.06em; }
.week li.today { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.hours-list dd { font-family: var(--font-mono); font-size: 0.92rem; }
.hours-list .leader { border-bottom: 1px solid var(--rule); transform: translateY(-5px); }

/* Services as spec sheets: name, description, then labeled rows */
#offerings .cards { gap: 0; border-top: 1px solid var(--fg); }
@media (min-width: 560px) { #offerings .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { #offerings .cards { grid-template-columns: repeat(4, 1fr); } }
#offerings .card { padding: 22px 20px 26px 0; gap: 14px; border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) {
  #offerings .card { padding-left: 20px; border-left: 1px solid var(--rule); }
  #offerings .card:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1000px) {
  #offerings .card { border-bottom: 0; }
  #offerings .card:nth-child(2n+1) { border-left: 1px solid var(--rule); padding-left: 20px; }
  #offerings .card:first-child { border-left: 0; padding-left: 0; }
}
#offerings .card p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
#offerings .menu { gap: 0; margin-top: 4px; border-top: 1px dashed var(--rule); }
#offerings .menu li { display: block; padding: 9px 0; border-bottom: 1px dashed var(--rule); }
#offerings .menu li > span:first-child { display: grid; grid-template-columns: 4.6em 1fr; gap: 8px; font: 500 0.72rem/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#offerings .menu .note { font: 400 0.92rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--fg); }

/* Estimator (built by script.js) */
.estimate { background: var(--surface); }
.est { display: grid; gap: 28px; }
@media (min-width: 900px) { .est { grid-template-columns: 1.3fr 1fr; align-items: start; gap: 48px; } }
.est-inputs { display: grid; gap: 26px; }
.est fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.est legend, .est-range label {
  padding: 0; margin-bottom: 10px; width: 100%; font: 500 0.76rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.est-range label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.est-range output { color: var(--fg); font-size: 0.9rem; letter-spacing: 0.02em; text-transform: none; }
.est-chip { position: relative; display: inline-flex; cursor: pointer; }
.est-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.est-chip span {
  display: inline-flex; flex-direction: column; justify-content: center; min-height: var(--tap); padding: 8px 16px;
  border: 1.5px solid var(--muted); background: var(--bg); font-weight: 600; line-height: 1.2;
}
.est-chip small { font: 400 0.72rem/1.3 var(--font-mono); color: var(--muted); }
.est-chip input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.est-chip input:checked + span small { color: color-mix(in srgb, var(--accent-fg) 80%, var(--accent)); }
.est-chip input:focus-visible + span { outline: 3px solid var(--flag); outline-offset: 2px; }
.est input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 32px; }
.est-hint { font: 400 0.78rem/1.4 var(--font-mono); color: var(--muted); margin-top: 6px; }
.est-result { background: var(--deep); color: var(--on-deep); padding: 28px 24px; display: grid; gap: 18px; }
@media (min-width: 900px) { .est-result { position: sticky; top: 24px; } }
.est-result .eyebrow { color: var(--on-deep-muted); }
.est-result dl { margin: 0; display: grid; gap: 0; }
.est-result dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(232, 239, 230, 0.18); }
.est-result dt { font-size: 0.95rem; color: var(--on-deep-muted); }
.est-result dd { margin: 0; font: 500 1.05rem var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.est-result .est-total { border-bottom: 0; padding-top: 18px; }
.est-result .est-total dt { color: var(--on-deep); font-weight: 600; }
.est-result .est-total dd { font: 700 clamp(1.6rem, 4vw, 2.1rem)/1 var(--font-display); letter-spacing: -0.02em; }
.est-result .btn-primary { background: var(--on-deep); color: var(--deep); border-color: var(--on-deep); }
.est-result .est-hint { color: var(--on-deep-muted); margin: 0; }
.est-result :focus-visible { outline-color: var(--on-deep); }

/* Photos as numbered plates (decorative numbering, the alt text carries the meaning) */
#photos { background: var(--bg); }
#photos .gallery { counter-reset: plate; gap: 20px; }
#photos .photo { counter-increment: plate; border-radius: 0; overflow: visible; background: transparent; aspect-ratio: auto; }
#photos .photo img { aspect-ratio: 1 / 1; height: auto; }
#photos .photo::after { content: "Plate " counter(plate, decimal-leading-zero) / ""; display: block; margin-top: 8px; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#photos .photo figcaption { bottom: 30px; }
@media (max-width: 759px) { #photos .gallery { grid-template-columns: 1fr; } }

/* Visit + contact */
.fact .eyebrow { color: var(--flag); font-size: 0.72rem; }
.fact .v { font-weight: 500; }
.contact-form input, .contact-form textarea { border-radius: 0; border: 1.5px solid var(--muted); background: #FFFFFF; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.contact .head > p { color: var(--muted); }

/* Footer */
footer { background: var(--deep); color: var(--on-deep); border-top: 0; }
footer .wordmark { color: var(--on-deep); }
footer .wordmark::before { background: #7FB38A; }
footer .wordmark small, footer p { color: var(--on-deep-muted); }
footer p { font-family: var(--font-mono); font-size: 0.85rem; }
footer :focus-visible { outline-color: var(--on-deep); }