/* Fortified — footer.
   Values matched to live Tint computed styles (extract.mjs @1440/390).
   Footer bg rgb(20,20,20) = #141414. 4 equal columns; copyright bar below. */

.fortified-footer {
  background: #141414;
  color: var(--ft-color-on-dark);
  padding: 100px 0 0;
}

/* Columns container — Tint container max-width ~1310px, centered */
.fortified-footer-columns .fortified-container {
  max-width: 1310px;
}

.fortified-footer-grid {
  display: grid;
  /* Content-width columns with a fixed gap (logo flush left). space-between
     stretched the columns across the full width and bloated the gaps; a fixed
     column-gap keeps them tight and even. */
  grid-template-columns: auto auto auto auto;
  justify-content: start;
  column-gap: 64px;
  align-items: start;
  padding-bottom: 60px;
}

.fortified-footer-col h6 {
  /* 64px from heading top to first item top on live = ~28px line + 36px below. */
  margin: 0 0 36px;
  font-size: 19px;
  font-weight: 700;
  line-height: 28px;
  color: var(--ft-color-on-dark-strong);
  letter-spacing: -0.6px;
  text-transform: none;
}
.fortified-footer-col p {
  margin: 0;
  color: var(--ft-color-on-dark);
  font-size: 17px;
  line-height: 28.22px;
}
/* Even vertical spacing between office lines (14px → 42px rhythm, as on live). */
.fortified-footer-col p + p { margin-top: 14px; }
/* Keep the address on a single line (live layout). */
.fortified-footer-col p { white-space: nowrap; }

/* Footer links — animated underline on hover (same left-to-right clip-path wipe
   as the navbar) but WHITE, matching the light footer text. inline-block so the
   2px bar spans only the text width; position:relative anchors the ::after. */
.fortified-footer-col a {
  position: relative;
  display: inline-block;
  color: var(--ft-color-on-dark);
  transition: color 0.2s ease;
}
.fortified-footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--ft-color-on-dark-strong);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fortified-footer-col a:hover {
  color: var(--ft-color-on-dark-strong);
}
.fortified-footer-col a:hover::after,
.fortified-footer-col a:focus-visible::after {
  clip-path: inset(0 0 0 0);
}
/* The email is underlined by default (matches live); on hover the underline
   wipes away (the reverse of the other links, which wipe in). The transition on
   the base ::after animates it. */
.fortified-footer-col a[href^="mailto:"]::after {
  clip-path: inset(0 0 0 0);
}
.fortified-footer-col a[href^="mailto:"]:hover::after {
  clip-path: inset(0 100% 0 0);
}

/* Phone number — bolder and a touch larger than the other office lines. */
.fortified-footer-col a[href^="tel:"] {
  font-size: 19px;
  font-weight: 700;
}

.fortified-footer-logo img,
.fortified-footer-logo .custom-logo {
  /* height:auto + max-height keeps aspect ratio; a fixed height with max-width
     would squash the wide logo once max-width caps the width on narrow screens. */
  height: auto;
  max-height: 65px;
  width: auto;
  max-width: 100%;
}

.fortified-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fortified-footer-menu li { margin: 0; }
/* Even 14px spacing between menu items (42px rhythm, matching live). */
.fortified-footer-menu li + li { margin-top: 14px; }
.fortified-footer-menu li a {
  font-size: 17px;
  line-height: 28.22px;
}

/* Services column splits into 2 sub-cols per the live layout. Row-gap (not li
   margin) keeps both sub-columns' rows aligned at an even 14px rhythm. */
.fortified-footer-services {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  /* 64px column gap matches the main Links→Services gap. */
  gap: 14px 64px;
}
.fortified-footer-services li,
.fortified-footer-services li + li { margin: 0; }

/* Bottom copyright bar — same dark bg, no border; copyright left, credit right */
.fortified-footer-bar {
  background: #141414;
  padding: 0 0 40px;
}
.fortified-footer-bar > .fortified-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 10px 80px;
  max-width: none;
}
.fortified-copyright,
.fortified-credit {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 17px;
  line-height: 25.5px;
  letter-spacing: normal;
  text-transform: none;
}
.fortified-copyright {
  color: var(--ft-color-on-dark-strong);
}
.fortified-credit {
  color: var(--ft-color-on-dark-strong);
  text-align: right;
}
.fortified-credit a {
  color: var(--ft-color-on-dark-strong);
}
.fortified-credit a:hover {
  color: var(--ft-color-red);
}

/* Scroll-to-top button — replicates Tint .scroll_to_top_style_default.
   42.5px square, no radius, fixed bottom-right (2em = 34px @17px font).
   Default red #d82c2b, hover dark #2E2E2E (exact Tint --theme-color values).
   Hidden until scrolled; fades + lifts in (Tint slides bottom from -4em to 2em). */
.fortified-totop {
  position: fixed;
  right: 34px;
  bottom: 34px;
  width: 42.5px;
  height: 42.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d82c2b;
  color: #fff;
  border: none;
  border-radius: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease,
              background-color 0.3s ease, color 0.3s ease;
  z-index: 7999;
}
.fortified-totop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fortified-totop:hover {
  background: #2E2E2E;
  color: #fff;
}
.fortified-totop svg { display: block; }