
/* =========================================================
   SEA LICENSING — FOOTER V5
   ========================================================= */

.footer-v5,
.footer-v5 * {
  box-sizing: border-box;
}


.footer-v5 {
  position: relative;
  overflow: hidden;

  color: #fff;

  background:

    radial-gradient(
      circle at 93% 18%,
      rgba(20,128,174,.17),
      transparent 31%
    ),

    radial-gradient(
      circle at 15% 88%,
      rgba(17,111,151,.10),
      transparent 28%
    ),

    linear-gradient(
      110deg,
      #031d2c 0%,
      #05283c 53%,
      #073850 100%
    );
}



/* =========================================================
   BACKGROUND DETAIL
   ========================================================= */

.footer-v5::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .12;

  background-image:

    linear-gradient(
      rgba(93,204,236,.027) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(93,204,236,.020) 1px,
      transparent 1px
    );

  background-size:
    68px 68px;
}


.footer-v5-route {
  position: absolute;

  pointer-events: none;

  border:
    1px solid rgba(65,195,228,.045);

  border-radius:
    50%;
}


.footer-v5 .route-a {
  width: 850px;
  height: 220px;

  left: 25%;
  top: 110px;

  transform: rotate(-7deg);
}


.footer-v5 .route-b {
  width: 720px;
  height: 180px;

  right: -5%;
  top: 150px;

  transform: rotate(-13deg);
}



/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.footer-v5-main {
  position: relative;

  z-index: 2;

  padding:
    54px 0 50px;

  display: grid;

  grid-template-columns:
    1.15fr
    1.85fr
    1fr
    1.12fr;

  gap:
    52px;

  align-items:
    start;
}



/* =========================================================
   COMMON HEADINGS
   ========================================================= */

.footer-v5 h3 {
  position: relative;

  margin:
    0 0 23px;

  padding-bottom:
    11px;

  color:
    #fff;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.footer-v5 h3::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width:
    38px;

  height:
    2px;

  border-radius:
    99px;

  background:
    linear-gradient(
      90deg,
      #29bee8,
      #74e0f9
    );
}



/* =========================================================
   BRAND
   ========================================================= */

.footer-v5-brand {
  max-width:
    345px;
}


.footer-v5-logo {
  width:
    207px;

  height:
    auto;

  display:
    block;

  object-fit:
    contain;

  filter:
    none;
}


.footer-v5-brand p {
  max-width:
    340px;

  margin:
    23px 0 0;

  color:
    rgba(230,243,247,.81);

  font-size:
    12.5px;

  line-height:
    1.65;
}


.footer-v5-brand strong {
  display:
    block;

  margin-top:
    22px;

  color:
    #65d7f4;

  font-size:
    9.5px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}



/* =========================================================
   SERVICES — PRIMARY 2 × 3 GRID
   ========================================================= */

.footer-v5-service-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    8px 10px;
}


.footer-v5-service-grid > a {
  min-height:
    63px;

  padding:
    11px 10px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  border:
    1px solid transparent;

  border-radius:
    5px;

  color:
    rgba(236,246,249,.88);

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s cubic-bezier(.22,1,.36,1);
}


.footer-v5-service-icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(72,205,239,.18);

  border-radius:
    7px;

  background:
    rgba(19,111,150,.14);
}


.footer-v5-service-icon svg {
  width:
    18px;

  height:
    18px;

  color:
    #4ed0f1;
}


.footer-v5-service-grid > a > span:last-child {
  font-size:
    11px;

  line-height:
    1.25;

  font-weight:
    700;
}


.footer-v5-service-grid small {
  display:
    block;

  margin-top:
    3px;

  color:
    rgba(195,222,232,.55);

  font-size:
    8.5px;

  line-height:
    1.1;

  font-weight:
    500;
}


.footer-v5-service-grid > a:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(70,207,240,.23);

  background:
    rgba(23,126,168,.13);
}



/* =========================================================
   COMPANY + DIGITAL
   ========================================================= */

.footer-v5-navigation {
  display:
    flex;

  flex-direction:
    column;

  gap:
    34px;
}



