/* Design tokens — the brand orange and muted-text grays had drifted into 8
   and 5 near-duplicate hex values respectively (leftover from iterative
   tweaks). Consolidated here to a single source of truth: 4 orange stops
   (solid, light, dark, and the pale "shimmer" used only in the animated
   wordmark sweep) and 2 grays (muted text on light backgrounds, muted text
   on dark backgrounds). Every color below replaces at least one former
   one-off hex in this file. */
:root {
  --tma-primary: #FF9000;
  --tma-primary-dark: #FF7A00;
  --tma-primary-light: #FFB44D;
  --tma-primary-shimmer: #FFD37A;
  --tma-muted: #6b6b70;
  --tma-muted-inverse: #8a8a90;
  --tma-radius-sm: 8px;
  --tma-radius-md: 14px;
  --tma-radius-pill: 50px;
}

/* Typography — vendor theme used Space Mono (monospace) for everything, which
   reads as a code-editor/dev-tool font and undercuts the business-facing
   copy throughout the site. Poppins for headings/UI, Inter for body copy.
   The Kaushan Script "TMA" wordmark is untouched — its own more specific
   selector still wins. */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.btn,
.tma-navbar .navbar-brand,
.tma-navbar .navbar-nav > li > a,
.tma-footer-brand,
.tma-footer-columns h4,
.tma-team-card .role,
.tma-category-card h3,
.tma-stat-number {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.fh5co-cover .display-tc h1 {
  font-family: "Kaushan Script", cursive;
}

/* TMA site navigation + inner page banners */

.tma-navbar {
  background: linear-gradient(180deg, rgba(15, 15, 20, 0.97), rgba(12, 12, 16, 0.94));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: none;
  border-bottom: 1px solid rgba(255, 144, 0, 0.12);
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}
@keyframes tma-gradient-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Shared "TMA" gradient wordmark treatment — used by the nav brand, footer
   brand, and the copyright-line "TMA", so all three stay in sync. */
.tma-gradient-text {
  display: inline-block;
  font-weight: 700;
  background-image: linear-gradient(90deg, var(--tma-primary), var(--tma-primary-shimmer), var(--tma-primary-dark), var(--tma-primary-light), var(--tma-primary));
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: font-size 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), letter-spacing 0.4s ease, background-position 0.6s ease;
}
.tma-gradient-text:hover,
.tma-gradient-text:focus {
  animation: tma-gradient-sweep 1.6s linear infinite;
}
.tma-navbar .navbar-brand {
  letter-spacing: 2px;
  font-size: 22px;
  height: auto;
  padding-top: 22px;
  padding-bottom: 22px;
  line-height: 20px;
}
.tma-navbar .navbar-brand:hover,
.tma-navbar .navbar-brand:focus {
  font-size: 27px;
  letter-spacing: 3px;
}
.tma-navbar .navbar-nav > li {
  position: relative;
}
.tma-navbar .navbar-nav > li > a {
  position: relative;
  color: #f2f2f2;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-top: 22px;
  padding-bottom: 22px;
  background: none;
  transform: scale(1) translateY(0);
  transform-origin: center bottom;
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tma-navbar .navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 14px;
  height: 2px;
  background: linear-gradient(90deg, var(--tma-primary-light), var(--tma-primary-dark));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}
.tma-navbar .navbar-nav > li.active > a {
  color: var(--tma-primary);
  background: transparent;
}
.tma-navbar .navbar-nav > li > a:hover,
.tma-navbar .navbar-nav > li > a:focus {
  color: transparent;
  background-image: linear-gradient(90deg, var(--tma-primary), var(--tma-primary-shimmer), var(--tma-primary-dark), var(--tma-primary-light), var(--tma-primary));
  background-size: 300% 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(1.05) translateY(-1px);
  animation: tma-gradient-sweep 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tma-navbar .navbar-nav > li > a:hover,
  .tma-navbar .navbar-nav > li > a:focus {
    transform: none;
  }
}
.tma-navbar .navbar-nav > li > a:hover::after,
.tma-navbar .navbar-nav > li > a:focus::after,
.tma-navbar .navbar-nav > li.active > a::after {
  transform: scaleX(1);
}
.tma-navbar .navbar-toggle {
  border-color: #444;
}
.tma-navbar .navbar-toggle .icon-bar {
  background-color: #f2f2f2;
}
.tma-navbar .navbar-toggle:hover,
.tma-navbar .navbar-toggle:focus {
  background-color: transparent;
}
.tma-navbar .navbar-collapse {
  border-color: #333;
}
@media (max-width: 767px) {
  .tma-navbar .navbar-collapse {
    background: rgba(15, 15, 20, 0.98);
  }
}

