/* Service cards */
.service {
  overflow: hidden;
  isolation: isolate;
  transition:
    color 380ms cubic-bezier(.2, .75, .25, 1),
    background 380ms cubic-bezier(.2, .75, .25, 1),
    border-color 380ms ease,
    transform 380ms cubic-bezier(.2, .75, .25, 1),
    box-shadow 380ms ease;
}

.service::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(224, 189, 114, .2), transparent 27%),
    linear-gradient(145deg, var(--navy2), var(--navy));
  opacity: 0;
  transform: scale(.96);
  transition:
    opacity 380ms ease,
    transform 520ms cubic-bezier(.2, .75, .25, 1);
}

.service:hover {
  color: #fff;
  border-color: rgba(199, 155, 72, .55);
  background: var(--navy);
  box-shadow: 0 26px 65px rgba(7, 26, 58, .24);
  transform: translateY(-9px);
}

.service:hover::before {
  opacity: 1;
  transform: scale(1);
}

.service.primary::before {
  opacity: .18;
}

.service.primary:hover::before {
  opacity: .8;
}

.service h3,
.service > p,
.service li,
.service > a,
.service-top b {
  transition: color 280ms ease, transform 280ms ease;
}

.service-top > b {
  color: #a77b2a;
  font: 700 22px "Manrope", sans-serif;
  letter-spacing: -1px;
}

.service:hover .service-top > b {
  transform: translateX(4px);
}

/* Illuminated project road */
.steps article {
  position: relative;
  cursor: default;
}

.steps article > i {
  height: 2px;
  overflow: visible;
  background: #d5d9df;
  transition: background 350ms ease, box-shadow 350ms ease;
}

.steps article > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(.2, .75, .2, 1);
}

.steps article:hover > i {
  box-shadow: 0 0 16px rgba(199, 155, 72, .55);
}

.steps article:hover > i::after {
  transform: scaleX(1);
}

.steps article:hover > i::before {
  background: var(--gold2);
  box-shadow:
    0 0 0 7px rgba(199, 155, 72, .13),
    0 0 20px rgba(199, 155, 72, .65);
  transform: scale(1.15);
}

.steps article h3,
.steps article p,
.steps article > b,
.steps article > i::before {
  transition: color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
}

.steps article:hover h3 {
  color: var(--blue);
}

.steps article:hover > b {
  color: var(--blue);
}

.service:hover > p,
.service:hover li {
  color: #bdc9da;
}

.service:hover li {
  border-color: rgba(255, 255, 255, .13);
}

.service:hover > a {
  color: var(--gold2);
}

.service:hover .service-top b {
  color: var(--gold2);
}

.service-icon {
  width: 68px !important;
  height: 68px !important;
  border: 1px solid rgba(7, 26, 58, .08);
  background: linear-gradient(145deg, #f7f8fa, #e9edf3) !important;
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(7, 26, 58, .08);
  transition:
    transform 420ms cubic-bezier(.2, .8, .2, 1),
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}

.service-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 320ms ease, transform 420ms ease;
}

.service:hover .service-icon {
  border-color: rgba(224, 189, 114, .55);
  background: linear-gradient(145deg, var(--gold2), var(--gold)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  transform: translateY(-4px) rotate(-2deg) scale(1.06);
}

.service:hover .service-icon svg {
  stroke: var(--navy);
  transform: scale(.94);
}

/* Technology loading ring around the TSA mark */
.monogram::before {
  content: "";
  position: absolute;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  opacity: .28;
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle, #000 0 48%, transparent 70%);
}

.monogram > span {
  width: 350px;
  height: 350px;
  border: 2px solid rgba(255, 255, 255, .16);
  border-top-color: var(--gold2);
  border-right-color: rgba(224, 189, 114, .45);
  border-bottom-style: dashed;
  border-radius: 50%;
  box-shadow:
    0 0 0 18px rgba(255, 255, 255, .018),
    inset 0 0 45px rgba(18, 58, 120, .18);
  animation: tsa-ring-spin 9s linear infinite;
}

.monogram > span::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold2);
  box-shadow:
    0 0 0 5px rgba(224, 189, 114, .1),
    0 0 18px rgba(224, 189, 114, .85);
}

.monogram > span::after {
  inset: 38px;
  border: 1px dashed rgba(255, 255, 255, .24);
  animation: tsa-ring-reverse 14s linear infinite;
}

.monogram-icon {
  transform-origin: center;
  animation: tsa-heartbeat 2.4s ease-in-out infinite;
}

