/**
 * FifoConsult Custom WordPress Theme
 *
 * Main stylesheet.
 *
 * This file controls the global visual system of the FifoConsult presentation
 * website and the main landing interface.
 *
 * Responsibilities:
 * - base layout and reset rules
 * - global typography and color foundation
 * - fixed header structure
 * - header logo and central menu trigger
 * - Glass Access Dock positioning
 * - header information bubbles
 * - Hero section layout and background presentation
 * - cinematic Mega Menu styling
 * - Mega Menu background layers and visual transitions
 * - Mega Menu TEXT reader and continuation fade system
 * - under-Hero presentation panels
 * - User Access Popup visual system
 * - User Access form, tabs, button and footer area
 * - Project Value / Investment Guide cloud
 * - shared glassmorphism, blur, shadow and transition rules
 * - desktop/laptop visual tuning for the main site experience
 *
 * Separated CSS modules:
 * - assets/css/client-project-path.css
 * - assets/css/art-smart-academy.css
 * - assets/css/project-inquiry-popup.css
 *
 * Related JavaScript:
 * - assets/js/main.js
 * - assets/js/client-project-path.js
 * - assets/js/art-smart-academy.js
 * - assets/js/project-inquiry-popup.js
 *
 * Important implementation note:
 * This file should contain only global layout, header, Hero, Mega Menu,
 * Mega Menu TEXT reader, User Access Popup and Project Value cloud styling. Independent popup modules
 * should remain in their own separated CSS files for easier maintenance.
 *
 * Concept, visual direction, structure, interface design and implementation:
 * Dragan Oljaca / FifoConsult
 *
 * Website: https://www.fifoconsult.com
 * Author: Dragan Oljaca
 * Brand: FifoConsult
 *
 * All rights reserved.
 */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #050505;
  color: #ffffff;
  font-family: Inter, Arial, sans-serif;
}

/* =========================
   HEADER
========================= */

.fc-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 82px;
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  align-items: center;
  z-index: 10120;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.admin-bar .fc-header {
  top: 32px;
}

.fc-header-logo {
  margin-left: 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.fc-header-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.fc-header-menu {
  justify-self: center;
  background: transparent;
  border: none;
  color: #706957;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 12px 20px;
}

.fc-header-menu:hover {
  color: #958b73;
}

.fc-header-login {
  justify-self: end;
  margin-right: 42px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.fc-header-login img {
  width: 52px;
  height: 52px;
  max-width: none;
  flex: 0 0 52px;
  object-fit: contain;
  display: block;
  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;
}

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

/* =========================
   HERO
========================= */

.fc-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-left: 180px;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1)),
    url("../img/hero-fifoconsult-01.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fc-hero-center-logo {
  position: absolute;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
  width: 260px;
  height: auto;
  opacity: 0.88;
  z-index: 1;
  pointer-events: none;
}

.fc-hero-content {
  max-width: 620px;
}

.fc-kicker {
  color: #c8a46a;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 13px;
}

.fc-hero h1 {
  margin: 0;
  font-size: 76px;
  line-height: 1;
}

.fc-hero-text {
  font-size: 22px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* =========================
   MEGA MENU
========================= */

.fc-mega-menu {
  position: fixed;
  top: 82px;
  left: 0;
  width: 100%;
  height: 650px;
  max-height: calc(100vh - 180px);
  z-index: 9998;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  background: #000000;
}

.admin-bar .fc-mega-menu {
  top: 114px;
  height: 650px;
  max-height: calc(100vh - 210px);
}

.fc-mega-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Background crossfade layers */

.fc-mega-bg {
  position: absolute;
  inset: 0;
  background-size: auto 100%;
  background-position: right top;
  background-repeat: no-repeat;
  transform: none;
  opacity: 0;
  transition: opacity 2.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.fc-mega-bg.is-active {
  opacity: 1;
}

.fc-mega-menu.is-open .fc-mega-bg {
  transform: none;
}

/* Overlay */

.fc-mega-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.18) 55%,
      rgba(0, 0, 0, 0.55)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.18));
}

/* Top links */

.fc-mega-top-nav {
  position: absolute;
  top: 48px;
  left: 180px;
  display: flex;
  gap: 62px;
  z-index: 4;
}

.fc-mega-top-nav button[data-panel] {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #706957;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease;
}

.fc-mega-top-nav button[data-panel]:hover,
.fc-mega-top-nav button[data-panel].is-active {
  color: #958b73;
}

/* Text content */

.fc-mega-content {
  position: absolute;
  top: 135px;
  left: 180px;
  z-index: 5;
  max-width: 520px;
  opacity: 1;
  transition: opacity 1.8s ease;
}

.fc-mega-content.is-changing {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.fc-mega-content h2 {
  margin: 0 0 38px 0;
  color: #887b60;
  font-size: 38px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fc-mega-content h2 span {
  color: #9a7d3f;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.fc-mega-content p {
  margin: 0;
  max-width: 450px;
  color: #635d4f;
  font-size: 15px;
  line-height: 1.72;
  font-weight: 300;
}

.fc-mega-content p strong {
  font-weight: 700;
  color: #958b73;
}

.fc-mega-content p a.fc-gold-link {
  color: #9a7d3f;
  font-weight: 700;
  text-decoration: none;
  transition:
    color 0.35s ease,
    text-shadow 0.35s ease;
}

.fc-mega-content p a.fc-gold-link:hover {
  color: #b2924d;
  text-shadow: 0 0 14px rgba(242, 201, 76, 0.24);
}

/* Video / Audio links */

.fc-mega-media {
  position: absolute;
  left: 180px;
  bottom: 88px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 70px;
}

.fc-media-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  color: #706957;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.75;
  transition:
    color 0.65s ease,
    opacity 0.65s ease,
    text-shadow 0.65s ease;
}

.fc-media-link:hover {
  color: #958b73;
  opacity: 1;
  text-shadow: 0 0 12px rgba(149, 139, 115, 0.24);
}

.fc-media-link:has(.fc-audio-icon) {
  gap: 1px;
}

.fc-media-icon {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: relative;
  flex: 0 0 30px;
  color: currentColor;
  opacity: 0.82;
  transition:
    opacity 0.65s ease,
    transform 0.65s ease,
    filter 0.65s ease;
}

.fc-media-link:hover .fc-media-icon {
  opacity: 1;
  transform: scale(1.04);
  filter: drop-shadow(0 0 8px rgba(149, 139, 115, 0.20));
}

.fc-video-icon {
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: border-color 0.65s ease;
}

.fc-video-icon::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 11px;
  width: 0;
  height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: border-left-color 0.65s ease;
}

.fc-audio-icon::before,
.fc-audio-icon::after {
  content: "";
  position: absolute;
}

.fc-audio-icon::before {
  left: 2px;
  top: 8px;
  width: 15px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(0 32%, 38% 32%, 100% 0, 100% 100%, 38% 68%, 0 68%);
  transition: background-color 0.65s ease;
}

.fc-audio-icon::after {
  display: none;
}

.fc-text-icon::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 22px;
  height: 2px;
  background: currentColor;
  box-shadow:
    0 8px 0 currentColor,
    0 16px 0 currentColor;
  opacity: 0.86;
}

/* =========================
   FOOTER
========================= */

.fc-footer {
  padding: 40px 180px;
  background: #000000;
  color: rgba(255, 255, 255, 0.55);
}

/* =========================
   VIDEO MODAL
========================= */

.fc-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease;
}

.fc-video-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fc-video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fc-video-modal-window {
  position: relative;
  z-index: 1;
  width: min(1180px, 92vw);
  background: #050505;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
  border: 0px solid rgba(230, 225, 216, 0.18);
}

.fc-video-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000000;
}

.fc-video-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: transparent;
  border: none;
  color: rgba(230, 225, 216, 0.76);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.45s ease,
    opacity 0.45s ease,
    text-shadow 0.45s ease;
}

.fc-video-modal-close:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(230, 225, 216, 0.28);
}

@media (max-height: 900px) {
  .fc-video-modal {
    align-items: flex-start;
    padding: 126px 42px 32px;
  }

  .fc-video-modal-window {
    width: min(1180px, 92vw, calc((100vh - 190px) * 16 / 9));
  }

  .fc-video-modal-close {
    top: -34px;
  }
}

/* =========================
   AUDIO MODAL
========================= */

.fc-audio-modal {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease;
}

.fc-audio-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fc-audio-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fc-audio-modal-window {
  position: relative;
  z-index: 1;
  width: min(640px, 88vw);
  padding: 42px 46px 38px;
  background: rgba(5, 5, 5, 0.94);
  border: 0;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
}

.fc-audio-modal-title {
  margin-bottom: 24px;
  color: #e6e1d8;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.fc-audio-player {
  display: block;
  width: 100%;
  min-width: 100%;
  height: 44px;
  margin-top: 10px;
  background: #e6e1d8;
  border-radius: 4px;
  position: relative;
  z-index: 2;
}

.fc-audio-player::-webkit-media-controls-panel {
  background-color: #e6e1d8;
}

.fc-audio-player::-webkit-media-controls-play-button,
.fc-audio-player::-webkit-media-controls-timeline,
.fc-audio-player::-webkit-media-controls-current-time-display,
.fc-audio-player::-webkit-media-controls-time-remaining-display,
.fc-audio-player::-webkit-media-controls-volume-slider {
  filter: none;
}

.fc-audio-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: transparent;
  border: none;
  color: rgba(230, 225, 216, 0.76);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.45s ease,
    opacity 0.45s ease,
    text-shadow 0.45s ease;
}

.fc-audio-modal-close:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(230, 225, 216, 0.28);
}

/* =========================
   MEGA MENU TEXT READER
========================= */

html.fc-text-reader-open,
body.fc-text-reader-open {
  overflow: hidden;
}

.fc-text-reader[hidden] {
  display: none;
}

.fc-text-reader {
  position: fixed;
  top: 82px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10040;
  opacity: 1;
  pointer-events: none;
}

.fc-text-reader.is-open {
  pointer-events: auto;
}

.fc-text-reader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 3, 0.76);
  backdrop-filter: blur(16px) saturate(0.72);
  -webkit-backdrop-filter: blur(16px) saturate(0.72);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fc-text-reader.is-open .fc-text-reader-backdrop {
  opacity: 1;
  transition-duration: 0ms;
}

.fc-text-reader-dialog {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fc-text-reader-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fc-text-reader-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.fc-text-reader-scroll:focus {
  outline: none;
}

.fc-text-reader-article {
  width: min(790px, calc(100vw - 120px));
  margin: 0 auto;
  padding: clamp(116px, 16vh, 180px) 0 clamp(190px, 24vh, 310px);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 620ms ease 90ms,
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1) 90ms;
}

.fc-text-reader.is-open .fc-text-reader-article {
  opacity: 1;
  transform: translateY(0);
}

.fc-text-reader-article h2 {
  margin: 0 0 clamp(62px, 8vh, 96px);
  color: #887b60;
  font-size: clamp(38px, 3vw, 48px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.fc-text-reader-body {
  color: #635d4f;
  font-size: clamp(17px, 1.12vw, 19px);
  line-height: 1.72;
  font-weight: 300;
  text-wrap: pretty;
}

.fc-text-reader-body p {
  margin: 0;
}

.fc-text-reader-body p + p {
  margin-top: 1.52em;
}

.fc-text-reader-body p:not(.fc-text-reader-closing) + .fc-text-reader-closing {
  margin-top: 3.1em;
}

.fc-text-reader-body .fc-text-reader-closing + .fc-text-reader-closing {
  margin-top: 0.9em;
}

.fc-text-reader-body strong {
  color: #958b73;
  font-weight: 500;
}

.fc-text-reader-body em {
  color: #a59d8a;
}

.fc-text-reader-body a {
  color: #9a7d3f;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.22em;
  transition:
    color 280ms ease,
    text-shadow 280ms ease;
}

.fc-text-reader-body a:hover,
.fc-text-reader-body a:focus-visible {
  color: #b2924d;
  text-shadow: 0 0 14px rgba(242, 201, 76, 0.24);
}

.fc-text-reader-close {
  position: absolute;
  top: clamp(24px, 4vh, 42px);
  right: clamp(28px, 4vw, 68px);
  z-index: 4;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: #706957;
  cursor: pointer;
  opacity: 0.82;
  transition:
    color 320ms ease,
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 320ms ease;
}

.fc-text-reader-close span {
  display: block;
  font-size: 31px;
  line-height: 1;
  font-weight: 200;
  transform: translateY(-1px);
}

.fc-text-reader-close:hover,
.fc-text-reader-close:focus-visible {
  color: #91866d;
  opacity: 1;
  transform: scale(1.04);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
}

.fc-text-reader-close:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.28);
  outline-offset: 2px;
}

.fc-text-reader-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: clamp(84px, 13vh, 124px);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 2, 3, 0) 0%,
    rgba(2, 2, 3, 0.2) 38%,
    rgba(2, 2, 3, 0.92) 100%
  );
  backdrop-filter: blur(3.5px);
  -webkit-backdrop-filter: blur(3.5px);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 24%,
    #000000 72%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 24%,
    #000000 72%
  );
  transition: opacity 360ms ease;
}

.fc-text-reader.has-overflow:not(.is-at-end) .fc-text-reader-fade {
  opacity: 1;
}

@media (max-width: 1100px) {
  .fc-text-reader-article {
    width: min(720px, calc(100vw - 88px));
  }
}

@media (max-width: 700px) {
  .fc-text-reader-article {
    width: calc(100vw - 48px);
    padding: 92px 0 170px;
  }

  .fc-text-reader-article h2 {
    margin-bottom: 56px;
    font-size: clamp(30px, 9vw, 38px);
    letter-spacing: 0.085em;
  }

  .fc-text-reader-body {
    font-size: 17px;
    line-height: 1.76;
  }

  .fc-text-reader-close {
    top: 18px;
    right: 14px;
  }

  .fc-text-reader-fade {
    height: 96px;
  }
}