/* Inner page banner (About, Services, Portfolio, etc.) */
.tma-page-banner {
  position: relative;
  padding: 110px 0 70px;
  background-size: cover;
  background-position: center center;
  text-align: center;
  color: #fff;
}
.tma-page-banner .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 15, 0.78);
}
.tma-page-banner .tma-page-banner-content {
  position: relative;
  z-index: 2;
}
.tma-page-banner h1 {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.tma-page-banner p {
  font-size: 17px;
  color: #e6e6e6;
  max-width: 640px;
  margin: 0 auto;
}
.tma-page-banner .breadcrumb-nav {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c7c7c7;
}
.tma-page-banner .breadcrumb-nav a {
  color: var(--tma-primary);
}

/* Testimonials */
.tma-testimonial {
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--tma-radius-md);
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: transform 0.7s ease, box-shadow 0.7s ease;
}
.tma-testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(20, 20, 30, 0.1);
}

/* Portfolio work tiles — subtle lift + zoom to match the site's tactile hover language */
.work {
  transition: transform 0.7s ease, box-shadow 0.7s ease;
}
.work:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 34px rgba(20, 20, 30, 0.25);
}

/* Form inputs — Bootstrap's default 4px radius reads flatter than the
   rest of the site's card/button scale; branded focus glow instead of the
   default flat black border. */
.form-control {
  border-radius: var(--tma-radius-sm);
}
.form-control:focus,
.form-control:active {
  border-color: var(--tma-primary) !important;
  box-shadow: 0 0 0 4px rgba(255, 144, 0, 0.12) !important;
  transition: border-color 0.65s ease, box-shadow 0.65s ease;
}
.tma-testimonial p.quote {
  font-size: 16px;
  font-style: italic;
  color: #555;
  margin-bottom: 18px;
}
.tma-testimonial .quote-source {
  font-weight: 700;
  color: #222;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}
.tma-testimonial .quote-role {
  display: block;
  color: #999;
  font-weight: 400;
  text-transform: none;
  font-size: 13px;
  margin-top: 2px;
}

/* Services — category-wise breakdown, modern card layout */
.tma-services-section {
  background: #f7f7f9;
  padding: 40px 0;
}
.tma-equal-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.tma-equal-row > [class*="col-"] {
  display: flex;
  margin-bottom: 30px;
}
.tma-category-card {
  background: #fff;
  border-radius: var(--tma-radius-md);
  border-top: 4px solid var(--tma-primary);
  box-shadow: 0 4px 20px rgba(20, 20, 30, 0.06);
  padding: 36px 32px 30px;
  width: 100%;
  transition: transform 0.75s ease, box-shadow 0.75s ease;
}
.tma-category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(20, 20, 30, 0.12);
}
.tma-category-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #f3f3f5;
  color: var(--tma-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.tma-category-card h3 {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 700;
  color: #1c1c1f;
}
.tma-category-card .tma-category-desc {
  color: var(--tma-muted);
  font-size: 14px;
  margin-bottom: 22px;
  line-height: 1.5;
}
.tma-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tma-service-list li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f2;
  font-size: 14.5px;
  color: #444;
}
.tma-service-list li:last-child {
  border-bottom: none;
}
.tma-service-list li i {
  color: var(--tma-primary);
  margin-right: 12px;
  font-size: 16px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Consistent vertical rhythm across all major sections — standardized to
   24px top and bottom everywhere. */
#fh5co-about,
#fh5co-approach,
#fh5co-values,
#fh5co-leadership,
#fh5co-quality,
#fh5co-resume,
#fh5co-skills,
#fh5co-started,
#fh5co-work,
#fh5co-team,
#fh5co-testimonials,
#fh5co-consult,
#fh5co-services-intro,
#fh5co-service-categories,
#fh5co-features {
  padding: 40px 0 !important;
}
#fh5co-features .services-padding {
  padding: 0;
}

/* Feature-left icon cards — vendor CSS only styled these inside #fh5co-features
   (and assumed a dark background, setting white text), which broke every other
   section reusing this component (Leadership, Values, Quality, Careers) and made
   the home page's "What We Do" headings white-on-light-gray. Override consistently. */
