/* ==========================================================================
   Vincent Vacations — Adventures by Disney Luxury Content System (2026–2027)
   Built to modern-web-guidance standards:
   - responsive-table (@container stacked cards + sticky headers)
   - accordion (native <details>, ::details-content, mask chevron, toggle-all)
   - search-hidden-content (native <details> find-in-page support)
   - html (semantic landmarks, custom property state, reduced-motion guards)
   ========================================================================== */

:root {
  --vv-navy-950: #091929;
  --vv-navy-900: #0f2942;
  --vv-navy-800: #173a5c;
  --vv-ocean-600: #0077a8;
  --vv-ocean-500: #0094c9;
  --vv-gold-600: #a67f16;
  --vv-gold-500: #c59b27;
  --vv-gold-100: #fbf6e8;
  --vv-ivory-50: #fcfbf8;
  --vv-slate-50: #f4f7fa;
  --vv-slate-100: #e8eef4;
  --vv-slate-200: #d3dde8;
  --vv-slate-600: #47586b;
  --vv-slate-800: #1e2d3d;
  --vv-white: #ffffff;
  --vv-emerald-700: #0f6848;
  --vv-emerald-50: #edf8f3;

  --vv-font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vv-font-serif: Georgia, "Times New Roman", serif;

  --vv-radius-sm: 0.5rem;
  --vv-radius-md: 0.875rem;
  --vv-radius-lg: 1.25rem;
  --vv-shadow-sm: 0 2px 8px rgba(9, 25, 41, 0.06);
  --vv-shadow-md: 0 10px 30px rgba(9, 25, 41, 0.09);
  --vv-max-w: 76rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--vv-font-sans);
  line-height: 1.65;
  color: var(--vv-slate-800);
  background-color: var(--vv-ivory-50);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  padding: 0;
}

a {
  color: var(--vv-ocean-600);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--vv-navy-900);
}

:focus-visible {
  outline: 3px solid var(--vv-ocean-500);
  outline-offset: 3px;
}

/* Skip Link for Keyboard Accessibility */
.skip-link {
  position: absolute;
  inset-block-start: -10rem;
  inset-inline-start: 1rem;
  z-index: 1000;
  background: var(--vv-navy-950);
  color: var(--vv-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--vv-radius-sm);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: 1rem;
}

.container {
  max-inline-size: var(--vv-max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* ==========================================================================
   Site Header & Top Trust Bar
   ========================================================================== */
.site-header {
  background: var(--vv-white);
  border-block-end: 1px solid var(--vv-slate-200);
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  box-shadow: var(--vv-shadow-sm);
}

.trust-bar {
  background: var(--vv-navy-950);
  color: var(--vv-white);
  font-size: 0.85rem;
  padding-block: 0.45rem;
}

.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.trust-phone {
  color: #ffd970;
  font-weight: 700;
  text-decoration: none;
}

.trust-phone:hover {
  color: var(--vv-white);
  text-decoration: underline;
}

.header-nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.brand-logo {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--vv-navy-900);
}

.brand-logo-img {
  block-size: 2.375rem;
  inline-size: auto;
  display: block;
}

.brand-logo-title {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
}

.brand-logo-sub {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vv-gold-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--vv-navy-900);
}

.primary-nav a:hover {
  color: var(--vv-ocean-600);
}

.header-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

/* Buttons & Link CTAs */
.btn-primary,
.btn-secondary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  border-radius: var(--vv-radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--vv-gold-500);
  color: var(--vv-navy-950);
}

.btn-primary:hover {
  background: #d8ac31;
  color: var(--vv-navy-950);
}

.btn-secondary {
  background: var(--vv-ocean-600);
  color: var(--vv-white);
}

.btn-secondary:hover {
  background: var(--vv-navy-800);
  color: var(--vv-white);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--vv-white);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--vv-white);
}

/* ==========================================================================
   Breadcrumbs & Hero Banner
   ========================================================================== */
.breadcrumb-nav {
  background: var(--vv-slate-50);
  border-block-end: 1px solid var(--vv-slate-200);
  padding-block: 0.6rem;
  font-size: 0.875rem;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-list li + li::before {
  content: "/";
  color: var(--vv-slate-600);
  margin-inline-end: 0.45rem;
}

.hero-banner {
  background: linear-gradient(135deg, var(--vv-navy-950) 0%, var(--vv-navy-900) 58%, var(--vv-navy-800) 100%);
  color: var(--vv-white);
  padding-block: clamp(2.5rem, 5vw, 4.25rem);
  border-block-end: 4px solid var(--vv-gold-500);
}

.hero-eyebrow {
  display: inline-block;
  background: rgba(197, 155, 39, 0.22);
  border: 1px solid rgba(255, 217, 112, 0.5);
  color: #ffe394;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-block-end: 1rem;
}

.hero-banner h1 {
  font-size: clamp(1.95rem, 3.8vw, 2.95rem);
  line-height: 1.18;
  margin-block: 0 1rem;
  max-inline-size: 26ch;
}

.hero-subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: #e2ecf5;
  max-inline-size: 68ch;
  margin-block: 0 1.65rem;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-block-end: 2.25rem;
}

.quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-fact-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--vv-radius-md);
  padding: 1rem 1.15rem;
}

.quick-fact-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #ffd970;
  margin-block-end: 0.25rem;
}

.quick-fact-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--vv-white);
}

/* ==========================================================================
   Main Two-Column Editorial + Sticky TOC/Concierge Rail
   ========================================================================== */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 66rem) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
  }
}

.content-article > section + section {
  margin-block-start: 2.75rem;
}

.content-article h2 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  color: var(--vv-navy-900);
  line-height: 1.25;
  margin-block: 0 1rem;
  padding-block-end: 0.45rem;
  border-block-end: 2px solid var(--vv-slate-200);
}

.content-article h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.38rem);
  color: var(--vv-navy-800);
  line-height: 1.3;
  margin-block: 1.5rem 0.65rem;
}

.content-article p {
  margin-block: 0 1.1rem;
  font-size: 1.04rem;
}

/* Signature Travel Network Advantage Callout Box */
.signature-box {
  background: var(--vv-white);
  border: 2px solid var(--vv-gold-500);
  border-radius: var(--vv-radius-lg);
  padding: clamp(1.35rem, 3vw, 2.1rem);
  box-shadow: var(--vv-shadow-md);
}

.signature-kicker {
  display: inline-block;
  background: var(--vv-gold-100);
  color: var(--vv-navy-900);
  border: 1px solid var(--vv-gold-500);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--vv-radius-sm);
  margin-block-end: 0.75rem;
}

.perks-checklist {
  list-style: none;
  padding: 0;
  margin-block: 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.perks-checklist li {
  position: relative;
  padding-inline-start: 1.85rem;
  font-weight: 500;
}

.perks-checklist li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.1rem;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border-radius: 50%;
  background: var(--vv-emerald-50);
  color: var(--vv-emerald-700);
  font-weight: 900;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.partner-hotels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin-block-start: 1.25rem;
}

.partner-hotel-card {
  background: var(--vv-gold-100);
  border: 1px solid #ead8a4;
  border-radius: var(--vv-radius-md);
  padding: 1rem 1.15rem;
}

.partner-hotel-city {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vv-gold-600);
}

.partner-hotel-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--vv-navy-900);
  margin-block: 0.2rem 0.35rem;
}

.partner-hotel-perk {
  margin: 0;
  font-size: 0.92rem;
  color: var(--vv-slate-800);
}

/* Subheading Cards inside Deep Sections */
.subheading-card {
  background: var(--vv-white);
  border: 1px solid var(--vv-slate-200);
  border-radius: var(--vv-radius-md);
  padding: 1.25rem 1.4rem;
  margin-block-start: 1.25rem;
  box-shadow: var(--vv-shadow-sm);
}

.subheading-card h3 {
  margin-block-start: 0;
}

.subheading-card ul {
  margin-block: 0.75rem 0;
  padding-inline-start: 1.25rem;
}

.subheading-card li + li {
  margin-block-start: 0.4rem;
}

/* ==========================================================================
   Responsive Data Tables (modern-web-guidance: responsive-table)
   - Sticky column headers (thead) & sticky row headers (tbody th)
   - @container (width < 600px) stacked card layout with CSS variable labels
   ========================================================================== */
.table-wrapper {
  overflow: auto;
  max-inline-size: 100%;
  max-block-size: min(560px, 80vh);
  container-type: inline-size;
  border: 1px solid var(--vv-slate-200);
  border-radius: var(--vv-radius-md);
  background: var(--vv-white);
  box-shadow: var(--vv-shadow-sm);
  margin-block: 1.25rem;
}

.table-wrapper table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

.table-wrapper caption {
  text-align: start;
  font-weight: 800;
  font-size: 1rem;
  color: var(--vv-navy-900);
  background: var(--vv-slate-50);
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--vv-slate-200);
}

/* Sticky column headers (desktop) */
.table-wrapper thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

.table-wrapper thead th {
  background: var(--vv-navy-900);
  color: var(--vv-white);
  font-weight: 700;
  text-align: start;
  padding: 0.8rem 1rem;
  border-block-end: 2px solid var(--vv-gold-500);
  white-space: nowrap;
}

/* Sticky row headers (desktop) */
.table-wrapper tbody th {
  position: sticky;
  inset-inline-start: 0;
  background: var(--vv-white);
  color: var(--vv-navy-900);
  font-weight: 700;
  text-align: start;
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--vv-slate-100);
  border-inline-end: 1px solid var(--vv-slate-100);
}

