/* =========================================================
   SEA LICENSING — SERVICES FINAL PRECISION POLISH
   No structural/layout changes
   ========================================================= */


/* =========================================================
   1. SERVICES CARDS — STRONGER PHOTOGRAPHY
   ========================================================= */

.sv5 .sv5-card::after{
  opacity:.47 !important;

  width:64% !important;
  height:76% !important;

  filter:
    saturate(.98)
    contrast(1.01)
    brightness(1.02) !important;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.12) 13%,
      rgba(0,0,0,.54) 34%,
      #000 66%,
      #000 100%
    ) !important;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.12) 13%,
      rgba(0,0,0,.54) 34%,
      #000 66%,
      #000 100%
    ) !important;
}


.sv5 .sv5-card:hover::after{
  opacity:.63 !important;

  transform:
    scale(1.07)
    translate3d(-4px,-2px,0) !important;

  filter:
    saturate(1.06)
    contrast(1.035)
    brightness(1.03) !important;
}


/* Slightly stronger lower image presence */
.sv5 .sv5-card{
  box-shadow:
    0 14px 31px rgba(5,66,94,.052) !important;
}


.sv5 .sv5-card:hover{
  box-shadow:
    0 24px 49px rgba(4,73,102,.135) !important;
}


/* Preserve clean readable copy area */
.sv5 .sv5-card h3{
  text-shadow:
    0 1px 0 rgba(255,255,255,.75);
}


.sv5 .sv5-card p{
  color:#566f7d !important;
}



/* =========================================================
   2. DIGITAL CARDS — RICHER PHOTOS + BETTER HEIGHT
   ========================================================= */

.sv5 .sv5-digital-card{
  min-height:222px !important;

  padding:
    25px 25px 24px !important;
}


.sv5 .sv5-digital-card::after{
  width:54% !important;
  height:84% !important;

  right:-2% !important;
  bottom:-4% !important;

  opacity:.41 !important;

  filter:
    saturate(.98)
    contrast(1.01)
    brightness(1.02) !important;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.12) 16%,
      rgba(0,0,0,.60) 45%,
      #000 73%
    ) !important;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.12) 16%,
      rgba(0,0,0,.60) 45%,
      #000 73%
    ) !important;
}


.sv5 .sv5-digital-card:hover::after{
  opacity:.55 !important;

  transform:
    scale(1.06)
    translate3d(-4px,-2px,0) !important;

  filter:
    saturate(1.06)
    contrast(1.035)
    brightness(1.03) !important;
}


.sv5 .sv5-digital-card h3{
  font-size:18px !important;

  margin-top:34px !important;
}


.sv5 .sv5-digital-card p{
  max-width:56% !important;

  color:#58727f !important;

  font-size:9.5px !important;

  line-height:1.6 !important;
}


.sv5 .sv5-digital-card a{
  margin-top:22px !important;
}



/* =========================================================
   3. HOW WE WORK — PREMIUM TECHNICAL DETAIL
   ========================================================= */

.sv5 .sv5-process{
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(28,169,216,.14),
      transparent 27%
    ),

    radial-gradient(
      circle at 8% 85%,
      rgba(24,147,194,.055),
      transparent 28%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(12,127,173,.028) 0,
      rgba(12,127,173,.028) 1px,
      transparent 1px,
      transparent 44px
    ),

    repeating-linear-gradient(
      90deg,
      rgba(12,127,173,.023) 0,
      rgba(12,127,173,.023) 1px,
      transparent 1px,
      transparent 44px
    ),

    linear-gradient(
      135deg,
      #edf8fc,
      #e4f3f8
    ) !important;
}


.sv5 .sv5-process-grid{
  overflow:hidden;

  border-radius:8px;

  box-shadow:
    0 15px 34px rgba(5,71,98,.055) !important;
}


.sv5 .sv5-process-card{
  position:relative;

  overflow:hidden;

  min-height:184px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.91),
      rgba(247,252,254,.82)
    );

  isolation:isolate;
}


/* technical corner drawing */
.sv5 .sv5-process-card::before{
  content:"";

  position:absolute;

  right:-36px;
  bottom:-42px;

  width:145px;
  height:145px;

  z-index:-1;

  border:
    1px solid rgba(29,164,211,.10);

  border-radius:50%;

  box-shadow:
    0 0 0 27px rgba(29,164,211,.025),
    0 0 0 54px rgba(29,164,211,.015);

  transition:
    transform .4s ease,
    border-color .4s ease;
}


/* small navigation/technical line */
.sv5 .sv5-process-card::after{
  content:"";

  position:absolute;

  left:22px;
  right:22px;
  top:57px;

  height:1px;

  z-index:0;

  background:
    linear-gradient(
      90deg,
      rgba(27,168,216,.32),
      rgba(27,168,216,.07),
      transparent
    );
}


