/* ==========================================================
   FifoConsult Custom WordPress Theme

   CSS module: BODY 04 / Project Value.

   Module:
   FifoConsult — Project Value / From System to Value.

   This stylesheet controls the fourth BODY storytelling section on the
   FifoConsult front page. The module is the final business/value bridge before
   the Project Inquiry popup. It presents project pricing not as a generic price
   list, but as an engineered investment logic based on scope, complexity,
   interface depth, delivery responsibility and implementation standard.

   Purpose:
   The Project Value module visually explains why a serious custom digital
   system has to be estimated through structure, not through a simple page count.
   It supports the FifoConsult positioning: custom PHP/CSS/JS/WordPress interface
   systems, cinematic visual identity, controlled delivery and documented logic.

   Visual / interface identity:
   - Renaissance Value Chamber / Master Builder Investment Table
   - dark premium environment with gold accents
   - large left-side value document / framed panel PNG
   - right-side narrator text with four business logic modes
   - subtle animated watermark symbol inside the left panel
   - scrollable detail popup for the 24 value factors
   - Start a Project CTA connected to the Project Inquiry system

   Main responsibilities:
   - full-screen BODY 04 section sizing and background composition
   - BODY 02-style grid layout for left panel + right narrator balance
   - left framed value panel positioning, typography and internal safe zone
   - animated watermark fade rhythm: 6s fade in, 6s fade out, 4s invisible pause
   - 2-column value factor buttons inside the panel
   - right-side narrator typography, four-mode navigation and active state
   - Start a Project CTA placement inside the panel
   - large blurred detail popup for the 24 project-value explanations
   - reduced-motion and desktop/laptop safety guards

   Main visual sections:
   - Base Section / Background
   - Main Grid Layout
   - Left Value Panel
   - Watermark Animation
   - Panel Factor Links + CTA
   - Right Narrator
   - Right Mode Navigation
   - Detail Popup
   - Reduced Motion
   - Responsive Guard

   Related template:
   template-parts/body-project-value.php

   Related JavaScript:
   assets/js/body-project-value.js

   Visual assets:
   assets/img/body/project-value/

   Main PNG assets:
   project-value-background.png
   project-value-panel.png
   project-value-icon-scope-small.png
   project-value-icon-investment-small.png
   project-value-icon-delivery-small.png
   project-value-icon-start-small.png
   project-value-icon-scope-title.png
   project-value-icon-investment-title.png
   project-value-icon-delivery-title.png
   project-value-icon-start-title.png
   project-value-watermark-scope.png
   project-value-watermark-investment.png
   project-value-watermark-delivery.png
   project-value-watermark-start.png

   Important implementation note:
   This CSS file is intentionally separated from main.css and from the BODY 01,
   BODY 02 and BODY 03 styles. BODY 04 keeps its own class prefix, layout,
   animation timing, popup styling and desktop adjustments so the module can be
   edited safely as a standalone storytelling block.

   Concept, visual direction, structure, interface design and implementation:
   Dragan Oljaca / FifoConsult

   Website: https://www.fifoconsult.com
   Author: Dragan Oljaca
   Brand: FifoConsult

   All rights reserved.
   ========================================================== */

/* ==========================================================
   01 / Section + Background

   The section is a locked full-screen cinematic business/value block.
   The background PNG carries the dark Renaissance investment atmosphere, while
   CSS gradients add readability, depth and a controlled gold ambience without
   altering the original artwork.
   ========================================================== */

.fc-body-project-value {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: #030303;
  color: #f4f4f0;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  isolation: isolate;
}

.fc-project-value__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0) 36%,
      rgba(0, 0, 0, 0.28) 100%
    ),
    url("../img/body/project-value/project-value-background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.fc-project-value__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 34% 49%,
      rgba(214, 178, 60, 0.08),
      transparent 34%
    ),
    radial-gradient(
      circle at 79% 47%,
      rgba(214, 178, 60, 0.05),
      transparent 32%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.42));
}

/* ==========================================================
   02 / Main Grid Layout

   BODY 04 uses a stable 52% / 48% grid. The left column contains the framed
   value panel. The right column contains the narrator, mode navigation and
   bottom note. This replaced the earlier absolute layout and keeps the module
   aligned with the BODY 02 / Interface Film rhythm.
   ========================================================== */

