/*
 * Site footer — dark primary variant.
 * Based on the footer system spec (_design-source/HTML Layout/kosh_footer.html).
 */

.site-footer {
  --footer-red: var(--color-secondary-light);   /* the site maroon, lifted a step so it reads on the near-black footer */
  overflow: hidden; /* nothing inside the footer may spill onto the section above */
  background: #0A0908;
  color: rgba(255, 255, 255, .88);
  font-family: var(--k-sans); font-weight: 400; font-size: 15px; line-height: 1.6;
}

.site-footer__main {
  max-width: calc(var(--k-container) + var(--k-gutter) * 2);
  margin-left: auto; margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); /* Marketing & Search + Web & Development + Who we serve + Explore + brand (on the right) */
  gap: 40px;
  padding: 60px var(--k-gutter) 56px;
}

.site-footer__brand { order: 5; }   /* desktop: the logo block sits on the right */

.site-footer__summary {
  margin: 20px 0 24px; max-width: 260px;
  font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .72);
}

.site-footer__social { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.site-footer__contact-link {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 15px; color: rgba(255, 255, 255, .82);
  transition: color .2s;
}
.site-footer__contact-link:hover { color: var(--k-white); }
/* the icons keep their own brand colours */
.site-footer__icon.site-footer__icon--mail { color: #1E88E5; }
.site-footer__icon.site-footer__icon--whatsapp { color: #25D366; }
.site-footer__icon {
  flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .85);
  transition: border-color .2s, color .2s;
}
.site-footer__icon svg { width: 20px; height: 20px; }

.site-footer__col { display: flex; flex-direction: column; }
.site-footer__label {
  font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--footer-red); margin-bottom: 22px; white-space: nowrap;   /* headings stay on one line, so the lists line up */
}
/* A long link list (7+ links, e.g. Capabilities) runs in two columns so the footer stays short */
.site-footer__col:has(> .site-footer__link:nth-of-type(7)) {
  grid-column: span 2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-content: start;
}
.site-footer__col:has(> .site-footer__link:nth-of-type(7)) > .site-footer__label { grid-column: 1 / -1; }
.site-footer__link {
  font-size: 15px; color: rgba(255, 255, 255, .82);
  padding: 6px 0; transition: color .2s, padding-left .25s var(--k-ease);
}
.site-footer__link:hover { color: var(--k-white); padding-left: 6px; }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);   /* full-bleed rule, content on the container */
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 22px max(var(--k-gutter), calc((100% - var(--k-container)) / 2));
  font-size: 13px; color: rgba(255, 255, 255, .62);
}
.site-footer__copy em { font-style: normal; color: var(--footer-red); }
.site-footer__legal { display: flex; flex-wrap: wrap; }
.site-footer__legal a {
  padding: 0 16px; border-right: 1px solid rgba(255, 255, 255, .2); transition: color .2s;
}
.site-footer__legal a:first-child { padding-left: 0; }
.site-footer__legal a:last-child { padding-right: 0; border-right: none; }
.site-footer__legal a:hover { color: var(--k-white); }

@media (max-width: 1024px) {
  .site-footer__main { grid-template-columns: repeat(2, 1fr); }
  .site-footer__label { white-space: normal; }
  .site-footer__brand { grid-column: 1 / -1; order: -1; }   /* tablets & phones: logo first */
}

@media (max-width: 560px) {
  /* phones: short columns side by side, the long list full width; contact details stay a 2×2 grid */
  .site-footer__main { gap: 36px 24px; padding-top: 48px; padding-bottom: 48px; }
  .site-footer__col:has(> .site-footer__link:nth-of-type(7)) { grid-column: 1 / -1; column-gap: 20px; }
    }

/* Statement line at the top of the footer ("Your next project already has a Team"): big, faint, italic serif,
   the same treatment as the service-page hero watermark, above the link columns */
.site-footer__statement { overflow: hidden; padding-top: clamp(36px, 4vw, 60px); }
.site-footer__statement-text {
  margin: 0;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 6vw;
  line-height: 1;
  padding-bottom: .22em;   /* room for the descenders (y, j, p): the box clips overflow */
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .14);
  user-select: none;
}
.site-footer__statement-text em { font-style: italic; color: var(--color-secondary); }   /* the site maroon (hero text, maroon buttons) */
@media (max-width: 1024px) {
  /* tablets & phones: the line wraps, bigger, aligned with the content */
  .site-footer__statement-text { white-space: normal; font-size: 11vw; line-height: 1.02; text-align: left; padding: 0 var(--k-gutter); }
}

/* Animated statement (assets/js/modules/footer-statement.js): letters rise in, then a wave of light
   (--glow 0→1→0) runs through them; "Team" glows in maroon */
.site-footer__statement-text.is-animated .split-word { display: inline-block; white-space: nowrap; }
.site-footer__statement-text.is-animated .split-char {
  --glow: 0;
  display: inline-block;
  color: rgba(255, 255, 255, calc(.14 + var(--glow) * .62));
  text-shadow: 0 0 calc(var(--glow) * 28px) rgba(255, 255, 255, calc(var(--glow) * .35));
  will-change: transform;
}
.site-footer__statement-text.is-animated em .split-char {
  color: rgb(calc(111 + var(--glow) * 50), calc(var(--glow) * 12), calc(var(--glow) * 12));
  text-shadow: 0 0 calc(var(--glow) * 34px) rgba(111, 0, 0, calc(var(--glow) * .8));
}

/* Social icons (Admin → Site settings → Site & contact details → social) */
.site-footer__follow { display: flex; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.site-footer__follow-link {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  color: rgba(255, 255, 255, .85);
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.site-footer__follow-link svg { width: 17px; height: 17px; }
.site-footer__follow-link:hover { background: #fff; border-color: #fff; color: var(--color-secondary); transform: translateY(-2px); }
.site-footer__follow-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }