/* Garden look (round 2 item 9, 6 Oct 2026). Loaded last on the garden pages.
   Greens, a paper texture, garden photos and softer type, while the logo, phone
   and footer keep it plainly The Wairarapa Handyman. Looks only: no form changes. */
:root {
  --brown:    #3F6B34;   /* leaf */
  --brown-dk: #23391F;   /* deep hedge */
  --brown-lt: #6E8F55;
  --tan:      #5E8C3A;   /* fresh leaf, labels and buttons */
  --tan-lt:   #C9DFA4;   /* new growth, on dark green */
  --cream:    #F6F3E8;   /* paper */
  --warm:     #EAF0DC;   /* pale sage */
  --border:   #D3DCC0;
  --text:     #1F2A1A;
  --mid:      #3E4F35;
  --muted:    #6F7D63;
  --green:    #3F6B34;
  --soil:     #8A5A33;   /* the handyman's timber, kept for small accents */
  --radius:   14px;
  --shadow:   0 1px 3px rgba(35,57,31,.06), 0 6px 22px rgba(35,57,31,.09);
  --font-head: 'Nunito', sans-serif;
}

/* Paper texture: fine grain plus a faint leaf sprig, both drawn inline. */
body {
  background-color: var(--cream);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Softer type: rounded Nunito headings, no shouting capitals. */
h1, h2, h3, legend, .brand, .header-brand-name, .service-card-title, .service-card-price,
.btn-primary, .btn-submit, .btn, .section-label, .sidebar-next-title, .rates-box-title {
  font-family: 'Nunito', sans-serif !important;
  letter-spacing: 0 !important;
}
legend, .sidebar-next-title, .rates-box-title {
  text-transform: none !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--brown) !important;
  border-bottom: 1px dashed var(--border) !important;
}
legend::before, .sidebar-next-title::before {
  content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19C5 10 11 5 20 4c0 9-5 15-14 15z' fill='%235E8C3A'/%3E%3Cpath d='M5 19c3-5 7-9 12-12' stroke='%23F6F3E8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Header: the handyman's logo and phone, on hedge green. */
.site-header { background: var(--brown-dk) !important; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.gl-head { max-width: 1100px; margin: 0 auto; padding: 0 20px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gl-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.gl-brand img, .header-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid var(--tan-lt) !important; flex-shrink: 0; }
.gl-name { display: flex; flex-direction: column; line-height: 1.15; }
.gl-name b, .header-brand-name { font-weight: 800; font-size: .98rem; color: #fff; }
.gl-name i, .header-brand-sub { font-style: normal; font-size: .72rem !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--tan-lt) !important; font-weight: 600; }
.gl-phone, .header-phone { color: #fff !important; font-weight: 800; text-decoration: none; font-size: .95rem; display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; white-space: nowrap; }
.gl-phone:hover, .header-phone:hover { color: var(--tan-lt) !important; }
.gl-phone svg { width: 16px; height: 16px; }

/* Hero: a garden photo under a green wash. */
.hero {
  background: linear-gradient(180deg, rgba(25,42,22,.70) 0%, rgba(25,42,22,.55) 55%, rgba(25,42,22,.80) 100%),
              url('/garden/assets/img/garden-hero-beds.webp') center 55%/cover no-repeat, var(--brown-dk) !important;
  padding: 64px 20px 70px !important;
}
.hero.gl-pergola { background: linear-gradient(180deg, rgba(25,42,22,.72) 0%, rgba(25,42,22,.55) 55%, rgba(25,42,22,.82) 100%),
              url('/garden/assets/img/garden-hero-pergola.webp') center 50%/cover no-repeat, var(--brown-dk) !important; }
.hero::after { background: none !important; }
.hero h1 { font-weight: 800 !important; font-size: 2.5rem !important; line-height: 1.15; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.hero h1 span, .hero h1 em { color: var(--tan-lt) !important; font-style: normal; }
.hero p { opacity: .95 !important; color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hero .badge { background: var(--tan-lt) !important; color: var(--brown-dk) !important; font-family: 'Nunito', sans-serif !important; font-weight: 800; letter-spacing: .04em !important; border-radius: 999px !important; }
.gl-kicker { display: inline-block; margin-bottom: 12px; padding: 4px 14px; border-radius: 999px; background: rgba(201,223,164,.18); border: 1px solid rgba(201,223,164,.5); color: var(--tan-lt); font-size: .8rem; font-weight: 700; }

/* Cards: soft corners and a pale linen edge. */
.card, .form-card, .playbook-card { border-radius: var(--radius) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; }
.service-card { background: var(--brown-dk) !important; border-radius: var(--radius) !important;
  background-image: linear-gradient(120deg, rgba(94,140,58,.25), transparent 60%) !important; }
.service-card-price { color: var(--tan-lt) !important; font-weight: 800 !important; }
.service-card-list li::before { color: var(--tan-lt) !important; }
.radio-opt, .crop-check { border-radius: 10px !important; }
.radio-opt:has(input:checked), .crop-check:has(input:checked) { background: #E3EDD2 !important; border-color: var(--tan) !important; }
input[type=radio], input[type=checkbox] { accent-color: var(--tan); }
input[type=text], input[type=email], input[type=tel], textarea, select { border-radius: 10px !important; background: #FDFCF7 !important; }
input:focus, textarea:focus, select:focus { border-color: var(--tan) !important; box-shadow: 0 0 0 3px rgba(94,140,58,.18) !important; }
.ack-field { background: var(--brown-dk) !important; border-radius: var(--radius) !important; }
.ack-field:has(input:checked) { outline-color: var(--tan-lt) !important; }

/* Buttons: leaf green, rounded. */
.btn-primary, .btn-submit, .btn { background: var(--tan) !important; color: #fff !important; border-radius: 999px !important; text-transform: none !important; font-weight: 800 !important; }
.btn-primary:hover, .btn-submit:hover, .btn:hover { background: var(--brown) !important; }
.btn-outline { border-color: var(--tan) !important; color: var(--brown) !important; border-radius: 999px !important; }
.btn-outline:hover { background: var(--tan) !important; color: #fff !important; }

/* Side panels and notes. */
.sidebar-trust { background: var(--brown-dk) !important; border-radius: var(--radius) !important; }
.sidebar-trust-stars { color: #E9C46A !important; }
.sidebar-trust-link { color: var(--tan-lt) !important; }
.sidebar-next, .sidebar-phone, .response-note, .note-box, .tip { border-radius: var(--radius) !important; }
.sidebar-step-num { color: var(--tan) !important; }
.gl-photo { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; aspect-ratio: 900/506; object-fit: cover; }
.gl-photo-cap { font-size: .8rem; color: var(--muted); margin: -8px 0 16px; }

/* Monospace bits from the old look become plain text. */
.privacy-note, .site-footer a, .site-header .brand span { font-family: 'Nunito', sans-serif !important; }

/* Footer: one handyman footer for all the garden pages. */
.site-footer { background: var(--brown-dk) !important; color: rgba(255,255,255,.8); padding: 0 !important; display: block !important; }
.gl-foot { max-width: 1100px; margin: 0 auto; padding: 26px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; font-size: .9rem; }
.gl-foot .gl-brand img { width: 34px; height: 34px; }
.gl-foot a { color: var(--tan-lt) !important; text-decoration: none; font-weight: 700; font-size: .9rem; }
.gl-foot a:hover { color: #fff !important; text-decoration: underline; }
.gl-foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.gl-foot small { flex-basis: 100%; color: rgba(255,255,255,.55); font-size: .78rem; }

@media (max-width: 640px) {
  .hero { padding: 44px 18px 48px !important; }
  .hero h1 { font-size: 1.9rem !important; }
  .gl-name i { font-size: .68rem !important; }
  .gl-name b { font-size: .9rem; }
  .gl-foot { flex-direction: column; align-items: flex-start; }
}

/* The Playbook pages had their own centred header, footer and capitals: settle them to the shared look. */
.site-header { display: block !important; padding: 0 !important; text-align: left !important; }
.site-footer, .site-footer * { letter-spacing: normal !important; text-align: left !important; }
h1, h2, h3 { text-transform: none !important; }
label { font-family: 'Nunito', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; }