/* ==========================================================================
   Y.H. Securities — Shared Header / Footer / Account Modal (single source of
   truth, extracted verbatim from index.html).

   Loaded on EVERY page (index, blog, contact, disclaimer, 404, our-team)
   BEFORE the page's own styles so pages may override where needed. The
   markup is injected by components.js into #site-header / #site-footer.

   Only the CSS required by the injected header/footer/modal lives here. Do NOT
   move page-content styles here (heroes, sections, footer-friendly—those stay in
   each page's own stylesheet).
   ========================================================================== */

/* ── Canonical theme tokens ── (These match index.html's inline :root by value.)
      Standalone pages define these in styles.css only the ones they used for
      content; re-declaring here guarantees identical rendering everywhere. */
:root {
  --navy: hsl(220,38%,10%);
  --navy-l: hsl(220,30%,18%);
  --gold: hsl(43,74%,49%);
  --gold-l: hsl(45,90%,60%);
  --gold-d: hsl(40,65%,38%);
  --gray: hsl(220,10%,95%);
  --gd: hsl(220,10%,40%);
  --white: #fff;
  --border: hsl(220,14%,90%);
  /* Logo filter — light default (black silhouette), matching index.html's
     [data-theme="light"]. Last-loaded page stylesheets (or inline styles) may
     override for a dark header. */
}

/* ── Shared container (index.html uses `.C`; standalone pages use .container) ── */
.C {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Header logo ── */
.logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-right: .75rem;
  height: 3rem;
  /* The logo must never be crushed by the flex row — it keeps its natural
     width at the fixed display height. (Previously flex-shrink:1 squeezed
     the anchor to ~47px once the oversized img overflowed.) */
  flex-shrink: 0;
  min-width: 0;
}

/* ── TOPBAR ── */
#topbar {
  background: var(--navy);
  color: #fff;
  font-size: .72rem;
  display: none;
}

@media(min-width:1024px) {
  #topbar {
    display: block;
  }
}

.tb-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0;
}

.tb-l,
.tb-r {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.tb-l a,
.tb-r a {
  color: rgba(255, 255, 255, .75);
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s;
}

.tb-l a:hover,
.tb-r a:hover {
  color: var(--gold);
}

.sep {
  color: rgba(255, 255, 255, .3);
}

/* ── HEADER ── */
#hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  transition: box-shadow .3s;
}

#hdr.scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

.hi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
}

#hdr .hi {
  padding: .75rem 1.5rem;
}

.logo img {
  height: 3rem;
  width: auto;
}

/* The logo is a PORTRAIT image (3375x4219). Displaying it at 10rem forced the
   img to overflow the 3rem .logo container and bleed out of #hdr, and flex
   then crushed the anchor. A sane 3rem display height keeps it proportional
   (≈38px wide) and fully inside the header row. The `#hdr` prefix + !important
   is deliberate: index.html, our-team.html and services.css still ship stale
   `.logo img { height: 10rem !important }` rules AFTER this file, and a plain
   `.logo img` here would lose the cascade to them. */
#hdr .logo img {
  height: 3rem !important;
  width: auto;
}

nav.dn {
  display: none;
  align-items: center;
}

@media(min-width:1024px) {
  nav.dn {
    display: flex;
  }
}

.ni {
  position: relative;
}

.nl {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: 1.25rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
  transition: color .2s;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
}

/* Nav needs to be narrower so the search box + CTA fit on one row at ≥1024px.
   Base rule above is kept for safety; this higher-specificity rule guarantees
   the tighter padding/font beat index.html's stale inline `.nl` rules (which
   load after components.css) and any page-level copies. */
#hdr nav.dn .nl {
  padding: .8rem .55rem;
  font-size: .74rem;
}

.nl:hover,
.nl.active {
  color: var(--gold-d);
}

.nl .ind {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: .125rem;
  background: var(--gold);
  display: none;
}

.nl.active .ind {
  display: block;
}

.dd {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
  border-top: 2px solid var(--gold);
  min-width: 15rem;
  z-index: 100;
  padding: .5rem 0;
  animation: ddi .25s ease-out;
}

