/* James' Mowing and Gardening Services
   One stylesheet for the whole site. Mobile first. System fonts only. */

:root {
  --ink: #1b1d17;
  --ink-soft: #4c4f45;
  --paper: #fcfcfa;
  --panel: #f4f5ec;
  --line: #e0e2d4;
  --hivis: #d7e41f;
  --hivis-deep: #b9c400;
  --accent-text: #5c6600;
  --focus: #2b4bd7;
  --max: 1060px;
  --radius: 12px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  padding-bottom: calc(88px + env(safe-area-inset-bottom)); /* clearance for the sticky call bar */
}

@media (min-width: 900px) {
  body { font-size: 18px; padding-bottom: 0; }
}

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

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent-text); }

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

h1, h2, h3 {
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 6.2vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 4.2vw, 2.1rem); margin-top: 0; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.lede { font-size: 1.08em; color: var(--ink); }

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

.small { font-size: 0.9em; }

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: 44px 0; }

@media (min-width: 900px) {
  section { padding: 64px 0; }
}

.section-alt { background: var(--panel); }

.split {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 820px) {
  .split { grid-template-columns: 1.15fr 0.85fr; gap: 44px; }
  .split > .media-col { position: sticky; top: 20px; }
}

.media-col img { border-radius: var(--radius); }

/* ---------- header ---------- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  max-width: var(--max);
  margin: 0 auto;
}

.brand {
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.25;
  text-decoration: none;
  max-width: 15ch;
}

.brand span { color: var(--accent-text); }

.header-phone { display: none; }

@media (min-width: 900px) {
  .brand { max-width: none; font-size: 1.12rem; }
  .header-phone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
  }
  .header-phone a {
    font-weight: 800;
    font-size: 1.2rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .header-phone .hours { font-size: 0.82rem; color: var(--ink-soft); }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  min-width: 48px;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

.site-nav {
  display: none;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.site-nav.open { display: block; }

.site-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 8px 12px;
  max-width: var(--max);
}

.site-nav a {
  display: block;
  padding: 12px 10px;
  min-height: 48px;
  text-decoration: none;
  font-weight: 650;
  border-radius: 8px;
}

.site-nav a:hover { background: var(--panel); }

.site-nav a[aria-current="page"] {
  background: var(--panel);
  box-shadow: inset 4px 0 0 var(--hivis);
}

@media (min-width: 900px) {
  .site-nav { display: block; }
  .site-nav ul {
    display: flex;
    gap: 4px;
    padding: 0 12px;
  }
  .site-nav a { padding: 12px 14px; }
  .site-nav a[aria-current="page"] {
    box-shadow: inset 0 -4px 0 var(--hivis);
    background: transparent;
  }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.btn-call {
  background: var(--hivis);
  color: #171a05;
  box-shadow: 0 1px 0 var(--hivis-deep), 0 3px 10px rgba(27, 29, 23, 0.12);
}

.btn-call:hover { background: #e2ee3a; color: #171a05; }

.btn-ghost {
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
}

.btn-ghost:hover { background: var(--panel); color: var(--ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 4px;
}

.icon { width: 1.15em; height: 1.15em; flex: none; }

.cta-line { margin-top: 22px; }

/* ---------- sticky call bar ---------- */

.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--hivis);
  color: #171a05;
  font-weight: 800;
  font-size: 1.12rem;
  text-decoration: none;
  box-shadow: 0 -2px 12px rgba(27, 29, 23, 0.18);
}

.call-bar:hover { color: #171a05; }

@media (min-width: 900px) {
  .call-bar { display: none; }
}

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

.hero { padding: 0; position: relative; }

/* Mobile stacks: the photograph on top, then the words on the page
   background underneath it. Nothing is laid over the image below 700px,
   so there is no photograph behind any of the text to read against.
   The 4:3 box keeps the same crop at every width, and 50% 20% holds
   James's head and shoulders inside the frame with headroom above. */
.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: 50% 20%;
}

.hero-overlay { padding: 22px 0 6px; }

.hero-overlay .wrap { width: 100%; }

