/* Centralized custom styles for Henrik Group */

/* Base typography */
body {
  font-family: 'Inter', sans-serif;
  background-color: #000;
  color: #f5f5f7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reveal / hover effects */
.reveal-container { position: relative; overflow: hidden; }
.reveal-bw { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(100%); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; }
.reveal-color { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; }
.reveal-container:hover .reveal-bw { opacity: 0; }
.reveal-on-scroll { opacity: 0; transform: translateY(30px) scale(0.98); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-on-scroll.active { opacity: 1; transform: translateY(0) scale(1); }

/* Specific reveal backgrounds (moved from inline styles) */
.hero-color { background-image: url('../images/hero.png'); }
.hero-bw   { background-image: url('../images/hero1.png'); }
.service1-color { background-image: url('../images/1.jpg'); }
.service1-bw   { background-image: url('../images/2.jpg'); }

/* Gallery */
.gallery-item-container { overflow: hidden; border-radius: 18px; }
.gallery-item { transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease; filter: grayscale(100%); }
.gallery-item-container:hover .gallery-item { transform: scale(1.05); filter: grayscale(0%); }

/* Navbar */
.glass-nav { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.1); }

/* Gradient text */
.text-gradient-gold { background: linear-gradient(to right, #A38F70, #f5f5f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Voor-Na gallery */
.gallery-item { transition: transform 0.6s, filter 0.4s; filter: grayscale(60%); }
.gallery-item:hover { transform: scale(1.02); filter: grayscale(0%); }

/* Modal backdrop */
.modal-backdrop { background: rgba(0,0,0,0.85); }

/* Contact form */
.decor-blur { position: absolute; right: -120px; top: -80px; width: 420px; height: 420px; background: radial-gradient(circle at 20% 20%, rgba(163,143,112,0.08), transparent 30%); filter: blur(80px); pointer-events: none; }
.contact-form .input-float { position: relative; }
.contact-form .input-float input, .contact-form .input-float textarea, .contact-form .input-float select { background: transparent; border: 1px solid rgba(255,255,255,0.06); padding: 1rem; border-radius: 12px; color: #f5f5f7; transition: box-shadow .25s, transform .18s, border-color .18s; width: 100%; }
.contact-form .input-float input:focus, .contact-form .input-float textarea:focus, .contact-form .input-float select:focus { outline: none; box-shadow: 0 8px 30px rgba(163,143,112,0.08), 0 0 0 4px rgba(163,143,112,0.06); border-color: rgba(163,143,112,0.8); transform: translateY(-1px); }
.contact-form .input-float label { position: absolute; left: 1rem; top: 1rem; pointer-events: none; color: #9ca3af; transition: all .18s ease; background: transparent; padding: 0 6px; }
.contact-form .input-float input:not(:placeholder-shown) + label, .contact-form .input-float textarea:not(:placeholder-shown) + label, .contact-form .input-float select:not(:placeholder-shown) + label, .contact-form .input-float input:focus + label, .contact-form .input-float textarea:focus + label { transform: translateY(-1.4rem) scale(0.9); color: #A38F70; }
.btn-send { background: linear-gradient(90deg,#A38F70,#f5f5f7); color: #000; font-weight: 600; padding: .9rem 1.25rem; border-radius: 999px; transition: transform .18s ease, box-shadow .18s; display: inline-flex; gap: .6rem; align-items: center; }
.btn-send:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(163,143,112,0.12); }
.contact-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); transition: transform .25s ease, box-shadow .25s; }
.contact-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.submit-success { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); z-index: 40; opacity: 0; transform: scale(.98); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.submit-success.active { opacity: 1; transform: scale(1); pointer-events: auto; }
.checkmark { stroke-dasharray: 100; stroke-dashoffset: 100; stroke-width: 6; stroke: #A38F70; fill: none; animation: dash .7s ease forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }

/* Before/After slider (projects) */
.ba-wrapper { position: relative; overflow: hidden; border-radius: 18px; }
.ba-wrapper img { display:block; width:100%; height:100%; object-fit:cover; }
.ba-after { position:absolute; left:0; top:0; bottom:0; width:50%; overflow:hidden; }
.ba-after img { position: absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.ba-handle { position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(255,255,255,0.6); transform:translateX(-1px); }
.range { width:100%; }

/* Services & Carousel */
.carousel { position: relative; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.02); transition: opacity .8s ease, transform .8s ease; display:flex; align-items:flex-end; }
.slide.active { opacity: 1; transform: scale(1); }
.slide-caption { padding: 48px 48px 92px 48px; background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 40%); color: #fff; z-index: 10; }
.use-handwriting .slide-caption h3{ font-size: clamp(20px, 2.5vw, 34px); margin-bottom: 6px; font-family: 'Dancing Script', cursive; letter-spacing: 0.4px; line-height: 1.02; text-shadow: 0 2px 10px rgba(0,0,0,0.45); }

/* Handwriting applied only inside pages that opt in with .use-handwriting */
.use-handwriting h1, .use-handwriting h2, .use-handwriting h3 { font-family: 'Dancing Script', cursive; letter-spacing: 0.4px; line-height: 1.02; text-shadow: 0 2px 8px rgba(0,0,0,0.35); }

@media (max-width: 640px) {
    .use-handwriting h1, .use-handwriting h2, .use-handwriting h3 { font-size: 1.6rem; }
}

/* Carousel nav buttons */
.nav-btn { background: rgba(0,0,0,0.45); color: #fff; width:44px; height:44px; border-radius:9999px; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 20px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06); transition: transform .15s ease, background .15s ease; }
.nav-btn:hover { transform: scale(1.08); background: rgba(255,255,255,0.06); }
.nav-btn i { font-size: 14px; }

@media (max-width: 640px) {
    .slide-caption { padding-bottom: 78px; }
    .nav-btn { width:48px; height:48px; }
}

.service-card img { transition: transform .6s ease; }
.service-card:hover img { transform: scale(1.05) translateY(-6px); }

/* Modal BA handle safe area */
.ba-handle { width: 6px; max-width: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6)); box-shadow: 0 6px 20px rgba(0,0,0,0.45); touch-action: none; }

/* Touch-specific tweaks */
.ba-wrapper { touch-action: pan-y; -webkit-user-select: none; user-select: none; }

@media (max-width: 640px) {
    .carousel { height: 320px; }
    .slide-caption { padding: 20px; }
    .ba-handle { width: 12px; }
    .ba-wrapper { min-height: 160px; }
}

/* Scrollbar tweaks */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }










/* === FORM CONTAINER (Glass Card) === */
.bg-apple-gray {
  background: rgba(28, 28, 30, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* === FLOATING INPUT WRAPPER === */
.input-float {
  position: relative;
}

/* === INPUT / SELECT / TEXTAREA === */
.input-float input,
.input-float select,
.input-float textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 16px 14px;
  color: #ffffff;
  font-size: 15px;
  transition: all 0.25s ease;
}

/* === HIDE PLACEHOLDER === */
.input-float input::placeholder,
.input-float textarea::placeholder {
  color: transparent;
}

/* === LABEL === */
.input-float label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transition: all 0.2s ease;
  background: rgba(28, 28, 30, 0.85);
  padding: 0 6px;
  border-radius: 6px;
}

/* === FLOAT LABEL WHEN ACTIVE === */
.input-float input:focus + label,
.input-float input:not(:placeholder-shown) + label,
.input-float textarea:focus + label,
.input-float textarea:not(:placeholder-shown) + label,
.input-float select:focus + label,
.input-float select:not([value=""]) + label {
  top: -7px;
  font-size: 12px;
  color: #c8a96a;
}

/* === FOCUS EFFECT === */
.input-float input:focus,
.input-float textarea:focus,
.input-float select:focus {
  outline: none;
  border-color: #c8a96a;
  box-shadow:
    0 0 0 2px rgba(200, 169, 106, 0.35),
    inset 0 0 10px rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.1);
}

/* === SELECT CUSTOM ARROW === */
.input-float select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* === TEXTAREA === */
.input-float textarea {
  min-height: 140px;
  resize: vertical;
}

/* === SEND BUTTON (MATCH GLASS STYLE) === */
.btn-send {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c8a96a, #e3c88f);
  color: #000;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(200, 169, 106, 0.45);
}
select option {
  background-color: #1c1c1e;
  color: #ffffff;
}