#body-project-value .fc-project-value__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  padding: 110px 120px 80px;
  box-sizing: border-box;
}

/* ==========================================================
   03 / Left Value Panel

   The panel is a PNG frame with a separate internal safe zone for live HTML
   text. The frame, watermark, title icon, text, tags and CTA are intentionally
   layered so the visual document feels like a designed value sheet, while the
   text remains real, readable and editable.
   ========================================================== */

#body-project-value .fc-project-value__panel-wrap {
  position: relative;
  width: min(735px, 86%);
  max-width: 735px;
  min-width: 0;
  aspect-ratio: 900 / 1140;
  justify-self: center;
  align-self: center;
}

#body-project-value .fc-project-value__panel-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

#body-project-value .fc-project-value__panel-content {
  position: absolute;
  z-index: 2;
  left: 19.2%;
  top: 13.8%;
  width: 59.8%;
  height: 71.8%;
  display: flex;
  flex-direction: column;
  color: rgba(238, 238, 232, 0.9);
  transition: opacity 280ms ease;
}

#body-project-value .fc-project-value__panel-content.is-changing {
  opacity: 0;
}

#body-project-value .fc-project-value__mode-head,
#body-project-value .fc-project-value__mode-kicker,
#body-project-value .fc-project-value__mode-description,
#body-project-value .fc-project-value__tags,
#body-project-value .fc-project-value__mode-closing,
#body-project-value .fc-project-value__cta {
  position: relative;
  z-index: 3;
}

#body-project-value .fc-project-value__mode-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 32px -8px;
}

#body-project-value .fc-project-value__mode-title-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: contain;
  opacity: 0.86;
  filter:
    drop-shadow(0 0 8px rgba(214, 178, 60, 0.18))
    drop-shadow(0 0 18px rgba(214, 178, 60, 0.08));
}

#body-project-value .fc-project-value__mode-title {
  margin: 0;
  color: rgba(250, 250, 246, 0.93);
  font-size: clamp(20px, 1.18vw, 24px);
  line-height: 1.04;
  font-weight: 760;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

#body-project-value .fc-project-value__mode-kicker {
  max-width: 100%;
  margin: 0 0 22px;
  color: #c9a227;
  font-size: clamp(17px, 1vw, 20px);
  line-height: 1.36;
  font-weight: 600;
  letter-spacing: 0.005em;
}

#body-project-value .fc-project-value__mode-description {
  max-width: 100%;
  margin: 0 0 44px;
  color: rgba(218, 218, 214, 0.76);
  font-size: clamp(13px, 0.8vw, 16px);
  line-height: 1.58;
  font-weight: 470;
  letter-spacing: 0.005em;
}

#body-project-value .fc-project-value__mode-closing {
  max-width: 100%;
  margin: auto 0 18px;
  color: rgba(225, 225, 220, 0.78);
  font-size: clamp(13px, 0.8vw, 16px);
  line-height: 1.36;
  font-weight: 560;
  letter-spacing: 0.002em;
}

#body-project-value .fc-project-value__mode-closing[hidden] {
  display: none;
}

/* ==========================================================
   04 / Panel Watermark Animation
   6s fade in + 6s fade out + 4s invisible pause.
   ========================================================== */

#body-project-value .fc-project-value__watermark {
  display: block;
  visibility: visible;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 52%;
  width: 105%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  animation: fcProjectValueWatermarkSlowLoop 16s ease-in-out infinite both;
  filter:
    brightness(8)
    contrast(2.2)
    saturate(1.45)
    drop-shadow(0 0 34px rgba(214, 178, 60, 0.38))
    drop-shadow(0 0 72px rgba(214, 178, 60, 0.18));
  mix-blend-mode: screen;
}

@keyframes fcProjectValueWatermarkSlowLoop {
  0% {
    opacity: 0;
  }

  37.5% {
    opacity: 0.425;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* ==========================================================
   05 / Panel Tags + Start CTA
   ========================================================== */

#body-project-value .fc-project-value__tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 38px;
  row-gap: 20px;
  max-width: 100%;
  margin: 0 0 44px;
}

#body-project-value .fc-project-value__tags button.fc-project-value__tag {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(224, 197, 112, 0.9);
  font: inherit;
  font-size: clamp(13px, 0.78vw, 15px);
  line-height: 1.25;
  font-weight: 450;
  letter-spacing: 0.005em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 240ms ease,
    opacity 240ms ease,
    text-shadow 240ms ease;
}