.sv5 .sv5-process-number{
  position:relative;

  z-index:2;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;

  border:
    1px solid rgba(28,168,215,.22);

  border-radius:50%;

  background:
    rgba(235,248,252,.86);

  font-size:13px !important;

  box-shadow:
    0 7px 17px rgba(4,92,125,.05);
}


.sv5 .sv5-process-card h3{
  position:relative;

  z-index:2;

  margin-top:30px !important;

  font-size:16px !important;
}


.sv5 .sv5-process-card p{
  position:relative;

  z-index:2;

  max-width:215px;

  color:#5c7481 !important;

  font-size:9.5px !important;

  line-height:1.6 !important;
}


.sv5 .sv5-process-card:hover{
  background:#fff !important;

  transform:
    translateY(-5px) !important;
}


.sv5 .sv5-process-card:hover::before{
  transform:scale(1.08);

  border-color:
    rgba(29,164,211,.18);
}



/* =========================================================
   4. AUDIENCE CARDS — SLIGHTLY BRIGHTER PHOTOGRAPHY
   ========================================================= */

.sv5 .sv5-audience-card.owner::before,
.sv5 .sv5-audience-card.seafarer::before{
  filter:
    saturate(1.06)
    contrast(1.035)
    brightness(1.06);

  transform:
    scale(1.01);

  transition:
    transform .6s cubic-bezier(.22,1,.36,1),
    filter .45s ease;
}


/* Preserve dark copy zone but allow more image detail on right */
.sv5 .sv5-audience-card::after{
  background:
    linear-gradient(
      90deg,
      rgba(3,43,64,.985) 0%,
      rgba(4,57,80,.91) 45%,
      rgba(4,60,83,.60) 68%,
      rgba(4,60,83,.20) 100%
    ) !important;
}


.sv5 .sv5-audience-card.seafarer::after{
  background:
    linear-gradient(
      90deg,
      rgba(3,54,76,.985) 0%,
      rgba(4,76,100,.90) 46%,
      rgba(4,78,102,.56) 70%,
      rgba(4,78,102,.16) 100%
    ) !important;
}


.sv5 .sv5-audience-card:hover::before{
  transform:
    scale(1.045);

  filter:
    saturate(1.10)
    contrast(1.05)
    brightness(1.08);
}



/* =========================================================
   5. CTA — CLEARER LIGHTHOUSE / OCEAN
   ========================================================= */

.sv5 .sv5-cta{
  background-position:
    center 28% !important;
}


.sv5 .sv5-cta::before{
  background:
    linear-gradient(
      90deg,
      rgba(3,38,58,.97) 0%,
      rgba(3,56,77,.86) 39%,
      rgba(4,75,99,.58) 61%,
      rgba(4,81,106,.19) 100%
    ) !important;
}


.sv5 .sv5-cta::after{
  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at 73% 48%,
      rgba(255,203,117,.13),
      transparent 22%
    );
}



/* =========================================================
   6. MICRO POLISH
   ========================================================= */

/* slightly stronger section divider */
.sv5 .sv5-divider span::before,
.sv5 .sv5-divider span::after{
  opacity:.85;
}


/* smoother interactive elements */
.sv5 .sv5-card,
.sv5 .sv5-digital-card,
.sv5 .sv5-audience-card,
.sv5 .sv5-process-card{
  will-change:transform;
}


/* Do not overdo mobile imagery */
@media(max-width:850px){

  .sv5 .sv5-card::after{
    opacity:.39 !important;
  }

  .sv5 .sv5-digital-card::after{
    opacity:.34 !important;
  }

}


@media(max-width:560px){

  .sv5 .sv5-card::after{
    opacity:.31 !important;
  }

  .sv5 .sv5-digital-card::after{
    opacity:.27 !important;
  }

}


/* =========================================================
   SERVICES CTA — FINAL CLEAN LIGHTHOUSE
   ========================================================= */

.sv5 .sv5-cta{
  background-image:
    url("/assets/images/services/final/services-cta-lighthouse-clean.webp") !important;

  background-size:
    cover !important;

  background-position:
    center center !important;

  background-repeat:
    no-repeat !important;
}


/* Dark left side for HTML text, clear lighthouse on right */
.sv5 .sv5-cta::before{
  background:
    linear-gradient(
      90deg,
      rgba(3,38,58,.98) 0%,
      rgba(3,44,64,.94) 28%,
      rgba(3,56,76,.74) 48%,
      rgba(3,67,88,.36) 67%,
      rgba(3,73,94,.08) 100%
    ) !important;
}


