.process-section {
  min-height: 100vh;
  background: #262626;
  padding: 40px 34px 34px;

  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.process-title {
  margin-top: 0;
}

.process-grid {
  margin-top: 44px;

  min-height: calc(100vh - 170px);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));

  gap: 22px;
}

.process-step {
  text-align: center;
  margin-top: 44px;
}

.process-step h3 {
  width: 100%;
  text-align: center;
  transform: none;
}

.process-step {
  position: relative;
  min-width: 0;
}

.process-number {
  display: block;

  font-family: 'Noto Sans Georgian', sans-serif;
  font-size: 14px;
  font-weight: 600;

  color: #598560;
}

.process-step h3 {
  margin: 12px 0 0;

  font-family: 'Noto Sans Georgian', sans-serif;
  font-size: 22px;
  font-weight: 600;

  color: rgba(255, 255, 255, 0.92);
}

.process-visual {
  height: 220px;
}

.process-step .process-number {
  text-align: left;
  padding-left: 13.5%;
}

.process-step h3 {
  transform: translateX(-5%);
}



/* ===============================
   PROCESS 01 — REQUEST / CONSULT
   =============================== */

.process-visual-1 {
  position: relative;
}

.process-animation-01 {
  width: 100%;
  height: 100%;
  display: block;
}


/* Panel */

.process-a1-panel {
  fill: #2e2e2e;
  stroke: #4a4a4a;
  stroke-width: 1.5;
}

.process-a1-content-line {
  stroke: #666;
  stroke-width: 1.55;
  stroke-linecap: round;
}

.process-a1-label {
  fill: #7a7a7a;

  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;

  letter-spacing: 0.02em;
}

.process-a1-dot {
  fill: #598560;
}

.process-a1-connector {
  fill: none;

  stroke: #598560;
  stroke-width: 1.7;
  stroke-linecap: round;
}


/* Animation */

.process-visual-1.is-playing .process-a1-client {
  animation:
    processA1Client
    0.516s
    cubic-bezier(.22, 1, .36, 1)
    both;
}

.process-visual-1.is-playing .process-a1-webline {
  animation:
    processA1Webline
    0.43s
    cubic-bezier(.22, 1, .36, 1)
    0.48s
    both;
}

.process-visual-1.is-playing .process-a1-connector {
  stroke-dasharray: 136;
  stroke-dashoffset: 136;

  animation:
    processA1Connector
    0.264s
    ease-out
    0.864s
    forwards;
}