.feature-left {
  margin-bottom: 40px;
  transition: transform 0.7s ease;
}
.feature-left:hover {
  transform: translateY(-4px);
}
.feature-left .icon {
  display: table;
  text-align: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  background: #f3f3f5;
  border-radius: 50%;
}
.feature-left .icon i {
  font-size: 32px;
  display: table-cell;
  vertical-align: middle;
  height: 84px;
  color: var(--tma-primary) !important;
}
.feature-left h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1c1c1f !important;
  margin-bottom: 10px;
}
.feature-left p {
  font-size: 14.5px;
  color: var(--tma-muted) !important;
  line-height: 1.6;
}

/* Value-verb rows — five short value boxes that don't divide evenly into
   Bootstrap's twelfths, so they're laid out with flexbox instead: five
   across on wide screens, wrapping down gracefully on smaller ones. */
.tma-value-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
}
.tma-value-row .feature-left {
  flex: 1 1 180px;
  max-width: 200px;
}

/* Buttons — gradient fill + lift on hover for a richer, more premium feel */
.btn-lg, .btn-primary, .btn-default {
  transition: transform 0.65s ease, box-shadow 0.65s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--tma-primary-light), var(--tma-primary-dark));
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(255, 122, 0, 0.3);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: linear-gradient(135deg, var(--tma-primary-shimmer), var(--tma-primary)) !important;
  border-color: transparent !important;
}
.fh5co-cover .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* "Contact Us" — the sole closing CTA on dark sections, so it gets the full
   gradient treatment: solid brand gradient fill, glowing ring on hover, and
   a crisp focus-visible ring for keyboard users. */
.btn-default,
#fh5co-started .btn-default {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tma-primary-light), var(--tma-primary-dark)) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--tma-radius-pill) !important;
  box-shadow: 0 6px 18px rgba(255, 122, 0, 0.35);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
.btn-default:hover, .btn-default:focus, .btn-default:active,
#fh5co-started .btn-default:hover, #fh5co-started .btn-default:focus, #fh5co-started .btn-default:active {
  background: linear-gradient(135deg, var(--tma-primary-shimmer), var(--tma-primary)) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255, 122, 0, 0.55), 0 0 0 6px rgba(255, 144, 0, 0.15) !important;
}
.btn-default:focus-visible,
#fh5co-started .btn-default:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px;
}

/* Cards — softer, deeper radius for a more modern feel */
.tma-category-card,
.tma-testimonial,
.tma-team-card,
.work {
  border-radius: var(--tma-radius-md);
}
.tma-category-card {
  border-top: none;
  border-radius: var(--tma-radius-md);
  position: relative;
}
.tma-category-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--tma-radius-md) var(--tma-radius-md) 0 0;
  background: linear-gradient(90deg, var(--tma-primary-light), var(--tma-primary-dark));
}

/* Icon badges — soft gradient instead of flat gray, more depth. On hover the
   card lifts (.feature-left:hover) and the icon itself gains a brand-colored
   ring, so the interaction feedback isn't limited to the card's shadow. */
.tma-category-icon,
.feature-left .icon {
  background: linear-gradient(145deg, #ffffff, #efeff2);
  box-shadow: 0 2px 6px rgba(20, 20, 30, 0.08), inset 0 0 0 1px rgba(0,0,0,0.03);
  transition: box-shadow 0.4s ease;
}
.feature-left:hover .icon {
  box-shadow: 0 4px 14px rgba(255, 144, 0, 0.25), inset 0 0 0 2px var(--tma-primary-light);
}
#fh5co-leadership .feature-left .icon {
  background: linear-gradient(135deg, var(--tma-primary-light), var(--tma-primary-dark));
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.35);
}

/* Hero overlay — subtle warm glow at the base instead of a flat tint */
.fh5co-cover .overlay,
#fh5co-header .overlay {
  background: linear-gradient(180deg, rgba(10,10,15,0.72) 0%, rgba(10,10,15,0.55) 55%, rgba(40,20,5,0.62) 100%);
}

/* Contact details (email, phone) — make them stand out from surrounding copy */
.tma-contact-highlight {
  color: var(--tma-primary);
  font-weight: 700;
}
a.tma-contact-highlight:hover,
a.tma-contact-highlight:focus {
  color: var(--tma-primary-dark);
  text-decoration: underline;
}
.tma-phone-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}
.tma-phone-highlight {
  font-size: 26px;
}
.tma-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff !important;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: var(--tma-radius-pill);
  font-size: 14px;
  transition: transform 0.65s ease, box-shadow 0.65s ease;
}
.tma-whatsapp-btn:hover,
.tma-whatsapp-btn:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

