/* FM Martini — strict Italian-luxury palette: champagne/antique gold,
   ivory, deep charcoal, black. No blue, no silver, no generic accents. */
:root {
  --black: #0d0c0a;
  --charcoal: #151412;
  --white: #ffffff;
  --ivory: #f6f1e8;
  --gold: #c9a54b;
  --gold-light: #e6d19a;
  --gold-antique: #a88438;
  --bg: var(--ivory);
  --surface: #ffffff;
  --border: rgba(201, 165, 75, 0.22);
  --text: var(--black);
  --text-muted: #6b5f44;
  --font-serif: "Playfair Display", "Georgia", serif;
  --max-width: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- ambient moving 3D background (behind the whole page,
   including the hero - every section's background is translucent so
   this one canvas shows through everywhere, rather than a separate
   3D layer per section) ---------- */

#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ---------- promo banner ---------- */

.promo-banner { width: 100%; background: var(--black); }
.promo-banner img { width: 100%; height: auto; display: block; object-fit: contain; }

/* ---------- header - transparent over the hero, solid once scrolled ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.site-header.is-scrolled {
  background: rgba(13, 12, 10, 0.86);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
}
.logo-mark img { height: 34px; width: auto; }
.logo-mark span { font-size: 0.92rem; letter-spacing: 0.08em; font-weight: 600; color: var(--white); }
.logo-mark strong { color: var(--gold-light); font-weight: 800; }

.desktop-nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  margin-left: 30px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.desktop-nav a:hover { color: var(--gold-light); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold-light);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  background: rgba(13, 12, 10, 0.97);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.mobile-nav.is-open { max-height: 320px; }
.mobile-nav a {
  color: var(--ivory);
  text-decoration: none;
  padding: 16px 24px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-top: 1px solid rgba(201, 165, 75, 0.15);
}
.mobile-nav a:hover { color: var(--gold-light); }

@media (max-width: 760px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .mobile-nav { display: flex; }
}

/* ---------- hero: full-bleed photo, cinematic reveal, pure CSS (no JS required) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  z-index: 2;
  overflow: hidden;
  background: var(--black);
}

/* Taller than its container with a negative top offset, on purpose -
   gives initHeroParallax() (scene.js) room to translateY the whole
   wrapper on scroll without ever exposing an empty gap at the top of
   the hero (the JS keeps its max offset safely under this buffer). */
.hero-media { position: absolute; top: -10%; left: 0; right: 0; height: 120%; z-index: 0; }
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  display: block;
  transform: scale(1.06);
  animation: heroZoom 2.6s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(13, 12, 10, 0.82) 0%, rgba(13, 12, 10, 0.55) 45%, rgba(13, 12, 10, 0.25) 100%),
    linear-gradient(0deg, rgba(13, 12, 10, 0.55) 0%, transparent 40%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 640px;
  padding: 120px 24px 80px;
}

.hero-crest {
  height: 54px;
  width: auto;
  margin-bottom: 22px;
  opacity: 0;
  filter: drop-shadow(0 0 18px rgba(201, 165, 75, 0.45));
  animation: heroFadeUp 0.9s ease-out forwards;
  animation-delay: 0.3s;
}

.hero-headline {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.15;
  color: var(--white);
}
.hero-headline-mask {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: heroMaskReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.65s;
}
@keyframes heroMaskReveal { to { clip-path: inset(0 0 0 0); } }

.hero-subtitle {
  margin: 0 0 18px;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-light);
  opacity: 0;
  animation: heroFadeUp 0.9s ease-out forwards;
  animation-delay: 1.15s;
}

.hero-paragraph {
  margin: 0 0 34px;
  max-width: 520px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(246, 241, 232, 0.82);
  opacity: 0;
  animation: heroFadeUp 0.9s ease-out forwards;
  animation-delay: 1.35s;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp 0.9s ease-out forwards;
  animation-delay: 1.55s;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none; transform: scale(1); }
  .hero-headline-mask { animation: none; clip-path: inset(0 0 0 0); }
  .hero-crest, .hero-subtitle, .hero-paragraph, .hero-ctas { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .hero-content { padding: 110px 20px 100px; max-width: 100%; }
  .hero-image { object-position: center 60%; }
}

.btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--black);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(201, 165, 75, 0.45); }
.btn-secondary {
  border: 1px solid rgba(230, 209, 154, 0.6);
  color: var(--ivory);
}
.btn-secondary:hover { transform: translateY(-2px); background: rgba(230, 209, 154, 0.1); }

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  color: rgba(246, 241, 232, 0.75);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: heroFadeUp 0.9s ease-out forwards;
  animation-delay: 1.8s;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-indicator { animation: none; opacity: 1; }
}
.scroll-indicator-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ---------- sections + scroll reveal ---------- */

.section {
  position: relative;
  z-index: 2;
  padding: 100px 20px;
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 48px;
  color: var(--black);
}

/* ---------- Rreth Nesh (About) ---------- */

.about-section { background: rgba(255, 255, 255, 0.88); }

.about-container { text-align: center; }
.about-eyebrow { text-align: center; }

.about-headline {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--black);
  margin: 0 0 16px;
}

.about-subheadline {
  max-width: 620px;
  margin: 0 auto 56px;
  color: var(--text-muted);
  font-size: 1.1rem;
}