#body-project-value .fc-project-value__tags button.fc-project-value__tag::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: rgba(214, 178, 60, 0.82);
  box-shadow:
    0 0 7px rgba(214, 178, 60, 0.22),
    0 0 16px rgba(214, 178, 60, 0.08);
}

#body-project-value .fc-project-value__tags button.fc-project-value__tag:hover,
#body-project-value .fc-project-value__tags button.fc-project-value__tag:focus-visible {
  color: rgba(244, 218, 132, 1);
  text-shadow: 0 0 12px rgba(214, 178, 60, 0.18);
  outline: none;
}

#body-project-value .fc-project-value__cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  margin-bottom: 42px;
  text-align: center;
}

#body-project-value .fc-project-value__cta[hidden] {
  display: none !important;
}

#body-project-value .fc-project-value__cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  min-height: 40px;
  margin: 0 auto;
  padding: 0 24px;
  border: 1px solid rgba(214, 178, 60, 0.62);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    rgba(18, 16, 11, 0.72);
  color: rgba(250, 250, 246, 0.94);
  font: inherit;
  font-size: clamp(14px, 0.82vw, 17px);
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 24px rgba(214, 178, 60, 0.12);
  transition:
    border-color 260ms ease,
    box-shadow 260ms ease,
    background 260ms ease,
    transform 260ms ease;
}

#body-project-value .fc-project-value__cta-button:hover,
#body-project-value .fc-project-value__cta-button:focus-visible {
  border-color: rgba(214, 178, 60, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    rgba(20, 17, 10, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 0 28px rgba(214, 178, 60, 0.28),
    0 0 70px rgba(214, 178, 60, 0.13);
  outline: none;
}

#body-project-value .fc-project-value__cta-note {
  width: 100%;
  margin: 8px 0 0;
  color: rgba(214, 178, 60, 0.76);
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
}

/* ==========================================================
   06 / Right Narrator

   The narrator explains the business logic of the section. Typography is kept
   close to the BODY 02 rhythm: large cinematic title, compact eyebrow, strong
   lead text and smaller explanatory paragraph.
   ========================================================== */

#body-project-value .fc-project-value__narrator {
  position: relative;
  width: min(540px, 88%);
  max-width: 540px;
  justify-self: start;
  align-self: center;
  padding-left: 20px;
  color: rgba(236, 236, 232, 0.92);
  transform: translateX(50px) translateY(-15px);
}

#body-project-value .fc-project-value__eyebrow {
  margin: 0 0 18px;
  color: #c9a227;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

#body-project-value .fc-project-value__title {
  margin: 0 0 26px;
  color: rgba(250, 250, 248, 0.96);
  font-size: clamp(38px, 3.25vw, 56px);
  line-height: 0.97;
  font-weight: 850;
  letter-spacing: -0.052em;
  text-transform: uppercase;
}

#body-project-value .fc-project-value__subtitle {
  max-width: 470px;
  margin: 0 0 42px;
  color: rgba(224, 224, 220, 0.72);
  font-size: 16px;
  line-height: 1.44;
  font-weight: 650;
}

#body-project-value .fc-project-value__description {
  max-width: 480px;
  margin: 0 0 46px;
  color: rgba(218, 218, 214, 0.68);
  font-size: 13px;
  line-height: 1.68;
  font-weight: 450;
  letter-spacing: -0.005em;
}

#body-project-value .fc-project-value__description span,
#body-project-value .fc-project-value__inline-standard {
  color: #c9a227;
  font-weight: 700;
}

#body-project-value .fc-project-value__inline-standard {
  appearance: none;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: inherit;
  transition:
    color 220ms ease,
    text-shadow 220ms ease;
}

#body-project-value .fc-project-value__inline-standard:hover,
#body-project-value .fc-project-value__inline-standard:focus-visible {
  color: rgba(244, 218, 132, 1);
  text-shadow: 0 0 12px rgba(214, 178, 60, 0.18);
  outline: none;
}

/* ==========================================================
   07 / Right Mode Navigation

   Four modes control the entire left value panel. The active state is shown by
   opacity, gold light and icon brightness only. No underline, outline or extra
   marker is used, because the module must stay premium and calm.
   ========================================================== */

#body-project-value .fc-project-value__modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  width: 100%;
  max-width: 620px;
  margin: 0 0 44px;
}

