/* ==========================================================================
   Best Green 4 You — stylesheet
   Tuinbedrijf Sint-Gillis-Waas
   ========================================================================== */

:root{
  /* palette */
  --cream:        #f8f4e9;
  --cream-2:      #f2ecdd;
  --white:        #ffffff;
  --pine:         #123a28;
  --forest:       #1e5237;
  --leaf:         #2f7a4e;
  --mint:         #7fbf8f;
  --lime:         #cfe06b;
  --amber:        #e7b64a;
  --ink:          #1d2a20;
  --muted:        #5c6b5f;
  --line:         #e4dccb;

  /* fonts */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* shape & depth */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(18, 58, 40, .07);
  --shadow-md: 0 12px 30px rgba(18, 58, 40, .12);
  --shadow-lg: 0 24px 60px rgba(18, 58, 40, .18);
  --container: 1180px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; }
input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--lime); color:var(--pine); }

.container{ width:min(var(--container), 100% - 2.5rem); margin-inline:auto; }

h1,h2,h3,h4{
  font-family:var(--font-serif);
  color:var(--pine);
  line-height:1.14;
  text-wrap:balance;
}
h1{ font-size:clamp(2.15rem, 4.6vw, 3.55rem); font-weight:600; }
h2{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); font-weight:600; }
h3{ font-size:1.28rem; font-weight:600; }
h4{ font-family:var(--font-sans); font-size:.95rem; letter-spacing:.02em; }

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

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--forest); color:#fff; padding:.7rem 1.2rem; border-radius:999px;
  transition:top .25s ease;
}
.skip-link:focus{ top:1rem; }

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

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; font-size:1rem; line-height:1.2;
  padding:.92rem 1.55rem; border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn .icon{ transition:transform .25s ease; }