.ni:hover > .dd {
  display: block;
}

.dd a {
  display: block;
  padding: .625rem 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--navy);
  transition: all .15s;
}

.dd a:hover {
  color: var(--gold-d);
  background: var(--gray);
}

.dd .ni {
  position: relative;
}

.dd .dd-p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.dd .dd-p svg {
  transition: transform .15s;
  opacity: .6;
}

.dd .ni:hover .dd-p svg {
  transform: rotate(90deg);
}

.ddx {
  top: -.5rem;
  left: 100%;
  border-left: 2px solid var(--gold);
  border-top: 2px solid var(--gold);
}

.dd > .ni:hover > .ddx {
  display: block;
}

.mt {
  display: flex;
  align-items: center;
  padding: .5rem;
  color: var(--navy);
}

@media(min-width:1024px) {
  .mt {
    display: none;
  }
}

#mm {
  display: none;
  background: #fff;
  border-top: 1px solid var(--border);
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

#mm.open {
  display: block;
}

.mm-in {
  padding: 1rem 0;
}

.mnl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .5rem;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.mnl.active {
  color: var(--gold-d);
}

.msm {
  display: none;
  padding-left: 1.5rem;
}

.msm.open {
  display: block;
}

.msm a {
  display: block;
  padding: .6rem .5rem;
  font-size: .875rem;
  color: var(--gd);
}

.mnl.msm-t {
  padding: .6rem .5rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: none;
  color: var(--gd);
}

.msm .msm {
  padding-left: .75rem;
}

.hac {
  height: .125rem;
  background: linear-gradient(to right, var(--gold), var(--gold-l), var(--gold));
}

/* ── Header search ──
   Desktop (>=1024px): input + gold submit button sit between the nav and the
   "Open an Account" CTA. Mobile (<1024px): collapsed to a magnifier icon that
   expands the input inline in the header (.hs.open); Esc collapses it. */
.hs {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 0 1 auto;
  min-width: 0;
  /* Positioning context for the results dropdown panel (#hs-results). */
  position: relative;
}

.hs-toggle,
.hs-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--gray);
  color: var(--navy);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .2s;
}

.hs-toggle:hover,
.hs-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.hs-toggle:focus-visible,
.hs-btn:focus-visible,
.hs-input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.hs-toggle svg,
.hs-btn svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

/* toggle swaps between the magnifier and an X while expanded */
.hs-toggle .hs-ico-close {
  display: none;
}

.hs-toggle[aria-expanded="true"] .hs-ico-open {
  display: none;
}

.hs-toggle[aria-expanded="true"] .hs-ico-close {
  display: block;
}

.hs-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 220px;
  padding: .55rem .85rem;
  border: 1px solid var(--border);
  background: var(--gray);
  font-size: .82rem;
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color .2s;
  appearance: none;
  -webkit-appearance: none;
}

.hs-input::placeholder {
  color: var(--gd);
  opacity: .75;
}

.hs-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, .18);
}

/* Desktop: input + submit always visible; the icon toggle is not needed.
   The input gets a STABLE width here — flex-basis 190px with shrink allowed
   so it never collapses to a sliver (the old `flex: 1 1 auto; max-width:
   220px` let the crowded row crush it to ~39px), while still yielding a few
   px if a very narrow desktop viewport genuinely runs out of room. */
@media (min-width: 1024px) {
  .hs-toggle {
    display: none;
  }

  .hs-input {
    flex: 0 1 190px;
    width: 190px;
    min-width: 0;
    max-width: 190px;
  }
}

/* Mobile: collapsed to an icon; .open expands the input inline */
@media (max-width: 1023px) {
  .hs {
    margin-left: auto;
    margin-right: .5rem;
  }

  .hs-input,
  .hs-btn {
    display: none;
  }

  .hs.open {
    flex: 1 1 auto;
  }

  .hs.open .hs-input,
  .hs.open .hs-btn {
    display: flex;
  }

  .hs.open .hs-input {
    max-width: none;
  }
}

