/* =========================================================
   Forest Brickwork
   Palette taken from the flier: sage green, charcoal ink,
   brick red, cream, deep pine + light pine green.

   Colours are split into two groups:
     * brand hues  — fixed, the same in both themes
     * semantic tokens — surfaces and text, which swap for dark mode
   Style components through the semantic tokens only, so the dark
   theme stays consistent. Phone browsers (Samsung Internet, Chrome
   on Android) force-invert sites that don't declare a dark theme,
   which left the logo's dark linework on a dark ground — declaring
   one properly is what stops that.
   ========================================================= */
:root {
  color-scheme: light dark;

  /* ---- brand hues (identical in both themes) ---- */
  --brick: #964f41;
  --brick-dark: #7c4034;
  --pine-dark: #2f4a35;
  --pine-light: #7dab7f;
  --sage: #8b9a82;
  --cream-brand: #f4f2ea;
  --whatsapp: #25a95c;
  --whatsapp-dark: #1d8a4b;

  /* ---- semantic tokens: light theme ---- */
  --bg: #f4f2ea;
  --bg-alt: #e8ece4;
  --surface: #ffffff;
  --text: #26251f;
  --hairline: rgba(38, 37, 31, 0.12);
  --input-border: rgba(38, 37, 31, 0.25);
  --input-bg: #f4f2ea;

  --accent-ink: #964f41;          /* accent used as text: eyebrows, links */
  --nav-bg: rgba(244, 242, 234, 0.92);

  --hero-bg: #8b9a82;
  --treeline: #2f4a35;

  --card-1: #2f4a35;              /* service card accents, left to right */
  --card-2: #964f41;
  --card-3: #7dab7f;

  --tile-a: #8b9a82;
  --tile-b: #83927a;
  --chip-border: #8b9a82;

  --contact-bg: #2f4a35;
  --contact-text: #f4f2ea;
  --contact-heading: #ffffff;
  --contact-hairline: rgba(244, 242, 234, 0.15);

  --band-bg: #f4f2ea;             /* strip the footer treeline sits on */
  --band-tree: #26251f;
  --footer-bg: #26251f;
  --footer-text: #f4f2ea;


  --success: #2f6b43;
  --error: #a2402f;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(38, 37, 31, 0.12);
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutrals carry a slight warm-olive bias, taken from the logo's ink. */
    --bg: #191a15;
    --bg-alt: #20221b;
    --surface: #24261e;
    --text: #eceadf;
    --hairline: rgba(236, 234, 223, 0.14);
    --input-border: rgba(236, 234, 223, 0.24);
    --input-bg: #1b1d16;

    --accent-ink: #dd9078;        /* lifted so it clears contrast on dark */
    --nav-bg: rgba(25, 26, 21, 0.92);

    --hero-bg: #2f3d2a;
    --treeline: #16190f;          /* darker than the hero, merges into the page */

    --card-1: #5d8f65;
    --card-2: #d4826c;
    --card-3: #8fbf91;

    --tile-a: #2b3226;
    --tile-b: #333b2d;
    --chip-border: #4a5545;

    --contact-bg: #1e2a1c;
    --contact-hairline: rgba(236, 234, 223, 0.16);

    --band-bg: #1e2a1c;           /* matches the contact section above it */
    --band-tree: #101109;
    --footer-bg: #101109;


    --success: #8fd0a4;
    --error: #ef9c8a;

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }

h1, h2, h3 { line-height: 1.15; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 0.4em; }
h3 { font-size: 1.15rem; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-ink);
  margin-bottom: 0.6em;
}
.eyebrow.light { color: var(--pine-light); }
.section-sub { max-width: 620px; margin: 0 auto 2.2rem; opacity: 0.85; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--pine-light);
  outline-offset: 2px;
}

/* ---------- trowel cursor ---------- */
/* A small flourish for a bricklayer: the default pointer is a trowel, with the
   blade tip as the hotspot (2 2) so it still aims exactly like an arrow.
   Anything interactive keeps its usual cursor so nothing becomes harder to use,
   and the trailing `auto` covers any browser that rejects the image. */
