/* Hoveniersbedrijf Bladgoud — parchment, deep forest and ochre gold. Lora for the voice, Mulish for the rest.
   Signature: the year as four seasons, each with its own colour, and maintenance as a rhythm. */
@font-face { font-family: "Lora"; src: url("../../fonts/lora/lora-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../../fonts/lora/lora-latin-wght-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("../../fonts/mulish/mulish-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
:root {
  --bg: #F4F1E8; --paper: #FBF9F3; --ink: #1F2E22; --muted: #50604F; --line: #D9D3C2; --forest: #1F3A27; --gold: #8A6116;
  --btn: var(--forest); --on-btn: #F4F1E8; --btn-hover: #2C5038; --focus: var(--forest);
  --display: "Lora", Georgia, serif; --text: "Mulish", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 500; --display-track: -0.02em; --radius: 1.25rem; --field-radius: 0.75rem;
  --menu-font: italic 500 1.5rem var(--display);
  --k-bg: var(--paper); --k-soft: #EFEBDF; --k-ink: var(--ink); --k-muted: var(--muted); --k-line: var(--line);
  --k-accent: var(--forest); --k-on-accent: #F4F1E8; --k-radius: 1rem; --k-font: var(--text);
}
h1 em, h2 em { font-style: italic; color: var(--gold); }
.dx-logo { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 1.6rem/1 var(--display); }
.dx-logo small { font: 700 0.62rem var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.bg-leaf { width: 1rem; height: 1.3rem; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #C99A2E, #8A6116); transform: rotate(-20deg); }

.bg-hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.bg-hero h1 { margin-top: 1rem; font-size: clamp(2.9rem, 6.2vw, 5.4rem); line-height: 1; }
.bg-hero__art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12rem 12rem var(--radius) var(--radius); }
@media (max-width: 960px) { .bg-hero { grid-template-columns: 1fr; } .bg-hero__art { max-width: 30rem; } }

.bg-seasons { background: var(--forest); color: #EEF0E6; }
.bg-seasons .dx-eyebrow, .bg-seasons .dx-sechead > p:last-child { color: #BFC9BA; }
.bg-seasons h2 em { color: #E2B74F; }
.bg-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bg-s { padding: 1.75rem 1.5rem; border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.bg-s h3 { margin-top: 1rem; font-size: 1.7rem; }
.bg-s p { margin-top: 0.4rem; color: #CBD3C6; font-size: 0.95rem; }
.bg-s__dot { display: block; width: 3rem; height: 3rem; border-radius: 50%; }
.bg-s--lente .bg-s__dot { background: radial-gradient(circle at 35% 35%, #CFE6A0, #6E9E3A); }
.bg-s--zomer .bg-s__dot { background: radial-gradient(circle at 35% 35%, #F7E07A, #D69E1E); }
.bg-s--herfst .bg-s__dot { background: radial-gradient(circle at 35% 35%, #F2A65A, #A84A1E); }
.bg-s--winter .bg-s__dot { background: radial-gradient(circle at 35% 35%, #E4ECEF, #8EA3AC); }
@media (max-width: 860px) { .bg-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .bg-year { grid-template-columns: 1fr; } }

.bg-plans { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.bg-plan-list { margin: 1.75rem 0 1rem; border-top: 1px solid var(--ink); }
.bg-plan-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.bg-plan-list h3 { font-size: 1.5rem; }
.bg-plan-list span { grid-column: 1; color: var(--muted); font-size: 0.95rem; }
.bg-plan-list b { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.bg-plans .dx-intro { margin: 0 0 1.5rem; }
@media (max-width: 960px) { .bg-plans { grid-template-columns: 1fr; } }

.bg-gardens { background: var(--paper); }
.bg-mosaic { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.bg-mosaic figure:first-child { grid-row: span 2; }
.bg-mosaic img { width: 100%; height: 100%; min-height: 14rem; object-fit: cover; border-radius: var(--radius); }
.bg-mosaic figure { display: grid; grid-template-rows: 1fr auto; }
.bg-mosaic figcaption { padding-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 760px) { .bg-mosaic { grid-template-columns: 1fr; } .bg-mosaic figure:first-child { grid-row: auto; } }

.bg-ask { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.bg-ask address { margin-top: 2rem; font-size: 1.1rem; line-height: 1.5; }
.bg-ask .dx-form { margin-top: 0; }
.bg-ask input[type=file] { padding-top: 0.7rem; }
@media (max-width: 960px) { .bg-ask { grid-template-columns: 1fr; } }