:root {
  --bg:      #F8F6F2;
  --brown:   #4A3A2A;
  --sage:    #7B8A73;
  --gold:    #B8945B;
  --gold-lt: #D4B682;
  --text:    #5A4A3A;
  --muted:   #9A8E82;
  --line:    rgba(74,58,42,0.08);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Animations ── */
@keyframes kenburns {
  0%   { transform:scale(1.0); }
  100% { transform:scale(1.12); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes lineGrow {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}

.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
}
.reveal-d1 { transition-delay:0.15s; }
.reveal-d2 { transition-delay:0.30s; }
.reveal-d3 { transition-delay:0.45s; }


/* ── Badge ── */
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  border:1px solid rgba(184,148,91,0.4);
  border-radius:100px;
  padding:0.45rem 1.4rem 0.45rem 1.1rem;
  font-size:0.7rem;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold-lt);
  margin-bottom:1.8rem;
  opacity:0;
  animation:fadeUp 1s 0.4s ease forwards;
  backdrop-filter:blur(8px);
  background:rgba(184,148,91,0.08);
}
.badge-icon {
  flex-shrink:0;
  opacity:0.7;
}

/* ── Hero note ── */
.hero-note {
  font-size:0.78rem;
  font-weight:300;
  color:rgba(253,252,246,0.4);
  letter-spacing:0.03em;
  font-style:italic;
}

/* ── HERO ── */
.hero {
  position:relative;
  height:100svh;
  height:100dvh;
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-bg {
  position:absolute;
  inset:0;
  background-image:url('../images/hero.webp');
  background-size:cover;
  background-position:center 40%;
  animation:kenburns 25s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(42,34,24,0.45) 0%,
    rgba(42,34,24,0.55) 50%,
    rgba(42,34,24,0.7) 100%
  );
}
.hero-content {
  position:relative;
  z-index:2;
  text-align:center;
  padding:2rem;
  max-width:680px;
}
.hero-logo {
  width:72px;
  height:auto;
  margin:0 auto 2rem;
  drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  opacity:0;
  animation:fadeIn 1.2s 0.3s ease forwards;
}
.hero-rule {
  width:48px;
  height:1px;
  background:var(--gold);
  margin:0 auto 2.5rem;
  transform-origin:center;
  animation:lineGrow 1s 0.8s ease forwards;
  opacity:0.7;
}
.hero-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.4rem,6vw,4rem);
  font-weight:300;
  color:#FDFCF6;
  letter-spacing:0.04em;
  line-height:1.15;
  margin-bottom:1.8rem;
  opacity:0;
  animation:fadeUp 1s 0.5s ease forwards;
}
.hero-sub {
  font-size:clamp(0.88rem,1.8vw,1.02rem);
  font-weight:300;
  color:rgba(253,252,246,0.72);
  line-height:1.75;
  letter-spacing:0.01em;
  max-width:520px;
  margin:0 auto 2.5rem;
  opacity:0;
  animation:fadeUp 1s 0.7s ease forwards;
}
.hero-actions {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  opacity:0;
  animation:fadeUp 1s 0.9s ease forwards;
}
.btn-gold {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:var(--gold);
  color:#FDFCF6;
  font-family:'Inter',sans-serif;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  text-decoration:none;
  padding:0.85rem 2.8rem;
  border:none;
  cursor:pointer;
  transition:background 0.3s, transform 0.2s, box-shadow 0.3s;
}
.btn-gold:hover {
  background:var(--gold-lt);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(184,148,91,0.35);
}
.hero-phone {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:rgba(253,252,246,0.65);
  text-decoration:none;
  font-size:0.95rem;
  font-weight:300;
  letter-spacing:0.06em;
  transition:color 0.3s;
}
.hero-phone:hover { color:var(--gold-lt); }
.hero-phone svg {
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:1.5;
  fill:none;
}

/* ── Divider ── */
.section-divider {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3.5rem 0;
}
.divider-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
  opacity:0.4;
}
.divider-line {
  width:40px;
  height:1px;
  background:var(--gold);
  opacity:0.2;
  margin:0 1rem;
}

/* ── Preview Cards ── */
.cards-section {
  padding:0 2rem 6rem;
  max-width:1100px;
  margin:0 auto;
}
.cards-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.card {
  background:transparent;
  border:1px solid var(--line);
  padding:2.8rem 2.2rem;
  position:relative;
  transition:transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.card:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(74,58,42,0.06);
  border-color:rgba(184,148,91,0.25);
}
.card-icon {
  font-size:1.6rem;
  margin-bottom:1.4rem;
  display:block;
  transition:transform 0.4s ease;
}
.card:hover .card-icon { transform:scale(1.1); }
.card-title {
  font-family:'Cormorant Garamond',serif;
  font-size:1.35rem;
  font-weight:400;
  color:var(--brown);
  letter-spacing:0.02em;
  margin-bottom:0.9rem;
}
.card-text {
  font-size:0.88rem;
  font-weight:300;
  color:var(--muted);
  line-height:1.7;
}
.card-line {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.5s cubic-bezier(.22,1,.36,1);
}
.card:hover .card-line { transform:scaleX(1); }

