/* =====================================================================
   GreenBeast Design LLC — site styles
   One file for every page. Mobile first: base rules are for phones,
   the @media blocks near the bottom of each section widen things out.

   Contents
     1. Brand tokens (colors, fonts, sizes) — change the look here
     2. Base
     3. Layout helpers
     4. Header and logo
     5. Buttons
     6. Hero
     7. Sections and headings
     8. Cards (services)
     9. Steps (how it works)
    10. Title block (quick facts, contact)
    10b. Forms (quote request)
    11. Areas served
    12. Recent work (reserved; ready for when it's turned on)
    13. Footer
    14. Simple pages (404 and future pages)
    15. Utilities
    16. Print
   ===================================================================== */


/* 1. Brand tokens ---------------------------------------------------- */
:root {
  --green: #1e5631;
  --green-dark: #163f24;
  --green-tint: #edf3ee;
  --ink: #111111;
  --white: #ffffff;
  --line: #e5e5e5;
  --muted: #555555;
  --paper: #f7f8f7;      /* tinted section background */
  --grid: #eef0ee;       /* faint drafting grid in the hero */

  --font-display: "Archivo", "Arial Black", Arial, Helvetica, sans-serif;
  --font-body: "Archivo Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;

  --wrap: 1120px;
  --gutter: 16px;
  --header-h: 64px;
  --radius: 3px;
}


/* 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: only light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  /* keeps the footer at the bottom of short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-underline-offset: 0.15em; }
a:hover { color: var(--green-dark); }
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.muted { color: var(--muted); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: 10px 14px;
  font-weight: 700;
}
.skip-link:focus { top: 8px; color: var(--white); }


/* 3. Layout helpers -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: 780px; }

@media (min-width: 720px) {
  :root { --gutter: 28px; }
}


/* 4. Header and logo ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 2px solid var(--ink);
}
.site-header__row {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-header__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Live-text logo: "Green" ink, "Beast" green, bold TM, spaced "DESIGN LLC" */
.logo {
  display: inline-flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  padding: 6px 0;
}
.logo:hover { color: var(--ink); }
.logo__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.logo__beast { color: var(--green); }
.logo__tm {
  font-size: 0.3em;
  letter-spacing: 0;
  vertical-align: top;
  position: relative;
  top: 0.15em;
  margin-left: 0.12em;
}
.logo__sub {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.5rem;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  margin-top: 0.38em;
  white-space: nowrap;
}
@media (min-width: 720px) {
  .logo__word { font-size: 1.9rem; }
  .logo__sub { font-size: 0.6rem; }
}


/* 5. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;            /* comfortable tap target */
  padding: 10px 20px;
  border: 2px solid var(--green);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--solid { background: var(--green); color: var(--white); }
.btn--solid:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
.btn--outline { background: var(--white); color: var(--green); }
.btn--outline:hover { background: var(--green-tint); color: var(--green-dark); }
.btn--sm { min-height: 40px; padding: 6px 16px; font-size: 1rem; }
.btn--lg { min-height: 52px; padding: 12px 24px; font-size: 1.15rem; }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button-row .btn { flex: 1 1 100%; }
@media (min-width: 480px) {
  .button-row .btn { flex: 0 0 auto; }
}


/* 6. Hero ------------------------------------------------------------ */
.hero {
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--line);
  background-color: var(--white);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}
.hero__grid { display: grid; gap: 36px; align-items: center; }
.hero h1 {
  font-size: clamp(2.15rem, 8.5vw, 4rem);
  letter-spacing: -0.025em;
  max-width: 13ch;
}
.hero__tagline {
  font-size: clamp(1.3rem, 3.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 18px 0 10px;
}
.hero__lead { font-size: 1.2rem; color: var(--muted); max-width: 34em; margin-bottom: 26px; }
.note { font-size: 1rem; color: var(--muted); margin: 14px 0 0; }

@media (min-width: 960px) {
  .hero { padding: 72px 0 76px; }
  .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; }
}


/* 7. Sections and headings ------------------------------------------- */
.section { padding: 48px 0; }
.section--tint {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section__title {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  letter-spacing: -0.015em;
  padding-bottom: 12px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
/* short green tick under the heading rule, like a dimension mark */
.section__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 2px;
  background: var(--green);
}
.prose { font-size: 1.2rem; max-width: 40em; }

@media (min-width: 720px) {
  .section { padding: 72px 0; }
}


/* 8. Cards (services) ------------------------------------------------ */
.card-grid { display: grid; gap: 16px; }
.card {
  background: var(--white);
  border: 1px solid var(--ink);
  border-top: 5px solid var(--green);
  padding: 22px 22px 24px;
}
.card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--green);
  margin-bottom: 8px;
}
.card__title { font-size: 1.3rem; margin-bottom: 10px; }

@media (min-width: 720px) {
  .card-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .card { padding: 28px 28px 30px; }
}


