:root {
  --navy: #0b1f3a;
  --navy2: #112f55;
  --navy3: #0e2747;
  --gold: #D4AF37;
  --gold2: #B8962E;
  --light: #f5f7fb;
  --panel: #eef1f8;
  --text: #172033;
  --muted: #586174;
  --green: #25D366;
  --border: #dbe1ea;
  --overlay-navy: linear-gradient(135deg, rgba(11, 31, 58, .92), rgba(17, 47, 85, .84));
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--light);
}

html {
  scroll-behavior: smooth;
}

/* ============ Motion & micro-interactions ============ */

/* Scroll-reveal: cards/columns/accordion items fade + rise into place as
   they enter the viewport. The .reveal class is added by main.js, so with
   JavaScript disabled everything just stays at full opacity. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero / page-header content animates in immediately on load. */
.hero-anim {
  opacity: 0;
  transform: translateY(16px);
  animation: heroRise .7s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes heroRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sticky header gains depth once the page scrolls. */
.site-header .navbar {
  transition: box-shadow .25s ease, padding .25s ease;
}

.site-header.is-scrolled .navbar {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Buttons: lift on hover, settle on click. */
.btn {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease,
    box-shadow .15s ease, transform .15s ease;
}

.btn-gold:hover,
.btn-navy:hover,
.btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12, 31, 58, .22);
}

.btn:active {
  transform: translateY(0);
}

/* Stat icons: subtle pop on hover. */
.stat-icon {
  transition: transform .25s ease, background .25s ease;
}

.trust-band .col:hover .stat-icon {
  transform: scale(1.08) translateY(-2px);
  background: rgba(255, 255, 255, .2);
}

/* Floating back-to-top button, injected by main.js. */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .15s ease;
  z-index: 1070;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--gold);
  color: var(--navy);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Respect visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .reveal,
  .hero-anim,
  .btn,
  .stat-icon,
  .back-to-top,
  .site-header .navbar,
  .video-btn,
  .card-hover {
    transition: none !important;
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-anim {
    opacity: 1;
    transform: none;
  }
}

a {
  text-decoration: none;
}

h1, h2, h3 {
  color: var(--navy);
}

section {
  padding: 54px 0;
}

.section-alt {
  background: #fff;
}

.muted {
  color: var(--muted);
}

/* Header / navbar */
.site-header .navbar {
  background: var(--navy);
  padding-top: .7rem;
  padding-bottom: .7rem;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .16);
}

/* Logo — shown on a light plate so it stays legible on navy backgrounds */

.brand-logo-img {
  height: 50px;
  width: auto;
  display: block;
}

.footer .brand-logo-img {
  height: 50px;
}

.navbar-nav .nav-link {
  color: rgba(255, 255, 255, .88);
  font-weight: 600;
  border-radius: 8px;
  padding: .55rem .9rem !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.navbar-nav .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, .35);
  padding: .4rem .55rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .5);
}

/* Mobile navigation: slides in from the right as an offcanvas panel
   instead of dropping down from the top. */
.offcanvas.offcanvas-end {
  background: var(--navy);
  width: min(300px, 85vw);
}

.offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: 1rem 1.25rem;
}

.offcanvas .offcanvas-title {
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.offcanvas .offcanvas-body {
  padding: 1.25rem;
}

.offcanvas .navbar-nav {
  gap: .25rem;
}

.offcanvas .dropdown-menu {
  margin-top: .25rem;
}

/* Language switcher */
.lang-switcher .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  padding: .38rem .85rem !important;
  background: rgba(255, 255, 255, .06);
  font-size: .82rem;
  letter-spacing: .02em;
  transition: background .15s ease, border-color .15s ease;
}

.lang-switcher .dropdown-toggle:hover,
.lang-switcher .dropdown-toggle:focus {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
}

.lang-switcher .dropdown-toggle::after {
  margin-left: 2px;
  vertical-align: 1px;
  opacity: .8;
}

.lang-switcher .dropdown-menu {
  min-width: 190px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(12, 31, 58, .18);
  padding: .4rem;
  /* Force light surface regardless of the dark navbar's data-bs-theme,
     which would otherwise cascade into the dropdown and wash out the text. */
  background-color: #fff;
  --bs-dropdown-bg: #fff;
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--text);
}