@media (max-height: 760px) and (min-width: 701px) {
  .fc-text-reader-article {
    padding-top: 88px;
    padding-bottom: 180px;
  }

  .fc-text-reader-article h2 {
    margin-bottom: 54px;
  }
}

/* =========================
   HERO CENTER LOGO
========================= */

.fc-hero {
  position: relative;
  overflow: hidden;
}

.fc-hero-center-logo {
  position: absolute;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  width: 230px;
  height: auto;
  opacity: 0.82;
  z-index: 1;
  pointer-events: none;
}

/* Hero breathing video background */

.fc-hero-breath-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Dark cinematic overlay over video, same feeling as old static background */

.fc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1));
}

/* Keep logo above video and overlay */

.fc-hero-center-logo {
  z-index: 2;
}

/* =========================
   GLASS ATELIER ACCESS POPUP
========================= */

:root {
  --fc-access-white: #f2f4f7;
  --fc-access-muted: #aeb5c0;
  --fc-access-dim: #8f97a3;
  --fc-access-panel: rgba(5, 7, 10, 0.64);
  --fc-access-stroke: rgba(255, 255, 255, 0.12);

  --fc-client-glow: #a46bff;
  --fc-admin-glow: #2f8cff;
  --fc-academy-glow: #b7ff5a;
}

body.fc-access-open {
  overflow: hidden;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Overlay zone: app-style area below fixed header */

.fc-access-overlay[hidden] {
  display: none !important;
}

.fc-access-overlay {
  position: fixed;
  top: 82px;
  left: 0;
  width: 100%;
  height: calc(100vh - 82px);
  height: calc(100svh - 82px);
  z-index: 10070;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transition: none;
}

.admin-bar .fc-access-overlay {
  top: 114px;
  height: calc(100vh - 114px);
  height: calc(100svh - 114px);
}

.fc-access-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fc-access-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      circle at 32% 45%,
      rgba(170, 105, 48, 0.24),
      transparent 34%
    ),
    radial-gradient(
      circle at 68% 44%,
      rgba(19, 83, 145, 0.32),
      transparent 36%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.fc-access-overlay.is-open .fc-access-backdrop {
  opacity: 1;
}

/* Popup physical shell */

.fc-access-popup {
  --fc-mode-glow: var(--fc-client-glow);
  --fc-access-popup-scale: 0.88;

  position: relative;
  z-index: 1;
  width: min(clamp(500px, 42vw, 740px), calc((100svh - 145px) * 0.89));
  aspect-ratio: 1396 / 1569;
  transform: translateY(0) scale(calc(var(--fc-access-popup-scale) * 0.985));
  opacity: 0;
  transition:
    opacity 0.55s ease,
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}

.fc-access-overlay.is-open .fc-access-popup {
  opacity: 1;
  transform: translateY(0) scale(var(--fc-access-popup-scale));
}

.fc-access-popup[data-mode="client"] {
  --fc-mode-glow: var(--fc-client-glow);
}

.fc-access-popup[data-mode="admin"] {
  --fc-mode-glow: var(--fc-admin-glow);
}

.fc-access-popup[data-mode="academy"] {
  --fc-mode-glow: var(--fc-academy-glow);
}

.fc-access-shell {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Close button: technically available, visually discreet */

.fc-access-close {
  position: absolute;
  top: 9.5%;
  right: 10.8%;
  z-index: 4;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  opacity: 0.22;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.fc-access-close::before,
.fc-access-close::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 8px;
  width: 18px;
  height: 1px;
  background: rgba(242, 244, 247, 0.9);
  box-shadow: 0 0 10px rgba(242, 244, 247, 0.22);
}

.fc-access-close::before {
  transform: rotate(45deg);
}

.fc-access-close::after {
  transform: rotate(-45deg);
}

.fc-access-close:hover,
.fc-access-close:focus-visible {
  opacity: 0.75;
  transform: scale(1.04);
}

/* Live HTML content over the PNG shell */

.fc-access-content {
  position: absolute;
  z-index: 2;
  left: 15.9%;
  top: 18.8%;
  width: 61.2%;
  height: 69.2%;
  display: flex;
  flex-direction: column;
  color: var(--fc-access-white);
  font-family: Inter, Arial, sans-serif;
}

.fc-access-kicker {
  margin: 0 0 clamp(5px, 0.55vw, 9px);
  color: rgba(184, 190, 200, 0.84);
  font-size: clamp(10px, 0.78vw, 15px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.fc-access-title {
  margin: 0 0 clamp(11px, 0.95vw, 18px);
  color: var(--fc-access-white);
  font-size: clamp(28px, 1.95vw, 38px);
  line-height: 1.05;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.fc-access-intro {
  margin: 0 0 clamp(24px, 2.35vw, 42px);
  max-width: 100%;
  color: rgba(174, 181, 192, 0.88);
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.5;
  font-weight: 400;
}

/* Access tabs */

.fc-access-tabs {
  width: 100%;
  align-self: flex-start;
  min-height: clamp(34px, 2.05vw, 42px);
  padding: 3px;
  margin: 0 0 clamp(18px, 1.85vw, 30px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  background: rgba(7, 9, 12, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.fc-access-tab {
  width: 100%;
  height: 100%;
  min-height: clamp(28px, 1.65vw, 34px);
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(143, 151, 163, 0.92);
  font-family: inherit;
  font-size: clamp(12px, 0.88vw, 16px);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.fc-access-tab[aria-pressed="true"] {
  color: rgba(242, 244, 247, 0.96);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 18px rgba(255, 255, 255, 0.04);
}

.fc-access-tab:hover,
.fc-access-tab:focus-visible {
  color: #ffffff;
  outline: none;
}

/* Form */

.fc-access-form {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 0.78vw, 13px);
}

.fc-access-field {
  position: relative;
  width: 100%;
  height: clamp(38px, 2.35vw, 48px);
  display: flex;
  align-items: center;
  border-radius: clamp(12px, 1.05vw, 18px);
  background: rgba(7, 9, 12, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.fc-access-field:focus-within {
  background: rgba(7, 9, 12, 0.48);
  border-color: color-mix(
    in srgb,
    var(--fc-mode-glow) 52%,
    rgba(255, 255, 255, 0.18)
  );
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.26),
    0 0 18px color-mix(in srgb, var(--fc-mode-glow) 28%, transparent);
}

.fc-access-field input {
  width: 100%;
  height: 100%;
  padding: 0 clamp(36px, 2.25vw, 44px);
  border: 0;
  outline: none;
  background: transparent;
  color: rgba(242, 244, 247, 0.94);
  font-family: inherit;
  font-size: clamp(12px, 0.82vw, 15px);
  font-weight: 400;
}

.fc-access-field input::placeholder {
  color: rgba(174, 181, 192, 0.72);
}

.fc-access-icon {
  position: absolute;
  left: clamp(13px, 0.95vw, 18px);
  top: 50%;
  width: clamp(13px, 0.9vw, 17px);
  height: clamp(13px, 0.9vw, 17px);
  transform: translateY(-50%);
  opacity: 0.56;
  pointer-events: none;
}

/* Email icon */

.fc-access-icon-email::before {
  content: "";
  position: absolute;
  inset: 2px 1px;
  border: 1.5px solid rgba(174, 181, 192, 0.82);
  border-radius: 2px;
}

.fc-access-icon-email::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 5px;
  height: 7px;
  border-left: 1.5px solid rgba(174, 181, 192, 0.82);
  border-bottom: 1.5px solid rgba(174, 181, 192, 0.82);
  transform: rotate(-45deg);
  transform-origin: center;
}

/* Lock icon */

.fc-access-icon-lock::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 2px;
  height: 9px;
  border: 1.5px solid rgba(174, 181, 192, 0.82);
  border-radius: 2px;
}

.fc-access-icon-lock::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 7px;
  height: 8px;
  border: 1.5px solid rgba(174, 181, 192, 0.82);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.fc-access-eye {
  position: absolute;
  right: clamp(11px, 0.9vw, 16px);
  top: 50%;
  width: clamp(22px, 1.35vw, 28px);
  height: clamp(22px, 1.35vw, 28px);
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.62;
  transition:
    opacity 0.25s ease,
    filter 0.25s ease;
}

.fc-access-eye span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 10px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(174, 181, 192, 0.82);
  border-radius: 50%;
}

.fc-access-eye span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(174, 181, 192, 0.82);
}

.fc-access-eye:hover,
.fc-access-eye:focus-visible {
  opacity: 0.95;
  outline: none;
  filter: drop-shadow(
    0 0 8px color-mix(in srgb, var(--fc-mode-glow) 34%, transparent)
  );
}

/* CTA */

.fc-access-cta {
  position: relative;
  align-self: flex-start;
  width: clamp(135px, 11.5vw, 185px);
  height: clamp(32px, 1.95vw, 40px);
  margin-top: clamp(6px, 0.62vw, 11px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    ),
    rgba(7, 9, 12, 0.26);
  color: rgba(242, 244, 247, 0.98);
  font-family: inherit;
  font-size: clamp(14px, 0.98vw, 18px);
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fc-mode-glow) 48%, transparent),
    0 0 16px color-mix(in srgb, var(--fc-mode-glow) 44%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -10px 22px rgba(255, 255, 255, 0.03);
  transition:
    transform 0.25s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.fc-access-cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 18% 50%,
      rgba(255, 255, 255, 0.32),
      transparent 22%
    ),
    radial-gradient(
      circle at 80% 50%,
      color-mix(in srgb, var(--fc-mode-glow) 55%, transparent),
      transparent 30%
    );
  opacity: 0.36;
  pointer-events: none;
}

.fc-access-cta:hover,
.fc-access-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.36);
  outline: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fc-mode-glow) 64%, transparent),
    0 0 24px color-mix(in srgb, var(--fc-mode-glow) 58%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -10px 22px rgba(255, 255, 255, 0.04);
}

/* Footer */

.fc-access-footer {
  position: relative;
  margin-top: auto;
  padding-top: clamp(40px, 3vw, 56px);
  padding-bottom: 1px;
  transform: translateY(-14px);
}

.fc-access-footer-copy {
  max-width: 94%;
  margin: 0 0 clamp(10px, 0.78vw, 15px);
  color: rgba(174, 181, 192, 0.72);
  font-size: clamp(11.5px, 0.78vw, 15px);
  line-height: 1.5;
  font-weight: 400;
}

.fc-access-footer-copy strong {
  color: #f0cf32;
  font-weight: 600;
}

.fc-access-footer-links {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(8px, 0.72vw, 14px);
  color: rgba(212, 216, 223, 0.68);
}

.fc-access-footer-links button {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(212, 216, 223, 0.86);
  font-family: inherit;
  font-size: clamp(10px, 0.7vw, 13px);
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.24s ease,
    text-shadow 0.24s ease;
}

.fc-access-footer-links span {
  color: rgba(212, 216, 223, 0.5);
  font-size: clamp(8px, 0.55vw, 10px);
}

.fc-access-footer-links button:hover,
.fc-access-footer-links button:focus-visible,
.fc-access-footer-links button.is-active {
  color: #ffffff;
  outline: none;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.26),
    0 0 18px color-mix(in srgb, var(--fc-mode-glow) 28%, transparent);
}

/* Glass Info Bubble */

.fc-access-info-bubble {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: clamp(15px, 1.35vw, 26px);
  width: min(96%, 430px);
  min-height: clamp(118px, 8.4vw, 160px);
  padding: clamp(17px, 1.25vw, 24px);
  border-radius: clamp(16px, 1.25vw, 24px);
  background: linear-gradient(
    180deg,
    rgba(12, 15, 20, 0.78),
    rgba(4, 6, 9, 0.74)
  );
  border: 0;
  color: var(--fc-access-white);
  opacity: 0;
  transform: translateY(18px) scaleY(0.78);
  overflow: hidden;
  background-clip: padding-box;
  backface-visibility: hidden;
  transform-origin: bottom center;
  clip-path: inset(100% 0 0 0 round 24px);
  pointer-events: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 22px color-mix(in srgb, var(--fc-mode-glow) 18%, transparent);
  transition:
    opacity 0.32s ease,
    transform 0.38s ease,
    clip-path 0.38s ease;
}

.fc-access-info-bubble.is-open {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  clip-path: inset(0 0 0 0 round 24px);
  pointer-events: auto;
}

.fc-access-info-bubble[data-pos="access"] {
  left: 0;
}

.fc-access-info-bubble[data-pos="workflow"] {
  left: 14%;
}

.fc-access-info-bubble[data-pos="smart"] {
  left: auto;
  right: 6%;
}

.fc-access-info-bubble[data-pos="method"] {
  left: auto;
  right: 0;
}

.fc-access-info-bubble h3 {
  margin: 0 0 8px;
  color: rgba(242, 244, 247, 0.96);
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 1.2;
  font-weight: 700;
}

.fc-access-info-bubble p {
  margin: 0;
  color: rgba(174, 181, 192, 0.86);
  font-size: clamp(12px, 0.82vw, 16px);
  line-height: 1.55;
}

/* Tablet / smaller desktop */

@media (max-width: 1100px) {
  .fc-access-popup {
    width: min(74vw, 520px);
  }

  .fc-access-content {
    left: 16%;
    top: 18.6%;
    width: 61.5%;
  }
}

/* Laptop height safety */

@media (max-height: 760px) and (min-width: 701px) {
  .fc-access-popup {
    width: min(86vw, 620px);
  }

  .fc-access-intro {
    margin-bottom: 18px;
  }

  .fc-access-tabs {
    margin-bottom: 15px;
  }

  .fc-access-cta {
    margin-top: 11px;
  }
}

/* Mobile */