/* 9. Steps (how it works) -------------------------------------------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 28px;
}
.steps__item {
  counter-increment: step;
  border-top: 3px solid var(--green);
  padding-top: 14px;
}
.steps__item::before {
  content: counter(step);
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--green);
  margin-bottom: 10px;
}
.steps__title { font-size: 1.2rem; margin-bottom: 6px; }

@media (min-width: 560px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } }


/* 10. Title block (quick facts, contact) ----------------------------- */
.title-block {
  background: var(--white);
  border: 2px solid var(--ink);
  margin: 0;
}
.title-block__head {
  margin: 0;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.title-block__rows { margin: 0; }
.title-block__rows > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  border-top: 1px solid var(--ink);
}
.title-block__rows > div:first-child { border-top: 0; }
.title-block__head + .title-block__rows > div:first-child { border-top: 0; }
.title-block__rows dt {
  padding: 12px 12px;
  border-right: 1px solid var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
}
.title-block__rows dd {
  margin: 0;
  padding: 12px 14px;
  font-weight: 600;
  line-height: 1.35;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.3em;
}
.title-block__rows dd .muted { font-weight: 400; }

.contact { display: grid; gap: 36px; align-items: start; margin-bottom: 48px; }
.contact__link { font-size: 1.15rem; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.contact__based { font-size: 1.1rem; margin: 20px 0 24px; }

.callout {
  border: 1px solid var(--ink);
  border-left: 5px solid var(--green);
  background: var(--paper);
  padding: 20px;
}
.callout__title { font-size: 1.15rem; margin-bottom: 8px; }
.callout p { margin-bottom: 16px; }

.contact__form {
  border: 2px solid var(--ink);
  padding: 22px 18px 24px;
  background: var(--white);
}
.contact__form-title { font-size: 1.5rem; margin-bottom: 8px; }
.contact__form-lead { color: var(--muted); margin-bottom: 22px; }

@media (min-width: 960px) {
  .contact { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; }
  .contact__form { padding: 30px 30px 32px; }
  .title-block__rows > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}


/* 10b. Forms --------------------------------------------------------- */
.form__grid { display: grid; gap: 18px; margin-bottom: 22px; }
.form__field { display: flex; flex-direction: column; min-width: 0; }
.form__field label { font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.form__req { font-weight: 400; color: var(--muted); font-size: 0.95rem; }
.form__hint { font-size: 0.98rem; color: var(--muted); margin: 6px 0 0; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px: stops iPhones zooming in on tap */
  line-height: 1.4;
}
.form textarea { resize: vertical; min-height: 150px; }
.form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form ::placeholder { color: #767676; opacity: 1; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}
/* only flags a field after someone has tried it, not on page load */
.form input:user-invalid,
.form textarea:user-invalid { border: 2px solid #b42318; }

.form__trap { display: none !important; }
.form__submit { width: 100%; }
.form__privacy { font-size: 0.95rem; color: var(--muted); margin: 14px 0 0; }

.btn--block { width: 100%; }

@media (min-width: 560px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__field--full { grid-column: 1 / -1; }
  .form__submit { width: auto; }
}


/* 11. Areas served --------------------------------------------------- */
.areas__title {
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.areas {
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.areas__state h4 { font-size: 1rem; margin-bottom: 4px; }
.areas__state p { color: var(--muted); font-size: 1.05rem; }

@media (min-width: 720px) {
  .areas { grid-template-columns: 2fr 1.2fr 1fr; gap: 32px; }
}


/* 12. Recent work (reserved) ----------------------------------------- */
.project-grid { display: grid; gap: 28px; }
.project { background: var(--white); border: 1px solid var(--ink); }
.project__gallery {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.project__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper); }
.project__title { font-size: 1.2rem; margin: 18px 20px 8px; }
.project > p { margin: 0 20px 20px; }

@media (min-width: 960px) {
  .project-grid { grid-template-columns: repeat(3, 1fr); }
  .project__gallery { grid-template-columns: 1fr 1fr; }
  .project__gallery img:first-child { grid-column: 1 / -1; }
}


/* 13. Footer --------------------------------------------------------- */
.site-footer {
  border-top: 2px solid var(--ink);
  padding: 32px 0 40px;
  font-size: 1rem;
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 40px;
}
.site-footer p { margin: 0 0 6px; }
.site-footer__url {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  margin-bottom: 10px !important;
}
.site-footer__fine { color: var(--muted); font-size: 0.9rem; }
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-footer__links a {
  display: inline-block;
  overflow-wrap: anywhere;
  padding: 6px 0;          /* bigger tap target on phones */
  font-weight: 600;
}


/* 14. Simple pages (404 and future pages) ---------------------------- */
.page-intro { padding: 56px 0 64px; }
.page-intro h1 {
  font-size: clamp(2rem, 7vw, 3.2rem);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.page-intro .lead { font-size: 1.25rem; color: var(--muted); max-width: 34em; margin-bottom: 26px; }


/* 15. Utilities (last, so they win over component styles) ------------ */
.hide-on-phone { display: none !important; }
@media (min-width: 560px) {
  .hide-on-phone { display: inline-flex !important; }
  .show-on-phone { display: none !important; }
}


/* 16. Print ---------------------------------------------------------- */
@media print {
  .site-header { position: static; }
  .site-header__actions, .skip-link, .button-row, .contact__form, .callout { display: none !important; }
  .hero, .section--tint { background: none; }
  a[href^="mailto:"]::after, a[href^="tel:"]::after { content: ""; }
  .card, .title-block, .project { break-inside: avoid; }
}