/* Company intentionally has NO irrelevant icons */

.footer-v5-company > a {
  position:
    relative;

  width:
    fit-content;

  margin-bottom:
    11px;

  padding-left:
    14px;

  display:
    block;

  color:
    rgba(229,242,247,.79);

  font-size:
    11px;

  line-height:
    1.35;

  transition:
    color .22s ease,
    transform .22s ease;
}


.footer-v5-company > a::before {
  content: "";

  position:
    absolute;

  left: 0;
  top: .62em;

  width:
    5px;

  height:
    1px;

  background:
    #48ceef;
}


.footer-v5-company > a:hover {
  color:
    #ffffff;

  transform:
    translateX(4px);
}



/* Digital tools use meaningful icons */

.footer-v5-digital > a {
  margin-bottom:
    10px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    rgba(232,244,248,.82);

  font-size:
    11px;

  line-height:
    1.3;

  transition:
    color .22s ease,
    transform .22s ease;
}


.footer-v5-digital > a svg {
  width:
    16px;

  height:
    16px;

  flex:
    0 0 16px;

  color:
    #4ed1f1;
}


.footer-v5-digital > a:hover {
  color:
    #fff;

  transform:
    translateX(4px);
}



/* =========================================================
   CONTACT
   ========================================================= */

.footer-v5-contact {
  padding-left:
    31px;

  border-left:
    1px solid rgba(96,208,238,.18);
}


.footer-v5-kicker,
.footer-v5-phone small {
  display:
    block;

  color:
    rgba(190,218,228,.52);

  font-size:
    8.5px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}


.footer-v5-email {
  margin-top:
    9px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    #65daf7;

  font-size:
    13.5px;

  line-height:
    1.2;

  font-weight:
    800;
}


.footer-v5-email > span,
.footer-v5-phone a > span {
  color:
    #54d2f2;
}


.footer-v5-phone {
  margin-top:
    20px;
}


.footer-v5-phone a {
  margin-top:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    rgba(241,249,251,.91);

  font-size:
    12px;

  line-height:
    1.2;
}


.footer-v5-contact-button {
  min-height:
    45px;

  margin-top:
    25px;

  padding:
    0 16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  border:
    1px solid rgba(83,208,240,.45);

  border-radius:
    4px;

  background:
    rgba(14,112,150,.13);

  color:
    #fff;

  font-size:
    9.5px;

  font-weight:
    900;

  letter-spacing:
    .065em;

  text-transform:
    uppercase;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}


.footer-v5-contact-button i {
  color:
    #5ed9f6;

  font-size:
    16px;

  font-style:
    normal;
}


.footer-v5-contact-button:hover {
  transform:
    translateY(-2px);

  background:
    rgba(18,148,192,.24);

  border-color:
    rgba(97,218,245,.68);
}



/* =========================================================
   BOTTOM BAR
   ========================================================= */

.footer-v5-bottom {
  position: relative;

  z-index: 2;

  border-top:
    1px solid rgba(89,202,232,.15);

  background:
    rgba(1,18,28,.91);
}


.footer-v5-bottom-inner {
  min-height:
    58px;

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    28px;
}


.footer-v5-bottom span {
  color:
    rgba(204,226,235,.59);

  font-size:
    9.5px;
}


.footer-v5-bottom strong {
  color:
    #55d1f0;

  font-size:
    9.5px;

  font-weight:
    850;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}


.footer-v5-bottom a {
  justify-self:
    end;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    rgba(204,226,235,.59);

  font-size:
    9.5px;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;
}


.footer-v5-bottom a i {
  color:
    #60d8f4;

  font-style:
    normal;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

  .footer-v5-main {
    grid-template-columns:
      1fr 1.6fr 1fr;

    gap:
      42px;
  }


  .footer-v5-brand {
    grid-row:
      span 2;
  }


  .footer-v5-contact {
    padding-left:
      0;

    border-left:
      0;
  }

}