.btn:hover .icon{ transform:translateX(4px); }
.btn-lg{ padding:1.05rem 1.9rem; font-size:1.05rem; }
.btn-sm{ padding:.62rem 1.15rem; font-size:.95rem; }
.btn-block{ width:100%; }
.btn-primary{
  background:linear-gradient(135deg, var(--forest), var(--leaf));
  color:#f3f7f1;
  box-shadow:0 10px 22px rgba(30,82,55,.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(30,82,55,.34); }
.btn-ghost{ border:1.5px solid rgba(29,42,32,.35); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--forest); color:var(--forest); background:rgba(47,122,78,.06); }
.btn-outline{ border:1.5px solid var(--leaf); color:var(--forest); background:#fff; }
.btn-outline:hover{ background:var(--forest); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* dark CTA (inside dark/colored surfaces) */
.hero .btn-primary, .contact-panel .btn-primary{ background:var(--lime); color:var(--pine); box-shadow:0 10px 24px rgba(0,0,0,.22); }
.hero .btn-primary:hover, .contact-panel .btn-primary:hover{ background:#d9e88b; color:var(--pine); }
.service-card--cta .btn-primary{ background:var(--lime); color:var(--pine); box-shadow:none; }
.service-card--cta .btn-primary:hover{ background:#d9e88b; }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(248,244,233,.85);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled{ background:rgba(248,244,233,.97); box-shadow:0 6px 24px rgba(18,58,40,.10); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:78px; }

.brand{ display:inline-flex; align-items:center; gap:.65rem; }
.brand-mark{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--forest), var(--leaf));
  color:#eaf3dd; box-shadow:0 6px 14px rgba(30,82,55,.3);
}
.brand-mark .icon{ width:26px; height:26px; }
.brand-text{
  font-family:var(--font-serif); font-weight:700; font-size:1.28rem; color:var(--pine); letter-spacing:.01em;
}
.brand-accent{ color:var(--leaf); font-style:italic; }

.main-nav{ display:flex; align-items:center; gap:1.6rem; }
.nav-list{ display:flex; gap:.35rem; }
.nav-link{
  padding:.55rem .85rem; border-radius:999px; font-weight:500; color:var(--ink);
  position:relative; transition:color .2s ease, background .2s ease;
}
.nav-link:hover{ color:var(--leaf); background:rgba(47,122,78,.08); }
.nav-cta{ padding:.6rem 1.2rem; font-size:.95rem; }

.nav-toggle{ display:none; }
.nav-toggle .icon{ width:26px; height:26px; }
.nav-toggle .icon-close{ display:none; }
body.menu-open .nav-toggle .icon-menu{ display:none; }
body.menu-open .nav-toggle .icon-close{ display:block; }

/* ---------- sections ---------- */
.section{ padding:6.5rem 0; }
.section-head{ max-width:720px; margin-bottom:3rem; }
.section-head--light h2{ color:#f5f1e2; }
.section-intro{ color:var(--muted); font-size:1.13rem; margin-top:.9rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--leaf); margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--amber); border-radius:2px; }
.eyebrow--light{ color:#cfe06b; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:11.5rem 0 5.5rem;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(207,224,107,.28), transparent 60%),
    radial-gradient(700px 420px at -8% 30%, rgba(127,191,143,.22), transparent 60%),
    linear-gradient(180deg, #f6efdd 0%, #fbf7ec 55%, #f7f1e2 100%);
  overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:3.5rem; align-items:center; }
.accent-text{
  font-style:italic;
  background:linear-gradient(90deg, var(--leaf) 0%, #77a13b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lede{ font-size:1.15rem; color:var(--muted); max-width:57ch; margin-top:1.4rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.1rem; }
.hero-points{ display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; margin-top:2.4rem; }
.hero-points li{ display:inline-flex; align-items:center; gap:.5rem; font-weight:500; font-size:.98rem; }
.hero-points .icon-check{ color:var(--leaf); width:1.05em; height:1.05em; }

.hero-visual{ position:relative; }
.hero-art{
  width:100%; border-radius:36px;
  box-shadow:var(--shadow-lg);
  transform:rotate(.6deg);
}
.hero-chip{
  position:absolute; top:20px; right:-8px;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--white); color:var(--pine);
  padding:.68rem 1.1rem; border-radius:999px; font-size:.9rem; font-weight:600;
  box-shadow:var(--shadow-md);
}
.hero-chip .icon-check{ color:var(--leaf); }
.hero-card{
  position:absolute; left:-14px; bottom:30px;
  display:flex; align-items:center; gap:.8rem;
  background:var(--white); border-radius:18px; padding:.8rem 1.15rem .8rem .8rem;
  box-shadow:var(--shadow-lg); max-width:280px;
}
.hero-card-icon{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg, var(--forest), var(--leaf)); color:#eaf3dd;
}
.hero-card-icon .icon{ width:24px; height:24px; }
.hero-card-text{ display:flex; flex-direction:column; line-height:1.3; }
.hero-card-text strong{ color:var(--pine); font-size:.98rem; }
.hero-card-text small{ color:var(--muted); font-size:.82rem; }

.hero-scroll{
  position:absolute; left:50%; bottom:1.2rem; transform:translateX(-50%);
  color:var(--leaf); opacity:.85;
  animation:floaty 2.4s ease-in-out infinite;
}
.hero-scroll .icon{ width:22px; height:22px; }
@keyframes floaty{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ---------- services ---------- */
.services{ background:var(--white); }
.cards-grid{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fill, minmax(255px, 1fr));
}
.service-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:.9rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:#c9dcc0;
}
.service-icon{
  width:58px; height:58px; border-radius:17px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(127,191,143,.3), rgba(207,224,107,.35));
  color:var(--forest); border:1px solid rgba(47,122,78,.18);
}
.service-icon .icon{ width:30px; height:30px; }
.service-card p{ color:var(--muted); font-size:.99rem; }
.service-card--cta{
  background:linear-gradient(155deg, var(--forest) 0%, #17563a 100%);
  border-color:transparent; color:#eef3dd;
}
.service-card--cta h3{ color:#f5f1e2; }
.service-card--cta p{ color:rgba(238,243,221,.85); }
.service-card--cta .service-icon{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); color:var(--lime); }
.service-card--cta .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- about ---------- */
.about{
  background:
    radial-gradient(800px 480px at 100% 0%, rgba(207,224,107,.16), transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, #f4eedf 100%);
}
.about-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:4rem; align-items:center; }
.about-visual{ position:relative; }
.about-photo{
  width:100%; aspect-ratio:4/4.4; object-fit:cover;
  border-radius:32px; box-shadow:var(--shadow-lg);
}
.about-badge{
  position:absolute; left:18px; bottom:20px;
  display:flex; align-items:center; gap:.7rem;
  background:var(--white); border-radius:16px; padding:.75rem 1rem .75rem .75rem;
  box-shadow:var(--shadow-md);
}
.about-badge-mark{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--forest), var(--leaf)); color:#eaf3dd; flex:none;
}
.about-badge-mark .icon{ width:22px; height:22px; }
.about-badge-text{ display:flex; flex-direction:column; line-height:1.3; }
.about-badge-text strong{ color:var(--pine); font-size:.95rem; }
.about-badge-text small{ color:var(--muted); font-size:.8rem; }

