/* Phase 3 — Our Services */
.sv-hero{background:#002b66;color:white;position:relative;overflow:hidden}.sv-hero-grid{min-height:635px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:30px}.sv-kicker,.sv-light-kicker{font:800 10px Inter,sans-serif;letter-spacing:.2em;color:#b7d0e5;display:flex;gap:13px;align-items:center}.sv-kicker span{width:31px;height:1px;background:#a0ec00}.sv-hero h1{font-size:clamp(52px,6vw,90px);letter-spacing:-.073em;line-height:1.09;margin:34px 0 23px}.sv-hero h1 em,.sv-feature-copy h2 em,.sv-cta h2 em{color:#a0ec00;font-style:normal}.sv-hero p{max-width:550px;line-height:1.85;color:#c8d7e9;font-size:15px}.sv-hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:30px}.sv-hero-contact{border-bottom:1px solid #a9c8e4;padding-bottom:10px;font-size:12px;font-weight:700}.sv-hero-graphic{height:530px;position:relative;display:flex;align-items:center;justify-content:center}.sv-hero-graphic:before,.sv-hero-graphic:after{content:"";position:absolute;border:1px solid #a0ec0052;border-radius:50%;width:400px;height:400px}.sv-hero-graphic:after{width:490px;height:310px;transform:rotate(-35deg)}.sv-aura{position:absolute;width:300px;height:300px;background:#a0ec00;filter:blur(120px);opacity:.15}.sv-hero-graphic img{position:relative;z-index:1;width:78%;max-width:390px;transform:rotate(-10deg);filter:drop-shadow(0 25px 40px #00132b)}.sv-orbit-label{position:absolute;bottom:28px;font-size:10px;letter-spacing:.13em;color:#bdd3e8}.sv-orbit-label span{color:#a0ec00}.sv-hero-foot{border-top:1px solid #ffffff30;padding:25px 0;font-size:10px;letter-spacing:.18em;color:#b3cce1}.sv-hero-foot span{color:#a0ec00;margin:0 15px}.sv-intro{padding:110px 0;background:white}.sv-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:95px}.sv-intro h2,.sv-heading h2,.sv-learning h2{font-size:clamp(40px,4.2vw,64px);line-height:1.13;letter-spacing:-.065em}.sv-intro h2 em{font-style:normal;color:#A0EC00}.sv-intro-grid>div:last-child{padding-top:44px}.sv-intro p{color:#607485;font-size:14px;line-height:1.85}.sv-intro .sv-lead{font:600 20px/1.65 Montserrat,sans-serif;color:#002b66}.sv-services{background:#f4f7f8;padding:110px 0}.sv-heading{display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:45px}.sv-heading h2{margin:0}.sv-heading h2 span{color:#A0EC00}.sv-heading>p{max-width:310px;font-size:14px;line-height:1.7;color:#647787}.sv-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d8e2e8;border:1px solid #d8e2e8}.sv-card{background:white;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;padding:28px;transition:background .25s,transform .25s}.sv-card:hover{background:#a0ec00}.sv-number{font-size:10px;color:#52788a;letter-spacing:.14em;font-weight:800}.sv-mark{margin:22px 0}.sv-mark img{width:55px;height:55px;object-fit:contain}.sv-card h3{font-size:21px;letter-spacing:-.05em;margin-bottom:12px}.sv-card p{font-size:12px;line-height:1.8;color:#647787;min-height:85px}.sv-card:hover p,.sv-card:hover .sv-number{color:#002b66}.sv-link{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #dbe5e8;padding-top:18px;font-size:12px;font-weight:800}.sv-card:hover .sv-link{border-color:#002b6655}.sv-talent{background:#002b66;color:white;padding:115px 0}.sv-feature-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:85px;align-items:center}.sv-light-kicker{color:#a0ec00}.sv-feature-copy h2{font-size:clamp(39px,4.4vw,62px);line-height:1.15;letter-spacing:-.06em;margin:25px 0}.sv-feature-copy>p{max-width:580px;color:#c5d4e6;font-size:14px;line-height:1.9}.sv-talent-rows{margin:26px 0 34px;border-top:1px solid #ffffff36}.sv-talent-rows>div{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:18px 0;border-bottom:1px solid #ffffff36}.sv-talent-rows b{font-size:11px;color:#a0ec00}.sv-talent-rows strong{font-size:14px}.sv-talent-rows p{font-size:12px;line-height:1.75;color:#b6cce0;margin:9px 0 0}.sv-talent-art{height:560px;background:radial-gradient(circle at 50% 40%,#164f87,#001b42 75%);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #ffffff36}.sv-talent-art:before{content:"";position:absolute;width:340px;height:340px;border:1px solid #a0ec0066;border-radius:50%}.sv-talent-art img{width:70%;max-width:350px;filter:drop-shadow(0 20px 30px #00132b);transform:rotate(-11deg)}.sv-talent-art span{position:absolute;bottom:28px;left:28px;font:800 13px/1.45 Montserrat,sans-serif;letter-spacing:.12em;color:#a0ec00}.sv-learning{padding:110px 0;background:#eaf2f3}.sv-learning-grid{display:grid;grid-template-columns:.45fr 1fr;gap:65px}.sv-learning-number{font:800 clamp(80px,12vw,180px)/1 Montserrat,sans-serif;color:#002b66;letter-spacing:-.08em}.sv-learning-number span{color:#a0ec00}.sv-learning h2 span{color:#A0EC00}.sv-learning p{max-width:610px;font-size:14px;line-height:1.85;color:#617688}.sv-dark-link{display:inline-block;font-weight:800;font-size:12px;border-bottom:1px solid #002b66;margin-top:20px;padding-bottom:10px}.sv-process{padding:110px 0}.sv-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.sv-process-grid article{border-top:2px solid #002b66;padding-top:25px}.sv-process-grid article span{font:800 13px Inter;color:#A0EC00}.sv-process-grid h3{margin:55px 0 14px;font-size:21px;letter-spacing:-.04em}.sv-process-grid p{color:#647787;font-size:13px;line-height:1.8}.sv-cta{background:#001b42;color:white;padding:95px 0;position:relative;overflow:hidden}.sv-cta-inner{display:flex;align-items:end;justify-content:space-between;gap:30px;position:relative;z-index:2}.sv-cta-inner>div>span{font-size:10px;letter-spacing:.16em;color:#a0ec00;font-weight:800}.sv-cta h2{font-size:clamp(42px,5vw,72px);line-height:1.14;letter-spacing:-.06em;margin:20px 0}.sv-cta p{font-size:14px;color:#bed2e6}.sv-cta>.sv-cta-inner+.nothing{display:none}.sv-cta>img{position:absolute;width:360px;right:-90px;top:-125px;opacity:.1;transform:rotate(-10deg)}
@media(max-width:850px){.sv-hero-grid,.sv-intro-grid,.sv-feature-grid{grid-template-columns:1fr;gap:20px}.sv-hero-grid{padding-top:65px}.sv-hero-graphic{height:350px}.sv-intro-grid>div:last-child{padding-top:0}.sv-card-grid{grid-template-columns:repeat(2,1fr)}.sv-talent-art{height:360px}.sv-learning-grid{grid-template-columns:1fr;gap:20px}.sv-learning-number{font-size:85px}.sv-cta-inner{align-items:start;flex-direction:column}}
@media(max-width:560px){.sv-hero h1{font-size:53px}.sv-hero-graphic{height:280px}.sv-hero-graphic:before{width:245px;height:245px}.sv-hero-graphic:after{width:300px;height:190px}.sv-orbit-label{font-size:8px}.sv-hero-foot{font-size:8px;line-height:1.8}.sv-intro,.sv-services,.sv-talent,.sv-learning,.sv-process{padding:75px 0}.sv-heading{align-items:start;flex-direction:column}.sv-card-grid,.sv-process-grid{grid-template-columns:1fr}.sv-card{min-height:305px}.sv-card p{min-height:0}.sv-process-grid h3{margin-top:28px}.sv-cta{padding:72px 0}}

/* Service card icons: visible in every state, with brand-color inversion on hover/focus. */
.sv-mark{width:56px;height:56px;display:flex;align-items:center;justify-content:flex-start;color:#A0EC00;transition:color .22s ease,transform .22s ease}
.sv-mark svg{display:block;width:48px;height:48px;overflow:visible;stroke:currentColor;transition:stroke .22s ease,transform .22s ease}
.sv-card:hover .sv-mark,
.sv-card:focus-within .sv-mark,
.sv-card:active .sv-mark{color:#002B66}
.sv-card:hover .sv-mark svg,
.sv-card:focus-within .sv-mark svg{transform:scale(1.06)}
html[data-theme="dark"] .sv-mark{color:#A0EC00}
html[data-theme="dark"] .sv-card:hover .sv-mark,
html[data-theme="dark"] .sv-card:focus-within .sv-mark,
html[data-theme="dark"] .sv-card:active .sv-mark{color:#002B66}
@media (prefers-reduced-motion:reduce){.sv-mark,.sv-mark svg{transition:none}}


/* Refined card spacing and clean background. */
.sv-services{background:#ffffff}
.sv-card-grid{gap:22px;background:transparent;border:none}
.sv-card{border:1px solid #d9e5e7}
@media(max-width:560px){.sv-card-grid{gap:18px}}


/* Services cards: use the official Lime leaf icon on every card.
   Light mode: navy leaf. Dark mode: lime leaf. Hover/active cards keep contrast. */
.sv-mark{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  color:transparent;
  background:url('assets/leaf-navy.png') left center / 42px 42px no-repeat;
}
.sv-mark svg{display:none !important}

/* Light mode stays navy on normal and highlighted lime cards. */
.sv-card:hover .sv-mark,
.sv-card:focus-within .sv-mark,
.sv-card:active .sv-mark{
  background-image:url('assets/leaf-navy.png');
}

/* Dark mode uses lime leaves on navy cards. */
html[data-theme="dark"] .sv-mark{
  background-image:url('assets/leaf-lime.png');
}

/* On highlighted cards in dark mode, switch back to navy for contrast. */
html[data-theme="dark"] .sv-card:hover .sv-mark,
html[data-theme="dark"] .sv-card:focus-within .sv-mark,
html[data-theme="dark"] .sv-card:active .sv-mark{
  background-image:url('assets/leaf-navy.png');
}


/* Services hero emblem animation — matches the animated home hero feel */
.sv-hero-graphic{isolation:isolate}
.sv-hero-graphic:before,
.sv-hero-graphic:after{
  top:50%;
  left:50%;
  transform-origin:center;
  will-change:transform;
}
.sv-hero-graphic:before{
  animation: svOrbitRotate 26s linear infinite;
}
.sv-hero-graphic:after{
  animation: svOrbitRotateReverse 34s linear infinite;
}
.sv-aura{
  animation: svGlowPulse 5.8s ease-in-out infinite;
}
.sv-hero-graphic img{
  transform-origin:50% 55%;
  animation: svLeafFloat 7.2s ease-in-out infinite;
  will-change:transform,filter;
}
@keyframes svOrbitRotate {
  from { transform: translate(-50%, -50%) rotate(-33deg); }
  to   { transform: translate(-50%, -50%) rotate(327deg); }
}
@keyframes svOrbitRotateReverse {
  from { transform: translate(-50%, -50%) rotate(27deg); }
  to   { transform: translate(-50%, -50%) rotate(-333deg); }
}
@keyframes svLeafFloat {
  0%, 100% {
    transform: rotate(-10deg) translate3d(0,0,0) scale(1);
    filter: drop-shadow(0 25px 40px #00132b) drop-shadow(0 0 10px rgba(160,236,0,.08));
  }
  50% {
    transform: rotate(-6deg) translate3d(0,-22px,0) scale(1.035);
    filter: drop-shadow(0 30px 48px rgba(0,19,43,.82)) drop-shadow(0 0 22px rgba(160,236,0,.22));
  }
}
@keyframes svGlowPulse {
  0%, 100% { opacity: .15; transform: scale(.94); }
  50% { opacity: .25; transform: scale(1.08); }
}
@media (max-width:760px){
  .sv-hero-graphic:before{animation-duration:30s}
  .sv-hero-graphic:after{animation-duration:38s}
}
@media (prefers-reduced-motion: reduce){
  .sv-hero-graphic:before,
  .sv-hero-graphic:after,
  .sv-aura,
  .sv-hero-graphic img{animation:none !important}
}

/* The Learning & Development service card is a full-card link to Courses. */
.sv-card-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sv-card-link:focus-visible {
  outline: 3px solid #a0ec00;
  outline-offset: 4px;
}
.sv-card-link:hover .sv-link span,
.sv-card-link:focus-visible .sv-link span {
  transform: translate(3px, -3px);
}
.sv-card-link .sv-link span {
  transition: transform .25s ease;
}


/* Services page — matching slow, natural floating motion for the talent-section leaf. */
.sv-talent-art img{
  transform-origin:50% 55%;
  animation:svTalentLeafFlow 10s ease-in-out infinite;
  will-change:transform;
}
@keyframes svTalentLeafFlow{
  0%,100%{transform:translate3d(-8px,5px,0) rotate(-13deg)}
  25%{transform:translate3d(2px,-8px,0) rotate(-9deg)}
  50%{transform:translate3d(10px,-16px,0) rotate(-5deg)}
  75%{transform:translate3d(1px,-7px,0) rotate(-10deg)}
}
@media(prefers-reduced-motion:reduce){
  .sv-talent-art img{animation:none;transform:rotate(-11deg);will-change:auto}
}


/* Recruitment card: the entire tile navigates to its on-page service details. */
.sv-card-link#recruitment {
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.sv-card-link#recruitment h3 { color:inherit; }
.sv-card-link#recruitment .sv-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sv-card-link#recruitment:focus-visible {
  outline:3px solid #A0EC00;
  outline-offset:5px;
}
#talent-solutions-details { scroll-margin-top:100px; }
html { scroll-behavior:smooth; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}


/* Services page — "The Way We Work" process cards */
.sv-process-grid article {
  position: relative;
  padding: 25px 12px 24px 0;
  border-top: 2px solid #002b66;
  border-radius: 2px;
  box-shadow: 0 18px 30px -25px rgba(160, 236, 0, .62);
  transition:
    box-shadow .55s ease,
    transform .55s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease;
}
.sv-process-grid article:hover {
  transform: translateY(-5px);
  border-top-color: #a0ec00;
  box-shadow:
    0 20px 34px -21px rgba(160, 236, 0, .72),
    0 8px 22px -18px rgba(160, 236, 0, .42);
}
.sv-process-grid article.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 1.15s cubic-bezier(.16,.72,.22,1),
    transform 1.15s cubic-bezier(.16,.72,.22,1),
    box-shadow .55s ease,
    border-color .35s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.sv-process-grid article.scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.sv-process-grid article.scroll-reveal.is-visible:hover {
  transform: translate3d(0, -5px, 0);
}
html[data-theme="dark"] .sv-process-grid article {
  border-top-color: #a0ec00;
  box-shadow: 0 18px 32px -24px rgba(160, 236, 0, .55);
}
html[data-theme="dark"] .sv-process-grid article:hover {
  box-shadow:
    0 20px 36px -20px rgba(160, 236, 0, .72),
    0 8px 24px -18px rgba(160, 236, 0, .38);
}
@media (max-width: 850px) {
  .sv-process-grid { row-gap: 38px; }
  .sv-process-grid article { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-process-grid article,
  .sv-process-grid article.scroll-reveal,
  .sv-process-grid article.scroll-reveal.is-visible,
  .sv-process-grid article:hover,
  .sv-process-grid article.scroll-reveal.is-visible:hover {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}


/* Text-fit safeguard: keep all process-card copy fully visible in light and dark themes. */
.sv-process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.sv-process-grid article {
  box-sizing: border-box;
  min-width: 0;
  height: auto !important;
  min-height: 285px;
  max-height: none !important;
  overflow: visible !important;
  padding: 25px 22px 28px 0;
}
.sv-process-grid article > span,
.sv-process-grid article h3,
.sv-process-grid article p {
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.sv-process-grid article h3 {
  margin: 55px 0 14px;
  line-height: 1.32;
  font-size: clamp(18px, 1.45vw, 21px);
}
.sv-process-grid article p {
  margin: 0;
  line-height: 1.85;
  font-size: 14px;
}
@media (max-width: 900px) {
  .sv-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .sv-process-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
  .sv-process-grid article {
    min-height: 0;
    padding-right: 4px;
  }
  .sv-process-grid article h3 {
    margin-top: 34px;
    font-size: 20px;
  }
}


/* CTA brand leaf — slow, breeze-carried movement with no fixed orbit. */
.sv-cta > img {
  transform-origin: 50% 50%;
  animation: svCtaLeafBreeze 19s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes svCtaLeafBreeze {
  0% {
    transform: translate3d(0, 0, 0) rotate(-10deg) scale(1);
  }
  28% {
    transform: translate3d(-28px, 18px, 0) rotate(-5deg) scale(1.015);
  }
  63% {
    transform: translate3d(-72px, -12px, 0) rotate(-15deg) scale(.99);
  }
  100% {
    transform: translate3d(-42px, 22px, 0) rotate(-7deg) scale(1.01);
  }
}
@media (max-width: 850px) {
  .sv-cta > img {
    animation-duration: 22s;
  }
  @keyframes svCtaLeafBreeze {
    0% { transform: translate3d(0, 0, 0) rotate(-10deg) scale(1); }
    35% { transform: translate3d(-12px, 14px, 0) rotate(-5deg) scale(1.01); }
    70% { transform: translate3d(-32px, -8px, 0) rotate(-14deg) scale(.99); }
    100% { transform: translate3d(-18px, 12px, 0) rotate(-7deg) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-cta > img {
    animation: none !important;
    transform: rotate(-10deg);
    will-change: auto;
  }
}