body { cursor: url("assets/cursor-trowel.png") 2 2, auto; }
a, button, summary, label, select, [role="button"] { cursor: pointer; }
input, textarea { cursor: text; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.8em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.btn-brick { background: var(--brick); color: #fff; }
.btn-brick:hover { background: var(--brick-dark); }
.btn-outline { border-color: var(--text); color: var(--text); background: transparent; }
.btn-outline:hover { background: var(--text); color: var(--bg); }
/* buttons that lead with an icon */
.btn-icon { display: inline-flex; align-items: center; gap: 0.55em; }
.btn-icon svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
/* WhatsApp keeps its own recognisable green — people scan for it by colour. */
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-dark); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner { display: flex; align-items: center; gap: 1.4rem; padding: 0.6rem 22px; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); font-weight: 800; text-transform: uppercase; line-height: 1.05; letter-spacing: 0.02em; }
.brand img { width: 48px; height: auto; }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; }
.nav-links a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav-links a:hover { color: var(--accent-ink); }
.nav-cta { white-space: nowrap; }
.nav-toggle { display: none; background: none; border: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
.nav-toggle span { width: 24px; height: 3px; background: var(--text); border-radius: 2px; }

/* ---------- logo ---------- */
/* The logo is ~77% near-black linework, so it vanishes on any dark ground.
   Two things that did NOT work: a CSS background behind it (Samsung Internet
   darkens light backgrounds), and swapping artwork via
   prefers-color-scheme (Samsung darkens the page without reporting dark mode,
   so the swap never fired). So there is now ONE logo file with the flier's
   sage green and the rounded corners baked in, served unconditionally. As
   image content it is not subject to background darkening, and it needs no
   media query to be correct. Light mode is unaffected in the hero because
   that ground is the same sage. Baked-in rounding also keeps the radius
   proportional at 48px and at 340px alike.
   NOTE: if the logo is ever replaced, regenerate logo-sage.png to match, and
   bump the ?v= number in index.html to push it past caches. */

/* ---------- hero ---------- */
.hero { background: var(--hero-bg); position: relative; overflow: hidden; }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 2rem; align-items: center;
  padding-top: 4.5rem; padding-bottom: 7.5rem;
}
.hero h1 { margin-bottom: 0.45em; }
.lede { font-size: 1.12rem; max-width: 34em; margin-bottom: 1.6em; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.hero-logo img { width: min(340px, 80%); margin: 0 auto; filter: drop-shadow(0 14px 30px rgba(20, 20, 14, 0.3)); }
.trust-strip { list-style: none; display: flex; gap: 1.6rem; flex-wrap: wrap; font-weight: 600; font-size: 0.92rem; }
.trust-strip li::before { content: "✓ "; color: var(--pine-dark); font-weight: 800; }
.treeline { display: block; width: 100%; height: 90px; position: absolute; bottom: -1px; left: 0; }

@media (prefers-color-scheme: dark) {
  /* the hero ground is dark here, so the tick needs to lift off it */
  .trust-strip li::before { color: var(--pine-light); }
}

/* ---------- sections ---------- */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--bg-alt); }

