/* --------------------------------------------------------------------------
   Services overview hero — premium maritime service ecosystem
   -------------------------------------------------------------------------- */

.ksg-services-hero {
  padding-top: 18px;
}

.ksg-services-hero-shell {
  position: relative;
  min-height: 530px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 48%, rgba(33, 105, 230, .14), transparent 31%),
    radial-gradient(circle at 16% 100%, rgba(36, 95, 190, .22), transparent 34%),
    linear-gradient(115deg, #061a48 0%, #06183f 42%, #03112f 74%, #020d25 100%);
  border: 1px solid rgba(38, 84, 151, .32);
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(3, 17, 45, .20);
}

.ksg-services-hero-shell::before {
  content: "";
  position: absolute;
  left: -4%;
  bottom: -18%;
  z-index: -1;
  width: 54%;
  height: 54%;
  background-image:
    linear-gradient(180deg, rgba(4, 20, 57, .18), rgba(3, 16, 45, .76)),
    var(--ksg-services-hero-image);
  background-position: center bottom;
  background-size: cover;
  opacity: .30;
  filter: saturate(.66) contrast(1.06);
  -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,.72) 56%, transparent 100%);
  mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,.72) 56%, transparent 100%);
  pointer-events: none;
}

.ksg-services-hero-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03), transparent 18%, transparent 82%, rgba(106,157,255,.025)),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 22%);
  pointer-events: none;
}

.ksg-services-hero-layout {
  display: grid;
  min-height: 530px;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  align-items: stretch;
}

.ksg-services-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  padding: 54px 28px 52px 52px;
  justify-content: center;
  flex-direction: column;
  color: #fff;
}