.about-copy p{ color:var(--muted); margin-top:1.1rem; max-width:62ch; }
.about-copy p strong, .region-copy p strong{ color:var(--ink); }
.check-list{ margin-top:1.6rem; display:grid; gap:.75rem; }
.check-list li{ display:flex; align-items:flex-start; gap:.7rem; font-weight:500; }
.check-list .icon-check{ color:var(--leaf); margin-top:.28em; }
.about-quote{
  margin-top:2rem; padding:1.4rem 1.7rem;
  border-left:4px solid var(--amber); border-radius:0 var(--r-md) var(--r-md) 0;
  background:rgba(255,255,255,.75);
}
.about-quote p{ font-family:var(--font-serif); font-style:italic; font-size:1.15rem; color:var(--forest); margin:0; }
.about-quote cite{ font-style:normal; font-size:.88rem; color:var(--muted); margin-top:.5rem; display:block; }

/* ---------- process ---------- */
.process{
  background:
    radial-gradient(900px 500px at 110% -20%, rgba(207,224,107,.14), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(127,191,143,.12), transparent 60%),
    linear-gradient(150deg, #14402b 0%, #0c2a1b 100%);
}
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem; counter-reset:step; }
.step{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:1.9rem 1.6rem;
  transition:transform .25s ease, background .25s ease;
}
.step:hover{ transform:translateY(-5px); background:rgba(255,255,255,.1); }
.step-num{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-serif); font-weight:700; font-size:1.3rem;
  background:var(--lime); color:var(--pine); margin-bottom:1.1rem;
}
.step h3{ color:#f5f1e2; font-size:1.18rem; }
.step p{ color:rgba(240,245,232,.82); font-size:.97rem; margin-top:.65rem; }

/* ---------- gallery / realisaties ---------- */
.realisaties{ background:var(--white); }
.gallery-shell{ max-width:1080px; margin-inline:auto; }
.gallery-stage{
  position:relative; overflow:hidden; border-radius:32px;
  aspect-ratio:16 / 9; max-height:620px;
  box-shadow:var(--shadow-lg); background:var(--cream-2);
}
.gallery-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s ease, visibility .9s;
}
.gallery-slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.gallery-slide img{
  width:100%; height:100%; object-fit:cover;
}
.gallery-slide.is-active img{ animation:kenburns 7.5s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.08);} to{ transform:scale(1);} }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:3.2rem 2rem 1.6rem;
  background:linear-gradient(180deg, transparent, rgba(8,26,17,.82));
  color:#fff;
}
.gallery-tag{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pine); background:var(--lime); border-radius:999px; padding:.28rem .8rem; margin-bottom:.6rem;
}
.gallery-caption h3{ color:#fff; font-size:1.5rem; }
.gallery-caption p{ color:rgba(255,255,255,.85); font-size:.98rem; margin-top:.3rem; max-width:60ch; }

.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--pine);
  display:grid; place-items:center;
  box-shadow:var(--shadow-md);
  transition:background .2s ease, transform .2s ease;
}
.gallery-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.gallery-arrow .icon{ width:22px; height:22px; }
.gallery-prev{ left:18px; }
.gallery-prev .icon{ transform:rotate(180deg); }
.gallery-next{ right:18px; }

.gallery-dots{ position:absolute; z-index:6; left:50%; transform:translateX(-50%); bottom:1.35rem; display:flex; gap:.5rem; }
.gallery-dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.55); transition:background .25s ease, width .25s ease;
}
.gallery-dot.is-active{ background:var(--lime); width:26px; border-radius:999px; }
.gallery-dot:hover{ background:#fff; }

.gallery-thumbs{ display:flex; gap:.8rem; margin-top:1.1rem; overflow-x:auto; padding-bottom:.4rem; }
.gallery-thumb{
  position:relative; flex:none; width:118px; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  opacity:.62; transition:opacity .25s ease, transform .25s ease; padding:0;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumb:hover{ opacity:1; transform:translateY(-3px); }
.gallery-thumb.is-active{ opacity:1; outline:3px solid var(--leaf); outline-offset:2px; }

.gallery-credit{ margin-top:1rem; font-size:.82rem; color:var(--muted); }
.gallery-credit a{ color:var(--leaf); text-decoration:underline; }
.gallery-credit a:hover{ color:var(--forest); }

/* ---------- region ---------- */
.region{
  background:
    radial-gradient(760px 460px at -6% 108%, rgba(127,191,143,.18), transparent 55%),
    linear-gradient(180deg, #f4eddd 0%, var(--cream) 100%);
}
.region-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:center; }
.region-copy p{ color:var(--muted); margin-top:1.1rem; max-width:58ch; }
.towns{ display:flex; flex-wrap:wrap; gap:.55rem; margin:1.6rem 0 2rem; }
.towns li{
  font-size:.88rem; font-weight:600; color:var(--forest);
  background:#fff; border:1px solid #d5e3cc; border-radius:999px; padding:.42rem .95rem;
}
.map-card{
  border-radius:32px; overflow:hidden; box-shadow:var(--shadow-lg);
  border:6px solid #fff; background:#fff; line-height:0;
}
.map-card iframe{ width:100%; height:420px; border:0; }

/* ---------- faq ---------- */
.faq{ background:var(--white); }
.faq-inner{ max-width:860px; }
.faq-list{ display:grid; gap:.9rem; }
.faq-item{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-md);
  padding:0 1.6rem; overflow:hidden;
  transition:border-color .2s ease;
}
.faq-item[open]{ border-color:#c9dcc0; background:#fbf8ee; }
.faq-item summary{
  cursor:pointer; list-style:none; position:relative;
  padding:1.25rem 2.6rem 1.25rem 0;
  font-weight:600; font-size:1.06rem; color:var(--pine);
  display:flex; align-items:center; gap:.9rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--forest); color:var(--lime);
  font-size:1.3rem; font-weight:600; line-height:1;
  transition:transform .3s ease, background .3s ease, color .3s ease;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); background:var(--lime); color:var(--forest); }
