/* ============================================================
   RUBEN — floating dock nav.
   Ported from the RÜJ water site: a pill fixed to the bottom of
   the screen that opens a panel on click, opens ITSELF when the
   footer arrives, and closes again when you scroll back up.
   Namespaced .rb-* so nothing here can touch the Redox theme.
   ============================================================ */
:root{
  --rb-dock-bg:rgba(17,17,17,.86);
  --rb-line:rgba(255,255,255,.16);
  --rb-scarlet:#EF3A29;
  --rb-ease:cubic-bezier(.22,1,.36,1);
  --rb-ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------------- the dock ---------------- */
.rb-dock{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:9999; display:flex; align-items:stretch; height:54px;
  border:1px solid var(--rb-line); border-radius:14px;
  background:var(--rb-dock-bg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  overflow:hidden;
  font-family:"N27","Helvetica Neue",Arial,sans-serif;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--rb-ease-io), visibility .45s var(--rb-ease-io);
}
body.rb-dock-ready .rb-dock{ opacity:1; visibility:visible; }
.rb-dock > *{ display:flex; align-items:center; justify-content:center; }
.rb-dock-brand{ width:54px; border-right:1px solid var(--rb-line); color:#fff; text-decoration:none; }
.rb-dock-brand:hover,.rb-dock-brand:focus{ color:#fff; }
.rb-glyph{ width:22px; height:22px; border:1.5px solid #fff; border-radius:6px; transform:rotate(45deg); }
.rb-dock-label{
  padding:0 26px; min-width:120px; color:#fff;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
}
.rb-dock-toggle{
  width:58px; border:0; border-left:1px solid var(--rb-line);
  background:none; cursor:pointer; color:#fff; padding:0;
}
.rb-dock-toggle:focus-visible{ outline:2px solid var(--rb-scarlet); outline-offset:-4px; }
.rb-bars{ position:relative; width:20px; height:12px; }
.rb-bars i{ position:absolute; left:0; right:0; height:1.5px; background:#fff; transition:.35s var(--rb-ease); }
.rb-bars i:nth-child(1){ top:0; }
.rb-bars i:nth-child(2){ top:5px; }
.rb-bars i:nth-child(3){ top:10px; }
.rb-arrow{ display:none; font-size:18px; line-height:1; }

/* hamburger becomes an X while the panel is open */
body.rb-menu-open .rb-bars i:nth-child(1){ top:5px; transform:rotate(45deg); }
body.rb-menu-open .rb-bars i:nth-child(2){ opacity:0; }
body.rb-menu-open .rb-bars i:nth-child(3){ top:5px; transform:rotate(-45deg); }

/* at the footer the toggle becomes back-to-top */
body.rb-at-footer .rb-bars{ display:none; }
body.rb-at-footer .rb-arrow{ display:block; }

/* ---------------- scrim ---------------- */
.rb-scrim{
  position:fixed; inset:0; z-index:9990; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--rb-ease-io), visibility .5s var(--rb-ease-io);
}
body.rb-menu-open .rb-scrim{ opacity:1; visibility:visible; }
/* the footer is already dark, so it needs no dimming */
body.rb-at-footer .rb-scrim{ opacity:0; visibility:hidden; }

/* ---------------- the panel ---------------- */
.rb-panel{
  position:fixed; left:50%; bottom:90px;
  transform:translateX(-50%) translateY(16px) scale(.98);
  z-index:9995; width:min(420px,86vw); padding:30px 32px 28px;
  background:var(--rb-dock-bg);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--rb-line); border-radius:16px;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--rb-ease-io), transform .5s var(--rb-ease-io), visibility .5s var(--rb-ease-io);
  font-family:"N27","Helvetica Neue",Arial,sans-serif;
}
body.rb-menu-open .rb-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }
.rb-panel-label{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:18px; }
.rb-panel-nav{ list-style:none; margin:0; padding:0; }
/* the label rolls up to a duplicate of itself on hover */
.rb-panel-nav a{
  display:inline-block; vertical-align:top; overflow:hidden; height:1.32em;
  color:#fff; text-decoration:none; font-weight:400; font-size:30px; line-height:1.32;
}
.rb-panel-nav a > span{ display:block; transition:transform .55s var(--rb-ease-io); }
.rb-panel-nav a > span > span{ display:block; height:1.32em; line-height:1.32em; }
.rb-panel-nav a:hover > span,
.rb-panel-nav a:focus-visible > span{ transform:translateY(-1.32em); }
.rb-panel-meta{
  display:flex; justify-content:space-between; gap:20px; margin-top:24px;
  border-top:1px solid var(--rb-line); padding-top:18px; font-size:14px; color:rgba(255,255,255,.6);
}
.rb-panel-meta a{ color:rgba(255,255,255,.6); text-decoration:none; display:block; line-height:1.8; }
.rb-panel-meta a:hover{ color:#fff; }
.rb-addr{ font-style:normal; font-size:12px; line-height:1.6; color:rgba(255,255,255,.4); margin-top:10px; }
.rb-cta{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:22px;
  background:#fff; color:#111; text-decoration:none; border-radius:11px; padding:15px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; transition:background .2s, color .2s;
}
.rb-cta:hover{ background:var(--rb-scarlet); color:#111; }

@media (max-width:640px){
  .rb-dock-label{ display:none; }
  .rb-panel-nav a{ font-size:24px; }
  .rb-panel{ bottom:86px; }
}
@media (prefers-reduced-motion: reduce){
  .rb-dock,.rb-panel,.rb-scrim,.rb-bars i,.rb-panel-nav a > span{ transition-duration:.01ms !important; }
}

/* ============================================================
   Scroll reveal — ported from the RÜJ site (.ruj-reveal).
   Each word is its own span; the script lerps every word's
   colour from dim to ink as it crosses the middle of the
   viewport, so the sentence lights up as you scroll into it.
   The page here is light, so the direction is inverted:
   RÜJ went dim -> bright on clay, this goes grey -> ink.
   ============================================================ */
.rb-reveal{ padding:15vh 6vw; background:#FFFFFF; }
.rb-reveal-text{
  margin:0 auto; text-align:center; max-width:min(900px,72vw);
  font-family:"N27","Helvetica Neue",Arial,sans-serif;
  font-weight:500; font-size:clamp(28px,3.2vw,46px); line-height:1.22;
  color:#C8C8C8;                 /* the dim state: faded grey, lit to ink (#111) by ruben-dock.js */
  letter-spacing:-.01em;
}
.rb-reveal-text .rb-rw{ transition:color .2s ease-out; }
@media (max-width:640px){
  .rb-reveal{ padding:12vh 7vw; }
  .rb-reveal-text{ font-size:26px; }
}
@media (prefers-reduced-motion: reduce){
  .rb-reveal-text{ color:#111 !important; }
  .rb-reveal-text .rb-rw{ color:#111 !important; transition:none; }
}