#body-project-value .fc-project-value__mode {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(190, 170, 105, 0.45);
  font: inherit;
  text-align: center;
  opacity: 0.43;
  cursor: pointer;
  transition:
    opacity 360ms ease,
    color 360ms ease,
    filter 360ms ease;
}

#body-project-value .fc-project-value__mode-number {
  display: block;
  margin-bottom: 14px;
  color: #c9a227;
  font-size: 11px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0.02em;
  opacity: 0.78;
}

#body-project-value .fc-project-value__mode img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin: 0 auto 11px;
  opacity: 0.78;
  filter:
    saturate(0.72)
    brightness(0.72)
    drop-shadow(0 0 6px rgba(214, 178, 60, 0.06));
  transition:
    opacity 360ms ease,
    filter 360ms ease,
    transform 360ms ease;
}

#body-project-value .fc-project-value__mode-label {
  display: block;
  color: currentColor;
  font-size: 10px;
  line-height: 1.18;
  font-weight: 760;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

#body-project-value .fc-project-value__mode:hover,
#body-project-value .fc-project-value__mode:focus-visible {
  color: rgba(214, 178, 60, 0.82);
  opacity: 0.78;
  outline: none;
}

#body-project-value .fc-project-value__mode:hover img,
#body-project-value .fc-project-value__mode:focus-visible img {
  opacity: 0.95;
  filter:
    saturate(1)
    brightness(1.05)
    drop-shadow(0 0 12px rgba(214, 178, 60, 0.2));
}

#body-project-value .fc-project-value__mode.is-active {
  color: rgba(214, 178, 60, 0.96);
  opacity: 1;
  cursor: default;
}

#body-project-value .fc-project-value__mode.is-active img {
  opacity: 1;
  filter:
    saturate(1.08)
    brightness(1.18)
    drop-shadow(0 0 13px rgba(214, 178, 60, 0.3))
    drop-shadow(0 0 34px rgba(214, 178, 60, 0.12));
}

#body-project-value .fc-project-value__bottom-note {
  max-width: 620px;
  margin: 0;
  color: rgba(224, 224, 220, 0.74);
  font-size: 14px;
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ==========================================================
   08 / Detail Popup Layer
   ========================================================== */

.fc-project-value-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 99992;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 72px);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.fc-project-value-detail-overlay[hidden] {
  display: none !important;
}

.fc-project-value-detail-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fc-project-value-detail-overlay {
  background: radial-gradient(
    circle at 48% 42%,
    rgba(214, 178, 60, 0.1),
    rgba(0, 0, 0, 0.62) 48%,
    rgba(0, 0, 0, 0.82) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fc-project-value-detail-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.42),
    rgba(0, 0, 0, 0.28),
    rgba(0, 0, 0, 0.58)
  );
}

.fc-project-value-detail-cloud {
  position: absolute;
  z-index: 2;
  left: 48.5%;
  top: 52%;
  width: min(980px, 62vw);
  max-width: 980px;
  height: min(660px, 72vh);
  max-height: min(78vh, 780px);
  padding: clamp(42px, 4vw, 66px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: clamp(30px, 2.4vw, 48px);
  overflow: hidden;
  color: rgba(244, 243, 247, 0.92);
  background:
    radial-gradient(
      circle at 62% 8%,
      rgba(216, 173, 66, 0.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 100%,
      rgba(92, 72, 140, 0.13),
      transparent 42%
    ),
    linear-gradient(135deg, rgba(5, 6, 11, 0.96), rgba(4, 6, 12, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 34px 90px rgba(0, 0, 0, 0.62),
    0 0 56px rgba(216, 173, 66, 0.14);
  transform: translate(-50%, -50%);
}

.fc-project-value-detail-cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.72;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08),
      transparent 16%,
      transparent 84%,
      rgba(255, 255, 255, 0.06)
    ),
    radial-gradient(circle at 50% 0%, rgba(255, 240, 190, 0.1), transparent 34%);
}

.fc-project-value-detail-close {
  position: absolute;
  top: 30px;
  right: 34px;
  z-index: 4;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.74;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}

.fc-project-value-detail-close:hover {
  opacity: 1;
  transform: scale(1.04);
  filter: drop-shadow(0 0 10px rgba(216, 173, 66, 0.26));
}

.fc-project-value-detail-close:focus,
.fc-project-value-detail-close:focus-visible {
  outline: none;
  box-shadow: none;
}

.fc-project-value-detail-close span,
.fc-project-value-detail-close span::before,
.fc-project-value-detail-close span::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: rgba(244, 243, 247, 0.82);
  transform-origin: center;
}

