/* Kudos Technologies brand layer on top of vendored Bootstrap 5.3.8 (CSS only).
   Brand orange #f1583b is an accent only: it is 3.39:1 on white, too low for normal-size text.
   Measured text pairs: #212529 on #fff 15.4:1; links #b8381d on #fff 5.8:1, on #f8f9fa 5.5:1;
   #fff on brand grey #5f6060 6.31:1. Re-measure any colour change. */

:root {
  --kudos-orange: #f1583b;
  --kudos-orange-text: #b8381d;
  --kudos-grey: #5f6060;
  --kudos-ink: #212529;
}

a {
  color: var(--kudos-orange-text);
  text-decoration: underline;
}

a:focus-visible {
  outline: 3px solid var(--kudos-ink);
  outline-offset: 2px;
}

/* Skip link: hidden until focused (Bootstrap visually-hidden-focusable). */
.skip-link:focus {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: #fff;
  color: var(--kudos-ink);
}

/* Header: normal flow (not sticky), navigation always visible and wrapping. */
.site-header {
  border-bottom: 4px solid var(--kudos-orange);
  background: #fff;
}

.site-logo img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--kudos-ink);
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* Static hero (replaces the V1 background video). */
.hero {
  padding: 4rem 0;
  background: var(--kudos-grey);
  color: #fff;
}

.hero h1 {
  margin: 0;
  padding-left: 1rem;
  border-left: 6px solid var(--kudos-orange);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
}

.page-section {
  padding: 3rem 0;
}

.page-section-alt {
  background: #f8f9fa;
}

.page-section h2 {
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--kudos-orange);
  display: inline-block;
}

.dev-cycle img {
  display: block;
  width: 100%;
  max-width: 452px;
  height: auto;
  margin: 2rem auto 0;
}

@media (min-width: 768px) {
  .dev-cycle img {
    max-width: 100%;
  }
}

.service-icon {
  width: 64px;
  height: auto;
  margin-bottom: 1rem;
}

.tech-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tech-logos img {
  width: 40px;
  height: auto;
}

/* Footer: white text on brand grey (6.31:1). */
.site-footer {
  background: var(--kudos-grey);
  color: #fff;
}

.site-footer a {
  color: #fff;
}

.site-footer a:focus-visible {
  outline-color: #fff;
}

.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  margin: 0;
}

.contact-details dt {
  font-weight: 700;
}

.contact-details dd {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}