/* ── Header search: results dropdown panel ──
   Rendered by search.js inside #hs-form. Absolutely positioned under the
   input; navy/gold branding, Inter font, `var(--gold)` focus ring. */
.hs-results {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  width: min(30rem, 88vw);
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(8, 14, 31, .18);
  z-index: 90;
  font-family: 'Inter', sans-serif;
  text-align: left;
  color: var(--navy);
}

.hs-results[hidden] {
  display: none;
}

.hs-status {
  padding: .5rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gd);
  border-bottom: 1px solid var(--border);
}

.hs-status[hidden] {
  display: none;
}

.hs-group {
  padding: .25rem 0 .4rem;
  border-bottom: 1px solid var(--border);
}

.hs-group:last-child {
  border-bottom: none;
}

.hs-group-hd {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem .3rem;
}

.hs-group-lbl {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--navy);
}

.hs-group-count {
  background: var(--gold);
  color: var(--navy);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  padding: .22rem .45rem;
  border-radius: 999px;
}

.hs-item {
  display: block;
  padding: .2rem .3rem;
}

.hs-item-main {
  display: block;
  padding: .55rem .85rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .15s, border-color .15s;
}

.hs-item-main:hover,
.hs-item-main:focus-visible {
  background: var(--gray);
  border-left-color: var(--gold);
}

.hs-item-title {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}

.hs-item-excerpt {
  display: block;
  font-size: .78rem;
  color: var(--gd);
  line-height: 1.5;
  margin-top: .15rem;
}

.hs-item-cat {
  display: inline-block;
  margin-top: .3rem;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold-d);
}

.hs-item-dl {
  display: inline-block;
  margin: .1rem .85rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--gold-d);
  text-decoration: underline;
}

.hs-item-dl:hover,
.hs-item-dl:focus-visible {
  color: var(--navy);
}

.hs-mark {
  background: rgba(201, 168, 76, .35);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.hs-loading {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--navy);
}

.hs-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: hs-spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes hs-spin {
  to { transform: rotate(360deg); }
}

.hs-empty {
  padding: 1rem .85rem;
  font-size: .8rem;
  color: var(--gd);
}

.hs-empty p {
  margin: 0 0 .35rem;
}

.hs-empty .hs-empty-hint {
  color: var(--gd);
  font-size: .72rem;
}

.hs-chip {
  display: inline-block;
  margin: .25rem .35rem .1rem 0;
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  background: var(--gray);
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}

.hs-chip:hover,
.hs-chip:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
}

.hs-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem .85rem;
  font-size: .8rem;
  color: var(--gd);
}

.hs-error p {
  margin: 0;
  flex: 1;
}

.hs-retry {
  flex-shrink: 0;
  padding: .4rem .8rem;
  border: 1px solid var(--gold);
  background: #fff;
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: all .15s;
}

.hs-retry:hover,
.hs-retry:focus-visible {
  background: var(--gold);
}

.hs-more {
  display: block;
  width: 100%;
  padding: .6rem;
  border: none;
  border-top: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s;
}

.hs-more:hover,
.hs-more:focus-visible {
  background: var(--gray);
}

/* Mobile: the panel spans the open search width (tap-friendly rows). */
@media (max-width: 1023px) {
  .hs.open .hs-results {
    left: .25rem;
    right: .25rem;
    width: auto;
    max-width: none;
  }
}

/* ── Open an Account button ──
   Scoped under #hdr so the slightly tighter padding wins over index.html's
   stale inline `.oa` rule (same specificity, loaded later). */
#hdr .oa {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.15rem;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: all .3s;
}

#hdr .oa:hover {
  background: var(--navy);
  color: #fff;
}

@media(min-width:1024px) {
  #hdr .oa {
    display: inline-flex;
  }
}

/* ── Open an Account modal ── */
.oa-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 14, 31, .75);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(6px);
}

.oa-modal.open {
  display: flex;
}

.oa-modal-card {
  position: relative;
  background: #fff;
  max-width: 460px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
  animation: oaIn .3s cubic-bezier(.22, 1, .36, 1);
}

