/* ============ FOOTER SECTION (v2) ============
   Empower cream card over a scene strip + Meridian engraved horizon.
   Palette: warm cream / engraved ink-green. Vanilla CSS,
   transform/opacity transitions only. */

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Manrope",system-ui,sans-serif;
  background:#171009; /* page ground under the scene strip (standalone preview) */
  color:#1d1710;
  overflow-x:hidden;
}

.footer{
  position:relative; padding-bottom:26px;
  background:#0B0F09;
}

/* --- scene backdrop: the photo fills the whole footer, dimming
       toward the bottom so the card floats over the meadow --- */
.footer-scene{
  position:absolute; inset:0;
  overflow:hidden;
}
.footer-scene img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  display:block;
}
.footer-scene-fade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,8,.10) 0%, rgba(10,14,8,.26) 42%, rgba(8,11,7,.66) 78%, rgba(8,11,7,.82) 100%);
}

/* --- stack over the scene (Empower overlap) --- */
.footer-stack{
  position:relative; z-index:2;
  max-width:1180px; margin:clamp(150px,23vw,250px) auto 0; padding:0 24px;
}

/* --- Meridian horizon band: flows straight into the card --- */
.meridian{
  position:relative;
  height:118px;
  background:#f3eee1;
  border-radius:30px 30px 0 0;
  overflow:hidden;
}
.meridian-bridge{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:92px; display:block;
  opacity:.9;
}
.meridian-traveller{
  position:absolute; left:0; right:0; bottom:60px; z-index:2;
  /* Sami's loop: the car crosses the bridge on its own, forever.
     The traveller spans the full band width, so translateX % is
     container-relative: it enters from off-screen left, exits right,
     then wraps. Transform-only, per the performance rules. */
  line-height:0;
  animation:carLoop 17s linear infinite;
}
@keyframes carLoop{
  from{transform:translateX(-9%)}
  to{transform:translateX(103%)}
}

/* --- the cream card --- */
.footer-card{
  background:#f6f1e5;
  border-radius:0 0 30px 30px;
  padding:58px 56px 32px;
  box-shadow:0 34px 80px rgba(0,0,0,.42);
}
.footer-top{display:grid; grid-template-columns:1.2fr .8fr; gap:50px}
.footer-head h2{
  font-family:"Fraunces",Georgia,serif; font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.12; color:#1d1710;
}
.footer-head p{margin-top:14px; color:#6d5f4b; font-weight:600}
.footer-cols{display:grid; grid-template-columns:1fr 1fr; gap:30px}
.fcol h4{
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:#8a6f42; margin-bottom:16px; font-weight:800;
}
.fcol a{
  display:block; padding:5px 0;
  font-weight:700; color:#2a211a; text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.fcol a:hover{color:#7c4a12; transform:translateX(3px)}
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:52px; padding-top:22px;
  border-top:1px solid #ddd1ba;
  color:#7a6a52; font-size:.9rem; font-weight:600;
}
.to-top{font-weight:800; color:#1d1710; text-decoration:none}
.to-top:hover{color:#7c4a12}

/* reveal: spec values (MOTION-SPEC 0.1) — 700ms, 28px, gated on .js */
.js [data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.js [data-reveal].in{opacity:1; transform:none}

/* --- mobile --- */
@media (max-width:820px){
  .footer-stack{padding:0 14px}
  .meridian{height:92px; border-radius:24px 24px 0 0}
  .meridian-bridge{height:70px}
  .meridian-traveller{bottom:42px}
  .meridian-traveller svg{width:37px; height:auto}
  .footer-card{border-radius:0 0 24px 24px; padding:42px 26px 28px}
  .footer-top{grid-template-columns:1fr; gap:36px}
  .footer-bottom{margin-top:40px}
}

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1; transform:none; transition:none}
  .meridian-traveller{animation:none; transform:translateX(46%)}
}