.faq-item > p{ color:var(--muted); padding:0 0 1.4rem; max-width:70ch; }
.faq-item[open] summary{ padding-bottom:1rem; }

/* ---------- contact ---------- */
.contact{
  background:
    radial-gradient(900px 500px at 110% -20%, rgba(207,224,107,.13), transparent 60%),
    radial-gradient(700px 420px at -10% 115%, rgba(127,191,143,.12), transparent 60%),
    linear-gradient(150deg, #14402b 0%, #0b2919 100%);
}
.contact-grid{ display:grid; grid-template-columns:.94fr 1.06fr; gap:2.6rem; align-items:stretch; }
.contact-panel{
  color:#eef3dd; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg); padding:2.6rem 2.3rem;
  display:flex; flex-direction:column;
}
.contact-panel h2{ color:#f7f3e4; margin-bottom:1rem; }
.contact-panel-intro{ color:rgba(240,245,232,.85); margin-bottom:1.8rem; }
.contact-list{ display:grid; gap:1.15rem; }
.contact-list li{ display:flex; gap:1rem; align-items:flex-start; }
.contact-ico{
  width:46px; height:46px; border-radius:13px; flex:none;
  display:grid; place-items:center;
  background:rgba(207,224,107,.15); color:var(--lime);
}
.contact-ico .icon{ width:22px; height:22px; }
.contact-val{ line-height:1.55; }
.contact-val strong{ display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--lime); margin-bottom:.15rem; }
.contact-val a:hover{ text-decoration:underline; }
.contact-note{
  margin-top:auto; padding-top:1.6rem; display:flex; align-items:center; gap:.55rem;
  font-weight:600; font-size:.95rem; color:var(--pine);
  margin-top:2rem; align-self:flex-start;
  background:var(--lime); padding:.7rem 1.1rem; border-radius:999px;
}
.contact-note .icon-check{ width:1.1em; height:1.1em; }

.form-card{
  background:var(--white); border-radius:var(--r-lg);
  padding:2.6rem 2.4rem; box-shadow:var(--shadow-lg);
}
.quote-form{ display:grid; gap:1.15rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.field{ display:flex; flex-direction:column; gap:.42rem; }
.field label{ font-weight:600; font-size:.92rem; color:var(--pine); }
.field input,.field select,.field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#fdfbf5; padding:.85rem 1rem; font-size:1rem;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder,.field textarea::placeholder{ color:#9aa693; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--leaf); background:#fff;
  box-shadow:0 0 0 4px rgba(47,122,78,.14);
}
.field textarea{ resize:vertical; min-height:130px; }
.field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%232f7a4e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem; }
.field-check{ flex-direction:row; align-items:flex-start; gap:.7rem; }
.field-check input{ width:1.15rem; height:1.15rem; margin-top:.22rem; accent-color:var(--leaf); flex:none; }
.field-check label{ font-weight:500; font-size:.9rem; color:var(--muted); }
.privacy-note{ font-size:.82rem; color:#9aa693; margin-top:-.3rem; }
.form-hint{ font-size:.88rem; color:var(--muted); text-align:center; }
.form-success{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:rgba(127,191,143,.2); border:1.5px solid var(--leaf);
  color:var(--forest); font-weight:600; border-radius:var(--r-sm); padding:.95rem 1.1rem;
}
.form-success .icon-check{ width:1.15em; height:1.15em; }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#c4522a; box-shadow:0 0 0 4px rgba(196,82,42,.12); }
.field-error{ color:#c4522a; font-size:.83rem; font-weight:500; display:none; }
.field.invalid .field-error{ display:block; }
.btn:disabled{ cursor:not-allowed; }
.quote-form textarea{ line-height:1.5; }

/* ---------- footer ---------- */
.site-footer{ background:#0b2819; color:#b9cebd; }
.footer-grid{
  display:grid; grid-template-columns:1.9fr 1fr 1.25fr 1.35fr; gap:2.8rem;
  padding:4.2rem 0 3rem;
}
.brand--footer .brand-mark{ box-shadow:none; }
.brand--footer .brand-text{ color:#f7f3e4; }
.footer-brand p{ margin-top:1.1rem; font-size:.95rem; max-width:34ch; }
.footer-col h4{
  color:#f7f3e4; font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:1.1rem;
}
.footer-col ul{ display:grid; gap:.55rem; font-size:.96rem; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.footer-contact li{ display:flex; gap:.65rem; align-items:flex-start; }
.footer-contact .icon{ width:18px; height:18px; margin-top:.25rem; color:var(--lime); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); }
.footer-bottom-inner{
  display:flex; flex-wrap:wrap; gap:.4rem 2rem; justify-content:space-between;
  padding:1.4rem 0; font-size:.85rem; color:#8fae9b;
}
.footer-loc{ display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- back to top ---------- */
.to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--forest), var(--leaf)); color:#fff;
  display:grid; place-items:center;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.to-top .icon{ width:22px; height:22px; }
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(-3px); }

/* ---------- scroll reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .75s ease, transform .75s ease; }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; gap:3.6rem; }
  .hero{ padding-top:10rem; }
  .hero-visual{ max-width:640px; margin-inline:auto; }
  .steps{ grid-template-columns:repeat(2, 1fr); }
  .about-grid,.region-grid{ grid-template-columns:1fr; gap:3rem; }
  .about-visual{ max-width:560px; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:fixed; top:0; right:0; bottom:0; z-index:99;
    width:min(360px, 88vw); height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.4rem;
    background:linear-gradient(160deg, var(--cream), #fbf8ee);
    padding:6.4rem 2rem 2rem;
    box-shadow:-18px 0 50px rgba(18,58,40,.18);
    transform:translateX(105%); visibility:hidden;
    transition:transform .35s cubic-bezier(.6,0,.2,1), visibility .35s;
  }
  body.menu-open .main-nav{ transform:none; visibility:visible; }
  body.menu-open{ overflow:hidden; }
  .nav-list{ flex-direction:column; gap:.3rem; }
  .nav-link{ font-size:1.12rem; padding:.8rem 1rem; }
  .nav-cta{ margin-top:.6rem; justify-content:center; }
}

@media (max-width: 640px){
  .section{ padding:4.3rem 0; }
  .container{ width:calc(100% - 2rem); }
  .header-inner{ height:68px; }
  .brand-mark{ width:38px; height:38px; }
  .brand-text{ font-size:1.12rem; }
  .hero{ padding-top:8.2rem; padding-bottom:4.4rem; }
  .hero-chip{ top:12px; right:-4px; font-size:.8rem; padding:.55rem .85rem; }
  .hero-card{ left:6px; bottom:14px; padding:.6rem .9rem .6rem .6rem; }
  .hero-card-text strong{ font-size:.9rem; }
  .hero-card-icon{ width:40px; height:40px; }
  .hero-art{ border-radius:24px; }
  .steps{ grid-template-columns:1fr; }
  .cards-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .form-card,.contact-panel{ padding:1.7rem 1.3rem; }
  .gallery-stage{ aspect-ratio:4/3.6; border-radius:22px; }
  .gallery-caption{ padding:2.6rem 1.2rem 4.6rem; }
  .gallery-caption h3{ font-size:1.2rem; }
  .gallery-dots{ bottom:.9rem; }
  .gallery-thumbs{ gap:.6rem; }
  .gallery-thumb{ width:96px; }
  .gallery-arrow{ width:42px; height:42px; }
  .gallery-prev{ left:8px; }
  .gallery-next{ right:8px; }
  .map-card iframe{ height:300px; }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; padding:3.2rem 0 2.2rem; }
  .footer-bottom-inner{ flex-direction:column; gap:.3rem; }
  .to-top{ width:46px; height:46px; right:1rem; bottom:1rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}