@keyframes oaIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.oa-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.oa-close:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.oa-close svg {
  width: 1rem;
  height: 1rem;
}

.oa-head {
  position: relative;
  background: var(--navy);
  padding: 2.5rem 2rem 2.75rem;
  text-align: center;
  overflow: hidden;
}

.oa-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.oa-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
}

.oa-eyebrow::before,
.oa-eyebrow::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: rgba(201, 168, 76, .45);
}

.oa-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
}

.oa-head p {
  font-size: .85rem;
  color: rgba(255, 255, 255, .62);
  line-height: 1.6;
}

.oa-body {
  padding: 1.75rem 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.oa-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: all .22s;
}

.oa-opt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--gold);
  transition: height .22s;
}

.oa-opt:hover {
  border-color: rgba(201, 168, 76, .55);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(20, 26, 46, .1);
}

.oa-opt:hover::before {
  height: 2.2rem;
}

.oa-opt-gold {
  background: linear-gradient(135deg, rgba(201, 168, 76, .13), rgba(226, 199, 122, .04));
  border-color: rgba(201, 168, 76, .35);
}

.oa-opt-gold:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(201, 168, 76, .28);
}

.oa-ico {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .22s;
}

.oa-ico svg {
  width: 1.45rem;
  height: 1.45rem;
}

.oa-opt-gold .oa-ico {
  background: var(--gold);
  color: var(--navy);
}

.oa-opt:hover .oa-ico {
  transform: scale(1.08);
}

.oa-mid {
  flex: 1;
  min-width: 0;
}

.oa-ttl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  font-family: 'Inter', sans-serif;
}

.oa-pill {
  flex-shrink: 0;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: .18rem .55rem;
  background: rgba(46, 204, 153, .14);
  color: #1E9E77;
  border: 1px solid rgba(46, 204, 153, .35);
  border-radius: 99px;
}

.oa-pill-gold {
  background: rgba(201, 168, 76, .15);
  color: var(--gold-d);
  border-color: rgba(201, 168, 76, .45);
}

.oa-dsc {
  display: block;
  font-size: .78rem;
  color: var(--gd);
  margin-top: 3px;
  line-height: 1.55;
}

.oa-go {
  flex-shrink: 0;
  width: 1.95rem;
  height: 1.95rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all .22s;
}

.oa-opt:hover .oa-go {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.oa-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 1.75rem;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid var(--border);
  font-size: .68rem;
  color: var(--gd);
  line-height: 1.5;
  text-align: center;
}

.oa-note svg {
  width: 1rem;
  height: 1rem;
  color: var(--gold);
  flex-shrink: 0;
}

/* ── FOOTER ── */
.ftr {
  background: var(--navy);
  color: #fff;
}

.ftr-link {
  color: rgba(255, 255, 255, .65);
  transition: color .2s;
  text-decoration: none;
}

.ftr-link:hover {
  color: var(--gold);
}

.ftr-divider {
  height: 1px;
  background: rgba(255, 255, 255, .16);
}

/* ── INFO BAND ── */
.ftr-info {
  background: hsl(220, 38%, 13%);
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 1.5rem 0;
}

.ftr-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ftr-info-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 0 1.5rem;
}

.ftr-info-item + .ftr-info-item {
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.ftr-info-ic {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 168, 76, .35);
  background: rgba(201, 168, 76, .08);
  color: var(--gold);
}

.ftr-info-ic svg {
  width: 1rem;
  height: 1rem;
}

.ftr-info-body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

.ftr-info-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}

.ftr-info-val {
  font-size: .75rem;
  color: rgba(255, 255, 255, .67);
  line-height: 1.6;
}

.ftr-info-val a {
  color: rgba(255, 255, 255, .67);
  text-decoration: none;
  transition: color .2s;
}

.ftr-info-val a:hover {
  color: var(--gold);
}

.ftr-info-val .ftr-fat {
  color: rgba(255, 255, 255, .45);
}

