/* ============================================ */
  /* SITE FOOTER                                  */
  /* ============================================ */
  .site-footer {
    background: linear-gradient(180deg, #14213d 0%, #0b1530 100%);
    border-top: 4px solid var(--gold, #c9a54b);
    color: #cfd6e4;
  }
  .ft-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr;
    gap: 40px 48px;
    padding: 52px 5.5% 40px;
  }

  /* ---- Brand column ---- */
  .ft-logo { display: inline-block; padding: 6px; background: #fff; border-radius: 6px; }
  .ft-logo img { display: block; width: 100%; max-width: 260px; height: auto; }
  .ft-about { margin: 16px 0 18px; max-width: 360px; font-size: 15px; line-height: 1.6; }

  /* Your original social icons (.mysocialmedia-ul) are kept exactly as they were;
     this only left-aligns them inside the footer column. */
  .ft-social-wrap .mysocialmedia-ul { justify-content: flex-start; text-align: left; margin-left: 0; padding-left: 0; }

  /* ---- Link columns ---- */
  .ft-col h2 {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #e0b866;
  }
  .ft-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .ft-list a {
    color: #cfd6e4;
    font-size: 15px;
    text-decoration: none;
    transition: color .2s;
  }
  .ft-list a:hover,
  .ft-list a:focus-visible { color: #e0b866; text-decoration: underline; text-underline-offset: 3px; }

  /* ---- Contact ---- */
  .ft-contact li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
  .ft-contact i { margin-top: 3px; font-size: 16px; color: #e0b866; }
  .ft-contact a { color: #cfd6e4; text-decoration: none; overflow-wrap: anywhere; }
  .ft-contact a:hover, .ft-contact a:focus-visible { color: #e0b866; text-decoration: underline; text-underline-offset: 3px; }

  /* ---- Bottom bar ---- */
  .ft-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 5.5%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
  }
  .ft-bar p { margin: 0; }
  .ft-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gold, #c9a54b);
    color: #14213d;
    text-decoration: none;
    transition: background .2s, color .2s, transform .2s;
  }
  .ft-top:hover, .ft-top:focus-visible { background: #fff; transform: translateY(-3px); }

  .site-footer a:focus-visible { outline: 2px solid #e0b866; outline-offset: 3px; border-radius: 4px; }

  @media (prefers-reduced-motion: reduce) {
    .ft-top, .ft-top:hover { transition: none; transform: none; }
  }

  /* ---------- Tablet: 2 columns ---------- */
  @media (max-width: 991.98px) {
    .ft-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; padding: 40px 24px 32px; }
    .ft-brand { grid-column: 1 / -1; }
    .ft-bar { padding: 16px 24px; }
  }

  /* ---------- Phone: 1 column ---------- */
  @media (max-width: 575.98px) {
    .ft-main { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 32px 16px 26px; }
    .ft-logo img { max-width: 220px; }
    .ft-col h2 { margin-bottom: 12px; }
    .ft-bar { padding: 14px 16px; font-size: 13px; }
  }

  /* X icon: black on hover */
.mysocialmedia-ui a.twitter i,
.mysocialmedia-ui a.twitter svg {
  transition: color .3s, fill .3s;
}
.mysocialmedia-ui a.twitter:hover i,
.mysocialmedia-ui a.twitter:focus-visible i {
  color: #000 !important;
}
.mysocialmedia-ui a.twitter:hover svg,
.mysocialmedia-ui a.twitter:focus-visible svg {
  fill: #000 !important;
}

/* Vimeo icon: brand blue on hover */
.mysocialmedia-ui a.vimeo i {
  transition: color .3s;
}
.mysocialmedia-ui a.vimeo:hover i,
.mysocialmedia-ui a.vimeo:focus-visible i {
  color: #1ab7ea !important;      /* Vimeo brand blue */
}

.mysocialmedia-ul {

  justify-content: center;
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.mysocialmedia-ui {
  margin: 0 10px;
}

.mysocialmedia-ui a {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  color: #404040;
  transition: color 0.5s;
}

.mysocialmedia-ui a span {
  position: absolute;
  transition: transform 0.5s;
}

.mysocialmedia-ui a span:nth-child(1),
.mysocialmedia-ui a span:nth-child(3) {
  width: 100%;
  height: 3px;
  background: #404040;
}

.mysocialmedia-ui a span:nth-child(1) {
  top: 0;
  left: 0;
  transform-origin: right;
}

.mysocialmedia-ui a:hover span:nth-child(1) {
  transform: scaleX(0);
  transform-origin: left;
}

.mysocialmedia-ui a span:nth-child(3) {
  bottom: 0;
  left: 0;
  transform-origin: left;
}

.mysocialmedia-ui a:hover span:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;
}

.mysocialmedia-ui a span:nth-child(2),
.mysocialmedia-ui a span:nth-child(4) {
  width: 3px;
  height: 100%;
  background: #404040;
}

.mysocialmedia-ui a span:nth-child(2) {
  top: 0;
  left: 0;
  transform: scale(0);
  transform-origin: bottom;
}

.mysocialmedia-ui a:hover span:nth-child(2) {
  transform: scale(1);
  transform-origin: top;
}

.mysocialmedia-ui a span:nth-child(4) {
  top: 0;
  right: 0;
  transform: scale(0);
  transform-origin: top;
}

.mysocialmedia-ui a:hover span:nth-child(4) {
  transform: scale(1);
  transform-origin: bottom;
}

/* Social Media Icon Colors */
.youtube:hover {
  color: #FF0000;
}

.youtube:hover span {
  background: #FF0000;
}

.twitter:hover {
  color: #423a3a;
}

.twitter:hover span {
  background: #423a3a;
}

.instagram:hover {
  color: #c32aa3;
}

.instagram:hover span {
  background: #c32aa3;
}

.linkedin:hover {
  color: #0077B5;
}

.linkedin:hover span {
  background: #0077B5;
}