.lang-switcher .dropdown-item {
  border-radius: 8px;
  padding: .55rem .75rem;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
}

.lang-switcher .dropdown-item:hover,
.lang-switcher .dropdown-item:focus {
  background: var(--panel);
}

.lang-switcher .dropdown-item.active {
  background: var(--gold);
  color: var(--navy);
}

/* Flag icons — real SVG artwork, not emoji (emoji flags render as plain
   two-letter text on Windows Chromium, so they don't reliably look like flags) */
.flag {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(11, 31, 58, .18), 0 1px 2px rgba(11, 31, 58, .15);
}

.flag-gb { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2020%22%3E%20%3Crect%20width%3D%2230%22%20height%3D%2220%22%20fill%3D%22%23012169%22/%3E%20%3Cpath%20d%3D%22M0%2C0%20L30%2C20%20M30%2C0%20L0%2C20%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%224%22/%3E%20%3Cpath%20d%3D%22M0%2C0%20L30%2C20%20M30%2C0%20L0%2C20%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%221.6%22/%3E%20%3Cpath%20d%3D%22M15%2C0%20V20%20M0%2C10%20H30%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%226.6%22/%3E%20%3Cpath%20d%3D%22M15%2C0%20V20%20M0%2C10%20H30%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%224%22/%3E%20%3C/svg%3E"); }
.flag-it { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2020%22%3E%20%3Crect%20width%3D%2210%22%20height%3D%2220%22%20fill%3D%22%23009246%22/%3E%20%3Crect%20x%3D%2210%22%20width%3D%2210%22%20height%3D%2220%22%20fill%3D%22%23FFFFFF%22/%3E%20%3Crect%20x%3D%2220%22%20width%3D%2210%22%20height%3D%2220%22%20fill%3D%22%23CE2B37%22/%3E%20%3C/svg%3E"); }
.flag-de { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2020%22%3E%20%3Crect%20width%3D%2230%22%20height%3D%226.67%22%20fill%3D%22%23000000%22/%3E%20%3Crect%20y%3D%226.67%22%20width%3D%2230%22%20height%3D%226.67%22%20fill%3D%22%23DD0000%22/%3E%20%3Crect%20y%3D%2213.33%22%20width%3D%2230%22%20height%3D%226.67%22%20fill%3D%22%23FFCE00%22/%3E%20%3C/svg%3E"); }
.flag-es { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2020%22%3E%20%3Crect%20width%3D%2230%22%20height%3D%2220%22%20fill%3D%22%23AA151B%22/%3E%20%3Crect%20y%3D%225%22%20width%3D%2230%22%20height%3D%2210%22%20fill%3D%22%23F1BF00%22/%3E%20%3C/svg%3E"); }
.flag-gr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2020%22%3E%20%3Crect%20width%3D%2230%22%20height%3D%2220%22%20fill%3D%22%230D5EAF%22/%3E%20%3Crect%20y%3D%222.22%22%20width%3D%2230%22%20height%3D%222.23%22%20fill%3D%22%23FFFFFF%22/%3E%20%3Crect%20y%3D%226.67%22%20width%3D%2230%22%20height%3D%222.23%22%20fill%3D%22%23FFFFFF%22/%3E%20%3Crect%20y%3D%2211.11%22%20width%3D%2230%22%20height%3D%222.23%22%20fill%3D%22%23FFFFFF%22/%3E%20%3Crect%20y%3D%2215.56%22%20width%3D%2230%22%20height%3D%222.23%22%20fill%3D%22%23FFFFFF%22/%3E%20%3Crect%20width%3D%2212%22%20height%3D%2211.11%22%20fill%3D%22%230D5EAF%22/%3E%20%3Crect%20x%3D%224.5%22%20width%3D%223%22%20height%3D%2211.11%22%20fill%3D%22%23FFFFFF%22/%3E%20%3Crect%20y%3D%224%22%20width%3D%2212%22%20height%3D%223%22%20fill%3D%22%23FFFFFF%22/%3E%20%3C/svg%3E"); }

/* Page header banner (non-home pages) */
.page-header {
  background: linear-gradient(135deg, var(--navy), #163b6d);
  color: #fff;
  padding: 84px 0 68px;
}

.page-header h1 {
  color: #fff;
  margin-bottom: .5rem;
}

.page-header p {
  color: #e8edf7;
  margin-bottom: 0;
  max-width: 640px;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--navy), #163b6d);
  color: #fff;
  padding: 96px 0 76px;
}

.hero h1 {
  color: #fff;
}

.hero-lead {
  color: #e8edf7;
}

/* Photographic section headers — background image + brand-tinted overlay.
   The image itself is set inline per element (style="background-image:...")
   rather than through a --custom-property here: a relative url() inside a
   custom property is resolved against the stylesheet that consumes it (this
   file), not against the HTML page that declares the property, so paths set
   that way silently 404 regardless of how they're written in the HTML. */
.img-header {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Eyebrow label used above headings.
   Darker gold by default for AA contrast on the light body / .section-alt
   backgrounds; the hero and trust-band sections sit on a dark navy image
   overlay, so they need the lighter --gold2 tone instead. */
.eyebrow {
  display: inline-block;
  color: #7f621b;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}

.hero .eyebrow,
.trust-band .eyebrow,
.page-header .eyebrow {
  color: var(--gold2);
}

/* Gold accent bar under key section headings */
.section-heading {
  position: relative;
  padding-bottom: 14px;
}

.section-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
}

.text-center .section-heading::after,
.section-heading.mx-auto::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Subtle lift on informational / clickable cards */
.card-hover {
  transition: transform .18s ease, box-shadow .18s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(12, 31, 58, .16);
}

/* Trust band (image background content section) */
.trust-band {
  padding: 64px 0;
}

.trust-band .stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: var(--gold);
}

.trust-band .stat-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.pill {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 6px 12px;
  margin: 0 8px 8px 0;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-size: .8rem;
}

.hero-card {
  color: var(--text);
}

/* Buttons */
.btn-gold {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  border: 0;
}

.btn-gold:hover,
.btn-gold:focus {
  background: var(--gold2);
  color: var(--navy);
}

.btn-navy {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border: 0;
}

.btn-navy:hover,
.btn-navy:focus {
  background: var(--navy2);
  color: #fff;
}

.btn-wa {
  background: var(--green);
  color: #063b1e;
  font-weight: 700;
  border: 0;
}

.btn-wa:hover,
.btn-wa:focus {
  background: #1fbd5c;
  color: #063b1e;
}

.wa-icon {
  width: 20px;
  height: 20px;
}

/* Cards */
.card {
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(12, 31, 58, .08);
}

.card .card-body {
  padding: 24px;
}

/* Notices */
.notice {
  background: #fff8e8;
  border: 1px solid #efd99f;
  border-radius: 14px;
  padding: 16px;
  color: #4a3710;
}

.ok {
  background: #edf8f2;
  border: 1px solid #bfe8cf;
  color: #0f5a34;
  border-radius: 14px;
  padding: 16px;
}

/* Forms */
.form-control,
.form-select {
  padding: .75rem .8rem;
  border-radius: 10px;
  border-color: #cfd8e6;
  font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .25);
}

.form-label {
  font-weight: 700;
  color: var(--navy);
  font-size: .875rem;
}

.form-check-label {
  font-size: .875rem;
  color: var(--muted);
}

/* Assessment result / client form */
.result {
  display: none;
  margin-top: 20px;
  border: 2px solid var(--gold);
  background: #fff;
  border-radius: 18px;
  padding: 22px;
}

.result-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  height: 100%;
}

.result-item strong {
  display: block;
  color: var(--navy);
  font-size: .8rem;
}

.client-form {
  display: none;
  margin-top: 20px;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 18px;
  padding: 22px;
}

.success {
  display: none;
}

/* Animated checkmark shown on successful form submission (contact form,
   assessment client form). Draws the circle then the tick via stroke-dashoffset. */
.success-check {
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
}

.success-heading {
  text-align: center;
}

.success-check svg {
  width: 100%;
  height: 100%;
  display: block;
}

.success-check-circle {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: successCircleDraw .6s ease forwards;
}

.success-check-mark {
  fill: none;
  stroke: var(--green);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: successMarkDraw .35s ease forwards .55s;
}

@keyframes successCircleDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes successMarkDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .success-check-circle,
  .success-check-mark {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Value/feature icon on light card backgrounds (e.g. About page) */
.value-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.value-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Contact page: icon list for contact channels + pin icons for offices */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-list li+li {
  margin-top: 18px;
}

.contact-list-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--navy);
  display: grid;
  place-items: center;
}

.contact-list-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.contact-list-label {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

.contact-list a {
  font-weight: 600;
}

.office-block+.office-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.office-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 4px;
}

.office-block-title svg {
  width: 18px;
  height: 18px;
  fill: var(--gold2);
  flex-shrink: 0;
}

/* Badges */
.dg-badge {
  background: #edf2fb;
  color: var(--navy);
  border: 1px solid #ccd7ea;
  font-weight: 700;
  font-size: .75rem;
  padding: .5em .85em;
}

/* FAQ accordion */
.accordion-item {
  border-color: var(--border);
  border-radius: 14px !important;
  overflow: hidden;
  margin-bottom: 10px;
}

.accordion-button {
  font-weight: 800;
  color: var(--navy);
}

.accordion-button:not(.collapsed) {
  background: #f3f7fd;
  color: var(--navy);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .25);
}