.fc-project-value-detail-close span {
  background: transparent;
}

.fc-project-value-detail-close span::before,
.fc-project-value-detail-close span::after {
  content: "";
}

.fc-project-value-detail-close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.fc-project-value-detail-close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.fc-project-value-detail-scroll {
  position: relative;
  z-index: 2;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding-top: 22px;
  padding-right: 54px;
  padding-bottom: 22px;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 173, 66, 0.36) rgba(255, 255, 255, 0.025);
}

.fc-project-value-detail-scroll::-webkit-scrollbar {
  width: 6px;
}

.fc-project-value-detail-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.fc-project-value-detail-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.58);
}

.fc-project-value-detail-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 162, 39, 0.82);
}

.fc-project-value-detail-kicker {
  margin: 0 0 12px;
  color: #d8ad42;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(216, 173, 66, 0.26);
}

.fc-project-value-detail-cloud h2 {
  max-width: 760px;
  margin: 0 0 20px;
  color: rgba(244, 243, 247, 0.96);
  font-size: clamp(24px, 1.9vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.fc-project-value-detail-intro {
  max-width: 820px;
  margin: 0 0 28px;
  color: rgba(220, 222, 230, 0.86);
  font-size: 15px;
  line-height: 1.58;
  font-weight: 700;
}

.fc-project-value-detail-body h3 {
  max-width: 780px;
  margin: 30px 0 12px;
  color: rgba(216, 173, 66, 0.92);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.fc-project-value-detail-body h3:first-child {
  margin-top: 0;
}

.fc-project-value-detail-body p {
  max-width: 760px;
  margin: 0 0 15px;
  color: rgba(220, 222, 230, 0.82);
  font-size: 14px;
  line-height: 1.68;
}

.fc-project-value-detail-signature {
  margin-top: 30px;
  color: rgba(244, 243, 247, 0.74);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html.fc-project-value-detail-open,
body.fc-project-value-detail-open {
  overflow: hidden;
}

/* ==========================================================
   09 / Reduced Motion

   Accessibility guard. If the user prefers reduced motion, the watermark and
   transitions are disabled or simplified. The section remains readable and the
   content hierarchy is preserved.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  #body-project-value .fc-project-value__watermark {
    animation: none;
    opacity: 0.21;
  }

  #body-project-value .fc-project-value__panel-content,
  #body-project-value .fc-project-value__mode,
  #body-project-value .fc-project-value__mode img,
  #body-project-value .fc-project-value__cta-button,
  .fc-project-value-detail-overlay,
  .fc-project-value-detail-close {
    transition: none;
  }
}

/* ==========================================================
   10 / Responsive Guard
   Desktop-first. Tablet/mobile refinement later.
   ========================================================== */

@media (max-width: 1180px) {
  #body-project-value.fc-body-project-value {
    height: auto;
    min-height: 100vh;
    padding: 120px 0;
  }

  #body-project-value .fc-project-value__inner {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;
    padding: 0 32px;
  }

  #body-project-value .fc-project-value__narrator {
    order: -1;
    width: min(86vw, 680px);
    max-width: 760px;
    padding-left: 0;
    transform: none;
  }

  #body-project-value .fc-project-value__panel-wrap {
    width: min(86vw, 680px);
    max-width: 680px;
  }

  #body-project-value .fc-project-value__modes {
    max-width: 100%;
  }
}

@media (max-width: 780px) {
  .fc-project-value-detail-overlay {
    padding: 18px;
  }

  .fc-project-value-detail-cloud {
    left: 50%;
    top: 50%;
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
    height: auto;
    max-height: 82vh;
    padding: 34px 28px;
  }

  .fc-project-value-detail-scroll {
    max-height: calc(82vh - 80px);
    padding-right: 16px;
  }
}

/* =========================================================
   BODY 04 / PROJECT VALUE — TYPOGRAPHY COLOR HARMONIZATION
   Uses the approved Mega Menu / TEXT reader palette.
   Typography colors only — no layout, animation, timing,
   background, popup or JavaScript changes.
   ========================================================= */