/* ---------- service cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.4rem; }
.card {
  background: var(--surface); border-radius: var(--radius); padding: 2rem 1.8rem;
  box-shadow: var(--shadow); border-top: 5px solid var(--card-1);
  transition: transform 0.2s ease;
}
.card:hover { transform: translateY(-5px); }
.card:nth-child(2) { border-top-color: var(--card-2); }
.card:nth-child(3) { border-top-color: var(--card-3); }
.card-icon { width: 56px; height: 56px; color: var(--card-1); margin-bottom: 1rem; }
.card-icon svg { width: 100%; height: 100%; display: block; }
.card:nth-child(2) .card-icon { color: var(--card-2); }
.card:nth-child(3) .card-icon { color: var(--card-3); }
.card h3 { margin-bottom: 0.6rem; }
.card ul { list-style: none; }
.card li { padding: 0.35em 0; border-bottom: 1px dashed var(--hairline); }
.card li:last-child { border-bottom: none; }
.card small { opacity: 0.7; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.4rem; }
.tile {
  aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--tile-a) 0 14px, var(--tile-b) 14px 28px);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-brand); font-weight: 600; text-align: center; font-size: 0.95rem;
}
.tile.has-photo {
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
.tile.has-photo span { display: none; }

/* ---------- areas ---------- */
.areas-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.map {
  height: 420px; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
}
/* the flex centring above is only for the fallback message */
.map.is-live { display: block; }
.map-fallback { opacity: 0.6; font-weight: 500; padding: 1rem; text-align: center; }
.areas-list h3 { margin-bottom: 1rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips li {
  background: var(--bg-alt); border: 1.5px solid var(--chip-border);
  padding: 0.3em 0.75em; border-radius: 999px; font-weight: 500; font-size: 0.83rem;
}
@media (prefers-color-scheme: dark) {
  /* map tiles are drawn light; take the glare off without muddying them */
  .map .leaflet-tile-pane { filter: brightness(0.82) saturate(0.9); }
}

/* ---------- instagram ---------- */
behold-widget { display: block; margin-top: 2.4rem; max-width: 100%; overflow-x: hidden; }

/* ---------- contact ---------- */
.contact { background: var(--contact-bg); color: var(--contact-text); }
.contact h2 { color: var(--contact-heading); }
.contact .section-sub { opacity: 0.8; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; margin-top: 1.5rem; }
.contact-line {
  display: flex; gap: 0.9rem; align-items: center; text-decoration: none;
  color: var(--contact-text); padding: 1rem 0; border-bottom: 1px solid var(--contact-hairline);
  min-width: 0;
}
/* the email address is one long unbreakable token — let it wrap rather than
   widening the whole page */
.contact-line > span:last-child { min-width: 0; overflow-wrap: break-word; }
.contact-line:hover strong { color: var(--pine-light); }
.contact-ico { font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center; width: 1.5em; flex-shrink: 0; }
.contact-ico svg { width: 1.5rem; height: 1.5rem; }
.socials { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.4rem; }
.socials a { display: flex; align-items: center; gap: 0.7rem; color: var(--contact-text); text-decoration: none; font-weight: 500; min-width: 0; }
.socials a span { overflow-wrap: break-word; min-width: 0; }
.socials a:hover { color: var(--pine-light); }
.socials svg { width: 24px; height: 24px; }

.contact-form {
  background: var(--surface); color: var(--text); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 1rem;
}
.contact-form label { font-weight: 600; font-size: 0.92rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.contact-form label :is(input, select, textarea) {
  font-family: inherit; font-size: 1rem; padding: 0.7em 0.9em;
  border: 1.5px solid var(--input-border); border-radius: 8px;
  background: var(--input-bg); color: var(--text);
  width: 100%; min-width: 0; max-width: 100%;
}
.contact-form textarea { resize: vertical; }
.contact-form label input[aria-invalid="true"] { border-color: var(--error); }
.form-note { font-size: 0.85rem; opacity: 0.75; min-height: 1.2em; }
.form-note.is-success { color: var(--success); opacity: 1; font-weight: 600; }
.form-note.is-error { color: var(--error); opacity: 1; font-weight: 600; }

/* ---------- footer ---------- */
.footer { background: var(--footer-bg); color: var(--footer-text); position: relative; padding-top: 0; }
.footer .treeline-top { position: static; height: 70px; transform: none; background: var(--band-bg); }
.footer .treeline-top path { fill: var(--band-tree); }
.footer-inner { text-align: center; padding: 2.5rem 22px 2rem; }
.footer-logo { width: 90px; margin: 0 auto 1rem; }
.footer a { color: var(--pine-light); text-decoration: none; }
.footer-small { opacity: 0.55; font-size: 0.85rem; margin-top: 1rem; }

/* ---------- responsive ---------- */
@media (max-width: 840px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; padding-top: 3rem; padding-bottom: 6rem; }
  .hero-actions, .trust-strip { justify-content: center; }
  .lede { margin-left: auto; margin-right: auto; }
  .hero-logo { order: -1; }
  .hero-logo img { width: min(220px, 60%); }
  .cards, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); padding: 1.2rem 22px; gap: 1rem;
    border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow);
  }
}
@media (max-width: 520px) {
  .cards, .gallery { grid-template-columns: minmax(0, 1fr); }
  .map { height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
  .btn:hover, .card:hover { transform: none; }
}