/* =========================================================
   SERVICES CTA — PREMIUM BUTTON HOVER
   ========================================================= */

.sv5 .sv5-cta .sv5-btn.primary{
  position: relative;
  overflow: hidden;

  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .28s ease,
    background .28s ease !important;

  box-shadow:
    0 10px 24px rgba(0, 125, 183, .24) !important;
}


/* light sweep */
.sv5 .sv5-cta .sv5-btn.primary::before{
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,.28) 50%,
      transparent 100%
    );

  transform: skewX(-18deg);

  transition:
    left .48s ease;

  pointer-events: none;
}


/* hover */
.sv5 .sv5-cta .sv5-btn.primary:hover{
  transform:
    translateY(-4px)
    scale(1.025) !important;

  background:
    linear-gradient(
      135deg,
      #19a6df,
      #34c4ea
    ) !important;

  box-shadow:
    0 17px 36px rgba(0, 132, 190, .36),
    0 0 0 1px rgba(255,255,255,.14) inset !important;
}


.sv5 .sv5-cta .sv5-btn.primary:hover::before{
  left: 145%;
}


/* active press */
.sv5 .sv5-cta .sv5-btn.primary:active{
  transform:
    translateY(-1px)
    scale(.99) !important;

  box-shadow:
    0 8px 18px rgba(0, 115, 170, .26) !important;
}


/* keyboard focus */
.sv5 .sv5-cta .sv5-btn.primary:focus-visible{
  outline:
    3px solid rgba(101, 219, 248, .45);

  outline-offset:
    3px;
}


/* =========================================================
   SERVICES HERO — START A REQUEST PREMIUM HOVER
   ========================================================= */

.sv5 .sv5-hero .sv5-btn.primary{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  transition:
    transform .30s cubic-bezier(.22,1,.36,1),
    box-shadow .30s ease,
    background .30s ease,
    letter-spacing .30s ease !important;

  box-shadow:
    0 10px 24px rgba(5,136,196,.23) !important;
}


/* glossy sweep */
.sv5 .sv5-hero .sv5-btn.primary::before{
  content: "";

  position: absolute;
  top: -20%;
  left: -75%;

  width: 48%;
  height: 140%;

  z-index: -1;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,.08) 25%,
      rgba(255,255,255,.42) 50%,
      rgba(255,255,255,.08) 75%,
      transparent 100%
    );

  transform: skewX(-20deg);

  transition:
    left .52s cubic-bezier(.22,1,.36,1);

  pointer-events: none;
}


/* hover state */
.sv5 .sv5-hero .sv5-btn.primary:hover{
  transform:
    translateY(-4px)
    scale(1.035) !important;

  background:
    linear-gradient(
      135deg,
      #08a3e0 0%,
      #39c9ef 100%
    ) !important;

  box-shadow:
    0 18px 38px rgba(4,150,211,.35),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 26px rgba(63,205,241,.17) !important;

  letter-spacing:
    .015em;
}


/* sweep across */
.sv5 .sv5-hero .sv5-btn.primary:hover::before{
  left: 132%;
}


/* pressed */
.sv5 .sv5-hero .sv5-btn.primary:active{
  transform:
    translateY(-1px)
    scale(.99) !important;

  box-shadow:
    0 8px 18px rgba(3,126,184,.25) !important;
}


/* keyboard */
.sv5 .sv5-hero .sv5-btn.primary:focus-visible{
  outline:
    3px solid rgba(91,219,248,.45);

  outline-offset:
    4px;
}


/* =========================================================
   DIGITAL ECOSYSTEM — PREMIUM MARITIME TEXTURE
   ========================================================= */

.sv5 .sv5-digital{
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:

    /* soft cyan light — upper right */
    radial-gradient(
      ellipse at 88% 13%,
      rgba(42,176,220,.14) 0%,
      rgba(42,176,220,.055) 26%,
      transparent 52%
    ),

    /* soft ocean light — lower left */
    radial-gradient(
      ellipse at 11% 92%,
      rgba(24,142,194,.09) 0%,
      transparent 38%
    ),

    /* diagonal maritime drafting lines */
    repeating-linear-gradient(
      135deg,
      rgba(28,139,187,.045) 0,
      rgba(28,139,187,.045) 1px,
      transparent 1px,
      transparent 52px
    ),

    /* horizontal grid */
    repeating-linear-gradient(
      0deg,
      rgba(21,127,171,.032) 0,
      rgba(21,127,171,.032) 1px,
      transparent 1px,
      transparent 86px
    ),

    /* vertical grid */
    repeating-linear-gradient(
      90deg,
      rgba(21,127,171,.028) 0,
      rgba(21,127,171,.028) 1px,
      transparent 1px,
      transparent 86px
    ),

    linear-gradient(
      180deg,
      #fbfdfe 0%,
      #f1f8fb 100%
    ) !important;
}