@media (max-width: 700px) {
  .fc-access-overlay {
    top: 82px;
    height: calc(100vh - 82px);
    height: calc(100svh - 82px);
  }

  .admin-bar .fc-access-overlay {
    top: 128px;
    height: calc(100vh - 128px);
    height: calc(100svh - 128px);
  }

  .fc-access-popup {
    width: min(92vw, 420px);
    transform: translateY(-0.5vh) scale(0.985);
  }

  .fc-access-overlay.is-open .fc-access-popup {
    transform: translateY(-0.5vh) scale(1);
  }

  .fc-access-content {
    left: 16%;
    top: 18.4%;
    width: 61.5%;
    height: 69.5%;
  }

  .fc-access-footer-links {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .fc-access-info-bubble {
    width: 100%;
    left: 0 !important;
    right: auto !important;
    bottom: 42px;
  }
}

/* Very short screens */

@media (max-height: 620px) {
  .fc-access-popup {
    width: min(86vw, 390px);
  }

  .fc-access-footer-copy {
    display: none;
  }

  .fc-access-info-bubble {
    bottom: 30px;
  }
}

#fcAccessTitle,
#fcAccessIntro {
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    filter 0.28s ease;
}

#fcAccessTitle.is-changing,
#fcAccessIntro.is-changing {
  opacity: 0;
  transform: translateY(4px);
  filter: blur(3px);
}

/* =========================
   HEADER LOGIN INFO BUBBLE
========================= */

.fc-login-info-bubble {
  position: absolute;
  top: calc(100% + 1px);
  right: 42px;
  z-index: 10045;
  width: min(370px, calc(100vw - 84px));
  padding: 22px 24px;
  border: 0;
  border-radius: 26px;
  background: linear-gradient(
    180deg,
    rgba(12, 15, 20, 0.82),
    rgba(4, 6, 9, 0.78)
  );
  color: var(--fc-access-white, #f2f4f7);
  opacity: 0;
  transform: translateY(-10px) scaleY(0.82);
  transform-origin: top right;
  pointer-events: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(164, 107, 255, 0.18);
  transition:
    opacity 0.32s ease,
    transform 0.38s ease;
}

.fc-login-info-bubble.is-open {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

.fc-login-info-bubble h3 {
  margin: 0 0 10px;
  color: rgba(242, 244, 247, 0.96);
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 1.2;
  font-weight: 700;
}

.fc-login-info-bubble p {
  margin: 0;
  color: rgba(174, 181, 192, 0.88);
  font-size: clamp(12px, 0.82vw, 16px);
  line-height: 1.55;
}

@media (max-width: 700px) {
  .fc-login-info-bubble {
    display: none;
  }
}

/* =========================
   GLASS ACCESS DOCK — CLIENT / STUDENT INFO
========================= */

.fc-header-info-dock {
  position: absolute;
  top: 50%;
  left: calc(75vw - 32px);
  right: auto;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translate(-50%, -50%);
}

.fc-header-info-button {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-header-info-icon {
  position: relative;
  width: 52px;
  height: 52px;
  max-width: none;
  flex: 0 0 52px;
  display: block;
  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;
}

.fc-header-info-button:hover .fc-header-info-icon,
.fc-header-info-button:focus-visible .fc-header-info-icon {
  opacity: 0.95;
  filter: saturate(1) brightness(1.05)
    drop-shadow(0 0 12px rgba(214, 178, 60, 0.2));
}

.fc-header-info-icon > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.fc-header-info-icon-client > img {
  position: relative;
  left: -20px;
}

.fc-header-info-icon-value > img {
  position: relative;
  left: 20px;
}

/* Shared glass bubble for Client / Student icons */

.fc-header-info-bubble {
  position: absolute;
  top: calc(100% + 1px);
  left: calc(75vw - 32px);
  right: auto;
  z-index: 10045;
  width: min(370px, calc(100vw - 84px));
  padding: 22px 24px;
  border: 0;
  border-radius: 26px;
  background: linear-gradient(
    180deg,
    rgba(12, 15, 20, 0.82),
    rgba(4, 6, 9, 0.78)
  );
  color: var(--fc-access-white, #f2f4f7);
  opacity: 0;
  transform: translateY(-10px) scaleY(0.82);
  transform-origin: top right;
  pointer-events: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(164, 107, 255, 0.18);
  transition:
    opacity 0.32s ease,
    transform 0.38s ease;
}

.fc-header-info-bubble.is-open {
  opacity: 1;
  transform: translate(-50%, 0) scaleY(1);
  pointer-events: auto;
}

.fc-header-info-bubble h3 {
  margin: 0 0 10px;
  color: rgba(242, 244, 247, 0.96);
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 1.2;
  font-weight: 700;
}

.fc-header-info-bubble p {
  margin: 0;
  color: rgba(174, 181, 192, 0.88);
  font-size: clamp(12px, 0.82vw, 16px);
  line-height: 1.55;
}

/* =========================
   HEADER INFO BUBBLE PREVIEW IMAGES
========================= */

.fc-header-info-bubble__visual,
.fc-login-info-bubble__visual {
  display: block;
  width: calc(100% + 48px);
  aspect-ratio: 1302 / 728;
  margin: 22px -24px -22px;
  border-radius: 0 0 26px 26px;
  background-color: #030405;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

/* Client Project Path */
.fc-header-info-bubble[data-info="client"] .fc-header-info-bubble__visual {
  background-image: url("../img/header-bubbles/client-project-path-preview.png");
}

/* Art to SMART Academy */
.fc-header-info-bubble[data-info="student"] .fc-header-info-bubble__visual {
  background-image: url("../img/header-bubbles/art-to-smart-academy-preview.png");
}

/* Project Value */
.fc-header-info-bubble[data-info="value"] .fc-header-info-bubble__visual {
  background-image: url("../img/header-bubbles/project-value-preview.png");
}

/* Art to SMART Access */
.fc-login-info-bubble__visual {
  background-image: url("../img/header-bubbles/art-to-smart-access-preview.png");
}

@media (max-width: 700px) {
  .fc-header-info-dock,
  .fc-header-info-bubble {
    display: none;
  }
}

/* =========================
   ACCESS POPUP — FINAL DESKTOP SCALE LOCK
========================= */

@media (min-width: 701px) {
  .fc-access-popup {
    --fc-access-popup-scale: 0.88;
    width: 620px;
    max-width: calc(100vw - 84px);
  }
}

@media (min-width: 701px) and (max-height: 760px) {
  .fc-access-popup {
    width: 620px;
    max-width: calc(100vw - 84px);
  }
}

@media (min-width: 701px) and (max-height: 690px) {
  .fc-access-popup {
    width: 580px;
  }
}

@media (min-width: 1921px) {
  .fc-access-popup {
    width: min(740px, calc(100vw - 120px), calc((100svh - 145px) * 0.98));
    transform-origin: center center;
  }
}

/* =========================
   ACCESS POPUP — SMART VERIFICATION UI
========================= */

.fc-access-hp-wrap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fc-access-turnstile {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.fc-access-security-note {
  margin: 12px 0 0;
  color: rgba(174, 181, 192, 0.54);
  font-size: clamp(10px, 0.66vw, 12px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.fc-access-status {
  min-height: 14px;
  margin: 4px 0 0;
  color: rgba(174, 181, 192, 0.74);
  font-size: clamp(10px, 0.68vw, 13px);
  line-height: 1.35;
  font-weight: 500;
}

.fc-access-status.is-info {
  color: rgba(190, 200, 214, 0.78);
}

.fc-access-status.is-success {
  color: rgba(183, 255, 90, 0.82);
}

.fc-access-status.is-error {
  color: rgba(255, 150, 150, 0.86);
}

.fc-access-cta:disabled,
.fc-access-cta.is-loading {
  cursor: wait;
  opacity: 0.78;
}

/* =========================
   HEADER PROJECT VALUE / INVESTMENT GUIDE
========================= */

.fc-header-info-dock {
  gap: 14px;
}

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

.fc-project-value-cloud {
  position: fixed;
  top: 102px;
  left: 50%;
  width: min(920px, 74vw);
  min-height: clamp(440px, 27vw, 505px);
  display: flex;
  align-items: center;
  z-index: 10035;
  isolation: isolate;

  padding: clamp(30px, 2.2vw, 44px) clamp(34px, 2.6vw, 54px);
  border-radius: clamp(30px, 2.4vw, 42px);

  background:
    radial-gradient(
      circle at 62% 12%,
      rgba(216, 173, 66, 0.14),
      transparent 32%
    ),
    radial-gradient(
      circle at 18% 88%,
      rgba(70, 78, 130, 0.12),
      transparent 42%
    ),
    linear-gradient(135deg, rgba(6, 8, 13, 0.9), rgba(6, 10, 18, 0.86));

  color: var(--fc-access-white, #f2f4f7);
  border: 1px solid rgba(255, 255, 255, 0.075);
  outline: none;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 90px rgba(0, 0, 0, 0.28),
    0 32px 90px rgba(0, 0, 0, 0.42),
    0 0 56px rgba(211, 162, 27, 0.16),
    0 0 110px rgba(168, 132, 255, 0.08);

  backdrop-filter: blur(28px) saturate(0.88);
  -webkit-backdrop-filter: blur(28px) saturate(0.88);

  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px) scale(0.975);
  filter: blur(5px);
  pointer-events: none;

  transition:
    opacity 0.34s ease,
    visibility 0.34s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.34s ease;
}

.fc-project-value-cloud::before,
.fc-project-value-cloud::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.fc-project-value-cloud::before {
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035),
      transparent 18%,
      transparent 82%,
      rgba(255, 255, 255, 0.025)
    ),
    radial-gradient(
      circle at 56% 20%,
      rgba(216, 173, 66, 0.08),
      transparent 30%
    );
  opacity: 0.85;
}

.fc-project-value-cloud::after {
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)),
    radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0.18), transparent 58%);
}

.fc-project-value-cloud.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.fc-project-value-cloud-glow {
  position: absolute;
  inset: -16%;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 50% 32%,
      rgba(211, 162, 27, 0.18),
      transparent 48%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(168, 132, 255, 0.1),
      transparent 44%
    );
  filter: blur(22px);
  opacity: 0.72;
  pointer-events: none;
}

.fc-project-value-cloud-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 560px;
  padding: 52px 58px 46px;
  transform: translateY(-1%);
}

.fc-project-value-cloud-kicker {
  margin: 0 0 clamp(12px, 0.85vw, 18px);
  color: rgba(211, 162, 27, 0.92);
  font-size: clamp(9px, 0.62vw, 12px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.fc-project-value-cloud-title {
  margin: 0 0 clamp(15px, 1.2vw, 24px);
  color: rgba(244, 243, 247, 0.92);
  font-size: clamp(26px, 2vw, 40px);
  line-height: 1.05;
  font-weight: 780;
  letter-spacing: -0.025em;
}

.fc-project-value-cloud-lead,
.fc-project-value-cloud-note {
  max-width: 96%;
  margin: 0;
  color: rgba(226, 228, 236, 0.72);
  font-size: clamp(12px, 0.86vw, 16px);
  line-height: 1.58;
  font-weight: 400;
}

.fc-project-value-cloud-grid {
  margin: 28px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.fc-project-value-card {
  min-height: clamp(112px, 8vw, 150px);
  padding: clamp(18px, 1.3vw, 26px);
  border-radius: clamp(18px, 1.3vw, 26px);
  background: linear-gradient(
    135deg,
    rgba(5, 7, 12, 0.58),
    rgba(6, 8, 14, 0.44)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 38px rgba(0, 0, 0, 0.2);
}

.fc-project-value-card h3 {
  margin: 0 0 clamp(12px, 0.9vw, 18px);
  color: rgba(244, 243, 247, 0.88);
  font-size: clamp(13px, 0.92vw, 17px);
  line-height: 1.28;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.fc-project-value-time {
  margin: 0 0 6px;
  color: rgba(226, 228, 236, 0.66);
  font-size: clamp(11px, 0.76vw, 14px);
  line-height: 1.35;
}

.fc-project-value-price {
  margin: 0;
  color: rgba(211, 162, 27, 0.94);
  font-size: clamp(15px, 1.05vw, 20px);
  line-height: 1.25;
  font-weight: 780;
}

.fc-project-value-contact-line {
  max-width: 96%;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.58;
}

.fc-project-value-cloud-close {
  position: absolute;
  top: 34px;
  right: 34px;
  left: auto;
  bottom: auto;
  z-index: 20;
  width: clamp(28px, 1.9vw, 38px);
  height: clamp(28px, 1.9vw, 38px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.58;
  transform: none;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    filter 0.24s ease;
}

.fc-project-value-cloud-close:hover,
.fc-project-value-cloud-close:focus-visible {
  opacity: 0.96;
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(211, 162, 27, 0.34));
  outline: none;
}

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

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

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

/* =========================
   HEADER INFO BUBBLES — FINAL COLOR SYSTEM
========================= */

.fc-login-info-bubble,
.fc-header-info-bubble {
  isolation: isolate;
  overflow: visible;
}

/* User / Art to SMART Access bubble — blue */
.fc-login-info-bubble {
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(47, 140, 255, 0.24);
}

.fc-login-info-bubble::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle at 52% 42%,
    rgba(47, 140, 255, 0.18),
    transparent 52%
  );
  filter: blur(18px);
  pointer-events: none;
}

/* Client Project Path bubble — purple */
.fc-header-info-bubble[data-info="client"] {
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(164, 107, 255, 0.24);
}

.fc-header-info-bubble[data-info="client"]::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle at 52% 42%,
    rgba(164, 107, 255, 0.18),
    transparent 52%
  );
  filter: blur(18px);
  pointer-events: none;
}

/* Art to SMART Academy bubble — yellow-green */
.fc-header-info-bubble[data-info="student"] {
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(183, 255, 90, 0.22);
}

.fc-header-info-bubble[data-info="student"]::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle at 52% 42%,
    rgba(183, 255, 90, 0.16),
    transparent 52%
  );
  filter: blur(18px);
  pointer-events: none;
}