/* Scroll-reveal system — driven by js/scroll-reveal.js toggling .in-view
   (via IntersectionObserver), so elements re-animate every time they cross
   the viewport edge. Left/right slides only — no top/bottom movement. */
.animate-box {
  opacity: 0;
  transform: translateX(-56px);
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1), transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.animate-box[data-animate-effect="fadeInLeft"] {
  transform: translateX(-56px);
}
.animate-box[data-animate-effect="fadeInRight"] {
  transform: translateX(56px);
}
.animate-box[data-animate-effect="fadeIn"] {
  transform: none;
}
.animate-box.in-view {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .animate-box {
    transition: opacity 0.3s ease;
    transform: none !important;
  }
}

/* Section heading separator — small accent bar under every h2 site-wide */
.fh5co-heading h2 {
  position: relative;
  padding-bottom: 22px;
}

/* Section dividers — some adjacent sections share the same background color
   (white-on-white, gray-on-gray) with nothing marking the boundary between
   them. A hairline top border gives each section a clear edge regardless of
   what color the section above happens to be. */
.tma-section-divider {
  border-top: 1px solid #ececef;
}
.tma-inline-divider {
  border: none;
  border-top: 1px solid #ececef;
  max-width: 720px;
  margin: 50px auto;
}
.fh5co-heading h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: var(--tma-primary);
  border-radius: 2px;
}
.fh5co-bg-dark .fh5co-heading h2::after {
  background: #fff;
}
/* Alternating section alignment: sections that slide in from the right sit
   left-aligned, sections that slide in from the left sit right-aligned —
   the underline accent under each h2 follows the same edge. */
.text-left .fh5co-heading h2::after {
  left: 0;
  transform: none;
}
.text-right .fh5co-heading h2::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Our Capabilities / Leadership / Our Journey — distinct looks */
#fh5co-leadership {
  background: #fff;
}
#fh5co-leadership .feature-left .icon {
  background: var(--tma-primary);
}
#fh5co-leadership .feature-left .icon i {
  color: #fff !important;
}
#fh5co-resume {
  background: #f7f7f9;
}
#fh5co-approach {
  background: #f7f7f9;
}

/* Hero: matches .tma-page-banner's height and title/description spacing —
   same 110px/70px padding, same 10px gap between the title and the line
   right after it — instead of a bespoke fixed-height/flexbox system, so the
   home hero and every inner page banner size themselves the same way. */
.tma-hero-shift {
  margin: 0;
  position: relative;
  top: 20px;
}
.tma-hero-shift h1 {
  margin-top: 0;
  margin-bottom: 0px;
}
.tma-hero-shift h3 {
  margin-bottom: 0;
}
.tma-hero-shift .tma-slogan-line--soft {
  margin-top: 10px;
  font-size: 16.5px;
  color: #fff;
  opacity: 1;
}

/* Hero slogan — a short, bold statement in place of the previous multi-line
   paragraph stack, sized to stand out against the hero. */
.tma-hero-big-slogan {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin: 10px 0 0;
}
@media (max-width: 768px) {
  .tma-hero-big-slogan {
    font-size: 24px;
  }
}