.ksg-services-hero-eyebrow {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  padding: 0 16px;
  align-items: center;
  color: #83b6ff;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(130, 181, 255, .28);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.ksg-services-hero h1 {
  max-width: 620px;
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(40px, 2.95vw, 56px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.037em;
  text-wrap: balance;
}

.ksg-services-hero-lead {
  max-width: 535px;
  margin: 18px 0 0;
  color: rgba(225, 234, 249, .76);
  font-size: 15px;
  line-height: 1.72;
}

.ksg-services-hero-actions {
  display: flex;
  margin-top: 24px;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.ksg-services-primary-cta,
.ksg-services-secondary-cta {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease, border-color .24s ease, color .24s ease;
}

.ksg-services-primary-cta {
  padding: 0 18px 0 10px;
  gap: 10px;
  color: #fff !important;
  background: linear-gradient(135deg, #2878f0 0%, #1252c5 100%);
  border: 1px solid rgba(143, 190, 255, .48);
  box-shadow: 0 14px 30px rgba(7, 62, 158, .30), inset 0 1px 0 rgba(255,255,255,.18);
}

.ksg-services-primary-cta:hover,
.ksg-services-primary-cta:focus-visible {
  color: #fff !important;
  background: linear-gradient(135deg, #3385ff 0%, #155bd4 100%);
  border-color: rgba(177, 212, 255, .65);
  box-shadow: 0 18px 36px rgba(5, 57, 151, .38), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-2px);
}

.ksg-services-cta-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
}

.ksg-services-cta-mark img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.ksg-services-primary-cta .ksg-arrow,
.ksg-services-secondary-cta .ksg-arrow {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.ksg-services-primary-cta .ksg-arrow svg,
.ksg-services-secondary-cta .ksg-arrow svg {
  width: 18px;
  height: 18px;
}

.ksg-services-secondary-cta {
  position: relative;
  padding: 0 13px;
  gap: 12px;
  color: rgba(255,255,255,.94) !important;
  background: transparent;
  border: 0;
}

.ksg-services-secondary-cta::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 36px;
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, #3a8cff, rgba(58,140,255,.12));
  border-radius: 99px;
  transform-origin: left center;
  transition: transform .24s ease;
}

.ksg-services-secondary-cta:hover,
.ksg-services-secondary-cta:focus-visible {
  color: #b9d6ff !important;
}

.ksg-services-secondary-cta:hover::after,
.ksg-services-secondary-cta:focus-visible::after {
  transform: scaleX(.72);
}

.ksg-services-hero-stage {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 18px 24px 18px 8px;
}

.ksg-services-stage-counter {
  position: absolute;
  top: 24px;
  right: 30px;
  z-index: 12;
  display: none;
  min-width: 126px;
  min-height: 60px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  background: rgba(8, 25, 62, .62);
  border: 1px solid rgba(153, 190, 250, .20);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 15px 34px rgba(0,0,0,.15);
  backdrop-filter: blur(12px);
}

.ksg-services-stage-counter-dot {
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background: #3e8dff;
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(62, 141, 255, .78);
}

.ksg-services-stage-counter strong {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.ksg-services-stage-counter span:last-child {
  color: rgba(205, 218, 239, .48);
  font-size: 12px;
  font-weight: 700;
}

.ksg-services-visual {
  position: relative;
  width: 100%;
  height: 432px;
  overflow: hidden;
  background: radial-gradient(circle at 53% 53%, rgba(25, 90, 207, .09), transparent 34%);
  border-radius: 24px;
}

.ksg-services-gridline {
  position: absolute;
  inset: 3% 0 0;
  opacity: .12;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(circle at 52% 52%, #000, transparent 73%);
  mask-image: radial-gradient(circle at 52% 52%, #000, transparent 73%);
  pointer-events: none;
}

.ksg-services-radial {
  position: absolute;
  left: 54%;
  top: 54%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ksg-services-radial.radial-a {
  width: 316px;
  height: 316px;
  background: radial-gradient(circle, rgba(45, 115, 246, .15), rgba(45,115,246,0) 68%);
}

.ksg-services-radial.radial-b {
  width: 470px;
  height: 470px;
  border: 1px dashed rgba(93, 149, 240, .09);
}

.ksg-services-route {
  position: absolute;
  left: 54%;
  top: 54%;
  border: 1px solid rgba(84, 147, 252, .22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ksg-services-route::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  background: #67aaff;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(103,170,255,.84);
}

.ksg-services-route.route-a {
  width: 240px;
  height: 240px;
  animation: ksgServicesOrbitA 28s linear infinite;
}

.ksg-services-route.route-b {
  width: 372px;
  height: 214px;
  opacity: .72;
  transform: translate(-50%, -50%) rotate(-15deg);
  animation: ksgServicesOrbitB 36s linear infinite;
}

.ksg-services-route.route-c {
  width: 302px;
  height: 184px;
  opacity: .50;
  transform: translate(-50%, -50%) rotate(26deg);
  animation: ksgServicesOrbitC 32s linear infinite;
}

.ksg-services-spokes {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ksg-services-spokes path {
  fill: none;
  stroke: rgba(76, 145, 255, .24);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

.ksg-services-core {
  position: absolute;
  left: 54%;
  top: 54%;
  z-index: 5;
  display: flex;
  width: 182px;
  height: 182px;
  padding: 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background:
    radial-gradient(circle at 38% 28%, rgba(117, 175, 255, .92) 0%, rgba(44, 122, 244, .98) 31%, #1954b8 68%, #11386f 100%);
  border: 1px solid rgba(177, 213, 255, .72);
  border-radius: 50%;
  box-shadow:
    0 0 0 10px rgba(35, 108, 232, .09),
    0 0 0 22px rgba(35, 108, 232, .035),
    0 0 46px rgba(55, 132, 255, .35),
    0 26px 56px rgba(0, 0, 0, .29),
    inset 0 1px 18px rgba(255,255,255,.17);
  transform: translate(-50%, -50%);
  animation: ksgServicesPulse 5.8s ease-in-out infinite;
}

.ksg-services-core::before {
  content: "";
  position: absolute;
  inset: -32px;
  border: 1px solid rgba(74, 146, 255, .22);
  border-radius: 50%;
}

.ksg-services-core-ring {
  position: absolute;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}

.ksg-services-core-ring.ring-1 {
  inset: 16px;
}

.ksg-services-core-ring.ring-2 {
  inset: 32px;
  opacity: .48;
}

.ksg-services-core-mark {
  position: relative;
  z-index: 1;
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  place-items: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.ksg-services-core-mark img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ksg-services-core strong {
  position: relative;
  z-index: 1;
  max-width: 120px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.ksg-services-node {
  --node-scale: 1;
  position: absolute;
  z-index: 7;
  display: flex;
  width: 150px;
  min-height: 90px;
  padding: 13px 12px 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  color: rgba(255,255,255,.92) !important;
  text-align: center;
  text-decoration: none !important;
  background: linear-gradient(180deg, rgba(19, 43, 86, .78), rgba(10, 29, 67, .74));
  border: 1px solid rgba(136, 176, 235, .20);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 13px 28px rgba(0,0,0,.14);
  backdrop-filter: blur(11px);
  opacity: .86;
  transform: scale(var(--node-scale));
  transition: transform .28s ease, background .28s ease, border-color .28s ease, opacity .28s ease, box-shadow .28s ease;
}

.ksg-services-node:hover,
.ksg-services-node:focus-visible,
.ksg-services-node.is-active {
  --node-scale: 1.035;
  opacity: 1;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(32, 105, 232, .95), rgba(18, 74, 174, .90));
  border-color: rgba(153, 202, 255, .55);
  box-shadow: 0 18px 34px rgba(0,0,0,.18), 0 0 26px rgba(31, 111, 241, .14), inset 0 1px 0 rgba(255,255,255,.10);
}

.ksg-services-node-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #55a0ff;
  transition: color .28s ease, transform .28s ease;
}

.ksg-services-node-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ksg-services-node:hover .ksg-services-node-icon,
.ksg-services-node:focus-visible .ksg-services-node-icon,
.ksg-services-node.is-active .ksg-services-node-icon {
  color: #8fc3ff;
  transform: translateY(-1px);
}

.ksg-services-node-label {
  display: block;
  max-width: 124px;
  color: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.28;
}

.ksg-services-node.is-top {
  left: 54%;
  top: 11%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-top-right {
  left: 83%;
  top: 18%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-right {
  left: 85%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-bottom-right {
  left: 83%;
  top: 81%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-bottom {
  left: 54%;
  top: 82%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-bottom-left {
  left: 16%;
  top: 81%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-top-left {
  left: 16%;
  top: 18%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-detail-hero .box-pageheader-1 {
  display: flex;
  min-height: 390px;
  padding: 64px 30px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.ksg-detail-hero h1 {
  max-width: 1050px;
  font-size: 52px;
  line-height: 1.14;
}

.ksg-detail-hero p {
  width: min(100%, 900px);
  margin-inline: auto;
  line-height: 1.75;
}

.ksg-services-grid {
  padding-top: 44px;
}

@media (max-width: 1399.98px) {
  .ksg-services-hero-layout {
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  }

  .ksg-services-hero-copy {
    padding-left: 46px;
  }

  .ksg-services-hero h1 {
    font-size: 40px;
  }

  .ksg-services-hero-stage {
    padding-right: 22px;
  }

  .ksg-services-node {
    width: 142px;
  }

  .ksg-services-node.is-top-right {
    left: 83%;
    top: 18%;
    right: auto;
  }

  .ksg-services-node.is-right {
    left: 85%;
    top: 50%;
    right: auto;
  }
}

@media (max-width: 1199.98px) {
  .ksg-services-hero-shell,
  .ksg-services-hero-layout {
    min-height: 500px;
  }

  .ksg-services-hero-copy {
    padding: 46px 22px 46px 36px;
  }

  .ksg-services-hero h1 {
    font-size: 40px;
  }

  .ksg-services-hero-lead {
    font-size: 14px;
  }

  .ksg-services-hero-stage {
    padding: 14px 12px 14px 4px;
  }

  .ksg-services-visual {
    height: 408px;
    overflow: visible;
  }

  .ksg-services-stage-counter {
    display: none;
  }

  .ksg-services-core {
    width: 168px;
    height: 168px;
  }

  .ksg-services-node {
    width: 124px;
    min-height: 78px;
    padding: 10px;
  }

  .ksg-services-node-label {
    max-width: 112px;
    font-size: 10.5px;
  }

  .ksg-services-node-icon,
  .ksg-services-node-icon svg {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 991.98px) {
  .ksg-services-hero-shell,
  .ksg-services-hero-layout {
    min-height: 0;
  }

  .ksg-services-hero-layout {
    grid-template-columns: 1fr;
  }

  .ksg-services-hero-copy {
    padding: 40px 38px 20px;
  }

  .ksg-services-hero h1 {
    max-width: 720px;
    font-size: 40px;
  }

  .ksg-services-hero-lead {
    max-width: 620px;
  }

  .ksg-services-hero-stage {
    padding: 0 28px 24px;
  }

  .ksg-services-visual {
    height: 470px;
  }

  .ksg-services-stage-counter {
    top: 10px;
    right: 34px;
  }

  .ksg-services-node {
    width: 146px;
    min-height: 90px;
  }

  .ksg-services-node-label {
    max-width: 126px;
    font-size: 11.5px;
  }

  .ksg-services-node.is-top-right {
    left: 83%;
    top: 19%;
    right: auto;
  }

  .ksg-services-node.is-right {
    left: 85%;
    top: 50%;
    right: auto;
  }

  .ksg-detail-hero h1 {
    font-size: 40px;
  }

  .ksg-services-intro img,
  .ksg-detail-intro img,
  .ksg-regional img {
    height: 350px;
  }

  .ksg-detail-request .box-get-quote {
    display: block;
  }

  .ksg-detail-request .get-quote-right {
    width: 100%;
    min-width: 0;
    margin-top: 25px;
  }
}

@media (max-width: 767.98px) {
  .ksg-services-hero {
    padding-top: 12px;
  }

  .ksg-services-hero-shell {
    border-radius: 22px;
  }

  .ksg-services-hero-shell::before {
    width: 100%;
    height: 34%;
    opacity: .24;
  }

  .ksg-services-hero-copy {
    padding: 38px 22px 24px;
  }

  .ksg-services-hero-eyebrow {
    min-height: 34px;
    padding-inline: 13px;
    font-size: 10px;
  }

  .ksg-services-hero h1,
  .ksg-detail-hero h1 {
    font-size: 32px;
  }

  .ksg-services-hero-lead {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.62;
  }

  .ksg-services-hero-actions {
    margin-top: 24px;
  }

  .ksg-services-primary-cta,
  .ksg-services-secondary-cta {
    min-height: 52px;
  }

  .ksg-services-hero-stage {
    padding: 0 14px 18px;
  }

  .ksg-services-stage-counter {
    display: none;
  }



  .ksg-services-visual {
    display: grid;
    height: auto;
    min-height: 0;
    padding: 24px 2px 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    background: none;
  }

  .ksg-services-gridline,
  .ksg-services-radial,
  .ksg-services-route,
  .ksg-services-spokes {
    display: none;
  }

  .ksg-services-core {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    width: 164px;
    height: 164px;
    margin: 4px auto 16px;
    transform: none;
    animation: ksgServicesPulseMobile 5.8s ease-in-out infinite;
  }

  .ksg-services-core::before {
    inset: -24px;
  }

  .ksg-services-core strong {
    font-size: 18px;
  }

  .ksg-services-node,
  .ksg-services-node.is-top,
  .ksg-services-node.is-top-right,
  .ksg-services-node.is-right,
  .ksg-services-node.is-bottom-right,
  .ksg-services-node.is-bottom,
  .ksg-services-node.is-bottom-left,
  .ksg-services-node.is-top-left {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 82px;
    transform: none;
  }

  .ksg-services-node:hover,
  .ksg-services-node:focus-visible,
  .ksg-services-node.is-active {
    transform: translateY(-2px);
  }

  .ksg-services-node.is-bottom {
    grid-column: 1 / -1;
    width: calc(50% - 5px);
    min-height: 78px;
    justify-self: center;
  }

  .ksg-services-node-label {
    max-width: 145px;
    font-size: 10.5px;
  }

  .ksg-detail-hero .box-pageheader-1 {
    min-height: 340px;
    padding: 48px 22px;
  }

  .ksg-services-grid .cardImage {
    height: 260px;
  }

  .ksg-services-grid .cardService {
    min-height: 475px;
  }

  .ksg-request-form,
  .ksg-list-panel {
    padding: 28px 22px;
  }

  .ksg-detail-request .get-quote-right {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .ksg-services-hero-copy {
    padding-inline: 18px;
  }

  .ksg-services-hero h1,
  .ksg-detail-hero h1 {
    font-size: 27px;
  }

  .ksg-services-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ksg-services-primary-cta,
  .ksg-services-secondary-cta {
    width: 100%;
  }

  .ksg-services-secondary-cta::after {
    left: 25%;
    right: 25%;
  }

  .ksg-services-stage-counter {
    display: none;
  }

  .ksg-services-visual {
    padding-top: 0;
  }

  .ksg-services-core {
    width: 150px;
    height: 150px;
  }

  .ksg-services-core-mark {
    width: 48px;
    height: 48px;
  }

  .ksg-services-core-mark img {
    width: 29px;
    height: 29px;
  }

  .ksg-services-node {
    min-height: 82px;
    padding: 10px 8px;
  }

  .ksg-detail-hero .box-pageheader-1 {
    min-height: 310px;
  }

  .ksg-services-intro img,
  .ksg-detail-intro img,
  .ksg-regional img {
    height: 280px;
  }

  .ksg-services-grid .cardImage {
    height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksg-services-route,
  .ksg-services-core {
    animation: none !important;
  }

  .ksg-services-primary-cta,
  .ksg-services-node {
    transition: none !important;
  }
}

@keyframes ksgServicesOrbitA {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ksgServicesOrbitB {
  from { transform: translate(-50%, -50%) rotate(-15deg); }
  to { transform: translate(-50%, -50%) rotate(345deg); }
}

@keyframes ksgServicesOrbitC {
  from { transform: translate(-50%, -50%) rotate(26deg); }
  to { transform: translate(-50%, -50%) rotate(386deg); }
}

@keyframes ksgServicesPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.025);
    filter: brightness(1.06);
  }
}

@keyframes ksgServicesPulseMobile {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

/* Service detail keeps the supplied service-detail.html composition. */
.ksg-detail-summary {
  width: min(100%, 940px);
  margin-inline: auto;
  line-height: 1.75;
}

.ksg-theme-detail-gallery img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.ksg-theme-detail-content .content-detail > h2 {
  margin-top: 48px;
  margin-bottom: 24px;
}

.ksg-theme-detail-content .content-detail > strong + h2 {
  margin-top: 34px;
}

.ksg-theme-subservice {
  height: 100%;
  padding: 20px 0 18px;
  border-bottom: 1px solid #E4E9F2;
}

.ksg-theme-subservice h3,
.ksg-theme-process-item h3 {
  font-size: 21px;
  line-height: 1.35;
}

.ksg-theme-subservice p,
.ksg-theme-process-item p {
  margin-bottom: 0;
  line-height: 1.75;
}

.ksg-theme-wide-image {
  margin-top: 42px;
}

.ksg-theme-wide-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.ksg-theme-support-row .list-ticks {
  margin-top: 18px;
}

.ksg-theme-support-row .list-ticks li {
  margin-bottom: 10px;
}

.ksg-theme-process-item {
  padding: 12px 0 22px;
}

.ksg-theme-detail-content .content-detail .row.align-items-center img {
  width: 100%;
  height: 390px;
  object-fit: cover;
}

#other-services .card-offer {
  height: 100%;
}

#other-services .card-image img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

#other-services .card-info {
  display: flex;
  min-height: 275px;
  flex-direction: column;
}

#other-services .box-button-offer {
  margin-top: auto;
}

@media (max-width: 991.98px) {
  .ksg-theme-detail-gallery .col-lg-6 + .col-lg-6 {
    margin-top: 24px;
  }

  .ksg-theme-detail-content .content-detail .row.align-items-center img {
    margin-top: 24px;
  }
}

@media (max-width: 767.98px) {
  .ksg-theme-detail-gallery img,
  .ksg-theme-wide-image img,
  .ksg-theme-detail-content .content-detail .row.align-items-center img {
    height: 280px;
  }

  .ksg-theme-detail-content .content-detail > h2 {
    margin-top: 38px;
  }
}

/* --------------------------------------------------------------------------
   Service detail v2 — composed from the preserved Transp theme sections
   requested for Kahveci Sea Group. No standalone UI system is introduced.
   -------------------------------------------------------------------------- */

.ksg-theme-detail-content {
  padding-bottom: 0;
}

.ksg-theme-detail-content .content-detail > strong {
  margin-bottom: 0;
  line-height: 1.8;
}

/* 1 — Service Scope: service-detail.html / Other Services slider treatment */
.ksg-service-scope {
  overflow: hidden;
}

.ksg-service-scope > .container > h2 {
  margin-bottom: 8px;
}

.ksg-scope-slider {
  margin-top: 12px;
}

.ksg-scope-slider .box-swiper {
  position: relative;
}

.ksg-scope-slider .swiper-container {
  padding-top: 28px;
  padding-bottom: 28px;
}

.ksg-theme-subservice {
  height: 100%;
  padding: 0;
  border: 0;
}

.ksg-theme-subservice .card-offer {
  display: flex;
  min-height: 305px;
  height: 100%;
  margin-bottom: 0;
  flex-direction: column;
  padding: 30px 24px 26px;
  background: #FAFBFC;
}

.ksg-theme-subservice .card-image {
  display: flex;
  height: 68px;
  margin-bottom: 20px;
  align-items: center;
}

.ksg-scope-icon {
  display: inline-grid;
  width: 64px;
  height: 64px;
  place-items: center;
  color: var(--ksg-primary);
  background: var(--ksg-secondary-soft);
  border: 1px solid var(--ksg-secondary-border);
  border-radius: 50%;
}

.ksg-scope-icon svg {
  width: 30px;
  height: 30px;
}

.ksg-theme-subservice .card-info {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.ksg-theme-subservice .card-info h3 {
  min-height: 54px;
  font-size: 19px;
  line-height: 1.4;
}

.ksg-theme-subservice .card-info p {
  margin: 0;
  line-height: 1.7;
}

.ksg-scope-slider .swiper-button-prev-style-2,
.ksg-scope-slider .swiper-button-next-style-2 {
  top: 48%;
}

/* 2 — Who We Support / Typical Requirements: trackyourparcel text composition */
.ksg-support-requirements-theme {
  background: #ffffff;
}

.ksg-support-requirements-theme .row {
  --bs-gutter-x: 72px;
}

.ksg-tracking-copy {
  height: 100%;
  padding: 18px 0 8px;
}

.ksg-tracking-copy h2 {
  font-size: 32px;
  line-height: 1.2;
}

.ksg-support-intro {
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.75;
}

.ksg-support-ticks {
  margin-top: 0;
}

.ksg-support-ticks li {
  margin-bottom: 13px;
  color: #40506B;
  line-height: 1.55;
}

.ksg-support-ticks li svg {
  color: var(--ksg-primary);
}

/* 3 — How We Support + Regional coordination: about.html / Get in touch */
.ksg-service-support-process {
  min-height: 690px;
  overflow: hidden;
}

.ksg-service-support-process .container {
  position: relative;
  z-index: 2;
}

.ksg-support-process-copy {
  padding-right: 44px;
}

.ksg-service-support-process #service-process-title,
.ksg-regional-theme-block h2 {
  font-size: 34px;
  line-height: 1.2;
}

.ksg-process-theme-grid {
  margin-bottom: 6px;
}

.ksg-process-theme-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ksg-process-theme-number {
  display: inline-grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #ffffff;
  background: var(--ksg-primary);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
}

.ksg-process-theme-item h3 {
  margin: 1px 0 7px;
  font-size: 16px;
  line-height: 1.4;
}

.ksg-process-theme-item p {
  margin: 0;
  line-height: 1.65;
}

.ksg-regional-theme-block {
  margin-top: 14px;
  padding-top: 28px;
  border-top: 1px solid rgba(1, 17, 59, 0.14);
}

.ksg-regional-theme-block p {
  max-width: 650px;
  line-height: 1.75;
}

.ksg-regional-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ksg-regional-actions .ksg-arrow {
  color: var(--ksg-primary);
}

.ksg-service-support-process .box-image-touch::before {
  background-image: none;
  background-color: #DDE5F2;
  clip-path: polygon(0 0, 100% 0, 54% 100%, 0 100%);
  width: 160px;
}

/* 4 — Related services: request-a-quote.html / What We Have Done */
.ksg-related-theme {
  background: #ffffff;
}

.ksg-related-theme .title-favicon {
  color: var(--ksg-primary);
}

.ksg-related-grid-card {
  min-height: 465px;
  height: 100%;
  padding-bottom: 190px;
  overflow: hidden;
}

.ksg-related-grid-card .cardImage {
  height: 285px;
  overflow: hidden;
}

.ksg-related-grid-card .cardImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksg-related-grid-card .cardInfo {
  display: flex;
  min-height: 190px;
  width: 92%;
  flex-direction: column;
  padding: 24px;
}

.ksg-related-grid-card .cardInfo h3 {
  font-size: 20px;
  line-height: 1.35;
}

.ksg-related-scope-titles {
  display: -webkit-box;
  min-height: 56px;
  margin-bottom: 0;
  overflow: hidden;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ksg-related-grid-card .box-button {
  margin-top: auto !important;
}

.ksg-related-grid-card .ksg-arrow {
  color: var(--ksg-primary);
}

/* Remove obsolete single-image and old flat section treatments from the new flow. */
.ksg-theme-wide-image,
.ksg-theme-support-row,
.ksg-theme-process-list {
  display: none !important;
}

@media (max-width: 1199.98px) {
  .ksg-service-support-process {
    min-height: 0;
  }

  .ksg-service-support-process .col-lg-6 {
    width: 100%;
  }

  .ksg-support-process-copy {
    padding-right: 12px;
  }

  .ksg-service-support-process .box-image-touch {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .ksg-support-requirements-theme .row {
    --bs-gutter-x: 24px;
  }

  .ksg-tracking-copy {
    padding: 8px 0 18px;
  }

  .ksg-service-support-process #service-process-title,
  .ksg-regional-theme-block h2,
  .ksg-tracking-copy h2 {
    font-size: 29px;
  }

  .ksg-related-grid-card .cardImage {
    height: 250px;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-scope {
    padding-top: 38px !important;
    padding-bottom: 50px !important;
  }

  .ksg-theme-subservice .card-offer {
    min-height: 285px;
  }

  .ksg-service-support-process {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
  }

  .ksg-process-theme-item {
    gap: 12px;
  }

  .ksg-related-theme {
    padding-top: 65px !important;
  }
}

@media (max-width: 575.98px) {
  .ksg-tracking-copy h2,
  .ksg-service-support-process #service-process-title,
  .ksg-regional-theme-block h2 {
    font-size: 26px;
  }

  .ksg-regional-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .ksg-related-grid-card {
    min-height: 430px;
  }
}


/* --------------------------------------------------------------------------
   Service detail refinement v9.1 — align service scope and related services
   more closely with the provided theme references.
   -------------------------------------------------------------------------- */

.ksg-service-scope .ksg-scope-heading {
  margin-bottom: 12px;
}

.ksg-service-scope .ksg-scope-heading h2 {
  font-size: 64px;
  line-height: 1.06;
}

.ksg-scope-slider .box-swiper,
.ksg-related-carousel .box-swiper {
  position: relative;
}

.ksg-scope-slider .swiper-container,
.ksg-related-carousel .swiper-container {
  overflow: hidden;
}

.ksg-scope-slider .swiper-wrapper,
.ksg-related-carousel .swiper-wrapper {
  align-items: stretch;
}

.ksg-scope-slider .swiper-slide,
.ksg-related-carousel .swiper-slide {
  height: auto;
}

.ksg-scope-card {
  display: flex;
  min-height: 322px;
  height: 100%;
  margin-bottom: 0;
  padding: 34px 24px 30px;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.ksg-scope-card .card-image {
  display: flex;
  height: 82px;
  margin-bottom: 18px;
  align-items: center;
  justify-content: center;
}

.ksg-scope-icon-badge {
  position: relative;
  display: inline-grid;
  width: 72px;
  height: 72px;
  place-items: center;
  color: var(--ksg-primary);
}

.ksg-scope-icon-badge::before {
  content: "";
  position: absolute;
  inset: 8px 6px 6px 8px;
  background: #E7EEF8;
  border-radius: 55% 45% 52% 48% / 43% 55% 45% 57%;
  z-index: 0;
}

.ksg-scope-icon-badge svg {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}

.ksg-scope-card .card-info {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  flex-direction: column;
}

.ksg-scope-card .card-info h5 {
  min-height: 54px;
  font-size: 20px;
  line-height: 1.35;
}

.ksg-scope-card .card-info p {
  max-width: 290px;
  margin: 0 auto;
  line-height: 1.75;
}

.ksg-scope-slider .swiper-button-prev-style-2,
.ksg-scope-slider .swiper-button-next-style-2 {
  top: 44%;
}

.ksg-related-theme {
  padding-top: 110px !important;
}

.ksg-related-carousel .cardGrid,
.ksg-related-card {
  min-height: 100%;
  height: 100%;
}

.ksg-related-carousel .cardImage {
  height: 320px;
  overflow: hidden;
}

.ksg-related-carousel .cardImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksg-related-carousel .cardInfo {
  display: flex;
  min-height: 210px;
  width: 92%;
  flex-direction: column;
}

.ksg-related-carousel .cardInfo h5 {
  font-size: 20px;
  line-height: 1.35;
}

.ksg-related-carousel .cardInfo .box-button {
  margin-top: auto !important;
}

.ksg-related-scope-titles {
  display: -webkit-box;
  min-height: 68px;
  overflow: hidden;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 1199.98px) {
  .ksg-service-scope .ksg-scope-heading h2 {
    font-size: 56px;
  }

  .ksg-related-carousel .cardImage {
    height: 280px;
  }
}

@media (max-width: 991.98px) {
  .ksg-service-scope .ksg-scope-heading h2 {
    font-size: 40px;
  }

  .ksg-related-theme {
    padding-top: 90px !important;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-scope .ksg-scope-heading h2 {
    font-size: 38px;
  }

  .ksg-scope-card {
    min-height: 292px;
  }

  .ksg-related-carousel .cardImage {
    height: 250px;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-scope .ksg-scope-heading h2 {
    font-size: 32px;
  }

  .ksg-scope-card {
    padding: 28px 18px 26px;
  }
}

.ksg-scope-slider .ksg-theme-subservice .card-offer {display:flex;min-height:322px;height:100%;margin-bottom:0;padding:34px 24px 30px;align-items:center;flex-direction:column;text-align:center;}
.ksg-scope-slider .ksg-theme-subservice .card-image {display:flex;height:82px;margin-bottom:18px;align-items:center;justify-content:center;}
.ksg-scope-slider .ksg-theme-subservice .card-info {display:flex;flex:1;width:100%;align-items:center;flex-direction:column;}
.ksg-scope-slider .ksg-theme-subservice .card-info h3 {min-height:54px;font-size:20px;line-height:1.35;}
.ksg-scope-slider .ksg-theme-subservice .card-info p {max-width:290px;margin:0 auto;line-height:1.75;}
.ksg-related-carousel .ksg-related-grid-card {min-height:100%;height:100%;}

.ksg-scope-swiper .swiper-wrapper,
.ksg-related-swiper .swiper-wrapper {
  display: flex;
}

.ksg-scope-swiper .swiper-slide,
.ksg-related-swiper .swiper-slide {
  flex-shrink: 0;
}


.ksg-detail-summary {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.7;
}

/* Fallback 4-card layout when Swiper has not initialized yet */
.ksg-scope-swiper .swiper-wrapper,
.ksg-related-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.ksg-scope-swiper .swiper-slide,
.ksg-related-swiper .swiper-slide {
  flex: 0 0 calc(25% - 22.5px);
  width: calc(25% - 22.5px);
}

@media (max-width: 1399.98px) {
  .ksg-scope-swiper .swiper-slide,
  .ksg-related-swiper .swiper-slide {
    flex-basis: calc(33.3333% - 20px);
    width: calc(33.3333% - 20px);
  }
}

@media (max-width: 991.98px) {
  .ksg-scope-swiper .swiper-slide,
  .ksg-related-swiper .swiper-slide {
    flex-basis: calc(50% - 15px);
    width: calc(50% - 15px);
  }
}

@media (max-width: 767.98px) {
  .ksg-scope-swiper .swiper-slide,
  .ksg-related-swiper .swiper-slide {
    flex-basis: 100%;
    width: 100%;
  }
}

.ksg-theme-detail-intro .content-detail {
  max-width: 1040px;
  margin: 0 auto;
}

.ksg-theme-detail-intro .content-detail strong {
  line-height: 1.75;
  text-align: left;
}


/* Service detail review refinements v12.1 */

/* 1 — Keep the About-theme diagonal transition, but remove the unintended third colour. */
.ksg-service-support-process .box-image-touch::before {
  background-image: none;
  background-color: #EEF2F8;
}

/* 2 — Place Other Services navigation at the left/right edges of the cards. */
.ksg-related-carousel .box-swiper {
  position: relative;
  overflow: visible;
}

.ksg-related-carousel .box-pagination-customers {
  position: absolute;
  inset: 0;
  z-index: 20;
  margin-top: 0;
  pointer-events: none;
}

.ksg-related-carousel .ksg-related-prev,
.ksg-related-carousel .ksg-related-next {
  top: 50%;
  bottom: auto;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  pointer-events: auto;
  background-color: #ffffff;
  border: 1px solid #E1E6EF;
  box-shadow: 0 8px 24px rgba(1, 17, 59, 0.10);
}

.ksg-related-carousel .ksg-related-prev {
  left: -26px;
  right: auto;
}

.ksg-related-carousel .ksg-related-next {
  right: -26px;
  left: auto;
}

.ksg-related-carousel .ksg-related-prev:hover,
.ksg-related-carousel .ksg-related-next:hover {
  background-color: var(--ksg-primary);
  border-color: var(--ksg-primary);
}

.ksg-related-carousel .ksg-related-prev:hover svg,
.ksg-related-carousel .ksg-related-next:hover svg {
  color: #ffffff;
}

/* 3 — Bring the two introductory paragraphs closer together before the gallery. */
.ksg-service-detail-hero .box-pageheader-services {
  padding-bottom: 22px;
}

.ksg-service-detail-hero .ksg-detail-summary {
  margin-bottom: 0;
}

.ksg-theme-detail-intro {
  margin-top: 0 !important;
}

.ksg-theme-detail-intro .content-detail {
  padding-top: 4px;
  padding-bottom: 16px;
}

@media (max-width: 991.98px) {
  .ksg-related-carousel .ksg-related-prev {
    left: 8px;
  }

  .ksg-related-carousel .ksg-related-next {
    right: 8px;
  }
}

/* --------------------------------------------------------------------------
   Service detail refinement v13.1 — improve related-services navigation
   visibility and replace old yellow gallery accent with KSG brand colours.
   -------------------------------------------------------------------------- */

/* 1 — Other Services arrows: keep them fully visible and clearly branded. */
.ksg-related-carousel .box-swiper {
  position: relative;
  overflow: visible;
}

.ksg-related-carousel .box-pagination-customers {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: block;
  margin: 0;
  pointer-events: none;
}

.ksg-related-carousel .ksg-related-prev,
.ksg-related-carousel .ksg-related-next {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  pointer-events: auto;
  color: var(--ksg-primary);
  background: #ffffff;
  border: 1px solid var(--ksg-secondary-border);
  border-radius: 50%;
  box-shadow: 0 14px 32px rgba(1, 17, 59, 0.14);
}

.ksg-related-carousel .ksg-related-prev::after,
.ksg-related-carousel .ksg-related-next::after {
  display: none;
}

.ksg-related-carousel .ksg-related-prev svg,
.ksg-related-carousel .ksg-related-next svg {
  width: 22px;
  height: 22px;
  color: currentColor;
}

.ksg-related-carousel .ksg-related-prev {
  left: 16px;
}

.ksg-related-carousel .ksg-related-next {
  right: 16px;
}

.ksg-related-carousel .ksg-related-prev:hover,
.ksg-related-carousel .ksg-related-next:hover {
  color: #ffffff;
  background: var(--ksg-primary);
  border-color: var(--ksg-primary);
}

@media (max-width: 991.98px) {
  .ksg-related-carousel .ksg-related-prev {
    left: 10px;
  }

  .ksg-related-carousel .ksg-related-next {
    right: 10px;
  }
}

@media (max-width: 575.98px) {
  .ksg-related-carousel .ksg-related-prev,
  .ksg-related-carousel .ksg-related-next {
    width: 48px;
    height: 48px;
    margin-top: -24px;
  }
}

/* 2 — Gallery accent: replace legacy yellow quote shape with KSG brand motif. */
.ksg-theme-detail-gallery .quote-center {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 104px;
  height: 86px;
  background: none;
  transform: translateX(-50%);
}

.ksg-theme-detail-gallery .quote-center::before,
.ksg-theme-detail-gallery .quote-center::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 28px;
  border-radius: 4px;
  transform: skewX(-15deg);
}

.ksg-theme-detail-gallery .quote-center::before {
  left: 24px;
  height: 78px;
  background: var(--ksg-primary);
}

.ksg-theme-detail-gallery .quote-center::after {
  left: 60px;
  height: 62px;
  background: var(--ksg-secondary);
}

@media (max-width: 767.98px) {
  .ksg-theme-detail-gallery .quote-center {
    width: 88px;
    height: 72px;
    bottom: -24px;
  }

  .ksg-theme-detail-gallery .quote-center::before {
    left: 20px;
    height: 64px;
  }

  .ksg-theme-detail-gallery .quote-center::after {
    left: 50px;
    height: 50px;
  }
}


/* --------------------------------------------------------------------------
   Service detail refinement v14.1 — related-services navigation behaviour
   and support/requirements heading alignment tweaks.
   -------------------------------------------------------------------------- */

.ksg-support-requirements-theme {
  padding-top: 60px !important;
}

.ksg-support-requirements-theme .row {
  align-items: flex-start;
}

.ksg-tracking-copy {
  padding: 0 0 8px;
}

.ksg-tracking-copy h2 {
  margin-top: 0;
}

.ksg-support-intro {
  margin-bottom: 26px;
}

.ksg-related-carousel .ksg-related-prev,
.ksg-related-carousel .ksg-related-next {
  cursor: pointer;
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  .ksg-services-route,
  .ksg-services-core,
  .ksg-services-node {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Services overview hero — 2026-08-24 approved visual match
   This final layer intentionally overrides the legacy hero rules above while
   leaving the rest of the services page untouched.
   -------------------------------------------------------------------------- */

.ksg-services-hero {
  padding-top: 18px;
}

.ksg-services-hero .container {
  position: relative;
}

.ksg-services-hero-shell {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 71% 48%, rgba(34, 111, 246, .13), transparent 28%),
    radial-gradient(circle at 13% 104%, rgba(26, 94, 211, .22), transparent 31%),
    linear-gradient(116deg, #061a46 0%, #05173d 42%, #03132f 72%, #020d24 100%);
  border: 1px solid rgba(40, 84, 151, .34);
  border-radius: 28px;
  box-shadow: 0 26px 72px rgba(3, 17, 45, .20);
}

.ksg-services-hero-shell::before {
  content: "";
  position: absolute;
  left: -3%;
  bottom: -14%;
  z-index: -1;
  width: 51%;
  height: 42%;
  background-image:
    linear-gradient(180deg, rgba(3, 16, 44, .05), rgba(3, 16, 44, .72)),
    var(--ksg-services-hero-image);
  background-position: center 70%;
  background-size: cover;
  opacity: .13;
  filter: saturate(.55) contrast(1.04) hue-rotate(2deg);
  -webkit-mask-image: linear-gradient(to top, #000 7%, rgba(0,0,0,.66) 54%, transparent 100%);
  mask-image: linear-gradient(to top, #000 7%, rgba(0,0,0,.66) 54%, transparent 100%);
  pointer-events: none;
}

.ksg-services-hero-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 17%, transparent 81%, rgba(71,133,235,.02)),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 24%);
  pointer-events: none;
}

.ksg-services-hero-layout {
  display: grid;
  min-height: 610px;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: stretch;
}

.ksg-services-hero-copy {
  position: relative;
  z-index: 5;
  display: flex;
  padding: 54px 28px 48px 72px;
  justify-content: center;
  flex-direction: column;
  color: #fff;
}

.ksg-services-hero-eyebrow {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  padding: 0 19px;
  align-items: center;
  color: #8ab9ff;
  background: rgba(8, 31, 72, .48);
  border: 1px solid rgba(83, 144, 241, .44);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.ksg-services-hero h1 {
  max-width: 590px;
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(46px, 3.02vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.038em;
  text-wrap: initial;
}

.ksg-services-hero-lead {
  max-width: 545px;
  margin: 21px 0 0;
  color: rgba(223, 232, 246, .75);
  font-size: 15px;
  line-height: 1.72;
}

.ksg-services-hero-actions {
  display: flex;
  margin-top: 25px;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.ksg-services-primary-cta,
.ksg-services-secondary-cta {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}

.ksg-services-primary-cta {
  padding: 0 19px 0 10px;
  gap: 11px;
  color: #fff !important;
  background: linear-gradient(135deg, #267cf8 0%, #105ee1 58%, #0b4fc7 100%);
  border: 1px solid rgba(142, 194, 255, .66);
  box-shadow: 0 13px 30px rgba(6, 66, 174, .31), inset 0 1px 0 rgba(255,255,255,.20);
}

.ksg-services-primary-cta:hover,
.ksg-services-primary-cta:focus-visible {
  color: #fff !important;
  background: linear-gradient(135deg, #3188ff 0%, #1466ed 58%, #1058d2 100%);
  border-color: rgba(183, 216, 255, .78);
  box-shadow: 0 17px 36px rgba(5, 60, 158, .38), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-2px);
}

.ksg-services-cta-mark {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  place-items: center;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 10px;
}

.ksg-services-cta-mark img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.ksg-services-primary-cta .ksg-arrow,
.ksg-services-secondary-cta .ksg-arrow {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.ksg-services-primary-cta .ksg-arrow svg,
.ksg-services-secondary-cta .ksg-arrow svg {
  width: 18px;
  height: 18px;
}

.ksg-services-secondary-cta {
  position: relative;
  padding: 0 13px;
  gap: 12px;
  color: rgba(255,255,255,.94) !important;
  background: transparent;
  border: 0;
}

.ksg-services-secondary-cta::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 36px;
  bottom: 5px;
  height: 2px;
  background: linear-gradient(90deg, #3d91ff, rgba(61,145,255,.10));
  border-radius: 99px;
  transform-origin: left center;
  transition: transform .22s ease;
}

.ksg-services-secondary-cta:hover,
.ksg-services-secondary-cta:focus-visible {
  color: #b9d8ff !important;
}

.ksg-services-secondary-cta:hover::after,
.ksg-services-secondary-cta:focus-visible::after {
  transform: scaleX(.75);
}

.ksg-services-trust-row {
  display: grid;
  width: min(100%, 548px);
  margin-top: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ksg-services-trust-item {
  display: flex;
  min-width: 0;
  min-height: 62px;
  padding: 11px 12px;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(10, 31, 69, .72), rgba(7, 25, 60, .64));
  border: 1px solid rgba(99, 145, 214, .17);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.ksg-services-trust-icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  color: #4f9aff;
}

.ksg-services-trust-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ksg-services-trust-item > span:last-child {
  display: block;
  min-width: 0;
}

.ksg-services-trust-item strong,
.ksg-services-trust-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksg-services-trust-item strong {
  color: rgba(255,255,255,.95);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}

.ksg-services-trust-item small {
  margin-top: 3px;
  color: rgba(199, 215, 239, .58);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.2;
}

.ksg-services-hero-stage {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: 17px 26px 17px 2px;
}

.ksg-services-stage-counter {
  display: none !important;
}

.ksg-services-visual {
  position: relative;
  width: 100%;
  height: 576px;
  overflow: hidden;
  background: radial-gradient(circle at 54% 51%, rgba(29, 101, 225, .085), transparent 35%);
  border-radius: 24px;
}

.ksg-services-gridline {
  position: absolute;
  inset: 1% 1% 0 0;
  opacity: .11;
  background:
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(circle at 54% 51%, #000 0%, rgba(0,0,0,.74) 42%, transparent 76%);
  mask-image: radial-gradient(circle at 54% 51%, #000 0%, rgba(0,0,0,.74) 42%, transparent 76%);
  pointer-events: none;
}

.ksg-services-dotfield {
  position: absolute;
  left: 1%;
  top: 42%;
  width: 38%;
  height: 30%;
  opacity: .20;
  background-image: radial-gradient(circle, rgba(82, 146, 246, .45) 1px, transparent 1.2px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.7) 47%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.7) 47%, transparent 78%);
  pointer-events: none;
}

.ksg-services-radial {
  position: absolute;
  left: 54%;
  top: 50.8%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ksg-services-radial.radial-a {
  width: 318px;
  height: 318px;
  background: radial-gradient(circle, rgba(42, 120, 255, .14), rgba(42,120,255,0) 68%);
}

.ksg-services-radial.radial-b {
  width: 516px;
  height: 516px;
  background: transparent;
  border: 1px dashed rgba(93, 149, 240, .075);
}

.ksg-services-route {
  position: absolute;
  left: 54%;
  top: 50.8%;
  border: 1px solid rgba(76, 142, 248, .18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ksg-services-route::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  background: #69adff;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(105,173,255,.72);
}

.ksg-services-route.route-a {
  width: 246px;
  height: 246px;
  animation: ksgServicesOrbitA 34s linear infinite;
}

.ksg-services-route.route-b {
  width: 378px;
  height: 236px;
  opacity: .65;
  transform: translate(-50%, -50%) rotate(-13deg);
  animation: ksgServicesOrbitB 42s linear infinite;
}

.ksg-services-route.route-c {
  width: 320px;
  height: 194px;
  opacity: .44;
  transform: translate(-50%, -50%) rotate(24deg);
  animation: ksgServicesOrbitC 38s linear infinite;
}

.ksg-services-spokes {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ksg-services-spoke-line {
  fill: none;
  stroke: rgba(71, 143, 255, .54);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.ksg-services-spoke-dot {
  fill: #75b5ff;
  stroke: rgba(191, 222, 255, .78);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(75, 153, 255, .92));
}

.ksg-services-core {
  position: absolute;
  left: 54%;
  top: 50.8%;
  z-index: 6;
  display: flex;
  width: 190px;
  height: 190px;
  padding: 21px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background:
    radial-gradient(circle at 38% 26%, rgba(126, 181, 255, .96) 0%, rgba(52, 132, 255, .99) 30%, #1d62cb 62%, #103c82 100%);
  border: 2px solid rgba(207, 230, 255, .92);
  border-radius: 50%;
  box-shadow:
    0 0 0 10px rgba(34, 108, 233, .09),
    0 0 0 24px rgba(34, 108, 233, .035),
    0 0 42px rgba(55, 132, 255, .30),
    0 25px 52px rgba(0, 0, 0, .28),
    inset 0 1px 18px rgba(255,255,255,.17);
  transform: translate(-50%, -50%);
  animation: none;
}

.ksg-services-core::before {
  content: "";
  position: absolute;
  inset: -34px;
  border: 1px solid rgba(74, 146, 255, .20);
  border-radius: 50%;
}

.ksg-services-core-ring {
  position: absolute;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}

.ksg-services-core-ring.ring-1 {
  inset: 16px;
}

.ksg-services-core-ring.ring-2 {
  inset: 32px;
  opacity: .48;
}

.ksg-services-core-mark {
  position: relative;
  z-index: 1;
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 9px;
  place-items: center;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.ksg-services-core-mark img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ksg-services-core strong {
  position: relative;
  z-index: 1;
  max-width: 124px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.ksg-services-node {
  --node-scale: 1;
  position: absolute;
  z-index: 8;
  display: flex;
  width: 154px;
  min-height: 102px;
  padding: 13px 12px 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  color: rgba(255,255,255,.93) !important;
  text-align: center;
  text-decoration: none !important;
  background: linear-gradient(180deg, rgba(17, 43, 86, .83), rgba(9, 29, 66, .78));
  border: 1px solid rgba(126, 169, 232, .28);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 13px 28px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  opacity: .94;
  transition: transform .24s ease, background .24s ease, border-color .24s ease, opacity .24s ease, box-shadow .24s ease;
}

.ksg-services-node:hover,
.ksg-services-node:focus-visible,
.ksg-services-node.is-active {
  color: #fff !important;
  background: linear-gradient(150deg, rgba(40, 118, 246, .97), rgba(18, 78, 184, .93));
  border-color: rgba(144, 202, 255, .72);
  box-shadow: 0 17px 33px rgba(0,0,0,.18), 0 0 25px rgba(31, 111, 241, .18), inset 0 1px 0 rgba(255,255,255,.12);
}

.ksg-services-node:hover,
.ksg-services-node:focus-visible {
  --node-scale: 1.025;
}

.ksg-services-node-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #5da5ff;
  transition: color .24s ease, transform .24s ease;
}

.ksg-services-node-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ksg-services-node:hover .ksg-services-node-icon,
.ksg-services-node:focus-visible .ksg-services-node-icon,
.ksg-services-node.is-active .ksg-services-node-icon {
  color: #8fc4ff;
}

.ksg-services-node-label {
  display: block;
  max-width: 132px;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.28;
}

.ksg-services-node.is-top {
  left: 54%;
  top: 13.5%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-top-right {
  left: 84%;
  top: 24.5%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-right {
  left: 86%;
  top: 57.5%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-bottom-right {
  left: 70%;
  top: 87%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-bottom {
  left: 45.5%;
  top: 87%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-bottom-left {
  left: 19.5%;
  top: 65%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-node.is-top-left {
  left: 19.5%;
  top: 24.5%;
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

@media (max-width: 1399.98px) {
  .ksg-services-hero-shell,
  .ksg-services-hero-layout {
    min-height: 590px;
  }

  .ksg-services-hero-copy {
    padding-left: 52px;
  }

  .ksg-services-hero h1 {
    font-size: 46px;
  }

  .ksg-services-visual {
    height: 554px;
  }

  .ksg-services-node {
    width: 142px;
    min-height: 96px;
  }

  .ksg-services-node-label {
    max-width: 122px;
    font-size: 11px;
  }
}

@media (max-width: 1199.98px) {
  .ksg-services-hero-shell,
  .ksg-services-hero-layout {
    min-height: 560px;
  }

  .ksg-services-hero-layout {
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  }

  .ksg-services-hero-copy {
    padding: 42px 20px 42px 34px;
  }

  .ksg-services-hero h1 {
    font-size: 39px;
  }

  .ksg-services-hero-lead {
    font-size: 13.5px;
  }

  .ksg-services-trust-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .ksg-services-trust-item {
    padding-inline: 8px;
  }

  .ksg-services-trust-icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .ksg-services-trust-icon svg {
    width: 24px;
    height: 24px;
  }

  .ksg-services-hero-stage {
    padding: 14px 12px 14px 0;
  }

  .ksg-services-visual {
    height: 532px;
    overflow: hidden;
  }

  .ksg-services-core {
    width: 168px;
    height: 168px;
  }

  .ksg-services-core strong {
    font-size: 18px;
  }

  .ksg-services-node {
    width: 124px;
    min-height: 84px;
    padding: 10px;
  }

  .ksg-services-node-label {
    max-width: 108px;
    font-size: 10px;
  }

  .ksg-services-node-icon,
  .ksg-services-node-icon svg {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 991.98px) {
  .ksg-services-hero-shell,
  .ksg-services-hero-layout {
    min-height: 0;
  }

  .ksg-services-hero-layout {
    grid-template-columns: 1fr;
  }

  .ksg-services-hero-copy {
    padding: 42px 40px 24px;
  }

  .ksg-services-hero h1 {
    max-width: 660px;
    font-size: 43px;
  }

  .ksg-services-hero-lead {
    max-width: 620px;
  }

  .ksg-services-trust-row {
    max-width: 560px;
  }

  .ksg-services-hero-stage {
    padding: 2px 22px 22px;
  }

  .ksg-services-visual {
    height: 540px;
  }

  .ksg-services-core {
    width: 176px;
    height: 176px;
  }

  .ksg-services-node {
    width: 140px;
    min-height: 92px;
  }
}

@media (max-width: 767.98px) {
  .ksg-services-hero {
    padding-top: 12px;
  }

  .ksg-services-hero-shell {
    border-radius: 22px;
  }

  .ksg-services-hero-shell::before {
    width: 100%;
    height: 28%;
    opacity: .10;
  }

  .ksg-services-hero-copy {
    padding: 36px 22px 24px;
  }

  .ksg-services-hero-eyebrow {
    min-height: 34px;
    padding-inline: 14px;
    font-size: 10px;
  }

  .ksg-services-hero h1 {
    font-size: 34px;
    line-height: 1.1;
  }

  .ksg-services-hero-lead {
    margin-top: 17px;
    font-size: 14px;
    line-height: 1.62;
  }

  .ksg-services-hero-actions {
    margin-top: 22px;
  }

  .ksg-services-primary-cta,
  .ksg-services-secondary-cta {
    min-height: 52px;
  }

  .ksg-services-trust-row {
    margin-top: 20px;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ksg-services-trust-item {
    min-height: 54px;
  }

  .ksg-services-trust-item strong,
  .ksg-services-trust-item small {
    white-space: normal;
  }

  .ksg-services-hero-stage {
    padding: 0 14px 18px;
  }

  .ksg-services-visual {
    display: grid;
    height: auto;
    min-height: 0;
    padding: 22px 2px 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    background: none;
  }

  .ksg-services-gridline,
  .ksg-services-dotfield,
  .ksg-services-radial,
  .ksg-services-route,
  .ksg-services-spokes {
    display: none;
  }

  .ksg-services-core {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    width: 164px;
    height: 164px;
    margin: 5px auto 18px;
    transform: none;
  }

  .ksg-services-core::before {
    inset: -24px;
  }

  .ksg-services-core strong {
    font-size: 18px;
  }

  .ksg-services-node,
  .ksg-services-node.is-top,
  .ksg-services-node.is-top-right,
  .ksg-services-node.is-right,
  .ksg-services-node.is-bottom-right,
  .ksg-services-node.is-bottom,
  .ksg-services-node.is-bottom-left,
  .ksg-services-node.is-top-left {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 84px;
    transform: none;
  }

  .ksg-services-node:hover,
  .ksg-services-node:focus-visible,
  .ksg-services-node.is-active {
    transform: translateY(-2px);
  }

  .ksg-services-node.is-bottom {
    grid-column: 1 / -1;
    width: calc(50% - 5px);
    justify-self: center;
  }

  .ksg-services-node-label {
    max-width: 145px;
    font-size: 10.5px;
  }
}

@media (max-width: 575.98px) {
  .ksg-services-hero-copy {
    padding-inline: 18px;
  }

  .ksg-services-hero h1 {
    font-size: 29px;
  }

  .ksg-services-hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .ksg-services-primary-cta,
  .ksg-services-secondary-cta {
    width: 100%;
  }

  .ksg-services-secondary-cta::after {
    left: 25%;
    right: 25%;
  }

  .ksg-services-core {
    width: 150px;
    height: 150px;
  }

  .ksg-services-core-mark {
    width: 46px;
    height: 46px;
  }

  .ksg-services-core-mark img {
    width: 28px;
    height: 28px;
  }

  .ksg-services-node {
    min-height: 82px;
    padding: 10px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksg-services-route {
    animation: none !important;
  }
}

/* Final visual calibration against the approved desktop mockup. */
@media (min-width: 992px) {
  .ksg-services-hero-stage {
    display: flex;
    align-items: center;
  }

  .ksg-services-visual {
    flex: 0 0 576px;
  }

  .ksg-services-primary-cta {
    min-width: 274px;
    white-space: nowrap;
  }

  .ksg-services-secondary-cta {
    min-width: 150px;
    white-space: nowrap;
  }
}

.ksg-services-node-icon svg *,
.ksg-services-trust-icon svg * {
  fill: none !important;
  stroke: currentColor !important;
}

.ksg-services-primary-cta .ksg-arrow svg *,
.ksg-services-secondary-cta .ksg-arrow svg * {
  fill: none !important;
  stroke: currentColor !important;
}

@media (min-width: 1200px) {
  .ksg-services-node {
    width: 160px;
    min-height: 108px;
  }

  .ksg-services-core {
    width: 198px;
    height: 198px;
  }
}

.ksg-services-node-icon,
.ksg-services-node-icon svg,
.ksg-services-node-icon svg * {
  color: #5da5ff !important;
}

.ksg-services-node:hover .ksg-services-node-icon,
.ksg-services-node:focus-visible .ksg-services-node-icon,
.ksg-services-node.is-active .ksg-services-node-icon,
.ksg-services-node:hover .ksg-services-node-icon svg,
.ksg-services-node:focus-visible .ksg-services-node-icon svg,
.ksg-services-node.is-active .ksg-services-node-icon svg,
.ksg-services-node:hover .ksg-services-node-icon svg *,
.ksg-services-node:focus-visible .ksg-services-node-icon svg *,
.ksg-services-node.is-active .ksg-services-node-icon svg * {
  color: #8fc4ff !important;
}

.ksg-services-trust-icon,
.ksg-services-trust-icon svg,
.ksg-services-trust-icon svg * {
  color: #4f9aff !important;
}

.ksg-services-primary-cta .ksg-arrow,
.ksg-services-primary-cta .ksg-arrow svg,
.ksg-services-primary-cta .ksg-arrow svg *,
.ksg-services-secondary-cta .ksg-arrow,
.ksg-services-secondary-cta .ksg-arrow svg,
.ksg-services-secondary-cta .ksg-arrow svg * {
  color: currentColor !important;
}

.ksg-services-primary-cta > span:nth-child(2),
.ksg-services-secondary-cta > span:first-child {
  white-space: nowrap;
}


/* --- 2026-08-24 hero spacing refinement: loosen layout + remove trust chips --- */
.ksg-services-trust-row {
  display: none !important;
}

.ksg-services-hero-shell {
  min-height: 640px;
}

.ksg-services-hero-layout {
  min-height: 640px;
  grid-template-columns: minmax(0, 41%) minmax(0, 59%);
}

.ksg-services-hero-copy {
  padding: 62px 24px 56px 80px;
}

.ksg-services-hero h1 {
  max-width: 540px;
  margin-top: 24px;
  font-size: clamp(41px, 2.78vw, 52px);
  line-height: 1.10;
}

.ksg-services-hero-lead {
  max-width: 520px;
  margin-top: 24px;
}

.ksg-services-hero-actions {
  margin-top: 30px;
}

.ksg-services-hero-stage {
  padding: 16px 32px 16px 0;
}

.ksg-services-visual {
  height: 604px;
}

.ksg-services-gridline {
  inset: 0;
}

.ksg-services-dotfield {
  left: 3%;
  top: 44%;
  width: 34%;
  height: 27%;
}

.ksg-services-radial,
.ksg-services-route,
.ksg-services-core {
  left: 56%;
  top: 50.5%;
}

.ksg-services-radial.radial-a {
  width: 336px;
  height: 336px;
}

.ksg-services-radial.radial-b {
  width: 546px;
  height: 546px;
}

.ksg-services-route.route-a {
  width: 258px;
  height: 258px;
}

.ksg-services-route.route-b {
  width: 396px;
  height: 248px;
}

.ksg-services-route.route-c {
  width: 338px;
  height: 208px;
}

.ksg-services-core {
  width: 202px;
  height: 202px;
  padding: 24px;
}

.ksg-services-core::before {
  inset: -38px;
}

.ksg-services-core strong {
  max-width: 132px;
  font-size: 21px;
}

.ksg-services-node {
  width: 164px;
  min-height: 110px;
  padding: 15px 13px 14px;
  gap: 10px;
}

.ksg-services-node-icon {
  width: 34px;
  height: 34px;
}

.ksg-services-node-icon svg {
  width: 30px;
  height: 30px;
}

.ksg-services-node-label {
  max-width: 138px;
  font-size: 12.5px;
}

.ksg-services-node.is-top {
  left: 56%;
  top: 13%;
}

.ksg-services-node.is-top-right {
  left: 85.2%;
  top: 25.4%;
}

.ksg-services-node.is-right {
  left: 86.5%;
  top: 58.5%;
}

.ksg-services-node.is-bottom-right {
  left: 70.8%;
  top: 89%;
}

.ksg-services-node.is-bottom {
  left: 47.2%;
  top: 89%;
}

.ksg-services-node.is-bottom-left {
  left: 20.8%;
  top: 66%;
}

.ksg-services-node.is-top-left {
  left: 20.8%;
  top: 25.4%;
}

@media (max-width: 1399.98px) {
  .ksg-services-hero-shell,
  .ksg-services-hero-layout {
    min-height: 618px;
  }

  .ksg-services-hero-layout {
    grid-template-columns: minmax(0, 42.5%) minmax(0, 57.5%);
  }

  .ksg-services-hero-copy {
    padding: 56px 22px 50px 64px;
  }

  .ksg-services-hero h1 {
    font-size: 44px;
    max-width: 500px;
  }

  .ksg-services-hero-stage {
    padding-right: 24px;
  }

  .ksg-services-visual {
    height: 578px;
  }

  .ksg-services-node {
    width: 150px;
    min-height: 102px;
  }

  .ksg-services-node-label {
    max-width: 126px;
    font-size: 11.5px;
  }
}

@media (max-width: 1199.98px) {
  .ksg-services-hero-shell,
  .ksg-services-hero-layout {
    min-height: 598px;
  }

  .ksg-services-hero-layout {
    grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  }

  .ksg-services-hero-copy {
    padding-left: 52px;
  }

  .ksg-services-hero h1 {
    font-size: 40px;
  }

  .ksg-services-hero-lead {
    font-size: 14px;
  }

  .ksg-services-visual {
    height: 548px;
  }

  .ksg-services-core {
    width: 186px;
    height: 186px;
  }

  .ksg-services-node {
    width: 140px;
    min-height: 96px;
  }

  .ksg-services-node-label {
    max-width: 118px;
    font-size: 11px;
  }
}

/* connector alignment safeguard after spacing refinement */
.ksg-services-radial,
.ksg-services-route,
.ksg-services-core {
  left: 54%;
  top: 50.8%;
}

.ksg-services-node.is-top {
  left: 54%;
  top: 13.5%;
}

.ksg-services-node.is-top-right {
  left: 84%;
  top: 24.5%;
}

.ksg-services-node.is-right {
  left: 86%;
  top: 57.5%;
}

.ksg-services-node.is-bottom-right {
  left: 70%;
  top: 87%;
}

.ksg-services-node.is-bottom {
  left: 45.5%;
  top: 87%;
}

.ksg-services-node.is-bottom-left {
  left: 19.5%;
  top: 65%;
}

.ksg-services-node.is-top-left {
  left: 19.5%;
  top: 24.5%;
}

/* --- 2026-08-24 final pixel-match override: align closer to approved reference --- */
.ksg-services-trust-row {
  display: none !important;
}

.ksg-services-hero-shell {
  min-height: 610px;
}

.ksg-services-hero-layout {
  min-height: 610px;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
}

.ksg-services-hero-copy {
  padding: 54px 28px 48px 72px;
}

.ksg-services-hero h1 {
  max-width: 590px;
  margin: 22px 0 0;
  font-size: clamp(46px, 3.02vw, 56px);
  line-height: 1.08;
}

.ksg-services-hero-lead {
  max-width: 545px;
  margin: 21px 0 0;
  font-size: 15px;
  line-height: 1.72;
}

.ksg-services-hero-actions {
  margin-top: 25px;
}

.ksg-services-hero-stage {
  padding: 17px 26px 17px 2px;
}

.ksg-services-visual {
  height: 576px;
}

.ksg-services-dotfield {
  left: 1%;
  top: 42%;
  width: 38%;
  height: 30%;
}

.ksg-services-radial,
.ksg-services-route,
.ksg-services-core {
  left: 54%;
  top: 50.8%;
}

.ksg-services-radial.radial-a {
  width: 318px;
  height: 318px;
}

.ksg-services-radial.radial-b {
  width: 516px;
  height: 516px;
}

.ksg-services-route.route-a {
  width: 246px;
  height: 246px;
}

.ksg-services-route.route-b {
  width: 378px;
  height: 236px;
}

.ksg-services-route.route-c {
  width: 320px;
  height: 194px;
}

.ksg-services-core {
  width: 190px;
  height: 190px;
  padding: 21px;
}

.ksg-services-core::before {
  inset: -34px;
}

.ksg-services-core strong {
  max-width: 124px;
  font-size: 20px;
  line-height: 1.08;
}

.ksg-services-node {
  width: 154px;
  min-height: 102px;
  padding: 13px 12px 12px;
  gap: 9px;
}

.ksg-services-node-label {
  max-width: 132px;
  font-size: 12px;
  line-height: 1.28;
}

.ksg-services-node.is-top {
  left: 54%;
  top: 13.5%;
}

.ksg-services-node.is-top-right {
  left: 84%;
  top: 24.5%;
}

.ksg-services-node.is-right {
  left: 86%;
  top: 57.5%;
}

.ksg-services-node.is-bottom-right {
  left: 70%;
  top: 87%;
}

.ksg-services-node.is-bottom {
  left: 45.5%;
  top: 87%;
}

.ksg-services-node.is-bottom-left {
  left: 19.5%;
  top: 65%;
}

.ksg-services-node.is-top-left {
  left: 19.5%;
  top: 24.5%;
}

@media (max-width: 1399.98px) {
  .ksg-services-hero-shell,
  .ksg-services-hero-layout {
    min-height: 590px;
  }

  .ksg-services-hero-copy {
    padding-left: 52px;
  }

  .ksg-services-hero h1 {
    font-size: 46px;
  }

  .ksg-services-visual {
    height: 554px;
  }

  .ksg-services-node {
    width: 142px;
    min-height: 96px;
  }

  .ksg-services-node-label {
    max-width: 122px;
    font-size: 11px;
  }
}


/* --------------------------------------------------------------------------
   Services overview hero final interaction refinements
   -------------------------------------------------------------------------- */

.ksg-services-stage-counter {
  position: absolute;
  top: 26px;
  right: 28px;
  z-index: 15;
  display: inline-flex !important;
  min-width: 122px;
  min-height: 60px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: rgba(8, 25, 62, .58);
  border: 1px solid rgba(153, 190, 250, .22);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 15px 34px rgba(0,0,0,.14);
  backdrop-filter: blur(12px);
}

.ksg-services-stage-counter strong {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.ksg-services-stage-counter span:last-child {
  color: rgba(205, 218, 239, .52);
  font-size: 13px;
  font-weight: 700;
}

.ksg-services-visual {
  height: 576px;
}

.ksg-services-radial.radial-b {
  animation: ksgServicesSpinSlow 34s linear infinite;
  transform-origin: center center;
}

.ksg-services-route::after {
  display: none;
}

.ksg-services-orbit-ring {
  --orbit-radius: 172px;
  position: absolute;
  left: 54%;
  top: 50.8%;
  z-index: 4;
  width: calc(var(--orbit-radius) * 2);
  height: calc(var(--orbit-radius) * 2);
  border: 1px solid rgba(78, 146, 255, .24);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  animation: ksgServicesOrbitDots 26s linear infinite;
  pointer-events: none;
}

.ksg-services-orbit-dot {
  --angle: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #b9dcff 0%, #7ebeff 48%, #3a8dff 100%);
  border: 1px solid rgba(205, 229, 255, .88);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(74, 158, 255, .86);
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--orbit-radius)));
}

.ksg-services-orbit-dot.dot-1 { --angle: 0deg; }
.ksg-services-orbit-dot.dot-2 { --angle: 45deg; }
.ksg-services-orbit-dot.dot-3 { --angle: 90deg; }
.ksg-services-orbit-dot.dot-4 { --angle: 135deg; }
.ksg-services-orbit-dot.dot-5 { --angle: 180deg; }
.ksg-services-orbit-dot.dot-6 { --angle: 225deg; }
.ksg-services-orbit-dot.dot-7 { --angle: 270deg; }
.ksg-services-orbit-dot.dot-8 { --angle: 315deg; }

.ksg-services-core {
  animation: ksgServicesPulse 6s ease-in-out infinite;
}

.ksg-services-core strong {
  max-width: 126px;
}

.ksg-services-node.is-active {
  --node-scale: 1.03;
  opacity: 1;
}

@media (max-width: 1399.98px) {
  .ksg-services-orbit-ring {
    --orbit-radius: 165px;
  }
}

@media (max-width: 1199.98px) {
  .ksg-services-orbit-ring {
    --orbit-radius: 152px;
  }

  .ksg-services-stage-counter {
    top: 18px;
    right: 20px;
    min-width: 114px;
    min-height: 54px;
  }
}

@media (max-width: 991.98px) {
  .ksg-services-stage-counter {
    display: none !important;
  }

  .ksg-services-orbit-ring {
    --orbit-radius: 148px;
    left: 54%;
    top: 50.5%;
  }
}

@media (max-width: 767.98px) {
  .ksg-services-orbit-ring {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksg-services-radial.radial-b,
  .ksg-services-orbit-ring {
    animation: none !important;
  }
}

@keyframes ksgServicesSpinSlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ksgServicesOrbitDots {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* --------------------------------------------------------------------------
   Services overview hero spacing calibration
   -------------------------------------------------------------------------- */

.ksg-services-visual {
  height: 582px;
}

.ksg-services-core {
  width: 182px;
  height: 182px;
}

.ksg-services-core::before {
  inset: -38px;
}

.ksg-services-orbit-ring {
  --orbit-radius: 178px;
}

.ksg-services-node {
  width: 146px;
  min-height: 94px;
  padding: 12px 11px;
}

.ksg-services-node-label {
  max-width: 126px;
  font-size: 11.5px;
  line-height: 1.24;
}

.ksg-services-node-icon,
.ksg-services-node-icon svg {
  width: 28px;
  height: 28px;
}

.ksg-services-node.is-top {
  left: 54%;
  top: 12%;
}

.ksg-services-node.is-top-right {
  left: 81.2%;
  top: 24%;
}

.ksg-services-node.is-right {
  left: 82.6%;
  top: 56.5%;
}

.ksg-services-node.is-bottom-right {
  left: 76.8%;
  top: 88.5%;
}

.ksg-services-node.is-bottom {
  left: 53.8%;
  top: 88.5%;
}

.ksg-services-node.is-bottom-left {
  left: 18.4%;
  top: 67.5%;
}

.ksg-services-node.is-top-left {
  left: 18.8%;
  top: 24%;
}

@media (max-width: 1399.98px) {
  .ksg-services-orbit-ring {
    --orbit-radius: 171px;
  }

  .ksg-services-node.is-top-right {
    left: 80.5%;
  }

  .ksg-services-node.is-right {
    left: 82.2%;
  }

  .ksg-services-node.is-bottom-right {
    left: 75.8%;
  }
}

@media (max-width: 1199.98px) {
  .ksg-services-core {
    width: 170px;
    height: 170px;
  }

  .ksg-services-orbit-ring {
    --orbit-radius: 160px;
  }

  .ksg-services-node {
    width: 132px;
    min-height: 84px;
  }

  .ksg-services-node-label {
    max-width: 112px;
    font-size: 10.5px;
  }
}

@media (max-width: 991.98px) {
  .ksg-services-visual {
    height: 494px;
  }

  .ksg-services-node {
    width: 140px;
    min-height: 88px;
  }

  .ksg-services-node.is-bottom-right {
    left: 76%;
    top: 86.5%;
  }

  .ksg-services-node.is-bottom {
    top: 86.5%;
  }

  .ksg-services-node.is-bottom-left {
    top: 65.5%;
  }
}


/* --------------------------------------------------------------------------
   Services overview hero connector + spacing repair
   -------------------------------------------------------------------------- */

.ksg-services-node {
  width: 144px;
  min-height: 92px;
}

.ksg-services-node.is-top-right {
  left: 83.6%;
  top: 24.4%;
}

.ksg-services-node.is-right {
  left: 84.6%;
  top: 56.2%;
}

.ksg-services-node.is-bottom-right {
  left: 79.6%;
  top: 88.8%;
}

.ksg-services-node.is-bottom {
  left: 51.6%;
  top: 88.8%;
}

.ksg-services-node.is-bottom-left {
  left: 18.5%;
  top: 67%;
}

.ksg-services-node.is-top-left {
  left: 18.5%;
  top: 24.2%;
}

.ksg-services-spoke-line {
  stroke: rgba(71, 143, 255, .58);
}

@media (max-width: 1399.98px) {
  .ksg-services-node.is-top-right {
    left: 82.8%;
  }

  .ksg-services-node.is-right {
    left: 84.0%;
  }

  .ksg-services-node.is-bottom-right {
    left: 78.8%;
  }

  .ksg-services-node.is-bottom {
    left: 51.2%;
  }
}

@media (max-width: 1199.98px) {
  .ksg-services-node.is-bottom-right {
    left: 78.2%;
    top: 87.9%;
  }

  .ksg-services-node.is-bottom {
    left: 50.8%;
    top: 87.9%;
  }
}

@media (max-width: 991.98px) {
  .ksg-services-node.is-top-right {
    left: 82.8%;
  }

  .ksg-services-node.is-right {
    left: 83.8%;
  }

  .ksg-services-node.is-bottom-right {
    left: 77.8%;
    top: 85.8%;
  }

  .ksg-services-node.is-bottom {
    left: 50.4%;
    top: 85.8%;
  }
}

/* --------------------------------------------------------------------------
   2026-08-24 services hero right-stage rebuild
   Reference goal: balanced seven-card orbit + exact connector geometry.
   Connector endpoints are measured by kahveci-services.js, so card spacing can
   change responsively without the lines drifting away from their targets.
   -------------------------------------------------------------------------- */

.ksg-services-stage-counter {
  display: none !important;
}

.ksg-services-spokes {
  opacity: 0;
  transition: opacity .18s ease;
}

.ksg-services-spokes.is-ready {
  opacity: 1;
}

.ksg-services-spoke-line {
  stroke: rgba(77, 151, 255, .62);
  stroke-width: 1.35;
  transition: stroke .24s ease, stroke-width .24s ease, opacity .24s ease;
}

.ksg-services-spoke-dot {
  transition: fill .24s ease, r .24s ease, opacity .24s ease;
}

.ksg-services-spoke-dot-start {
  opacity: .86;
}

.ksg-services-spoke-dot-end {
  opacity: .96;
}

.ksg-services-spoke.is-active .ksg-services-spoke-line {
  stroke: rgba(116, 184, 255, .92);
  stroke-width: 1.7;
}

.ksg-services-spoke.is-active .ksg-services-spoke-dot {
  fill: #9bd0ff;
}

@media (min-width: 992px) {
  .ksg-services-hero-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px 14px 0;
  }

  .ksg-services-visual {
    width: min(100%, 670px);
    height: 582px;
    flex: 0 1 670px;
    overflow: hidden;
  }

  .ksg-services-radial,
  .ksg-services-route,
  .ksg-services-orbit-ring,
  .ksg-services-core {
    left: 54%;
    top: 51%;
  }

  .ksg-services-core {
    width: 182px;
    height: 182px;
  }

  .ksg-services-node {
    width: 150px;
    min-height: 106px;
    padding: 13px 12px;
    gap: 9px;
  }

  .ksg-services-node-label {
    max-width: 130px;
    font-size: 12px;
    line-height: 1.28;
  }

  .ksg-services-node-icon {
    width: 32px;
    height: 32px;
  }

  .ksg-services-node-icon svg {
    width: 29px;
    height: 29px;
  }

  /* Geometry mirrors the approved reference: one vertical top card,
     two upper diagonals, two lower diagonals and a balanced bottom pair. */
  .ksg-services-node.is-top {
    left: 54%;
    top: 14.5%;
  }

  .ksg-services-node.is-top-right {
    left: 88.5%;
    top: 25.5%;
  }

  .ksg-services-node.is-right {
    left: 89%;
    top: 61.5%;
  }

  .ksg-services-node.is-bottom-right {
    left: 69%;
    top: 84%;
  }

  .ksg-services-node.is-bottom {
    left: 39%;
    top: 84%;
  }

  .ksg-services-node.is-bottom-left {
    left: 18.5%;
    top: 65.5%;
  }

  .ksg-services-node.is-top-left {
    left: 18.5%;
    top: 25.5%;
  }

  .ksg-services-node.is-active {
    --node-scale: 1;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .ksg-services-hero-stage {
    padding-right: 12px;
  }

  .ksg-services-visual {
    width: min(100%, 610px);
    flex-basis: 610px;
    height: 548px;
  }

  .ksg-services-core {
    width: 168px;
    height: 168px;
  }

  .ksg-services-node {
    width: 132px;
    min-height: 92px;
    padding: 11px 10px;
  }

  .ksg-services-node-label {
    max-width: 114px;
    font-size: 10.5px;
  }

  .ksg-services-node.is-top-right {
    left: 87.5%;
  }

  .ksg-services-node.is-right {
    left: 88%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksg-services-spokes,
  .ksg-services-spoke-line,
  .ksg-services-spoke-dot {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Service detail refinement v13 — add themed hero, convert scope slider
   into a premium 4-column grid, soften support panel background and enlarge
   FAQ media.
   -------------------------------------------------------------------------- */

.ksg-service-detail-hero .box-pageheader-1 {
  position: relative;
  display: flex;
  height: 372px;
  min-height: 0;
  box-sizing: border-box;
  padding: 58px 30px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  background-color: #06173f;
  background-position: center;
}

.ksg-service-detail-hero .box-pageheader-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 25, 69, 0.78) 0%, rgba(6, 20, 58, 0.84) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.ksg-service-detail-hero .box-pageheader-1 > * {
  position: relative;
  z-index: 1;
}

.ksg-service-detail-hero h1 {
  max-width: 980px;
  font-size: 56px;
  line-height: 1.14;
}

.ksg-service-detail-hero .ksg-detail-summary {
  width: min(100%, 780px);
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.75;
}

.ksg-service-detail-hero .btn-tag {
  background: rgba(255,255,255,0.94);
  border-color: rgba(255,255,255,0.94);
}

.ksg-theme-detail-intro .content-detail {
  max-width: 1040px;
  margin: 0 auto;
}

.ksg-service-scope .ksg-scope-heading {
  margin-bottom: 24px;
}

.ksg-service-scope .ksg-scope-heading h2 {
  font-size: clamp(40px, 4.1vw, 64px);
  line-height: 1.08;
}

.ksg-scope-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
}

.ksg-scope-grid-card {
  height: 100%;
}

.ksg-scope-grid .ksg-theme-subservice .card-offer {
  display: flex;
  min-height: 318px;
  height: 100%;
  margin-bottom: 0;
  padding: 34px 24px 30px;
  align-items: center;
  flex-direction: column;
  text-align: center;
  background: #ffffff;
  border: 1px solid #E2E8F2;
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(1, 17, 59, 0.05);
}

.ksg-scope-grid .ksg-theme-subservice .card-image {
  display: flex;
  height: 82px;
  margin-bottom: 18px;
  align-items: center;
  justify-content: center;
}

.ksg-scope-grid .ksg-theme-subservice .card-info {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  flex-direction: column;
}

.ksg-scope-grid .ksg-theme-subservice .card-info h3 {
  min-height: 56px;
  font-size: 20px;
  line-height: 1.35;
}

.ksg-scope-grid .ksg-theme-subservice .card-info p {
  max-width: 290px;
  margin: 0 auto;
  line-height: 1.75;
}

.ksg-scope-grid > .ksg-theme-subservice:nth-last-child(2):nth-child(4n + 1) {
  grid-column: 2;
}

.ksg-scope-grid > .ksg-theme-subservice:last-child:nth-child(4n + 1) {
  grid-column: 2 / span 2;
}

.ksg-support-requirements-theme {
  padding-top: 78px !important;
  padding-bottom: 68px !important;
}

/* Align the rounded support/requirements panel with the EXACT card edges
   of the service-scope grid above. The grid starts at the Bootstrap container's
   inner gutter (12px), while a background painted on the container itself starts
   12px earlier. We therefore paint the panel on an inset pseudo-layer instead of
   narrowing the entire section. This preserves content widths and aligns both
   left and right rounded corners precisely with the scope-card edges. */

.ksg-support-requirements-theme > .container {
  position: relative;
  padding: 54px 56px 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.ksg-support-requirements-theme > .container::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 12px;
  bottom: 0;
  left: 12px;
  background: #F4F6FA;
  border: 1px solid #E4EAF3;
  border-radius: 28px;
  pointer-events: none;
}

.ksg-support-requirements-theme > .container > .row {
  position: relative;
  z-index: 1;
}

.ksg-support-requirements-theme .row {
  --bs-gutter-x: 88px;
}

.ksg-support-requirements-theme .ksg-tracking-copy {
  height: 100%;
  padding: 6px 0 0;
}

.ksg-faq .row {
  align-items: stretch !important;
}

.ksg-faq-copy-column,
.ksg-faq-accordion-column {
  display: flex;
  flex-direction: column;
}

.ksg-faq .box-gallery-faqs {
  display: flex;
  flex: 1;
  min-height: 0;
}

.ksg-faq .box-gallery-faqs .image-top {
  flex: 1;
  min-height: 360px;
  margin-bottom: 0;
}

.ksg-faq .box-gallery-faqs .image-top img,
.ksg-faq .box-gallery-faqs .image-top .ksg-image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksg-faq-accordion-column .box-accordion {
  height: 100%;
}

@media (max-width: 1399.98px) {
  .ksg-scope-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .ksg-support-requirements-theme .row {
    --bs-gutter-x: 64px;
  }
}

@media (max-width: 1199.98px) {
  .ksg-service-detail-hero h1 {
    font-size: 48px;
  }

  .ksg-scope-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ksg-scope-grid > .ksg-theme-subservice:nth-last-child(2):nth-child(4n + 1),
  .ksg-scope-grid > .ksg-theme-subservice:last-child:nth-child(4n + 1) {
    grid-column: auto;
  }

  .ksg-support-requirements-theme > .container {
    padding: 46px 40px 18px;
  }
}

@media (max-width: 991.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 340px;
    padding: 48px 24px;
  }

  .ksg-service-detail-hero h1 {
    font-size: 40px;
  }

  .ksg-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ksg-support-requirements-theme {
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }

  .ksg-support-requirements-theme > .container {
    padding: 38px 28px 8px;
  }

  .ksg-support-requirements-theme > .container::before {
    border-radius: 24px;
  }

  .ksg-support-requirements-theme .row {
    --bs-gutter-x: 24px;
  }

  .ksg-faq .box-gallery-faqs .image-top {
    min-height: 320px;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 310px;
    padding: 44px 22px;
  }

  .ksg-service-detail-hero h1 {
    font-size: 34px;
  }

  .ksg-scope-grid {
    gap: 20px;
  }

  .ksg-scope-grid .ksg-theme-subservice .card-offer {
    min-height: 300px;
  }

  .ksg-support-requirements-theme > .container {
    padding: 32px 22px 6px;
  }

  .ksg-support-requirements-theme > .container::before {
    border-radius: 20px;
  }

  .ksg-faq-copy-column,
  .ksg-faq-accordion-column {
    display: block;
  }

  .ksg-faq .box-gallery-faqs .image-top {
    min-height: 280px;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 288px;
    padding: 40px 18px;
  }

  .ksg-service-detail-hero h1 {
    font-size: 30px;
  }

  .ksg-scope-grid {
    grid-template-columns: 1fr;
  }

  .ksg-support-requirements-theme > .container {
    padding: 28px 18px 4px;
  }
}

/* --------------------------------------------------------------------------
   Service detail refinement v14 — fixed shared hero background + single-image
   intro panel with editable H2 and two paragraphs.
   -------------------------------------------------------------------------- */

.ksg-service-detail-hero .box-pageheader-1 {
  height: 392px;
  padding: 60px 28px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.ksg-service-intro-panel {
  position: relative;
}

.ksg-service-intro-media {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  border-radius: 34px;
  box-shadow: 0 26px 58px rgba(1, 17, 59, 0.12);
}

.ksg-service-intro-media img,
.ksg-service-intro-media .ksg-image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 540px;
  object-fit: cover;
  object-position: center;
}

.ksg-service-intro-copy {
  padding-left: 16px;
}

.ksg-service-intro-copy h2 {
  font-size: clamp(38px, 3.8vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ksg-service-intro-copy p {
  margin-bottom: 22px;
  line-height: 1.9;
}

.ksg-service-intro-copy p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1199.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 376px;
    background-attachment: scroll;
  }

  .ksg-service-intro-media,
  .ksg-service-intro-media img,
  .ksg-service-intro-media .ksg-image-placeholder {
    min-height: 500px;
  }

  .ksg-service-intro-copy h2 {
    font-size: clamp(34px, 4vw, 48px);
  }
}

@media (max-width: 991.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 340px;
    padding: 50px 24px;
  }

  .ksg-service-intro-panel {
    padding-top: 70px !important;
    padding-bottom: 48px !important;
  }

  .ksg-service-intro-media,
  .ksg-service-intro-media img,
  .ksg-service-intro-media .ksg-image-placeholder {
    min-height: 420px;
    border-radius: 28px;
  }

  .ksg-service-intro-copy {
    padding-left: 0;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 316px;
  }

  .ksg-service-intro-media,
  .ksg-service-intro-media img,
  .ksg-service-intro-media .ksg-image-placeholder {
    min-height: 340px;
    border-radius: 24px;
  }

  .ksg-service-intro-copy h2 {
    font-size: 34px;
  }

  .ksg-service-intro-copy p {
    line-height: 1.78;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 292px;
    padding: 42px 18px;
  }

  .ksg-service-intro-panel {
    padding-top: 56px !important;
  }

  .ksg-service-intro-media,
  .ksg-service-intro-media img,
  .ksg-service-intro-media .ksg-image-placeholder {
    min-height: 290px;
    border-radius: 20px;
  }

  .ksg-service-intro-copy h2 {
    font-size: 30px;
  }
}

/* --------------------------------------------------------------------------
   Service detail refinement v15 — use the exact shared About/Contact hero
   treatment and tighten the single-image detail heading.
   -------------------------------------------------------------------------- */

.ksg-service-detail-hero .box-pageheader-1 {
  display: flex;
  height: 404px;
  min-height: 0;
  box-sizing: border-box;
  padding: 60px 28px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #01113B;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  background-blend-mode: multiply;
}

.ksg-service-detail-hero .box-pageheader-1::before {
  content: none !important;
  display: none !important;
}

.ksg-service-detail-hero .box-pageheader-1 > * {
  position: relative;
  z-index: auto;
}

.ksg-service-intro-copy h2 {
  max-width: 650px;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.ksg-service-intro-copy p + p {
  margin-top: 14px;
}

@media (max-width: 991.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 340px;
    padding: 48px 22px;
  }

  .ksg-service-intro-copy h2 {
    font-size: 38px;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 320px;
    padding: 45px 20px;
  }

  .ksg-service-intro-copy h2 {
    font-size: 34px;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-detail-hero .box-pageheader-1 {
    height: 300px;
  }

  .ksg-service-intro-copy h2 {
    font-size: 30px;
  }
}

/* --------------------------------------------------------------------------
   Service detail refinement v15 — normalize intro image height for portrait
   source assets and lock the H2 to the Kahveci Sea Group navy.
   -------------------------------------------------------------------------- */

.ksg-service-intro-media {
  height: 520px;
  min-height: 0;
}

.ksg-service-intro-media img,
.ksg-service-intro-media .ksg-image-placeholder {
  width: 100%;
  height: 520px;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
}

.ksg-service-intro-copy h2 {
  color: #01113B !important;
}

@media (max-width: 1199.98px) {
  .ksg-service-intro-media,
  .ksg-service-intro-media img,
  .ksg-service-intro-media .ksg-image-placeholder {
    height: 480px;
    min-height: 0;
  }
}

@media (max-width: 991.98px) {
  .ksg-service-intro-media,
  .ksg-service-intro-media img,
  .ksg-service-intro-media .ksg-image-placeholder {
    height: 420px;
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-intro-media,
  .ksg-service-intro-media img,
  .ksg-service-intro-media .ksg-image-placeholder {
    height: 340px;
    min-height: 0;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-intro-media,
  .ksg-service-intro-media img,
  .ksg-service-intro-media .ksg-image-placeholder {
    height: 290px;
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   Services overview — request form alignment refinement.
   The generic theme gives .box-form-contact-leading a 40px top margin and the
   source image keeps its intrinsic width. In this two-column block that made
   the form look dropped and the visual unnecessarily narrow. Keep the section
   layout, but align both columns from the top and let the visual fill its side.
   -------------------------------------------------------------------------- */
.ksg-service-request .ksg-service-request-layout {
  --bs-gutter-x: 32px;
  align-items: flex-start !important;
}

.ksg-service-request .ksg-service-request-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ksg-service-request .ksg-service-request-visual {
  display: block;
  width: 100%;
  max-width: none;
  height: 410px;
  margin: 0;
  object-fit: cover;
  object-position: center 38%;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(1, 17, 59, 0.09);
}

.ksg-service-request .ksg-service-request-form-col {
  min-width: 0;
}

.ksg-service-request .ksg-service-request-form {
  margin-top: 0 !important;
  padding: 42px 40px 40px;
}

@media (max-width: 1199.98px) {
  .ksg-service-request .ksg-service-request-layout {
    --bs-gutter-x: 26px;
  }

  .ksg-service-request .ksg-service-request-visual {
    height: 390px;
  }

  .ksg-service-request .ksg-service-request-form {
    padding: 36px 30px 34px;
  }
}

@media (max-width: 991.98px) {
  .ksg-service-request .ksg-service-request-visual {
    height: 420px;
  }

  .ksg-service-request .ksg-service-request-form-col {
    margin-top: 6px;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-request .ksg-service-request-visual {
    height: 340px;
  }

  .ksg-service-request .ksg-service-request-form {
    padding: 30px 22px 28px;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-request .ksg-service-request-visual {
    height: 300px;
  }
}



/* --------------------------------------------------------------------------
   Services overview — FAQ image and request form premium refinement.
   - Extend the FAQ visual downward for a stronger left column presence.
   - Rebuild the service request block into a cleaner, balanced two-column card.
   -------------------------------------------------------------------------- */
.ksg-faq .box-gallery-faqs {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(1, 17, 59, 0.08);
}

.ksg-faq .box-gallery-faqs .image-top {
  min-height: 460px;
}

.ksg-service-request .ksg-service-request-layout {
  --bs-gutter-x: 38px;
  align-items: stretch !important;
}

.ksg-service-request .ksg-service-request-intro {
  gap: 0;
}

.ksg-service-request .ksg-service-request-visual {
  height: 470px;
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(1, 17, 59, 0.10);
}

.ksg-service-request .ksg-service-request-form-col {
  display: flex;
  min-width: 0;
}

.ksg-service-request .ksg-service-request-form {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 0 !important;
  padding: 34px 34px 30px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  background-image: none !important;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(1, 17, 59, 0.08);
}

.ksg-service-request .ksg-service-request-form::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -50px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 133, 178, 0.14) 0%, rgba(111, 133, 178, 0.00) 72%);
  pointer-events: none;
  z-index: 0;
}

.ksg-service-request .ksg-service-request-form > .row {
  position: relative;
  z-index: 1;
  --bs-gutter-x: 22px;
  --bs-gutter-y: 4px;
}

.ksg-service-request .ksg-service-request-form label {
  display: inline-block;
  margin-bottom: 9px;
  color: var(--ksg-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.ksg-service-request .ksg-service-request-form .form-control {
  min-height: 58px;
  padding: 14px 18px;
  color: var(--ksg-primary);
  background: #fbfcfe;
  border: 1px solid #d7e1ee;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.ksg-service-request .ksg-service-request-form .form-control:hover {
  border-color: #c5d2e4;
  background: #ffffff;
}

.ksg-service-request .ksg-service-request-form .form-control:focus {
  border-color: var(--ksg-secondary);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(111, 133, 178, 0.12);
}

.ksg-service-request .ksg-service-request-form select.form-control {
  cursor: pointer;
}

.ksg-service-request .ksg-service-request-form textarea.form-control {
  min-height: 168px;
  resize: vertical;
}

.ksg-service-request .ksg-service-request-form .btn-brand-1-big {
  min-height: 58px;
  padding: 16px 30px;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(1, 17, 59, 0.10);
}

.ksg-service-request .ksg-service-request-form .btn-link-medium {
  font-weight: 700;
}

.ksg-service-request .ksg-service-request-form .col-12:last-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: 10px;
}

.ksg-service-request .ksg-service-request-form .ksg-form-status {
  width: 100%;
  margin-top: 2px !important;
}

@media (max-width: 1199.98px) {
  .ksg-faq .box-gallery-faqs .image-top {
    min-height: 430px;
  }

  .ksg-service-request .ksg-service-request-layout {
    --bs-gutter-x: 30px;
  }

  .ksg-service-request .ksg-service-request-visual {
    height: 440px;
  }

  .ksg-service-request .ksg-service-request-form {
    padding: 30px 28px 28px;
  }
}

@media (max-width: 991.98px) {
  .ksg-faq .box-gallery-faqs .image-top {
    min-height: 390px;
  }

  .ksg-service-request .ksg-service-request-layout {
    --bs-gutter-x: 24px;
  }

  .ksg-service-request .ksg-service-request-visual {
    height: 420px;
  }

  .ksg-service-request .ksg-service-request-form-col {
    display: block;
  }

  .ksg-service-request .ksg-service-request-form {
    height: auto;
  }
}

@media (max-width: 767.98px) {
  .ksg-faq .box-gallery-faqs .image-top {
    min-height: 340px;
  }

  .ksg-service-request .ksg-service-request-visual {
    height: 360px;
  }

  .ksg-service-request .ksg-service-request-form {
    padding: 26px 22px 24px;
    border-radius: 16px;
  }

  .ksg-service-request .ksg-service-request-form .col-12:last-child {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .ksg-service-request .ksg-service-request-form .btn-brand-1-big,
  .ksg-service-request .ksg-service-request-form .btn-link-medium {
    width: 100%;
    margin-left: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .ksg-faq .box-gallery-faqs {
    border-radius: 14px;
  }

  .ksg-faq .box-gallery-faqs .image-top {
    min-height: 320px;
  }

  .ksg-service-request .ksg-service-request-visual {
    height: 320px;
    border-radius: 14px;
  }

  .ksg-service-request .ksg-service-request-form {
    padding: 22px 18px 20px;
    border-radius: 14px;
  }

  .ksg-service-request .ksg-service-request-form > .row {
    --bs-gutter-x: 16px;
  }

  .ksg-service-request .ksg-service-request-form label {
    font-size: 13px;
  }
}


/* --------------------------------------------------------------------------
   Services overview — request form aligned with homepage "Hizmet Talep Edin".
   Goal: make the service section's request area feel like the homepage request
   module: diagonal soft-tint form panel, cleaner labels/fields and a framed
   image card with the same premium treatment.
   -------------------------------------------------------------------------- */
.ksg-service-request {
  position: relative;
  background: linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
}

.ksg-service-request::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 12%, rgba(111, 133, 178, 0.10) 0%, rgba(111, 133, 178, 0) 34%);
  pointer-events: none;
}

.ksg-service-request .container {
  position: relative;
  z-index: 1;
}

.ksg-service-request .ksg-service-request-intro {
  justify-content: flex-start;
}

.ksg-service-request .btn.btn-tag {
  min-width: 0;
}

.ksg-service-request .ksg-service-request-visual {
  position: relative;
  display: block;
  width: 100%;
  height: 490px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(1, 17, 59, 0.12);
  border-radius: 14px;
  background: linear-gradient(145deg, #eef2f8 0%, #d5dfef 100%);
  box-shadow: 0 18px 36px rgba(1, 17, 59, 0.12);
  object-fit: cover;
  object-position: center;
}

.ksg-service-request .ksg-service-request-visual::before { display:none; }

/* The renderer outputs the image element directly; emulate the homepage framed
   media card by using an inset shadow and internal overlay through background
   layering on the image wrapper substitute. */
.ksg-service-request .ksg-service-request-intro .ksg-service-request-visual {
  filter: none;
}

.ksg-service-request .ksg-service-request-form {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 42px 38px 38px;
  overflow: hidden;
  background-color: #ffffff;
  background-image: linear-gradient(108deg, transparent 0%, transparent 66.5%, #eef2f8 66.6%, #d8e2f1 100%) !important;
  border: 1px solid rgba(1, 17, 59, 0.10);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(1, 17, 59, 0.08);
}

.ksg-service-request .ksg-service-request-form::before {
  display: none;
}

.ksg-service-request .ksg-service-request-form > .row {
  --bs-gutter-x: 22px;
  --bs-gutter-y: 2px;
}

.ksg-service-request .ksg-service-request-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--ksg-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.ksg-service-request .ksg-service-request-form .form-control {
  min-height: 50px;
  padding: 13px 18px;
  color: var(--ksg-primary);
  background-color: #ffffff;
  border: 1px solid #d7e1ee;
  border-radius: 12px;
  box-shadow: none;
}

.ksg-service-request .ksg-service-request-form textarea.form-control {
  min-height: 185px;
  resize: vertical;
}

.ksg-service-request .ksg-service-request-form .form-control:focus {
  border-color: var(--ksg-secondary);
  box-shadow: 0 0 0 3px rgba(111, 133, 178, 0.10);
}

.ksg-service-request .ksg-service-request-form .col-12:last-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  padding-top: 12px;
}

.ksg-service-request .ksg-service-request-form .btn-brand-1-big {
  min-height: 54px;
  padding: 14px 28px;
  border-radius: 12px;
}

.ksg-service-request .ksg-service-request-form .btn-link-medium {
  font-weight: 700;
}

.ksg-service-request .ksg-service-request-form .ksg-form-status {
  width: 100%;
}

@media (max-width: 1199.98px) {
  .ksg-service-request .ksg-service-request-visual {
    height: 450px;
  }

  .ksg-service-request .ksg-service-request-form {
    padding: 34px 30px 32px;
  }
}

@media (max-width: 991.98px) {
  .ksg-service-request .ksg-service-request-visual {
    height: 400px;
  }

  .ksg-service-request .ksg-service-request-form {
    background: #ffffff !important;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-request .ksg-service-request-visual {
    height: 340px;
    padding: 10px;
  }

  .ksg-service-request .ksg-service-request-form {
    padding: 28px 22px 24px;
  }

  .ksg-service-request .ksg-service-request-form .col-12:last-child {
    align-items: stretch;
    flex-direction: column;
  }

  .ksg-service-request .ksg-service-request-form .btn-brand-1-big,
  .ksg-service-request .ksg-service-request-form .btn-link-medium {
    width: 100%;
    margin-left: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-request .ksg-service-request-visual {
    height: 300px;
  }

  .ksg-service-request .ksg-service-request-form {
    padding: 24px 18px 20px;
    border-radius: 12px;
  }
}


/* --------------------------------------------------------------------------
   Services overview — unified request panel v3.
   The copy/image column now sits inside the SAME visual panel as the form.
   Field rows use a real vertical rhythm so labels never collide with the
   previous row's controls.
   -------------------------------------------------------------------------- */
.ksg-service-request {
  background: #ffffff;
}

.ksg-service-request::before {
  display: none;
}

.ksg-service-request .ksg-service-request-panel {
  position: relative;
  overflow: hidden;
  padding: 42px;
  background-color: #ffffff;
  background-image: linear-gradient(108deg, transparent 0%, transparent 72%, #eef2f8 72.1%, #d8e2f1 100%);
  border: 1px solid rgba(1, 17, 59, 0.10);
  border-radius: 20px;
  box-shadow: 0 22px 52px rgba(1, 17, 59, 0.08);
}

.ksg-service-request .ksg-service-request-layout {
  --bs-gutter-x: 42px;
  align-items: stretch !important;
}

.ksg-service-request .ksg-service-request-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding-bottom: 0;
}

.ksg-service-request .ksg-service-request-intro .btn-tag {
  align-self: flex-start;
}

.ksg-service-request .ksg-service-request-media {
  position: relative;
  min-height: 0;
  margin-top: auto;
  padding-top: 10px;
}

.ksg-service-request .ksg-service-request-visual {
  display: block;
  width: 100%;
  height: 405px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: none;
  box-shadow: 0 16px 34px rgba(1, 17, 59, 0.10);
  object-fit: cover;
  object-position: center 35%;
}

.ksg-service-request .ksg-service-request-form-col {
  display: flex;
  min-width: 0;
}

.ksg-service-request .ksg-service-request-form {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 4px 0 0;
  flex-direction: column;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.ksg-service-request .ksg-service-request-form > .row {
  position: relative;
  z-index: 1;
  --bs-gutter-x: 24px;
  --bs-gutter-y: 24px;
  margin-top: calc(-1 * var(--bs-gutter-y));
}

.ksg-service-request .ksg-service-request-form > .row > * {
  margin-top: var(--bs-gutter-y);
}

.ksg-service-request .ksg-service-request-form label {
  display: block;
  margin-bottom: 9px;
  color: var(--ksg-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.ksg-service-request .ksg-service-request-form .form-control {
  min-height: 56px;
  padding: 14px 18px;
  color: var(--ksg-primary);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d7e1ee;
  border-radius: 12px;
}

.ksg-service-request .ksg-service-request-form textarea.form-control {
  min-height: 190px;
}

.ksg-service-request .ksg-service-request-form .form-control:focus {
  background: #ffffff;
  border-color: var(--ksg-secondary);
  box-shadow: 0 0 0 3px rgba(111, 133, 178, 0.11);
}

.ksg-service-request .ksg-service-request-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: 2px;
}

.ksg-service-request .ksg-service-request-actions .btn-brand-1-big {
  min-height: 56px;
  padding: 15px 30px;
  border-radius: 12px;
}

.ksg-service-request .ksg-service-request-actions .btn-link-medium {
  margin: 0 !important;
  font-weight: 700;
}

.ksg-service-request .ksg-service-request-actions .ksg-form-status {
  width: 100%;
  margin: 0 !important;
}

@media (max-width: 1199.98px) {
  .ksg-service-request .ksg-service-request-panel {
    padding: 34px;
  }

  .ksg-service-request .ksg-service-request-layout {
    --bs-gutter-x: 32px;
  }

  .ksg-service-request .ksg-service-request-visual {
    height: 380px;
  }
}

@media (max-width: 991.98px) {
  .ksg-service-request .ksg-service-request-panel {
    padding: 30px;
    background: #ffffff;
  }

  .ksg-service-request .ksg-service-request-intro {
    margin-bottom: 34px;
  }

  .ksg-service-request .ksg-service-request-media {
    margin-top: 0;
  }

  .ksg-service-request .ksg-service-request-visual {
    height: 390px;
  }

  .ksg-service-request .ksg-service-request-form {
    padding-top: 0;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-request .ksg-service-request-panel {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .ksg-service-request .ksg-service-request-form > .row {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 20px;
  }

  .ksg-service-request .ksg-service-request-visual {
    height: 330px;
    border-radius: 14px;
  }

  .ksg-service-request .ksg-service-request-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .ksg-service-request .ksg-service-request-actions .btn-brand-1-big,
  .ksg-service-request .ksg-service-request-actions .btn-link-medium {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-request .ksg-service-request-panel {
    padding: 20px 16px;
    border-radius: 14px;
  }

  .ksg-service-request .ksg-service-request-visual {
    height: 290px;
  }

  .ksg-service-request .ksg-service-request-form > .row {
    --bs-gutter-y: 18px;
  }
}


/* --------------------------------------------------------------------------
   Services overview — equal-height service information cards.
   All white title/scope panels now share the same top and bottom line on each
   row. Two-line service names reserve the same title space as one-line names,
   descriptions use a consistent area, and the CTA stays pinned to the bottom.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ksg-services-grid .cardService .cardInfo {
    box-sizing: border-box;
    height: 252px;
    padding: 18px 20px;
  }

  .ksg-services-grid .cardService .cardInfo > a {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    flex-direction: column;
  }

  .ksg-services-grid .cardService .ksg-card-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
  }

  .ksg-services-grid .cardService .ksg-card-icon img {
    display: block;
    width: 34px;
    height: 34px;
    max-height: none;
    object-fit: contain;
  }

  .ksg-services-grid .cardService .cardInfo h2 {
    display: flex;
    min-height: 48px;
    margin: 7px 0 7px;
    align-items: flex-start;
    font-size: 18px;
    line-height: 1.28;
  }

  .ksg-services-grid .cardService .cardInfo p {
    display: -webkit-box;
    min-height: 76px;
    margin: 0 0 8px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 13px;
    line-height: 1.48;
  }

  .ksg-services-grid .cardService .ksg-card-link {
    display: inline-flex;
    margin-top: auto;
    align-items: center;
    flex: 0 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .ksg-services-grid .cardService .cardInfo {
    height: 244px;
  }

  .ksg-services-grid .cardService .cardInfo h2 {
    min-height: 46px;
  }

  .ksg-services-grid .cardService .cardInfo p {
    min-height: 72px;
  }
}


/* --------------------------------------------------------------------------
   Services overview — final card vertical rhythm.
   Keep every white information panel perfectly aligned, but let the panels
   begin slightly lower over the photography for a calmer visual balance.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ksg-services-grid .cardService .cardInfo {
    bottom: -46px;
  }
}

/* --------------------------------------------------------------------------
   Service detail FAQ — make the left visual finish at the same baseline as
   the right-side "Need more help?" content. On desktop, the right column now
   determines the row height; the image simply fills the remaining space under
   the FAQ intro instead of forcing the section taller itself.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .ksg-faq .ksg-faq-copy-column .box-gallery-faqs {
    height: 0;
    min-height: 0;
    flex: 1 1 0;
  }

  .ksg-faq .ksg-faq-copy-column .box-gallery-faqs .image-top {
    height: 100%;
    min-height: 0 !important;
    flex: 1 1 0;
  }

  .ksg-faq .ksg-faq-copy-column .box-gallery-faqs .image-top img,
  .ksg-faq .ksg-faq-copy-column .box-gallery-faqs .image-top .ksg-image-placeholder {
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }
}

/* --------------------------------------------------------------------------
   Services overview — row-based media equalisation without shrinking.
   The naturally tallest service visual in each Bootstrap row remains the
   reference height. Shorter visuals stretch to that row height and are cropped
   with object-fit: cover, so existing tall cards are never reduced.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ksg-services-grid .row > [class*="col-"] {
    display: flex;
  }

  .ksg-services-grid .cardService {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .ksg-services-grid .cardService .cardImage {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .ksg-services-grid .cardService .cardImage > a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ksg-services-grid .cardService .cardImage img,
  .ksg-services-grid .cardService .cardImage .ksg-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* --------------------------------------------------------------------------
   Services FAQ — keep hover/focus contrast readable on every question state.
   -------------------------------------------------------------------------- */
.ksg-faq .accordion .accordion-button:hover,
.ksg-faq .accordion .accordion-button:focus-visible {
  background-color: #01113B;
  color: #ffffff;
}

.ksg-faq .accordion .accordion-button:not(.collapsed):hover,
.ksg-faq .accordion .accordion-button:not(.collapsed):focus-visible {
  background-color: #6F85B2;
  color: #01113B;
}

.ksg-faq .accordion .accordion-button:hover::after {
  filter: brightness(0) invert(1);
}

.ksg-faq .accordion .accordion-button:not(.collapsed):hover::after,
.ksg-faq .accordion .accordion-button:not(.collapsed):focus-visible::after {
  filter: none;
}

/* --------------------------------------------------------------------------
   Production mobile services hero - mobile-first service center layout
   Desktop orbit remains unchanged at >= 992px. On smaller viewports the
   absolute orbit is intentionally converted into a stable two-column grid.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ksg-services-hero {
    padding-top: 14px;
  }

  .ksg-services-hero .container {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ksg-services-hero-shell,
  .ksg-services-hero-layout {
    min-height: 0 !important;
  }

  .ksg-services-hero-shell {
    overflow: hidden;
    border-radius: 28px;
    background:
      radial-gradient(circle at 50% 48%, rgba(43, 115, 238, .18), transparent 31%),
      radial-gradient(circle at 50% 92%, rgba(21, 78, 172, .20), transparent 38%),
      linear-gradient(180deg, #071d4d 0%, #05183f 46%, #03122f 100%);
  }

  .ksg-services-hero-shell::before {
    left: 0;
    right: 0;
    bottom: -5%;
    width: 100%;
    height: 30%;
    background-image:
      linear-gradient(180deg, rgba(3, 18, 48, 0), rgba(3, 16, 45, .78)),
      var(--ksg-services-hero-image);
    background-position: center bottom;
    background-size: cover;
    opacity: .19;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.62) 52%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.62) 52%, transparent 100%);
  }

  .ksg-services-hero-layout {
    display: block;
    padding: 34px 24px 30px;
  }

  .ksg-services-hero-copy {
    display: flex;
    padding: 0 4px !important;
    align-items: center;
    text-align: center;
  }

  .ksg-services-hero-eyebrow {
    min-height: 40px;
    padding: 0 18px;
    margin: 0 auto;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .18em;
  }

  .ksg-services-hero h1 {
    max-width: 760px;
    margin: 22px auto 0;
    font-size: clamp(38px, 6.2vw, 52px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.04em;
    text-align: center;
    text-wrap: balance;
  }

  .ksg-services-hero-lead {
    max-width: 660px;
    margin: 18px auto 0;
    color: rgba(228, 237, 250, .75);
    font-size: 16px !important;
    line-height: 1.62 !important;
    text-align: center;
  }

  /* The service overview page already has a dedicated request-service CTA below
     the service cards. Hiding desktop hero buttons keeps the mobile first screen
     focused and prevents a crowded button stack. */
  .ksg-services-hero-actions {
    display: none !important;
  }

  .ksg-services-hero-stage {
    display: block !important;
    padding: 0 !important;
    margin-top: 30px;
  }

  .ksg-services-stage-counter,
  .ksg-services-gridline,
  .ksg-services-dotfield,
  .ksg-services-radial,
  .ksg-services-route,
  .ksg-services-orbit-ring,
  .ksg-services-spokes {
    display: none !important;
  }

  .ksg-services-visual {
    display: grid;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    background: transparent;
    border-radius: 0;
  }

  .ksg-services-core {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 2;
    grid-column: 1 / -1;
    width: 226px !important;
    height: 226px !important;
    padding: 28px !important;
    margin: 4px auto 20px;
    background:
      radial-gradient(circle at 40% 26%, rgba(137, 190, 255, .98) 0%, rgba(54, 135, 255, .98) 26%, #256bd2 55%, #16478f 100%);
    border: 2px solid rgba(204, 229, 255, .82);
    box-shadow:
      0 0 0 12px rgba(45, 125, 255, .08),
      0 0 0 28px rgba(45, 125, 255, .035),
      0 0 58px rgba(57, 143, 255, .44),
      0 28px 55px rgba(0, 0, 0, .26),
      inset 0 1px 22px rgba(255,255,255,.19);
    transform: none !important;
    animation: none !important;
  }

  .ksg-services-core::before {
    inset: -30px !important;
    border-color: rgba(89, 158, 255, .19);
  }

  .ksg-services-core-ring.ring-1 {
    inset: 18px;
  }

  .ksg-services-core-ring.ring-2 {
    inset: 38px;
  }

  .ksg-services-core-mark {
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
  }

  .ksg-services-core-mark img {
    width: 32px;
    height: 32px;
  }

  .ksg-services-core strong {
    max-width: 150px !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  .ksg-services-node,
  .ksg-services-node.is-top,
  .ksg-services-node.is-top-right,
  .ksg-services-node.is-right,
  .ksg-services-node.is-bottom-right,
  .ksg-services-node.is-bottom,
  .ksg-services-node.is-bottom-left,
  .ksg-services-node.is-top-left {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 3;
    display: flex;
    width: 100% !important;
    min-width: 0;
    grid-column: auto !important;
    justify-self: stretch !important;
    min-height: 92px !important;
    padding: 16px 17px !important;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 13px;
    text-align: left;
    opacity: 1 !important;
    background: linear-gradient(145deg, rgba(15, 47, 101, .80), rgba(8, 33, 77, .86));
    border: 1px solid rgba(100, 162, 255, .30);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 30px rgba(0,0,0,.10);
    transform: none !important;
  }

  .ksg-services-node.is-top-left {
    grid-column: 1 / -1 !important;
  }

  .ksg-services-node:hover,
  .ksg-services-node:focus-visible,
  .ksg-services-node.is-active {
    background: linear-gradient(145deg, rgba(18, 57, 119, .90), rgba(9, 38, 88, .92));
    border-color: rgba(117, 178, 255, .44);
    transform: none !important;
  }

  .ksg-services-node-icon,
  .ksg-services-node:hover .ksg-services-node-icon,
  .ksg-services-node:focus-visible .ksg-services-node-icon,
  .ksg-services-node.is-active .ksg-services-node-icon {
    display: grid;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px;
    place-items: center;
    color: #74b2ff !important;
    background: rgba(35, 96, 184, .16);
    border: 1px solid rgba(104, 166, 255, .26);
    border-radius: 14px;
  }

  .ksg-services-node-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  .ksg-services-node-label {
    max-width: none !important;
    color: #fff;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.27 !important;
    letter-spacing: -.015em;
  }
}

@media (max-width: 575.98px) {
  .ksg-services-hero .container {
    padding-right: 12px;
    padding-left: 12px;
  }

  .ksg-services-hero-shell {
    border-radius: 24px;
  }

  .ksg-services-hero-layout {
    padding: 30px 18px 24px;
  }

  .ksg-services-hero h1 {
    max-width: 100%;
    margin-top: 20px;
    font-size: clamp(34px, 9.2vw, 42px) !important;
    line-height: 1.075 !important;
  }

  .ksg-services-hero-lead {
    margin-top: 16px;
    font-size: 14.5px !important;
    line-height: 1.58 !important;
  }

  .ksg-services-hero-stage {
    margin-top: 26px;
  }

  .ksg-services-visual {
    gap: 11px;
  }

  .ksg-services-core {
    width: min(62vw, 214px) !important;
    height: min(62vw, 214px) !important;
    margin-bottom: 18px;
  }

  .ksg-services-core strong {
    font-size: 22px !important;
  }

  .ksg-services-node,
  .ksg-services-node.is-top,
  .ksg-services-node.is-top-right,
  .ksg-services-node.is-right,
  .ksg-services-node.is-bottom-right,
  .ksg-services-node.is-bottom,
  .ksg-services-node.is-bottom-left,
  .ksg-services-node.is-top-left {
    min-height: 86px !important;
    padding: 13px 12px !important;
    gap: 10px;
    border-radius: 16px;
  }

  .ksg-services-node-icon,
  .ksg-services-node:hover .ksg-services-node-icon,
  .ksg-services-node:focus-visible .ksg-services-node-icon,
  .ksg-services-node.is-active .ksg-services-node-icon {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px;
    border-radius: 12px;
  }

  .ksg-services-node-icon svg {
    width: 26px !important;
    height: 26px !important;
  }

  .ksg-services-node-label {
    font-size: 13.5px !important;
  }
}

@media (max-width: 359.98px) {
  .ksg-services-hero-layout {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ksg-services-visual {
    grid-template-columns: 1fr;
  }

  .ksg-services-node.is-top-left {
    grid-column: auto !important;
  }

  .ksg-services-hero h1 {
    font-size: 31px !important;
  }
}
/* --------------------------------------------------------------------------
   Production QA 2026-08-25 — related service card geometry
   Reserve enough space for the scope list and keep every slide the same height.
   -------------------------------------------------------------------------- */
.ksg-related-carousel .swiper-wrapper {
  align-items: stretch;
}

.ksg-related-carousel .swiper-slide {
  display: flex;
  height: auto;
}

.ksg-related-carousel .ksg-related-grid-card {
  width: 100%;
  min-height: 570px;
  height: 100%;
  padding-bottom: 250px;
}

.ksg-related-carousel .ksg-related-grid-card .cardImage {
  height: 320px;
}

.ksg-related-carousel .ksg-related-grid-card .cardInfo {
  width: 100%;
  min-height: 250px;
  height: 250px;
  padding: 24px 28px 22px;
}

.ksg-related-carousel .ksg-related-grid-card .cardInfo h5 {
  min-height: 54px;
  margin-bottom: 8px !important;
}

.ksg-related-carousel .ksg-related-scope-titles {
  display: -webkit-box;
  min-height: 92px;
  max-height: 92px;
  margin: 0;
  overflow: hidden;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.ksg-related-carousel .ksg-related-grid-card .box-button {
  margin-top: auto !important;
  padding-top: 12px;
}

@media (max-width: 1199.98px) {
  .ksg-related-carousel .ksg-related-grid-card {
    min-height: 530px;
  }

  .ksg-related-carousel .ksg-related-grid-card .cardImage {
    height: 280px;
  }
}

@media (max-width: 767.98px) {
  .ksg-related-carousel .ksg-related-grid-card {
    min-height: 500px;
  }

  .ksg-related-carousel .ksg-related-grid-card .cardImage {
    height: 250px;
  }

  .ksg-related-carousel .ksg-related-grid-card .cardInfo {
    padding-right: 22px;
    padding-left: 22px;
  }
}



/* --------------------------------------------------------------------------
   Production QA 2026-08-25 R3 — mobile related-services carousel controls.
   - Move the prev/next controls away from the card titles and place them into
     the open top-right area above the image on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .ksg-related-carousel .box-swiper {
    padding-top: 72px;
  }

  .ksg-related-carousel .box-pagination-customers {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    bottom: auto;
    inset: auto 12px auto auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    pointer-events: auto;
  }

  .ksg-related-carousel .ksg-related-prev,
  .ksg-related-carousel .ksg-related-next {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    margin-top: 0;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    box-shadow: 0 10px 24px rgba(1, 17, 59, 0.12);
  }

  .ksg-related-carousel .ksg-related-prev svg,
  .ksg-related-carousel .ksg-related-next svg {
    width: 20px;
    height: 20px;
  }
}

/* --------------------------------------------------------------------------
   Production QA 2026-08-25 R4 — related-services controls, mobile top-right.
   Controls are also placed before the slider in markup, so even if a browser
   ignores positioning they appear above the card rather than below it.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .ksg-related-carousel {
    position: relative;
    padding-top: 60px;
  }

  .ksg-related-carousel .box-swiper {
    position: static !important;
    padding-top: 0 !important;
  }

  .ksg-related-carousel .box-pagination-customers {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    inset: 0 0 auto auto !important;
    z-index: 40;
    display: flex !important;
    width: auto !important;
    height: 48px;
    margin: 0 !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    pointer-events: auto;
  }

  .ksg-related-carousel .ksg-related-prev,
  .ksg-related-carousel .ksg-related-next {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px;
    margin: 0 !important;
  }
}

/* Safe CMS rich-text formatting. Plain-text content keeps its existing wrappers; these rules apply only when editors add structure. */
.ksg-richtext>p:first-child,.ksg-richtext>h2:first-child,.ksg-richtext>h3:first-child,.ksg-richtext>ul:first-child,.ksg-richtext>ol:first-child{margin-top:0}
.ksg-richtext>p:last-child,.ksg-richtext>h2:last-child,.ksg-richtext>h3:last-child,.ksg-richtext>ul:last-child,.ksg-richtext>ol:last-child{margin-bottom:0}
.ksg-richtext p{font:inherit;color:inherit;margin:0 0 .8em}
.ksg-richtext h2{color:inherit;font-size:1.35em;line-height:1.25;margin:1em 0 .5em}
.ksg-richtext h3{color:inherit;font-size:1.15em;line-height:1.3;margin:.9em 0 .45em}
.ksg-richtext ul,.ksg-richtext ol{margin:.65em 0 .85em;padding-left:1.3em}
.ksg-richtext li{margin:.25em 0}
.ksg-richtext a{text-decoration:underline;text-underline-offset:2px}

/* CMS-selected service scope icons use the same badge proportions as legacy SVGs. */
.ksg-scope-icon-badge > i[class^="fi-rr-"]{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  line-height:1;
}


/* --------------------------------------------------------------------------
   CMS service scalability 2026-08-27
   Preserve the approved seven-service composition. When the Services CMS gains
   additional published services, place them on an adaptive orbit; for very high
   counts switch to a readable grid instead of allowing cards/spokes to collide.
   -------------------------------------------------------------------------- */
.ksg-services-node.is-dynamic-orbit {
  left: var(--ksg-node-left, 54%);
  top: var(--ksg-node-top, 50%);
  transform: translate(-50%, -50%) scale(var(--node-scale));
}

.ksg-services-visual.is-dense-services .ksg-services-node {
  width: 132px;
  min-height: 88px;
  padding: 10px 9px;
}

.ksg-services-visual.is-dense-services .ksg-services-node-icon {
  width: 42px;
  height: 42px;
}

.ksg-services-visual.is-dense-services .ksg-services-node-icon svg {
  width: 25px;
  height: 25px;
}

.ksg-services-visual.is-dense-services .ksg-services-node-label {
  font-size: 10.5px;
  line-height: 1.18;
}

@media (min-width: 992px) {
  .ksg-services-visual.is-many-services {
    display: grid;
    height: 576px;
    padding: 22px 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: center;
    gap: 10px 12px;
    overflow: auto;
  }

  .ksg-services-visual.is-many-services .ksg-services-spokes,
  .ksg-services-visual.is-many-services .ksg-services-gridline,
  .ksg-services-visual.is-many-services .ksg-services-radial,
  .ksg-services-visual.is-many-services .ksg-services-route,
  .ksg-services-visual.is-many-services .ksg-services-orbit-ring {
    display: none !important;
  }

  .ksg-services-visual.is-many-services .ksg-services-core {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-column: 1 / -1;
    width: 148px !important;
    height: 148px !important;
    margin: 0 auto 6px;
    padding: 18px !important;
    transform: none !important;
  }

  .ksg-services-visual.is-many-services .ksg-services-core strong {
    font-size: 17px !important;
  }

  .ksg-services-visual.is-many-services .ksg-services-node,
  .ksg-services-visual.is-many-services .ksg-services-node.is-dynamic-orbit {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-height: 66px !important;
    padding: 8px 10px !important;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    text-align: left;
    transform: none !important;
  }

  .ksg-services-visual.is-many-services .ksg-services-node:hover,
  .ksg-services-visual.is-many-services .ksg-services-node:focus-visible,
  .ksg-services-visual.is-many-services .ksg-services-node.is-active {
    transform: translateY(-2px) !important;
  }

  .ksg-services-visual.is-many-services .ksg-services-node-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
    margin: 0;
  }

  .ksg-services-visual.is-many-services .ksg-services-node-label {
    max-width: none !important;
    font-size: 10.5px !important;
    text-align: left;
  }
}

@media (max-width: 991.98px) {
  .ksg-services-node.is-dynamic-orbit {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0;
    grid-column: auto !important;
    transform: none !important;
  }
}

/* New CMS services may use their uploaded service icon in the scalable hero.
   The original seven hero icons remain the approved inline SVG set. */
.ksg-services-node-icon-img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ksg-services-visual.is-dense-services .ksg-services-node-icon-img {
  width: 25px;
  height: 25px;
}
@media (min-width: 992px) {
  .ksg-services-visual.is-many-services .ksg-services-node-icon-img {
    width: 24px;
    height: 24px;
  }
}

/* --------------------------------------------------------------------------
   Service detail support/process spacing fix — 2026-08-27
   Remove the desktop-only excess space below the How We Support / Regional
   Service Coordination composition without affecting other page sections.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .ksg-service-support-process {
    min-height: 0;
    padding-bottom: 35px !important;
  }
}

/* --------------------------------------------------------------------------
   Service detail → Other Services top-gap fix v4 — 2026-08-27
   A later legacy rule forces .ksg-related-theme back to 110px with !important,
   overriding the renderer's pt-* utility. Keep a normal section breathing room
   without the large empty white band on desktop.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #other-services.ksg-related-theme {
    padding-top: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   Service detail diagonal seam fix v5 — 2026-08-27
   Chrome can antialias the clipped transition exactly on the section bottom,
   leaving a 1px horizontal seam where the diagonal meets the next section.
   Extend only the decorative pseudo-element below the clipped parent; the
   section itself keeps the same dimensions and overflow:hidden crops the extra.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .ksg-service-support-process .box-image-touch::before {
    height: calc(100% + 2px);
  }
}

/* --------------------------------------------------------------------------
   Services overview catalogue alignment — 2026-09-01.
   The catalogue now reuses the exact homepage service-card component. Keep the
   page-specific stylesheet from adding its legacy grid top offset so spacing,
   image proportions, hover reveal and responsive behaviour stay identical.
   -------------------------------------------------------------------------- */
.ksg-services-overview-catalog .ksg-services-grid {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   Service detail FAQ — image-free editorial redesign (2026-09-01)
   Approved direction: no photography. Left column carries section context,
   three CMS-driven benefits and CTA; right column is a numbered accordion.
   -------------------------------------------------------------------------- */
.ksg-faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 90px;
  background:
    linear-gradient(180deg, #fbfcff 0%, #f7f9fc 100%);
}

.ksg-faq::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 42px;
  right: -18px;
  width: 190px;
  height: 190px;
  opacity: .42;
  background-image: radial-gradient(circle, rgba(111, 133, 178, .34) 1.4px, transparent 1.5px);
  background-size: 14px 14px;
  pointer-events: none;
}

.ksg-faq::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -210px;
  bottom: -245px;
  width: 580px;
  height: 580px;
  border: 1px solid rgba(111, 133, 178, .14);
  border-radius: 50%;
  box-shadow:
    0 0 0 32px rgba(111, 133, 178, .035),
    0 0 0 64px rgba(111, 133, 178, .03),
    0 0 0 96px rgba(111, 133, 178, .025),
    0 0 0 128px rgba(111, 133, 178, .02);
  pointer-events: none;
}

.ksg-faq .ksg-faq-shell {
  position: relative;
  z-index: 1;
}

.ksg-faq .ksg-faq-copy-column,
.ksg-faq .ksg-faq-accordion-column {
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}

.ksg-faq .ksg-faq-copy-column {
  border-right: 1px solid #e1e7f0;
}

.ksg-faq .ksg-faq-copy {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 2px 66px 2px 24px;
}

.ksg-faq .ksg-faq-eyebrow {
  position: relative;
  display: inline-flex;
  width: fit-content;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 26px;
  color: #53627e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.ksg-faq .ksg-faq-eyebrow::after {
  content: "";
  width: 38px;
  height: 2px;
  background: #01113b;
}

.ksg-faq .ksg-faq-copy h2 {
  max-width: 540px;
  margin: 0 0 24px;
  color: #01113b;
  font-size: clamp(40px, 3.25vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.ksg-faq .ksg-faq-intro {
  max-width: 500px;
  margin: 0 0 30px;
  color: #58657a;
  font-size: 17px;
  line-height: 1.75;
}

.ksg-faq .ksg-faq-intro > :last-child {
  margin-bottom: 0;
}

.ksg-faq .ksg-faq-benefits {
  width: 100%;
  max-width: 500px;
  margin-top: 2px;
}

.ksg-faq .ksg-faq-benefit {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid #e1e7f0;
}

.ksg-faq .ksg-faq-benefit:first-child {
  padding-top: 4px;
}

.ksg-faq .ksg-faq-benefit:last-child {
  border-bottom: 0;
}

.ksg-faq .ksg-faq-benefit-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  color: #01113b;
  background: rgba(255, 255, 255, .72);
  border: 1px solid #d8e0ec;
  border-radius: 50%;
}

.ksg-faq .ksg-faq-benefit-icon svg {
  width: 27px;
  height: 27px;
}

.ksg-faq .ksg-faq-benefit-copy h3 {
  margin: 0 0 4px;
  color: #01113b;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.ksg-faq .ksg-faq-benefit-copy p {
  margin: 0;
  color: #677388;
  font-size: 13px;
  line-height: 1.55;
}

.ksg-faq .ksg-faq-cta {
  width: 100%;
  max-width: 500px;
  margin-top: auto;
  padding-top: 24px;
}

.ksg-faq .ksg-faq-cta-kicker {
  display: block;
  margin-bottom: 10px;
  color: #667287;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.ksg-faq .ksg-faq-cta-button {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 26px;
  color: #fff !important;
  background: #01113b;
  border: 1px solid #01113b;
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(1, 17, 59, .10);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none !important;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.ksg-faq .ksg-faq-cta-button:hover,
.ksg-faq .ksg-faq-cta-button:focus-visible {
  color: #fff !important;
  background: #081a49;
  box-shadow: 0 18px 36px rgba(1, 17, 59, .16);
  transform: translateY(-2px);
}

.ksg-faq .ksg-faq-cta-button .ksg-arrow,
.ksg-faq .ksg-faq-cta-button .ksg-arrow svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.ksg-faq .ksg-faq-accordion-column {
  padding: 2px 24px 2px 66px;
}

.ksg-faq .box-accordion {
  width: 100%;
  height: auto;
}

.ksg-faq .accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ksg-faq .accordion-item {
  overflow: hidden;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #dfe5ee !important;
  border-radius: 7px !important;
  box-shadow: 0 7px 22px rgba(1, 17, 59, .035);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ksg-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-top: 3px solid #01113b !important;
  box-shadow: 0 12px 30px rgba(1, 17, 59, .065);
}

.ksg-faq .accordion-header {
  margin: 0;
}

.ksg-faq .accordion .accordion-button {
  display: grid;
  min-height: 80px;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  color: #01113b !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
}

.ksg-faq .accordion .accordion-button:hover,
.ksg-faq .accordion .accordion-button:focus-visible,
.ksg-faq .accordion .accordion-button:not(.collapsed):hover,
.ksg-faq .accordion .accordion-button:not(.collapsed):focus-visible {
  color: #01113b !important;
  background: #fbfcff !important;
  box-shadow: none !important;
}

.ksg-faq .accordion .accordion-button:focus-visible {
  outline: 3px solid rgba(111, 133, 178, .24);
  outline-offset: -3px;
}

.ksg-faq .accordion .accordion-button::after,
.ksg-faq .accordion .accordion-button:not(.collapsed)::after {
  content: "+";
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  margin: 0;
  color: #01113b;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  transform: none;
}

.ksg-faq .accordion .accordion-button:not(.collapsed)::after {
  content: "−";
}

.ksg-faq .ksg-faq-index {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: #01113b;
  background: #f0f3f8;
  border: 1px solid #e4e9f1;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.ksg-faq .accordion-button:not(.collapsed) .ksg-faq-index {
  color: #fff;
  background: #01113b;
  border-color: #01113b;
}

.ksg-faq .ksg-faq-question {
  display: block;
  min-width: 0;
}

.ksg-faq .accordion-collapse {
  background: #fff;
}

.ksg-faq .accordion-body {
  padding: 0 70px 28px 84px;
  color: #4f5d72;
  font-size: 15px;
  line-height: 1.8;
}

.ksg-faq .accordion-body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1199.98px) {
  .ksg-faq {
    padding: 82px 0 78px;
  }

  .ksg-faq .ksg-faq-copy {
    padding-right: 42px;
  }

  .ksg-faq .ksg-faq-accordion-column {
    padding-left: 42px;
  }

  .ksg-faq .ksg-faq-copy h2 {
    font-size: 44px;
  }

  .ksg-faq .accordion .accordion-button {
    font-size: 17px;
  }
}

@media (max-width: 991.98px) {
  .ksg-faq {
    padding: 70px 0 66px;
  }

  .ksg-faq .ksg-faq-copy-column {
    border-right: 0;
    border-bottom: 1px solid #e1e7f0;
  }

  .ksg-faq .ksg-faq-copy {
    padding: 0 8px 46px;
  }

  .ksg-faq .ksg-faq-copy h2,
  .ksg-faq .ksg-faq-intro,
  .ksg-faq .ksg-faq-benefits,
  .ksg-faq .ksg-faq-cta {
    max-width: none;
  }

  .ksg-faq .ksg-faq-cta {
    margin-top: 8px;
  }

  .ksg-faq .ksg-faq-accordion-column {
    padding: 46px 8px 0;
  }
}

@media (max-width: 767.98px) {
  .ksg-faq {
    padding: 58px 0 56px;
  }

  .ksg-faq::before {
    right: -70px;
  }

  .ksg-faq .ksg-faq-copy {
    padding-right: 0;
    padding-left: 0;
  }

  .ksg-faq .ksg-faq-eyebrow {
    margin-bottom: 20px;
    font-size: 11px;
    letter-spacing: .18em;
  }

  .ksg-faq .ksg-faq-copy h2 {
    margin-bottom: 18px;
    font-size: clamp(34px, 9vw, 42px);
  }

  .ksg-faq .ksg-faq-intro {
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.65;
  }

  .ksg-faq .ksg-faq-benefit {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding: 13px 0;
  }

  .ksg-faq .ksg-faq-benefit-icon {
    width: 50px;
    height: 50px;
  }

  .ksg-faq .ksg-faq-benefit-icon svg {
    width: 24px;
    height: 24px;
  }

  .ksg-faq .ksg-faq-cta-button {
    min-height: 62px;
    padding: 16px 20px;
  }

  .ksg-faq .ksg-faq-accordion-column {
    padding-right: 0;
    padding-left: 0;
  }

  .ksg-faq .accordion {
    gap: 10px;
  }

  .ksg-faq .accordion .accordion-button {
    min-height: 72px;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    gap: 13px;
    padding: 16px;
    font-size: 16px;
  }

  .ksg-faq .ksg-faq-index {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .ksg-faq .accordion-body {
    padding: 0 18px 24px 67px;
    font-size: 14px;
    line-height: 1.7;
  }
}

@media (max-width: 575.98px) {
  .ksg-faq {
    padding: 50px 0;
  }

  .ksg-faq .ksg-faq-copy h2 {
    font-size: 34px;
  }

  .ksg-faq .ksg-faq-benefit-copy h3 {
    font-size: 15px;
  }

  .ksg-faq .ksg-faq-benefit-copy p {
    font-size: 12.5px;
  }

  .ksg-faq .ksg-faq-accordion-column {
    padding-top: 38px;
  }

  .ksg-faq .accordion .accordion-button {
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    gap: 11px;
    padding: 14px 13px;
    font-size: 15px;
  }

  .ksg-faq .ksg-faq-index {
    width: 32px;
    height: 32px;
    border-radius: 4px;
  }

  .ksg-faq .accordion-body {
    padding: 0 14px 21px 58px;
  }
}

/* --------------------------------------------------------------------------
   Services overview request form v4 — homepage-inspired, image-free shell.
   IMPORTANT: only the existing Services Overview fields are rendered. No
   homepage-only customer/country/vessel/cargo fields are introduced here.
   -------------------------------------------------------------------------- */
.ksg-service-request.ksg-service-request--centered {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(70, 104, 170, .20), transparent 30%),
    radial-gradient(circle at 18% 88%, rgba(91, 124, 186, .15), transparent 34%),
    linear-gradient(135deg, #03133a 0%, #061b4b 48%, #06163b 100%);
}

.ksg-service-request.ksg-service-request--centered::before,
.ksg-service-request.ksg-service-request--centered::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.ksg-service-request.ksg-service-request--centered::before {
  left: -8%;
  bottom: -150px;
  width: 58%;
  height: 360px;
  opacity: .22;
  background:
    repeating-radial-gradient(ellipse at 18% 100%, transparent 0 17px, rgba(173, 195, 231, .45) 18px 19px, transparent 20px 31px);
  transform: rotate(-4deg);
}

.ksg-service-request.ksg-service-request--centered::after {
  left: 0;
  right: 0;
  top: 116px;
  width: 100%;
  height: 250px;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(196, 211, 238, .70) 1.25px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 10%, transparent 24%, transparent 76%, #000 90%, #000 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 10%, transparent 24%, transparent 76%, #000 90%, #000 100%);
}

.ksg-service-request--centered .container {
  position: relative;
  z-index: 1;
}

.ksg-service-request--centered .ksg-service-request-head {
  width: min(850px, 100%);
  margin: 0 auto 38px;
}

.ksg-service-request--centered .ksg-service-request-head h2 {
  margin-inline: auto;
  color: #fff !important;
  font-size: clamp(40px, 3.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.ksg-service-request--centered .ksg-service-request-head .ksg-richtext {
  width: min(760px, 100%);
  margin-inline: auto;
  color: rgba(255, 255, 255, .86) !important;
  line-height: 1.65;
}

.ksg-service-request--centered .ksg-service-request-form--wide {
  display: block;
  width: min(1180px, 100%);
  height: auto;
  margin: 0 auto !important;
  padding: 38px 38px 32px;
  overflow: visible;
  color: var(--ksg-primary);
  background: #fff !important;
  border: 1px solid rgba(1, 17, 59, .10);
  border-radius: 16px;
  box-shadow: 0 28px 78px rgba(0, 8, 31, .28);
}

.ksg-service-request--centered .ksg-service-request-form--wide::before {
  display: none;
}

.ksg-service-request--centered .ksg-service-request-grid {
  position: relative;
  z-index: 1;
  --bs-gutter-x: 26px;
  --bs-gutter-y: 22px;
  margin-top: calc(-1 * var(--bs-gutter-y));
}

.ksg-service-request--centered .ksg-service-request-grid > * {
  margin-top: var(--bs-gutter-y);
}

.ksg-service-request--centered .ksg-service-request-form label {
  display: block;
  margin-bottom: 8px;
  color: #061638;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.ksg-service-request--centered .ksg-service-request-form .form-control {
  width: 100%;
  min-height: 52px;
  padding: 12px 15px;
  color: #061638;
  background: #fff;
  border: 1px solid #d7e0ec;
  border-radius: 6px;
  box-shadow: none;
}

.ksg-service-request--centered .ksg-service-request-form select.form-control {
  cursor: pointer;
}

.ksg-service-request--centered .ksg-service-request-form textarea.form-control {
  min-height: 145px;
  resize: vertical;
}

.ksg-service-request--centered .ksg-service-request-form .form-control:hover {
  border-color: #c2cedd;
}

.ksg-service-request--centered .ksg-service-request-form .form-control:focus {
  background: #fff;
  border-color: rgba(1, 52, 132, .52);
  box-shadow: 0 0 0 3px rgba(1, 52, 132, .08);
}

.ksg-service-request--centered .ksg-service-request-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  padding-top: 6px;
  text-align: center;
}

.ksg-service-request--centered .ksg-service-request-actions .btn-brand-1-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 198px;
  min-height: 50px;
  margin: 0;
  padding: 12px 24px;
  border-radius: 5px;
}

.ksg-service-request--centered .ksg-service-request-actions .btn-brand-1-big .ksg-arrow,
.ksg-service-request--centered .ksg-service-request-actions .btn-link-medium .ksg-arrow {
  width: 18px;
  height: 18px;
}

.ksg-service-request--centered .ksg-service-request-actions .btn-link-medium {
  margin: 0 !important;
  color: var(--ksg-primary);
  font-weight: 750;
}

.ksg-service-request--centered .ksg-service-request-actions .ksg-form-status {
  flex: 1 0 100%;
  width: 100%;
  margin: 0 !important;
  padding: 10px 12px 0;
  text-align: center;
}

@media (max-width: 991.98px) {
  .ksg-service-request--centered .ksg-service-request-form--wide {
    padding: 32px 28px 28px;
  }
}

@media (max-width: 767.98px) {
  .ksg-service-request.ksg-service-request--centered {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  .ksg-service-request--centered .ksg-service-request-head {
    margin-bottom: 30px;
  }

  .ksg-service-request--centered .ksg-service-request-head h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .ksg-service-request--centered .ksg-service-request-form--wide {
    padding: 26px 20px 22px;
    border-radius: 12px;
  }

  .ksg-service-request--centered .ksg-service-request-grid {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 18px;
  }

  .ksg-service-request--centered .ksg-service-request-form textarea.form-control {
    min-height: 130px;
  }

  .ksg-service-request--centered .ksg-service-request-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ksg-service-request--centered .ksg-service-request-actions .btn-brand-1-big,
  .ksg-service-request--centered .ksg-service-request-actions .btn-link-medium {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-request--centered .ksg-service-request-form--wide {
    padding: 22px 16px 18px;
  }

  .ksg-service-request--centered .ksg-service-request-form .form-control {
    min-height: 50px;
  }
}

/* --------------------------------------------------------------------------
   Service detail refinement v16 — lift the intro copy slightly on desktop and
   add the same compact support-note + pill CTA pattern used on the About page.
   Shared renderer means this applies consistently to every service detail page.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .ksg-service-intro-copy {
    transform: translateY(-28px);
  }
}

.ksg-service-intro-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
}

.ksg-service-intro-support {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 270px;
  margin: 0;
  padding: 0;
}

.ksg-service-intro-support p {
  margin: 0;
  color: #687589;
  font-size: 13px;
  line-height: 19px;
}

.ksg-service-intro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 18px;
  min-width: 220px;
  min-height: 48px;
  margin-left: auto;
  padding: 13px 20px;
  border: 1px solid #01113b;
  border-radius: 999px;
  background: #01113b;
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.ksg-service-intro-btn:hover,
.ksg-service-intro-btn:focus {
  transform: translateY(-1px);
  border-color: #6f85b2;
  background: #6f85b2;
  color: #fff !important;
}

.ksg-service-intro-btn .ksg-arrow,
.ksg-service-intro-btn .ksg-arrow svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .ksg-service-intro-copy {
    transform: translateY(-20px);
  }

  .ksg-service-intro-actions {
    gap: 14px;
  }

  .ksg-service-intro-btn {
    min-width: 200px;
  }
}

@media (max-width: 991.98px) {
  .ksg-service-intro-copy {
    transform: none;
  }

  .ksg-service-intro-actions {
    margin-top: 24px;
  }
}

@media (max-width: 575.98px) {
  .ksg-service-intro-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ksg-service-intro-support {
    max-width: none;
  }

  .ksg-service-intro-btn {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
}