.table-wrapper tbody tr:nth-child(even) th {
  background: var(--vv-slate-50);
}

.table-wrapper tbody tr:nth-child(even) td {
  background: var(--vv-slate-50);
}

.table-wrapper tbody td {
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--vv-slate-100);
  vertical-align: top;
}

@container (width < 600px) {
  .table-wrapper table,
  .table-wrapper thead,
  .table-wrapper tbody,
  .table-wrapper tr,
  .table-wrapper th,
  .table-wrapper td {
    display: block;
  }

  .table-wrapper thead {
    /* MANDATORY: Hide column header from layout and screen readers. */
    display: none;
  }

  .table-wrapper tbody tr {
    margin: 0.85rem;
    border: 1px solid var(--vv-slate-200);
    border-radius: var(--vv-radius-sm);
    overflow: hidden;
  }

  /* Sticky row headers at the top of each block/card */
  .table-wrapper tbody th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--vv-navy-900);
    color: var(--vv-white);
    border-inline-end: none;
  }

  .table-wrapper tbody tr:nth-child(even) th {
    background: var(--vv-navy-900);
  }

  .table-wrapper tbody td {
    padding: 0.65rem 0.9rem;
  }

  .table-wrapper td:nth-child(2)::before {
    content: var(--label-2) ": ";
    font-weight: 700;
    color: var(--vv-navy-900);
  }

  .table-wrapper td:nth-child(3)::before {
    content: var(--label-3) ": ";
    font-weight: 700;
    color: var(--vv-navy-900);
  }

  .table-wrapper td:nth-child(4)::before {
    content: var(--label-4) ": ";
    font-weight: 700;
    color: var(--vv-navy-900);
  }

  .table-wrapper td:nth-child(5)::before {
    content: var(--label-5) ": ";
    font-weight: 700;
    color: var(--vv-navy-900);
  }

  .table-wrapper td:nth-child(6)::before {
    content: var(--label-6) ": ";
    font-weight: 700;
    color: var(--vv-navy-900);
  }
}

/* ==========================================================================
   Certified Specialist Spotlight (<figure> + <blockquote> + <figcaption>)
   ========================================================================== */
.advisor-spotlight-figure {
  margin: 2rem 0;
  background: linear-gradient(135deg, var(--vv-navy-900), var(--vv-navy-800));
  color: var(--vv-white);
  border-radius: var(--vv-radius-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
  border-inline-start: 6px solid var(--vv-gold-500);
  box-shadow: var(--vv-shadow-md);
}

.advisor-spotlight-figure blockquote {
  margin: 0 0 1.15rem;
  font-family: var(--vv-font-serif);
  font-size: 1.1rem;
  line-height: 1.65;
  color: #f4f7fb;
}

.advisor-spotlight-figure blockquote p {
  margin: 0;
}

.advisor-spotlight-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
  padding-block-start: 1rem;
}

.advisor-meta strong {
  display: block;
  font-size: 1.05rem;
  color: #ffd970;
}

.advisor-meta span {
  font-size: 0.9rem;
  color: #d6e4f2;
}

/* ==========================================================================
   FAQ Accordion (modern-web-guidance: accordion + search-hidden-content)
   - Adjacent non-exclusive <details> elements (searchable via Find-in-Page)
   - Zero headings inside <summary>
   - Custom rotating mask chevron placed directly before label text
   - Progressive ::details-content slide transition
   ========================================================================== */
.accordion {
  background: var(--vv-white);
  border: 1px solid var(--vv-slate-200);
  border-radius: var(--vv-radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--vv-shadow-sm);
}

.accordion-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1rem;
}

.accordion-header-row h2 {
  margin: 0;
  border: none;
  padding: 0;
}