@keyframes processA1Client {
  from {
    opacity: 0;
    transform: translateX(-72px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


@keyframes processA1Webline {
  from {
    opacity: 0;
    transform: translateX(72px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


@keyframes processA1Connector {
  from {
    stroke-dashoffset: 136;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* Step 01 alignment */




/* ===============================
   PROCESS 02 — RESEARCH / ANALYSIS
   =============================== */

.process-visual-2 {
  position: relative;
}

.process-animation-02 {
  width: 100%;
  height: 100%;
  display: block;
}


/* Globe */

.process-a2-globe-line {
  fill: none;
  stroke: #404040;
  stroke-width: 1.35;
}

.process-a2-globe-soft {
  fill: none;
  stroke: #373737;
  stroke-width: 1.15;
}


/* Outer scan ring */

.process-a2-scan-ring {
  fill: none;
  stroke: #598560;
  stroke-width: 1.2;
  opacity: 0;
}


/* Magnifying glass */

.process-a2-magnifier {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;
}

.process-a2-mag-lens {
  fill: rgba(89, 133, 96, 0.055);

  stroke: #598560;
  stroke-width: 2.1;
}

.process-a2-mag-handle {
  stroke: #598560;
  stroke-width: 2.1;
  stroke-linecap: round;
}


/* Animation */

.process-visual-2.is-playing
.process-a2-scan-ring {
  animation:
    processA2Ring
    3.2s
    ease
    1.05s
    both;
}

.process-visual-2.is-playing
.process-a2-magnifier {
  animation:
    processA2Scan
    2.55s
    linear
    1.05s
    both;
}


@keyframes processA2Ring {

  0% {
    opacity: 0;
  }

  8% {
    opacity: 0.34;
  }

  78% {
    opacity: 0.34;
  }

  100% {
    opacity: 0;
  }

}


@keyframes processA2Scan {

  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  4% {
    opacity: 1;
    transform: translate(0, 0);
  }

  16% {
    transform: translate(-6px, 25px);
  }

  29% {
    transform: translate(-21px, 49px);
  }

  42% {
    transform: translate(24px, 34px);
  }

  56% {
    transform: translate(51px, 7px);
  }

  68% {
    transform: translate(71px, 29px);
  }

  81% {
    transform: translate(78px, 73px);
  }

  92% {
    opacity: 1;
    transform: translate(57px, 103px);
  }

  100% {
    opacity: 0;
    transform: translate(42px, 121px);
  }

}


/* ===============================
   PROCESS 03 — PLANNING
   LOCKED VERSION
   =============================== */

.process-visual-3 {
  position: relative;
}

.process-animation-03 {
  width: 100%;
  height: 100%;
  display: block;
}


/* Blueprint */

.process-a3-grid {
  opacity: 0;
}

.process-a3-grid-box,
.process-a3-grid-line {
  fill: none;
  stroke: #333333;
  stroke-width: 1;
}


/* Modules */

.process-a3-module {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;
}

.process-a3-box {
  fill: rgba(255, 255, 255, 0.006);

  stroke: #4a4a4a;
  stroke-width: 1.5;
}

.process-a3-content-line {
  stroke: #5a5a5a;
  stroke-width: 1.6;
  stroke-linecap: round;
}


/* Connections */

.process-a3-connector {
  fill: none;

  stroke: #598560;
  stroke-width: 2;
  stroke-linecap: round;

  opacity: 0;
}

.process-a3-node {
  fill: #598560;
  opacity: 0;
}


/* ===============================
   MODULE ENTRANCE
   =============================== */

.process-visual-3.is-playing
.process-a3-module-1 {
  animation:
    processA3Module1
    0.66s
    cubic-bezier(.22, 1, .36, 1)
    0.18s
    both;
}

.process-visual-3.is-playing
.process-a3-module-2 {
  animation:
    processA3Module2
    0.60s
    cubic-bezier(.22, 1, .36, 1)
    0.34s
    both;
}

.process-visual-3.is-playing
.process-a3-module-3 {
  animation:
    processA3Module3
    0.54s
    cubic-bezier(.22, 1, .36, 1)
    0.48s
    both;
}

.process-visual-3.is-playing
.process-a3-module-4 {
  animation:
    processA3Module4
    0.48s
    cubic-bezier(.22, 1, .36, 1)
    0.62s
    both;
}


@keyframes processA3Module1 {

  0% {
    opacity: 0;

    transform:
      translate(-32px, -12px)
      rotate(-2.4deg);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 1;

    transform:
      translate(0, 0)
      rotate(0deg);
  }

}


@keyframes processA3Module2 {

  0% {
    opacity: 0;

    transform:
      translate(32px, -16px)
      rotate(2.4deg);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 1;

    transform:
      translate(0, 0)
      rotate(0deg);
  }

}


@keyframes processA3Module3 {

  0% {
    opacity: 0;

    transform:
      translate(-39px, 22px)
      rotate(3deg);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 1;

    transform:
      translate(0, 0)
      rotate(0deg);
  }

}


@keyframes processA3Module4 {

  0% {
    opacity: 0;

    transform:
      translate(47px, 18px)
      rotate(-3deg);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 1;

    transform:
      translate(0, 0)
      rotate(0deg);
  }

}


/* ===============================
   BLUEPRINT APPEARS
   =============================== */

.process-visual-3.is-playing
.process-a3-grid {
  animation:
    processA3Grid
    0.32s
    ease
    0.66s
    both;
}


@keyframes processA3Grid {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* ===============================
   GREEN CONNECTIONS
   =============================== */

.process-a3-top-left,
.process-a3-bottom-left {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}

.process-a3-top-right,
.process-a3-bottom-right {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}

.process-a3-vertical {
  stroke-dasharray: 94;
  stroke-dashoffset: 94;
}


.process-visual-3.is-playing
.process-a3-top-left,
.process-visual-3.is-playing
.process-a3-bottom-left {
  animation:
    processA3DrawShort
    220ms
    ease
    1.22s
    forwards;
}

.process-visual-3.is-playing
.process-a3-top-right {
  animation:
    processA3DrawShort
    220ms
    ease
    1.30s
    forwards;
}

.process-visual-3.is-playing
.process-a3-vertical {
  animation:
    processA3DrawVertical
    300ms
    ease
    1.35s
    forwards;
}

.process-visual-3.is-playing
.process-a3-bottom-right {
  animation:
    processA3DrawShort
    220ms
    ease
    1.42s
    forwards;
}


@keyframes processA3DrawShort {

  0% {
    opacity: 1;
    stroke-dashoffset: 36;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

}


@keyframes processA3DrawVertical {

  0% {
    opacity: 1;
    stroke-dashoffset: 94;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

}


/* ===============================
   JUNCTION NODES
   =============================== */

.process-visual-3.is-playing
.process-a3-node-1 {
  animation:
    processA3Node
    0.18s
    ease
    1.78s
    forwards;
}

.process-visual-3.is-playing
.process-a3-node-2 {
  animation:
    processA3Node
    0.18s
    ease
    1.92s
    forwards;
}


@keyframes processA3Node {

  0% {
    opacity: 0;
    transform: scale(.45);
    transform-origin: center;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    transform-origin: center;
  }

}


/* ===============================
   PROCESS 04 — DESIGN
   LOCKED VERSION
   =============================== */

.process-visual-4 {
  position: relative;
}

.process-animation-04 {
  width: 100%;
  height: 100%;
  display: block;
}


/* Shapes */

.process-a4-shape {
  fill: none;
  stroke: #474747;
  stroke-width: 1.6;
}


/* Brush */

.process-a4-brush {
  opacity: 0;

  transform-box: view-box;
  transform-origin: 0 0;
}

.process-a4-handle {
  fill: #598560;
}

.process-a4-ferrule {
  fill: #777b78;
}

.process-a4-tip {
  fill: #355a3e;
}


/* ===============================
   LOCKED BRUSH MOVEMENT
   =============================== */

.process-visual-4.is-playing
.process-a4-brush {
  animation:
    processA4Brush
    2.75s
    linear
    1.08s
    both;
}


@keyframes processA4Brush {

  0% {
    opacity: 0;

    transform:
      translate(338px, 151px)
      rotate(-14deg);
  }

  5% {
    opacity: 1;

    transform:
      translate(338px, 151px)
      rotate(-14deg);
  }

  16% {
    transform:
      translate(344px, 181px)
      rotate(-10deg);
  }

  29% {
    transform:
      translate(350px, 219px)
      rotate(-7deg);
  }

  39% {
    transform:
      translate(345px, 236px)
      rotate(-4deg);
  }

  48% {
    transform:
      translate(463px, 180px)
      rotate(-2deg);
  }

  60% {
    transform:
      translate(466px, 218px)
      rotate(0deg);
  }

  70% {
    transform:
      translate(500px, 207px)
      rotate(5deg);
  }

  79% {
    transform:
      translate(506px, 177px)
      rotate(8deg);
  }

  87% {
    transform:
      translate(602px, 169px)
      rotate(12deg);
  }

  95% {
    opacity: 1;

    transform:
      translate(597px, 194px)
      rotate(12deg);
  }

  100% {
    opacity: 0;

    transform:
      translate(597px, 194px)
      rotate(12deg);
  }

}

/* ===============================
   PROCESS 05 — DEVELOPMENT / TEST
   LOCKED VERSION
   =============================== */

.process-visual-5 {
  position: relative;
}

.process-animation-05 {
  width: 100%;
  height: 100%;
  display: block;
}


/* Modules */

.process-a5-module {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;
}

.process-a5-box {
  fill: rgba(255, 255, 255, 0.008);

  stroke: #4a4a4a;
  stroke-width: 1.6;
}

.process-a5-content-line {
  stroke: #626262;
  stroke-width: 1.6;
  stroke-linecap: round;
}


/* Checks */

.process-a5-check {
  fill: none;

  stroke: #598560;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 58;
  stroke-dashoffset: 58;
}


/* ===============================
   MODULE ENTRANCE
   =============================== */

.process-visual-5.is-playing
.process-a5-left {
  animation:
    processA5Left
    0.624s
    cubic-bezier(.22, 1, .36, 1)
    0.096s
    both;
}

.process-visual-5.is-playing
.process-a5-center {
  animation:
    processA5Center
    0.624s
    cubic-bezier(.22, 1, .36, 1)
    0.336s
    both;
}

.process-visual-5.is-playing
.process-a5-right {
  animation:
    processA5Right
    0.624s
    cubic-bezier(.22, 1, .36, 1)
    0.576s
    both;
}


@keyframes processA5Left {

  0% {
    opacity: 0;
    transform: translateX(-75px);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }

}


@keyframes processA5Center {

  0% {
    opacity: 0;
    transform: translateY(-65px);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }

}


@keyframes processA5Right {

  0% {
    opacity: 0;
    transform: translateX(75px);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }

}


/* ===============================
   CHECKMARKS
   =============================== */

.process-visual-5.is-playing
.process-a5-check-1 {
  animation:
    processA5Check
    0.408s
    ease-out
    1.716s
    forwards;
}

.process-visual-5.is-playing
.process-a5-check-2 {
  animation:
    processA5Check
    0.408s
    ease-out
    1.944s
    forwards;
}

.process-visual-5.is-playing
.process-a5-check-3 {
  animation:
    processA5Check
    0.408s
    ease-out
    2.184s
    forwards;
}


@keyframes processA5Check {

  from {
    stroke-dashoffset: 58;
  }

  to {
    stroke-dashoffset: 0;
  }

}

/* ===============================
   PROCESS 06 — LAUNCH
   FINAL LOCKED VERSION
   =============================== */

.process-visual-6 {
  position: relative;
}

.process-animation-06 {
  width: 100%;
  height: 100%;
  display: block;
}


/* Base line */

.process-a6-base {
  stroke: #454545;
  stroke-width: 1.35;
  stroke-linecap: round;

  opacity: 0;
}


/* Launch object */

.process-a6-rocket {
  opacity: 0;

  transform-box: view-box;
  transform-origin: 471px 253px;
}

.process-a6-rocket-body {
  fill: rgba(255, 255, 255, 0.008);

  stroke: #555;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.process-a6-core {
  fill: #598560;
}


/* Trails */

.process-a6-main-trail,
.process-a6-side-trail {
  fill: none;

  stroke: #598560;
  stroke-linecap: round;

  opacity: 0;
}

.process-a6-main-trail {
  stroke-width: 2;
}

.process-a6-side-trail {
  stroke-width: 1.25;
}


/* Fixed signal circles */

.process-a6-signal {
  fill: none;

  stroke: #598560;

  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;
}

.process-a6-signal-inner {
  stroke-width: 1.35;
}

.process-a6-signal-outer {
  stroke-width: 2;
}


/* ===============================
   ANIMATION
   =============================== */

.process-visual-6.is-playing
.process-a6-base {
  animation:
    processA6Base
    0.34s
    ease-out
    0.08s
    forwards;
}


.process-visual-6.is-playing
.process-a6-rocket {
  animation:
    processA6Rocket
    1.42s
    cubic-bezier(.35, .02, .25, 1)
    0.42s
    both;
}


.process-visual-6.is-playing
.process-a6-main-trail {
  animation:
    processA6MainTrail
    0.92s
    ease-out
    0.88s
    both;
}


.process-visual-6.is-playing
.process-a6-side-left,
.process-visual-6.is-playing
.process-a6-side-right {
  animation:
    processA6SideTrail
    0.82s
    ease-out
    1.03s
    both;
}


/*
  Approved circle timing:
  circles appear earlier.
*/

.process-visual-6.is-playing
.process-a6-signal-inner {
  animation:
    processA6RingInner
    0.80s
    ease-out
    1.62s
    both;
}

.process-visual-6.is-playing
.process-a6-signal-outer {
  animation:
    processA6RingOuter
    0.88s
    ease-out
    1.70s
    both;
}


/* ===============================
   BASE
   =============================== */

@keyframes processA6Base {

  0% {
    opacity: 0;

    stroke-dasharray: 300;
    stroke-dashoffset: 300;
  }

  100% {
    opacity: 1;

    stroke-dasharray: 300;
    stroke-dashoffset: 0;
  }

}


/* ===============================
   ROCKET
   Final jump + fly out + disappear
   =============================== */

@keyframes processA6Rocket {

  0% {
    opacity: 0;
    transform: translateY(48px);
  }

  8% {
    opacity: 1;
  }

  72% {
    opacity: 1;
    transform: translateY(-92px);
  }

  84% {
    opacity: 1;
    transform: translateY(-112px);
  }

  92% {
    opacity: 1;
    transform: translateY(-155px);
  }

  98% {
    opacity: 1;
    transform: translateY(-230px);
  }

  100% {
    opacity: 0;
    transform: translateY(-248px);
  }

}


/* ===============================
   TRAILS
   =============================== */

@keyframes processA6MainTrail {

  0% {
    opacity: 0;

    stroke-dasharray: 78;
    stroke-dashoffset: 78;
  }

  18% {
    opacity: 0.82;
  }

  68% {
    opacity: 0.82;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

}


@keyframes processA6SideTrail {

  0% {
    opacity: 0;

    stroke-dasharray: 76;
    stroke-dashoffset: 76;
  }

  22% {
    opacity: 0.34;
  }

  70% {
    opacity: 0.34;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

}


/* ===============================
   FIXED SIGNAL CIRCLES
   =============================== */

@keyframes processA6RingInner {

  0% {
    opacity: 0;
    transform: scale(.24);
  }

  16% {
    opacity: .55;
  }

  100% {
    opacity: 0;
    transform: scale(1.72);
  }

}


@keyframes processA6RingOuter {

  0% {
    opacity: 0;
    transform: scale(.18);
  }

  18% {
    opacity: .68;
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }

}

.process-step-2 h3 {
  transform: translateX(5px);
}

.process-step-3 h3 {
  transform: translateX(-4px);
}

.process-step-4 h3 {
  transform: translateX(2px);
}

.process-step-5 h3 {
  transform: translateX(-2px);
}

.process-step-6 h3 {
  transform: translateX(1px);
}

/* ===============================
   ENGLISH PROCESS TYPOGRAPHY
   =============================== */

html[lang="en"] .process-title .brand-primary {
  font-family: 'Nunito Sans', sans-serif;
}

html[lang="en"] .process-number,
html[lang="en"] .process-step h3 {
  font-family: 'Inter', sans-serif;
}

/* Smaller desktop — Process vertical fit */
@media (min-width: 1025px) and (max-width: 1500px) {

  .process-step {
    margin-top: 37px;   /* 44px → 16% smaller */
  }

  .process-visual {
    height: 185px;      /* 220px → ~16% smaller */
  }

  .process-number {
    font-size: 12px;    /* 14px → ~14% smaller */
  }

  .process-step h3 {
    margin-top: 10px;
    font-size: 18.5px;  /* 22px → ~16% smaller */
  }
}

/* ===============================
   TABLET PROCESS — 1024px
   Keep approved composition, only smaller
   =============================== */

@media (max-width: 1024px) {

  .process-step {
    margin-top: 37px;
  }

  .process-visual {
    height: 185px;
  }

  .process-number {
    font-size: 12px;
  }

  .process-step h3 {
    margin-top: 10px;
    font-size: 18.5px;
  }

}


/* Real tablet landscape — Process */
@media (hover: none) and (pointer: coarse)
       and (min-width: 1025px)
       and (max-width: 1366px)
       and (max-height: 700px) {

  .process-section {
    padding-top: 30px;
    padding-bottom: 24px;
  }

  .process-grid {
    margin-top: 28px;
    gap: 14px;
  }

  .process-step {
    margin-top: 20px;
  }

  .process-visual {
    height: 135px;
  }

  .process-number {
    font-size: 11px;
  }

  .process-step h3 {
    margin-top: 7px;
    font-size: 16px;
  }

}

@media (min-width: 769px) and (max-width: 900px) {

  .process-step {
    margin-top: 20px;
  }

  .process-visual {
    height: 150px;
  }

}

/* 768 portrait tablet — smaller Process titles */
@media (min-width: 700px) and (max-width: 768px) {

  .process-step h3 {
    font-size: 14px;
    line-height: 1.25;
  }

}

/* 800 portrait tablet — move Process composition down */
@media (min-width: 769px) and (max-width: 820px) {

  .process-grid {
    transform: translateY(70px);
  }

}

/* ===============================
   430 MOBILE — PROCESS
   2 columns × 3 rows
   =============================== */

@media (max-width: 430.99px) {

  .process-section {
    padding:
      26px
      18px
      24px;
  }


  /* Grid */

  .process-grid {
    margin-top: 28px;

    min-height: calc(100vh - 120px);

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

    grid-template-rows:
      repeat(3, minmax(0, 1fr));

    column-gap: 44px;
    row-gap: 10px;
  }


  /* Individual steps */

  .process-step {
    margin-top: 0;

    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }


  /* Numbers */

  .process-step .process-number {
    padding-left: 8%;

    font-size: 10px;
  }


  /* Animation area */

  .process-visual {
    height: 145px;

    transform: scale(1.10);
    transform-origin: center center;
  }


  /* Titles */

  .process-step h3 {
    margin-top: 4px;

    font-size: 12px;
    line-height: 1.22;

    transform: none;
  }


  /* Reset old individual desktop title offsets */

  .process-step-2 h3,
  .process-step-3 h3,
  .process-step-4 h3,
  .process-step-5 h3,
  .process-step-6 h3 {
    transform: none;
  }
}

/* ===============================
   360 SHORT MOBILE — PROCESS
   Galaxy S22
   =============================== */

@media (min-width: 350px) and (max-width: 364px) and (max-height: 700px) {

  .process-section {
    padding:
      24px
      14px
      18px;
  }

  .process-grid {
    margin-top: 20px;

    min-height: 0;

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

    grid-template-rows:
      repeat(3, 1fr);

    column-gap: 10px;
    row-gap: 6px;
  }

  .process-step {
    margin-top: 0;
  }

  .process-step .process-number {
    padding-left: 6%;
    font-size: 9px;
  }

  .process-visual {
    height: 108px;

    transform: scale(1);
    transform-origin: center center;
  }

  .process-step h3 {
    margin-top: 2px;

    font-size: 11px;
    line-height: 1.2;

    transform: none;
  }

  .process-step-2 h3,
  .process-step-3 h3,
  .process-step-4 h3,
  .process-step-5 h3,
  .process-step-6 h3 {
    transform: none;
  }

}

/* ===============================
   375 SHORT MOBILE — SERVICES
   =============================== */

@media (min-width: 365px) and (max-width: 380px) and (max-height: 700px) {

  .services-section {
    padding-top: 24px;
    padding-bottom: 18px;
  }

  .services-layout {
    margin-top: 52px;

    grid-auto-rows: 88px;

    gap: 10px;
  }

  .service-card {
    padding: 10px 11px;
    border-radius: 12px;
  }

  .service-card-title {
    font-size: 11px;
    line-height: 1.22;
  }

  .service-card-9 {
    grid-column: 1 / 3 !important;

    width: calc(50% - 5px);

    justify-self: center;
  }

}
/* ===============================
   375 SHORT MOBILE — PROCESS
   =============================== */

@media (min-width: 365px) and (max-width: 380px) and (max-height: 700px) {

  .process-section {
    padding:
      24px
      14px
      18px;
  }

  .process-grid {
    margin-top: 30px;

    min-height: 0;

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

    grid-template-rows:
      repeat(3, 1fr);

    column-gap: 10px;
    row-gap: 6px;
  }

  .process-step {
    margin-top: 0;
  }

  .process-step .process-number {
    padding-left: 6%;
    font-size: 9px;
  }

  .process-visual {
    height: 108px;

    transform: scale(1);
    transform-origin: center center;
  }

  .process-step h3 {
    margin-top: 2px;

    font-size: 11px;
    line-height: 1.2;

    transform: none;
  }

  .process-step-2 h3,
  .process-step-3 h3,
  .process-step-4 h3,
  .process-step-5 h3,
  .process-step-6 h3 {
    transform: none;
  }

}

/* ===============================
   384 / 390 SHORT MOBILE — PROCESS
   =============================== */

@media (min-width: 381px) and (max-width: 400px) and (max-height: 700px) {

  .process-section {
    padding:
      24px
      14px
      18px;
  }

  .process-grid {
    margin-top: 20px;

    min-height: 0;

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

    grid-template-rows:
      repeat(3, 1fr);

    column-gap: 10px;
    row-gap: 6px;
  }

  .process-step {
    margin-top: 0;
  }

  .process-step .process-number {
    padding-left: 6%;
    font-size: 9px;
  }

  .process-visual {
    height: 108px;

    transform: scale(1);
    transform-origin: center center;
  }

  .process-step h3 {
    margin-top: 20px;

    font-size: 11px;
    line-height: 1.2;

    transform: none;
  }

  .process-step-2 h3,
  .process-step-3 h3,
  .process-step-4 h3,
  .process-step-5 h3,
  .process-step-6 h3 {
    transform: none;
  }

}