/* ==========================================================================
   LUMINA — nav.css
   The brand bar, shared by every page except index.html.

   index.html has this bar inline as part of the "elevated" design; every
   other page had a different one out of css/style.css — different
   height, different gold (#C2A35A against #FFB25A), different type,
   different hover. Crossing from the landing page to Properties read as
   crossing to a different site, which is exactly what was reported.

   This file is the landing page's bar, lifted out and scoped so the old
   pages can wear it. index.html is deliberately untouched: it keeps its
   inline copy, and this is matched to it.

   Everything is scoped under .bar. css/style.css also defines .nav, at
   equal specificity, so .bar .nav is what makes this win regardless of
   which stylesheet loads first.
   ========================================================================== */

.bar {
  --ink: #06080C;
  --cream: #F4EFE6;
  --gold: #FFB25A;
  --gold-lt: #FFD7A3;
  --c-70: rgba(244, 239, 230, .72);
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .68, .16, 1);
  --gutter: clamp(20px, 5vw, 76px);

  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--gutter);
  font-family: var(--sans);
  transition: padding .5s var(--ease);
}

/* The glass panel behind the bar. Fades in on scroll rather than being
   painted from the start, so the bar sits on the hero as type only. */
.bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(180deg, rgba(4, 6, 11, .92), rgba(4, 6, 11, .58));
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255, 178, 90, .1);
  box-shadow: 0 12px 40px -20px rgba(0, 0, 0, .65);
  transition: opacity .5s var(--ease);
}

.bar.stuck { padding-top: 12px; padding-bottom: 12px; }
.bar.stuck::after { opacity: 1; }

/* Sub-pages start under a solid header rather than a hero, so they boot
   with .stuck already on and the panel visible from the first frame. */

/* ---- WORDMARK ---- */

.bar .mark-img {
  display: block;
  line-height: 0;
  padding: 4px 0;
  transition: filter .45s var(--ease), transform .5s var(--ease);
}

.bar .mark-img img {
  display: block;
  height: clamp(26px, 2.4vw, 34px);
  width: auto;
  filter: drop-shadow(0 2px 9px rgba(0, 0, 0, .55))
          drop-shadow(0 0 20px rgba(255, 178, 90, .34));
}

.bar .mark-img:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 24px rgba(255, 178, 90, .62));
}

.bar.stuck .mark-img img { height: clamp(23px, 2vw, 29px); }

/* ---- LINKS ---- */

.bar .nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  /* style.css makes .nav a fixed full-width bar of its own. Undo it. */
  position: static;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bar .nav a {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-70);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color .35s var(--ease), text-shadow .35s var(--ease);
}

/* The underline wipes in from the left. right:100% → 0 rather than a
   scaleX, because that is what index.html does and the two have to be
   indistinguishable. */
.bar .nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold));
  box-shadow: 0 0 8px rgba(255, 178, 90, .55);
  transition: right .45s var(--ease);
}

.bar .nav a:hover {
  color: var(--cream);
  text-shadow: 0 0 18px rgba(255, 210, 150, .25);
}

.bar .nav a:hover::after { right: 0; }

.bar .nav a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* Where you are. The landing page has no equivalent because every link
   there is an in-page anchor. */
.bar .nav a.active-link {
  color: var(--cream);
}

.bar .nav a.active-link::after {
  right: 0;
  opacity: .55;
}

/* ---- WHATSAPP CHIP ---- */

.bar .nav a.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border: 1px solid rgba(255, 178, 90, .38);
  border-radius: 999px;
  font-size: .84rem;
  color: var(--cream);
  white-space: nowrap;
  background: rgba(255, 178, 90, .04);
  box-shadow: 0 0 20px -8px rgba(255, 178, 90, .25),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .4s var(--ease), background .4s var(--ease),
              transform .4s var(--ease), box-shadow .4s var(--ease);
}

.bar .nav a.chip::after { display: none; }

.bar .nav a.chip:hover {
  border-color: var(--gold);
  background: rgba(255, 178, 90, .12);
  transform: translateY(-1px);
  text-shadow: none;
  box-shadow: 0 0 28px -4px rgba(255, 178, 90, .45),
              inset 0 1px 0 rgba(255, 255, 255, .1);
}

.bar .nav a.chip svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ── the header's icon-only WhatsApp chip ──────────────────────
   Same pill, same nav slot, no label — so the padding goes symmetric and it
   reads as a circle instead of a text-shaped pill with nothing to fill it.
   Sized up and lit from behind so it is legible as the header's one active
   call to action rather than blending into the plain links beside it.
   isolation:isolate scopes the glow's negative z-index here, so the halo
   bleeds past the circle's edge instead of vanishing behind the bar.

   Scoped `.bar .nav a.chip-icon` to match this file's own convention for
   `.bar .nav a.chip`, which it has to outrank on padding.

   Duplicated verbatim in index.html, invest.html, css/elevated.css and
   css/nav.css — the same trade the tokens make. Change one, change all four.
   The phone override lives in css/mobile.css and has to stay in step. */
.bar .nav a.chip-icon{
  padding:12px; position:relative; isolation:isolate;
  border-color:rgba(255,178,90,.55);
  background:rgba(255,178,90,.1);
  box-shadow:0 0 26px -2px rgba(255,178,90,.6), inset 0 1px 0 rgba(255,255,255,.1);
}
.bar .nav a.chip-icon svg{width:21px; height:21px}
.bar .nav a.chip-icon::before{
  content:""; position:absolute; inset:-10px; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,178,90,.5), transparent 72%);
  animation:chipGlow 2.8s ease-in-out infinite;
}
@keyframes chipGlow{
  0%,100%{opacity:.55; transform:scale(.9)}
  50%{opacity:1; transform:scale(1.1)}
}
@media (hover:hover) and (pointer:fine){
  .bar .nav a.chip-icon:hover{background:rgba(255,178,90,.18)}
}
@media (prefers-reduced-motion:reduce){
  .bar .nav a.chip-icon::before{animation:none; opacity:.8}
}


/* ---- NARROW ----
   Same rule the landing page uses: everything without .keep drops out,
   leaving the wordmark, Properties and the WhatsApp chip. */
@media (max-width: 860px) {
  .bar { gap: 14px; }
  .bar .nav a:not(.keep) { display: none; }
  .bar .nav { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar,
  .bar::after,
  .bar .mark-img,
  .bar .nav a,
  .bar .nav a::after,
  .bar .nav a.chip {
    transition-duration: .01ms !important;
  }
}