/* FightClear portfolio screenshot carousel; no global site styles changed. */
.fc-carousel { min-width: 0; }

.fc-carousel-stage { position: relative; width: 100%; min-width: 0; }

.fc-carousel-stage .fc-carousel-slide[hidden],
.fc-carousel .fc-carousel-toolbar[hidden] { display: none !important; }

.fc-carousel .fc-carousel-slide {
  width: 100%;
  margin: 0;
}

.fc-carousel .fc-carousel-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.fc-carousel-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  min-width: 0;
}

.fc-carousel-slide-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fc-carousel-position {
  margin: 0;
  color: #b4b4c3;
  font: 10px/1.5 var(--mono, monospace);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.fc-carousel-title {
  margin: 0;
  color: #f6f4ef;
  font: 500 clamp(13px, 1vw, 16px)/1.35 var(--font, sans-serif);
  letter-spacing: -.015em;
}

.fc-carousel-controls {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

.fc-carousel-arrow {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #5d5870;
  border-radius: 8px;
  background: #181821;
  color: #f6f4ef;
  font: 21px/1 sans-serif;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.fc-carousel-arrow:hover { border-color: #a49cff; background: #29263f; }
.fc-carousel-arrow:focus-visible { outline: 3px solid #a49cff; outline-offset: 3px; }
.fc-carousel-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 430px) {
  .fc-carousel-toolbar { gap: 8px; margin-top: 12px; }
  .fc-carousel-title { font-size: 13px; }
  .fc-carousel-controls { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-carousel-arrow { transition: none; }
}

@media (forced-colors: active) {
  .fc-carousel-arrow { border: 1px solid ButtonText; color: ButtonText; }
}

@media print {
  .fc-carousel-toolbar { display: none !important; }
}

/*
 * Keep the real 4K FightClear UI sharp on desktop.
 * Reuse the existing pointer-tracking --holo-* variables for interactive
 * light, border and shadow, without perspective-rotating or translating
 * the screenshot's pixels.
 */
@media (min-width: 851px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .fc-carousel.hologram-enabled .hologram-stage {
    perspective: none;
  }

  html[data-motion="on"] .fc-carousel.hologram-enabled .product-screenshot {
    transform: none;
    transform-style: flat;
    will-change: auto;
    overflow: hidden;
    border-color: #b7afffb8;
    box-shadow:
      calc(var(--holo-x, 0) * -9px)
      calc(26px - var(--holo-y, 0) * 7px)
      62px #0009,
      0 0 calc(18px + var(--holo-power, 0) * 30px) #6c63ff38,
      0 0 calc(5px + var(--holo-power, 0) * 16px) #10b98122;
  }

  /* No 3D-rasterized decorative panels behind the screenshot. */
  html[data-motion="on"] .fc-carousel.hologram-enabled .product-screenshot::before,
  html[data-motion="on"] .fc-carousel.hologram-enabled .product-screenshot::after {
    content: none;
  }

  /* The light source follows the mouse, but cannot tilt the image. */
  html[data-motion="on"] .fc-carousel.hologram-enabled .hologram-glare {
    transform: none;
    inset: 0;
    opacity: calc(.06 + var(--holo-power, 0) * .14);
    background: radial-gradient(
      circle at var(--holo-light-x, 50%) var(--holo-light-y, 50%),
      #c3bcff75 0%,
      #6c63ff1c 30%,
      transparent 64%
    );
  }

  html[data-motion="on"] .fc-carousel.hologram-enabled .hologram-rim {
    transform: none;
    inset: 0;
    opacity: calc(.40 + var(--holo-power, 0) * .55);
  }

  html[data-motion="on"] .fc-carousel.hologram-enabled .screenshot-open {
    transform: none;
  }
}

/* Studio tiles link to the unified Create / Shape / Become showcase. */
#studio.studio-offerings-enhanced .approach-item {
  position: relative;
  overflow: hidden;
  border: 1px solid #ffffff0e;
  border-radius: 10px;
  padding: 24px 20px 20px;
  background: linear-gradient(145deg, #ffffff08, #ffffff00 60%);
  cursor: pointer;
  transition: transform .28s var(--ease, ease), border-color .28s ease, background-color .28s ease, box-shadow .28s ease;
}

#studio.studio-offerings-enhanced .approach-item::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 10%, #6c63ff20, transparent 45%), radial-gradient(circle at 88% 90%, #10b98118, transparent 42%);
  transition: opacity .28s ease;
}

#studio.studio-offerings-enhanced .approach-item::after {
  content: "↓";
  position: absolute;
  right: 18px;
  bottom: 17px;
  color: var(--muted, #9899a9);
  font: 16px/1 var(--mono, monospace);
  transform: translateY(-4px);
  transition: color .25s ease, transform .25s var(--ease, ease);
}

#studio.studio-offerings-enhanced .approach-item > *:not(.approach-card-link) { position: relative; z-index: 1; }
#studio.studio-offerings-enhanced .approach-card-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
#studio.studio-offerings-enhanced .approach-card-link:focus-visible { outline: 2px solid var(--emerald, #10b981); outline-offset: -5px; }
#studio .approach-kicker { display: block; margin-bottom: 28px; color: var(--emerald, #10b981); font: 10px/1.45 var(--mono, monospace); letter-spacing: .08em; }
#studio .approach-item:nth-child(2) .approach-kicker { color: var(--amethyst, #6c63ff); font-weight: 600; }
#studio.studio-offerings-enhanced .approach-item > .line-icon { position: absolute; top: 20px; right: 18px; width: 22px; height: 22px; margin: 0; z-index: 1; }
#studio.studio-offerings-enhanced .approach-item .approach-kicker { max-width: calc(100% - 26px); }
#studio.studio-offerings-enhanced .approach-item .line-icon { transition: transform .28s var(--ease, ease), color .28s ease; }
#studio.studio-offerings-enhanced .approach-item h3 { transition: color .28s ease, transform .28s var(--ease, ease); }
#studio.studio-offerings-enhanced .approach-item .approach-index { padding-right: 28px; }

@media (hover: hover) and (pointer: fine) {
  #studio.studio-offerings-enhanced .approach-item:hover,
  #studio.studio-offerings-enhanced .approach-item:focus-within {
    transform: translateY(-6px);
    border-color: #6c63ff66;
    box-shadow: 0 22px 58px #0007, 0 0 28px #6c63ff16;
  }

  #studio.studio-offerings-enhanced .approach-item:hover::before,
  #studio.studio-offerings-enhanced .approach-item:focus-within::before { opacity: 1; }
  #studio.studio-offerings-enhanced .approach-item:hover::after,
  #studio.studio-offerings-enhanced .approach-item:focus-within::after { color: var(--emerald, #10b981); transform: translateY(2px); }
  #studio.studio-offerings-enhanced .approach-item:hover .line-icon,
  #studio.studio-offerings-enhanced .approach-item:focus-within .line-icon { transform: translateY(-3px) scale(1.06); }
  #studio.studio-offerings-enhanced .approach-item:hover h3,
  #studio.studio-offerings-enhanced .approach-item:focus-within h3 { color: #fff; transform: translateX(2px); }
}


/* Create / Shape / Become share one content-card system.
   Motion Off: all three are visible in a static grid.
   Motion On: an interactive center-snapping carousel at every screen width. */
.offerings-showcase {
  position: relative;
  z-index: 2;
  padding-top: clamp(72px, 8vw, 124px);
  padding-bottom: clamp(72px, 8vw, 124px);
  border-top: 0;
  background: transparent;
}

.offerings-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(12px, 1.5vw, 24px);
}

.offerings-tile {
  --offering-color: #10b981;
  position: relative;
  min-width: 0;
  min-height: 405px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.5vw, 40px);
  border: 1px solid #ffffff1d;
  border-radius: 18px;
  background: rgba(13, 13, 20, .84);
  box-shadow: 0 20px 60px #00000040;
  scroll-margin-top: calc(var(--header-offset, 0px) + 20px);
}

.offerings-tile[data-offering="shape"] { --offering-color: #6c63ff; }

.offerings-category {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  width: fit-content;
  margin-bottom: 28px;
  padding: 6px 10px;
  border: 1px solid #10b98155;
  border-radius: 999px;
  background: #10b98111;
  color: var(--offering-color);
  font-family: var(--mono, monospace);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .07em;
}
.offerings-tile[data-offering="shape"] .offerings-category {
  border-color: #6c63ff66;
  background: #6c63ff14;
}

.offerings-tile h3 {
  max-width: 18ch;
  margin: 0 0 22px;
  font-size: clamp(30px, 3.3vw, 49px);
  line-height: 1.11;
  letter-spacing: -.055em;
  font-weight: 590;
  color: #f4f4fa;
  text-wrap: balance;
}
/* Use one consistent Kotuvium emerald → amethyst gradient on the opening
   word of every service headline. The rest of each headline remains white. */
/* A gradient clipped to a tightly tracked inline text run can shave off
   the final e. Give the painted glyph extra inline space, then cancel that
   space from layout so the following words still sit naturally. */
.offerings-title-accent {
  display: inline-block;
  padding-inline-end: .16em;
  margin-inline-end: -.12em;
  overflow: visible;
  white-space: nowrap;
  letter-spacing: -.04em;
  color: #10b981;
  background: linear-gradient(100deg, #10b981 0%, #6c63ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.offerings-description {
  margin: 0;
  color: #c6c6d2;
  font-size: clamp(14px, 1.12vw, 17px);
  line-height: 1.72;
}

.offerings-detail {
  width: 100%;
  margin: auto 0 0;
  padding-top: 22px;
  border-top: 1px solid #ffffff18;
  color: #c5c7d3;
  font-size: 12px;
  line-height: 1.55;
}
.offerings-description + .offerings-detail { margin-top: auto; }

.offerings-controls { display: none; }

/* Motion On: a three-position rotating wheel. With Create at the center,
   Become starts to its left and Shape starts to its right. All three cards
   remain in the same CSS grid cell and change their visual slot together. */
html[data-motion="on"] .offerings-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}
.offerings-counter {
  margin-right: 8px;
  color: #c6c6d2;
  font: 11px/1.3 var(--mono, monospace);
  letter-spacing: .1em;
}
.offerings-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #ffffff35;
  border-radius: 9px;
  background: #15151f;
  color: #f4f4fa;
  font-size: 21px;
  cursor: pointer;
}
.offerings-arrow:disabled { opacity: .38; cursor: default; }
.offerings-arrow:focus-visible { outline: 3px solid #dce3ea; outline-offset: 3px; }

html[data-motion="on"] .offerings-track {
  --wheel-card-width: min(60%, 700px);
  --wheel-shift: min(40vw, 520px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: clip;
  isolation: isolate;
  touch-action: pan-y;
  padding-block: 12px 28px;
}
html[data-motion="on"] .offerings-tile {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: stretch;
  width: var(--wheel-card-width);
  min-height: 470px;
  margin: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  transition:
    transform .62s cubic-bezier(.22, 1, .36, 1),
    opacity .45s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}
html[data-motion="on"] .offerings-tile[data-slot="center"] {
  position: relative;
  z-index: 3;
  opacity: 1;
  transform: translateX(0) scale(1);
  border-color: #ffffff38;
  box-shadow: 0 28px 80px #00000065;
}
html[data-motion="on"] .offerings-tile[data-slot="left"],
html[data-motion="on"] .offerings-tile[data-slot="right"] {
  position: relative;
  z-index: 1;
  opacity: .65;
  cursor: pointer;
}
html[data-motion="on"] .offerings-tile[data-slot="left"] {
  transform: translateX(calc(-1 * var(--wheel-shift))) scale(.84) perspective(1300px) rotateY(-8deg);
}
html[data-motion="on"] .offerings-tile[data-slot="right"] {
  transform: translateX(var(--wheel-shift)) scale(.84) perspective(1300px) rotateY(8deg);
}
html[data-motion="on"] .offerings-tile[data-slot="left"]:hover,
html[data-motion="on"] .offerings-tile[data-slot="right"]:hover { opacity: .88; }

/* The visible wing of each side card acts as navigation, not as a form link.
   Its CTA becomes interactive when that card rotates to center. */
html[data-motion="on"] .offerings-tile:not([data-slot="center"]) .offering-cta {
  pointer-events: none;
}

@media (max-width: 1100px) {
  .offerings-showcase { padding-top: 76px; padding-bottom: 78px; }
  .offerings-tile { padding: 24px 20px; }
  .offerings-tile h3 { font-size: clamp(26px, 3.6vw, 40px); }
  .offerings-description { font-size: 14px; }
  html[data-motion="on"] .offerings-track {
    --wheel-card-width: min(70%, 560px);
    --wheel-shift: 42vw;
  }
  html[data-motion="on"] .offerings-tile { min-height: 470px; }
}

@media (max-width: 620px) {
  .offerings-showcase { padding-top: 62px; padding-bottom: 68px; }
  /* With motion off, cards must stay fully readable rather than three
     narrow squeezed columns. All three remain visible in document order. */
  .offerings-track { grid-template-columns: minmax(0, 1fr); }
  .offerings-tile {
    min-height: 0;
    padding: 27px 22px;
  }
  .offerings-tile h3 { font-size: clamp(32px, 8vw, 42px); }
  .offerings-category { font-size: 9px; margin-bottom: 22px; }
  .offerings-detail { font-size: 11px; }
  html[data-motion="on"] .offerings-track {
    --wheel-card-width: 76%;
    --wheel-shift: 62vw;
  }
  html[data-motion="on"] .offerings-tile {
    /* Natural height is set by the longest card rather than a forced 550px.
       Since the cards share one grid row, all three keep equal heights. */
    min-height: 0;
    padding: 24px 17px;
  }
  html[data-motion="on"] .offerings-tile h3 { font-size: clamp(28px, 7.3vw, 36px); }
}

@media (prefers-reduced-motion: reduce) {
  #studio.studio-offerings-enhanced .approach-item,
  #studio.studio-offerings-enhanced .approach-item::before,
  #studio.studio-offerings-enhanced .approach-item::after,
  #studio.studio-offerings-enhanced .approach-item .line-icon,
  #studio.studio-offerings-enhanced .approach-item h3,
  .offerings-tile { transition: none !important; }
}
@media (forced-colors: active) {
  #studio.studio-offerings-enhanced .approach-item { border: 1px solid CanvasText; }
  .offerings-tile { border: 1px solid CanvasText; background: Canvas; box-shadow: none; }
  .offerings-title-accent, .offerings-category, .offerings-tile h3,
  .offerings-description, .offerings-detail { color: CanvasText; }
  .offerings-title-accent {
    background: none;
    -webkit-text-fill-color: CanvasText;
  }
  .offerings-category, .offerings-arrow { border-color: ButtonText; background: Canvas; color: ButtonText; }
  .offerings-detail { border-color: CanvasText; }
}