.btn-toggle-all {
  background: var(--vv-slate-50);
  color: var(--vv-navy-900);
  border: 1px solid var(--vv-slate-200);
  border-radius: var(--vv-radius-sm);
  padding: 0.45rem 0.9rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-toggle-all:hover {
  background: var(--vv-slate-100);
}

/* Show the label for the action the button will perform */
[command="--toggle-all"][aria-expanded="true"] .expand,
[command="--toggle-all"][aria-expanded="false"] .collapse {
  display: none;
}

.accordion > details {
  border-block-start: 1px solid var(--vv-slate-200);
}

.accordion > details:last-of-type {
  border-block-end: 1px solid var(--vv-slate-200);
}

.accordion summary {
  /* Removes the default triangle */
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.65ch;
  padding: 1rem 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--vv-navy-900);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary:where(:not([aria-disabled="true"])) {
  cursor: pointer;
}

.accordion summary:where(:not([aria-disabled="true"])):hover {
  background: var(--vv-slate-50);
}

.accordion summary::before {
  content: "";
  inline-size: 1.1em;
  block-size: 1.1em;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.3 8.7a1 1 0 0 1 1.4 0L12 13l4.3-4.3a1 1 0 1 1 1.4 1.4l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") no-repeat center / contain;
  rotate: -90deg;
}

.accordion summary:dir(rtl)::before {
  rotate: 90deg;
}

.accordion details[open] > summary::before {
  rotate: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .accordion summary::before {
    transition: rotate 0.2s;
  }
}

.accordion details::details-content {
  interpolate-size: allow-keywords;
  overflow: clip;
  contain: layout;
}

.accordion details:not([open])::details-content {
  block-size: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .accordion details::details-content {
    transition: block-size, content-visibility, display;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-behavior: allow-discrete;
  }
}

.faq-answer {
  padding: 0 0.5rem 1.15rem 1.85rem;
  color: var(--vv-slate-800);
}

.faq-answer p {
  margin: 0;
}

/* ==========================================================================
   Sidebar Concierge & Related Guides
   ========================================================================== */
.concierge-rail {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 66rem) {
  .concierge-rail {
    position: sticky;
    inset-block-start: 5.5rem;
  }
}

.rail-card {
  background: var(--vv-white);
  border: 1px solid var(--vv-slate-200);
  border-radius: var(--vv-radius-md);
  padding: 1.35rem;
  box-shadow: var(--vv-shadow-sm);
}

.rail-card-dark {
  background: var(--vv-navy-900);
  color: var(--vv-white);
  border-color: var(--vv-gold-500);
}

.rail-card h2 {
  font-size: 1.12rem;
  margin-block: 0 0.75rem;
}

.rail-card-dark h2 {
  color: #ffd970;
}

.rail-card p {
  font-size: 0.93rem;
  margin-block: 0 1rem;
}

.rail-toc-list,
.rail-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.92rem;
}

.rail-toc-list a,
.rail-links-list a {
  text-decoration: none;
  font-weight: 600;
}

.rail-toc-list a:hover,
.rail-links-list a:hover {
  text-decoration: underline;
}

/* Related Silo Cards Grid */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
  margin-block-start: 1rem;
}

.related-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--vv-white);
  border: 1px solid var(--vv-slate-200);
  border-radius: var(--vv-radius-md);
  padding: 1.15rem;
  text-decoration: none;
  color: var(--vv-navy-900);
  box-shadow: var(--vv-shadow-sm);
}

.related-card:hover {
  border-color: var(--vv-ocean-500);
  box-shadow: var(--vv-shadow-md);
}

.related-card-silo {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vv-ocean-600);
  margin-block-end: 0.35rem;
}

.related-card-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  margin-block-end: 0.65rem;
}

.related-card-cta {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--vv-gold-600);
}

/* ==========================================================================
   Bottom Conversion Banner & Global Site Footer
   ========================================================================== */
.bottom-cta-banner {
  background: linear-gradient(135deg, var(--vv-navy-950), var(--vv-navy-800));
  color: var(--vv-white);
  border-radius: var(--vv-radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-block-start: 3rem;
  text-align: center;
}

.bottom-cta-banner h2 {
  color: var(--vv-white);
  border: none;
  margin-block: 0 0.75rem;
}

.bottom-cta-banner p {
  color: #dce8f5;
  max-inline-size: 62ch;
  margin-inline: auto;
  margin-block-end: 1.5rem;
}

.bottom-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.site-footer {
  background: var(--vv-navy-950);
  color: #d3e0ed;
  padding-block: 3rem 2rem;
  border-block-start: 4px solid var(--vv-gold-500);
  margin-block-start: 3rem;
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  padding-block-end: 2rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffd970;
  margin-block: 0 0.85rem;
}

.site-footer address {
  font-style: normal;
  line-height: 1.6;
  margin-block-end: 0.85rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.site-footer a {
  color: #e6eff8;
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffd970;
  text-decoration: underline;
}

.footer-legal {
  padding-block-start: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.84rem;
  color: #9cb2c9;
}

/* ==========================================================================
   Index Hub Specific Filter Controls (<search> landmark)
   ========================================================================== */
.hub-sections {
  padding-block: 2.5rem 3.5rem;
  display: grid;
  gap: 3rem;
}

.hub-search-bar {
  background: var(--vv-white);
  border: 1px solid var(--vv-slate-200);
  border-radius: var(--vv-radius-md);
  padding: 1.15rem 1.35rem;
  box-shadow: var(--vv-shadow-sm);
  margin-block-end: 1.75rem;
}

.hub-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.hub-search-form label {
  font-weight: 700;
  color: var(--vv-navy-900);
}

.hub-search-form input[type="search"],
.hub-search-form select {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--vv-slate-200);
  border-radius: var(--vv-radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  min-inline-size: 16rem;
  flex: 1 1 16rem;
}