@keyframes tsa-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes tsa-ring-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes tsa-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@media (max-width: 600px) {
  .service-icon {
    width: 62px !important;
    height: 62px !important;
  }

  .service-icon svg {
    width: 34px;
    height: 34px;
  }

  .monogram::before {
    width: 285px;
    height: 285px;
  }

  .monogram > span {
    width: 250px;
    height: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .monogram > span,
  .monogram > span::after,
  .monogram-icon {
    animation: none;
  }

  .monogram-code span {
    width: 100%;
    animation: none;
  }

  .monogram-code i {
    display: none;
  }

  .service,
  .service::before,
  .service-icon,
  .service-icon svg {
    transition-duration: 0.01ms;
  }
}
.growth-hub { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(7,26,58,.12); }
.growth-hub-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.growth-hub-heading span { color:#a7771c; font:800 .68rem Manrope,sans-serif; letter-spacing:.14em; }
.growth-hub-heading strong { color:#071a3a; font:750 clamp(1.05rem,2vw,1.35rem) Manrope,sans-serif; }
.growth-hub-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.growth-hub-grid a { min-height:148px; position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:16px; padding:20px 18px; overflow:hidden; border:1px solid rgba(7,26,58,.1); border-radius:16px; color:#071a3a; background:rgba(255,255,255,.82); box-shadow:0 14px 34px rgba(7,26,58,.07); transition:transform .28s ease,color .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease; }
.growth-hub-grid a::before { content:''; position:absolute; right:-28px; bottom:-42px; width:110px; height:110px; border:1px solid rgba(190,142,49,.2); border-radius:50%; }
.growth-hub-grid a:hover,.growth-hub-grid a:focus-visible { transform:translateY(-7px); color:#fff; border-color:#0c2856; background:#0c2856; box-shadow:0 22px 48px rgba(7,26,58,.2); }
.growth-hub-grid i { width:46px; height:46px; display:grid; place-items:center; border-radius:12px; color:#0c2856; background:#edf2f8; }
.growth-hub-grid svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.growth-hub-grid a:hover i,.growth-hub-grid a:focus-visible i { color:#071a3a; background:#e2b34d; }
.growth-hub-grid a>span { display:grid; gap:6px; }
.growth-hub-grid b { font:750 .92rem Manrope,sans-serif; }
.growth-hub-grid small { color:#69768a; font-size:.7rem; line-height:1.45; }
.growth-hub-grid a:hover small,.growth-hub-grid a:focus-visible small { color:#c7d2e3; }
.growth-hub-grid em { position:absolute; top:18px; right:16px; color:#b8841f; font:800 .67rem Manrope,sans-serif; font-style:normal; }

.monogram-icon { transform-origin:center; animation:tsa-heartbeat 2.4s ease-in-out infinite; }
.monogram-code { width:max-content!important; min-width:170px; position:absolute!important; left:50%!important; bottom:42px!important; z-index:3; display:grid; gap:3px; margin:0; transform:translateX(-50%); color:#d5deec!important; font:650 .68rem/1.45 "DM Sans",sans-serif!important; letter-spacing:.13em!important; text-align:center; text-transform:uppercase; }
.monogram-code span { width:0; overflow:hidden; justify-self:center; white-space:nowrap; border-right:1px solid transparent; animation:tsa-type-line 7s steps(18,end) infinite; }
.monogram-code span:nth-child(2) { animation-delay:.65s; }
.monogram-code span:nth-child(3) { animation-delay:1.3s; }
.monogram-code i { width:6px; height:13px; justify-self:center; background:#e2b34d; animation:tsa-cursor .75s steps(1) infinite; }

@keyframes tsa-heartbeat { 0%,38%,100% { transform:scale(1); } 8% { transform:scale(1.055); filter:drop-shadow(0 0 24px rgba(226,179,77,.32)); } 14% { transform:scale(1); } 20% { transform:scale(1.035); } 27% { transform:scale(1); } }
@keyframes tsa-type-line { 0%,8% { width:0; } 22%,82% { width:100%; } 92%,100% { width:0; } }
@keyframes tsa-cursor { 50% { opacity:0; } }

@media (max-width:960px) { .growth-hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .growth-hub-grid a:last-child { grid-column:1/-1; } }
@media (max-width:600px) { .growth-hub { margin-top:34px; } .growth-hub-heading { align-items:flex-start; flex-direction:column; gap:6px; } .growth-hub-grid { grid-template-columns:1fr; } .growth-hub-grid a,.growth-hub-grid a:last-child { min-height:126px; grid-column:auto; } .monogram-code { bottom:30px!important; min-width:150px; font-size:.58rem!important; } }
