/* ============================================================
   Veilong Footer — navy / gold, Sora
   Minimalist pass: flat navy, no texture/brackets/stripes.
   Structure only, generous whitespace, restraint over decoration.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

.vf{
  --navy:#12294A;
  --navy-deep:#0B1620;
  --gold:#E8C766;
  --gold-lt:#F0D68A;
  --muted:#8FA0BC;
  --line:rgba(255,255,255,.09);

  font-family:'Sora',system-ui,-apple-system,sans-serif;
  background:var(--navy-deep);
  color:#fff;
  -webkit-font-smoothing:antialiased;

  /* full-bleed is handled in JS (see vf.js) — the parent chain on this
     site includes a flex item whose width is flex-computed rather than
     an explicit CSS value, which makes percentage-based margin tricks
     (including the calc(50% - 50vw) technique) resolve against 0
     instead of the visible width. JS measures real pixels instead. */
  width:100%;
  overflow-x:hidden;
}
.vf *{ box-sizing:border-box; }

/* content itself stays capped and centered inside the full-bleed band */
.vf-wrap{ max-width:1440px; margin:0 auto; padding:0 32px; }

/* ================= NEWSLETTER CARD ================= */
.vf-nl-wrap{
  position:relative; z-index:2;
  margin-top:-64px; /* pulls the card up to overlap whatever sits above the footer */
  padding-bottom:0;
}
.vf-nl{
  display:grid; grid-template-columns:.85fr 1.15fr;
  align-items:stretch;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius:22px;
  box-shadow:0 24px 60px -18px rgba(5,12,24,.55);
  overflow:hidden;
}

.vf-nl-media{ position:relative; min-height:220px; background:rgba(255,255,255,.03); }
.vf-nl-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vf-nl-placeholder{
  position:absolute; inset:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border:1.5px dashed rgba(232,199,102,.35); border-radius:14px;
  color:rgba(232,199,102,.55); text-align:center; padding:20px;
}
.vf-nl-placeholder svg{ width:34px; height:34px; opacity:.8; }
.vf-nl-placeholder span{ font-size:11.5px; font-weight:500; max-width:26ch; line-height:1.5; }

.vf-nl-content{ padding:44px 46px; display:flex; flex-direction:column; justify-content:center; }
.vf-nl-content h3{
  margin:0 0 10px; font-size:24px; font-weight:800; color:#fff; line-height:1.28; letter-spacing:-.01em;
}
.vf-nl-content > p{ margin:0 0 22px; font-size:13.5px; color:var(--muted); line-height:1.6; max-width:44ch; }

