/* ============================================================================
   Motion
   Pairs with assets/js/motion.js. Every animation degrades to a static,
   fully-visible layout when JS is off or prefers-reduced-motion is set.
   ========================================================================= */

:root{
  --rp-ease-out: cubic-bezier(.22,.61,.36,1);
  --rp-ease-soft: cubic-bezier(.33,1,.68,1);
  --rp-reveal-dur: .78s;
}

/* ------------------------------------------------------------- 1. REVEAL
   Only armed once JS confirms it is running, so a no-JS visitor never sees
   an invisible page.                                                      */
.rp-js [data-reveal]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:
    opacity var(--rp-reveal-dur) var(--rp-ease-soft),
    transform var(--rp-reveal-dur) var(--rp-ease-out);
  will-change:opacity,transform;
}
.rp-js [data-reveal="left"]{ transform:translate3d(-26px,0,0); }
.rp-js [data-reveal="right"]{ transform:translate3d(26px,0,0); }
.rp-js [data-reveal="scale"]{ transform:scale(.965); }
.rp-js [data-reveal="fade"]{ transform:none; }

.rp-js [data-reveal].is-revealed{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* A sideways offset can stick out past the viewport before it fires, which
   shows up as a phantom horizontal scrollbar. Below the tablet breakpoint the
   lateral reveals become vertical ones; `clip` is the belt and braces, and
   unlike `hidden` it does not break position:sticky on the header. */
@media (max-width:900px){
  .rp-js [data-reveal="left"],
  .rp-js [data-reveal="right"]{ transform:translate3d(0,22px,0); }
}
.rp-site{ overflow-x:clip; }

/* Headline mask-reveal: the line slides up from behind its own clip box. */
.rp-reveal-mask{ overflow:hidden; display:block; }
.rp-js .rp-reveal-mask > span{
  display:block;
  transform:translate3d(0,105%,0);
  transition:transform .95s var(--rp-ease-out);
}
.rp-js [data-reveal].is-revealed .rp-reveal-mask > span{ transform:none; }
.rp-js .rp-reveal-mask:nth-child(2) > span{ transition-delay:.09s; }
.rp-js .rp-reveal-mask:nth-child(3) > span{ transition-delay:.18s; }

/* ---------------------------------------------------------- 2. ACCORDION
   grid-template-rows 0fr → 1fr gives a true auto-height transition with no
   JS height measuring and no max-height guesswork.                        */
.rp-accordion__item{
  border:1px solid var(--rp-line);
  background:var(--rp-white);
  margin-bottom:12px;
  transition:border-color .3s var(--rp-ease-out);
}
.rp-accordion__item.is-open{ border-color:var(--rp-gold); }

.rp-accordion__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:22px 24px;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  font-family:var(--rp-sans);
  font-size:16.5px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  line-height:1.5;
  color:var(--rp-ink);
  transition:color .25s var(--rp-ease-out);
}
.rp-accordion__trigger:hover{ color:var(--rp-gold); }
.rp-accordion__item.is-open .rp-accordion__trigger{ color:var(--rp-gold); }

.rp-accordion__icon{
  position:relative;
  flex:0 0 18px;
  width:18px; height:18px;
}
.rp-accordion__icon::before,
.rp-accordion__icon::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  background:var(--rp-gold);
  transition:transform .4s var(--rp-ease-out), opacity .3s;
}
.rp-accordion__icon::before{
  width:16px; height:1.5px;
  transform:translate(-50%,-50%);
}
.rp-accordion__icon::after{
  width:1.5px; height:16px;
  transform:translate(-50%,-50%) rotate(0deg);
}
.rp-accordion__item.is-open .rp-accordion__icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
  opacity:0;
}

.rp-accordion__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--rp-ease-out);
}
.rp-accordion__item.is-open .rp-accordion__panel{ grid-template-rows:1fr; }
.rp-accordion__inner{
  overflow:hidden;
  min-height:0;
}
.rp-accordion__body{
  padding:0 24px 24px;
  font-size:15.5px;
  line-height:1.75;
  color:var(--rp-body);
  opacity:0;
  transition:opacity .35s var(--rp-ease-out) .1s;
}
.rp-accordion__item.is-open .rp-accordion__body{ opacity:1; }
.rp-accordion__body p:last-child{ margin-bottom:0; }