/* Left value panel */

#body-project-value .fc-project-value__panel-content {
  color: #635d4f !important;
}

#body-project-value .fc-project-value__mode-title {
  color: #887b60 !important;
}

#body-project-value .fc-project-value__mode-kicker {
  color: #9a7d3f !important;
}

#body-project-value .fc-project-value__mode-description {
  color: #635d4f !important;
}

#body-project-value .fc-project-value__mode-closing {
  color: #958b73 !important;
}

#body-project-value .fc-project-value__tags button.fc-project-value__tag {
  color: #9a7d3f !important;
  text-shadow: none !important;
}

#body-project-value
  .fc-project-value__tags
  button.fc-project-value__tag:hover,
#body-project-value
  .fc-project-value__tags
  button.fc-project-value__tag:focus-visible {
  color: #b2924d !important;
  text-shadow: 0 0 14px rgba(154, 125, 63, 0.24) !important;
}

#body-project-value .fc-project-value__cta-button {
  color: #887b60 !important;
}

#body-project-value .fc-project-value__cta-button:hover,
#body-project-value .fc-project-value__cta-button:focus-visible {
  color: #9a7d3f !important;
}

#body-project-value .fc-project-value__cta-note {
  color: #706957 !important;
}

/* Right narrator */

#body-project-value .fc-project-value__narrator {
  color: #635d4f !important;
}

#body-project-value .fc-project-value__eyebrow {
  color: #9a7d3f !important;
}

#body-project-value .fc-project-value__title,
#body-project-value .fc-section-title {
  color: #887b60 !important;
}

#body-project-value .fc-project-value__subtitle {
  color: #958b73 !important;
}

#body-project-value .fc-project-value__description {
  color: #635d4f !important;
}

#body-project-value .fc-project-value__description span,
#body-project-value .fc-project-value__inline-standard {
  color: #9a7d3f !important;
}

#body-project-value .fc-project-value__inline-standard:hover,
#body-project-value .fc-project-value__inline-standard:focus-visible {
  color: #b2924d !important;
  text-shadow: 0 0 14px rgba(154, 125, 63, 0.24) !important;
}

/* Four Project Value modes */

#body-project-value .fc-project-value__mode {
  color: #706957 !important;
  text-shadow: none !important;
}

#body-project-value .fc-project-value__mode-number,
#body-project-value .fc-project-value__mode-label {
  color: currentColor !important;
}

#body-project-value .fc-project-value__mode:hover,
#body-project-value .fc-project-value__mode:focus-visible {
  color: #958b73 !important;
  text-shadow: 0 0 12px rgba(149, 139, 115, 0.22) !important;
}

#body-project-value .fc-project-value__mode.is-active {
  color: #9a7d3f !important;
  text-shadow:
    0 0 12px rgba(154, 125, 63, 0.22),
    0 0 24px rgba(154, 125, 63, 0.12) !important;
}

#body-project-value .fc-project-value__bottom-note {
  color: #958b73 !important;
}

/* =========================================================
   BODY 04 / PROJECT VALUE DETAIL POPUPS — TYPOGRAPHY COLORS
   Extends the approved Mega Menu / TEXT reader palette to the
   scrollable Project Value detail windows.
   Typography colors only — no popup layout, blur, scroll,
   animation, timing or JavaScript changes.
   ========================================================= */

.fc-project-value-detail-kicker {
  color: #9a7d3f !important;
  text-shadow: 0 0 12px rgba(154, 125, 63, 0.22) !important;
}

.fc-project-value-detail-cloud h2 {
  color: #887b60 !important;
}

.fc-project-value-detail-intro {
  color: #958b73 !important;
}

.fc-project-value-detail-body h3 {
  color: #9a7d3f !important;
  text-shadow: none !important;
}

.fc-project-value-detail-body p {
  color: #635d4f !important;
}

.fc-project-value-detail-signature {
  color: #706957 !important;
}

/* =========================================================
   PROJECT VALUE DETAIL CLOUDS — HIDDEN VISUAL SCROLLBAR
   Applies to every 04 / Project Value detail cloud.
   Scrolling remains fully available by mouse wheel, touchpad,
   keyboard and touch. Only the visible scrollbar is removed.
   No dimensions, content, animation or JavaScript changes.
   ========================================================= */

.fc-project-value-detail-scroll {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.fc-project-value-detail-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}