/* ===== Consultancy steps layout ===== */
.svc-steps { padding-block: 36px 24px; }
.steps-grid{
  /* grid of 6 tiles; adjust at breakpoints */
  --tile: 168px;                 /* tile (square) size */
  --row-extra: 112px;            /* space reserved for text if needed */
  display:grid;
  grid-template-columns: repeat(6, minmax(160px,1fr));
  gap: 36px 24px;
  position:relative;
  align-items:start;
  /* make each grid row tall enough to hold the tile; we’ll position text inside so
     extra height can be small */
  grid-auto-rows: calc(var(--tile) + 8px);
}

/* tile shell */
.step-card{
  position:relative;
  height: calc(var(--tile) + 8px);           /* just the tile height */
}
.step-card .neo-tile{
  width: var(--tile);
  height: var(--tile);
  margin-inline:auto;
  border-radius: 28px;
  background: linear-gradient(180deg,#fff 0%,#f3f6fb 60%,#e9eef6 100%);
  box-shadow:
      12px 12px 28px rgba(46,61,95,.12),
     -10px -10px 24px rgba(255,255,255,.85),
      inset 0 2px 0 rgba(255,255,255,.65),
      inset 0 -3px 16px rgba(46,61,95,.08);
  position:relative;
  z-index:2;                                  /* above the arrow */
}

/* place h3 + p INSIDE the tile */
.step-card h3,
.step-card p{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width: 80%;
  text-align:center;
  margin:0;
  z-index:3;                                   /* over the tile surface */
  color:#0c2349;
}
.step-card h3{
  bottom: 120px;                                /* inside tile */
  font-weight:800;
  font-size: 16px;
  letter-spacing:.02em;
}
.step-card p{
  bottom: 60px;                                /* inside tile */
  font-size: 13px;
  line-height: 1.35;
 
}


.svc-icon {
  width: 64px; 
  height : 64px;  ;
}

/* ------- FLOW ARROW (centered behind tiles) ------- */
.flow-arrow::after{
  content:"";
  position:absolute;
  /* Center the line vertically through the tiles */
  top: calc(var(--tile)/2);
  left: 2%;
  width: 96%;
  height: 14px;
  background: linear-gradient(90deg,#ff7e5f,#feb47b,#86a8e7,#91eae4);
  border-radius: 10px;
  transform: translateY(-50%);
  z-index:0;                                   /* behind tiles */
  filter: drop-shadow(0 6px 10px rgba(46,61,95,.10));
}
/* arrow head */
.flow-arrow::before{
  content:"";
  position:absolute;
  top: calc(var(--tile)/2);
  right: 0.5%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 32px solid #91eae4;
  z-index:1;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px){
  .steps-grid{ grid-template-columns: repeat(3,minmax(180px,1fr)); row-gap: 44px; }
  .flow-arrow::after, .flow-arrow::before{ display:none; } /* hide long arrow on stacked layout */
}
@media (max-width: 640px){
  .steps-grid{ grid-template-columns: repeat(2,minmax(160px,1fr)); }
  .step-card h3{ bottom: 50px; font-size:15px; }
  .step-card p{ bottom: 14px; font-size:12px; }
}



/* === ISO / CCM Ring Flow =============================== */
.iso-ring{
  /* size scales nicely with viewport while staying sane */
  --size: clamp(240px, 36vw, 440px);
  --thick: 16px;                 /* ring thickness */
  --n: 6;                        /* number of steps (match HTML) */

  position: relative;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 28px rgba(15,23,42,.10));
}

/* base ring + animated gradient flow */
.iso-ring .ring-track{
  position: absolute; inset: 0;
  border-radius: 50%;
  /* soft substrate */
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.75) 0 58%, transparent 60%),
    radial-gradient(circle at 50% 50%, #e9edf6 62%, #dbe2ee 62.1% 64%, transparent 64.2%);
}
.iso-ring .ring-track::after{
  /* multi-color flow band */
  content:"";
  position:absolute; inset: 0;
  border-radius:50%;
  /* the colored band is drawn with conic-gradient, then masked to the ring thickness */
  background:
    conic-gradient(from 90deg,
      #4facfe, #00f2fe, #38f9d7, #43e97b, #fbd72b, #f7797d, #4facfe);
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(50% - var(--thick)), #000 calc(50% - var(--thick) + 1px));
  mask:
    radial-gradient(farthest-side, transparent calc(50% - var(--thick)), #000 calc(50% - var(--thick) + 1px));

  animation: ringFlow 10s linear infinite;
  opacity: .85;
}
@keyframes ringFlow { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .iso-ring .ring-track::after { animation: none; }
}

/* tiny orbiting dots to suggest sub-steps between main steps */
.iso-ring .ring-orbit{
  position:absolute; inset:0;
}
.iso-ring .ring-orbit span{
  --dots: 12;                    /* how many small dots we render */
  position:absolute; inset:0;
  width: 6px; height: 6px;
  margin:auto;                    /* center */
  border-radius:50%;
  background: #8fb3ff;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85) inset,
    0 2px 6px rgba(31,41,55,.25);
  transform:
    rotate(calc(var(--k) * (360deg / var(--dots))))
    translate(calc(var(--size)/2 - 18px))
    rotate(calc(var(--k) * -1 * (360deg / var(--dots))));
  opacity:.75;
}

/* step chips around the ring */
.iso-ring .step{
  --r: calc(var(--size)/2 - 44px);     /* radius where chips sit */
  --angle: calc((360deg / var(--n)) * var(--i));
  position:absolute;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transform:
    rotate(var(--angle))
    translate(var(--r))
    rotate(calc(var(--angle) * -1));    /* keep upright */
  background: none; border:0; padding:0; cursor: default;
}
.iso-ring .step .ic{
  width:54px; height:54px; border-radius:14px;
  display:grid; place-items:center;
  font-size:22px;
  background: linear-gradient(145deg,#f9fafc,#e7edf7);
  box-shadow:
    8px 8px 16px rgba(46,61,95,.12),
   -6px -6px 12px rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .25s ease, box-shadow .25s ease;
}
.iso-ring .step em{
  font-style:normal;
  font-size:12px;
  font-weight:700;
  color:#2d3440;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  pointer-events:none;
}

/* hover micro-interaction */
.iso-ring .step:hover .ic{
  transform: translateY(-2px);
  box-shadow:
    10px 14px 22px rgba(46,61,95,.16),
    -8px -8px 14px rgba(255,255,255,.95),
    inset 0 2px 0 rgba(255,255,255,.85);
}

/* caption in the center */
.iso-ring .ring-caption{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:#76839b;
  pointer-events:none;
}