/* ----------------------------------------------------------- 3. CAROUSEL */
.rp-carousel{ position:relative; }
.rp-carousel__track{
  display:flex;
  gap:26px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:6px;
}
.rp-carousel__track::-webkit-scrollbar{ display:none; }
.rp-carousel__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.rp-carousel__slide{
  flex:0 0 clamp(260px, 31%, 380px);
  scroll-snap-align:start;
}
@media (max-width:900px){
  .rp-carousel__slide{ flex-basis:80%; }
}

.rp-carousel__nav{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:28px;
}
.rp-carousel__btn{
  width:46px; height:46px;
  padding:0;
  display:grid;
  place-items:center;
  background:transparent;
  border:1px solid var(--rp-line);
  border-radius:50%;
  color:var(--rp-ink);
  font-size:15px;
  cursor:pointer;
  transition:background-color .3s var(--rp-ease-out), color .3s, border-color .3s, transform .3s;
}
.rp-carousel__btn:hover:not(:disabled){
  background:var(--rp-gold);
  border-color:var(--rp-gold);
  color:var(--rp-navy);
  transform:translateY(-2px);
}
.rp-carousel__btn:disabled{ opacity:.3; cursor:default; }

.rp-carousel__dots{ display:flex; gap:8px; margin-left:8px; }
.rp-carousel__dot{
  width:7px; height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--rp-line);
  cursor:pointer;
  transition:width .35s var(--rp-ease-out), background-color .35s;
}
.rp-carousel__dot.is-active{ width:26px; border-radius:4px; background:var(--rp-gold); }

/* ------------------------------------------------------------- 4. HEADER */
.rp-header{
  transition:
    transform .45s var(--rp-ease-out),
    background-color .4s var(--rp-ease-out),
    border-color .4s var(--rp-ease-out),
    box-shadow .4s var(--rp-ease-out);
}
.rp-header.is-hidden{ transform:translateY(-100%); }
.rp-header.is-stuck{ box-shadow:0 10px 30px -22px rgba(0,0,0,.8); }

/* ------------------------------------------------------------ 5. OVERLAY */
.rp-overlay{
  position:fixed;
  inset:0;
  z-index:900;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(11,18,32,.72);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .35s var(--rp-ease-out);
}
.rp-overlay.is-open{ opacity:1; }
.rp-overlay[hidden]{ display:none; }
.rp-overlay__box{
  max-width:520px;
  width:100%;
  background:var(--rp-cream-2);
  border:1px solid var(--rp-line);
  padding:52px 44px 44px;
  text-align:center;
  transform:translateY(16px) scale(.98);
  transition:transform .45s var(--rp-ease-out);
}
.rp-overlay.is-open .rp-overlay__box{ transform:none; }

.rp-tick{
  width:56px; height:56px;
  margin:0 auto 22px;
  border-radius:50%;
  border:1.5px solid var(--rp-gold);
  display:grid;
  place-items:center;
}
.rp-tick svg{ width:24px; height:24px; }
.rp-tick path{
  stroke:var(--rp-gold);
  stroke-width:2.2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:34;
  stroke-dashoffset:34;
}
.rp-overlay.is-open .rp-tick path{
  animation:rp-tick .6s var(--rp-ease-out) .25s forwards;
}
@keyframes rp-tick{ to{ stroke-dashoffset:0 } }

/* -------------------------------------------------------------- 6. BUTTON
   Gold fill wipes in from the left on the dark/ghost variants.            */
.rp-btn{ position:relative; overflow:hidden; z-index:0; }
.rp-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--rp-gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--rp-ease-out);
  z-index:-1;
}
.rp-btn--ghost:hover::before,
.rp-btn--dark:hover::before{ transform:scaleX(1); }
.rp-btn--ghost:hover,
.rp-btn--dark:hover{ color:var(--rp-navy); border-color:var(--rp-gold); background:transparent; }

/* ------------------------------------------------------------- 7. IMAGE */
.rp-figure{ overflow:hidden; background:#DDD8CE; position:relative; }
.rp-figure img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--rp-ease-out);
}
.rp-figure:hover img{ transform:scale(1.045); }

/* ------------------------------------------------------- 8. PAGE ENTER */
.rp-js body{ animation:rp-page-in .6s var(--rp-ease-soft) both; }
@keyframes rp-page-in{ from{ opacity:0 } to{ opacity:1 } }

/* --------------------------------------------------- 9. REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .rp-js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .rp-js .rp-reveal-mask > span{ transform:none !important; transition:none !important; }
  .rp-js body{ animation:none !important; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}