/* ── BRAND BAND ── */
.ftr-main {
  padding: 3rem 0 1.5rem;
}

.ftr-main-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
  gap: 2.5rem;
  align-items: start;
}

.ftr-brand-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}

.ftr-brand-logo {
  height: 3.25rem;
  width: auto;
}

.ftr-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
}

.ftr-brand-sub {
  font-size: .58rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: .2rem;
}

.ftr-copy {
  font-size: .74rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.7;
  margin: 0 0 1.25rem;
  max-width: 24rem;
}

.ftr-socials {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.ftr-soc-btn {
  width: 2.35rem;
  height: 2.35rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 6px;
  transition: all .22s;
  text-decoration: none;
}

.ftr-soc-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}

.ftr-soc-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.ftr-jp {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .8rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}

.ftr-jp:hover {
  border-color: var(--gold);
  background: rgba(201, 168, 76, .07);
}

.ftr-jp-img {
  height: 2rem;
  width: auto;
  object-fit: contain;
}

.ftr-jp-txt {
  font-size: .62rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.5;
}

.ftr-jp-txt strong {
  color: rgba(255, 255, 255, .75);
}

/* ── Footer columns (links + contact) ── */
.ftr-hd {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin: 0 0 1.15rem;
  padding-bottom: .55rem;
  position: relative;
}

.ftr-hd::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.5rem;
  height: 2px;
  background: rgba(201, 168, 76, .45);
}

.ftr-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ftr-nav li {
  margin: 0;
}

.ftr-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: .15rem 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  line-height: 1.4;
  transition: color .2s, padding-left .2s;
}

.ftr-nav a:hover {
  color: var(--gold);
  padding-left: .3rem;
}

.ftr-ct {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.ftr-ct-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.5rem;
  text-decoration: none;
  color: rgba(255, 255, 255, .6);
  transition: color .2s;
}

a.ftr-ct-item:hover {
  color: var(--gold);
}

.ftr-ct-ic {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--gold);
}

.ftr-ct-ic svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.ftr-ct-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: .75rem;
  min-width: 0;
}

.ftr-ct-txt strong {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .45);
}

.ftr-ct-txt span {
  word-break: break-word;
}

/* ── Regulator logo strip ── */
.ftr-reg-band {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.ftr-reg-lbl {
  flex-shrink: 0;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .4);
  max-width: 9rem;
  line-height: 1.5;
}

.ftr-reg-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ftr-reg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .6rem;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .22s, background .22s;
}

.ftr-reg img {
  height: 2rem;
  width: auto;
  max-width: 108px;
  object-fit: contain;
  transition: transform .22s, opacity .22s;
}

.ftr-reg:hover {
  border-color: rgba(201, 168, 76, .5);
  background: rgba(201, 168, 76, .06);
  transform: translateY(-2px);
}

/* ── LEGAL BAND ── */
.ftr-legal {
  background: hsl(220, 38%, 12%);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 1.75rem 0;
}

.ftr-legal-grid {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 2.5rem;
  align-items: start;
}

.ftr-legal-grid .ftr-hd {
  margin-bottom: .9rem;
}

.ftr-legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.ftr-legal-list li {
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.65;
  padding-left: .65rem;
  border-left: 2px solid rgba(201, 168, 76, .3);
}

.ftr-legal-text {
  font-size: .71rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.75;
  margin: 0 0 .85rem;
}

.ftr-legal-text:last-child {
  margin-bottom: 0;
}

/* ── VENDOR BAR ── */
.ftr-vendor {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .18);
  padding: .7rem 0;
}

.ftr-vendor-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .35);
}

.ftr-vendor-in strong {
  color: rgba(255, 255, 255, .52);
  font-weight: 600;
}

/* ── COPYRIGHT BAR ── */
.ftr-copybar {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: .8rem 0;
}

.ftr-copybar-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  font-size: .71rem;
  color: rgba(255, 255, 255, .38);
}

.ftr-copybar-txt {
  margin: 0;
}

.ftr-copybar-links {
  display: flex;
  gap: 1.4rem;
}

