* { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: #222;
    line-height: 1.6;
    font-size: 16px;
    position: relative;
    min-height: 100vh;
    background-color: #fff;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('../images/dgh.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
  }
  body > * { position: relative; z-index: 1; }
  header { background: #2f5233; color: #fff; padding: 16px 5%; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 100; }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
  header h1 { font-size: 20px; }
  /* Hamburger button */
  .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; transition: background .2s; }
  .nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(255,255,255,.12); }
  .nav-toggle:focus-visible { outline: 2px solid #e4f0df; outline-offset: 2px; }
  .nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Dropdown nav */
  nav { position: absolute; top: calc(100% + 6px); right: 5%; left: auto; background: #2f5233; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; z-index: 99; box-shadow: 0 8px 24px rgba(0,0,0,.22); border-radius: 10px; min-width: 200px; }
  nav.open { grid-template-rows: 1fr; }
  .nav-inner { overflow: hidden; display: flex; flex-direction: column; gap: 0; border-radius: 10px; }
  nav a { color: #fff; text-decoration: none; font-size: 15px; padding: 12px 22px; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; transition: background .15s ease, color .15s ease; }
  nav a:last-of-type { border-bottom: none; }
  nav a:hover, nav a:focus-visible { background: rgba(255,255,255,.10); color: #e4f0df; }
  nav a:focus-visible { outline: 2px solid #e4f0df; outline-offset: -3px; }
  .lang-switch { display: flex; gap: 8px; padding: 10px 22px 14px; }
  .lang-switch button { background: transparent; border: 1px solid #fff; color: #fff; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; transition: background-color .2s ease, color .2s ease; }
  .lang-switch button.active { background: #fff; color: #2f5233; }
  .lang-switch button:hover, .lang-switch button:focus-visible { background: rgba(255,255,255,.15); }
  .lang-switch button:focus-visible { outline: 2px solid #e4f0df; outline-offset: 2px; }
  .hero { background: #eef5ea; text-align: center; padding: 60px 20px; }
  .hero h2 { font-size: 32px; margin-bottom: 12px; color: #2f5233; }
  .hero p { max-width: 500px; margin: 0 auto 24px; color: #444; }
  .btn { display: inline-block; background: #2f5233; color: #fff; padding: 14px 28px; border-radius: 6px; text-decoration: none; font-weight: bold; border: none; cursor: pointer; font-size: 16px; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .btn:hover, .btn:focus-visible { background: #28472c; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(47, 82, 51, 0.18); }
  .btn:focus-visible { outline: 2px solid #cfe0c9; outline-offset: 3px; }
  section { padding: 56px 5%; max-width: 900px; margin: 0 auto; }
  h3 { font-size: 24px; margin-bottom: 20px; color: #2f5233; text-align: center; }
  .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
  .service-card, .trust-card, .garden-card, .pricing, .service-tasks { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
  .service-card { background: #f7f7f7; padding: 24px; border-radius: 8px; text-align: center; }
  .service-card h4 { margin-bottom: 8px; color: #2f5233; }
  .service-tasks { margin-top: 20px; background: #f7f7f7; padding: 20px; border-radius: 8px; }
  .service-tasks h4 { margin-bottom: 10px; color: #2f5233; }
  .service-tasks ul { padding-left: 20px; }
  .service-tasks li { margin-bottom: 6px; }
  .service-card:hover, .service-card:focus-within, .trust-card:hover, .trust-card:focus-within, .garden-card:hover, .garden-card:focus-within, .pricing:hover, .pricing:focus-within, .service-tasks:hover, .service-tasks:focus-within { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(47, 82, 51, 0.08); }
  .trust { padding-top: 26px; }
  .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
  .trust-card { background: #f7f7f7; padding: 20px; border-radius: 8px; text-align: left; }
  .trust-card h4 { margin-bottom: 6px; color: #2f5233; font-size: 18px; }
  .trust-card p { color: #444; font-size: 15px; }
  .garden-slider { display: grid; gap: 12px; }
  /* Keep garden hover preview above later sections like booking. */
  #garden { position: relative; z-index: 2; }
  .garden-slider__viewport {
    overflow: hidden;
    border-radius: 18px;
    padding: 12px;
    background: linear-gradient(180deg, #f9fcf7 0%, #eef5ea 100%);
    border: 1px solid #dfe7db;
    box-shadow: 0 14px 30px rgba(47, 82, 51, 0.08);
  }
  .garden-slider__track { display: flex; gap: 16px; padding: 4px; transition: transform 1.2s ease; will-change: transform; }
  .garden-slide {
    flex: 0 0 calc((100% - 32px) / 3);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,253,248,.96));
    border-radius: 16px;
    padding: 8px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(47, 82, 51, 0.10);
    cursor: zoom-in;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }
  .garden-slide:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(47, 82, 51, 0.16); }
  .garden-slide img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    transition: transform .45s ease, filter .45s ease;
    transform: scale(1);
    filter: saturate(1.03) contrast(1.02);
  }
  .garden-slide:hover img { transform: scale(1.04); filter: saturate(1.08) contrast(1.04); }
  .garden-slider__empty { text-align: center; color: #666; font-size: 14px; }
  /* Hover-preview overlay */
  .garden-hover-preview {
    position: fixed;
    left: 12px;
    top: 12px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    border: 1px solid #d7e2d2;
    box-shadow: 0 22px 48px rgba(47,82,51,.24);
    z-index: 150;
    pointer-events: none;
    opacity: 0;
    transform: scale(.97);
    transition: opacity .18s ease, transform .18s ease;
  }
  .garden-hover-preview.visible { opacity: 1; transform: scale(1); }
  .garden-hover-preview img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(980px, 82vw);
    max-height: 78vh;
    border-radius: 10px;
  }
  /* Lightbox */
  .lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    padding: 16px;
    opacity: 0;
  }
  .lightbox.open { display: flex; animation: lightboxFade .2s ease forwards; }
  @keyframes lightboxFade { from { opacity: 0; } to { opacity: 1; } }
  .lightbox img {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 14px;
    box-shadow: 0 24px 72px rgba(0,0,0,.55);
    user-select: none;
    pointer-events: none;
    transform: scale(.98);
    animation: lightboxPop .22s ease forwards;
  }
  @keyframes lightboxPop { to { transform: scale(1); } }
  .lightbox__close {
    position: fixed;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s;
    z-index: 201;
  }
  .lightbox__close:hover { opacity: 1; }
  .pricing { text-align: center; background: #eef5ea; border-radius: 8px; padding: 30px; }
  .pricing .rate { font-size: 36px; font-weight: bold; color: #2f5233; margin: 10px 0; }
  .pricing .fine-print { margin-top: 12px; font-size: 12px; line-height: 1.45; color: #666; }
  .privacy-note { background: #f7f7f7; border-radius: 8px; padding: 24px 22px; }
  .privacy-note h3 { margin-bottom: 14px; }
  .privacy-note ul { max-width: 720px; margin: 0 auto; padding-left: 20px; color: #444; }
  .privacy-note li { margin-bottom: 8px; }
  .about-content {
    display: grid;
    gap: 20px;
    align-items: center;
    justify-items: center;
    max-width: 760px;
    margin: 0 auto;
  }
  .about-content img {
    width: min(260px, 100%);
    border-radius: 10px;
    display: block;
  }
  .about-content p { text-align: center; white-space: pre-line; }
  .consent-banner {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(920px, calc(100% - 24px));
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #d7e2d2;
    box-shadow: 0 12px 30px rgba(47, 82, 51, 0.12);
    border-radius: 12px;
    padding: 16px 18px;
    display: none;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
  }
  .consent-banner__text { display: grid; gap: 4px; color: #444; font-size: 14px; }
  .consent-banner__text strong { color: #2f5233; font-size: 15px; }
  .consent-banner__text p { margin: 0; }
  .consent-banner__actions { flex: 0 0 auto; }
  .consent-banner .btn { padding: 11px 18px; font-size: 15px; }
  body.has-consent-banner { padding-bottom: 120px; }
  form { display: grid; gap: 14px; max-width: 500px; margin: 0 auto; }
  .field { display: grid; gap: 6px; }
  .field label { font-size: 14px; font-weight: 600; color: #2f5233; }
  input, textarea, select { padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; font-family: inherit; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; background: #fff; }
  input:hover, textarea:hover, select:hover { border-color: #aebfa9; }
  input:focus, textarea:focus, select:focus { outline: none; border-color: #2f5233; box-shadow: 0 0 0 3px rgba(47, 82, 51, 0.12); }
  textarea { resize: vertical; }
  footer { background: #2f5233; color: #fff; text-align: center; padding: 30px 20px; font-size: 14px; }
  /* FAQ */
  .faq-list { display: grid; gap: 10px; max-width: 700px; margin: 0 auto; }
  .faq-list details { background: #f7f7f7; border-radius: 8px; border: 1px solid #dfe7db; transition: box-shadow .2s ease; }
  .faq-list details:hover { box-shadow: 0 6px 16px rgba(47, 82, 51, 0.08); }
  .faq-list summary { padding: 16px 20px; cursor: pointer; font-weight: 600; color: #2f5233; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: '+'; font-size: 22px; font-weight: 300; color: #2f5233; flex-shrink: 0; line-height: 1; }
  .faq-list details[open] summary::after { content: '−'; }
  .faq-list .faq-answer { padding: 0 20px 16px; color: #444; line-height: 1.6; }
  /* Season guide */
  .season-accordion { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
  .season-card {
    background: #f7f7f7;
    border-radius: 14px;
    border: 1px solid #dfe7db;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  }
  .season-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(47, 82, 51, 0.08); border-color: #cfdcc9; }
  .season-card summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    color: #2f5233;
    font-weight: 700;
  }
  .season-card summary::-webkit-details-marker { display: none; }
  .season-summary-left { display: flex; align-items: center; gap: 14px; }
  .season-icon { font-size: 32px; line-height: 1; }
  .season-title { margin: 0; font-size: 16px; }
  .season-chevron {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(47, 82, 51, 0.08);
    display: grid;
    place-items: center;
    transition: transform .2s ease, background-color .2s ease;
  }
  .season-card[open] .season-chevron { transform: rotate(180deg); background: rgba(47, 82, 51, 0.12); }
  .season-content {
    padding: 0 20px 18px 66px;
    color: #444;
    font-size: 14px;
    line-height: 1.55;
  }
  .season-content ul { padding-left: 18px; margin: 0; }
  .season-content li { margin-bottom: 5px; }
  @media (max-width: 520px) {
    .season-card summary { padding: 16px 16px; }
    .season-content { padding-left: 58px; }
  }
  .success-msg { display: none; background: #dff0d8; color: #2f5233; padding: 16px; border-radius: 6px; text-align: center; margin-top: 12px; }
  .error-msg { display: none; background: #f8d7da; color: #842029; padding: 16px; border-radius: 6px; text-align: center; margin-top: 12px; }
  .booking-intro { text-align: center; color: #555; margin-bottom: 20px; }
  .contact-details { text-align: center; font-size: 18px; font-weight: bold; }
  .contact-social {
    margin-top: 16px;
    text-align: center;
    color: #2f5233;
  }
  .contact-social p { margin-bottom: 8px; font-weight: 600; }
  .contact-social a {
    color: #2f5233;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(47, 82, 51, 0.22);
    transition: color .2s ease, border-color .2s ease;
  }
  .contact-social a:hover, .contact-social a:focus-visible {
    color: #1f3a23;
    border-color: rgba(31, 58, 35, 0.45);
  }
  .map-section { max-width: 900px; margin: 0 auto; }
  .map-canvas {
    width: 100%;
    height: 360px;
    border: 1px solid #dfe7db;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(47, 82, 51, 0.10);
  }
  .map-note {
    margin-top: 8px;
    margin-bottom: 14px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #3c523f;
  }