#fh5co-header.tma-hero-compact,
.tma-hero-compact,
#fh5co-header.tma-hero-compact .display-tc,
.tma-hero-compact .display-tc {
  height: 294px;
}
.tma-hero-compact .display-t {
  display: flex;
}
.tma-hero-compact .display-tc {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Hero body copy — base theme only styles h1-h3, leaves <p> dark and unreadable on the dark cover */
#fh5co-header .display-tc p,
.fh5co-cover .display-tc p {
  color: #f2f2f2;
}

/* About — stat strip */
.tma-stats-section {
  background: #f7f7f9;
  padding: 40px 0;
}
.tma-stat {
  text-align: center;
  background: #fff;
  border-radius: var(--tma-radius-md);
  box-shadow: 0 4px 16px rgba(20, 20, 30, 0.06);
  padding: 26px 10px;
  margin: 0 10px 20px;
  transition: transform 0.65s ease, box-shadow 0.65s ease;
}
.tma-stat:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(20, 20, 30, 0.1);
}
.tma-stat .tma-stat-number {
  display: block;
  font-size: 42px;
  font-weight: 700;
  color: var(--tma-primary);
  line-height: 1.1;
}
.tma-stat .tma-stat-label {
  display: block;
  margin-top: 8px;
  color: var(--tma-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* About — technology / skill pills */
.tma-skill-groups {
  display: flex;
  flex-wrap: wrap;
  margin: 20px -15px 10px;
}
.tma-skill-group {
  background: #fff;
  border-radius: var(--tma-radius-md);
  box-shadow: 0 4px 16px rgba(20, 20, 30, 0.06);
  padding: 28px 26px;
  margin: 0 15px 30px;
  flex: 1 1 280px;
  transition: transform 0.65s ease, box-shadow 0.65s ease;
}
.tma-skill-group:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(20, 20, 30, 0.1);
}
.tma-skill-group-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #efeff2);
  color: var(--tma-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(20, 20, 30, 0.08);
}
.tma-skill-group h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #1c1c1f;
  margin-bottom: 14px;
}
.tma-skill-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tma-skill-pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 20px;
  background: #f7f7f9;
  border: 1px solid #ececef;
  color: #444;
  font-size: 13.5px;
}

/* Footer (Creative Chaos style: logo/tagline/social row + 4 link columns) */
.tma-footer {
  position: relative;
  background: linear-gradient(180deg, #0f0f13 0%, #0a0a0d 100%);
  color: #b8b8bd;
  padding: 60px 0 0;
  overflow: hidden;
}
.tma-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tma-primary-dark), var(--tma-primary-light), var(--tma-primary-dark));
}
.tma-footer::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.12), transparent 70%);
  pointer-events: none;
  opacity: 0.7;
  transform: scale(1);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Whole footer reacts when any link inside it is hovered — the corner glow
   blooms and a faint warm wash lifts the whole section, not just the link.
   .tma-footer-glow is the JS fallback for browsers without :has() support. */
