/* =========================================================
   Songline Standards — Full CSS (navy news version)
   (Hero legibility, headline frame, in-bar label,
   gold-line spacing, bridge phase tints, centered stage,
   indicators/legend/tooltip, mini bar label-inside)
   ========================================================= */

/* ---------- Reset / Base ---------- */
* { box-sizing: border-box }
html { scroll-behavior: smooth }
html, body { height: 100% }

:root{
  --navy:#0B1F3B; --navy-2:#0A1C35; --ink:#0A1424; --text:#344256;
  --gold:#C7A43E; --gold2:#F3DE8A;
  --line:#E5E7EB; --light:#F8FAFC; --soft:#F3F6FB; --white:#FFFFFF;

  --container:1200px; --radius:16px;
  --headerH:120px;

  /* Bridge speeds */
  --flow-dot-speed:5.5s; --flow-dash-speed:2.2s;

  /* Inline bar (JS may set --bar-pct to sync label reveal) */
  --bar-pct: 0%;
}

body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--navy); background:#fff; line-height:1.6;
  padding-top:var(--headerH);
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
ul{ list-style:none; margin:0; padding:0 }
button,input,select,textarea{ font:inherit; color:inherit }

/* ---------- Layout helpers ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 24px }
.section{ padding:72px 0 }
.section--tight-top{ padding-top:28px }
.section--tight-bottom{ padding-bottom:28px }
.section--flush-top{ padding-top:18px }
section[id]{ scroll-margin-top:calc(var(--headerH) + 14px) }

h1,h2,h3,h4{ font-family:Merriweather,serif; color:var(--ink); line-height:1.2; margin:0 }
h1{ font-size:44px } h2{ font-size:34px } h3{ font-size:22px } h4{ font-size:18px }
p{ margin:0 }

/* ---------- A11y ---------- */
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{
  left:16px; top:12px; width:auto; height:auto; background:#fff; border:2px solid var(--navy);
  padding:8px 10px; border-radius:8px; z-index:1000
}
.sr-only{ position:absolute!important; left:-99999px!important }

/* =========================================================
   Header (Affixed)
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background:rgba(255,255,255,.96); backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav.is-scrolled{ box-shadow:0 6px 18px rgba(10,31,59,.07) }
.nav-row{ height:var(--headerH); display:flex; align-items:center; justify-content:space-between; position:relative }

/* Brand */
.brand{ display:flex; align-items:center; gap:18px; min-width:0 }
.logo-img{ height: clamp(120px, 14vw, 210px); width: auto }
@media (max-width: 900px){ .logo-img{ height: clamp(96px, 16vw, 120px) } }

.brand-lines{ display:flex; flex-direction:column; justify-content:center; gap:12px; line-height:1.2; min-width:0 }
.brand-top{
  font-weight:900; letter-spacing:.22em; text-transform:uppercase; color:var(--navy);
  font-size:clamp(26px, 2vw + 16px, 34px); position:relative; padding-bottom:8px;
}
.brand-top.shimmer{
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold2) 60%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.goldline::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold)); box-shadow:0 1px 0 rgba(199,164,62,.25)
}
.brand-bot{ font-weight:600; color:var(--navy); letter-spacing:.5px; font-size:clamp(13px,.6vw + 10px,18px); opacity:.95; margin-top:6px }

/* Decorative rail (sized by JS) */
.brand-rail{
  position:absolute; height:3px; top:0; left:0; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold));
  box-shadow:0 1px 0 rgba(199,164,62,.25); pointer-events:none; opacity:.95
}

.nav-links{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-left:auto }
.nav-link{ color:#334155; font-size:14px; text-decoration:underline; text-underline-offset:4px; font-weight:800 }
.nav-link:hover{ color:var(--navy) }
.nav-link.active{ color:var(--navy); text-decoration-thickness:2px }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:9999px; border:1px solid transparent;
  font-weight:800; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, opacity .12s
}
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:var(--navy); color:#fff; border:1px solid var(--navy); box-shadow:0 6px 16px rgba(11,31,59,.18) }
.btn-primary:hover{ opacity:.92; box-shadow:0 8px 20px rgba(11,31,59,.22) }
.btn-white{ background:#fff; color:var(--navy); border:1px solid #fff; box-shadow:0 6px 16px rgba(11,31,59,.06) }
.btn-text{ background:transparent; border:0; color:#0b1f3b; font-weight:900; text-decoration:underline; text-underline-offset:3px; padding:8px 0 }

:where(a,button,.btn,.nav-link):focus-visible{
  outline:3px solid color-mix(in srgb,var(--gold) 60%, white); outline-offset:2px; border-radius:8px
}

/* Fancy RYB primary button */
.btn-ryb{ position:relative; isolation:isolate; --bg:#fff; --g1:#C7A43E; --g2:#F3DE8A;
  padding:12px 22px; border-radius:9999px; border:2px solid transparent;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(243,222,138,.35), transparent 40%) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from 0deg, var(--g1), var(--g2), var(--g1)) border-box;
  color:var(--navy); font-weight:900; letter-spacing:.02em; box-shadow:0 10px 24px rgba(11,31,59,.12);
  transition: transform .18s ease, box-shadow .18s ease, background-position .6s ease, filter .18s ease;
  background-size:100% 100%,100% 100%,200% 200%;
  perspective:600px; transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));
}
.btn-ryb:hover{ transform:translateY(-2px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) }
.btn-ryb::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s ease
}
.btn-ryb:hover::after{ transform:translateX(120%) }
.btn-ryb::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--a,0deg), rgba(199,164,62,.18), rgba(243,222,138,.5), rgba(199,164,62,.18));
  filter:blur(8px); opacity:0; transition:opacity .25s ease
}
.btn-ryb:hover::before{ opacity:1; animation:spinBorder 1.6s linear infinite }
@keyframes spinBorder{ to{ --a:360deg } }
.ryb-sparkle{
  position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold); pointer-events:none; opacity:0;
  transform:translate(-50%,-50%) scale(.6); box-shadow:0 0 8px rgba(199,164,62,.55); animation:rybSpark .6s ease-out forwards
}
@keyframes rybSpark{ 0%{opacity:.9;transform:translate(-50%,-50%) scale(.6)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)} }

