/* Wonderboy Landscaping LLC — construction landing page
   Earthy tans + olive greens, royal blue as the single pop colour.
   Palette values sampled from the client's own brand asset sheet.
   No build step, no external fonts, no JS. Edit and rebuild the container. */

:root {
  /* sand / tan — the dominant family */
  --sand-50:  #fbf5ea;
  --sand-100: #f7efe1;
  --sand-200: #f0e4cf;
  --sand-300: #e5d3b4;
  --sand-400: #d8bf95;
  --tan-500:  #c2a274;
  --tan-600:  #a5855a;
  --bark:     #6d5636;

  /* greens — sampled from the brand icons */
  --olive:    #5a6e32;
  --olive-dk: #3f4c21;
  --sage:     #8a9a63;

  /* royal blue — the contrast/pop colour */
  --royal:      #0f56a4;
  --royal-dk:   #0a3f7c;
  --royal-deep: #12365f;

  --ink:      #3a3126;
  --ink-soft: #6a5c49;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1060px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--sand-50) 0%, transparent 60%),
    linear-gradient(180deg, var(--sand-100) 0%, var(--sand-200) 100%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; }

/* warm sun wash behind the top of the page */
.sun {
  position: fixed;
  inset: -18vmax 0 auto;
  height: 70vmax;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(34vmax 26vmax at 22% 10%, rgba(216,191,149,.42), transparent 66%),
    radial-gradient(38vmax 28vmax at 82% 2%, rgba(138,154,99,.26), transparent 66%);
  animation: drift 28s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.07); }
}

/* ---------- top bar ---------- */

.topbar {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 22px 24px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-shield { width: 42px; height: auto; flex: none; }

.brand-text { display: flex; flex-direction: column; line-height: 1.12; }

.brand-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .005em;
  color: var(--royal);
}

.brand-sub {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bark);
}

.chip {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 7px 15px;
  border: 1px solid var(--sand-400);
  border-radius: 999px;
  color: var(--royal);
  background: rgba(255,255,255,.6);
  white-space: nowrap;
}

/* ---------- layout ---------- */

main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- hero ---------- */

.hero {
  padding: clamp(28px, 6vw, 60px) 0 clamp(30px, 5vw, 52px);
  text-align: center;
}

.badge {
  width: clamp(150px, 26vw, 208px);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(109,86,54,.24));
}

h1 { margin: 20px 0 26px; }

.wordmark {
  width: clamp(280px, 62vw, 440px);
  height: auto;
}

.lede {
  margin: 0 auto 34px;
  max-width: 54ch;
  font-size: clamp(1.03rem, 2vw, 1.18rem);
  color: var(--ink-soft);
}

/* ---------- contact card ---------- */

.contact-card {
  display: inline-block;
  text-align: left;
  padding: 22px 28px;
  border: 1px solid var(--sand-400);
  border-top: 4px solid var(--royal);
  border-radius: 6px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 6px 20px rgba(109,86,54,.09);
}

.contact-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--royal);
}

.contact-lines { display: flex; flex-direction: column; gap: 9px; }

.contact-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--royal);
  font-size: 1.02rem;
  font-weight: 600;
  width: fit-content;
  border-bottom: 1px solid rgba(15,86,164,.3);
  transition: color .18s ease, border-color .18s ease;
}

.contact-line svg { flex: none; color: var(--olive); }

.contact-line.primary {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 700;
}

.contact-line.primary svg { color: var(--royal); }

.contact-line:hover,
.contact-line:focus-visible { color: var(--royal-dk); border-color: var(--royal-dk); }

.contact-pending {
  margin: 0;
  color: var(--ink-soft);
  font-size: .97rem;
  max-width: 36ch;
}

/* ---------- meta ---------- */

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 48px;
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--sand-400);
}

.meta div { min-width: 130px; }

.meta dt {
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--bark);
}

.meta dd {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--royal);
}

/* ---------- design. build. maintain. enjoy. ---------- */

.promise {
  margin: 0 0 clamp(34px, 6vw, 58px);
  padding: 18px 20px;
  border-top: 1px solid var(--sand-400);
  border-bottom: 1px solid var(--sand-400);
  background: rgba(255,255,255,.42);
}

.promise-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 40px;
}

.promise-steps li {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: .04em;
  color: var(--royal);
  position: relative;
}

.promise-steps li + li::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--olive);
}

/* ---------- services ---------- */

.services { padding: 0 0 clamp(44px, 7vw, 72px); }

.section-title {
  margin: 0 0 30px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  color: var(--royal);
}

/* flex rather than grid so the final short row centres instead of
   hanging left with a gap */
.service-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.service {
  flex: 1 1 228px;
  max-width: 290px;
  padding: 24px 22px 26px;
  text-align: center;
  border: 1px solid var(--sand-400);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(247,239,225,.72));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service:hover {
  transform: translateY(-3px);
  border-color: var(--tan-500);
  box-shadow: 0 10px 24px rgba(109,86,54,.14);
}

.service img { width: 74px; height: auto; margin: 0 auto 12px; display: block; }

.service h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--royal);
}

.service p {
  margin: 0;
  font-size: .93rem;
  color: var(--ink-soft);
}

/* ---------- closer ---------- */

.closer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 48px);
  flex-wrap: wrap;
  margin: 0 0 clamp(40px, 7vw, 68px);
  padding: clamp(26px, 5vw, 44px) clamp(22px, 4vw, 40px);
  border: 1px solid var(--sand-400);
  border-radius: 10px;
  background:
    radial-gradient(90% 120% at 12% 50%, rgba(216,191,149,.5), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(240,228,207,.7));
}

.hero-figure { width: clamp(150px, 24vw, 236px); height: auto; flex: none; }

.closer-text { text-align: left; max-width: 30ch; }

.closer-icon { width: 54px; height: auto; margin-bottom: 10px; display: block; }

.closer-text h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  line-height: 1.16;
  color: var(--royal-deep);
}

.closer-text h2 .accent { color: var(--royal); }

.closer-text p { margin: 0; color: var(--ink-soft); }

/* ---------- footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 24px 28px;
  border-top: 1px solid var(--sand-400);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--ink-soft);
}

.footer p { margin: 0; }

.footer a {
  color: var(--royal);
  text-decoration: none;
  border-bottom: 1px solid rgba(15,86,164,.32);
}

.footer a:hover { color: var(--royal-dk); border-color: var(--royal-dk); }

/* ---------- a11y ---------- */

:focus-visible {
  outline: 2px solid var(--royal);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 620px) {
  .contact-card { display: block; }
  .closer { flex-direction: column; text-align: center; }
  .closer-text { text-align: center; max-width: none; }
  .closer-icon { margin-left: auto; margin-right: auto; }
  /* the steps wrap to two lines here; drop the separators so a wrapped
     line never starts with a stray dot */
  .promise-steps { gap: 4px 26px; }
  .promise-steps li + li::before { display: none; }

  /* 2 across (3 rows) with the odd 7th card centred on its own row.
     flex-grow MUST stay 0 — with grow:1 the lone last card stretches to
     fill the whole row instead of centring at half width. */
  .service {
    flex: 0 1 calc(50% - 8px);
    max-width: none;
    min-width: 0;
    padding: 20px 14px 22px;
  }
  .service img { width: 62px; margin-bottom: 10px; }
  .service h3 { font-size: 1.04rem; }
  .service p { font-size: .88rem; }
}

@media (max-width: 360px) {
  .service { padding: 18px 10px 20px; }
  .service img { width: 56px; }
  .service h3 { font-size: .98rem; }
}