/* ── Reset & base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
body { background: #fcf9f8; color: #1b1b1c; overflow-x: hidden; }

/* ── Icons ──────────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Scroll reveal ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1),
              transform .65s cubic-bezier(.22, 1, .36, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Mobile nav ─────────────────────────────────────── */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
#mobile-menu.open { max-height: 400px; }

/* ── FAQ accordion ──────────────────────────────────── */
details > div { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
details[open] > div { max-height: 400px; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .icon-chevron { transform: rotate(180deg); }
.icon-chevron { transition: transform .3s ease; }

/* ── Gallery filters ────────────────────────────────── */
.active-filter   { background-color: #0c2a19; color: #ffffff; }
.inactive-filter { background-color: #f0eded; color: #424843; }
.inactive-filter:hover { background-color: #eae7e7; }
.gallery-item { transition: opacity .3s ease, transform .3s ease; }

/* ── Before/After slider ────────────────────────────── */
.ba-slider { --pos: 50%; position: relative; }
.ba-img    { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 3px; background: white; cursor: ew-resize; z-index: 10;
  transform: translateX(-50%);
}

/* ── Contact form ───────────────────────────────────── */
.field {
  width: 100%; background: transparent;
  border: 0; border-bottom: 2px solid #c2c8c1;
  padding: 10px 4px; outline: none;
  font-family: 'Inter', sans-serif; font-size: 16px; color: #1b1b1c;
  transition: border-color .2s;
}
.field:focus { border-bottom-color: #0c2a19; }
.field::placeholder { color: #727972; }