.hero h1 {
  margin-bottom: 0.3em;
  max-width: 17ch;
}

.hero .sub {
  font-size: 1.08rem;
  max-width: 44ch;
  margin-bottom: 1em;
}

/* From 700px the landscape source takes over, so the stacked box follows
   it into a landscape ratio. Still stacked, still no text on the image. */
@media (min-width: 700px) {
  .hero-media img {
    aspect-ratio: 3 / 2;
    object-position: 50% 40%;
  }
}

@media (min-width: 900px) {
  /* Desktop keeps the overlay. Below 900px the headline alone fills almost
     the whole frame, which leaves no undarkened photograph to gradient
     into, so the overlay only starts where the hero is tall enough to
     carry it. The scrim holds its dark plateau up past the top of the h1
     and fades out above, so every glyph sits on a darkened region rather
     than on whatever the photograph happens to be doing behind it. */
  .hero-media img {
    aspect-ratio: auto;
    height: min(58vw, 620px);
    object-position: 50% 38%;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0;
    background: linear-gradient(to top, rgba(10, 12, 8, 0.9) 0px, rgba(10, 12, 8, 0.88) 320px, rgba(10, 12, 8, 0.86) 450px, rgba(10, 12, 8, 0.74) 510px, rgba(10, 12, 8, 0.3) 580px, rgba(10, 12, 8, 0) 640px);
  }

  .hero-overlay .wrap { padding-bottom: 44px; }

  .hero h1 { color: #ffffff; }

  .hero .sub { color: #f0f1e8; font-size: 1.2rem; }
}

/* ---------- trust bar ---------- */

.trust {
  background: var(--ink);
  color: #f3f4ea;
  padding: 18px 0;
}

.trust ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

@media (min-width: 820px) {
  .trust ul { grid-template-columns: repeat(4, 1fr); }
}

.trust li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
}

.trust .icon { color: var(--hivis); margin-top: 2px; }

/* ---------- cards ---------- */

.card-grid {
  display: grid;
  gap: 16px;
  margin: 22px 0;
}

@media (min-width: 700px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.section-alt .card { background: #ffffff; }

.card h3 { margin-bottom: 6px; }

.card .price {
  font-size: 1.7rem;
  font-weight: 800;
  margin: 8px 0 2px;
}

.card .per { font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; }

.card ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.card ul li {
  padding: 6px 0 6px 26px;
  position: relative;
  font-size: 0.95rem;
}

.card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--hivis);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 12.2 2.3 8.1l1.4-1.4 2.7 2.7 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 12.2 2.3 8.1l1.4-1.4 2.7 2.7 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: var(--accent-text);
}

.card.featured {
  border: 2.5px solid var(--hivis-deep);
  box-shadow: 0 6px 18px rgba(27, 29, 23, 0.08);
}

.badge {
  align-self: flex-start;
  background: var(--hivis);
  color: #171a05;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; margin: 20px 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 0.97rem;
}

caption {
  text-align: left;
  font-weight: 750;
  padding-bottom: 10px;
  font-size: 1.05rem;
}

th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

thead th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
}

td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

td .price-strong { font-weight: 800; font-size: 1.05em; }

tr.highlight td { background: #fbfce9; }

/* ---------- steps ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 62px;
  min-height: 46px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--hivis);
  color: #171a05;
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps h3 { margin-bottom: 2px; }

/* ---------- gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}

.gallery figure { margin: 0; }

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--panel);
}

.gallery figcaption {
  font-size: 0.86rem;
  color: var(--ink-soft);
  padding-top: 7px;
  line-height: 1.4;
}

/* ---------- suburbs ---------- */

.suburbs {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 700px) {
  .suburbs { grid-template-columns: repeat(4, 1fr); }
}

.suburbs li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  font-weight: 650;
  font-size: 0.95rem;
}