/* ── Footer ── */
footer {
  border-top:1px solid var(--line);
  padding:3rem 2rem;
  text-align:center;
}
.footer-inner {
  max-width:600px;
  margin:0 auto;
}
.footer-name {
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;
  font-weight:400;
  color:var(--brown);
  letter-spacing:0.03em;
  margin-bottom:0.6rem;
}
.footer-address {
  font-size:0.78rem;
  font-weight:300;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:1rem;
}
.footer-phone {
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-size:0.82rem;
  font-weight:400;
  color:var(--gold);
  text-decoration:none;
  margin-bottom:1.8rem;
  transition:color 0.3s;
}
.footer-phone:hover { color:var(--gold-lt); }
.footer-phone svg {
  width:14px; height:14px;
  stroke:currentColor; stroke-width:1.5; fill:none;
}
.footer-legal {
  display:flex;
  justify-content:center;
  gap:2rem;
}
.footer-legal span {
  font-size:0.68rem;
  font-weight:300;
  color:rgba(154,142,130,0.4);
  letter-spacing:0.05em;
  cursor:default;
  user-select:none;
}

/* ── Responsive ── */
@media (max-width:768px) {
  .cards-grid { grid-template-columns:1fr; gap:1.4rem; }
  .card { padding:2.2rem 1.8rem; }
  .hero-content { padding:2rem 1.5rem; max-width:100%; }
  .section-divider { padding:2.5rem 0; }
  .cards-section { padding:0 1.5rem 4rem; }
  .hero-title { font-size:2.2rem; }
  .hero-sub { font-size:0.88rem; line-height:1.7; }
  .hero-badge { font-size:0.62rem; padding:0.4rem 1.1rem; }
}
@media (max-width:480px) {
  .hero-logo { width:56px; margin-bottom:1.5rem; }
  .hero-rule { margin-bottom:2rem; }
  .hero-sub { margin-bottom:2rem; }
}



/* ══════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   ══════════════════════════════════════════════════ */

/* ── Mobile: Subtler Ken Burns (1-2% zoom, 35s) ── */
@media (max-width:768px) {
  @keyframes kenburns {
    0%   { transform:scale(1.0); }
    100% { transform:scale(1.02); }
  }
  .hero-bg {
    animation-duration:35s;
    background-position:center 30%;
  }
}

/* ── Mobile: Softer hero animations ── */
@media (max-width:768px) {
  @keyframes fadeUp {
    from { opacity:0; transform:translate3d(0,8px,0); }
    to   { opacity:1; transform:translate3d(0,0,0); }
  }
  @keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
  }

  .hero-logo {
    animation:fadeIn 0.6s 0.2s cubic-bezier(.25,.46,.45,.94) forwards;
  }
  .hero-rule {
    animation:lineGrow 0.7s 0.35s cubic-bezier(.25,.46,.45,.94) forwards;
  }
  .hero-title {
    animation:fadeUp 0.6s 0.3s cubic-bezier(.25,.46,.45,.94) forwards;
  }
  .hero-badge {
    animation:fadeUp 0.55s 0.25s cubic-bezier(.25,.46,.45,.94) forwards;
  }
  .hero-sub {
    animation:fadeUp 0.6s 0.4s cubic-bezier(.25,.46,.45,.94) forwards;
  }
  .hero-actions {
    animation:fadeUp 0.6s 0.5s cubic-bezier(.25,.46,.45,.94) forwards;
  }
}

/* ── Mobile: Gentler scroll reveals ── */
@media (max-width:768px) {
  .reveal {
    transform:translate3d(0,10px,0);
    transition:opacity 0.65s cubic-bezier(.25,.46,.45,.94),
               transform 0.65s cubic-bezier(.25,.46,.45,.94);
  }
  .reveal-d1 { transition-delay:0.08s; }
  .reveal-d2 { transition-delay:0.16s; }
  .reveal-d3 { transition-delay:0.24s; }
}

/* ── Mobile: Disable hover effects ── */
@media (hover:none) {
  .card:hover {
    transform:none;
    box-shadow:none;
    border-color:var(--line);
  }
  .card:hover .card-icon { transform:none; }
  .card:hover .card-line { transform:scaleX(0); }
  .btn-gold:hover {
    transform:none;
    box-shadow:none;
  }
  .hero-phone:hover { color:rgba(253,252,246,0.65); }
}

/* ── Mobile: Card active state (tap feedback) ── */
@media (hover:none) {
  .card:active {
    border-color:rgba(184,148,91,0.2);
    transition:border-color 0.15s ease;
  }
}

/* ── Force GPU acceleration ── */
.hero-bg,
.hero-logo,
.hero-title,
.hero-sub,
.hero-actions,
.hero-badge,
.hero-rule,
.card,
.card-icon,
.card-line,
.reveal {
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce) {
  .hero-bg { animation:none; }
  .hero-logo,.hero-title,.hero-sub,.hero-actions { animation:none; opacity:1; transform:none; }
  .reveal { transition:none; opacity:1; transform:none; }
  .card { transition:none; }
}