@media (max-width: 850px) {

  .footer-v5-main {
    grid-template-columns:
      1fr;

    padding:
      50px 0;
  }


  .footer-v5-brand {
    grid-row:
      auto;
  }


  .footer-v5-service-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .footer-v5-navigation {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;
  }


  .footer-v5-contact {
    padding-top:
      28px;

    border-top:
      1px solid rgba(96,208,238,.16);
  }


  .footer-v5-bottom-inner {
    padding:
      18px 0;

    grid-template-columns:
      1fr;
  }


  .footer-v5-bottom a {
    justify-self:
      start;
  }

}


@media (max-width: 560px) {

  .footer-v5-service-grid,
  .footer-v5-navigation {
    grid-template-columns:
      1fr;
  }

}



/* =========================================================
   FOOTER V5 — FINAL STRUCTURE / BALANCE REFINEMENT
   ========================================================= */


/* ---------------------------------------------------------
   TRUE 5-COLUMN DESKTOP COMPOSITION
   Brand | Services | Company | Digital | Contact
   --------------------------------------------------------- */

.footer-v5-main {
  grid-template-columns:
    1.18fr
    1.95fr
    .78fr
    .88fr
    1.12fr !important;

  gap: 42px !important;

  padding-top: 48px !important;
  padding-bottom: 32px !important;

  align-items: start !important;
}


/* Let Company and Digital become independent grid columns */
.footer-v5-navigation {
  display: contents !important;
}



/* =========================================================
   BRAND
   ========================================================= */

.footer-v5-brand {
  padding-top: 3px;
}


.footer-v5-logo {
  width: 205px !important;
}


.footer-v5-brand p {
  margin-top: 20px !important;

  font-size: 12.5px !important;
  line-height: 1.62 !important;
}


.footer-v5-brand strong {
  margin-top: 18px !important;
}



/* =========================================================
   SERVICES — GIVE IT PROPER VISUAL WEIGHT
   ========================================================= */

.footer-v5-services h3 {
  margin-bottom: 19px !important;
}


.footer-v5-service-grid {
  gap: 9px 11px !important;
}


.footer-v5-service-grid > a {
  min-height: 66px !important;

  padding:
    10px 11px !important;

  border-color:
    rgba(72,205,239,.07) !important;

  background:
    rgba(8,69,98,.08);
}


.footer-v5-service-icon {
  width: 36px !important;
  height: 36px !important;

  flex-basis: 36px !important;

  background:
    rgba(19,111,150,.16) !important;
}


.footer-v5-service-icon svg {
  width: 18px !important;
  height: 18px !important;
}


.footer-v5-service-grid > a > span:last-child {
  font-size: 11.5px !important;
  line-height: 1.18 !important;
}


.footer-v5-service-grid small {
  margin-top: 4px !important;

  font-size: 9px !important;
  line-height: 1.15 !important;

  color:
    rgba(200,225,234,.62) !important;
}



/* =========================================================
   COMPANY
   ========================================================= */

.footer-v5-company h3,
.footer-v5-digital h3 {
  margin-bottom: 19px !important;
}


.footer-v5-company > a {
  margin-bottom: 12px !important;

  padding-left: 15px !important;

  font-size: 11.5px !important;

  color:
    rgba(232,244,248,.82) !important;
}


.footer-v5-company > a::before {
  width: 6px !important;

  background:
    linear-gradient(
      90deg,
      #3bc7ec,
      #78e1f8
    ) !important;
}



/* =========================================================
   DIGITAL
   ========================================================= */

.footer-v5-digital > a {
  margin-bottom: 13px !important;

  gap: 10px !important;

  font-size: 11.5px !important;
}


.footer-v5-digital > a svg {
  width: 17px !important;
  height: 17px !important;

  flex-basis: 17px !important;
}



/* =========================================================
   CONTACT
   ========================================================= */

.footer-v5-contact {
  padding-left: 28px !important;
}


.footer-v5-contact h3 {
  margin-bottom: 20px !important;
}


.footer-v5-email {
  font-size: 14px !important;
}


.footer-v5-phone a {
  font-size: 12.5px !important;
}


