/* =========================================================
   Section: Expertise  ( .s-expertise )
   ========================================================= */

.s-expertise {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* fallback solid colour if gradients fail */
  background-color: var(--c-primary);
  background-image: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary) 100%);
  color: var(--c-on-primary);
  padding-block: clamp(64px, 9vw, 128px);
  text-align: center;
  /* subtle ink edge that keeps glyphs legible on every screen side */
  --s-expertise-ink: 0 1px 2px color-mix(in srgb, var(--c-accent) 45%, transparent);
}

/* soft glow layer — kept faint so white text keeps >= 4.5:1 contrast */
.s-expertise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(72% 58% at 50% 0%, var(--c-secondary) 0%, transparent 62%);
  opacity: 0.16;
}

.s-expertise::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  z-index: -1;
  background: var(--c-secondary);
  opacity: 0.35;
}

.s-expertise > .container {
  position: relative;
  z-index: 1;
}

.s-expertise__inner {
  max-inline-size: 940px;
  margin-inline: auto;
  text-align: center;
}

/* ---------- Heading ---------- */
.s-expertise__heading {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--c-on-primary);
  text-shadow: var(--s-expertise-ink);
  text-wrap: balance;
}

/* ---------- Subheading ---------- */
.s-expertise__subheading {
  margin: 0;
  margin-block-start: clamp(20px, 2.6vw, 36px);
  font-family: var(--font-head);
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.005em;
  color: var(--c-on-primary);
  text-shadow: var(--s-expertise-ink);
  text-wrap: balance;
}

/* ---------- Body ---------- */
.s-expertise__body {
  max-inline-size: 740px;
  margin-inline: auto;
  margin-block: 0;
  margin-block-start: clamp(20px, 2.6vw, 36px);
  font-family: var(--font-body);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.005em;
  color: var(--c-on-primary);
  opacity: 1;
  text-shadow: var(--s-expertise-ink);
  text-wrap: pretty;
}

/* ---------- Globe illustration (sharp, no crop / no upscale) ---------- */
.s-expertise .s-expertise__visual {
  display: block;
  inline-size: fit-content;
  max-inline-size: min(880px, 100%);
  margin: 0 auto;
  margin-block-start: clamp(40px, 6vw, 72px);
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
  background-color: transparent;
  box-shadow: var(--shadow-md);
  /* hairline edge that reads on the blue field */
  outline: 1px solid var(--c-secondary);
  outline-offset: -1px;
  /* never inherit a blur filter (e.g. from reveal animation) */
  filter: none;
}

.s-expertise__visual img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
  image-rendering: -webkit-optimize-contrast;
  filter: none;
  backface-visibility: visible;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .s-expertise {
    padding-block: clamp(56px, 10vw, 88px);
  }

  .s-expertise__inner {
    max-inline-size: 100%;
  }

  .s-expertise .s-expertise__visual {
    max-inline-size: 100%;
    border-radius: var(--radius);
  }
}

@media (max-width: 600px) {
  .s-expertise {
    padding-block: clamp(48px, 12vw, 64px);
  }

  .s-expertise__heading {
    font-size: clamp(28px, 8.6vw, 36px);
    line-height: 1.28;
  }

  .s-expertise__subheading {
    margin-block-start: 18px;
    font-size: clamp(22px, 6.6vw, 28px);
  }

  .s-expertise__body {
    margin-block-start: 18px;
    font-size: clamp(17.5px, 4.9vw, 19px);
    line-height: 1.72;
    max-inline-size: 100%;
  }

  .s-expertise .s-expertise__visual {
    margin-block-start: 32px;
  }
}