
/* CIMYCO v3.2.0 — VISUAL INTEGRATION
   Objective: make imagery belong to the editorial composition, not sit inside frames.
*/

:root{
  --v320-bg:#031326;
  --v320-blue:#58aef8;
  --v320-line:rgba(88,174,248,.13);
}

/* ---------- EXPERTISES : editorial image integration ---------- */

.expertise-story{
  position:relative !important;
  overflow:hidden !important;
  border-top:0 !important;
  padding-block:96px !important;
}

.expertise-story + .expertise-story::before{
  content:"";
  position:absolute;
  top:0;
  left:4%;
  right:4%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--v320-line),transparent);
}

.expertise-story .story-sticky{
  display:grid !important;
  grid-template-columns:minmax(380px,.82fr) minmax(580px,1.18fr) !important;
  gap:clamp(42px,5vw,88px) !important;
  align-items:center !important;
}

.expertise-story .story-copy{
  position:relative;
  z-index:3;
  align-self:center !important;
  padding:0 !important;
}

/* Visual is no longer a card */
.expertise-story .expertise-visual-v307{
  position:relative !important;
  z-index:1;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Blend the image into the page background */
.expertise-story .expertise-visual-v307::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--v320-bg) 0%,rgba(3,19,38,.64) 5%,transparent 17%,transparent 86%,rgba(3,19,38,.42) 96%,var(--v320-bg) 100%),
    linear-gradient(180deg,var(--v320-bg) 0%,transparent 10%,transparent 88%,var(--v320-bg) 100%);
}

.expertise-story .expertise-visual-v307::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:auto 7% 2% 7%;
  height:18%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--v320-bg));
  display:block !important;
}

.expertise-story .expertise-visual-v307 img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  transform:none !important;
}

/* Alternate second expertise to break repetitive layout */
.expertise-story:nth-of-type(even) .story-sticky{
  grid-template-columns:minmax(580px,1.18fr) minmax(380px,.82fr) !important;
}
.expertise-story:nth-of-type(even) .story-copy{
  order:2 !important;
}
.expertise-story:nth-of-type(even) .expertise-visual-v307{
  order:1 !important;
}
.expertise-story:nth-of-type(even) .expertise-visual-v307::before{
  background:
    linear-gradient(270deg,var(--v320-bg) 0%,rgba(3,19,38,.64) 5%,transparent 17%,transparent 86%,rgba(3,19,38,.42) 96%,var(--v320-bg) 100%),
    linear-gradient(180deg,var(--v320-bg) 0%,transparent 10%,transparent 88%,var(--v320-bg) 100%);
}

/* Quiet chips */
.story-copy .chips span,
.story-copy .tags span{
  border:1px solid rgba(88,174,248,.12) !important;
  background:rgba(7,29,52,.28) !important;
  box-shadow:none !important;
}

/* ---------- EXPERTISES : soften the 'vision complete' matrix ---------- */

.vision-grid,
.capability-grid,
.expertise-overview-grid{
  border:0 !important;
  gap:10px !important;
  background:transparent !important;
}

.vision-grid > *,
.capability-grid > *,
.expertise-overview-grid > *{
  border:0 !important;
  background:linear-gradient(145deg,rgba(8,30,54,.46),rgba(5,20,38,.18)) !important;
  box-shadow:none !important;
  position:relative;
}

.vision-grid > *::after,
.capability-grid > *::after,
.expertise-overview-grid > *::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:34px;
  height:1px;
  background:rgba(88,174,248,.42);
}

/* ---------- APPROCHE : visual continuity instead of boxes ---------- */

.approach-steps,
.method-grid,
.steps-grid{
  position:relative;
  gap:0 !important;
  background:transparent !important;
  border:0 !important;
}

.approach-steps::before,
.method-grid::before,
.steps-grid::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:35px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,174,248,.42) 10%,rgba(88,174,248,.18) 90%,transparent);
  pointer-events:none;
}

.approach-steps > *,
.method-grid > *,
.steps-grid > *{
  position:relative;
  z-index:1;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.approach-steps > *:hover,
.method-grid > *:hover,
.steps-grid > *:hover{
  background:rgba(8,31,55,.20) !important;
  box-shadow:none !important;
  transform:translateY(-2px);
}

/* ---------- GLOBAL : remove remaining accidental frames ---------- */

img{
  outline:none;
}

.expertise-visual-v307,
.visual-frame,
.media-frame{
  border-color:transparent !important;
}

/* Keep separators editorial, not boxy */
.section-divider{
  opacity:.35;
}

/* ---------- MOBILE / TABLET ---------- */

@media(max-width:1100px){
  .expertise-story{
    padding-block:70px !important;
  }

  .expertise-story .story-sticky,
  .expertise-story:nth-of-type(even) .story-sticky{
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  .expertise-story .story-copy,
  .expertise-story:nth-of-type(even) .story-copy{
    order:1 !important;
    max-width:720px;
  }

  .expertise-story .expertise-visual-v307,
  .expertise-story:nth-of-type(even) .expertise-visual-v307{
    order:2 !important;
    width:min(100%,850px) !important;
    margin-inline:auto !important;
  }

  .expertise-story .expertise-visual-v307::before,
  .expertise-story:nth-of-type(even) .expertise-visual-v307::before{
    background:
      linear-gradient(90deg,var(--v320-bg),transparent 12%,transparent 88%,var(--v320-bg)),
      linear-gradient(180deg,var(--v320-bg),transparent 8%,transparent 90%,var(--v320-bg));
  }
}

@media(max-width:700px){
  .expertise-story{
    padding-block:52px !important;
  }

  .expertise-story .story-sticky,
  .expertise-story:nth-of-type(even) .story-sticky{
    gap:18px !important;
  }

  .expertise-story .expertise-visual-v307,
  .expertise-story:nth-of-type(even) .expertise-visual-v307{
    width:calc(100% + 20px) !important;
    margin-left:-10px !important;
    margin-right:-10px !important;
  }

  .expertise-story .expertise-visual-v307::before,
  .expertise-story:nth-of-type(even) .expertise-visual-v307::before{
    background:
      linear-gradient(90deg,var(--v320-bg),transparent 8%,transparent 92%,var(--v320-bg)),
      linear-gradient(180deg,var(--v320-bg),transparent 7%,transparent 91%,var(--v320-bg));
  }

  .approach-steps::before,
  .method-grid::before,
  .steps-grid::before{
    left:28px;
    right:auto;
    top:20px;
    bottom:20px;
    width:1px;
    height:auto;
    background:linear-gradient(180deg,transparent,rgba(88,174,248,.38) 8%,rgba(88,174,248,.16) 92%,transparent);
  }
}