/* large technical/navigation circles */
.sv5 .sv5-digital::before{
  content: "" !important;

  position: absolute !important;

  width: 720px !important;
  height: 720px !important;

  right: -300px !important;
  top: -330px !important;

  z-index: -1 !important;

  border:
    1px solid rgba(31,158,207,.105) !important;

  border-radius:
    50% !important;

  box-shadow:
    0 0 0 74px rgba(31,158,207,.020),
    0 0 0 148px rgba(31,158,207,.012) !important;

  pointer-events:
    none !important;
}


/* sweeping ocean / route line */
.sv5 .sv5-digital::after{
  content: "" !important;

  position: absolute !important;

  left: -9% !important;
  bottom: 18px !important;

  width: 118% !important;
  height: 250px !important;

  z-index: -1 !important;

  border-top:
    1px solid rgba(24,148,196,.095) !important;

  border-radius:
    50% !important;

  transform:
    rotate(-2.8deg) !important;

  box-shadow:
    0 -42px 0 -41px rgba(24,148,196,.055) !important;

  pointer-events:
    none !important;
}


/* keep content above texture */
.sv5 .sv5-digital > .shell{
  position: relative !important;
  z-index: 2 !important;
}



/* =========================================================
   DIGITAL CARDS — PREMIUM DEFAULT STATE
   ========================================================= */

.sv5 .sv5-digital-card{
  border:
    1px solid rgba(176,211,225,.88) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.985) 0%,
      rgba(246,251,253,.965) 100%
    ) !important;

  box-shadow:
    0 10px 26px rgba(5,67,94,.045) !important;

  transform:
    translate3d(0,0,0);

  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    border-color .35s ease,
    box-shadow .42s ease,
    background .35s ease !important;
}


/* subtle cyan line along top */
.sv5 .sv5-digital-card{
  border-top-color:
    rgba(55,171,216,.30) !important;
}


/* photograph slightly stronger by default */
.sv5 .sv5-digital-card::after{
  opacity:
    .43 !important;

  filter:
    saturate(.98)
    contrast(1.015)
    brightness(1.02) !important;

  transition:
    transform .50s cubic-bezier(.22,1,.36,1),
    opacity .38s ease,
    filter .38s ease !important;
}



/* =========================================================
   DIGITAL CARD — HOVER
   ========================================================= */

.sv5 .sv5-digital-card:hover{
  transform:
    translateY(-9px)
    scale(1.012) !important;

  border-color:
    rgba(37,174,220,.58) !important;

  border-top-color:
    rgba(41,190,231,.90) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f1faff 100%
    ) !important;

  box-shadow:
    0 25px 52px rgba(5,78,108,.14),
    0 0 0 1px rgba(61,189,229,.055) inset !important;
}


/* image becomes clearer + gently zooms */
.sv5 .sv5-digital-card:hover::after{
  opacity:
    .62 !important;

  transform:
    scale(1.075)
    translate3d(-5px,-3px,0) !important;

  filter:
    saturate(1.08)
    contrast(1.04)
    brightness(1.035) !important;
}


/* kicker brightens */
.sv5 .sv5-digital-card:hover
.sv5-digital-label{
  color:
    #079dd3 !important;

  letter-spacing:
    .17em !important;
}


/* headline transition */
.sv5 .sv5-digital-card h3{
  transition:
    color .28s ease,
    transform .28s ease !important;
}


.sv5 .sv5-digital-card:hover h3{
  color:
    #057da9 !important;

  transform:
    translateX(3px);
}


/* CTA text moves right */
.sv5 .sv5-digital-card a{
  position: relative;

  transition:
    color .28s ease,
    transform .28s ease,
    letter-spacing .28s ease !important;
}


.sv5 .sv5-digital-card:hover a{
  color:
    #029bd3 !important;

  transform:
    translateX(5px);

  letter-spacing:
    .045em;
}


/* little arrow movement */
.sv5 .sv5-digital-card a::after{
  content: "→";

  margin-left: 5px;

  display: inline-block;

  transition:
    transform .28s ease;
}


.sv5 .sv5-digital-card:hover a::after{
  transform:
    translateX(4px);
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:850px){

  .sv5 .sv5-digital::before{
    opacity:
      .58;
  }

  .sv5 .sv5-digital::after{
    opacity:
      .55;
  }

  .sv5 .sv5-digital-card:hover{
    transform:
      translateY(-5px) !important;
  }

}