.about-visual {
  max-width: 1000px;
  margin: 0 auto 56px;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(201, 162, 39, 0.16);
  border: 1px solid var(--border);
}
.about-photo {
  position: relative;
  flex: 1 1 50%;
  margin: 0;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.03);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease;
}
.about-photo:hover img { transform: scale(1.06); filter: saturate(1.02) contrast(1.05); }
.about-photo figcaption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 6px 16px;
  background: rgba(12, 10, 6, 0.72);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 2px;
}
.about-visual-divider {
  flex: 0 0 3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
@media (max-width: 640px) {
  .about-visual { flex-direction: column; }
  .about-visual-divider { flex: 0 0 3px; width: 100%; }
}

.about-body {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  color: var(--charcoal);
  font-size: 1.08rem;
  line-height: 1.85;
}
.about-body p { margin: 0 0 20px; }
.about-body p:last-child { margin-bottom: 0; }

/* ---------- Vlerat Tona / Shërbimet (shared feature grid) ---------- */

.why-us-section { background: rgba(248, 243, 232, 0.85); overflow: hidden; }

.values-container { max-width: 880px; }

.values-headline {
  text-align: center;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 0 28px;
}

.values-intro {
  max-width: 580px;
  margin: 0 auto 72px;
  text-align: center;
  color: var(--text-muted);
}
.values-intro p { margin: 0 0 14px; font-size: 1.05rem; }
.values-intro p:last-child { margin-bottom: 0; }

.values-list {
  display: flex;
  flex-direction: column;
}

.value-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  gap: 32px;
  padding: 48px 0;
  border-top: 1px solid var(--border);
  position: relative;
}
.value-row:last-child { border-bottom: 1px solid var(--border); }
.value-row { transition: background 0.4s ease; }
.value-row:hover { background: rgba(201, 162, 39, 0.05); }

.value-number {
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(160deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(201, 162, 39, 0.25));
  display: inline-block;
  transition: transform 0.4s ease;
}
.value-row:hover .value-number { transform: scale(1.08); }

.value-copy h3 {
  margin: 4px 0 8px;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: 0.04em;
  color: var(--black);
}
.value-kicker {
  margin: 0 0 14px;
  color: var(--gold);
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
}
.value-text {
  margin: 0;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.8;
}

@media (max-width: 640px) {
  .value-row { grid-template-columns: 1fr; gap: 8px; padding: 36px 0; }
  .value-number { font-size: 3.4rem; }
}

.values-closing {
  margin: 72px 0 0;
  text-align: center;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--black);
}

/* per-item staggered emergence for the value rows - a stronger reveal
   than the generic .reveal fade, closer to the requested "each value
   emerges elegantly" effect, still pure CSS/IntersectionObserver -
   no scroll-pinning, which proved fragile/heavy in earlier attempts. */
.value-row.reveal {
  opacity: 0;
  transform: translateY(50px) scale(0.98);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.value-row.reveal .value-number {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 1.1s ease 0.15s, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.value-row.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.value-row.reveal.is-visible .value-number { opacity: 1; transform: scale(1); }
.services-section { background: rgba(255, 255, 255, 0.88); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 16px 30px rgba(201, 162, 39, 0.16);
}
.feature-card h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--black); }
.feature-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Kontakt - deliberately dark, the one section that
   breaks from the light page to feel like a premium closing
   statement, echoing the intro/footer's dark treatment ---------- */

.contact-section {
  background: radial-gradient(circle at 50% 20%, #171208 0%, var(--black) 70%);
  padding-top: 120px;
  padding-bottom: 120px;
}

.contact-dark-container { max-width: 840px; text-align: center; }

.contact-eyebrow-dark { color: var(--gold-light); }

.contact-title-dark {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--white);
  margin: 0 0 64px;
}

.contact-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}

.contact-person-card {
  padding: 28px 20px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.06), rgba(255, 255, 255, 0.015));
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.contact-person-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(201, 162, 39, 0.18);
}

.contact-person-name {
  margin: 0 0 10px;
  color: #c9c3b4;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.contact-person-phone {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-light);
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.contact-person-phone:hover { color: var(--white); text-shadow: 0 0 16px rgba(201, 162, 39, 0.5); }

.contact-divider-gold {
  width: 80px;
  height: 1px;
  margin: 0 auto 48px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.contact-details-row {
  display: flex;
  justify-content: center;
  gap: 72px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.contact-detail { max-width: 340px; }

.contact-detail-label {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.contact-detail-value {
  display: block;
  color: var(--ivory);
  font-size: 1.02rem;
  text-decoration: none;
  line-height: 1.6;
}
a.contact-detail-value:hover { color: var(--gold-light); }

.contact-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.25s ease;
}
.whatsapp-link:hover { transform: translateY(-2px); }

.directions-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  text-decoration: none;
  border-radius: 2px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.25s ease, background 0.25s ease;
}
.directions-link:hover { transform: translateY(-2px); background: rgba(201, 162, 39, 0.12); }

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  padding: 32px 20px 24px;
  text-align: center;
  background: var(--black);
  color: #c9c3b4;
  font-size: 0.8rem;
}
.footer-logo { height: 30px; opacity: 0.9; margin-bottom: 10px; filter: drop-shadow(0 0 12px rgba(201, 162, 39, 0.3)); }

.footer-credit {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 162, 39, 0.2);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-indicator-line { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}