@font-face {
  font-family: 'Westonia';
  src: url('../fonts/Westonia-mL7Mx.ttf') format('truetype'),
       url('../fonts/Westonia-7BGMl.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Raleway', sans-serif; background: #FAF5EC; color: #1A1209; }

/* ── Grain overlay ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .5;
}

section, header, footer, nav { position: relative; z-index: 1; }

/* ── Typography ── */
.font-display { font-family: 'Libre Baskerville', serif; }
.font-brand { font-family: 'Westonia', cursive; }

/* ── Gold line accent ── */
.gold-line::after {
  content: '';
  display: block; width: 60px; height: 2px;
  background: linear-gradient(90deg, #C9A84C, #E2C97E);
  margin-top: 14px;
}
.gold-line-center::after { margin-left: auto; margin-right: auto; }

/* ── WhatsApp button ── */
.btn-wpp {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff; font-weight: 600; letter-spacing: .04em;
  border-radius: 4px; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(37,211,102,.35);
}
.btn-wpp:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.45); }

/* ── Nav ── */
.nav-link { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; transition: color .2s; }
.nav-link:hover { color: #C9A84C; }

/* ── Hero ── */
.hero-bg {
  background:
    linear-gradient(160deg, rgba(26,18,9,.82) 0%, rgba(92,61,30,.6) 60%, rgba(26,18,9,.9) 100%),
    url('https://images.unsplash.com/photo-1581858726788-75bc0f6a952d?w=1600&q=80') center/cover no-repeat;
}
.hero-tag {
  display: inline-block; padding: 4px 14px;
  border: 1px solid #C9A84C; color: #E2C97E;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
}

/* ── Section title ── */
.sec-title { font-family: 'Libre Baskerville', serif; line-height: 1.15; }

/* ── Service card ── */
.svc-card {
  border: 1px solid rgba(201,168,76,.25); background: rgba(255,250,240,.55);
  backdrop-filter: blur(4px); transition: border-color .25s, transform .25s, box-shadow .25s;
}
.svc-card:hover {
  border-color: #C9A84C; transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(139,94,60,.15);
}

/* ── Before/After ── */
.ba-wrap { position: relative; overflow: hidden; cursor: ew-resize; user-select: none; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); transition: none; }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; background: #C9A84C; transform: translateX(-50%); z-index: 10;
}
.ba-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #C9A84C; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; z-index: 11;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* ── Steps ── */
.step-num {
  font-family: 'Libre Baskerville', serif; font-size: 3.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px #C9A84C;
}

/* ── Differentials ── */
.diff-card {
  border-top: 2px solid #C9A84C;
  background: linear-gradient(160deg, rgba(255,250,240,.8), rgba(244,233,200,.4));
  transition: transform .25s, box-shadow .25s;
}
.diff-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(139,94,60,.12); }

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid rgba(201,168,76,.3); }
.faq-question { cursor: pointer; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s ease; }
.faq-answer.open { max-height: 300px; }

/* ── Footer ── */
footer { background: #1A1209; }

/* ── Floating WPP ── */
.float-wpp {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.5);
  transition: transform .2s, box-shadow .2s;
}
.float-wpp:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(37,211,102,.6); }

/* ── Animations ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ── Region badge ── */
.region-badge { border: 1px solid rgba(201,168,76,.5); padding: 10px 22px; display: inline-block; }

/* ── Divider ornament ── */
.orn-divider {
  display: flex; align-items: center; gap: 14px;
  color: #C9A84C; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
}
.orn-divider::before, .orn-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, #C9A84C, transparent);
}

/* logo placeholder */
.logo-mark {
  font-family: 'Westonia', cursive;
  font-size: 1.7rem; font-weight: normal; letter-spacing: .04em;
  color: #C9A84C;
}
.logo-mark span { color: #FAF5EC; }

@media (max-width: 640px) {
  .hero-title { font-size: 2.4rem !important; }
}