.tma-footer {
  transition: box-shadow 0.6s ease;
}
.tma-footer:has(a:hover),
.tma-footer.tma-footer-glow {
  box-shadow: inset 0 0 160px rgba(255, 122, 0, 0.1);
}
.tma-footer:has(a:hover)::after,
.tma-footer.tma-footer-glow::after {
  opacity: 1;
  transform: scale(1.45);
}
.tma-footer a {
  color: #b8b8bd;
  transition: color 0.7s ease;
}
.tma-footer a:hover,
.tma-footer a:focus {
  color: var(--tma-primary);
  text-decoration: none;
}
.tma-footer-columns a {
  position: relative;
  display: block;
  width: 100%;
  transform: translateX(0);
  transition: transform 0.35s ease, color 0.35s ease;
}
.tma-footer-columns a:hover {
  transform: translateX(3px);
}
.tma-footer-columns a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--tma-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.tma-footer-columns a:hover::after {
  transform: scaleX(1);
}
.tma-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 40px;
  border-bottom: 1px solid #232327;
}
.tma-footer-brand {
  font-size: 24px;
  letter-spacing: 2px;
}
.tma-footer-brand:hover {
  font-size: 27px;
  letter-spacing: 3px;
  animation: tma-gradient-sweep 1.6s linear infinite;
}
.tma-footer-tagline {
  margin: 6px 0 0;
  color: var(--tma-muted-inverse);
  font-size: 14px;
}
.tma-footer-social {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
@media (min-width: 768px) {
  .tma-footer-social {
    margin: 0;
  }
}
.tma-footer-social li {
  display: inline-block;
  margin-left: 14px;
}
.tma-footer-social li:first-child {
  margin-left: 0;
}
.tma-footer-social a {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border: 1px solid #333338;
  border-radius: 50%;
  color: #e6e6e6;
  transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.tma-footer-social a:hover {
  border-color: transparent;
  background: linear-gradient(135deg, var(--tma-primary-light), var(--tma-primary-dark));
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(255, 122, 0, 0.35);
}
.tma-footer-columns {
  padding: 40px 0 20px;
}
.tma-footer-columns [class*="col-"] {
  margin-bottom: 20px;
  padding: 10px 12px;
  border-radius: var(--tma-radius-sm);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease;
}
/* At desktop widths, equal-width grid columns leave uneven trailing
   whitespace when link text is short (e.g. "Connect") vs long (e.g.
   "Solutions"), which reads as a lopsided left/right margin even though the
   underlying column boxes are symmetric. Sizing each column to its own
   content and distributing them with space-between makes the actual visible
   text — not the invisible column box — line up flush with the container
   edges on both sides. */
@media (min-width: 992px) {
  .tma-footer-columns {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  /* Bootstrap's .row clearfix ::before/::after generate boxes that become
     real flex items once the row is flexed, which throws off
     justify-content: space-between. Not needed once flex handles layout. */
  .tma-footer-columns::before,
  .tma-footer-columns::after {
    content: none;
  }
  .tma-footer-columns [class*="col-"] {
    float: none;
    width: auto;
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
  }
  .tma-footer-columns [class*="col-"]:first-child {
    padding-left: 0;
  }
  .tma-footer-columns [class*="col-"]:last-child {
    padding-right: 0;
  }
}
/* Whole column (heading + all its links) reacts together when any link
   inside it is hovered — not just the individual link. .tma-col-active is
   the JS fallback for browsers without :has() support. */
.tma-footer-columns [class*="col-"]:has(a:hover),
.tma-footer-columns [class*="col-"].tma-col-active {
  transform: translateY(-2px);
  background: rgba(255, 144, 0, 0.06);
}
.tma-footer-columns [class*="col-"]:has(a:hover) h4,
.tma-footer-columns [class*="col-"].tma-col-active h4 {
  color: var(--tma-primary);
}
@media (prefers-reduced-motion: reduce) {
  .tma-footer-columns [class*="col-"]:has(a:hover),
  .tma-footer-columns [class*="col-"].tma-col-active {
    transform: none;
  }
}
.tma-footer-columns h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: color 0.4s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.tma-footer-columns ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tma-footer-columns li {
  margin-bottom: 10px;
  font-size: 14px;
}
.tma-footer-bottom {
  border-top: 1px solid #232327;
  padding: 10px 0;
  text-align: center;
  font-size: 13px;
  color: var(--tma-muted-inverse);
}
.tma-footer-bottom .tma-credit-highlight {
  color: var(--tma-primary);
  font-weight: 600;
}
a.tma-footer-bottom-link {
  color: var(--tma-primary);
  font-weight: 700;
  white-space: nowrap;
}
a.tma-footer-bottom-link:hover,
a.tma-footer-bottom-link:focus {
  color: var(--tma-primary-dark);
  text-decoration: underline;
}
.tma-footer-bottom a {
  color: #fff;
}
.tma-copy-tma {
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* Work Summary — project cards */
.tma-project-row {
  display: flex;
  flex-wrap: wrap;
}
.tma-project-row > [class*="col-"] {
  display: flex;
  margin-bottom: 30px;
}
.tma-project-card {
  background: #fff;
  border-radius: var(--tma-radius-md);
  border-top: 4px solid var(--tma-primary);
  box-shadow: 0 4px 20px rgba(20, 20, 30, 0.06);
  padding: 30px 28px 26px;
  width: 100%;
  transition: transform 0.75s ease, box-shadow 0.75s ease;
}
.tma-project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(20, 20, 30, 0.12);
}
.tma-project-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.tma-project-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #efeff2);
  box-shadow: 0 2px 6px rgba(20, 20, 30, 0.08), inset 0 0 0 1px rgba(0,0,0,0.03);
  color: var(--tma-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.tma-project-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1c1c1f;
}
.tma-project-platform {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tma-muted);
}
.tma-project-env {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tma-env-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--tma-radius-pill);
  background: #f7f7f9;
  border: 1px solid #ececef;
  color: var(--tma-muted);
  font-size: 12px;
  font-weight: 600;
}
.tma-project-summary {
  color: #4a4a50;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tma-project-card.tma-expanded .tma-project-summary {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.tma-project-more {
  display: none;
  margin-top: 6px;
}
.tma-project-card.tma-expanded .tma-project-more {
  display: block;
}
.tma-project-more h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1c1c1f;
  margin-bottom: 10px;
}
.tma-project-more ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tma-project-more li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #4a4a50;
  line-height: 1.5;
}
.tma-project-more li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tma-primary);
}
.tma-project-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
  color: var(--tma-primary);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.35s ease;
}
.tma-project-toggle-btn:hover,
.tma-project-toggle-btn:focus {
  color: var(--tma-primary-dark);
}
.tma-project-toggle-btn i {
  font-size: 10px;
  transition: transform 0.35s ease;
}
.tma-project-card.tma-expanded .tma-project-toggle-btn i {
  transform: rotate(180deg);
}
.tma-toggle-label-less {
  display: none;
}
.tma-project-card.tma-expanded .tma-toggle-label-more {
  display: none;
}
.tma-project-card.tma-expanded .tma-toggle-label-less {
  display: inline;
}