/* accessibility */
@media(prefers-reduced-motion:reduce){

  .sv5 .sv5-digital-card,
  .sv5 .sv5-digital-card::after,
  .sv5 .sv5-digital-card h3,
  .sv5 .sv5-digital-card a,
  .sv5 .sv5-digital-card a::after{
    transition:
      none !important;
  }

  .sv5 .sv5-digital-card:hover{
    transform:
      none !important;
  }

}


/* =========================================================
   PROCESS → DIGITAL
   PREMIUM MARITIME SECTION SEPARATOR
   ========================================================= */

.sv5 .sv5-flow-separator{
  position: relative;

  height: 86px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #e7f5fa 0%,
      #f5fbfd 47%,
      #ffffff 100%
    );
}


/* very subtle glow behind center */
.sv5 .sv5-flow-separator::before{
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 310px;
  height: 70px;

  transform:
    translate(-50%,-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(51,188,229,.12) 0%,
      rgba(51,188,229,.035) 43%,
      transparent 72%
    );

  pointer-events: none;
}


/* subtle curved maritime route beneath */
.sv5 .sv5-flow-separator::after{
  content: "";

  position: absolute;

  width: 520px;
  height: 100px;

  left: 50%;
  bottom: -82px;

  transform:
    translateX(-50%);

  border:
    1px solid rgba(27,158,207,.10);

  border-radius:
    50%;

  pointer-events: none;
}


/* LEFT + RIGHT ROUTE LINES */

.sv5 .sv5-flow-line{
  position: relative;

  width: min(20vw, 280px);
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(40,164,210,.19),
      rgba(40,174,218,.48)
    );
}


.sv5 .sv5-flow-line.right{
  transform:
    scaleX(-1);
}


/* route dots */
.sv5 .sv5-flow-line i{
  position: absolute;

  top: 50%;

  width: 4px;
  height: 4px;

  margin-top: -2px;

  border-radius: 50%;

  background:
    #4bc7e8;

  box-shadow:
    0 0 0 4px rgba(75,199,232,.08);
}


.sv5 .sv5-flow-line i:nth-child(1){
  right: 26%;
}


.sv5 .sv5-flow-line i:nth-child(2){
  right: 7%;
}


/* CENTER */

.sv5 .sv5-flow-center{
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    0 6px;

  white-space:
    nowrap;
}


.sv5 .sv5-flow-node{
  position: relative;

  width: 14px;
  height: 14px;

  flex: 0 0 14px;

  transform:
    rotate(45deg);

  border:
    1px solid rgba(25,169,216,.72);

  background:
    #f7fdff;

  box-shadow:
    0 0 0 5px rgba(31,178,222,.06);
}


/* inner diamond */
.sv5 .sv5-flow-node::after{
  content: "";

  position: absolute;

  width: 4px;
  height: 4px;

  left: 4px;
  top: 4px;

  background:
    #29b7df;
}


.sv5 .sv5-flow-center small{
  color:
    #289bc5;

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .19em;

  text-transform:
    uppercase;
}


/* subtle motion on desktop */
@media (hover:hover){

  .sv5 .sv5-flow-separator:hover
  .sv5-flow-node{
    transform:
      rotate(225deg);

    transition:
      transform .65s cubic-bezier(.22,1,.36,1);
  }


  .sv5 .sv5-flow-separator:hover
  .sv5-flow-line{
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(40,164,210,.27),
        rgba(40,190,227,.70)
      );
  }

}


/* MOBILE */

@media(max-width:700px){

  .sv5 .sv5-flow-separator{
    height:
      70px;

    gap:
      10px;
  }


  .sv5 .sv5-flow-line{
    width:
      15vw;
  }


  .sv5 .sv5-flow-line i:nth-child(1){
    display:
      none;
  }


  .sv5 .sv5-flow-center small{
    font-size:
      7px;

    letter-spacing:
      .13em;
  }

}


/* =========================================================
   PROCESS → DIGITAL
   CLEAN PREMIUM WAVE SEPARATOR
   ========================================================= */

.sv5 .sv5-flow-separator{
  position: relative !important;

  height: 70px !important;

  display: block !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      180deg,
      #e7f5fa 0%,
      #eff9fc 42%,
      #f8fcfe 100%
    ) !important;
}


/* remove old label, diamond and dots */
.sv5 .sv5-flow-center,
.sv5 .sv5-flow-line{
  display: none !important;
}


/* main sweeping maritime route */
.sv5 .sv5-flow-separator::before{
  content: "" !important;

  position: absolute !important;

  left: -2% !important;
  top: 14px !important;

  width: 104% !important;
  height: 42px !important;

  transform: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C180 8 340 8 520 36 S880 66 1080 34 S1320 6 1440 30' fill='none' stroke='%2339acd5' stroke-opacity='.24' stroke-width='1.2'/%3E%3C/svg%3E") !important;

  pointer-events: none !important;
}