/* Project Value bubble — gold */
.fc-header-info-bubble[data-info="value"] {
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(211, 162, 27, 0.24);
}

.fc-header-info-bubble[data-info="value"]::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle at 52% 42%,
    rgba(211, 162, 27, 0.18),
    transparent 52%
  );
  filter: blur(18px);
  pointer-events: none;
}

@media (max-width: 700px) {
  .fc-project-value-cloud {
    display: none !important;
  }
}

/* =========================================================
   USER ACCESS POPUP — FINAL INNER CONTENT LIFT
   ========================================================= */

.fc-access-form {
  transform: translateY(-14px);
}

.fc-access-footer {
  transform: translateY(-20px);
  padding-top: 6px;
}

.fc-access-footer-copy {
  margin-top: 0;
}

.fc-access-footer-links {
  margin-top: 8px;
}
/* =========================================================
   PROJECT VALUE — DOCUMENTATION SAMPLE CLOUD
   ========================================================= */

.fc-project-value-doc-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 217, 120, 0.9);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  text-shadow: 0 0 14px rgba(216, 173, 66, 0.32);
  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease;
}

.fc-project-value-doc-trigger::before {
  content: "↳";
  margin-right: 8px;
  color: rgba(255, 231, 155, 0.86);
}

.fc-project-value-doc-trigger:hover,
.fc-project-value-doc-trigger:focus-visible {
  color: rgba(255, 235, 165, 1);
  text-shadow: 0 0 20px rgba(216, 173, 66, 0.52);
  transform: translateY(-1px);
  outline: none;
}

/* Documentation Sample overlay is intentionally clean.
   The dark glass feeling belongs to the cloud, not to a full-screen rectangle. */

.fc-documentation-sample-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 72px);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.fc-documentation-sample-overlay[hidden] {
  display: none;
}

.fc-documentation-sample-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fc-documentation-sample-cloud {
  position: relative;
  width: clamp(680px, 62vw, 980px);
  max-width: calc(100vw - 56px);
  max-height: min(78vh, 780px);
  padding: clamp(42px, 4vw, 66px);
  border-radius: clamp(30px, 2.4vw, 48px);
  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));
  border: 1px solid rgba(255, 255, 255, 0.09);
  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);
  overflow: hidden;
  transform: translateY(280px);
}

.fc-documentation-sample-cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  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%);
  opacity: 0.72;
}

.fc-documentation-sample-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-documentation-sample-close:hover {
  opacity: 1;
  transform: scale(1.04);
  filter: drop-shadow(0 0 10px rgba(216, 173, 66, 0.26));
}

.fc-documentation-sample-close:focus,
.fc-documentation-sample-close:focus-visible {
  outline: none;
  box-shadow: none;
}

.fc-documentation-sample-close span,
.fc-documentation-sample-close span::before,
.fc-documentation-sample-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-documentation-sample-close span {
  background: transparent;
}

.fc-documentation-sample-close span::before,
.fc-documentation-sample-close span::after {
  content: "";
}

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

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

.fc-documentation-sample-scroll {
  position: relative;
  z-index: 2;
  max-height: calc(min(78vh, 780px) - 104px);
  overflow-y: auto;
  padding-top: 22px;
  padding-right: 22px;
  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-documentation-sample-scroll::-webkit-scrollbar {
  width: 4px;
}

.fc-documentation-sample-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.025);
  border-radius: 999px;
}

.fc-documentation-sample-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 224, 140, 0.54),
    rgba(216, 173, 66, 0.28)
  );
  border-radius: 999px;
}

.fc-documentation-sample-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 224, 140, 0.68),
    rgba(216, 173, 66, 0.38)
  );
}

.fc-documentation-sample-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-documentation-sample-cloud h2 {
  margin: 0 0 20px;
  max-width: 760px;
  color: rgba(244, 243, 247, 0.96);
  font-size: clamp(24px, 1.9vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.fc-documentation-sample-intro {
  max-width: 820px;
  margin: 0 0 28px;
  color: rgba(220, 222, 230, 0.82);
  font-size: 14px;
  line-height: 1.58;
}

.fc-documentation-sample-cloud h3 {
  margin: 24px 0 8px;
  color: #d8ad42;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-shadow: 0 0 12px rgba(216, 173, 66, 0.24);
}

.fc-documentation-sample-cloud p,
.fc-documentation-sample-cloud li {
  color: rgba(220, 222, 230, 0.82);
  font-size: 14px;
  line-height: 1.58;
}

.fc-documentation-sample-cloud p {
  margin: 0 0 14px;
}

.fc-documentation-sample-cloud ul {
  margin: 0 0 20px;
  padding-left: 20px;
}

.fc-documentation-sample-cloud li {
  margin: 4px 0;
}

.fc-documentation-sample-cloud pre {
  margin: 16px 0 24px;
  padding: 15px 18px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow-x: auto;
}

.fc-documentation-sample-cloud code {
  color: rgba(244, 243, 247, 0.86);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
}

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

html.fc-documentation-sample-open,
body.fc-documentation-sample-open {
  overflow: hidden;
}

/* Hide Project Value visual layers while Documentation Sample is open. */

html.fc-documentation-sample-open .fc-project-value-cloud,
body.fc-documentation-sample-open .fc-project-value-cloud,
html.fc-documentation-sample-open #fcProjectValueCloud,
body.fc-documentation-sample-open #fcProjectValueCloud {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.fc-documentation-sample-open .fc-project-value-cloud::before,
html.fc-documentation-sample-open .fc-project-value-cloud::after,
body.fc-documentation-sample-open .fc-project-value-cloud::before,
body.fc-documentation-sample-open .fc-project-value-cloud::after {
  opacity: 0;
  visibility: hidden;
}
/* =========================================================
   BODY STORYTELLING — HERO MORE / TOP REVEAL SYSTEM
   ========================================================= */

html.fc-body-locked,
body.fc-body-locked {
  overflow: hidden;
}

.fc-more-toggle {
  position: fixed;
  right: 0;
  bottom: clamp(22px, 3.4vw, 54px);
  z-index: 120;
  width: 34px;
  height: 118px;
  padding: 0;
  border: 0;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.94));
  color: #706957;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.055),
    0 0 22px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    color 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.35s ease;
}

.fc-more-toggle-text {
  display: block;
  color: currentColor;
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.fc-more-toggle:hover,
.fc-more-toggle:focus-visible {
  color: #958b73;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 18, 0.86),
    rgba(0, 0, 0, 0.96)
  );
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    0 0 20px rgba(149, 139, 115, 0.18),
    0 0 34px rgba(154, 125, 63, 0.12);
  transform: translateX(-2px);
  outline: none;
}

body.fc-body-revealed .fc-more-toggle {
  color: #706957;
}

body.fc-body-revealed .fc-more-toggle:hover,
body.fc-body-revealed .fc-more-toggle:focus-visible {
  color: #958b73;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    0 0 22px rgba(149, 139, 115, 0.20),
    0 0 44px rgba(154, 125, 63, 0.12);
}

/* =========================================================
   BODY STORYTELLING — GLOBAL WRAPPER
   ========================================================= */

.fc-body-storytelling {
  position: relative;
  width: 100%;
  background: #000000;
  color: rgba(244, 243, 247, 0.92);
}

.fc-body-storytelling[hidden] {
  display: none !important;
}

/* =========================================================
   BLOCK 01 — CLIENT TRUST / TRANSGEN PILOT
   ========================================================= */

.fc-client-trust {
  position: relative;
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(420px, 42%) minmax(0, 58%);
  column-gap: clamp(34px, 4vw, 82px);
  padding: clamp(116px, 10vw, 170px) clamp(72px, 9.4vw, 180px)
    clamp(70px, 6vw, 110px);
  background:
    radial-gradient(
      circle at 72% 44%,
      rgba(216, 130, 34, 0.09),
      transparent 28%
    ),
    radial-gradient(circle at 50% 0%, rgba(35, 70, 115, 0.08), transparent 36%),
    linear-gradient(180deg, #000000, #030303);
  overflow: hidden;
  isolation: isolate;
}

.fc-client-trust::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 96px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0));
}

.fc-client-trust-left,
.fc-client-trust-right {
  position: relative;
  z-index: 2;
}

.fc-client-trust-left {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.fc-client-trust-kicker {
  margin: 0 0 18px;
  color: rgba(211, 162, 27, 0.72);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.fc-client-trust h2 {
  margin: 0 0 26px;
  color: rgba(244, 243, 247, 0.78);
  font-size: clamp(34px, 3.4vw, 58px);
  line-height: 0.96;
  font-weight: 780;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.fc-client-trust-lead {
  max-width: 470px;
  margin: 0 0 64px;
  color: rgba(226, 228, 236, 0.58);
  font-size: clamp(17px, 1.18vw, 22px);
  line-height: 1.28;
  font-weight: 780;
  letter-spacing: -0.025em;
}

.fc-client-trust-copy {
  max-width: 450px;
  min-height: 112px;
  color: rgba(226, 228, 236, 0.78);
  font-size: clamp(13px, 0.86vw, 16px);
  line-height: 1.52;
  font-weight: 500;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    filter 0.35s ease;
}

.fc-client-trust-copy.is-changing {
  opacity: 0;
  transform: translateY(5px);
  filter: blur(4px);
}

.fc-client-trust-copy p {
  margin: 0;
}

.fc-client-trust-nav {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 2.2vw, 42px);
}

.fc-client-trust-nav button {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(230, 225, 216, 0.32);
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(10px, 0.72vw, 13px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.45s ease,
    opacity 0.45s ease,
    text-shadow 0.45s ease,
    transform 0.35s ease;
}

.fc-client-trust-nav button:hover,
.fc-client-trust-nav button:focus-visible {
  color: rgba(230, 225, 216, 0.86);
  text-shadow: 0 0 12px rgba(230, 225, 216, 0.22);
  transform: translateY(-1px);
  outline: none;
}

.fc-client-trust-nav button.is-active {
  color: rgba(216, 173, 66, 0.88);
  text-shadow:
    0 0 12px rgba(216, 173, 66, 0.22),
    0 0 26px rgba(216, 130, 34, 0.12);
}

/* =========================================================
   CLIENT TRUST — RIGHT ANIMATION STAGE
   ========================================================= */

.fc-client-trust-right {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-proof-stage {
  position: relative;
  width: min(760px, 100%);
  height: clamp(430px, 37vw, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(216, 130, 34, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 50% 68%,
      rgba(255, 255, 255, 0.035),
      transparent 34%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.14));
}

.fc-proof-stage::before {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 174, 48, 0.12),
    transparent 46%
  );
  filter: blur(28px);
  opacity: 0.38;
  pointer-events: none;
}

.fc-proof-stage-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 190, 58, 0.15),
    rgba(216, 130, 34, 0.055) 36%,
    transparent 68%
  );
  filter: blur(20px);
  opacity: 0.58;
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.fc-proof-smoke {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 440px;
  height: 260px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: screen;
  filter: blur(24px);
}

.fc-proof-smoke-one {
  background: radial-gradient(
    circle at 38% 52%,
    rgba(255, 255, 255, 0.16),
    transparent 52%
  );
  animation: fcProofSmokeDriftOne 7.5s ease-in-out infinite alternate;
}

.fc-proof-smoke-two {
  background: radial-gradient(
    circle at 62% 48%,
    rgba(255, 145, 35, 0.18),
    transparent 54%
  );
  animation: fcProofSmokeDriftTwo 8.6s ease-in-out infinite alternate;
}

.fc-proof-title {
  position: absolute;
  left: 50%;
  top: 49%;
  z-index: 5;
  transform: translate(-50%, -50%);
  color: rgba(230, 225, 216, 0.44);
  font-size: clamp(24px, 2.2vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.045em;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 0 18px rgba(230, 225, 216, 0.09);
  opacity: 1;
  transition:
    opacity 0.45s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease,
    color 0.45s ease,
    text-shadow 0.45s ease;
}

.fc-proof-canvas {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.fc-proof-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  width: clamp(390px, 34vw, 620px);
  max-width: 82%;
  height: auto;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(255, 160, 36, 0.16))
    drop-shadow(0 0 32px rgba(255, 255, 255, 0.07));
  transition:
    opacity 0.8s ease,
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
}

.fc-proof-meta {
  position: absolute;
  left: 50%;
  bottom: clamp(42px, 4vw, 72px);
  z-index: 8;
  transform: translateX(-50%);
  width: min(540px, 88%);
  color: rgba(230, 225, 216, 0.38);
  font-size: clamp(10px, 0.7vw, 13px);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    filter 0.55s ease;
}

/* Animation phase classes controlled by main.js */

.fc-proof-stage.is-text-breaking .fc-proof-title {
  color: rgba(255, 235, 190, 0.72);
  text-shadow:
    0 0 14px rgba(255, 190, 58, 0.28),
    0 0 32px rgba(255, 112, 28, 0.12);
  filter: blur(1.4px);
  transform: translate(-50%, -50%) scale(1.015);
}

.fc-proof-stage.is-logo-visible .fc-proof-title {
  opacity: 0;
  transform: translate(-50%, -58%) scale(0.94);
  filter: blur(8px);
}

.fc-proof-stage.is-logo-visible .fc-proof-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: fcProofLogoBreath 4.8s ease-in-out infinite;
}

.fc-proof-stage.is-logo-visible .fc-proof-meta {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  filter: blur(0);
}

.fc-proof-stage.is-logo-visible .fc-proof-stage-glow {
  opacity: 0.82;
  transform: translate(-50%, -50%) scale(1.1);
}