.ftr-copybar-link {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: rgba(255, 255, 255, .38);
  text-decoration: none;
  transition: color .2s;
}

.ftr-copybar-link:hover {
  color: var(--gold);
}

/* ── RESPONSIVE ── */
@media (max-width: 1023px) {
  .ftr-info-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.25rem;
  }

  .ftr-info-item + .ftr-info-item:nth-child(3) {
    border-left: 0;
  }

  .ftr-info-item {
    padding: 0;
  }

  .ftr-main-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .ftr-reg-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .ftr-reg-row {
    justify-content: flex-start;
  }

  .ftr-legal-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

@media (max-width: 599px) {
  .ftr-info-grid {
    grid-template-columns: 1fr;
  }

  .ftr-info-item + .ftr-info-item:nth-child(3) {
    border-left: 0;
  }

  .ftr-info-item {
    padding: 0;
  }

  .ftr-main-grid {
    grid-template-columns: 1fr;
  }

  .ftr-reg-row {
    justify-content: center;
  }

  .ftr-reg {
    padding: .4rem .5rem;
  }

  .ftr-reg img {
    max-width: 88px;
  }

  .ftr-copybar-in {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
  }

  .ftr-socials {
    flex-wrap: wrap;
  }
}

/* ── Dropdown animation (matches index.html) ── */
@keyframes ddi {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   FAQ CHATBOT WIDGET — floating assistant (bottom-right corner).
   Markup + logic are injected by components.js. Ships with static FAQ
   answers; connect a backend by setting CONFIG.apiUrl in components.js.
   ========================================================================== */

#yhc-launcher {
  position: fixed;
  right: 1.5rem;
  bottom: 2.5rem;
  z-index: 90;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(10, 17, 36, .38);
  transition: transform .25s, box-shadow .25s;
}

#yhc-launcher:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(10, 17, 36, .48);
}

/* "Need help?" tooltip pill — classic chat-widget style */
.yhc-launcher-tip {
  position: absolute;
  right: calc(100% + .6rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .4rem .8rem;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 8px 24px rgba(8, 14, 31, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}

.yhc-launcher-tip::after {
  content: "";
  position: absolute;
  right: -.3rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: .55rem;
  height: .55rem;
  background: #fff;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

#yhc-launcher:hover .yhc-launcher-tip,
#yhc-launcher:focus-visible .yhc-launcher-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(-3px);
}

#yhc-launcher.open .yhc-launcher-tip {
  display: none;
}

#yhc-launcher svg {
  width: 1.55rem;
  height: 1.55rem;
  stroke-width: 2;
}

#yhc-launcher .yhc-launcher-close {
  display: none;
}

#yhc-launcher.open .yhc-launcher-chat {
  display: none;
}

#yhc-launcher.open .yhc-launcher-close {
  display: block;
}

/* pulsing "attention" dot until the chat is opened */
.yhc-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: #2ECC9A;
  border: 2px solid #fff;
  animation: yhcPing 1.6s ease-out infinite;
}

#yhc-launcher.open .yhc-badge {
  display: none;
}

@keyframes yhcPing {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 204, 153, .5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(46, 204, 153, 0);
  }
}

/* ── Window ── */
#yhc-window {
  position: fixed;
  right: 1.5rem;
  bottom: 5.4rem;
  z-index: 90;
  width: 22.5rem;
  max-width: calc(100vw - 2rem);
  height: 33rem;
  max-height: calc(100vh - 8rem);
  display: none;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(8, 14, 31, .38);
  border: 1px solid rgba(255, 255, 255, .06);
  transform-origin: bottom right;
}

#yhc-window.open {
  display: flex;
  animation: yhcIn .28s cubic-bezier(.22, 1, .36, 1);
}

@keyframes yhcIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Header ── */
.yhc-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  background: var(--navy);
  color: #fff;
  position: relative;
}