/* second softer route line for depth */
.sv5 .sv5-flow-separator::after{
  content: "" !important;

  position: absolute !important;

  left: -3% !important;
  top: 23px !important;

  width: 106% !important;
  height: 39px !important;

  transform: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C220 62 390 60 570 33 S900 8 1100 36 S1325 62 1440 44' fill='none' stroke='%231f94c2' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E") !important;

  pointer-events: none !important;
}


/* very subtle cyan glow through the middle */
.sv5 .sv5-flow-separator{
  box-shadow:
    inset 0 18px 28px rgba(26,151,198,.018),
    inset 0 -18px 28px rgba(255,255,255,.65) !important;
}


@media(max-width:700px){

  .sv5 .sv5-flow-separator{
    height: 48px !important;
  }

  .sv5 .sv5-flow-separator::before{
    top: 7px !important;
    height: 34px !important;
  }

  .sv5 .sv5-flow-separator::after{
    top: 14px !important;
    height: 30px !important;
  }

}


/* =========================================================
   PROCESS → DIGITAL — FINAL INTEGRATED SEPARATOR
   ========================================================= */

.sv5 .sv5-flow-separator{
  height: 38px !important;

  position: relative !important;
  overflow: hidden !important;

  display: block !important;

  background:
    linear-gradient(
      180deg,
      #e7f5fa 0%,
      #edf8fb 44%,
      #f7fcfe 100%
    ) !important;

  box-shadow: none !important;
}


/* remove all old separator contents */
.sv5 .sv5-flow-center,
.sv5 .sv5-flow-line{
  display: none !important;
}


/* single elegant navigation curve */
.sv5 .sv5-flow-separator::before{
  content:"" !important;

  position:absolute !important;

  left:-3% !important;
  bottom:-18px !important;

  width:106% !important;
  height:44px !important;

  border:
    1px solid rgba(37,166,211,.18) !important;

  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;

  border-radius:
    50% 50% 0 0 / 100% 100% 0 0 !important;

  background:none !important;
  box-shadow:none !important;

  transform:none !important;

  pointer-events:none !important;
}


/* very faint secondary depth curve */
.sv5 .sv5-flow-separator::after{
  content:"" !important;

  position:absolute !important;

  left:-5% !important;
  bottom:-25px !important;

  width:110% !important;
  height:48px !important;

  border:
    1px solid rgba(37,166,211,.065) !important;

  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;

  border-radius:
    50% 50% 0 0 / 100% 100% 0 0 !important;

  background:none !important;
  box-shadow:none !important;

  transform:none !important;

  pointer-events:none !important;
}


/* bring Digital section closer to separator */
.sv5 .sv5-digital{
  padding-top: 66px !important;
}


@media(max-width:700px){

  .sv5 .sv5-flow-separator{
    height:30px !important;
  }

  .sv5 .sv5-digital{
    padding-top:52px !important;
  }

}


/* =========================================================
   SERVICE ARCHITECTURE — BALANCED TWO-COLUMN INTRO
   ========================================================= */

.sv5 .sv5-heading{
  max-width: none !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(320px, .75fr) !important;

  grid-template-rows:
    auto auto !important;

  column-gap:
    90px !important;

  align-items:
    center !important;
}


/* kicker remains above main heading */
.sv5 .sv5-heading > .sv5-kicker{
  grid-column:
    1 !important;

  grid-row:
    1 !important;
}


/* main title remains left */
.sv5 .sv5-heading h2{
  grid-column:
    1 !important;

  grid-row:
    2 !important;

  margin-top:
    13px !important;
}


/* descriptive paragraph moves to right */
.sv5 .sv5-heading > p{
  grid-column:
    2 !important;

  grid-row:
    2 !important;

  align-self:
    center !important;

  max-width:
    470px !important;

  margin:
    0 !important;

  padding-top:
    12px !important;

  color:
    #587381 !important;

  font-size:
    14px !important;

  line-height:
    1.72 !important;
}


/* Keep small statement above the paragraph */
.sv5 .sv5-side-note{
  position:
    static !important;

  grid-column:
    2 !important;

  grid-row:
    1 !important;

  justify-self:
    start !important;

  width:
    auto !important;

  margin:
    0 0 2px 0 !important;

  text-align:
    left !important;

  color:
    #4b91ae !important;

  font-size:
    8.5px !important;

  line-height:
    1.55 !important;

  letter-spacing:
    .14em !important;
}