.fc-proof-stage.is-dissolving .fc-proof-logo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.08);
  filter: blur(6px) drop-shadow(0 0 34px rgba(255, 160, 36, 0.24));
}

.fc-proof-stage.is-dissolving .fc-proof-meta {
  opacity: 0;
  filter: blur(5px);
}

.fc-proof-stage.is-paused .fc-proof-logo,
.fc-proof-stage.is-paused .fc-proof-smoke-one,
.fc-proof-stage.is-paused .fc-proof-smoke-two {
  animation-play-state: paused;
}

.fc-proof-stage:hover .fc-proof-logo {
  transform: translate(-50%, -50%) scale(1.045);
  filter: drop-shadow(0 0 24px rgba(255, 160, 36, 0.24))
    drop-shadow(0 0 48px rgba(255, 255, 255, 0.09));
}

@keyframes fcProofLogoBreath {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.035);
  }
}

@keyframes fcProofSmokeDriftOne {
  0% {
    transform: translate(-54%, -51%) scale(0.96) rotate(-3deg);
    opacity: 0.12;
  }

  100% {
    transform: translate(-47%, -48%) scale(1.12) rotate(4deg);
    opacity: 0.22;
  }
}

@keyframes fcProofSmokeDriftTwo {
  0% {
    transform: translate(-46%, -52%) scale(1.02) rotate(4deg);
    opacity: 0.1;
  }

  100% {
    transform: translate(-53%, -47%) scale(1.16) rotate(-5deg);
    opacity: 0.24;
  }
}

/* Desktop safety */

@media (max-width: 1280px) {
  .fc-client-trust {
    grid-template-columns: minmax(360px, 42%) minmax(0, 58%);
    padding-left: 120px;
    padding-right: 90px;
  }

  .fc-client-trust-nav {
    gap: 26px;
  }
}
/* =========================================================
   CLIENT TRUST — TRANSGEN PREMIUM LOGO REVEAL V3
   Professional PNG logo reveal, smoke, heat and light sweep
   ========================================================= */

.fc-proof-stage {
  border-radius: 42px;
  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(216, 130, 34, 0.055),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 62%,
      rgba(255, 255, 255, 0.025),
      transparent 38%
    ),
    linear-gradient(180deg, rgba(4, 4, 4, 0.22), rgba(0, 0, 0, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    inset 0 0 90px rgba(0, 0, 0, 0.42);
}

.fc-proof-stage::before {
  inset: 16%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(216, 130, 34, 0.075),
    transparent 58%
  );
  filter: blur(34px);
  opacity: 0.32;
}

.fc-proof-canvas {
  z-index: 8;
  mix-blend-mode: screen;
  opacity: 0.96;
}

.fc-proof-stage-glow {
  z-index: 1;
  width: 480px;
  height: 360px;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 172, 52, 0.12),
    rgba(216, 130, 34, 0.045) 38%,
    transparent 72%
  );
  filter: blur(30px);
  opacity: 0.22;
}

.fc-proof-title {
  z-index: 5;
  color: rgba(230, 225, 216, 0.42);
  text-shadow: 0 0 18px rgba(230, 225, 216, 0.08);
  transition:
    opacity 0.8s ease,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease,
    letter-spacing 1s ease,
    color 0.8s ease;
}

.fc-proof-logo {
  z-index: 7;
  opacity: 0;
  clip-path: inset(0 48% 0 48%);
  transform: translate(-50%, -50%) scale(0.94);
  filter: blur(2px) drop-shadow(0 0 18px rgba(255, 160, 36, 0.08))
    drop-shadow(0 0 34px rgba(255, 255, 255, 0.035));
  transition:
    opacity 1.25s ease,
    transform 1.65s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1.65s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.25s ease;
}

.fc-proof-meta {
  z-index: 10;
  opacity: 0;
  color: rgba(230, 225, 216, 0.34);
  transform: translateX(-50%) translateY(8px);
  transition:
    opacity 1.1s ease,
    transform 1.1s ease,
    filter 1.1s ease;
}

.fc-proof-stage.is-premium-intro .fc-proof-title {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
  letter-spacing: -0.045em;
}

.fc-proof-stage.is-premium-preheat .fc-proof-title {
  opacity: 0.18;
  color: rgba(255, 230, 188, 0.56);
  transform: translate(-50%, -52%) scale(1.012);
  filter: blur(3px);
  letter-spacing: 0.015em;
}

.fc-proof-stage.is-premium-reveal .fc-proof-title,
.fc-proof-stage.is-premium-hold .fc-proof-title,
.fc-proof-stage.is-premium-dissolve .fc-proof-title {
  opacity: 0;
  transform: translate(-50%, -57%) scale(0.97);
  filter: blur(8px);
}

.fc-proof-stage.is-premium-reveal .fc-proof-logo {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0) drop-shadow(0 0 22px rgba(255, 160, 36, 0.18))
    drop-shadow(0 0 40px rgba(255, 255, 255, 0.06));
}

.fc-proof-stage.is-premium-hold .fc-proof-logo {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0) drop-shadow(0 0 18px rgba(255, 160, 36, 0.13))
    drop-shadow(0 0 34px rgba(255, 255, 255, 0.045));
  animation: fcPremiumLogoBreath 6.8s ease-in-out infinite;
}

.fc-proof-stage.is-premium-dissolve .fc-proof-logo {
  opacity: 0;
  clip-path: inset(0 0 0 0);
  transform: translate(-50%, -50%) scale(1.045);
  filter: blur(7px) drop-shadow(0 0 34px rgba(255, 160, 36, 0.2));
  animation: none;
}

.fc-proof-stage.is-premium-reveal .fc-proof-meta,
.fc-proof-stage.is-premium-hold .fc-proof-meta {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  filter: blur(0);
}

.fc-proof-stage.is-premium-dissolve .fc-proof-meta {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  filter: blur(5px);
}

.fc-proof-stage.is-premium-preheat .fc-proof-stage-glow,
.fc-proof-stage.is-premium-reveal .fc-proof-stage-glow,
.fc-proof-stage.is-premium-hold .fc-proof-stage-glow {
  opacity: 0.62;
}

.fc-proof-stage:hover .fc-proof-logo {
  transform: translate(-50%, -50%) scale(1.025);
}

@keyframes fcPremiumLogoBreath {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.022);
  }
}
/* =========================================================
   CLIENT TRUST — TRANSGEN PRECISION LOGO REVEAL
   No particles, no glow, no smoke, no background light
   ========================================================= */

.fc-proof-stage {
  background: #000000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.fc-proof-stage::before {
  display: none !important;
}

.fc-proof-canvas,
.fc-proof-smoke {
  display: none !important;
}