/* Team card */
.tma-team-card {
  text-align: center;
  padding: 20px 15px 30px;
}
.tma-team-card img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 18px;
  border: 4px solid var(--tma-primary);
}
.tma-team-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 144, 0, 0.12);
  color: var(--tma-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 700;
  margin: 0 auto 18px;
  border: 4px solid var(--tma-primary);
}
.tma-team-card h3 {
  margin-bottom: 2px;
}
.tma-team-card .role {
  color: var(--tma-primary);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
}
.tma-team-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
  position: relative;
  left: 20px;
}
.tma-team-avatar + .tma-team-name-row {
  left: 0;
}
.tma-team-name-text {
  text-align: center;
}
.tma-team-name-text h3 {
  margin-bottom: 2px;
}
.tma-team-name-text .role {
  margin-bottom: 0;
}
.tma-team-linkedin {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tma-primary);
  transition: transform 0.65s ease, border-color 0.65s ease;
}
.tma-team-linkedin:hover {
  transform: translateY(-2px);
  border-color: var(--tma-primary);
}

/* Smooth in-page scrolling (anchor links, gototop) */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Button ripple — tactile click feedback, ring expands from the click point */
.btn {
  position: relative;
  overflow: hidden;
}
.tma-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: tma-ripple-expand 0.6s ease-out;
  pointer-events: none;
}
@keyframes tma-ripple-expand {
  to { transform: scale(2.6); opacity: 0; }
}

/* Card tilt — subtle 3D perspective shift toward the cursor, applied via
   inline transform set in JS alongside the spotlight tracking. */
.tma-tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s ease, box-shadow 0.65s ease;
  will-change: transform;
}

/* Scroll progress bar — thin gradient line across the top that fills as the
   page scrolls, driven by js/tma-effects.js */
.tma-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--tma-primary), var(--tma-primary-shimmer), var(--tma-primary-dark));
  z-index: 2000;
  transition: width 0.1s linear;
}

/* Cursor-tracked spotlight glow on cards — a soft radial highlight that
   follows the mouse, positioned via --x/--y custom properties set in JS. */
.tma-spotlight {
  position: relative;
  overflow: hidden;
}
.tma-spotlight::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), rgba(255, 144, 0, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tma-spotlight:hover::before {
  opacity: 1;
}

/* Animated stat count-up target styling stays visually identical; the
   number itself is written by JS. */
.tma-stat-number[data-count-to] {
  font-variant-numeric: tabular-nums;
}

/* Back to top — redesigned with gradient fill and a soft pulse ring */
.gototop a {
  background: linear-gradient(135deg, var(--tma-primary-light), var(--tma-primary-dark)) !important;
  box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.gototop a:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 26px rgba(255, 122, 0, 0.55);
}
.gototop::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 122, 0, 0.5);
  animation: tma-pulse-ring 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes tma-pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gototop::after { animation: none; }
}

/* ---- Accessibility: skip link + global focus-visible fallback ---- */
.tma-skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--tma-primary-dark);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.tma-skip-link:hover,
.tma-skip-link:focus {
  color: #fff;
  text-decoration: none;
}

*:focus-visible {
  outline: 2px solid var(--tma-primary-dark);
  outline-offset: 2px;
}

/* Slogan stacks — replace dense paragraphs with a handful of short, punchy
   lines. Each line takes a different visual weight so the block reads like
   a quick rhythm instead of a wall of text. Colors are opacity-based against
   the surrounding text color so the same classes work on light and dark
   sections without a separate light/dark variant. */
.tma-slogan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px;
}
.tma-slogan-line {
  margin: 0;
  line-height: 1.45;
}
.tma-slogan-line--lead {
  font-size: 19px;
  font-weight: 700;
  opacity: 1;
}
.tma-slogan-line--emphasis {
  font-size: 17px;
  font-weight: 600;
  color: var(--tma-primary-dark) !important;
}
.tma-slogan-line--body {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.85;
}
.tma-slogan-line--soft {
  font-size: 14.5px;
  font-weight: 400;
  font-style: italic;
  opacity: 0.65;
}
.text-center .tma-slogan {
  align-items: center;
}