/* Confetti + Toasts */
.confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:999 }
.confetti-piece{ position:absolute; left:var(--x); top:var(--y); width:8px; height:12px; background:#C7A43E; border-radius:2px;
  animation:confettiFly var(--d,1200ms) cubic-bezier(.2,.8,.2,1) forwards; transform-origin:center; opacity:.95 }
@keyframes confettiFly{ 0%{transform:translate3d(0,0,0) rotate(var(--r0,0deg));opacity:1} 100%{transform:translate3d(var(--dx,180px),var(--dy,280px),0) rotate(var(--r1,360deg));opacity:0} }
#toastHost{ position:fixed; top:96px; right:18px; z-index:1000 }
.toast{ display:flex; gap:10px; background:#fff; border:1px solid var(--line); border-left:6px solid var(--navy);
  padding:12px 14px; border-radius:12px; box-shadow:0 12px 28px rgba(10,20,36,.16); animation:toastIn .28s ease-out both }
@keyframes toastIn{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* =========================================================
   HERO (tight spacing + framed title + in-bar label)
   ========================================================= */
#nav-spacer{ display:none }
.section.hero{ padding-top:28px }

.hero{ position:relative; text-align:center }
.hero-frame{
  max-width:980px; margin-inline:auto;
  position:relative; border:1px solid var(--line); border-radius:20px; padding:28px 28px 22px;
  background:linear-gradient(180deg,#fff 0%, #F8FAFC 100%); box-shadow:0 10px 28px rgba(10,20,36,.06);
  overflow:hidden;
}
.hero h1{ color:var(--navy); font-weight:900; letter-spacing:.01em; line-height:1.2; text-align:center; margin-bottom:6px }
.hero-title{ display:grid; place-items:center; margin:4px auto 6px }
.hero-title > span{
  display:inline-block; padding:10px 14px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--gold) 55%, #e5e7eb);
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 22px rgba(11,31,59,.06);
  line-height:1.18; text-wrap:balance;
}
.hero-title > span::before,
.hero-title > span::after{
  content:""; display:inline-block; width:14px; height:2px; vertical-align:middle;
  background:linear-gradient(90deg, var(--gold), var(--gold2));
  margin:0 10px 6px; opacity:.75;
}
.eyebrow{ margin:4px 0 8px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:#475569 }

/* Body copy */
.lead{
  margin-top:12px; max-width:820px; margin-inline:auto; color:#1f2a44; font-size:1.07rem;
  line-height:1.55; overflow-wrap:break-word; word-break:normal; text-align:justify; text-justify:inter-word;
}
.lead.lead--tight{ margin-top:10px; margin-bottom:6px }
.lead.lead--one-line{ white-space:normal !important }

/* CTA */
.cta{ margin-top:18px; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap }
.cta-link{ color:var(--navy); text-underline-offset:3px; text-decoration:underline }

/* Progress bar (hero + bridge mini) */
.raisebar{ max-width:900px; margin:16px auto 0 }
.raisebar--mini{ margin-top:12px; max-width:720px; margin-inline:auto }
.bar-track{
  height:16px; border-radius:9999px; overflow:hidden; position:relative;
  background:linear-gradient(180deg,#EEF2F7,#E5EAF1);
  box-shadow:inset 0 1px 2px rgba(10,20,36,.06), 0 1px 0 rgba(255,255,255,.6);
}
.bar-fill{
  height:100%; width:8%;
  background:linear-gradient(90deg,#C7A43E 0%, #E5C85A 50%, #C7A43E 100%);
  border-radius:inherit; box-shadow:0 6px 18px rgba(199,164,62,.28); position:relative; z-index:1;
}
.bar-fill.loop-fill{
  animation: barFillAlt 5.2s cubic-bezier(.22,1,.36,1) infinite alternate,
             barGlow 2.6s ease-in-out infinite;
  background-size:200% 100%; background-position:0% 0;
}
@keyframes barFillAlt{ 0%{width:8%;background-position:0% 0} 100%{width:100%;background-position:100% 0} }
@keyframes barGlow{
  0%,100%{ filter:brightness(1) saturate(1); box-shadow:0 6px 18px rgba(199,164,62,.25) }
  50%{ filter:brightness(1.18) saturate(1.18); box-shadow:0 10px 26px rgba(199,164,62,.35) }
}
.bar-sheen{
  position:absolute; inset:0; pointer-events:none; opacity:.55; mix-blend-mode:overlay;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 40%, transparent 72%);
  animation:sheenSlide 2.8s linear infinite; z-index:1;
}
@keyframes sheenSlide{ from{transform:translateX(-65%)} to{transform:translateX(65%)} }
.bar-label{ display:block; width:100%; text-align:center; margin-top:8px; color:#0b1f3b; font-size:15px; font-weight:900; letter-spacing:.01em }

/* Inline variant: label INSIDE the bar */
.raisebar.raisebar--inline{ position:relative; max-width:900px; margin:20px auto 0 }
.raisebar.raisebar--inline .bar-track{ position:relative; height:36px; border-radius:9999px; overflow:hidden }
@media (max-width:640px){ .raisebar.raisebar--inline .bar-track{ height:30px } }
.raisebar.raisebar--inline .bar-label--inside{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; user-select:none; z-index:2; padding:0 16px
}
.bar-label--inside .bar-copy--fill{
  font-size:15.5px; font-weight:900; letter-spacing:.01em; line-height:1; white-space:nowrap;
  color:#0B1F3B; text-shadow:0 1px 0 rgba(255,255,255,.45), 0 0 8px rgba(243,222,138,.45);
  clip-path: inset(0 calc(100% - var(--bar-pct)) 0 0);
}

/* =========================================================
   Compliance News — Navy Theme (only)
   ========================================================= */
.newsbar { padding-top:40px; padding-bottom:40px }
.newsbar-head{ margin-bottom:10px }
.newsbar-viewport{ position:relative; min-height:76px; display:grid; align-items:center; overflow:hidden }
.news-item{
  position:absolute; inset:0; display:flex; align-items:center; gap:12px;
  opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; padding:6px 2px;
}
.news-item.is-active{ opacity:1; transform:translateY(0); position:relative }
.newsbar-controls{
  margin-top:10px; display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:8px
}
.newsbar-dots{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap }

#compliance-news.newsbar--navy{ background:transparent }
#compliance-news.newsbar--navy .newsbar-wrap{
  background: linear-gradient(180deg, #0B1F3B 0%, #0A1C35 100%);
  color:#fff; border:0; padding:18px 20px 16px; border-radius:18px; box-shadow:0 16px 38px rgba(10,31,59,.22);
}
#compliance-news.newsbar--navy .section-title.with-accent{ color:#fff; text-decoration:none }
#compliance-news.newsbar--navy .section-title.with-accent::after{
  background:linear-gradient(90deg, var(--gold2), var(--gold));
  height:3px; opacity:.95; box-shadow:0 1px 0 rgba(199,164,62,.45);
}
#compliance-news .newsbar-sub{ display:none !important }
#compliance-news.newsbar--navy .newsbar-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
#compliance-news.newsbar--navy .newsbar-head::after{ content:none !important }

#compliance-news.newsbar--navy .news-tag{
  background: color-mix(in srgb, var(--gold) 30%, #fff);
  border:1px solid color-mix(in srgb, var(--gold) 65%, #1e293b);
  color:#0B1F3B; border-radius:999px; padding:4px 8px; font-size:12px; font-weight:800;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
#compliance-news.newsbar--navy .news-title{
  color:#fff; font-weight:1000; letter-spacing:.01em; text-decoration:none;
  font-size:clamp(18px, 1.1vw + 14px, 22px); line-height:1.3; transition: color .25s ease, transform .2s ease;
}
#compliance-news.newsbar--navy .news-title:hover{
  text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px;
}
#compliance-news.newsbar--navy .news-meta{ color:#C8D4EA; font-weight:600; font-size:13px }

#compliance-news.newsbar--navy .newsbar-btn{
  appearance:none; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  color:#fff; border-radius:10px; padding:6px 0; font-weight:900; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
#compliance-news.newsbar--navy .newsbar-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.35) }
#compliance-news.newsbar--navy .news-dot{ width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); cursor:pointer;
}
#compliance-news.newsbar--navy .news-dot.is-active{
  background:color-mix(in srgb, var(--gold) 65%, #fff);
  border-color:color-mix(in srgb, var(--gold) 85%, #fff);
}

/* =========================================================
   Mission / Cards / Services
   ========================================================= */
.mission-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start }
@media (max-width:900px){ .mission-wrap{ grid-template-columns:1fr } }
.mission-left{ display:grid; gap:14px }
.mission-card{ border:1px solid var(--line); background:linear-gradient(180deg,#fff,#F8FAFC); border-radius:16px; padding:16px }
.mission-tag{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:#0B1F3B; margin-bottom:4px }
.mission-lead{ font-size:16px; color:#0f172a }
.pillars{ display:grid; gap:12px }
.pillar{ display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; border:1px solid var(--line); border-radius:14px; background:#fff; padding:12px }
.pi{ width:44px; height:44px; border-radius:10px; background:color-mix(in srgb,var(--gold) 18%, white); display:grid; place-items:center }
.pi svg{ width:24px; height:24px; color:#0B1F3B }
.bio-card p{ margin:10px 0 }

.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; transition:transform .2s, box-shadow .2s }
.card:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(10,20,36,.1) }
.mcard{ background:#F8FAFC }
.section-divider{ height:1px; background:var(--line); margin-top:24px }

.services-grid{ display:grid; gap:20px; grid-template-columns:repeat(4,1fr) }
@media (max-width:1100px){ .services-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr } }
.service .service-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.service-icon{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9999px; background:color-mix(in srgb,var(--gold) 22%, white); color:#8a6b1b; font-weight:800 }
.checks{ display:grid; gap:10px }
.checks.compact li{ display:flex; align-items:flex-start; gap:8px }
.check{ display:inline-grid; place-items:center; flex:0 0 18px; width:18px; height:18px; border-radius:9999px; background:color-mix(in srgb,var(--gold) 28%, transparent) }
.check svg{ width:14px; height:14px; color:var(--gold) }
.service.card{ border-top:4px solid color-mix(in srgb,var(--gold) 60%, white) }
.service.card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(10,20,36,.12) }
.services-grid .service-notary{ grid-column:1 / -1 }

/* =========================================================
   Bridge (visual + phase backgrounds + centered stage + indicators)
   ========================================================= */
.bridge{ background:#fff }

/* Section header (title + subtitle + steps) */
.section-head.center{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; margin-bottom:18px;
}
.head-left{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.section-sub{
  margin-top:6px; font-weight:700; color:#0f172a; line-height:1.4; max-width:68ch;
}

/* Steps */
.bridge-ctrls{ display:flex; gap:8px; align-items:center }
.step{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer; color:#0b1f3b;
  transition: background .22s ease, box-shadow .22s ease, transform .18s ease; box-shadow:0 2px 8px rgba(10,20,36,.05);
}
.step.is-active{
  background:color-mix(in srgb,var(--gold) 24%, #fff);
  border-color:color-mix(in srgb,var(--gold) 45%, var(--line));
  box-shadow:0 6px 18px rgba(199,164,62,.18); transform:translateY(-1px)
}
.bridge-ctrls .step.is-active[data-step="2"]{ background:color-mix(in srgb,var(--navy) 12%, #fff) }
.bridge-ctrls .step.is-active[data-step="3"]{ background:color-mix(in srgb,var(--gold2) 22%, #fff) }

/* Left legend + right frame */
.bridge-layout{
  display:grid; grid-template-columns:260px 1fr; column-gap:24px; row-gap:0; align-items:start
}
@media (max-width:900px){ .bridge-layout{ grid-template-columns:1fr } }
.bridge-legend{ border:1px solid var(--line); border-radius:16px; padding:14px; background:linear-gradient(180deg,#fff,#F9FAFB); margin-bottom:6px }
.legend-item{ display:flex; align-items:center; gap:10px; margin:8px 0; color:#0f172a; font-weight:700 }
.legend-swatch{ width:16px; height:16px; border-radius:4px; display:inline-block }
.sw-gold{ background:linear-gradient(90deg,var(--gold),var(--gold2)) }
.sw-navy{ background:var(--navy); opacity:.75 }
.sw-beacon{ background:rgba(247,232,180,.6); box-shadow:0 0 0 1px rgba(199,164,62,.6) inset }

/* Card that holds the bridge */
.bridge .container{ max-width: var(--container); padding-inline: 24px }
.bridge-wrap{
  position:relative; border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%, #F7F8FB 100%); overflow:hidden;
  box-shadow:0 12px 34px rgba(10,20,36,.10), 0 2px 0 rgba(255,255,255,.8) inset;
  isolation:isolate; padding:16px 20px 18px;
}
.bridge-wrap::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.18; transition:opacity .25s ease, background .25s ease; z-index:0;
}
#bridgeWrap[data-phase="1"]::before{ background:linear-gradient(180deg, rgba(247,232,180,.55), rgba(255,255,255,0)) }
#bridgeWrap[data-phase="2"]::before{ background:linear-gradient(180deg, rgba(11,31,59,.10), rgba(255,255,255,0)) }
#bridgeWrap[data-phase="3"]::before{ background:linear-gradient(180deg, rgba(199,164,62,.16), rgba(255,255,255,0)) }
.bridge-wrap > *{ position:relative; z-index:1 }

/* Explanation + keys + details */
.bridge-explain{ margin-top:-12px }
@media (min-width:901px){
  .bridge-explain{ margin-top:0 }
  .bridge-wrap{ padding-top:10px }
}
.bridge-keys{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.bridge-keys .pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  background:#fff; border:1px solid var(--line); border-radius:999px; font-weight:800; color:#0B1F3B
}
.bridge-keys .dot{ width:12px; height:12px; border-radius:50% }
.bridge-keys .dot.ctrl{ background:#0B1F3B; box-shadow:0 0 0 2px #fff inset }
.bridge-keys .dot.sig{ background:rgba(247,232,180,.95); box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 70%, #fff) inset }

/* Stage centers the SVG & anchors labels/milestones */
.bridge-stage{
  position:relative;
  display:flex; justify-content:center; align-items:center;
  width:100%; max-width:1080px; margin:0 auto;
}

/* SVG + deck art */
.bridge-svg{ display:block; width:100%; height:auto; margin:0 auto }
@media (min-width:1280px){ .bridge-stage,.bridge-svg{ max-width:1180px } }

/* Bridge drawing */
.b-deck{ stroke:var(--navy); stroke-width:6; fill:none; stroke-linecap:round; stroke-dasharray:1100; stroke-dashoffset:1100 }
.b-rail{ stroke:color-mix(in srgb,var(--navy) 70%, white); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-dasharray:1100; stroke-dashoffset:1100 }
.b-arch{ stroke:var(--gold); stroke-width:5.5; fill:none; stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900 }
.b-pier{ stroke:color-mix(in srgb,var(--navy) 60%, transparent); stroke-width:6.5; stroke-linecap:round; stroke-dasharray:60; stroke-dashoffset:60 }
.b-truss line{ stroke:color-mix(in srgb,var(--navy) 60%, white); stroke-width:2; stroke-dasharray:400; stroke-dashoffset:400 }
.b-cables line{ stroke:color-mix(in srgb,var(--navy) 40%, white); stroke-width:1.5; stroke-dasharray:300; stroke-dashoffset:300 }
.b-flow{
  stroke:var(--gold); stroke-width:3; fill:none; stroke-linecap:round;
  stroke-dasharray:8 10; animation:dash var(--flow-dash-speed) linear infinite; opacity:.95;
  filter: drop-shadow(0 2px 6px rgba(199,164,62,.35));
}
@keyframes dash{ to{ stroke-dashoffset:-36 } }
.flow-dot{ fill:var(--gold); animation:flow var(--flow-dot-speed) ease-in-out infinite }
.flow-dot.delay1{ animation-delay:.9s } .flow-dot.delay2{ animation-delay:1.8s }
@keyframes flow{ 0%{cx:70px;opacity:.35}10%{opacity:1}50%{cx:600px}90%{opacity:1}100%{cx:1130px;opacity:.35} }

/* Waves & sparkles */
.wave{ fill:rgba(11,31,59,.10) } .wave.back{ animation:waveMove 9s linear infinite }
.wave.front{ fill:rgba(11,31,59,.14); animation:waveMove 6s linear infinite reverse }
@keyframes waveMove{ 0%{transform:translateX(0)} 100%{transform:translateX(-80px)} }
.sparkles circle{ fill:#C7A43E; opacity:.6; animation:twinkle 2.4s ease-in-out infinite }
.sparkles circle:nth-child(2){ animation-delay:.4s } .sparkles circle:nth-child(3){ animation-delay:.8s } .sparkles circle:nth-child(4){ animation-delay:1.2s }
@keyframes twinkle{ 0%,100%{opacity:.2} 50%{opacity:1} }

/* On-figure text */
.svg-hint,
.svg-label{
  font: 900 15px/1.3 Inter, system-ui, sans-serif;
  fill:#0B1F3B;
  paint-order:stroke fill; stroke:#fff; stroke-width:3px;
  letter-spacing:.02em;
  text-shadow: 0 0 6px rgba(255,255,255,.7);
}
@media (max-width:640px){
  .svg-hint, .svg-label{ stroke-width:1.6px; font-size:13px }
}

/* Simple on-figure step labels (e.g., Registrations • Drawdowns • Reviews) */
.svg-step{
  font: 900 16px/1.2 Inter, system-ui, sans-serif;
  fill:#0B1F3B; paint-order:stroke fill; stroke:#fff; stroke-width:3px;
  letter-spacing:.01em; text-anchor:middle; dominant-baseline:middle;
}
@media (max-width:640px){ .svg-step{ font-size:13px; stroke-width:2px } }

/* Corner labels that follow the centered stage */
.bridge-stage .bridge-label{
  position:absolute; top:20px; z-index:3;
  font-size:13px; font-weight:900; letter-spacing:.06em; color:#0B1F3B; background:#fff;
  border:1px solid var(--line); padding:6px 10px; border-radius:999px; box-shadow:0 6px 16px rgba(11,31,59,.06); opacity:.98
}
.bridge-stage .bridge-label.left{ left:40px }
.bridge-stage .bridge-label.right{ right:40px }

/* Milestones (optional) */
.bridge-milestones li{ position:absolute; top:162px; left:calc(var(--x) - 40px); width:max-content; transform:translateY(-100%); text-align:center }
.bridge-milestones span{
  display:inline-block; padding:6px 10px; font-size:12px; font-weight:800; color:#0B1F3B; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 6px 16px rgba(11,31,59,.06)
}

/* Tooltip bubble for indicators */
.bridge-tip{
  position:absolute; transform: translate(-50%, -100%);
  background:#0b1f3b; color:#fff; font-size:12px; font-weight:800;
  padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 22px rgba(10,20,36,.18); opacity:0;
  transition: opacity .14s ease, transform .14s ease;
  pointer-events:none; z-index: 1000;
}
.bridge-tip.in{ opacity:1; transform: translate(-50%, calc(-100% - 6px)); }

/* Indicators */
.ctrl-dot, .signal-beacon { vector-effect: non-scaling-stroke; cursor: pointer }
.ctrl-dot{ fill:#0B1F3B; stroke:#fff; stroke-width:2; opacity:.95 }
.ctrl-dot.pulse{ animation: ctrlPulse 2.2s ease-in-out infinite }
@keyframes ctrlPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.22)} }

.signal-beacon{
  fill:rgba(247,232,180,.95); stroke: color-mix(in srgb, var(--gold) 70%, #fff);
  stroke-width:1.6; filter: drop-shadow(0 0 6px rgba(199,164,62,.45));
}
.signal-beacon.wave{ animation: sigWave 2.4s ease-in-out infinite; transform-origin:center }
@keyframes sigWave{ 0%{transform:scale(1)} 50%{transform:scale(1.16)} 100%{transform:scale(1)} }

/* Caption — lifted higher on desktop */
.bridge-caption{
  background:color-mix(in srgb, var(--gold) 14%, white);
  border:1px solid color-mix(in srgb, var(--gold) 32%, var(--line));
  padding:12px 14px; border-radius:12px; font-size:15px; font-weight:700; line-height:1.5; color:#0B1F3B;
  box-shadow:0 4px 14px rgba(11,31,59,.06);
  margin:10px auto 0; text-align:center; max-width:680px;
}
@media (min-width:1050px){
  .bridge-caption{ position:relative; top:-220px; margin-top:0; }
}

/* Mini funding momentum bar (inside bridge) */
.bridge-wrap .raisebar--mini{ position:relative; max-width:none; width:calc(100% + 40px); margin-left:-20px; margin-right:-20px }
.bridge-wrap .raisebar--mini .bar-track{
  height:22px; position:relative; border-radius:9999px;
  background:linear-gradient(180deg,#EEF2F7,#E5EAF1);
}
.bridge-wrap .raisebar--mini .bar-fill.loop-flow{
  width:100% !important;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0px, rgba(255,255,255,.18) 12px, transparent 12px, transparent 24px),
    linear-gradient(90deg,#C7A43E 0%, #E5C85A 50%, #C7A43E 100%);
  background-size: 48px 48px, 200% 100%;
  animation: waveStripes 4s linear infinite, flowGold 3.5s linear infinite;
  border-radius: inherit;
  box-shadow: 0 6px 18px rgba(199,164,62,.28);
  z-index:1; position:relative;
}
.bridge-wrap .raisebar--mini .bar-sheen{
  animation:sheenSlide 2.8s linear infinite; z-index:2; position:relative
}
.bridge-wrap .raisebar--mini .bar-label{ display:none !important }
.bridge-wrap .raisebar--mini .bar-label--inside{
  position:absolute; inset:0; display:grid; place-items:center; z-index:3; pointer-events:none; padding:0 10px;
}
.bridge-wrap .raisebar--mini .bar-label--inside .bar-copy--fill{
  font: 900 16px/1.2 Inter, system-ui, sans-serif;
  color:#0B1F3B; letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.85), 0 0 8px rgba(243,222,138,.55);
  white-space:nowrap; clip-path:none !important;
}
@keyframes waveStripes { from { background-position: 0 0, 0% 0; } to { background-position: 48px 0, 100% 0; } }
@keyframes flowGold    { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 100% 0; } }

/* =========================================================
   Credentials / About / Contact
   ========================================================= */
.creds-grid{ display:grid; gap:20px; grid-template-columns:repeat(4,1fr); align-items:stretch; grid-auto-rows:1fr }
@media (max-width:991px){ .creds-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .creds-grid{ grid-template-columns:1fr } }
.cred-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; padding:18px; background:#F8FAFC; text-align:center; min-height:320px }
.cred-link{ display:flex; flex-direction:column; align-items:center; color:inherit; text-decoration:none; height:100% }
.cred-badge-img{
  max-width:120px; max-height:120px; aspect-ratio:1/1; border-radius:50%; background:#fff; border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(10,20,36,.04) inset; display:grid; place-items:center; margin-bottom:10px; object-fit:contain
}

.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr } }
.prose{ color:#0f172a } .prose p + p{ margin-top:14px }
.prose p{ text-align:justify; text-justify:inter-word }
.signature-quote{ font-weight:900; color:#0B1F3B }
.pill-list{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0 }
.pill{ background:color-mix(in srgb,var(--gold) 14%, white); border:1px solid color-mix(in srgb,var(--gold) 35%, var(--line)); border-radius:999px; padding:6px 10px; font-weight:700; color:#0b1f3b }
.quick-stats{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px }
.stat{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px }
.stat .num{ font-weight:900; color:var(--navy); font-size:20px } .stat .label{ font-size:12px; color:#475569 }
.portrait-card{ border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center; background:#fff }
.portrait-img{ width:100%; height:auto; border-radius:10px }
.portrait-caption{ font-weight:900; color:#0B1F3B; margin-top:8px }

/* ====== CONTACT (wider left column, tighter spacing, no forced Acuity height) ====== */
.contact-grid{
  display:grid;
  grid-template-columns: minmax(620px, 2.0fr) minmax(300px, 1.2fr);
  gap:20px;
  align-items:start;
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr } }

.form{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:24px;
  width:100%;
}
.form .section-title{ color:#fff }
.form .section-title.with-accent::after{ background:linear-gradient(90deg, var(--gold2), var(--gold)) }
.form .sub{ color:#e8eefc }
.form label{ display:grid; gap:6px; margin:12px 0; font-weight:700; color:#e9eef7 }
.form input,.form select,.form textarea{
  appearance:none; background:#fff; border:1px solid #d1d5db; border-radius:10px; padding:10px 12px; color:#0b1324; font-size:14px
}
.form textarea{ resize:vertical }
.form .form-note{ font-size:12px; color:#dbe6ff; margin-top:6px }
.form .form-success{ margin-top:12px; background:#0f9d58; color:#fff; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.08) }

.contact-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px }
.contact-card .section-title{ color:var(--navy) }
.contact-row{ display:flex; align-items:center; gap:10px; margin:8px 0 }
.contact-row .mini svg{ width:16px; height:16px; color:#0B1F3B }
.linkish{ color:#0B1F3B; text-decoration:underline; text-underline-offset:3px }
.notary-note{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line) }
.notary-heading{ color:#0b1f3b } .notary-copy{ color:#334155 }

/* Tighten spacing above "Book a time now" block */
.acuity-embed-wrap{ margin-top:10px }

/* Don’t force height; hide wrapper if Acuity doesn’t inject content */
.acuity-embed{ min-height:0 }
.acuity-embed:empty{ display:none }
.acuity-embed-wrap:has(.acuity-embed:empty){ display:none }

/* Remove stray bottom gap inside the contact card */
.contact-card > :last-child{ margin-bottom:0 }

/* =========================================================
   Modals / Reveal / Footer
   ========================================================= */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; z-index:999 }
.modal-backdrop.show{ display:block }
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0); transition:opacity .25s ease; z-index:1000 }
.modal[hidden]{ display:none }
.modal-card{ background:#fff; max-width:720px; width:92%; padding:24px; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.25); max-height:80vh; display:flex; flex-direction:column }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.modal-close{ background:transparent; border:0; font-size:28px; line-height:1; cursor:pointer; color:#334155 }
.modal-body{ overflow:auto } .modal-body.prose p + p{ margin-top:12px } .prose-spacious p{ margin-bottom:12px }
.modal-foot{ margin-top:12px; text-align:right }

.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease }
.reveal.in{ opacity:1; transform:translateY(0) }

.footer{ padding:24px 0; border-top:1px solid var(--line); background:#fff }
.foot-bottom{ text-align:center; color:#64748b }

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width:991px){
  .section{ padding:56px 0 }
  h1{ font-size:36px } h2{ font-size:28px }
}
@media (max-width:900px){
  .section-head.center{ align-items:flex-start }
  .bridge-ctrls{ margin-top:8px }
}
@media (max-width:640px){
  .section{ padding:40px 0 }
  h1{ font-size:28px } h2{ font-size:24px }
  #compliance-news.newsbar--navy .news-title{ font-size:15px }
  #compliance-news.newsbar--navy .news-meta{ display:block; margin-top:2px }
}
/* Trim header height on smaller screens */
@media (max-width:900px){ :root{ --headerH:120px } }

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .signal-beacon.wave, .ctrl-dot.pulse,
  .raisebar--mini .bar-fill.loop-flow,
  .b-flow, .wave.back, .wave.front,
  .bar-fill.loop-fill, .bar-sheen { animation: none !important }
}

/* Start: hover-to-check animation for service packages */
.service.card .checks li {
  position: relative;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.service.card .checks li .check {
  transform: scale(.85);
  opacity: .45;
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              opacity .25s ease,
              background .25s ease;
}
.service.card:hover .checks li .check,
.service.card:focus-within .checks li .check {
  transform: scale(1.1);
  opacity: 1;
}
.service.card .checks li:nth-child(1) .check { transition-delay: 40ms; }
.service.card .checks li:nth-child(2) .check { transition-delay: 90ms; }
.service.card .checks li:nth-child(3) .check { transition-delay: 140ms; }
.service.card .checks li:nth-child(4) .check { transition-delay: 190ms; }
@media (prefers-reduced-motion: reduce){
  .service.card .checks li .check { transform: none !important; transition: opacity .2s ease; }
}

/* desktop-only nudge */
@media (min-width: 950px){
  .about-grid .portrait-card { transform: translateX(40px); }
}
.notary-heading { margin-bottom: 10px; }

.form input,.form select,.form textarea{
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form input:focus, .form select:focus, .form textarea:focus{
  border-color: color-mix(in srgb, var(--gold) 55%, #d1d5db);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, #fff);
}

/* ensure the form doesn't hide under the fixed header when scrolled into view */
#contactForm { scroll-margin-top: calc(var(--headerH) + 14px); }
#contact    { scroll-margin-top: calc(var(--headerH) + 14px); } /* optional: whole section */

.bridge-ctrls.below-sub {
  margin-top: 14px;      /* space below the subtitle */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.section-sub.center {
  text-align: center;
  max-width: 820px;
  margin: 10px auto 18px;
  font-size: 1.1rem;
  line-height: 1.5;
}

.bridge-ctrls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

/* Subtitle aligned left like title */
.section-head .section-sub {
  margin-top: 6px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #24324A;
}

/* Pills aligned right */
.bridge-ctrls {
  margin-top: -40px;   /* pulls pills up to sit across from subtitle */
  float: right;        /* push to right margin */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* makes any scroll-to #contactForm land nicely under the fixed header */
#contactForm { scroll-margin-top: var(--headerH, 120px); }

/* --- Indicators drawer: 3-column grid like before --- */
.bridge-details {
  margin-top: 10px;
  /* keep native <details> behavior; no fixed heights needed */
}

.bridge-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 800;
  color: #0B1F3B;
  box-shadow: 0 2px 8px rgba(10,20,36,.05);
}
.bridge-details > summary::-webkit-details-marker { display: none; }
.bridge-details > summary::after {
  content: ""; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.bridge-details[open] > summary::after { transform: rotate(-135deg); }

/* The body becomes a responsive 3-col grid */
.bridge-details-body{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* Stack on smaller screens */
@media (max-width: 900px){
  .bridge-details-body{ grid-template-columns: 1fr }
}

/* Column/card polish */
.bd-col{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(11,31,59,.06);
}

.bd-col h4{
  margin: 0 0 8px;
  font: 900 18px/1.25 Inter, system-ui, sans-serif;
  color: #0B1F3B;
}

.bd-col ul{
  margin: 0; padding: 0;
  display: grid; gap: 8px;
  color: #0f172a;
}
.bd-col li strong{ color:#0B1F3B; font-weight:900 }

/* --- RIGHT-ALIGN BRIDGE PILLS TO THE CONTAINER EDGE --- */
.section-head.center{
  display: grid;
  grid-template-columns: 1fr auto;      /* text on the left, pills on the right */
  grid-template-rows: auto auto;        /* title row, then subtitle/pills row */
  column-gap: 16px;
  align-items: end;
}

/* Title spans full width on the first row */
.section-head.center .section-title{
  grid-column: 1 / -1;
}

/* Subtitle sits left on row 2 */
.section-head.center .section-sub{
  grid-column: 1 / 2;
  margin: 0; /* keep it tidy */
}

/* Pills sit right on row 2, flush with the right margin */
.section-head.center .bridge-ctrls{
  grid-column: 2 / 3;
  grid-row: 2;
  justify-self: end;               /* hit the right edge of .container */
  justify-content: flex-end !important;
  margin: 0 !important;
  float: none !important;          /* neutralize earlier float */
}

/* If you keep a special "below-sub" class, ensure it's not re-centering them */
.bridge-ctrls.below-sub{
  justify-content: flex-end !important;
  margin-top: 0 !important;
}

/* Optional: stack nicely on small screens */
@media (max-width: 900px){
  .section-head.center{
    grid-template-columns: 1fr;
  }
  .section-head.center .bridge-ctrls{
    grid-column: 1 / -1;
    justify-self: start; /* or 'center' if you want them centered on mobile */
  }
}

/* Thicken the mini bar slightly */
.bridge-wrap .raisebar--mini .bar-track{
  height: 26px !important; /* try 24–28px */
}
/* (Optional) nudge the inside label up a bit so it stays balanced at the new height */
.bridge-wrap .raisebar--mini .bar-label--inside .bar-copy--fill{
  font-size: 16.5px;
  line-height: 1.2;
}