.fc-proof-stage-glow {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 12 !important;
  width: 1px !important;
  height: 0 !important;
  background: rgba(216, 173, 66, 0.78) !important;
  opacity: 0 !important;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition:
    height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fc-proof-title {
  z-index: 5 !important;
  color: rgba(230, 225, 216, 0.48) !important;
  font-size: clamp(22px, 2vw, 36px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.035em !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translate(-50%, -50%) scale(1) !important;
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s ease,
    letter-spacing 0.9s ease !important;
}

.fc-proof-logo {
  z-index: 8 !important;
  opacity: 0 !important;
  clip-path: inset(0 50% 0 50%) !important;
  transform: translate(-50%, -50%) scale(0.985) !important;
  filter: none !important;
  animation: none !important;
  transition:
    opacity 0.75s ease,
    clip-path 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fc-proof-meta {
  z-index: 13 !important;
  opacity: 0 !important;
  color: rgba(230, 225, 216, 0.34) !important;
  transform: translateX(-50%) translateY(10px) !important;
  filter: none !important;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease !important;
}

/* Use the existing smoke divs as black mechanical shutters */

.fc-proof-smoke-one,
.fc-proof-smoke-two {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  z-index: 10 !important;
  width: 50.2% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: #000000 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  pointer-events: none !important;
  transition: transform 1.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fc-proof-smoke-one {
  left: 0 !important;
  transform: translateX(0) !important;
}

.fc-proof-smoke-two {
  right: 0 !important;
  left: auto !important;
  transform: translateX(0) !important;
}

/* Phase 01 — title */

.fc-proof-stage.is-precision-title .fc-proof-title {
  opacity: 1 !important;
  filter: none !important;
  letter-spacing: -0.035em !important;
}

.fc-proof-stage.is-precision-title .fc-proof-logo {
  opacity: 0 !important;
  clip-path: inset(0 50% 0 50%) !important;
}

.fc-proof-stage.is-precision-title .fc-proof-smoke-one,
.fc-proof-stage.is-precision-title .fc-proof-smoke-two {
  transform: translateX(0) !important;
}

/* Phase 02 — central cut */

.fc-proof-stage.is-precision-cut .fc-proof-title {
  opacity: 0 !important;
  filter: blur(5px) !important;
  letter-spacing: 0.06em !important;
  transform: translate(-50%, -50%) scale(0.98) !important;
}

.fc-proof-stage.is-precision-cut .fc-proof-stage-glow {
  height: 64% !important;
  opacity: 1 !important;
}

/* Phase 03 — opening */

.fc-proof-stage.is-precision-open .fc-proof-title,
.fc-proof-stage.is-precision-hold .fc-proof-title,
.fc-proof-stage.is-precision-close .fc-proof-title {
  opacity: 0 !important;
  filter: blur(7px) !important;
}

.fc-proof-stage.is-precision-open .fc-proof-stage-glow {
  height: 78% !important;
  opacity: 0.72 !important;
  transform: translate(-50%, -50%) scaleX(1) !important;
}

.fc-proof-stage.is-precision-open .fc-proof-smoke-one,
.fc-proof-stage.is-precision-hold .fc-proof-smoke-one {
  transform: translateX(-102%) !important;
}

.fc-proof-stage.is-precision-open .fc-proof-smoke-two,
.fc-proof-stage.is-precision-hold .fc-proof-smoke-two {
  transform: translateX(102%) !important;
}

.fc-proof-stage.is-precision-open .fc-proof-logo,
.fc-proof-stage.is-precision-hold .fc-proof-logo {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.fc-proof-stage.is-precision-hold .fc-proof-stage-glow {
  height: 0 !important;
  opacity: 0 !important;
}

.fc-proof-stage.is-precision-hold .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Phase 04 — close */

.fc-proof-stage.is-precision-close .fc-proof-smoke-one,
.fc-proof-stage.is-precision-reset .fc-proof-smoke-one {
  transform: translateX(0) !important;
}

.fc-proof-stage.is-precision-close .fc-proof-smoke-two,
.fc-proof-stage.is-precision-reset .fc-proof-smoke-two {
  transform: translateX(0) !important;
}

.fc-proof-stage.is-precision-close .fc-proof-logo {
  opacity: 0.22 !important;
  clip-path: inset(0 42% 0 42%) !important;
  transform: translate(-50%, -50%) scale(0.99) !important;
}

.fc-proof-stage.is-precision-close .fc-proof-meta,
.fc-proof-stage.is-precision-reset .fc-proof-meta {
  opacity: 0 !important;
}

/* Phase 05 — reset */

.fc-proof-stage.is-precision-reset .fc-proof-logo {
  opacity: 0 !important;
  clip-path: inset(0 50% 0 50%) !important;
}

.fc-proof-stage.is-precision-reset .fc-proof-title {
  opacity: 1 !important;
  filter: none !important;
}

/* Hover */

.fc-proof-stage.is-precision-focus .fc-proof-logo {
  transform: translate(-50%, -50%) scale(1.018) !important;
}
/* =========================================================
   CLIENT TRUST — TRANSGEN CLEAN FADE LOGO REVEAL
   No line, no shutters, no glow square, no background light
   ========================================================= */

.fc-client-trust {
  background: #000000 !important;
}

.fc-proof-stage {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.fc-proof-stage::before,
.fc-proof-stage::after {
  display: none !important;
}

.fc-proof-canvas,
.fc-proof-smoke,
.fc-proof-smoke-one,
.fc-proof-smoke-two,
.fc-proof-stage-glow {
  display: none !important;
}

.fc-proof-title {
  z-index: 5 !important;
  color: rgba(230, 225, 216, 0.44) !important;
  font-size: clamp(22px, 2vw, 36px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.035em !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translate(-50%, -50%) scale(1) !important;
  transition:
    opacity 1.05s ease,
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.05s ease !important;
}

.fc-proof-logo {
  z-index: 8 !important;
  opacity: 0 !important;
  clip-path: inset(0 0 0 0) !important;
  transform: translate(-50%, -50%) scale(0.985) !important;
  filter: none !important;
  animation: none !important;
  transition:
    opacity 1.2s ease,
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fc-proof-meta {
  z-index: 9 !important;
  opacity: 0 !important;
  color: rgba(230, 225, 216, 0.34) !important;
  transform: translateX(-50%) translateY(8px) !important;
  filter: none !important;
  transition:
    opacity 1.05s ease,
    transform 1.05s ease !important;
}

/* Phase 01 — title visible */

.fc-proof-stage.is-clean-title .fc-proof-title,
.fc-proof-stage.is-clean-title-return .fc-proof-title {
  opacity: 1 !important;
  filter: none !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.fc-proof-stage.is-clean-title .fc-proof-logo,
.fc-proof-stage.is-clean-title-return .fc-proof-logo {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.985) !important;
}

.fc-proof-stage.is-clean-title .fc-proof-meta,
.fc-proof-stage.is-clean-title-return .fc-proof-meta {
  opacity: 0 !important;
}

/* Phase 02 — logo fade in */

.fc-proof-stage.is-clean-logo-in .fc-proof-title,
.fc-proof-stage.is-clean-logo-hold .fc-proof-title,
.fc-proof-stage.is-clean-logo-out .fc-proof-title {
  opacity: 0 !important;
  filter: blur(3px) !important;
  transform: translate(-50%, -52%) scale(0.985) !important;
}

.fc-proof-stage.is-clean-logo-in .fc-proof-logo,
.fc-proof-stage.is-clean-logo-hold .fc-proof-logo {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.fc-proof-stage.is-clean-logo-in .fc-proof-meta,
.fc-proof-stage.is-clean-logo-hold .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Phase 03 — logo fade out */

.fc-proof-stage.is-clean-logo-out .fc-proof-logo {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(1.012) !important;
}

.fc-proof-stage.is-clean-logo-out .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
}

/* Hover — only very subtle professional focus */

.fc-proof-stage.is-clean-focus .fc-proof-logo {
  transform: translate(-50%, -50%) scale(1.018) !important;
}
/* Dramatic pause between title and logo */

.fc-proof-stage.is-clean-empty-pause .fc-proof-title {
  opacity: 0 !important;
  filter: blur(4px) !important;
  transform: translate(-50%, -52%) scale(0.985) !important;
}

.fc-proof-stage.is-clean-empty-pause .fc-proof-logo {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.985) !important;
}

.fc-proof-stage.is-clean-empty-pause .fc-proof-meta {
  opacity: 0 !important;
}
/* Clean Fade — delayed meta text under logo */

.fc-proof-stage.is-clean-logo-in .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
}

.fc-proof-stage.is-clean-logo-hold .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  transition-delay: 0.55s !important;
}

.fc-proof-stage.is-clean-logo-out .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition-delay: 0s !important;
}
/* =========================================================
   CLIENT TRUST — BOTTOM LINKS POSITION / READABILITY
   ========================================================= */

.fc-client-trust-nav {
  margin-top: clamp(56px, 5vw, 92px) !important;
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  column-gap: clamp(46px, 4vw, 78px) !important;
  row-gap: 26px !important;
  align-items: start !important;
  justify-content: start !important;
}

.fc-client-trust-nav button {
  font-size: clamp(12px, 0.86vw, 15px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  color: rgba(230, 225, 216, 0.34) !important;
}

.fc-client-trust-nav button.is-active {
  color: rgba(216, 173, 66, 0.95) !important;
}

.fc-client-trust-nav button:hover,
.fc-client-trust-nav button:focus-visible {
  color: rgba(230, 225, 216, 0.86) !important;
}
/* =========================================================
   CLIENT TRUST — BOTTOM LINKS LEFT ALIGN FIX
   ========================================================= */

.fc-client-trust-nav {
  justify-content: start !important;
  justify-items: start !important;
  align-items: start !important;
  grid-template-columns: 240px 240px !important;
  column-gap: clamp(36px, 4vw, 72px) !important;
  row-gap: 24px !important;
}

.fc-client-trust-nav button {
  width: 100% !important;
  text-align: left !important;
  justify-self: start !important;
}
/* Clean Fade — click pause only, no forced meta on pause */

.fc-proof-stage.is-clean-paused.is-clean-title .fc-proof-meta,
.fc-proof-stage.is-clean-paused.is-clean-empty-pause .fc-proof-meta,
.fc-proof-stage.is-clean-paused.is-clean-logo-in .fc-proof-meta,
.fc-proof-stage.is-clean-paused.is-clean-logo-out .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
}

.fc-proof-stage.is-clean-paused.is-clean-logo-hold .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
/* =========================================================
   CLIENT TRUST — FINAL COMPOSITION ALIGNMENT
   Left content vertical balance + right logo stage lift
   ========================================================= */

.fc-client-trust {
  align-items: center !important;
}

.fc-client-trust-left {
  justify-content: center !important;
  min-height: clamp(560px, 62vh, 680px) !important;
}

.fc-client-trust-right {
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-54px) !important;
}

/* Keep the four proof links visually anchored and left-aligned */

.fc-client-trust-nav {
  margin-top: clamp(58px, 5vw, 86px) !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: start !important;
  grid-template-columns: 250px 250px !important;
  column-gap: clamp(42px, 4vw, 76px) !important;
  row-gap: 24px !important;
}

.fc-client-trust-nav button {
  width: 100% !important;
  text-align: left !important;
  justify-self: start !important;
}
/* =========================================================
   CLIENT TRUST — CLEAN FADE TITLE SIZE REFINEMENT
   Softer project title before PNG logo
   ========================================================= */

.fc-proof-title {
  max-width: min(620px, 72%) !important;
  color: rgba(230, 225, 216, 0.34) !important;
  font-size: clamp(18px, 1.45vw, 28px) !important;
  line-height: 1.18 !important;
  font-weight: 720 !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
  white-space: normal !important;
}

.fc-proof-stage.is-clean-title .fc-proof-title,
.fc-proof-stage.is-clean-title-return .fc-proof-title {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.fc-proof-stage.is-clean-empty-pause .fc-proof-title,
.fc-proof-stage.is-clean-logo-in .fc-proof-title,
.fc-proof-stage.is-clean-logo-hold .fc-proof-title,
.fc-proof-stage.is-clean-logo-out .fc-proof-title {
  opacity: 0 !important;
}
/* =========================================================
   CLIENT TRUST — LEFT CONTENT INTRO ANIMATION
   Triggered after Hero MORE opens Body Storytelling
   ========================================================= */

.fc-client-trust.is-left-intro-ready .fc-client-trust-kicker,
.fc-client-trust.is-left-intro-ready h2,
.fc-client-trust.is-left-intro-ready .fc-client-trust-lead,
.fc-client-trust.is-left-intro-ready .fc-client-trust-copy,
.fc-client-trust.is-left-intro-ready .fc-client-trust-nav button {
  opacity: 0;
  will-change: opacity, transform, filter;
}

.fc-client-trust.is-left-intro-ready .fc-client-trust-kicker {
  transform: translateX(-34px);
}

.fc-client-trust.is-left-intro-ready h2 {
  transform: translateX(42px);
}

.fc-client-trust.is-left-intro-ready .fc-client-trust-lead {
  transform: translateY(30px);
}

.fc-client-trust.is-left-intro-ready .fc-client-trust-copy,
.fc-client-trust.is-left-intro-ready .fc-client-trust-nav button {
  transform: translateY(12px);
  filter: blur(4px);
}

/* Playing — faster 1.5 second cinematic timing */

.fc-client-trust.is-left-intro-playing .fc-client-trust-kicker {
  animation: fcClientTrustIntroFromLeft 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s
    forwards;
}

.fc-client-trust.is-left-intro-playing h2 {
  animation: fcClientTrustIntroFromRight 0.55s cubic-bezier(0.22, 1, 0.36, 1)
    0.12s forwards;
}

.fc-client-trust.is-left-intro-playing .fc-client-trust-lead {
  animation: fcClientTrustIntroFromBottom 0.55s cubic-bezier(0.22, 1, 0.36, 1)
    0.3s forwards;
}

.fc-client-trust.is-left-intro-playing .fc-client-trust-copy {
  animation: fcClientTrustIntroSoftFade 0.65s ease 0.58s forwards;
}

.fc-client-trust.is-left-intro-playing
  .fc-client-trust-nav
  button:nth-child(1) {
  animation: fcClientTrustIntroSoftFade 0.32s ease 0.9s forwards;
}

.fc-client-trust.is-left-intro-playing
  .fc-client-trust-nav
  button:nth-child(2) {
  animation: fcClientTrustIntroSoftFade 0.32s ease 1.02s forwards;
}

.fc-client-trust.is-left-intro-playing
  .fc-client-trust-nav
  button:nth-child(3) {
  animation: fcClientTrustIntroSoftFade 0.32s ease 1.14s forwards;
}

.fc-client-trust.is-left-intro-playing
  .fc-client-trust-nav
  button:nth-child(4) {
  animation: fcClientTrustIntroSoftFade 0.32s ease 1.26s forwards;
}

@keyframes fcClientTrustIntroFromLeft {
  from {
    opacity: 0;
    transform: translateX(-34px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fcClientTrustIntroFromRight {
  from {
    opacity: 0;
    transform: translateX(42px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fcClientTrustIntroFromBottom {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fcClientTrustIntroSoftFade {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
/* =========================================================
   CLIENT TRUST — RIGHT LOGO ANIMATION WAITING STATE
   Waits until left intro animation finishes
   ========================================================= */

.fc-proof-stage.is-clean-waiting .fc-proof-title,
.fc-proof-stage.is-clean-waiting .fc-proof-logo,
.fc-proof-stage.is-clean-waiting .fc-proof-meta {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =========================================================
   CLIENT TRUST — VIEWPORT HEIGHT LOCK
   Removes tiny extra scroll after MORE reveal in Edge
   ========================================================= */

.fc-client-trust {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

@supports (height: 100svh) {
  .fc-client-trust {
    height: calc(100svh - 8px) !important;
    min-height: calc(100svh - 8px) !important;
    max-height: calc(100svh - 8px) !important;
  }
}
/* =========================================================
   GLOBAL SECTION TITLE STANDARD
   Premium cinematic headings for Body Storytelling blocks
   ========================================================= */

:root {
  --fc-section-title-size: clamp(40px, 3.4vw, 62px);
  --fc-section-title-line-height: 0.96;
  --fc-section-title-weight: 760;
  --fc-section-title-letter-spacing: -0.032em;
  --fc-section-title-color: rgba(244, 243, 247, 0.78);
}

.fc-section-title,
.fc-client-trust h2 {
  color: var(--fc-section-title-color) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: var(--fc-section-title-size) !important;
  line-height: var(--fc-section-title-line-height) !important;
  font-weight: var(--fc-section-title-weight) !important;
  letter-spacing: var(--fc-section-title-letter-spacing) !important;
  text-transform: uppercase !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1 !important;
}
/* =========================================================
   CLIENT TRUST — PROJECT COPY UPDATE ANIMATION
   Only the main project description changes between logos
   ========================================================= */

.fc-client-trust-copy.is-project-copy-intro {
  animation: fcClientTrustProjectCopyIntro 0.72s ease forwards;
  will-change: opacity, transform, filter;
}

@keyframes fcClientTrustProjectCopyIntro {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
/* =========================================================
   CLIENT TRUST — RIGHT LOGO ANIMATION WAITING STATE
   Waits until left intro animation finishes
   ========================================================= */

.fc-proof-stage.is-clean-waiting .fc-proof-title,
.fc-proof-stage.is-clean-waiting .fc-proof-logo,
.fc-proof-stage.is-clean-waiting .fc-proof-meta {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =========================================================
   CLIENT TRUST — CLIENT NAME HIGHLIGHT STANDARD
   Used inside every project description on the left side
   ========================================================= */

.fc-client-name {
  color: #d8ad42;
  font-weight: 720;
  letter-spacing: -0.01em;
}

.fc-client-name-link {
  border-bottom: 1px solid rgba(216, 173, 66, 0);
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    text-shadow 0.2s ease;
}

.fc-client-name-link:hover,
.fc-client-name-link:focus-visible {
  color: rgba(244, 210, 96, 1);
  border-bottom-color: rgba(244, 210, 96, 0.72);
  text-shadow: 0 0 12px rgba(211, 162, 27, 0.24);
}
/* =========================================================
   CLIENT TRUST — NAV LINKS IDLE STATE
   No Client Trust category link is active before user action
   ========================================================= */

.fc-client-trust-nav button {
  color: rgba(235, 232, 224, 0.42) !important;
  text-shadow: none !important;
  filter: none !important;
}

.fc-client-trust-nav button:hover,
.fc-client-trust-nav button:focus-visible,
.fc-client-trust-nav button.is-active {
  color: #d8ad42 !important;
  text-shadow: 0 0 18px rgba(216, 173, 66, 0.34) !important;
}

/* =========================================================
   CLIENT TRUST — WELCOME PROOF CATEGORY MODE
   Supports the new default FifoConsult Welcome Proof Sequence:
   30+ awarded logo projects / 50+ UpWork projects /
   5.0 client feedback / 10+ institutional clients.
   Logo PNG sequence remains active only inside has-clean-logo mode.
   ========================================================= */

.fc-proof-stage.is-clean-proof-category .fc-proof-logo,
.fc-proof-stage.is-clean-proof-category .fc-proof-canvas,
.fc-proof-stage.is-clean-proof-category .fc-proof-smoke,
.fc-proof-stage.is-clean-proof-category .fc-proof-smoke-one,
.fc-proof-stage.is-clean-proof-category .fc-proof-smoke-two,
.fc-proof-stage.is-clean-proof-category .fc-proof-stage-glow {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fc-proof-stage.is-clean-proof-category .fc-proof-title {
  max-width: min(740px, 82%) !important;
  color: rgba(230, 225, 216, 0.34) !important;
  font-size: clamp(24px, 2.75vw, 48px) !important;
  line-height: 1.02 !important;
  font-weight: 780 !important;
  letter-spacing: -0.045em !important;
  text-align: center !important;
  white-space: normal !important;
  text-shadow: none !important;
}

.fc-proof-stage.is-clean-proof-category .fc-proof-meta {
  width: min(560px, 84%) !important;
  color: rgba(230, 225, 216, 0.38) !important;
  font-size: clamp(10px, 0.72vw, 13px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

/* Category phase 01 — calm title appears first */

.fc-proof-stage.is-clean-proof-category.is-clean-title .fc-proof-title {
  opacity: 1 !important;
  color: rgba(230, 225, 216, 0.38) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: none !important;
}

.fc-proof-stage.is-clean-proof-category.is-clean-title .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
}

/* Category phase 02 — dramatic empty pause */

.fc-proof-stage.is-clean-proof-category.is-clean-empty-pause .fc-proof-title,
.fc-proof-stage.is-clean-proof-category.is-clean-empty-pause .fc-proof-meta {
  opacity: 0 !important;
  filter: blur(4px) !important;
}

/* Category phase 03 — proof category returns as the main message */

.fc-proof-stage.is-clean-proof-category.is-clean-logo-in .fc-proof-title,
.fc-proof-stage.is-clean-proof-category.is-clean-logo-hold .fc-proof-title {
  opacity: 1 !important;
  color: rgba(216, 173, 66, 0.82) !important;
  transform: translate(-50%, -52%) scale(1) !important;
  filter: none !important;
  text-shadow: 0 0 22px rgba(216, 173, 66, 0.18) !important;
}

.fc-proof-stage.is-clean-proof-category.is-clean-logo-in .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
}

.fc-proof-stage.is-clean-proof-category.is-clean-logo-hold .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  transition-delay: 0.45s !important;
}

/* Category phase 04 — fade out before next proof category */

.fc-proof-stage.is-clean-proof-category.is-clean-logo-out .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -54%) scale(0.99) !important;
  filter: blur(4px) !important;
}

.fc-proof-stage.is-clean-proof-category.is-clean-logo-out .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition-delay: 0s !important;
}

/* Keep PNG logo detail mode untouched and explicitly separated */

.fc-proof-stage.has-clean-logo .fc-proof-logo {
  display: block;
}

/* Active category link appears only after user click */

.fc-client-trust-nav button.is-active {
  color: #d8ad42 !important;
  text-shadow: 0 0 18px rgba(216, 173, 66, 0.34) !important;
}

/* =========================================================
   CLIENT TRUST — UPWORK PROOF CARD MODE
   Detail mode for: 50+ UpWork projects.
   Uses HTML/CSS proof cards instead of PNG screenshots.
   ========================================================= */

.fc-proof-stage.has-upwork-proof-card .fc-proof-logo,
.fc-proof-stage.has-upwork-proof-card .fc-proof-canvas,
.fc-proof-stage.has-upwork-proof-card .fc-proof-smoke,
.fc-proof-stage.has-upwork-proof-card .fc-proof-smoke-one,
.fc-proof-stage.has-upwork-proof-card .fc-proof-smoke-two,
.fc-proof-stage.has-upwork-proof-card .fc-proof-stage-glow {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fc-proof-stage.has-upwork-proof-card .fc-proof-title {
  left: 50% !important;
  top: 48% !important;
  width: min(680px, 82%) !important;
  max-width: min(680px, 82%) !important;
  color: inherit !important;
  text-align: left !important;
  white-space: normal !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: none !important;
  text-shadow: none !important;
}

.fc-upwork-proof-card {
  position: relative;
  width: 100%;
  min-height: clamp(255px, 20vw, 350px);
  padding: clamp(28px, 2.35vw, 42px);
  border-radius: clamp(24px, 1.9vw, 34px);
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(216, 173, 66, 0.12),
      transparent 34%
    ),
    radial-gradient(
      circle at 12% 100%,
      rgba(48, 105, 170, 0.1),
      transparent 42%
    ),
    linear-gradient(135deg, rgba(9, 11, 16, 0.86), rgba(3, 4, 8, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 80px rgba(0, 0, 0, 0.28),
    0 28px 80px rgba(0, 0, 0, 0.42),
    0 0 44px rgba(216, 173, 66, 0.07);
  overflow: hidden;
}

.fc-upwork-proof-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045),
      transparent 18%,
      transparent 82%,
      rgba(255, 255, 255, 0.025)
    ),
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 240, 190, 0.08),
      transparent 42%
    );
  opacity: 0.82;
}

.fc-upwork-proof-card > * {
  position: relative;
  z-index: 2;
}

.fc-upwork-proof-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(18px, 1.45vw, 26px);
}

.fc-upwork-proof-kicker {
  color: rgba(216, 173, 66, 0.82);
  font-size: clamp(9px, 0.66vw, 12px);
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.fc-upwork-proof-rating {
  color: rgba(255, 203, 54, 0.92);
  font-size: clamp(13px, 0.92vw, 17px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(255, 203, 54, 0.18);
}

.fc-upwork-proof-rating strong {
  margin-left: 8px;
  color: rgba(244, 243, 247, 0.86);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fc-upwork-proof-card h3 {
  margin: 0 0 10px;
  color: rgba(244, 243, 247, 0.9);
  font-size: clamp(24px, 1.85vw, 36px);
  line-height: 1.05;
  font-weight: 780;
  letter-spacing: -0.04em;
}

.fc-upwork-proof-date {
  margin-bottom: clamp(18px, 1.5vw, 26px);
  color: rgba(226, 228, 236, 0.46);
  font-size: clamp(11px, 0.78vw, 14px);
  line-height: 1.35;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.fc-upwork-proof-card blockquote {
  max-width: 92%;
  margin: 0 0 clamp(22px, 1.65vw, 30px);
  color: rgba(226, 228, 236, 0.78);
  font-size: clamp(15px, 1.08vw, 20px);
  line-height: 1.48;
  font-weight: 560;
  letter-spacing: -0.018em;
  font-style: italic;
}

.fc-upwork-proof-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.fc-upwork-proof-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 12px 6px;
  border-radius: 999px;
  color: rgba(226, 228, 236, 0.68);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.055);
  font-size: clamp(10px, 0.7vw, 13px);
  line-height: 1;
  font-weight: 720;
}

/* UpWork phase 01 — only project title signal */

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-proof-title {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-upwork-proof-card {
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-title
  .fc-upwork-proof-card::before,
.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-upwork-proof-card-head,
.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-upwork-proof-date,
.fc-proof-stage.has-upwork-proof-card.is-clean-title
  .fc-upwork-proof-card
  blockquote,
.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-upwork-proof-tags {
  display: none !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-upwork-proof-card h3 {
  margin: 0 !important;
  color: rgba(230, 225, 216, 0.34) !important;
  font-size: clamp(24px, 2.35vw, 44px) !important;
  line-height: 1.06 !important;
  font-weight: 760 !important;
  letter-spacing: -0.045em !important;
  text-align: center !important;
}

/* UpWork phase 02 — dramatic empty pause */

.fc-proof-stage.has-upwork-proof-card.is-clean-empty-pause .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -52%) scale(0.985) !important;
  filter: blur(4px) !important;
}

/* UpWork phase 03 — full proof card fades in and holds */

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-proof-title,
.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold .fc-proof-title {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: none !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-proof-title {
  transition-delay: 0s !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  transition-delay: 0.55s !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
}

/* UpWork phase 04 — card fades out before next feedback */

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-out .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(1.012) !important;
  filter: blur(5px) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-out .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition-delay: 0s !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-paused.is-clean-logo-hold
  .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Keep card readable on narrower laptop widths */

@media (max-width: 1280px) {
  .fc-proof-stage.has-upwork-proof-card .fc-proof-title {
    width: min(620px, 86%) !important;
    max-width: min(620px, 86%) !important;
  }

  .fc-upwork-proof-card {
    padding: 30px;
  }

  .fc-upwork-proof-card h3 {
    font-size: clamp(22px, 1.75vw, 32px);
  }

  .fc-upwork-proof-card blockquote {
    max-width: 100%;
    font-size: clamp(14px, 1vw, 18px);
  }
}

/* =========================================================
   CLIENT TRUST — UPWORK PROOF CARD FINAL TUNING V2
   Fixes:
   - UpWork intro title size now matches the logo sequence title scale.
   - Full UpWork card no longer blinks when it enters after the empty pause.
   ========================================================= */

.fc-proof-stage.has-upwork-proof-card .fc-proof-title {
  top: 50% !important;
  width: min(620px, 72%) !important;
  max-width: min(620px, 72%) !important;
  transition:
    opacity 1.05s ease,
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.05s ease !important;
}

.fc-proof-stage.has-upwork-proof-card .fc-upwork-proof-card {
  opacity: 0 !important;
  transform: translateY(10px) scale(0.985) !important;
  filter: blur(3px) !important;
  transition:
    opacity 0.95s ease,
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.95s ease !important;
  will-change: opacity, transform, filter;
}

/* Phase 01 — only the project title, same scale as logo sequence */

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-proof-title {
  width: min(620px, 72%) !important;
  max-width: min(620px, 72%) !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: none !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-upwork-proof-card {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: none !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-upwork-proof-card h3 {
  margin: 0 !important;
  color: rgba(230, 225, 216, 0.34) !important;
  font-size: clamp(18px, 1.45vw, 28px) !important;
  line-height: 1.18 !important;
  font-weight: 720 !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
  white-space: normal !important;
}

/* Phase 02 — true black pause, no card flash */

.fc-proof-stage.has-upwork-proof-card.is-clean-empty-pause .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -52%) scale(0.985) !important;
  filter: blur(4px) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-empty-pause
  .fc-upwork-proof-card {
  opacity: 0 !important;
  transform: translateY(10px) scale(0.985) !important;
  filter: blur(4px) !important;
}

/* Phase 03 — prepare card invisibly, then reveal only on hold */

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-proof-title {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: none !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-upwork-proof-card {
  opacity: 0 !important;
  transform: translateY(10px) scale(0.985) !important;
  filter: blur(3px) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold .fc-proof-title {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: none !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold .fc-upwork-proof-card {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
  transition-delay: 0.08s !important;
}

/* Phase 04 — clean fade out */

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-out .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(1.012) !important;
  filter: blur(5px) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-out .fc-upwork-proof-card {
  opacity: 0 !important;
  transform: translateY(-4px) scale(1.01) !important;
  filter: blur(5px) !important;
  transition-delay: 0s !important;
}

/* Keep meta calm and delayed under the card */

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-proof-meta,
.fc-proof-stage.has-upwork-proof-card.is-clean-empty-pause .fc-proof-meta,
.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-proof-meta,
.fc-proof-stage.has-upwork-proof-card.is-clean-logo-out .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition-delay: 0s !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  transition-delay: 0.55s !important;
}

/* =========================================================
   CLIENT TRUST — UPWORK PROOF CARD LAYER FIX V3
   Final blink fix:
   - proof title remains plain text
   - full UpWork card lives in a separate absolute layer
   - card layer is never visible during title / empty / prepare phases
   ========================================================= */

.fc-proof-stage.has-upwork-proof-card .fc-proof-title {
  left: 50% !important;
  top: 50% !important;
  width: min(620px, 72%) !important;
  max-width: min(620px, 72%) !important;
  color: rgba(230, 225, 216, 0.34) !important;
  font-size: clamp(18px, 1.45vw, 28px) !important;
  line-height: 1.18 !important;
  font-weight: 720 !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
  white-space: normal !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: none !important;
  text-shadow: none !important;
}

.fc-upwork-proof-layer {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 8;
  width: min(680px, 82%);
  max-width: min(680px, 82%);
  transform: translate(-50%, -50%) scale(0.985);
  opacity: 0;
  visibility: hidden;
  filter: blur(4px);
  pointer-events: none;
  transition:
    opacity 0.95s ease,
    visibility 0s linear 0.95s,
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.95s ease;
  will-change: opacity, transform, filter;
}

.fc-upwork-proof-layer .fc-upwork-proof-card {
  width: 100% !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Phase 01 — title only, no card layer */

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-proof-title {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: none !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-upwork-proof-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, -50%) scale(0.985) !important;
  filter: blur(4px) !important;
  transition-delay: 0s, 0s, 0s, 0s !important;
}

/* Phase 02 — true black pause */

.fc-proof-stage.has-upwork-proof-card.is-clean-empty-pause .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -52%) scale(0.985) !important;
  filter: blur(4px) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-empty-pause
  .fc-upwork-proof-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, -50%) scale(0.985) !important;
  filter: blur(4px) !important;
  transition-delay: 0s, 0s, 0s, 0s !important;
}

/* Phase 03 — prepare, still invisible */

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -52%) scale(0.985) !important;
  filter: blur(4px) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-upwork-proof-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, -50%) scale(0.985) !important;
  filter: blur(4px) !important;
  transition-delay: 0s, 0s, 0s, 0s !important;
}

/* Phase 04 — full UpWork card reveal */

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -52%) scale(0.985) !important;
  filter: blur(4px) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold
  .fc-upwork-proof-layer {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: blur(0) !important;
  transition-delay: 0s, 0s, 0s, 0s !important;
}

/* Phase 05 — clean card fade out */

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-out .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -52%) scale(0.985) !important;
  filter: blur(4px) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-out .fc-upwork-proof-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, -50%) scale(1.012) !important;
  filter: blur(5px) !important;
  transition-delay: 0s, 0.95s, 0s, 0s !important;
}

/* Meta remains calm below the separated card layer */

.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-proof-meta,
.fc-proof-stage.has-upwork-proof-card.is-clean-empty-pause .fc-proof-meta,
.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-proof-meta,
.fc-proof-stage.has-upwork-proof-card.is-clean-logo-out .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition-delay: 0s !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  transition-delay: 0.55s !important;
}

/* =========================================================
   CLIENT TRUST — UPWORK PROOF CARD TIMING V4
   Shortens the pause between the UpWork title and the proof card.
   The card now begins its fade-in during is-clean-logo-in,
   matching the visual rhythm of the PNG logo sequence.
   ========================================================= */

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-proof-title {
  opacity: 0 !important;
  transform: translate(-50%, -52%) scale(0.985) !important;
  filter: blur(4px) !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-upwork-proof-layer {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: blur(0) !important;
  transition:
    opacity 0.9s ease,
    visibility 0s linear 0s,
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s ease !important;
  transition-delay: 0.08s, 0s, 0.08s, 0.08s !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold
  .fc-upwork-proof-layer {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: blur(0) !important;
  transition-delay: 0s, 0s, 0s, 0s !important;
}

/* Meta still appears later, after the card is already stable. */

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-in .fc-proof-meta {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition-delay: 0s !important;
}

.fc-proof-stage.has-upwork-proof-card.is-clean-logo-hold .fc-proof-meta {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  transition-delay: 0.38s !important;
}

/* =========================================================
   CLIENT TRUST — SIMPLE BACKGROUND IMAGE FINAL
   Uses PNG master file:
   assets/img/body/client-trust/client-trust-background-master.png
   ========================================================= */

.fc-client-trust#fcClientTrust {
  background-color: #000000 !important;
  background-image: url("../img/body/client-trust/client-trust-background-master.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}

/* No pseudo background layers over this block. */

.fc-client-trust#fcClientTrust::before,
.fc-client-trust#fcClientTrust::after {
  display: none !important;
}

/* =========================================================
   PROJECT VALUE + DOCUMENTATION SAMPLE — HERO BACKDROP BLUR CONSISTENCY
   Shared HYRO blur layer for:
   - Project Value cloud
   - Documentation Sample cloud opened from Project Value link

   Important:
   The blur layer stays below the fixed header / popup stack, so the
   active cloud remains sharp while the HYRO image/video behind it is blurred.
   ========================================================= */

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

body.fc-project-value-open::before,
body.fc-documentation-sample-open::before {
  content: "";
  position: fixed;
  top: 82px;
  left: 0;
  right: 0;
  bottom: 0;

  /* Below .fc-header z-index: 10120 and far below Documentation overlay. */
  z-index: 9990;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 32% 45%,
      rgba(170, 105, 48, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 68% 44%,
      rgba(19, 83, 145, 0.22),
      transparent 36%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.66));

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  opacity: 1;
}

body.admin-bar.fc-project-value-open::before,
body.admin-bar.fc-documentation-sample-open::before {
  top: 114px;
}

/* Keep active clouds above the shared blur layer. */

body.fc-project-value-open .fc-project-value-cloud,
html.fc-project-value-open .fc-project-value-cloud {
  z-index: 10035;
}

body.fc-documentation-sample-open .fc-documentation-sample-overlay,
html.fc-documentation-sample-open .fc-documentation-sample-overlay {
  z-index: 99990;
}
/* ============================================================
   HEADER / FifoConsult Logo Subtle Hover Glow
   Soft premium pulse for transparent PNG logo.
   No HTML change needed — uses existing .fc-header-logo img.
   ============================================================ */

.fc-header-logo img {
  transition:
    filter 0.45s ease,
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter, transform, opacity;
}

/* Hover on the existing logo link */
.fc-header-logo:hover img,
.fc-header-logo:focus-visible img {
  animation: fcHeaderLogoSoftGlow 2.4s ease-in-out infinite;
}

@keyframes fcHeaderLogoSoftGlow {
  0% {
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0))
      drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    opacity: 0.92;
    transform: scale(1);
  }

  45% {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.62))
      drop-shadow(0 0 24px rgba(255, 255, 255, 0.3))
      drop-shadow(0 0 38px rgba(255, 255, 255, 0.12));
    opacity: 1;
    transform: scale(1.035);
  }

  100% {
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0))
      drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    opacity: 0.92;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-header-logo:hover img,
  .fc-header-logo:focus-visible img {
    animation: none !important;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.28));
  }
}
/* ============================================================
   HEADER / Subtle Hover Glow for Menu and Header Icon Fade
   Keeps MENU glow while Header icon controls use a restrained fade.
   CSS-only. No HTML change.
   ============================================================ */