.footer-v5-contact-button {
  width: 100%;

  max-width: 220px;

  margin-top: 22px !important;
}



/* =========================================================
   QUIETER BACKGROUND ROUTES
   Keep texture but don't let it cross content aggressively
   ========================================================= */

.footer-v5-route {
  opacity: .52 !important;
}


.footer-v5 .route-a {
  top: 92px !important;
}


.footer-v5 .route-b {
  top: 120px !important;
}



/* =========================================================
   SLIMMER BOTTOM BAR
   ========================================================= */

.footer-v5-bottom-inner {
  min-height: 52px !important;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

  .footer-v5-main {
    grid-template-columns:
      1fr 1.55fr 1fr !important;

    gap: 38px !important;
  }


  .footer-v5-navigation {
    display: grid !important;

    grid-template-columns:
      1fr 1fr;

    gap: 35px;
  }


  .footer-v5-contact {
    padding-left: 0 !important;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

  .footer-v5-main {
    grid-template-columns:
      1fr !important;

    padding-top: 44px !important;
    padding-bottom: 36px !important;
  }


  .footer-v5-navigation {
    display: grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap: 35px !important;
  }

}


@media (max-width: 560px) {

  .footer-v5-navigation {
    grid-template-columns:
      1fr !important;
  }

}


/* =========================================================
   FOOTER V5 — ALIGNMENT + SYMMETRY FIX
   ========================================================= */

/* Main grid balance */
.footer-v5-main {
  grid-template-columns:
    1.12fr
    1.72fr
    0.92fr
    0.92fr
    1.08fr !important;

  gap: 42px !important;
  align-items: start !important;
}


/* =========================================================
   BRAND BLOCK — logo aligned with text below
   ========================================================= */

.footer-v5-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.footer-v5-logo {
  display: block !important;
  width: 205px !important;
  height: auto !important;
  margin: 0 0 22px 0 !important;
}

.footer-v5-brand p,
.footer-v5-brand strong {
  width: 100% !important;
  max-width: 340px !important;
  text-align: left !important;
  margin-left: 0 !important;
}


/* =========================================================
   COMPANY + DIGITAL — make columns symmetrical
   ========================================================= */

.footer-v5-company,
.footer-v5-digital {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

.footer-v5-company h3,
.footer-v5-digital h3,
.footer-v5-services h3,
.footer-v5-contact h3 {
  min-height: 28px !important;
  margin-bottom: 22px !important;
}

.footer-v5-company > a,
.footer-v5-digital > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 28px !important;
  margin-bottom: 11px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}


/* Company links a little cleaner */
.footer-v5-company > a {
  padding-left: 0 !important;
}

.footer-v5-company > a::before {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 10px !important;
  height: 1px !important;
  margin-right: 2px !important;
  background: rgba(110, 220, 255, 0.9) !important;
  content: "" !important;
  display: inline-block !important;
}


/* Digital links same visual rhythm */
.footer-v5-digital > a svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}


/* =========================================================
   SERVICES — align height rhythm with center columns
   ========================================================= */

.footer-v5-service-grid {
  gap: 10px 12px !important;
}

.footer-v5-service-grid > a {
  min-height: 66px !important;
}


/* =========================================================
   CONTACT — keep right side balanced
   ========================================================= */

.footer-v5-contact {
  padding-left: 26px !important;
}