.section-alt .suburbs li { background: #ffffff; }

/* ---------- reviews ---------- */

.review-flag {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.review-score { font-size: 2.4rem; font-weight: 800; line-height: 1; }

.stars { color: var(--hivis-deep); letter-spacing: 2px; font-size: 1.25rem; }

/* ---------- forms ---------- */

.form-panel {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-top: 26px;
}

@media (min-width: 700px) {
  .form-panel { padding: 32px; }
}

.field { margin-bottom: 18px; }

label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 0.98rem;
}

.hint {
  font-size: 0.87rem;
  color: var(--ink-soft);
  margin: 4px 0 0;
}

input[type="text"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font: inherit;
  padding: 13px 14px;
  min-height: 50px;
  border: 1.5px solid #b9bcab;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}

textarea { min-height: 110px; resize: vertical; }

input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 0;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #b9bcab;
  border-radius: 10px;
  padding: 10px 14px;
  min-height: 48px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

.checks input { width: 20px; height: 20px; accent-color: var(--accent-text); }

.checks label:has(input:checked) {
  background: #fbfce9;
  border-color: var(--hivis-deep);
}

.form-error {
  color: #8a1f11;
  font-weight: 650;
  margin: 0 0 14px;
}

.form-success h3 { margin-bottom: 8px; }

.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- misc ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--hivis);
  color: #171a05;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 800;
  z-index: 100;
}

.skip-link:focus { left: 0; top: 0; }

.phone-inline { white-space: nowrap; font-weight: 750; }

.notice {
  background: var(--panel);
  border-left: 5px solid var(--hivis);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 20px 0;
}

.compare {
  display: grid;
  gap: 16px;
  margin: 22px 0;
}

@media (min-width: 700px) {
  .compare { grid-template-columns: 1fr 1fr; }
}

.compare .card h3 { display: flex; align-items: center; gap: 8px; }

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 34px 0;
}

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

.site-footer {
  background: var(--ink);
  color: #d9dbcd;
  padding: 44px 0 40px;
  margin-top: 20px;
  font-size: 0.95rem;
}

.site-footer a { color: #f3f4ea; }

.site-footer a:hover { color: var(--hivis); }

.footer-grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 820px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

.site-footer h2 {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 10px;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }

.site-footer li { padding: 4px 0; }

.footer-phone {
  font-size: 1.35rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.footer-note {
  border-top: 1px solid #3a3d33;
  margin-top: 32px;
  padding-top: 18px;
  color: #a9ac9c;
  font-size: 0.86rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* FAQ list */
.faq {
  margin: 26px 0 0;
  max-width: 46rem;
}
.faq dt {
  font-weight: 800;
  font-size: 1.06rem;
  margin: 22px 0 6px;
}
.faq dt:first-child {
  margin-top: 0;
}
.faq dd {
  margin: 0;
  color: var(--ink);
}


/* Callback expectation line under call CTAs */
.cta-note {
  margin: 10px 0 0;
  font-size: 0.92rem;
  color: rgba(27, 29, 23, 0.72);
}
/* Only white once the hero becomes an overlay. While the hero is stacked
   this line sits on the page background and keeps the default ink colour. */
@media (min-width: 900px) {
  .hero .cta-note {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  }
}

/* Reviews */
.reviews-grid {
  display: grid;
  gap: 18px;
  margin: 26px 0;
}
@media (min-width: 760px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}
blockquote.review {
  margin: 0;
  background: var(--paper);
  border: 1px solid rgba(27, 29, 23, 0.1);
  border-radius: 14px;
  padding: 20px 22px;
}
blockquote.review .stars {
  color: var(--hivis-deep);
  letter-spacing: 3px;
  margin-bottom: 8px;
}
blockquote.review p { margin: 0 0 12px; }
blockquote.review footer {
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(27, 29, 23, 0.72);
}
blockquote.inline-review {
  max-width: 44rem;
  margin: 22px 0;
  background: var(--panel);
}

/* SMS handoff on the form confirmation */
.form-success .sms-link { margin: 14px 0 8px; }
.form-success .hint { margin-top: 4px; }


/* Feature figure: real evidence images with a working caption */
.feature-fig {
  margin: 26px 0;
  max-width: 560px;
}
.feature-fig img { border-radius: 14px; }
.feature-fig figcaption {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(27, 29, 23, 0.75);
}
.media-col .feature-fig { margin: 0; max-width: none; }