/* MENU text */
.fc-header-menu {
  transition:
    color 0.35s ease,
    text-shadow 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fc-header-menu:hover,
.fc-header-menu:focus-visible {
  animation: fcHeaderTextSoftGlow 2.4s ease-in-out infinite;
}

/* Header dock icons + login icon */
.fc-header-info-icon,
.fc-header-login img {
  transition:
    opacity 360ms ease,
    filter 360ms ease;
  will-change: filter, opacity;
}

/* Text glow for MENU */
@keyframes fcHeaderTextSoftGlow {
  0% {
    color: #706957;
    text-shadow: 0 0 0 rgba(149, 139, 115, 0);
    transform: scale(1);
  }

  45% {
    color: #958b73;
    text-shadow:
      0 0 8px rgba(149, 139, 115, 0.26),
      0 0 18px rgba(154, 125, 63, 0.12);
    transform: scale(1.018);
  }

  100% {
    color: #706957;
    text-shadow: 0 0 0 rgba(149, 139, 115, 0);
    transform: scale(1);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .fc-header-menu:hover,
  .fc-header-menu:focus-visible {
    animation: none !important;
  }

  .fc-header-menu:hover,
  .fc-header-menu:focus-visible {
    color: #958b73;
    text-shadow: 0 0 10px rgba(149, 139, 115, 0.22);
  }

  .fc-header-info-button:hover .fc-header-info-icon,
  .fc-header-info-button:focus-visible .fc-header-info-icon,
  .fc-header-login:hover img,
  .fc-header-login:focus-visible img {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-text-reader,
  .fc-text-reader-article,
  .fc-text-reader-fade,
  .fc-text-reader-close {
    transition: none !important;
  }
}

/* =========================================================
   CLIENT TRUST — TYPOGRAPHY COLOR HARMONIZATION
   Uses the approved Mega Menu / TEXT reader palette.
   Typography colors only — no layout, animation or logic changes.
   ========================================================= */

.fc-client-trust-kicker {
  color: #9a7d3f !important;
}

.fc-client-trust h2 {
  color: #887b60 !important;
}

.fc-client-trust-lead {
  color: #958b73 !important;
}

.fc-client-trust-copy {
  color: #635d4f !important;
}

.fc-client-name {
  color: #9a7d3f !important;
}

.fc-client-name-link:hover,
.fc-client-name-link:focus-visible {
  color: #b2924d !important;
  border-bottom-color: rgba(178, 146, 77, 0.72) !important;
  text-shadow: 0 0 14px rgba(154, 125, 63, 0.24) !important;
}

.fc-client-trust-nav button {
  color: #706957 !important;
  text-shadow: none !important;
}

.fc-client-trust-nav button:hover,
.fc-client-trust-nav button:focus-visible {
  color: #958b73 !important;
  text-shadow: 0 0 12px rgba(149, 139, 115, 0.22) !important;
}

.fc-client-trust-nav button.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;
}

/* Right-side project / proof sequence typography */

.fc-proof-title {
  color: #706957 !important;
  text-shadow: none !important;
}

.fc-proof-meta {
  color: #635d4f !important;
}

.fc-proof-stage.is-text-breaking .fc-proof-title,
.fc-proof-stage.is-premium-preheat .fc-proof-title {
  color: #958b73 !important;
}

.fc-proof-stage.is-clean-proof-category .fc-proof-title,
.fc-proof-stage.is-clean-proof-category.is-clean-title .fc-proof-title {
  color: #706957 !important;
}

.fc-proof-stage.is-clean-proof-category.is-clean-logo-in .fc-proof-title,
.fc-proof-stage.is-clean-proof-category.is-clean-logo-hold .fc-proof-title {
  color: #9a7d3f !important;
  text-shadow: 0 0 18px rgba(154, 125, 63, 0.18) !important;
}

.fc-proof-stage.is-clean-proof-category .fc-proof-meta {
  color: #635d4f !important;
}

/* UpWork proof-card typography */

.fc-proof-stage.has-upwork-proof-card .fc-proof-title,
.fc-proof-stage.has-upwork-proof-card.is-clean-title .fc-upwork-proof-card h3 {
  color: #706957 !important;
}

.fc-upwork-proof-kicker {
  color: #9a7d3f !important;
}

.fc-upwork-proof-rating {
  color: #9a7d3f !important;
  text-shadow: 0 0 14px rgba(154, 125, 63, 0.18) !important;
}

.fc-upwork-proof-rating strong {
  color: #958b73 !important;
}

.fc-upwork-proof-card h3 {
  color: #887b60 !important;
}

.fc-upwork-proof-date {
  color: #706957 !important;
}

.fc-upwork-proof-card blockquote {
  color: #635d4f !important;
}

.fc-upwork-proof-tag {
  color: #706957 !important;
}

/* =========================================================
   HEADER INFORMATION BUBBLES — TYPOGRAPHY COLOR HARMONIZATION
   Applies the approved Mega Menu / TEXT reader palette to:
   Client Project Path, Art to SMART Academy, Project Value
   and Art to SMART Access header bubbles.
   Typography colors only — no bubble dimensions, background,
   blur, preview images, position, animation or JavaScript changes.
   ========================================================= */

.fc-header-info-bubble h3,
.fc-login-info-bubble h3 {
  color: #887b60 !important;
}

.fc-header-info-bubble p,
.fc-login-info-bubble p {
  color: #635d4f !important;
}

/* =========================================================
   HEADER PROJECT VALUE CLOUDS — TYPOGRAPHY COLOR HARMONIZATION
   Applies the approved FifoConsult bronze-gold typography palette
   to both:
   1) Project Value / Investment Guide cloud
   2) Documentation Sample cloud

   Existing gold prices, kickers, section headings, CTA links,
   scrollbar accents and hover glows remain gold.

   Typography colors only — no dimensions, cards, background,
   blur, scroll, animation, timing, close controls or JavaScript changes.
   ========================================================= */

/* Project Value / Investment Guide cloud */

.fc-project-value-cloud {
  color: #635d4f;
}

.fc-project-value-cloud-kicker {
  color: #9a7d3f;
}

.fc-project-value-cloud-title {
  color: #887b60;
}

.fc-project-value-cloud-lead,
.fc-project-value-cloud-note {
  color: #635d4f;
}

.fc-project-value-card h3 {
  color: #887b60;
}

.fc-project-value-time {
  color: #706957;
}

.fc-project-value-price {
  color: #9a7d3f;
}

.fc-project-value-contact-line {
  color: #635d4f;
}

/* Documentation Sample cloud */

.fc-documentation-sample-cloud {
  color: #635d4f;
}

.fc-documentation-sample-kicker {
  color: #9a7d3f;
}

.fc-documentation-sample-cloud h2 {
  color: #887b60;
}

.fc-documentation-sample-intro {
  color: #958b73;
}

.fc-documentation-sample-cloud h3 {
  color: #9a7d3f;
}

.fc-documentation-sample-cloud p,
.fc-documentation-sample-cloud li {
  color: #635d4f;
}

.fc-documentation-sample-cloud code {
  color: #706957;
}

.fc-documentation-sample-signature {
  color: #706957;
}

/* =========================================================
   ART TO SMART ACCESS — TYPOGRAPHY COLOR HARMONIZATION
   Applies the approved Mega Menu / TEXT reader bronze-gold palette
   only to white and neutral text inside the Client Access popup.

   Purple, blue and lime mode glows, borders, field focus effects,
   icons, validation colors and interaction states remain unchanged.

   Typography colors only — no layout, dimensions, background,
   animation, timing, form behavior or JavaScript changes.
   ========================================================= */

/* Main identity */

.fc-access-content {
  color: #635d4f !important;
}

.fc-access-kicker {
  color: #9a7d3f !important;
}

.fc-access-title {
  color: #887b60 !important;
}

.fc-access-intro {
  color: #635d4f !important;
}

/* Access mode tabs */

.fc-access-tab {
  color: #706957 !important;
}

.fc-access-tab[aria-pressed="true"] {
  color: #958b73 !important;
}

.fc-access-tab:hover,
.fc-access-tab:focus-visible {
  color: #958b73 !important;
}

/* Form text */

.fc-access-field input {
  color: #958b73 !important;
}

.fc-access-field input::placeholder {
  color: #706957 !important;
}

.fc-access-cta {
  color: #958b73 !important;
}

.fc-access-cta:hover,
.fc-access-cta:focus-visible {
  color: #b2924d !important;
}

/* Verification and status copy */

.fc-access-security-note {
  color: #706957 !important;
}

.fc-access-status,
.fc-access-status.is-info {
  color: #706957 !important;
}

/* Semantic success and error colors intentionally remain unchanged. */

/* Lower institutional copy and navigation */

.fc-access-footer-copy {
  color: #635d4f !important;
}

.fc-access-footer-copy strong {
  color: #9a7d3f !important;
}

.fc-access-footer-links {
  color: #706957 !important;
}

.fc-access-footer-links button {
  color: #706957 !important;
}

.fc-access-footer-links span {
  color: #635d4f !important;
}

.fc-access-footer-links button:hover,
.fc-access-footer-links button:focus-visible,
.fc-access-footer-links button.is-active {
  color: #958b73 !important;
  text-shadow:
    0 0 10px rgba(149, 139, 115, 0.22),
    0 0 18px color-mix(in srgb, var(--fc-mode-glow) 28%, transparent) !important;
}

/* Inner informational bubbles opened from the footer links */

.fc-access-info-bubble {
  color: #635d4f !important;
}

.fc-access-info-bubble h3 {
  color: #887b60 !important;
}

.fc-access-info-bubble p {
  color: #635d4f !important;
}

/* =========================================================
   DOCUMENTATION SAMPLE — HIDDEN VISUAL SCROLLBAR
   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-documentation-sample-scroll {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.fc-documentation-sample-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* =========================================================
   HERO CENTER LOGO — MEGA MENU COMPOSITION HANDOFF
   The logo keeps its current Hero position while MM is closed.
   Opening MM visibly moves the unchanged logo into the free strip
   between the panel and the bottom edge of the viewport.

   Position only — no scale, opacity, glow, layout or asset changes.
   ========================================================= */

.fc-hero-center-logo {
  --fc-hero-logo-menu-shift: 0px;
  transform:
    translateX(-50%)
    translateY(0);
  transition:
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
  will-change: transform;
}

body.fc-mega-menu-open .fc-hero-center-logo {
  transform:
    translateX(-50%)
    translateY(var(--fc-hero-logo-menu-shift));
  transition-duration: 650ms;
  transition-delay: 110ms;
}

@media (prefers-reduced-motion: reduce) {
  .fc-hero-center-logo,
  body.fc-mega-menu-open .fc-hero-center-logo {
    transition: none;
  }
}