/* Tablet/mobile goes back to stacked */
@media(max-width:900px){

  .sv5 .sv5-heading{
    display:
      block !important;
  }

  .sv5 .sv5-heading > p{
    max-width:
      620px !important;

    margin-top:
      18px !important;

    padding-top:
      0 !important;
  }

  .sv5 .sv5-side-note{
    display:
      none !important;
  }

}


/* =========================================================
   HOW WE WORK — BALANCED TWO-COLUMN INTRO
   ========================================================= */

.sv5 .sv5-process > .shell{
  display: grid !important;

  grid-template-columns:
    minmax(0, .82fr)
    minmax(360px, 1.18fr) !important;

  grid-template-areas:
    "kicker detail"
    "title  detail"
    "steps  steps" !important;

  column-gap:
    96px !important;

  align-items:
    end !important;
}


/* HOW WE WORK */
.sv5 .sv5-process > .shell > .sv5-kicker{
  grid-area:
    kicker !important;

  align-self:
    end !important;
}


/* Large heading stays on left */
.sv5 .sv5-process > .shell > h2{
  grid-area:
    title !important;

  max-width:
    610px !important;

  margin:
    14px 0 0 !important;
}


/* New explanatory copy on right */
.sv5 .sv5-process-intro{
  grid-area:
    detail !important;

  align-self:
    end !important;

  justify-self:
    start !important;

  max-width:
    520px !important;

  margin:
    0 0 8px 0 !important;

  color:
    #587381 !important;

  font-size:
    13px !important;

  line-height:
    1.72 !important;
}


/* Four process cards remain full width below */
.sv5 .sv5-process-grid{
  grid-area:
    steps !important;

  width:
    100% !important;

  margin-top:
    38px !important;
}