.vf-nl-form{ display:flex; gap:10px; max-width:440px; }
.vf-nl-input{
  flex:1; display:flex; align-items:center; gap:9px;
  background:#fff; border-radius:11px; padding:0 14px; height:48px;
  color:var(--navy);
}
.vf-nl-input svg{ width:17px; height:17px; color:var(--muted); flex-shrink:0; }
.vf-nl-input input{
  flex:1; border:0; outline:0; height:100%; font-family:inherit; font-size:13.5px;
  color:var(--navy); background:transparent;
}
.vf-nl-input input::placeholder{ color:#A6ADB8; }
.vf-nl-form button{
  background:var(--gold); color:var(--navy-deep); border:0; border-radius:11px;
  padding:0 22px; height:48px; font-family:inherit; font-weight:700; font-size:13.5px;
  cursor:pointer; white-space:nowrap; transition:background .16s ease, transform .12s ease;
}
.vf-nl-form button:hover{ background:var(--gold-lt); }
.vf-nl-form button:active{ transform:translateY(1px); }

.vf-nl-fine{ margin:14px 0 0; font-size:11.5px; color:var(--muted); opacity:.8; }
.vf-nl-fine a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.vf-nl-fine a:hover{ color:#fff; }

/* ================= MAIN GRID ================= */
.vf-main{
  display:grid;
  grid-template-columns:1.25fr .75fr 1fr .95fr;
  gap:48px;
  padding:72px 32px 44px;
}
.vf-col{ min-width:0; }

/* --- brand --- */
.vf-logo{ display:inline-block; margin-bottom:18px; }
.vf-logo img{ height:52px; width:auto; display:block; filter:brightness(0) invert(1); opacity:.94; }
.vf-desc{
  font-size:13.5px; line-height:1.75; color:var(--muted);
  max-width:36ch; margin:0 0 24px; font-weight:400;
}
.vf-social{ display:flex; gap:16px; }
.vf-soc{
  color:var(--muted); text-decoration:none;
  transition:color .18s ease, transform .18s ease;
  display:inline-flex;
}
.vf-soc svg{ width:18px; height:18px; }
.vf-soc:hover{ color:var(--gold); transform:translateY(-1px); }

/* --- column headings --- */
.vf-col-h{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; background:none; border:0; padding:0 0 20px; margin:0;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; opacity:.55; cursor:default; text-align:left;
}
.vf-chev{ display:none; width:14px; height:14px; flex-shrink:0; }

.vf-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.vf-list a, .vf-linklike{
  font-family:inherit; background:none; border:0; padding:0; text-align:left;
  font-size:13.5px; color:var(--muted); text-decoration:none; cursor:pointer;
  transition:color .16s ease; display:inline-block; font-weight:400;
}
.vf-list a:hover, .vf-linklike:hover{ color:#fff; }

/* --- categories: fade + scroll if the list runs long --- */
.vf-cats .vf-list{ max-height:220px; overflow-y:auto; padding-right:6px; }
.vf-cats .vf-list::-webkit-scrollbar{ width:3px; }
.vf-cats .vf-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:4px; }

/* --- we accept: icon + label rows, same rhythm as a "Contact Us" list --- */
.vf-pay-list{ gap:15px; }
.vf-pay-list li{ display:flex; align-items:center; gap:11px; }
.vf-pay-ico{
  width:30px; height:30px; flex-shrink:0; border-radius:8px;
  background:rgba(232,199,102,.10); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.vf-pay-ico svg{ width:15px; height:15px; }
.vf-pay-list li span:last-child{ font-size:13.5px; color:var(--muted); font-weight:400; }

/* ================= BOTTOM BAR ================= */
.vf-bottom{
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:22px 32px 26px;
}
.vf-copy{ margin:0; font-size:12px; color:var(--muted); font-weight:400; }

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .vf-main{ grid-template-columns:1fr 1fr; row-gap:40px; padding:56px 28px 36px; }
  .vf-brand{ grid-column:1 / -1; }

  .vf-nl-wrap{ margin-top:-40px; }
  .vf-nl{ grid-template-columns:1fr; }
  .vf-nl-media{ min-height:160px; }
  .vf-nl-content{ padding:32px 30px; }
}

@media (max-width:640px){
  .vf-main{ grid-template-columns:1fr; padding:48px 22px 6px; gap:0; }
  .vf-brand{ margin-bottom:32px; }
  .vf-desc{ max-width:none; }

  /* accordion behaviour on mobile */
  .vf-col:not(.vf-brand){ border-top:1px solid var(--line); }
  .vf-col:last-of-type{ border-bottom:1px solid var(--line); }
  .vf-col-h{ cursor:pointer; padding:18px 0; opacity:.6; }
  .vf-chev{ display:block; }
  .vf-col:not(.is-open) .vf-chev{ transform:rotate(-90deg); }
  .vf-col:not(.is-open) .vf-list{ display:none; }
  .vf-list{ padding-bottom:20px; }
  .vf-cats .vf-list{ max-height:none; }

  .vf-bottom{ flex-direction:column; align-items:flex-start; gap:16px; padding:20px 22px 24px; }

  .vf-nl-wrap{ margin-top:0; padding-top:24px; }
  .vf-nl{ border-radius:18px; }
  .vf-nl-content{ padding:26px 22px 30px; }
  .vf-nl-content h3{ font-size:20px; }
  .vf-nl-form{ flex-direction:column; max-width:none; }
  .vf-nl-form button{ height:46px; }
}