.footer-v5-contact-button {
  width: 100% !important;
  max-width: 220px !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
  .footer-v5-main {
    grid-template-columns: 1fr 1.5fr 1fr !important;
    gap: 34px !important;
  }

  .footer-v5-navigation {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 850px) {
  .footer-v5-main {
    grid-template-columns: 1fr !important;
  }

  .footer-v5-navigation {
    grid-template-columns: 1fr 1fr !important;
  }

  .footer-v5-contact {
    padding-left: 0 !important;
  }
}

@media (max-width: 560px) {
  .footer-v5-navigation {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   FOOTER V5 — COMPACT SERVICES CARDS
   ========================================================= */

.footer-v5-service-grid {
  gap: 10px 12px !important;
  align-content: start !important;
}

.footer-v5-service-grid > a {
  min-height: 58px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
}

.footer-v5-service-grid > a .icon-wrap,
.footer-v5-service-grid > a .service-icon,
.footer-v5-service-grid > a i,
.footer-v5-service-grid > a svg {
  width: 16px !important;
  height: 16px !important;
}

.footer-v5-service-grid > a .icon-box,
.footer-v5-service-grid > a .service-icon-box {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.footer-v5-service-grid > a strong,
.footer-v5-service-grid > a b,
.footer-v5-service-grid > a .title {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  margin: 0 0 2px 0 !important;
}

.footer-v5-service-grid > a small,
.footer-v5-service-grid > a span,
.footer-v5-service-grid > a .subtitle {
  display: block !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  opacity: 0.82 !important;
  margin: 0 !important;
}

/* Make the whole first row align nicely */
.footer-v5-main {
  align-items: start !important;
}

/* Slightly reduce brand block visual height so everything feels level */
.footer-v5-brand p {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}


/* =========================================================
   FOOTER V5 — FINAL PRECISION REFINEMENT
   ========================================================= */


/* =========================================================
   1. SERVICE VECTOR CONSISTENCY
   ========================================================= */

.footer-v5-service-icon {
  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 8px !important;

  border:
    1px solid rgba(74, 205, 239, .22) !important;

  background:
    linear-gradient(
      145deg,
      rgba(21, 107, 147, .21),
      rgba(8, 60, 88, .13)
    ) !important;
}


.footer-v5-service-icon svg {
  width: 18px !important;
  height: 18px !important;

  color: #51d2f2 !important;

  stroke-width: 1.8 !important;

  opacity: 1 !important;

  overflow: visible !important;
}


.footer-v5-service-grid > a:hover
.footer-v5-service-icon {
  border-color:
    rgba(97, 222, 248, .48) !important;

  background:
    rgba(27, 135, 177, .25) !important;
}


.footer-v5-service-grid > a:hover
.footer-v5-service-icon svg {
  color: #8ce9fc !important;

  transform: scale(1.08);
}


/* =========================================================
   2. COMPANY + DIGITAL ANIMATED UNDERLINE
   ========================================================= */

.footer-v5-company > a,
.footer-v5-digital > a {
  position: relative !important;

  width: fit-content !important;

  padding-bottom: 4px !important;

  text-decoration: none !important;
}


/* remove old company mini-line */
.footer-v5-company > a::before {
  display: none !important;
}


/* animated underline */
.footer-v5-company > a::after,
.footer-v5-digital > a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  border-radius: 99px;

  background:
    linear-gradient(
      90deg,
      #2dbfe8,
      #73e0f8
    );

  transform:
    scaleX(0);

  transform-origin:
    left center;

  opacity: .95;

  transition:
    transform .30s cubic-bezier(.22,1,.36,1);
}


.footer-v5-company > a:hover::after,
.footer-v5-digital > a:hover::after {
  transform:
    scaleX(1);
}


.footer-v5-company > a:hover,
.footer-v5-digital > a:hover {
  color:
    #ffffff !important;

  transform:
    translateX(2px) !important;
}


/* Keep digital icon motion subtle */
.footer-v5-digital > a svg {
  transition:
    color .25s ease,
    transform .25s cubic-bezier(.22,1,.36,1);
}


.footer-v5-digital > a:hover svg {
  color:
    #7fe7fc !important;

  transform:
    translateY(-1px) scale(1.05);
}


/* =========================================================
   3. EXACT LOGO / TEXT LEFT ALIGNMENT
   ========================================================= */

.footer-v5-brand {
  position: relative !important;

  display: block !important;

  text-align: left !important;

  padding-left: 0 !important;

  margin-left: 0 !important;
}


.footer-v5-logo {
  display: block !important;

  width: 205px !important;
  height: auto !important;

  margin:
    0 0 20px 0 !important;

  padding: 0 !important;

  transform: none !important;

  object-fit: contain !important;

  object-position:
    left center !important;
}


/* Force paragraph + tagline onto exact same left axis */
.footer-v5-brand p,
.footer-v5-brand strong {
  display: block !important;

  margin-left: 0 !important;
  padding-left: 0 !important;

  text-align: left !important;
}


/* Optical correction:
   transparent pixels inside PNG can make logo LOOK shifted.
   Crop visually with container rather than moving the text. */

.footer-v5-brand {
  overflow: visible !important;
}


.footer-v5-logo {
  margin-left: -1px !important;
}


/* =========================================================
   SMALL VISUAL RHYTHM POLISH
   ========================================================= */

.footer-v5-company > a,
.footer-v5-digital > a {
  min-height: 26px !important;

  margin-bottom: 10px !important;

  font-size: 11.5px !important;

  line-height: 1.35 !important;
}


.footer-v5-digital > a {
  gap: 10px !important;
}


/* heading alignment */
.footer-v5-services h3,
.footer-v5-company h3,
.footer-v5-digital h3,
.footer-v5-contact h3 {
  margin-top: 0 !important;
}


/* mobile */
@media (max-width: 850px) {

  .footer-v5-logo {
    margin-left: 0 !important;
  }

}


/* =========================================================
   FOOTER V5 — SERVICE CARD SIZE / ICON ALIGN FIX
   ========================================================= */

/* Keep service area tighter and more balanced */
.footer-v5-service-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(165px, 1fr)) !important;
  gap: 10px 12px !important;
  align-items: start !important;
}

/* Make cards smaller */
.footer-v5-service-grid > a {
  min-height: 58px !important;
  padding: 10px 12px !important;

  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;

  border-radius: 10px !important;
}

/* Icon box */
.footer-v5-service-icon {
  width: 42px !important;
  height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 9px !important;
  place-self: center !important;
}

/* SVG exactly centered */
.footer-v5-service-icon svg {
  width: 18px !important;
  height: 18px !important;

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
}

/* Text block tighter */
.footer-v5-service-grid > a span,
.footer-v5-service-grid > a div,
.footer-v5-service-grid > a small,
.footer-v5-service-grid > a b {
  margin: 0 !important;
  padding: 0 !important;
}

.footer-v5-service-grid > a b {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.footer-v5-service-grid > a small {
  display: block !important;
  margin-top: 3px !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  opacity: .88 !important;
}

/* Stop any oversized icon effect from earlier CSS */
.footer-v5-service-grid > a:hover .footer-v5-service-icon svg {
  transform: none !important;
}

/* If screen gets tighter, keep cards neat */
@media (max-width: 1200px) {
  .footer-v5-service-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   FOOTER V5 — SERVICES HEIGHT FIX
   Keep 2x3 layout but prevent cards dropping too low
   ========================================================= */

.footer-v5-services {
  align-self: start !important;
}


/* tighter spacing between six cards */
.footer-v5-service-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap:
    7px 10px !important;

  align-content:
    start !important;
}


/* significantly shorter cards */
.footer-v5-service-grid > a {
  min-height:
    50px !important;

  height:
    50px !important;

  padding:
    6px 9px !important;

  grid-template-columns:
    34px minmax(0,1fr) !important;

  column-gap:
    8px !important;

  align-items:
    center !important;

  border-radius:
    7px !important;
}


/* smaller but still premium icon box */
.footer-v5-service-icon {
  width:
    34px !important;

  height:
    34px !important;

  min-width:
    34px !important;

  flex:
    0 0 34px !important;

  place-self:
    center !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border-radius:
    7px !important;
}


/* icon exactly centered */
.footer-v5-service-icon svg {
  width:
    16px !important;

  height:
    16px !important;

  display:
    block !important;

  margin:
    auto !important;

  padding:
    0 !important;

  transform:
    none !important;
}


/* service title */
.footer-v5-service-grid > a > span:last-child {
  min-width:
    0 !important;

  display:
    block !important;

  font-size:
    10.5px !important;

  line-height:
    1.08 !important;

  font-weight:
    700 !important;
}


/* second line */
.footer-v5-service-grid > a small {
  display:
    block !important;

  margin-top:
    2px !important;

  font-size:
    8.5px !important;

  line-height:
    1.05 !important;

  opacity:
    .72 !important;
}


/* stop hover from changing card dimensions */
.footer-v5-service-grid > a:hover {
  transform:
    translateY(-1px) !important;
}


/* Keep the heading close to the cards */
.footer-v5-services h3 {
  margin-bottom:
    17px !important;
}


/* desktop only:
   no previous responsive rule should collapse this prematurely */
@media (min-width: 1201px) {

  .footer-v5-service-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;
  }

}



/* =========================================================
   FOOTER V5 — TRUE SERVICE ICON CENTERING
   ========================================================= */

.footer-v5-service-grid > a {
  height: 50px !important;
  min-height: 50px !important;

  padding: 6px 9px !important;

  display: grid !important;

  grid-template-columns:
    34px minmax(0,1fr) !important;

  column-gap: 9px !important;

  align-items: center !important;
}


.footer-v5-service-icon {
  width: 34px !important;
  height: 34px !important;

  min-width: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;

  place-items: center !important;

  align-self: center !important;
  justify-self: center !important;

  line-height: 0 !important;

  border-radius: 7px !important;

  box-sizing: border-box !important;
}


/* Critical: the SVG canvas itself is centered */
.footer-v5-service-icon > svg {
  width: 18px !important;
  height: 18px !important;

  min-width: 18px !important;
  min-height: 18px !important;

  display: block !important;

  position: static !important;

  inset: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  overflow: visible !important;

  flex: none !important;
}


/* Never move the icon on hover */
.footer-v5-service-grid > a:hover
.footer-v5-service-icon > svg {
  transform: none !important;
}


/* compact cards stay compact */
.footer-v5-service-grid {
  gap: 7px 10px !important;
}


.footer-v5-service-grid > a > span:last-child {
  align-self: center !important;

  font-size: 10.5px !important;
  line-height: 1.08 !important;
}


.footer-v5-service-grid > a small {
  margin-top: 2px !important;

  font-size: 8.5px !important;
  line-height: 1.05 !important;
}



/* =========================================================
   FOOTER — KODEZIN CREDIT
   ========================================================= */

.footer-v5-copyright {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;

  color: rgba(204,226,235,.59) !important;

  font-size: 9.5px !important;
  line-height: 1.2 !important;
}


.footer-v5-copyright .footer-v5-kodezin {
  display: inline !important;

  justify-self: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #5dd6f5 !important;

  font-size: inherit !important;
  line-height: inherit !important;

  font-weight: 800 !important;

  letter-spacing: .05em !important;
  text-transform: uppercase !important;

  border: 0 !important;

  transition:
    color .22s ease,
    text-shadow .22s ease !important;
}


.footer-v5-copyright .footer-v5-kodezin:hover {
  color: #ffffff !important;

  text-shadow:
    0 0 8px rgba(81,211,244,.35);
}


/* =========================================================
   FOOTER SERVICES — ABSOLUTE TRUE ICON CENTERING
   ========================================================= */

/* Icon container */
.footer-v5-service-icon {
  position: relative !important;

  width: 34px !important;
  height: 34px !important;

  min-width: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  align-self: center !important;
  justify-self: center !important;

  overflow: hidden !important;

  line-height: 0 !important;

  box-sizing: border-box !important;
}


/* Force SVG viewport to exact horizontal + vertical center */
.footer-v5-service-icon > svg {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  right: auto !important;
  bottom: auto !important;

  width: 17px !important;
  height: 17px !important;

  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;

  overflow: visible !important;
}


/* Prevent hover CSS from moving vectors away from center */
.footer-v5-service-grid > a:hover .footer-v5-service-icon > svg {
  transform: translate(-50%, -50%) !important;
}


/* Make sure card itself vertically centers icon + text */
.footer-v5-service-grid > a {
  display: grid !important;

  grid-template-columns: 34px minmax(0, 1fr) !important;

  align-items: center !important;

  column-gap: 9px !important;
}


/* Text block itself vertically centered */
.footer-v5-service-grid > a > span:last-child {
  align-self: center !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   FOOTER COMPANY LINKS — BULLETS
   ========================================================= */

.footer-v5-company > a {
  position: relative !important;

  padding-left: 15px !important;

  display: block !important;
}


/* Small cyan bullet */
.footer-v5-company > a::before {
  content: "" !important;

  position: absolute !important;

  left: 0 !important;
  top: 50% !important;

  width: 4px !important;
  height: 4px !important;

  border-radius: 50% !important;

  background: #55d3f3 !important;

  box-shadow:
    0 0 0 3px rgba(85,211,243,.06),
    0 0 7px rgba(85,211,243,.16) !important;

  transform: translateY(-50%) !important;

  display: block !important;
}


/* Preserve animated underline */
.footer-v5-company > a::after {
  content: "" !important;

  position: absolute !important;

  left: 15px !important;
  bottom: 0 !important;

  width: calc(100% - 15px) !important;
  height: 1px !important;

  background:
    linear-gradient(
      90deg,
      #2dbfe8,
      #73e0f8
    ) !important;

  transform: scaleX(0) !important;
  transform-origin: left center !important;

  transition:
    transform .30s cubic-bezier(.22,1,.36,1) !important;
}


.footer-v5-company > a:hover::after {
  transform: scaleX(1) !important;
}


/* =========================================================
   COMPANY LINKS — TRUE BULLET / TEXT CENTER ALIGNMENT
   ========================================================= */

.footer-v5-company > a {
  position: relative !important;

  width: fit-content !important;
  min-height: 26px !important;

  padding: 0 0 4px 0 !important;
  margin-bottom: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 10px !important;

  line-height: 1.2 !important;
}


/* Bullet participates in the flex row */
.footer-v5-company > a::before {
  content: "" !important;

  position: static !important;

  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;

  width: 4px !important;
  height: 4px !important;

  min-width: 4px !important;
  min-height: 4px !important;

  flex: 0 0 4px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;

  background: #55d3f3 !important;

  box-shadow:
    0 0 0 3px rgba(85,211,243,.06),
    0 0 7px rgba(85,211,243,.17) !important;

  transform: none !important;

  align-self: center !important;

  display: block !important;
}


/* Underline begins after bullet + gap */
.footer-v5-company > a::after {
  content: "" !important;

  position: absolute !important;

  left: 14px !important;
  bottom: 0 !important;

  width: calc(100% - 14px) !important;
  height: 1px !important;

  border-radius: 99px !important;

  background:
    linear-gradient(
      90deg,
      #2dbfe8,
      #73e0f8
    ) !important;

  transform: scaleX(0) !important;
  transform-origin: left center !important;

  transition:
    transform .30s cubic-bezier(.22,1,.36,1) !important;
}


.footer-v5-company > a:hover::after {
  transform: scaleX(1) !important;
}


/* =========================================================
   FOOTER V5 — HORIZONTAL OVERFLOW FIX
   ========================================================= */

/* Allow every grid column to shrink correctly */
.footer-v5-main,
.footer-v5-main > *,
.footer-v5-brand,
.footer-v5-services,
.footer-v5-service-grid,
.footer-v5-company,
.footer-v5-digital,
.footer-v5-contact {
  min-width: 0 !important;
  max-width: 100% !important;
}


/* Links must not force a column wider than available */
.footer-v5-company > a,
.footer-v5-digital > a {
  max-width: 100% !important;
  white-space: normal !important;
}


/* Service cards remain inside their grid */
.footer-v5-service-grid > a {
  min-width: 0 !important;
  max-width: 100% !important;
}


/* Long contact information must remain contained */
.footer-v5-email,
.footer-v5-phone a {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}


/* Decorative route graphics must never create page width */
.footer-v5 {
  overflow: hidden !important;
}


/* Browser-level safety against fractional-pixel overflow */
html,
body {
  max-width: 100% !important;
  overflow-x: clip !important;
}