/* subtle divider above the right paragraph */
.sv5 .sv5-process-intro::before{
  content: "";

  display: block;

  width: 46px;
  height: 2px;

  margin-bottom:
    16px;

  background:
    linear-gradient(
      90deg,
      #25add8,
      rgba(37,173,216,.20)
    );
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media(max-width:900px){

  .sv5 .sv5-process > .shell{
    display:
      block !important;
  }


  .sv5 .sv5-process-intro{
    max-width:
      620px !important;

    margin-top:
      20px !important;
  }


  .sv5 .sv5-process-grid{
    margin-top:
      32px !important;
  }

}


/* =========================================================
   HOW WE WORK — FINAL LEFT / RIGHT LAYOUT
   ========================================================= */

.sv5 .sv5-process{
  padding-top: 74px !important;
  padding-bottom: 82px !important;
}


.sv5 .sv5-process > .shell{
  display: grid !important;

  grid-template-columns:
    minmax(360px,.72fr)
    minmax(0,1.28fr) !important;

  grid-template-areas:
    "kicker steps"
    "title  steps"
    "detail steps" !important;

  column-gap:
    86px !important;

  row-gap:
    0 !important;

  align-items:
    start !important;
}


/* LEFT SIDE */

.sv5 .sv5-process > .shell > .sv5-kicker{
  grid-area:
    kicker !important;

  margin:
    2px 0 0 !important;
}


.sv5 .sv5-process > .shell > h2{
  grid-area:
    title !important;

  max-width:
    560px !important;

  margin:
    15px 0 0 !important;

  font-size:
    clamp(42px,3.55vw,58px) !important;

  line-height:
    .97 !important;
}


.sv5 .sv5-process-intro{
  grid-area:
    detail !important;

  max-width:
    530px !important;

  margin:
    25px 0 0 !important;

  padding:
    0 !important;

  color:
    #587381 !important;

  font-size:
    13px !important;

  line-height:
    1.72 !important;
}


/* remove previous little line */
.sv5 .sv5-process-intro::before{
  display:
    none !important;
}



/* =========================================================
   RIGHT SIDE — 2 × 2 STEPS
   ========================================================= */

.sv5 .sv5-process-grid{
  grid-area:
    steps !important;

  width:
    100% !important;

  margin:
    0 !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:
    14px !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


/* cards */

.sv5 .sv5-process-card{
  position:
    relative !important;

  min-height:
    185px !important;

  padding:
    24px 25px !important;

  border:
    1px solid #d4e6ed !important;

  border-radius:
    8px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(247,252,254,.90)
    ) !important;

  box-shadow:
    0 12px 26px rgba(5,69,96,.045) !important;

  overflow:
    hidden !important;
}


/* number */

.sv5 .sv5-process-number{
  width:
    36px !important;

  height:
    36px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid rgba(32,169,216,.25) !important;

  border-radius:
    50% !important;

  background:
    #eff9fc !important;

  color:
    #24a8d7 !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;
}


/* heading */

.sv5 .sv5-process-card h3{
  margin:
    24px 0 0 !important;

  color:
    #09283c !important;

  font-size:
    17px !important;

  line-height:
    1.1 !important;
}


/* description */

.sv5 .sv5-process-card p{
  max-width:
    285px !important;

  margin:
    9px 0 0 !important;

  color:
    #5c7481 !important;

  font-size:
    10px !important;

  line-height:
    1.58 !important;
}


/* cleaner technical accent */

.sv5 .sv5-process-card::after{
  content:"" !important;

  position:
    absolute !important;

  right:
    -42px !important;

  bottom:
    -52px !important;

  width:
    145px !important;

  height:
    145px !important;

  border:
    1px solid rgba(34,165,211,.09) !important;

  border-radius:
    50% !important;

  background:
    none !important;

  pointer-events:
    none !important;
}


/* hover */

.sv5 .sv5-process-card{
  transition:
    transform .38s cubic-bezier(.22,1,.36,1),
    box-shadow .38s ease,
    border-color .32s ease !important;
}


.sv5 .sv5-process-card:hover{
  transform:
    translateY(-6px) !important;

  border-color:
    rgba(40,177,219,.42) !important;

  box-shadow:
    0 22px 42px rgba(5,77,107,.105) !important;
}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .sv5 .sv5-process > .shell{
    grid-template-columns:
      minmax(300px,.65fr)
      minmax(0,1.35fr) !important;

    column-gap:
      48px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:820px){

  .sv5 .sv5-process > .shell{
    display:
      block !important;
  }


  .sv5 .sv5-process-intro{
    margin-top:
      18px !important;
  }


  .sv5 .sv5-process-grid{
    margin-top:
      34px !important;

    grid-template-columns:
      1fr !important;
  }


  .sv5 .sv5-process-card{
    min-height:
      160px !important;
  }

}


/* =========================================================
   HOW WE WORK — INVERT CARD HOVER
   ========================================================= */

.sv5 .sv5-process-card{
  transition:
    transform .36s cubic-bezier(.22,1,.36,1),
    background .34s ease,
    border-color .34s ease,
    box-shadow .36s ease,
    color .34s ease !important;
}


/* inverted card */
.sv5 .sv5-process-card:hover{
  transform:
    translateY(-7px) !important;

  background:
    linear-gradient(
      135deg,
      #0a3853 0%,
      #116486 100%
    ) !important;

  border-color:
    rgba(80,213,245,.46) !important;

  box-shadow:
    0 24px 48px rgba(4,55,78,.22),
    0 0 0 1px rgba(91,220,247,.08) inset !important;
}


/* number */
.sv5 .sv5-process-card:hover
.sv5-process-number{
  color:
    #78e3f8 !important;

  background:
    rgba(255,255,255,.07) !important;

  border-color:
    rgba(120,227,248,.48) !important;

  box-shadow:
    0 0 0 5px rgba(94,218,244,.055) !important;
}


/* heading */
.sv5 .sv5-process-card:hover h3{
  color:
    #ffffff !important;
}


/* description */
.sv5 .sv5-process-card:hover p{
  color:
    rgba(239,249,252,.84) !important;
}


/* circular technical graphic becomes visible */
.sv5 .sv5-process-card:hover::after{
  border-color:
    rgba(111,222,245,.18) !important;

  box-shadow:
    0 0 0 34px rgba(91,214,240,.025),
    0 0 0 68px rgba(91,214,240,.014) !important;
}


/* small cyan accent at top */
.sv5 .sv5-process-card::before{
  content:"" !important;

  position:absolute !important;

  left:0 !important;
  right:0 !important;
  top:0 !important;

  height:3px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      #4fd6f2,
      transparent
    ) !important;

  opacity:0 !important;

  transform:
    scaleX(.45);

  transition:
    opacity .3s ease,
    transform .35s cubic-bezier(.22,1,.36,1) !important;

  pointer-events:none !important;
}


.sv5 .sv5-process-card:hover::before{
  opacity:1 !important;

  transform:
    scaleX(1);
}


/* text movement */
.sv5 .sv5-process-card h3,
.sv5 .sv5-process-card p,
.sv5 .sv5-process-number{
  transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    transform .3s ease !important;
}


.sv5 .sv5-process-card:hover h3,
.sv5 .sv5-process-card:hover p{
  transform:
    translateX(3px);
}


/* accessibility */
@media(prefers-reduced-motion:reduce){

  .sv5 .sv5-process-card,
  .sv5 .sv5-process-card::before,
  .sv5 .sv5-process-card h3,
  .sv5 .sv5-process-card p,
  .sv5 .sv5-process-number{
    transition:none !important;
  }

}