.yhc-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.yhc-head-av {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.yhc-head-av svg {
  width: 1.25rem;
  height: 1.25rem;
}

.yhc-head-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.yhc-head-name {
  font-size: .875rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
}

.yhc-head-sub {
  font-size: .68rem;
  color: rgba(255, 255, 255, .6);
}

.yhc-head-close {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .8);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.yhc-head-close:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* ── Body / messages ── */
.yhc-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: #F7F4EC;
}

.yhc-msgs {
  display: flex;
  flex-direction: column;
}

.yhc-msg {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  margin-bottom: .8rem;
}

.yhc-msg--bot {
  justify-content: flex-start;
}

.yhc-msg--user {
  justify-content: flex-end;
}

.yhc-av {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.yhc-av svg {
  width: 1rem;
  height: 1rem;
}

.yhc-bubble {
  max-width: 82%;
  padding: .6rem .85rem;
  font-size: .82rem;
  line-height: 1.55;
  border-radius: 12px;
  word-break: break-word;
}

.yhc-msg--bot .yhc-bubble {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.yhc-faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  padding: .6rem .85rem;
  text-align: left;
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.yhc-faq-head:hover {
  border-color: rgba(201, 168, 76, .7);
}

.yhc-msg--faq.open .yhc-faq-head {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.yhc-faq-q {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
}

.yhc-faq-chev {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: transform .3s, background .3s, border-color .3s;
}

.yhc-msg--faq.open .yhc-faq-chev {
  transform: rotate(180deg);
  background: var(--gold);
  border-color: var(--gold);
}

.yhc-faq-body {
  display: none;
}

.yhc-msg--faq.open .yhc-faq-body {
  display: block;
  animation: yhcFaqIn .25s ease;
}

@keyframes yhcFaqIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.yhc-msg--user .yhc-bubble {
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* quick-reply chips */
.yhc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .8rem;
  margin-left: 2.4rem;
}

.yhc-chip {
  padding: .4rem .7rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(201, 168, 76, .55);
  border-radius: 99px;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Inter', sans-serif;
}

.yhc-chip:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.yhc-chips--loading {
  font-size: .72rem;
  color: var(--gd);
  padding: .2rem 0;
}

/* typing indicator */
.yhc-typing {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .6rem .85rem;
}

.yhc-typing i {
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--gd);
  animation: yhcBlink 1.2s infinite;
}

.yhc-typing i:nth-child(2) {
  animation-delay: .2s;
}

.yhc-typing i:nth-child(3) {
  animation-delay: .4s;
}

@keyframes yhcBlink {
  0%,
  80%,
  100% {
    opacity: .25;
  }
  40% {
    opacity: 1;
  }
}

/* ── Input ── */
.yhc-input {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem;
  border-top: 1px solid var(--border);
  background: #fff;
}

.yhc-input input {
  flex: 1;
  min-width: 0;
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: .82rem;
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  outline: none;
  transition: border-color .2s;
  background: #F7F4EC;
}

.yhc-input input:focus {
  border-color: rgba(201, 168, 76, .7);
}

.yhc-send {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.yhc-send:hover {
  background: var(--gold);
  color: var(--navy);
}

.yhc-send svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* ── FAQ answer: media + action buttons ── */
.yhc-bubble-col {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 82%;
  min-width: 0;
}

.yhc-bubble-col .yhc-bubble {
  max-width: 100%;
}

.yhc-bubble-img {
  display: block;
  width: 100%;
  max-height: 10rem;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.yhc-actions {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.yhc-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .5rem .85rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(201, 168, 76, .55);
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  transition: all .2s;
}

.yhc-action:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.yhc-action--wa {
  border-color: rgba(46, 204, 153, .5);
  background: rgba(46, 204, 153, .08);
  color: #1E9E77;
}

.yhc-action--wa:hover {
  background: #2ECC9A;
  border-color: #2ECC9A;
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  #yhc-launcher {
    right: .85rem;
    bottom: 1.25rem;
  }

  .yhc-launcher-tip {
    display: none;
  }

  #yhc-window {
    right: .75rem;
    bottom: 4.9rem;
    width: calc(100vw - 1.5rem);
    height: calc(100vh - 7.5rem);
    max-height: none;
  }
}