/* Avatar video player */
.video-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #101c31, #1b3b68);
  border: 1px solid rgba(255, 255, 255, .2);
  min-height: 230px;
}

.avatar-video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0b1526;
}

.video-controls {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 10px;
}

.video-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(11, 31, 58, .65);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background .15s ease, transform .15s ease;
}

.video-btn:hover,
.video-btn:focus-visible {
  background: rgba(11, 31, 58, .9);
  transform: translateY(-2px);
}

.video-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* CTA band (photographic background behind closing call-to-action cards) */
.cta-band {
  padding: 76px 0;
}

.cta-card {
  border: none;
  box-shadow: 0 24px 60px rgba(6, 16, 32, .35);
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
  padding: 16px;
  transform: translateY(100%);
  transition: transform .3s ease;
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cookie-banner-text {
  color: #e8edf7;
  margin: 0;
  font-size: .92rem;
  flex: 1 1 320px;
}

.cookie-banner-text a {
  color: var(--gold);
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-banner-actions .btn {
    flex: 1 1 0;
  }
}

/* Legal page: sticky table of contents + long-form article content */
.legal-toc {
  position: sticky;
  top: 96px;
}

.legal-toc .nav-link {
  color: var(--muted);
  font-weight: 600;
  border-radius: 10px;
  padding: .5rem .8rem;
}

.legal-toc .nav-link:hover {
  color: var(--navy);
  background: var(--panel);
}

.legal-toc .nav-link.active {
  color: var(--navy);
  background: #f3f7fd;
  border-left: 3px solid var(--gold);
}

.legal-content article + article {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.legal-content h3 {
  margin-top: 1.75rem;
  font-size: 1.1rem;
}

.legal-content p,
.legal-content li {
  color: var(--text);
}

.legal-content ul {
  padding-left: 1.2rem;
}

.legal-content li + li {
  margin-top: .4rem;
}

.legal-content code {
  background: var(--panel);
  border-radius: 4px;
  padding: .1rem .4rem;
  color: var(--navy);
}

/* Footer */
.footer {
  background: var(--navy);
  color: #c7d3ea;
}

.footer p {
  color: #c7d3ea;
}

.footer-heading {
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: .55rem;
  font-size: .92rem;
}

.footer-links a {
  color: #c7d3ea;
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: .85rem;
  color: #a9b7d6;
}

@media (max-width: 575.98px) {
  section {
    padding: 38px 0;
  }

  .hero,
  .page-header {
    padding: 52px 0 44px;
  }

  .trust-band {
    padding: 44px 0;
  }

  .card .card-body {
    padding: 18px;
  }
}