/* ThemeCheck Recommended Core Classes */

.wp-caption { max-width: 100%; }

.wp-caption-text { text-align: center; }

.sticky { display: block; }

.gallery-caption { text-align: center; }

.bypostauthor { display: block; }

.alignright { float: right; margin-left: 1.5em; }

.alignleft { float: left; margin-right: 1.5em; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.screen-reader-text {

	border: 0;

	clip: rect(1px, 1px, 1px, 1px);

	clip-path: inset(50%);

	height: 1px;

	margin: -1px;

	overflow: hidden;

	padding: 0;

	position: absolute;

	width: 1px;

	word-wrap: normal !important;

}



:root {

  /* Brand Colors */

  --cpf-color-white: #ffffff;

  --cpf-color-dark: #0a0a0a;

  --cpf-color-light: #f5f5f5;

  --cpf-color-page-bg: #121212;



  /* Typography */

  --cpf-font-display: 'Geist', sans-serif;

  --cpf-font-body: 'Inter', sans-serif;

  --cpf-font-mono: 'Fragment Mono', monospace;



  /* Fluid Font Scale - Upscaled for Premium Impact */

  --cpf-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);

  --cpf-text-sm: clamp(0.875rem, 0.8rem + 0.5vw, 1.125rem);

  /* Taglines & Services */

  --cpf-text-base: clamp(0.95rem, 0.9rem + 0.5vw, 1.2rem);

  /* Nav Links */

  --cpf-text-hero: clamp(4.5rem, 19vw, 26rem);

  /* Massive Zylyf */

  --cpf-text-studio: clamp(2.5rem, 8vw, 10rem);

  /* Massive Studio */



  /* Letter-spacing (from Framer: -0.04em on Inter) */

  --cpf-ls-tight: -0.04em;

  --cpf-ls-hero: -0.03em;



  /* Spacing */

  --cpf-space-xs: 0.5rem;

  --cpf-space-sm: 1rem;

  --cpf-space-md: 1.5rem;

  --cpf-space-lg: 2.25rem;

  --cpf-space-xl: 4rem;



  /* Layout */

  --cpf-nav-height: 57px;

  /* 19px pad-top + content + 19px pad-bottom */

  --cpf-nav-max-w: 1200px;

  --cpf-nav-px: 2.25rem;

  /* 36px — matches Framer */

  --cpf-hero-inset: 6px;

  /* card inset on sides & bottom — matches Framer */



  /* Radius */

  --cpf-radius-sm: 6px;

  --cpf-radius-md: 12px;

  --cpf-radius-lg: 20px;

  --cpf-radius-hero: 25px;

  /* matches Framer border-radius on dark card */



  /* Z-index scale */

  --cpf-z-0: 0;

  --cpf-z-1: 1;

  --cpf-z-2: 2;

  --cpf-z-nav: 9;



  /* Transitions */

  --cpf-ease: cubic-bezier(0.44, 0, 0.56, 1);

  --cpf-transition: 0.2s var(--cpf-ease);

  --cpf-transition-md: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

}



/* =============================================

   RESET

   ============================================= */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;



}



body {

  font-family: var(--cpf-font-body);

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  overflow-x: hidden;

}



img,

video {

  display: block;

  max-inline-size: 100%;

}



ul,

ol {

  list-style: none;

}



/* =============================================

   SKIP LINK — Accessibility

   ============================================= */

.cpf-skip-link {

  position: absolute;

  inset-block-start: -100%;

  inset-inline-start: var(--cpf-space-sm);

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  padding-block: 0.4rem;

  padding-inline: 0.875rem;

  border-radius: var(--cpf-radius-sm);

  text-decoration: none;

  z-index: 999;

  transition: inset-block-start var(--cpf-transition);

}



.cpf-skip-link:focus {

  inset-block-start: var(--cpf-space-sm);

}



/* =============================================

   SECTION: Navigation Header

   SHOT REF: shots/1.png

   STATUS: Draft

   ============================================= */

.cpf-header {

  position: fixed;

  inset-block-start: 0;

  inset-inline: 0;

  z-index: var(--cpf-z-nav);

  background-color: var(--cpf-color-white);

}



/* Nav inner wrapper */

.cpf-nav {

  display: flex;

  align-items: center;

  justify-content: space-between;

  max-inline-size: 100%;

  /* Force edge-to-edge as requested */

  margin-inline: auto;

  padding-block: 19px;

  padding-inline: var(--cpf-nav-px);

  height: var(--cpf-nav-height);

  position: relative;

}



/* ---- Logo ---- */

.cpf-nav__logo {

  display: inline-flex;

  align-items: baseline;

  gap: 0.1em;

  text-decoration: none;

  color: var(--cpf-color-dark);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-base);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  white-space: nowrap;

  flex-shrink: 0;

}



.cpf-nav__logo-sup {

  font-size: 0.65em;

  vertical-align: super;

  line-height: 0;

  font-weight: 500;

}



/* ---- Desktop Menu (centered) ---- */

.cpf-nav__menu {

  display: flex;

  align-items: center;

  gap: clamp(3rem, 8vw, 10rem);

  /* Massive gap matching original wide reference */

  position: absolute;

  inset-inline-start: 50%;

  transform: translateX(-50%);

}



.cpf-nav__item {

  position: relative;

}



.cpf-nav__link {

  display: inline-flex;

  align-items: center;

  gap: 0.15em;

  text-decoration: none;

  color: var(--cpf-color-dark);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-base);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  white-space: nowrap;

  padding-block-end: 5px;

  position: relative;

  overflow: hidden;

}



/* Underline slide-in on hover */

.cpf-nav__link::after {

  content: '';

  position: absolute;

  inset-block-end: 0;

  inset-inline-start: 0;

  inline-size: 100%;

  block-size: 1.5px;

  background-color: var(--cpf-color-dark);

  transform: scaleX(0);

  transform-origin: right center;

  transition: transform var(--cpf-transition);

}



.cpf-nav__link:hover::after,

.cpf-nav__link:focus-visible::after {

  transform: scaleX(1);

  transform-origin: left center;

}



.cpf-nav__link:focus-visible {

  outline: 2px solid var(--cpf-color-dark);

  outline-offset: 3px;

  border-radius: 2px;

}



/* Project count badge */

.cpf-nav__count {

  font-size: 0.68em;

  vertical-align: super;

  line-height: 0;

  font-weight: 500;

  opacity: 0.65;

}



/* ---- Dropdown sub-menu ---- */

.cpf-nav__sub-menu {

  display: none;

  position: absolute;

  inset-block-start: calc(100% + 0.625rem);

  inset-inline-start: 50%;

  transform: translateX(-50%);

  background-color: var(--cpf-color-white);

  border: 1px solid rgba(0, 0, 0, 0.09);

  border-radius: var(--cpf-radius-md);

  padding-block: 0.4rem;

  min-inline-size: 150px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  z-index: var(--cpf-z-1);

}



.cpf-nav__item:hover .cpf-nav__sub-menu,

.cpf-nav__item:focus-within .cpf-nav__sub-menu {

  display: block;

}



.cpf-nav__sub-menu .cpf-nav__link {

  display: block;

  padding-block: 0.45rem;

  padding-inline: var(--cpf-space-sm);

  overflow: visible;

}



.cpf-nav__sub-menu .cpf-nav__link::after {

  display: none;

}



/* ---- Hamburger button ---- */

.cpf-nav__burger {

  display: flex;

  flex-direction: column;

  gap: 8px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 4px;

  flex-shrink: 0;

  min-inline-size: 59px;

  /* matches Framer exact width */

}



.cpf-nav__burger-line {

  display: block;

  inline-size: 59px;

  /* Framer: 59px */

  block-size: 2px;

  /* Framer: 2px */

  background-color: var(--cpf-color-dark);

  border-radius: 1px;

  transition: transform var(--cpf-transition), opacity var(--cpf-transition);

}



/* Burger → X animation */

.cpf-nav__burger[aria-expanded="true"] .cpf-nav__burger-line:first-child {

  transform: translateY(5px) rotate(45deg);

}



.cpf-nav__burger[aria-expanded="true"] .cpf-nav__burger-line:last-child {

  transform: translateY(-5px) rotate(-45deg);

}



/* ---- Mobile Drawer ---- */

.cpf-nav__drawer {

  position: fixed;

  inset-block-start: var(--cpf-nav-height);

  inset-inline: 0;

  background-color: var(--cpf-color-white);

  padding-block: var(--cpf-space-lg);

  padding-inline: var(--cpf-nav-px);

  transform: translateY(-110%);

  opacity: 0;

  pointer-events: none;

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),

    opacity 0.28s var(--cpf-ease);

  z-index: calc(var(--cpf-z-nav) - 1);

  border-block-end: 1px solid rgba(0, 0, 0, 0.07);

}



.cpf-nav__drawer.is-open {

  transform: translateY(0);

  opacity: 1;

  pointer-events: auto;

}



.cpf-nav__drawer-menu {

  display: flex;

  flex-direction: column;

  gap: var(--cpf-space-lg);

}



.cpf-nav__drawer-item {

  border-block-end: 1px solid rgba(0, 0, 0, 0.07);

  padding-block-end: var(--cpf-space-md);

}



.cpf-nav__drawer-link {

  text-decoration: none;

  color: var(--cpf-color-dark);

  font-family: var(--cpf-font-display);

  font-size: clamp(1.75rem, 5vw, 2.25rem);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  transition: opacity var(--cpf-transition);

}



.cpf-nav__drawer-link:hover {

  opacity: 0.6;

}



/* Overlay backdrop */

.cpf-nav__overlay {

  position: fixed;

  inset: 0;

  background-color: rgba(0, 0, 0, 0.3);

  opacity: 0;

  pointer-events: none;

  z-index: calc(var(--cpf-z-nav) - 2);

  transition: opacity var(--cpf-transition-md);

}



.cpf-nav__overlay.is-open {

  opacity: 1;

  pointer-events: auto;

}



/* =============================================

   SECTION: Hero

   SHOT REF: shots/1.png

   STATUS: Draft

   ============================================= */



/*

  Structure (mirrors Framer exactly):

  .cpf-hero              → full viewport, white bg = the light gap visible around dark card

    .cpf-hero__bg        → absolute dark card (inset 0 6px 6px, radius 25px) with image

    .cpf-hero__overlay   → absolute dark gradient overlay on image

    .cpf-hero__title     → absolute, z-index 2, the huge "Zylyf® Studio" text

    .cpf-hero__services  → absolute, top-right, services list

    .cpf-hero__marker--N → 4 decorative + crosshairs

    .cpf-hero__tagline   → absolute, bottom-left

    .cpf-hero__copyright → absolute, bottom-center

    .cpf-hero__card      → absolute, bottom-right, team lead card

*/



.cpf-hero {

  position: relative;

  inline-size: 100%;

  block-size: 100vh;

  background-color: transparent;

  /* The white bg creates the framing gap around the dark card */

}



/* Dark image card — matches Framer: position:absolute; inset:0 6px 6px; border-radius:25px */

.cpf-hero__bg {

  position: absolute;

  inset-block-start: var(--cpf-nav-height);

  inset-inline: var(--cpf-hero-inset);

  inset-block-end: var(--cpf-hero-inset);

  border-radius: var(--cpf-radius-hero);

  overflow: hidden;

  margin: 0;

  z-index: var(--cpf-z-0);

}



.cpf-hero__bg img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  object-position: center center;

}



/* Gradient overlay for text legibility */

.cpf-hero__overlay {

  position: absolute;

  inset-block-start: var(--cpf-nav-height);

  inset-inline: var(--cpf-hero-inset);

  inset-block-end: var(--cpf-hero-inset);

  border-radius: var(--cpf-radius-hero);

  background: linear-gradient(160deg,

      rgba(10, 10, 10, 0.45) 0%,

      rgba(10, 10, 10, 0.5) 40%,

      rgba(10, 10, 10, 0.8) 100%);

  z-index: var(--cpf-z-1);

}



/* ---- Giant title "Zylyf® Studio" ---- */

.cpf-hero__title {

  position: absolute;

  inset-block-start: var(--cpf-nav-height);

  inset-inline: 0;

  block-size: calc(100% - var(--cpf-nav-height));

  z-index: var(--cpf-z-2);

  display: flex;

  flex-direction: column;

  /* Title vertically centered in upper 65% of hero */

  justify-content: center;

  align-items: flex-start;

  padding-inline: clamp(1.5rem, 2.5vw, 2.25rem);

  padding-block: clamp(4rem, 7vw, 5.625rem);

  pointer-events: none;

  user-select: none;

}



.cpf-hero__title-main {

  display: block;

  font-family: var(--cpf-font-display);

  font-size: var(--cpf-text-hero);

  font-weight: 500;

  color: var(--cpf-color-white);

  letter-spacing: var(--cpf-ls-hero);

  line-height: 0.88;

  white-space: nowrap;

}



/* The ® glyph — slightly raised, smaller */

.cpf-hero__title-reg {

  font-size: 0.42em;

  vertical-align: middle;

  font-weight: 500;

  position: relative;

  inset-block-start: -0.5em;

}



/* "Studio" — centered below, ~38% of hero font */

.cpf-hero__title-sub {

  display: block;

  font-family: var(--cpf-font-display);

  font-size: var(--cpf-text-studio);

  font-weight: 500;

  color: var(--cpf-color-white);

  letter-spacing: var(--cpf-ls-hero);

  line-height: 1;

  margin-block-start: -0.2em;

  margin-inline-start: 16rem;

  /* precise offset */

  opacity: 1;

  visibility: visible;

}



/* ---- Services list — top right ---- */

.cpf-hero__services {

  position: absolute;

  inset-block-start: calc(var(--cpf-nav-height) + clamp(4rem, 7vw, 5.625rem));

  inset-inline-end: clamp(1.5rem, 2.5vw, 2.25rem);

  z-index: var(--cpf-z-2);

  /* Removed pointer-events: none to enable hovers */

}



.cpf-hero__services-list {

  display: flex;

  flex-direction: column;

  gap: 0.65rem;

  /* Increased gap from 0.3rem for better rhythm */

}



.cpf-hero__services-item {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 600;

  /* Bolder weight */

  color: var(--cpf-color-white);

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1.4;

  white-space: nowrap;

  opacity: 0.65;

  /* Dimmed state */

  cursor: pointer;

  transform-origin: right;

  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-hero__services-item:hover {

  opacity: 1;

  /* Brightens on hover */

  transform: translateX(-6px);

  /* Shifts left interactively */

}



/* ---- Decorative + crosshair markers ---- */

.cpf-hero__marker {

  position: absolute;

  z-index: var(--cpf-z-2);

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  font-size: 1rem;

  font-weight: 300;

  opacity: 0.55;

  line-height: 1;

  pointer-events: none;

  user-select: none;

}



/* Horizontal alignment: ~2%, 27%, 51%, 75% */

/* Vertical: ~68% from top of viewport */

.cpf-hero__marker--1 {

  inset-block-start: 68%;

  inset-inline-start: 2%;

}



.cpf-hero__marker--2 {

  inset-block-start: 68%;

  inset-inline-start: 27%;

}



.cpf-hero__marker--3 {

  inset-block-start: 68%;

  inset-inline-start: 51%;

}



.cpf-hero__marker--4 {

  inset-block-start: 68%;

  inset-inline-start: 75%;

}



/* ---- Tagline — bottom left ---- */

.cpf-hero__tagline {

  position: absolute;

  inset-block-end: clamp(1.25rem, 2.5vw, 2rem);

  inset-inline-start: clamp(1.5rem, 2.5vw, 2.25rem);

  z-index: var(--cpf-z-2);

  max-inline-size: min(290px, 30vw);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 400;

  color: rgba(255, 255, 255, 0.6);

  /* Dimmed regular text for editorial contrast */

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1.65;

  /* Better breathability */

  pointer-events: none;

}



.cpf-hero__tagline strong {

  font-weight: 600;

  color: var(--cpf-color-white);

  /* High contrast pop */

}



/* ---- Copyright — bottom center ---- */

.cpf-hero__copyright {

  position: absolute;

  inset-block-end: clamp(1.25rem, 2.5vw, 2rem);

  inset-inline-start: 50%;

  transform: translateX(-50%);

  z-index: var(--cpf-z-2);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-xs);

  font-weight: 500;

  color: var(--cpf-color-white);

  letter-spacing: var(--cpf-ls-tight);

  opacity: 0.8;

  white-space: nowrap;

  pointer-events: none;

}



/* ---- Team Lead Card — bottom right ---- */

.cpf-hero__card {

  position: absolute;

  inset-block-end: clamp(1.25rem, 2.5vw, 2rem);

  inset-inline-end: clamp(1.5rem, 2.5vw, 2.25rem);

  z-index: var(--cpf-z-2);

  display: flex;

  align-items: center;

  gap: 0.875rem;

  background-color: var(--cpf-color-white);

  border-radius: var(--cpf-radius-lg);

  padding-block: 0.875rem;

  padding-inline: 1rem 1.125rem;

  inline-size: min(310px, 27vw);

  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.18);

}



.cpf-hero__card-photo {

  flex-shrink: 0;

  inline-size: 70px;

  block-size: 80px;

  border-radius: 10px;

  overflow: hidden;

  margin: 0;

}



.cpf-hero__card-photo img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  object-position: center top;

}



.cpf-hero__card-info {

  display: flex;

  flex-direction: column;

  gap: 0.1rem;

  flex: 1;

  min-inline-size: 0;

}



.cpf-hero__card-role {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-xs);

  font-weight: 500;

  color: var(--cpf-color-dark);

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1.35;

}



.cpf-hero__card-company {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-xs);

  font-weight: 500;

  color: var(--cpf-color-dark);

  letter-spacing: var(--cpf-ls-tight);

  opacity: 0.6;

  line-height: 1.35;

}



.cpf-hero__card-name {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);

  font-weight: 600;

  color: var(--cpf-color-dark);

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1.2;

  margin-block-start: 0.2rem;

  margin-block-end: 0.45rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.cpf-hero__card-cta {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  text-decoration: none;

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-xs);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  padding-block: 0.375rem;

  padding-inline: 0.8rem;

  border-radius: 50px;

  transition: opacity var(--cpf-transition);

  white-space: nowrap;

  align-self: flex-start;

}



.cpf-hero__card-cta:hover {

  opacity: 0.75;

}



.cpf-hero__card-cta:focus-visible {

  outline: 2px solid var(--cpf-color-dark);

  outline-offset: 2px;

}



.cpf-hero__card-cta-arrow {

  display: inline-block;

  transition: transform var(--cpf-transition);

  font-style: normal;

}



.cpf-hero__card-cta:hover .cpf-hero__card-cta-arrow {

  transform: translateX(3px);

}



/* =============================================

   FADE-IN ANIMATION SYSTEM

   ============================================= */

.fade-in {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.6s var(--cpf-ease), transform 0.6s var(--cpf-ease);

}



.fade-in.is-visible {

  opacity: 1;

  transform: translateY(0);

}



/* =============================================

   RESPONSIVE — Tablet (810px–1199px)

   ============================================= */

@media (min-width: 810px) and (max-width: 1199.98px) {

  .cpf-nav {

    padding-inline: 1.875rem;

    max-inline-size: 100%;

  }



  .cpf-nav__menu {

    gap: 1.5rem;

  }



  .cpf-hero__card {

    inline-size: min(280px, 28vw);

  }



  .cpf-hero__services-item {

    font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);

  }

}



/* =============================================

   RESPONSIVE — Mobile (≤809px)

   ============================================= */

@media (max-width: 809.98px) {

  .cpf-nav {

    padding-inline: 1.25rem;

    max-inline-size: 100%;

  }



  /* Hide desktop menu on mobile */

  .cpf-nav__menu {

    display: none;

  }



  /* Hero: flush to edges on mobile */

  .cpf-hero {

    block-size: 100svh;

  }



  .cpf-hero__bg,

  .cpf-hero__overlay {

    inset-inline: 0;

    inset-block-end: 0;

    border-radius: 0 0 var(--cpf-radius-hero) var(--cpf-radius-hero);

  }



  /* Hide non-essential elements */

  .cpf-hero__services {

    display: none;

  }



  .cpf-hero__marker {

    display: none;

  }



  .cpf-hero__copyright {

    display: none;

  }



  .cpf-hero__title {

    padding-inline: 1.25rem;

    padding-block: 2rem;

  }



  .cpf-hero__tagline {

    max-inline-size: 58vw;

    inset-block-end: 1rem;

    inset-inline-start: 1rem;

  }



  .cpf-hero__card {

    inset-inline-end: 1rem;

    inset-block-end: 1rem;

    inline-size: auto;

    max-inline-size: 220px;

    padding: 0.75rem;

    gap: 0.625rem;

  }



  .cpf-hero__card-photo {

    inline-size: 52px;

    block-size: 62px;

  }



  .cpf-hero__card-name {

    font-size: 0.875rem;

  }

}



/* =============================================

   SECTION: Clients Logostrip

   SHOT REF: shots/1.png

   STATUS: Draft

   ============================================= */

.cpf-clients {

  padding-block: clamp(3rem, 6vw, 5rem);

  padding-inline: var(--cpf-nav-px);

  background-color: var(--cpf-color-white);

  border-block-start: 1px solid rgba(0, 0, 0, 0.07);

}



.cpf-clients__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  color: var(--cpf-color-dark);

}



.cpf-clients__years {

  opacity: 0.5;

}



.cpf-clients__grid {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: clamp(1.5rem, 3vw, 2.5rem);

}



.cpf-clients__item {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

}



.cpf-clients__item img {

  max-inline-size: 130px;

  max-block-size: 42px;

  object-fit: contain;

  filter: grayscale(1) opacity(0.45);

  transition: filter var(--cpf-transition-md);

}



.cpf-clients__item:hover img {

  filter: grayscale(0) opacity(1);

}



/* =============================================

   SECTION: Projects Grid

   SHOT REF: shots/1.png + shots/4.png (Close-up)

   STATUS: Draft

   ============================================= */

.cpf-projects {

  padding-block-start: clamp(4rem, 8vw, 7rem);

  padding-block-end: clamp(4rem, 8vw, 7rem);

  padding-inline: var(--cpf-nav-px);

  background-color: var(--cpf-color-white);

}



/* ---- Section Header ---- */

.cpf-projects__header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-block-end: clamp(2.5rem, 5vw, 4rem);

  gap: var(--cpf-space-lg);

}



.cpf-projects__title-group {

  display: flex;

  align-items: baseline;

  gap: 0.5rem;

  flex-shrink: 0;

}



.cpf-projects__count {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  opacity: 0.55;

  align-self: flex-start;

  margin-block-start: 0.35rem;

}



.cpf-projects__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3.5rem, 10vw, 8.5rem);

  font-weight: 600;

  letter-spacing: var(--cpf-ls-hero);

  line-height: 0.9;

  color: var(--cpf-color-dark);

}



.cpf-projects__year {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.75rem, 1.2vw, 1rem);

  font-weight: 600;

  letter-spacing: var(--cpf-ls-tight);

  opacity: 0.6;

  align-self: flex-start;

  margin-block-start: 0.25rem;

}



.cpf-projects__info {

  max-inline-size: 320px;

  padding-block-start: 0.5rem;

}



.cpf-projects__info p {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  line-height: 1.6;

  color: var(--cpf-color-dark);

  opacity: 0.65;

  letter-spacing: var(--cpf-ls-tight);

}



/* ---- Toolbar: Search + Filter ---- */

.cpf-projects__toolbar {

  display: flex;

  align-items: center;

  gap: 0.625rem;

  margin-block-end: clamp(1.5rem, 3vw, 2rem);

}



.cpf-projects__search {

  position: relative;

  flex: 0 0 210px;

}



.cpf-projects__search-icon {

  position: absolute;

  inset-inline-start: 0.9rem;

  inset-block-start: 50%;

  transform: translateY(-50%);

  opacity: 0.4;

  display: flex;

  align-items: center;

  pointer-events: none;

}



.cpf-projects__search input {

  inline-size: 100%;

  padding-block: 0.65rem;

  padding-inline: 2.5rem 1rem;

  background-color: var(--cpf-color-light);

  border: 1px solid rgba(0, 0, 0, 0.06);

  border-radius: var(--cpf-radius-lg);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  color: var(--cpf-color-dark);

  outline: none;

  transition: border-color var(--cpf-transition);

}



.cpf-projects__search input::placeholder {

  opacity: 0.45;

}



.cpf-projects__search input:focus {

  border-color: rgba(0, 0, 0, 0.25);

}



.cpf-projects__filter-trigger {

  display: inline-flex;

  align-items: center;

  gap: 1.25rem;

  padding-block: 0.65rem;

  padding-inline: 1.25rem;

  background-color: var(--cpf-color-light);

  border: 1px solid rgba(0, 0, 0, 0.06);

  border-radius: var(--cpf-radius-lg);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  color: var(--cpf-color-dark);

  cursor: pointer;

  transition: background-color var(--cpf-transition), border-color var(--cpf-transition);

}



.cpf-projects__filter-trigger:hover {

  background-color: #e9e9e9;

  border-color: rgba(0, 0, 0, 0.12);

}



.cpf-projects__filter-arrow {

  display: flex;

  align-items: center;

  opacity: 0.5;

}



/* ---- 2-Column Project Grid ---- */

.cpf-projects__grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: clamp(0.75rem, 1.5vw, 1.25rem);

}



/* ---- Individual Project Card ---- */

.cpf-projects__card {

  position: relative;

  display: flex;

  flex-direction: column;

  background-color: var(--cpf-color-light);

  border: 1px solid rgba(0, 0, 0, 0.05);

  border-radius: var(--cpf-radius-md);

  padding: 0.5rem 0.5rem 0;

  overflow: hidden;

  cursor: pointer;

  transition: box-shadow var(--cpf-transition-md);

}



.cpf-projects__card:hover {

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

}



/* Card top bar: title + dots */

.cpf-projects__card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-block: 0.6rem;

  padding-inline: 0.5rem;

}



.cpf-projects__card-meta {

  display: flex;

  align-items: baseline;

  gap: 0.35rem;

}



.cpf-projects__card-title {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-base);

  font-weight: 600;

  color: var(--cpf-color-dark);

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-projects__card-date {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-xs);

  font-weight: 500;

  color: var(--cpf-color-dark);

  opacity: 0.45;

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-projects__card-dots {

  font-size: 0.75rem;

  opacity: 0.3;

  letter-spacing: 0.15em;

  line-height: 1;

}



/* Card image figure */

.cpf-projects__card-media {

  position: relative;

  border-radius: calc(var(--cpf-radius-md) - 2px);

  overflow: hidden;

  aspect-ratio: 16 / 10;

  margin: 0;

  display: block;

}



.cpf-projects__card-media img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  object-position: center center;

  transition: transform 0.85s var(--cpf-ease);

  display: block;

}



.cpf-projects__card:hover .cpf-projects__card-media img {

  transform: scale(1.06);

}



/* Hover overlay with logo + name */

.cpf-projects__card-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  background-color: rgba(10, 10, 10, 0.52);

  opacity: 0;

  transition: opacity var(--cpf-transition-md);

}



.cpf-projects__card:hover .cpf-projects__card-overlay {

  opacity: 1;

}



.cpf-projects__card-logo {

  max-inline-size: 60%;

  inline-size: 100%;

  block-size: auto;

  object-fit: contain;

  filter: invert(1) brightness(10);

}



.cpf-projects__card-name {

  font-family: var(--cpf-font-display);

  font-size: clamp(1rem, 2.2vw, 1.5rem);

  font-weight: 600;

  color: var(--cpf-color-white);

  letter-spacing: var(--cpf-ls-hero);

}



/* =============================================

   RESPONSIVE — Projects & Clients (Tablet 810–1199px)

   ============================================= */

@media (min-width: 810px) and (max-width: 1199.98px) {

  .cpf-projects__title {

    font-size: clamp(3rem, 8vw, 6rem);

  }



  .cpf-projects__info {

    max-inline-size: 260px;

  }

}



/* =============================================

   RESPONSIVE — Projects & Clients (Mobile ≤809px)

   ============================================= */

@media (max-width: 809.98px) {

  .cpf-clients {

    padding-inline: 1.25rem;

  }



  .cpf-clients__grid {

    justify-content: center;

    gap: 1.5rem 2rem;

  }



  .cpf-projects {

    padding-inline: 1.25rem;

  }



  .cpf-projects__header {

    flex-direction: column;

    gap: 1rem;

  }



  .cpf-projects__info {

    max-inline-size: 100%;

  }



  .cpf-projects__toolbar {

    flex-wrap: wrap;

  }



  .cpf-projects__search {

    flex: 1;

    min-inline-size: 160px;

  }



  .cpf-projects__grid {

    grid-template-columns: 1fr;

    gap: 0.875rem;

  }

}



/* =============================================

   GLOBAL ANCHOR RESET — Critical Fix

   Prevents browser-default blue link colors bleeding

   through on all elements.

   ============================================= */

a {

  color: inherit;

  text-decoration: none;

}



/* =============================================

   IMPROVEMENTS: Services List — Hero

   ============================================= */

.cpf-hero__services-list {

  border-inline-start: 1px solid rgba(255, 255, 255, 0.25);

  padding-inline-start: 0.75rem;

}



.cpf-hero__services-item {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.7rem, 1vw, 0.8125rem);

  font-weight: 400;

  color: var(--cpf-color-white);

  letter-spacing: 0.01em;

  opacity: 0.85;

  line-height: 1.7;

}



/* =============================================

   IMPROVEMENTS: Hero Tagline

   ============================================= */

.cpf-hero__tagline {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.7rem, 1.05vw, 0.8125rem);

  font-weight: 400;

  color: var(--cpf-color-white);

  opacity: 0.8;

  line-height: 1.65;

  letter-spacing: 0.01em;

}



/* =============================================

   IMPROVEMENTS: Nav Logo — Zylyf brand weight

   ============================================= */

.cpf-nav__logo {

  font-size: clamp(0.9rem, 1.2vw, 1rem);

  font-weight: 600;

  letter-spacing: -0.03em;

}



/* =============================================

   IMPROVEMENTS: Nav Links — enforce dark color

   ============================================= */

.cpf-nav__link,

.cpf-nav__drawer-link {

  color: var(--cpf-color-dark);

}



/* =============================================

   IMPROVEMENTS: Project Card hover box-shadow upgrade

   ============================================= */

.cpf-projects__card:hover {

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);

  transform: translateY(-2px);

  transition: box-shadow var(--cpf-transition-md), transform var(--cpf-transition-md);

}



/* =============================================

   IMPROVEMENTS: Clients logostrip — enforce dark filter

   ============================================= */

.cpf-clients__item img {

  filter: grayscale(1) opacity(0.4);

}



.cpf-clients__item:hover img {

  filter: grayscale(0) opacity(1);

  transition: filter 0.4s ease;

}



/* ==============================================

   PREMIUM VISUAL OVERHAUL — v2

   ============================================== */



/* -- New design token: warm accent color -- */

:root {

  --cpf-color-accent: #e8c97a;

  /* warm amber — depth accent for hero glow */

  --cpf-color-accent-green: #4ade80;

  /* availability badge dot */

}



/* -----------------------------------------------

   1. STUDIO TEXT — Editorial outlined stroke

   ----------------------------------------------- */

.cpf-hero__title-sub {

  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.7);

  color: transparent !important;

  font-weight: 600;

}



/* -----------------------------------------------

   2. GRAIN TEXTURE — premium noise overlay

   SVG-based fractal noise, no external assets

   ----------------------------------------------- */

.cpf-hero__grain {

  position: absolute;

  inset-block-start: var(--cpf-nav-height);

  inset-inline: var(--cpf-hero-inset);

  inset-block-end: var(--cpf-hero-inset);

  border-radius: var(--cpf-radius-hero);

  z-index: 4;

  pointer-events: none;

  opacity: 0.045;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  background-repeat: repeat;

  background-size: 180px 180px;

}



/* -----------------------------------------------

   3. WARM GLOW ORB — cinematic depth accent

   ----------------------------------------------- */

.cpf-hero__glow {

  position: absolute;

  inset-block-start: 30%;

  inset-inline-end: 15%;

  inline-size: clamp(300px, 45vw, 650px);

  block-size: clamp(300px, 45vw, 650px);

  border-radius: 50%;

  background: radial-gradient(circle,

      rgba(232, 201, 122, 0.12) 0%,

      rgba(232, 201, 122, 0.04) 50%,

      transparent 70%);

  z-index: 2;

  pointer-events: none;

  filter: blur(40px);

  animation: cpf-glow-pulse 6s ease-in-out infinite alternate;

}



@keyframes cpf-glow-pulse {

  from {

    opacity: 0.6;

    transform: scale(1);

  }



  to {

    opacity: 1;

    transform: scale(1.12);

  }

}



/* -----------------------------------------------

   4. SERVICES — numbered counter + year label

   ----------------------------------------------- */

.cpf-hero__services-year {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  letter-spacing: 0.08em;

  color: var(--cpf-color-white);

  opacity: 0.4;

  margin-block-end: 0.6rem;

  text-transform: uppercase;

}



.cpf-hero__services-list {

  counter-reset: svc-counter;

  border-inline-start: 1px solid rgba(255, 255, 255, 0.2);

  padding-inline-start: 0.8rem;

}



.cpf-hero__services-item::before {

  counter-increment: svc-counter;

  content: "0" counter(svc-counter) "  ";

  font-family: var(--cpf-font-mono);

  font-size: 0.6em;

  opacity: 0.4;

  letter-spacing: 0.05em;

  margin-inline-end: 0.2rem;

}



/* -----------------------------------------------

   5. AVAILABILITY BADGE — glassmorphism pill

   ----------------------------------------------- */

.cpf-hero__badge {

  position: absolute;

  inset-block-start: calc(var(--cpf-nav-height) + clamp(4rem, 7vw, 5.625rem));

  inset-inline-start: clamp(1.5rem, 2.5vw, 2.25rem);

  z-index: var(--cpf-z-2);

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding-block: 0.4rem;

  padding-inline: 0.75rem 0.9rem;

  background-color: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 50px;

  backdrop-filter: blur(12px);

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

  font-family: var(--cpf-font-body);

  font-size: 0.65rem;

  font-weight: 500;

  color: var(--cpf-color-white);

  letter-spacing: 0.03em;

  pointer-events: none;

  user-select: none;

}



.cpf-hero__badge-dot {

  display: inline-block;

  inline-size: 7px;

  block-size: 7px;

  border-radius: 50%;

  background-color: var(--cpf-color-accent-green);

  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);

  animation: cpf-badge-pulse 2.2s ease-in-out infinite;

  flex-shrink: 0;

}



@keyframes cpf-badge-pulse {

  0% {

    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);

  }



  70% {

    box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);

  }

}



/* -----------------------------------------------

   6. SCROLL INDICATOR — animated line

   ----------------------------------------------- */

.cpf-hero__scroll {

  position: absolute;

  inset-block-end: clamp(1.5rem, 3vw, 2.5rem);

  inset-inline-start: 50%;

  transform: translateX(-50%);

  z-index: var(--cpf-z-2);

  display: flex;

  flex-direction: column;

  align-items: center;

  pointer-events: none;

}



.cpf-hero__scroll-line {

  display: block;

  inline-size: 1px;

  block-size: 48px;

  background: linear-gradient(to bottom,

      rgba(255, 255, 255, 0.7) 0%,

      transparent 100%);

  animation: cpf-scroll-pulse 2.4s ease-in-out infinite;

  transform-origin: top center;

}



@keyframes cpf-scroll-pulse {

  0% {

    opacity: 0;

    transform: scaleY(0);

    transform-origin: top;

  }



  30% {

    opacity: 1;

  }



  70% {

    opacity: 1;

    transform: scaleY(1);

  }



  100% {

    opacity: 0;

    transform: scaleY(1) translateY(10px);

  }

}



/* -----------------------------------------------

   7. NAV — frosted glass backdrop

   ----------------------------------------------- */

.cpf-header {

  background-color: rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(20px);

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

  border-block-end: 1px solid rgba(0, 0, 0, 0.05);

}



/* -----------------------------------------------

   8. HERO TITLE MAIN — subtle fade-in entrance

   ----------------------------------------------- */

.cpf-hero__title-main {

  animation: cpf-title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.cpf-hero__title-sub {

  animation: cpf-title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;

}



@keyframes cpf-title-reveal {

  from {

    opacity: 0;

    transform: translateY(24px);

    filter: blur(4px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

    filter: blur(0);

  }

}



/* -----------------------------------------------

   9. HIDE BADGE on mobile (space constraint)

   ----------------------------------------------- */

@media (max-width: 809.98px) {

  .cpf-hero__badge {

    display: none;

  }



  .cpf-hero__grain {

    display: none;

  }



  .cpf-hero__services-year {

    display: none;

  }

}



/* ==============================================

   REVERT — Remove all v2 Premium Overhaul effects

   Restoring original clean design from shot/1.png

   ============================================== */



/* 1. Kill grain + glow + badge + scroll — removed from HTML, hide via CSS too */

.cpf-hero__grain,

.cpf-hero__glow,

.cpf-hero__badge,

.cpf-hero__scroll {

  display: none;

}



/* 2. Restore "Studio" to solid white (remove outline stroke) */

.cpf-hero__title-sub {

  -webkit-text-stroke: 0 transparent;

  color: var(--cpf-color-white);

  animation: none;

}



/* 3. Remove entrance animation from title */

.cpf-hero__title-main {

  animation: none;

  opacity: 1;

  transform: none;

  filter: none;

}



/* 4. Remove numbered counter from services */

.cpf-hero__services-list {

  counter-reset: none;

  border-inline-start: none;

  padding-inline-start: 0;

}



.cpf-hero__services-item::before {

  display: none;

  content: none;

}



/* 5. Restore services item to original clean weight */

.cpf-hero__services-item {

  font-weight: 500;

  opacity: 1;

  line-height: 1.4;

  font-size: var(--cpf-text-sm);

  letter-spacing: var(--cpf-ls-tight);

}



/* 6. Restore nav to original clean white (no frosted glass) */

.cpf-header {

  background-color: var(--cpf-color-white);

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  border-block-end: none;

}



/* 7. Restore tagline strong tag styling */

.cpf-hero__tagline strong {

  font-weight: 700;

  color: var(--cpf-color-white);

}



/* 8. Remove services year label */

.cpf-hero__services-year {

  display: none;

}



/* ==============================================

   SECTION 04: BLOG — Expert Insights

   SHOT REF: shots/2.png

   ============================================== */



.cpf-blog {

  padding-block: clamp(4rem, 8vw, 7rem);

  padding-inline: clamp(1.5rem, 5vw, 4rem);

  background-color: var(--cpf-color-white);

}



.cpf-blog__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(2.5rem, 7vw, 5.5rem);

  font-weight: 700;

  letter-spacing: -0.03em;

  line-height: 1;

  color: var(--cpf-color-black);

  margin-block-end: clamp(2rem, 4vw, 3rem);

}



/* Header meta row (label | intro | desc) */

.cpf-blog__header {

  display: grid;

  grid-template-columns: auto 1fr 1fr;

  gap: clamp(1rem, 3vw, 3rem);

  align-items: start;

  margin-block-end: clamp(2.5rem, 5vw, 4rem);

  padding-block-end: clamp(1.5rem, 3vw, 2.5rem);

  border-block-end: 1px solid var(--cpf-color-border);

}



.cpf-blog__label {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-xs);

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--cpf-color-black);

  white-space: nowrap;

  padding-block-start: 0.25rem;

}



.cpf-blog__label-dot {

  font-size: 0.5rem;

  color: var(--cpf-color-black);

}



.cpf-blog__intro {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.95rem, 1.5vw, 1.2rem);

  font-weight: 500;

  line-height: 1.4;

  color: var(--cpf-color-black);

}



.cpf-blog__intro strong {

  font-weight: 700;

}



.cpf-blog__desc {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  line-height: 1.6;

  color: var(--cpf-color-muted);

}



/* ---- Grid: 1 featured + 2 small ---- */

.cpf-blog__grid {

  display: grid;

  grid-template-columns: 3fr 2fr;

  grid-template-rows: auto auto;

  gap: var(--cpf-gap-sm);

  margin-block-end: var(--cpf-gap-sm);

}



/* Featured spans both rows on left */

.cpf-blog__card--featured {

  grid-row: 1 / 3;

}



.cpf-blog__card-media {

  position: relative;

  border-radius: var(--cpf-radius-card);

  overflow: hidden;

  block-size: 100%;

  min-block-size: 340px;

}



.cpf-blog__card-media img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  display: block;

}



.cpf-blog__card-overlay-info {

  position: absolute;

  inset-block-end: 0;

  inset-inline: 0;

  padding: clamp(1rem, 2.5vw, 1.75rem);

  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);

  color: var(--cpf-color-white);

}



.cpf-blog__card-overlay-info .cpf-blog__card-title {

  font-size: clamp(1.1rem, 2vw, 1.5rem);

  font-weight: 700;

  color: var(--cpf-color-white);

  margin-block: 0.35rem 0.5rem;

}



.cpf-blog__card-overlay-info .cpf-blog__card-excerpt {

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.8);

  line-height: 1.5;

}



/* Small cards — stacked on right column */

.cpf-blog__card--small {

  display: flex;

  flex-direction: column;

  border: 1px solid var(--cpf-color-border);

  border-radius: var(--cpf-radius-card);

  overflow: hidden;

  background-color: var(--cpf-color-white);

  transition: box-shadow 0.3s ease;

}



.cpf-blog__card--small:hover {

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

}



.cpf-blog__card--small .cpf-blog__card-thumb {

  position: relative;

  overflow: hidden;

  flex-shrink: 0;

  block-size: 140px;

}



.cpf-blog__card--small .cpf-blog__card-thumb img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.5s ease;

}



.cpf-blog__card--small:hover .cpf-blog__card-thumb img {

  transform: scale(1.04);

}



.cpf-blog__card--small .cpf-blog__card-body {

  padding: 0.9rem 1rem 1rem;

  flex: 1;

}



/* ---- 4-column mini grid ---- */

.cpf-blog__grid--4col {

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: auto;

}



.cpf-blog__card--mini {

  border: 1px solid var(--cpf-color-border);

  border-radius: var(--cpf-radius-card);

  overflow: hidden;

  background-color: var(--cpf-color-white);

  transition: box-shadow 0.3s ease;

}



.cpf-blog__card--mini:hover {

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

}



.cpf-blog__card--mini .cpf-blog__card-thumb {

  position: relative;

  overflow: hidden;

  block-size: 140px;

}



.cpf-blog__card--mini .cpf-blog__card-thumb img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.5s ease;

}



.cpf-blog__card--mini:hover .cpf-blog__card-thumb img {

  transform: scale(1.04);

}



.cpf-blog__card-arrow {

  position: absolute;

  inset-block-start: 0.6rem;

  inset-inline-end: 0.75rem;

  font-size: 0.9rem;

  color: var(--cpf-color-white);

  line-height: 1;

  background-color: var(--cpf-color-black);

  inline-size: 26px;

  block-size: 26px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

}



.cpf-blog__card--mini .cpf-blog__card-body {

  padding: 0.85rem 0.9rem 1rem;

}



/* Shared card typography */

.cpf-blog__date {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  letter-spacing: 0.06em;

  color: var(--cpf-color-muted);

  margin-block-end: 0.4rem;

}



.cpf-blog__card-title {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.8rem, 1.1vw, 0.95rem);

  font-weight: 600;

  line-height: 1.35;

  color: var(--cpf-color-black);

  margin-block-end: 0.4rem;

}



.cpf-blog__card-excerpt {

  font-size: 0.78rem;

  line-height: 1.55;

  color: var(--cpf-color-muted);

}



.cpf-blog__card-link {

  display: block;

  block-size: 100%;

  text-decoration: none;

  color: inherit;

}



/* ==============================================

   SECTION 05: PRE-FOOTER CTA + NEWSLETTER

   SHOT REF: shots/2.png bottom

   ============================================== */



.cpf-cta {

  position: relative;

  padding-block: clamp(4rem, 7vw, 6rem);

  padding-inline: clamp(1.5rem, 5vw, 4rem);

  background-color: var(--cpf-color-white);

  border-block-start: 1px solid var(--cpf-color-border);

}



.cpf-cta__inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(3rem, 8vw, 8rem);

  align-items: start;

  max-inline-size: 1200px;

}



.cpf-cta__body {

  font-family: var(--cpf-font-body);

  font-size: clamp(1rem, 1.8vw, 1.35rem);

  font-weight: 400;

  line-height: 1.5;

  color: var(--cpf-color-muted);

  margin-block-end: clamp(1.5rem, 3vw, 2rem);

}



.cpf-cta__body strong {

  color: var(--cpf-color-black);

  font-weight: 700;

}



.cpf-cta__person {

  display: flex;

  align-items: center;

  gap: 0.75rem;

}



.cpf-cta__avatar {

  flex-shrink: 0;

}



.cpf-cta__avatar img {

  inline-size: 40px;

  block-size: 40px;

  border-radius: 50%;

  object-fit: cover;

  object-position: top center;

  display: block;

}



.cpf-cta__person-name {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 600;

  color: var(--cpf-color-black);

}



.cpf-cta__person-role {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  color: var(--cpf-color-muted);

  letter-spacing: 0.04em;

}



/* Newsletter form */

.cpf-cta__newsletter-title {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.2rem, 2vw, 1.75rem);

  font-weight: 700;

  color: var(--cpf-color-black);

  margin-block-end: 1.25rem;

}



.cpf-cta__form {

  display: flex;

  flex-direction: column;

  gap: 0;

}



.cpf-cta__field {

  display: flex;

  flex-direction: column;

  gap: 0.25rem;

  margin-block-end: 0.2rem;

  padding-block-end: 0.75rem;

  border-block-end: 1px solid var(--cpf-color-border);

}



.cpf-cta__field+.cpf-cta__field {

  margin-block-start: 0.75rem;

}



.cpf-cta__label {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  letter-spacing: 0.06em;

  color: var(--cpf-color-muted);

}



.cpf-cta__input {

  border: none;

  outline: none;

  background: transparent;

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-base);

  color: var(--cpf-color-black);

  padding: 0;

  inline-size: 100%;

}



.cpf-cta__submit {

  margin-block-start: 1.25rem;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  align-self: flex-start;

  padding-block: 0.6rem;

  padding-inline: 1.2rem;

  background-color: var(--cpf-color-black);

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  border: none;

  border-radius: 50px;

  cursor: pointer;

  transition: opacity 0.2s ease;

}



.cpf-cta__submit:hover {

  opacity: 0.8;

}



.cpf-cta__submit-dot {

  display: inline-block;

  inline-size: 8px;

  block-size: 8px;

  border-radius: 50%;

  background-color: var(--cpf-color-white);

  opacity: 0.6;

}



.cpf-cta__disclaimer {

  margin-block-start: 0.75rem;

  font-size: 0.72rem;

  line-height: 1.5;

  color: var(--cpf-color-muted);

}



/* Decorative crosshair markers */

.cpf-cta__marker {

  position: absolute;

  font-size: 1rem;

  color: var(--cpf-color-border);

  font-weight: 300;

  user-select: none;

}



.cpf-cta__marker--1 {

  inset-block-end: 0;

  inset-inline-start: 0;

}



.cpf-cta__marker--2 {

  inset-block-end: 0;

  inset-inline-start: 50%;

  transform: translateX(-50%);

}



.cpf-cta__marker--3 {

  inset-block-end: 0;

  inset-inline-end: 0;

}



/* ==============================================

   FOOTER

   SHOT REF: shots/2.png + shots/4.png

   ============================================== */



.cpf-footer {

  background-color: var(--cpf-color-white);

  border-block-start: 1px solid var(--cpf-color-border);

  padding-block-start: clamp(2.5rem, 5vw, 4rem);

}



/* Meta row: contact / nav / social */

.cpf-footer__meta {

  display: grid;

  grid-template-columns: auto 1fr 1fr;

  gap: clamp(2rem, 5vw, 6rem);

  padding-inline: clamp(1.5rem, 5vw, 4rem);

  padding-block-end: clamp(2rem, 4vw, 3.5rem);

  border-block-end: 1px solid var(--cpf-color-border);

}



.cpf-footer__phone {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-sm);

  color: var(--cpf-color-muted);

  margin-block-end: 0.5rem;

}



.cpf-footer__email-link {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  font-family: var(--cpf-font-body);

  font-size: clamp(1rem, 2vw, 1.5rem);

  font-weight: 700;

  color: var(--cpf-color-black);

  text-decoration: underline;

  text-underline-offset: 3px;

  text-decoration-color: rgba(0, 0, 0, 0.2);

  transition: text-decoration-color 0.2s ease;

}



.cpf-footer__email-link:hover {

  text-decoration-color: var(--cpf-color-black);

}



.cpf-footer__email-dot {

  font-size: 0.6rem;

  color: var(--cpf-color-black);

}



.cpf-footer__nav-label {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--cpf-color-muted);

  margin-block-end: 0.75rem;

}



.cpf-footer__nav-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.35rem;

}



.cpf-footer__nav-link {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  color: var(--cpf-color-black);

  transition: opacity 0.2s;

}



.cpf-footer__nav-link:hover {

  opacity: 0.5;

}



.cpf-footer__nav-link sup {

  font-size: 0.55em;

  vertical-align: super;

}



/* Wordmark — huge brand logotype */

.cpf-footer__wordmark {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(0.5rem, 1.5vw, 1rem);

  padding-inline: clamp(1.5rem, 5vw, 4rem);

}



.cpf-footer__wordmark-main {

  font-family: var(--cpf-font-display);

  font-size: clamp(5rem, 15vw, 14rem);

  font-weight: 700;

  letter-spacing: -0.04em;

  line-height: 0.85;

  color: var(--cpf-color-black);

}



.cpf-footer__wordmark-reg {

  font-size: 0.35em;

  vertical-align: super;

  font-weight: 400;

}



.cpf-footer__wordmark-sub {

  font-family: var(--cpf-font-display);

  font-size: clamp(1.5rem, 4vw, 3.5rem);

  font-weight: 600;

  letter-spacing: -0.02em;

  color: var(--cpf-color-black);

}



/* Legal bar */

.cpf-footer__legal {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-block: 1rem;

  padding-inline: clamp(1.5rem, 5vw, 4rem);

  border-block-start: 1px solid var(--cpf-color-border);

  gap: 1rem;

  flex-wrap: wrap;

}



.cpf-footer__copy {

  font-family: var(--cpf-font-mono);

  font-size: 0.68rem;

  color: var(--cpf-color-muted);

}



.cpf-footer__legal-links {

  display: flex;

  gap: 1.5rem;

  list-style: none;

  flex-wrap: wrap;

}



.cpf-footer__legal-link {

  font-family: var(--cpf-font-mono);

  font-size: 0.68rem;

  color: var(--cpf-color-muted);

  transition: color 0.2s;

}



.cpf-footer__legal-link:hover {

  color: var(--cpf-color-black);

}



/* ==============================================

   RESPONSIVE — Blog / CTA / Footer

   ============================================== */



@media (max-width: 1023.98px) {

  .cpf-blog__grid {

    grid-template-columns: 1fr 1fr;

  }



  .cpf-blog__card--featured {

    grid-row: auto;

  }



  .cpf-blog__grid--4col {

    grid-template-columns: repeat(2, 1fr);

  }



  .cpf-footer__meta {

    grid-template-columns: 1fr 1fr;

  }



  .cpf-footer__contact {

    grid-column: 1 / -1;

  }

}



@media (max-width: 809.98px) {

  .cpf-blog__header {

    grid-template-columns: 1fr;

  }



  .cpf-blog__grid {

    grid-template-columns: 1fr;

  }



  .cpf-blog__grid--4col {

    grid-template-columns: 1fr 1fr;

  }



  .cpf-cta__inner {

    grid-template-columns: 1fr;

    gap: 2.5rem;

  }



  .cpf-footer__meta {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }



  .cpf-footer__legal {

    flex-direction: column;

    align-items: flex-start;

  }

}



@media (max-width: 479.98px) {

  .cpf-blog__grid--4col {

    grid-template-columns: 1fr;

  }



  .cpf-footer__legal-links {

    flex-direction: column;

    gap: 0.5rem;

  }

}



/* ==============================================

   FIX: Project card logo — size + cutoff

   The logo was stretching to 60% of card width.

   Now constrained to a sensible pixel maximum,

   centered, no overflow.

   ============================================== */



.cpf-projects__card-overlay {

  overflow: hidden;

  padding: 1.5rem;

}



.cpf-projects__card-logo {

  max-inline-size: 140px;

  max-block-size: 60px;

  inline-size: auto;

  block-size: auto;

  object-fit: contain;

  filter: invert(1) brightness(10);

  display: block;

  margin-inline: auto;

}



/* ==============================================

   SIDE MENU DRAWER — Light Theme (EXACT MATCH PIXEL PERFECT)

   ============================================== */



.cpf-drawer {

  position: fixed;

  inset-block: 0;

  inset-inline-end: 0;

  inset-inline-start: auto;

  width: 100%;

  max-width: 460px;

  z-index: var(--cpf-z-drawer, 1000);

  background-color: var(--cpf-color-white);

  border-inline-start: 1px solid var(--cpf-color-border);

  display: flex;

  flex-direction: column;

  overflow-y: auto;

  overflow-x: hidden;



  /* Hidden state */

  visibility: hidden;

  pointer-events: none;

  transform: translateX(100%);

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),

    visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-drawer.is-open {

  visibility: visible;

  pointer-events: auto;

  transform: translateX(0);

}



/* Base padding variable for drawer inset */

:root {

  --drawer-px: clamp(2rem, 4vw, 3rem);

  --cpf-color-black: #000000;

  --cpf-color-muted: #6e6e73;

  --cpf-color-border: #b0b0b0;

  /* Clearer, visible border matching reference */

}



/* Close exactly at top right */

.cpf-drawer__close {

  position: absolute;

  top: 1.8rem;

  right: var(--drawer-px);

  background: transparent;

  border: none;

  color: var(--cpf-color-black);

  cursor: pointer;

  padding: 0;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;

  z-index: 10;

}



.cpf-drawer__close:hover {

  opacity: 0.6;

  transform: scale(0.9) rotate(90deg);

}



/* ---- TOP NAV ---- */

.cpf-drawer__top {

  padding-block-start: 4rem;

  padding-block-end: 2rem;

  border-block-end: 1px solid var(--cpf-color-border);

  /* Full width border! */

}



.cpf-drawer__label {

  display: block;

  font-family: var(--cpf-font-body);

  font-size: 0.75rem;

  font-weight: 500;

  color: var(--cpf-color-muted);

  margin-block-end: 1rem;

  padding-inline: var(--drawer-px);

}



.cpf-drawer__list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0;

}



.cpf-drawer__item {

  border: none;

}



.cpf-drawer__link {

  display: flex;

  align-items: baseline;

  justify-content: flex-start;

  font-family: var(--cpf-font-display);

  font-size: clamp(2.4rem, 6vw, 3.2rem);

  font-weight: 700;

  /* exact mugen weight */

  letter-spacing: -0.05em;

  line-height: 1.15;

  color: var(--cpf-color-black);

  text-decoration: none;

  padding-block: 0.15rem;

  padding-inline: var(--drawer-px);

  position: relative;

  overflow: hidden;

}



/* Hover reveal effect */

.cpf-drawer__link-text {

  display: inline-flex;

  align-items: baseline;

  position: relative;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;

}



.cpf-drawer__link:hover .cpf-drawer__link-text {

  transform: translateX(1rem);

  opacity: 0.6;

}



.cpf-drawer__count {

  font-family: var(--cpf-font-body);

  font-size: clamp(1rem, 2.5vw, 1.4rem);

  font-weight: 400;

  color: var(--cpf-color-muted);

  letter-spacing: -0.01em;

  margin-inline-start: 0.5rem;

  opacity: 0.8;

}



/* ---- MIDDLE PANEL (Contact + Social) ---- */

.cpf-drawer__mid {

  flex: 1;

  padding-block-start: 2rem;

  display: flex;

  flex-direction: column;

  padding-inline: var(--drawer-px);

}



.cpf-drawer__tiny-label {

  font-family: var(--cpf-font-body);

  font-size: 0.72rem;

  font-weight: 500;

  color: var(--cpf-color-muted);

  margin-block-end: 0.65rem;

}



.cpf-drawer__email-wrapper {

  display: inline-flex;

  align-self: flex-start;

  text-decoration: none;

  margin-block-end: 1.5rem;

}



/* Border exactly under the text, matching Mugen */

.cpf-drawer__email {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.2rem, 3.5vw, 1.6rem);

  font-weight: 600;

  letter-spacing: -0.04em;

  color: var(--cpf-color-black);

  padding-block-end: 0.5rem;

  border-block-end: 1px solid var(--cpf-color-black);

  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-drawer__email-wrapper:hover .cpf-drawer__email {

  opacity: 0.6;

  border-color: transparent;

  transform: translateX(0.5rem);

}



.cpf-drawer__location {

  display: flex;

  gap: 0.4rem;

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  color: var(--cpf-color-black);

}



.cpf-drawer__city {

  font-weight: 700;

  letter-spacing: -0.02em;

}



.cpf-drawer__time {

  color: var(--cpf-color-muted);

  font-weight: 400;

}



.cpf-drawer__socials {

  margin-block-start: auto;

  padding-block: 3.5rem 1.5rem;

}



.cpf-drawer__socials-list {

  display: flex;

  gap: 1.25rem;

  list-style: none;

}



.cpf-drawer__social-link {

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  text-transform: uppercase;

  color: var(--cpf-color-black);

  text-decoration: none;

  position: relative;

  padding-block-end: 0.2rem;

  transition: color 0.3s;

}



/* Hover underline for socials */

.cpf-drawer__social-link::after {

  content: '';

  position: absolute;

  inset-block-end: 0;

  inset-inline-start: 0;

  inline-size: 100%;

  block-size: 1px;

  background-color: var(--cpf-color-black);

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-drawer__social-link:hover::after {

  transform: scaleX(1);

  transform-origin: left;

}



/* ---- BOTTOM LEGAL ---- */

.cpf-drawer__legal {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-block: 1.5rem;

  padding-inline: var(--drawer-px);

  border-block-start: 1px solid var(--cpf-color-border);

  /* Full width border! */

}



.cpf-drawer__legal-links {

  display: flex;

  gap: 1.25rem;

}



.cpf-drawer__legal-link {

  font-family: var(--cpf-font-body);

  font-size: 0.8rem;

  font-weight: 600;

  letter-spacing: -0.02em;

  color: var(--cpf-color-black);

  text-decoration: none;

  position: relative;

  padding-block-end: 0.15rem;

}



/* Underline for legal links matching Mugen */

.cpf-drawer__legal-link::after {

  content: '';

  position: absolute;

  inset-block-end: 0;

  inset-inline-start: 0;

  inline-size: 100%;

  block-size: 1.5px;

  background-color: var(--cpf-color-black);

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-drawer__legal-link:hover::after {

  transform: scaleX(0);

  transform-origin: right;

}



.cpf-drawer__legal-copy {

  font-family: var(--cpf-font-body);

  font-size: 0.75rem;

  font-weight: 500;

  color: var(--cpf-color-muted);

}



/* ==============================================

   FIX: FORCING STUDIO TEXT VISIBILITY & TRACKING

   ============================================== */

.cpf-hero__title-sub {

  color: var(--cpf-color-white) !important;

  -webkit-text-stroke: 0 transparent !important;

  opacity: 1 !important;

  visibility: visible !important;

  display: block !important;

  align-self: flex-start !important;

  /* precise horizontal offset to match the reference */

  margin-inline-start: clamp(12rem, 30vw, 24rem) !important;

  margin-block-start: -0.1em !important;

  font-weight: 500 !important;

}



/* ---- REDESIGNED TEAM LEAD CARD ---- */

.cpf-hero__card {

  position: absolute;

  inset-block-end: clamp(1.25rem, 2.5vw, 2rem);

  inset-inline-end: clamp(1.5rem, 2.5vw, 2.25rem);

  z-index: var(--cpf-z-2);

  display: flex;

  align-items: center;

  gap: 1.25rem;

  background-color: var(--cpf-color-white);

  border-radius: 24px;

  padding: 1.25rem 1.75rem;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

}



.cpf-hero__card-photo {

  flex-shrink: 0;

  inline-size: 84px;

  block-size: 84px;

  border-radius: 16px;

  overflow: hidden;

  margin: 0;

}



.cpf-hero__card-photo img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  object-position: center top;

}



.cpf-hero__card-info {

  display: flex;

  flex-direction: column;

}



.cpf-hero__card-role {

  font-family: var(--cpf-font-body);

  font-size: 1rem;

  font-weight: 400;

  color: var(--cpf-color-dark);

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1.2;

}



.cpf-hero__card-company {

  font-family: var(--cpf-font-body);

  font-size: 1rem;

  font-weight: 400;

  color: #6e6e73;

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1.2;

  margin-block-end: 0.35rem;

}



.cpf-hero__card-name {

  font-family: var(--cpf-font-body);

  font-size: 1.25rem;

  font-weight: 600;

  color: var(--cpf-color-dark);

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1.2;

  margin-block-end: 0.5rem;

  white-space: nowrap;

}



.cpf-hero__card-cta {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  text-decoration: none;

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  font-size: 0.95rem;

  font-weight: 600;

  padding: 0.4rem 1rem;

  border-radius: 50px;

  transition: opacity var(--cpf-transition);

  align-self: flex-start;

}



.cpf-hero__card-cta:hover {

  opacity: 0.75;

}



.cpf-hero__card-cta-arrow {

  font-family: system-ui;

  transition: transform var(--cpf-transition);

}



.cpf-hero__card-cta:hover .cpf-hero__card-cta-arrow {

  transform: translateX(3px);

}





/* ---- EXACT MATCH TEAM LEAD CARD ---- */

.cpf-hero__card {

  position: absolute;

  inset-block-end: clamp(1.25rem, 2.5vw, 2rem);

  inset-inline-end: clamp(1.5rem, 2.5vw, 2.25rem);

  z-index: var(--cpf-z-2);

  display: flex;

  align-items: center;

  gap: 1.25rem;

  background-color: var(--cpf-color-white);

  border-radius: 20px;

  padding: 6px;

  padding-inline-end: 4rem;

  /* Massive right padding to match shot */

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

}



.cpf-hero__card-photo {

  flex-shrink: 0;

  inline-size: 100px;

  block-size: 130px;

  border-radius: 14px;

  overflow: hidden;

  margin: 0;

}



.cpf-hero__card-photo img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  object-position: center top;

}



.cpf-hero__card-info {

  display: flex;

  flex-direction: column;

}



.cpf-hero__card-meta {

  display: flex;

  flex-direction: column;

  margin-block-end: 0.2rem;

}



.cpf-hero__card-role {

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--cpf-color-dark);

  line-height: 1.2;

}



.cpf-hero__card-company {

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  font-weight: 500;

  color: #888888;

  line-height: 1.2;

}



.cpf-hero__card-name {

  font-family: var(--cpf-font-body);

  font-size: 1.3rem;

  font-weight: 600;

  color: var(--cpf-color-dark);

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1.1;

  margin-block-end: 0.8rem;

  white-space: nowrap;

}



.cpf-hero__card-cta {

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  text-decoration: none;

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  font-weight: 600;

  padding: 0.5rem 0.6rem 0.5rem 1rem;

  border-radius: 50px;

  inline-size: 120px;

  transition: opacity var(--cpf-transition);

}



.cpf-hero__card-cta:hover {

  opacity: 0.8;

}



.cpf-hero__card-cta-dot {

  display: inline-block;

  width: 6px;

  height: 6px;

  background-color: var(--cpf-color-white);

  border-radius: 50%;

}



/* ==============================================

   ZYLYF THEME OVERRIDE: GOLD & DARK HYBRID SCHEME

   SHOT REFERENCE: The AWWARDS/Portfolio Shot Combo

   ============================================== */

:root {

  --cpf-color-accent: #EBCB34;

  /* The golden yellow base */

  --cpf-color-surface: #1E1E1E;

  /* Dark grey backdrop for cards/panels */

  --cpf-color-surface-hover: #2A2A2A;

}



body {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

}



/* Nav Base / Header  */

.cpf-header {

  background-color: var(--cpf-color-dark);

  border-block-end: 1px solid rgba(255, 255, 255, 0.05);

  /* very subtle dark line */

}



.cpf-nav__logo,

.cpf-nav__link {

  color: var(--cpf-color-white);

}



.cpf-nav__link::after {

  background-color: var(--cpf-color-accent);

}



.cpf-nav__logo:hover,

.cpf-nav__link:hover {

  color: var(--cpf-color-accent);

}



.cpf-nav__burger-line {

  background-color: var(--cpf-color-white);

}



.cpf-nav__sub-menu {

  background-color: var(--cpf-color-surface);

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.cpf-nav__sub-menu .cpf-nav__link {

  color: var(--cpf-color-white);

}



/* Hero Frame Shift */

.cpf-hero {

  background-color: var(--cpf-color-dark);

}



/* "Zylyf Studio" typography pops in Yellow */

.cpf-hero__title-main,

.cpf-hero__title-sub {

  color: var(--cpf-color-accent) !important;

}



.cpf-hero__tagline strong {

  color: var(--cpf-color-accent);

}



.cpf-hero__services-item {

  color: var(--cpf-color-white);

}



.cpf-hero__services-item:hover {

  color: var(--cpf-color-accent);

}



/* Hero Card (Team Lead) defaults to grey Surface */

.cpf-hero__card {

  background-color: var(--cpf-color-surface);

  border: 1px solid rgba(255, 255, 255, 0.08);

  /* slight glossy edge */

}



.cpf-hero__card-role,

.cpf-hero__card-name {

  color: var(--cpf-color-white);

}



.cpf-hero__card-company {

  color: rgba(255, 255, 255, 0.5);

}



.cpf-hero__card-cta {

  background-color: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

}



.cpf-hero__card-cta:focus-visible {

  outline-color: var(--cpf-color-accent);

}



.cpf-hero__card-cta-dot {

  background-color: var(--cpf-color-dark);

}



/* Clients block stays white to create that high-contrast layout switch */

.cpf-clients {

  background-color: var(--cpf-color-white);

  border-block-start: none;

}



.cpf-clients__header {

  color: var(--cpf-color-dark);

  /* Ensure text stays dark on white background */

}



.cpf-clients__years {

  color: rgba(0, 0, 0, 0.5);

  /* subtle on white */

}



/* Projects section drops back to dark */

.cpf-projects {

  background-color: var(--cpf-color-dark);

}



.cpf-projects__header p,

.cpf-projects__info p {

  color: rgba(255, 255, 255, 0.6);

}



.cpf-projects__title,

.cpf-projects__count,

.cpf-projects__year {

  color: var(--cpf-color-white);

}



.cpf-projects__search input {

  background-color: var(--cpf-color-surface);

  color: var(--cpf-color-white);

  border-color: rgba(255, 255, 255, 0.1);

}



.cpf-projects__filter-trigger {

  color: var(--cpf-color-white);

}



/* Project Cards */

.cpf-projects__card {

  background-color: var(--cpf-color-surface);

  border-color: transparent;

}



.cpf-projects__card:hover {

  background-color: var(--cpf-color-surface-hover);

}



.cpf-projects__card-title,

.cpf-projects__card-date,

.cpf-projects__card-dots {

  color: var(--cpf-color-white);

}



.cpf-projects__card:hover .cpf-projects__card-title {

  color: var(--cpf-color-accent);

}



/* Side Drawer Mobile Menu overriding to dark mode */

.cpf-drawer {

  background-color: var(--cpf-color-surface);

  border-inline-start-color: rgba(255, 255, 255, 0.1);

}



.cpf-drawer__close {

  color: var(--cpf-color-white);

}



.cpf-drawer__label,

.cpf-drawer__count,

.cpf-drawer__tiny-label,

.cpf-drawer__time,

.cpf-drawer__legal-copy {

  color: rgba(255, 255, 255, 0.5);

}



.cpf-drawer__link,

.cpf-drawer__email,

.cpf-drawer__location,

.cpf-drawer__social-link,

.cpf-drawer__legal-link {

  color: var(--cpf-color-white);

}



.cpf-drawer__link:hover .cpf-drawer__link-text {

  color: var(--cpf-color-accent);

}



.cpf-drawer__email {

  border-block-end-color: rgba(255, 255, 255, 0.2);

}



.cpf-drawer__top,

.cpf-drawer__mid,

.cpf-drawer__legal {

  border-color: rgba(255, 255, 255, 0.1);

}



.cpf-drawer__social-link::after,

.cpf-drawer__legal-link::after {

  background-color: var(--cpf-color-accent);

}



/* ==============================================

   ZYLYF THEME HOTFIX: CLIENTS STRIP IMMERSION

   ============================================== */

.cpf-clients {

  background-color: var(--cpf-color-dark) !important;

  border-block-start: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.cpf-clients__header {

  color: var(--cpf-color-white) !important;

}



.cpf-clients__label {

  color: var(--cpf-color-accent);

}



.cpf-clients__years {

  color: rgba(255, 255, 255, 0.5) !important;

}



.cpf-clients__item img {

  filter: invert(1) brightness(100) opacity(0.45) !important;

}



.cpf-clients__item:hover img {

  filter: invert(1) brightness(100) opacity(1) !important;

}



/* ==============================================

   HOTFIX: PORTFOLIO PADDING & CLIENTS CUTOFF

   ============================================== */

.cpf-projects__card {

  padding-block-end: 0.5rem !important;

  /* same padding top left right */

}



.cpf-projects__card-media {

  border-radius: calc(var(--cpf-radius-md) - 2px) !important;

}



.cpf-clients__grid {

  justify-content: center !important;

  gap: clamp(2.5rem, 5vw, 4rem) !important;

}



.cpf-clients__item img {

  max-inline-size: 100% !important;

}



/* ==============================================

   SECTION: Why Choose Us

   ============================================== */

.cpf-choose {

  padding-block: clamp(5rem, 10vw, 8rem);

  padding-inline: var(--cpf-nav-px);

  background-color: var(--cpf-color-light);

}



.cpf-choose__container {

  max-inline-size: 1440px;

  margin-inline: auto;

}



.cpf-choose__top {

  display: flex;

  align-items: flex-start;

  gap: clamp(2rem, 5vw, 4rem);

  margin-block-end: clamp(3rem, 6vw, 5rem);

}



.cpf-choose__badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-xs);

  font-weight: 600;

  color: var(--cpf-color-dark);

  white-space: nowrap;

}



.cpf-choose__badge-icon {

  display: flex;

  align-items: center;

}



.cpf-choose__title {

  font-family: var(--cpf-font-body);

  font-size: clamp(2rem, 5vw, 4.5rem);

  font-weight: 600;

  line-height: 1.1;

  letter-spacing: var(--cpf-ls-tight);

  color: var(--cpf-color-dark);

}



.cpf-choose__title-sub {

  color: rgba(10, 10, 10, 0.45);

}



.cpf-choose__grid {

  display: flex;

  gap: clamp(2rem, 5vw, 4rem);

}



.cpf-choose__media {

  flex: 0 0 auto;

  inline-size: clamp(300px, 35vw, 450px);

}



.cpf-choose__figure {

  position: relative;

  margin: 0;

  border-radius: var(--cpf-radius-lg);

  overflow: hidden;

  aspect-ratio: 3 / 4;

}



.cpf-choose__img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  display: block;

}



.cpf-choose__media-plus {

  position: absolute;

  inset-block-start: 1rem;

  inset-inline-end: 1rem;

}



.cpf-choose__content {

  flex: 1;

  display: flex;

  flex-direction: column;

}



.cpf-choose__desc-wrap {

  display: flex;

  justify-content: flex-end;

  margin-block-end: clamp(2rem, 5vw, 4rem);

}



.cpf-choose__desc {

  max-inline-size: 440px;

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  line-height: 1.6;

  color: rgba(10, 10, 10, 0.65);

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-choose__desc strong {

  color: var(--cpf-color-dark);

  font-weight: 600;

}



.cpf-choose__stats {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: clamp(0.5rem, 1vw, 1rem);

  /* Tight gap for cards */

  margin-block-start: auto;

}



.cpf-choose__stat {

  background-color: var(--cpf-color-white);

  border-radius: var(--cpf-radius-md);

  padding: clamp(1.25rem, 2.5vw, 2rem);

  display: flex;

  flex-direction: column;

}



.cpf-choose__stat-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

}



.cpf-choose__stat-value {

  font-family: var(--cpf-font-display);

  font-size: clamp(2.5rem, 5vw, 4rem);

  font-weight: 600;

  color: var(--cpf-color-dark);

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1;

}



.cpf-choose__stat-num {

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  color: rgba(10, 10, 10, 0.4);

}



.cpf-choose__stat--tall {

  min-block-size: 220px;

  justify-content: space-between;

}



.cpf-choose__stat-label {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.9rem, 1.2vw, 1.1rem);

  font-weight: 600;

  color: var(--cpf-color-dark);

  letter-spacing: var(--cpf-ls-tight);

  text-align: right;

  align-self: flex-end;

  line-height: 1.3;

}



.cpf-choose__stat-detail {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-xs);

  color: rgba(10, 10, 10, 0.5);

  line-height: 1.5;

  margin-block-start: auto;

}



.cpf-choose__logos {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-block-start: auto;

  align-self: flex-end;

}



.cpf-choose__logo {

  max-block-size: 16px;

  max-inline-size: 100%;

  object-fit: contain;

  opacity: 0.3;

  filter: grayscale(1);

}



/* Responsive adjustments */

@media (max-width: 991.98px) {

  .cpf-choose__top {

    flex-direction: column;

    gap: 1.5rem;

  }



  .cpf-choose__grid {

    flex-direction: column;

  }



  .cpf-choose__media {

    inline-size: 100%;

    aspect-ratio: 16/9;

  }



  .cpf-choose__desc-wrap {

    justify-content: flex-start;

  }

}



@media (max-width: 575.98px) {

  .cpf-choose__stats {

    grid-template-columns: 1fr;

  }



  .cpf-choose__stat--tall {

    min-block-size: auto;

    gap: 1.5rem;

  }

}



/* ==============================================

   HOVER OVERLAY UPGRADE FOR WHY CHOOSE US

   ============================================== */

.cpf-choose__figure {

  cursor: pointer;

}



.cpf-choose__hover-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: clamp(1.5rem, 3vw, 2.5rem);

  background-color: rgba(10, 10, 10, 0.55);

  backdrop-filter: blur(8px);

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

  opacity: 0;

  transition: opacity 0.4s var(--cpf-ease);

  z-index: 2;

}



.cpf-choose__figure:hover .cpf-choose__hover-overlay {

  opacity: 1;

}



.cpf-choose__media-plus {

  transition: opacity 0.3s var(--cpf-ease), transform 0.3s var(--cpf-ease);

  z-index: 3;

}



.cpf-choose__figure:hover .cpf-choose__media-plus {

  opacity: 0;

  transform: scale(0.8);

}



.cpf-choose__hover-text {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.125rem, 2vw, 1.4rem);

  font-weight: 500;

  color: var(--cpf-color-white);

  line-height: 1.35;

  margin-block-end: 1.5rem;

  max-inline-size: 85%;

  transform: translateY(20px);

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  transition-delay: 0.1s;

}



.cpf-choose__figure:hover .cpf-choose__hover-text {

  transform: translateY(0);

}



.cpf-choose__hover-btn {

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  text-decoration: none;

  padding: 0.65rem 1.1rem 0.65rem 1.4rem;

  border-radius: 50px;

  align-self: flex-start;

  transform: translateY(20px);

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, color 0.3s ease;

  transition-delay: 0.15s;

}



.cpf-choose__figure:hover .cpf-choose__hover-btn {

  transform: translateY(0);

}



/* User specifically requested orange/yellow hover integration */

.cpf-choose__hover-btn:hover {

  background-color: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

}



.cpf-choose__hover-dot {

  display: inline-block;

  inline-size: 8px;

  block-size: 8px;

  background-color: var(--cpf-color-white);

  border-radius: 50%;

  transition: background-color 0.3s ease;

}



.cpf-choose__hover-btn:hover .cpf-choose__hover-dot {

  background-color: var(--cpf-color-dark);

}



/* ==============================================

   DARK / YELLOW THEME OVERRIDE FOR WHY CHOOSE US

   ============================================== */

.cpf-choose {

  background-color: var(--cpf-color-dark) !important;

}



.cpf-choose__title {

  color: var(--cpf-color-white) !important;

}



.cpf-choose__title-sub {

  color: rgba(255, 255, 255, 0.45) !important;

}



.cpf-choose__desc {

  color: rgba(255, 255, 255, 0.65) !important;

}



.cpf-choose__desc strong {

  color: var(--cpf-color-white) !important;

}



.cpf-choose__stat {

  background-color: rgba(255, 255, 255, 0.04) !important;

  border: 1px solid rgba(255, 255, 255, 0.05);

  /* subtle glass effect */

}



.cpf-choose__stat-value {

  color: var(--cpf-color-accent) !important;

  /* injecting the requested orange/yellow */

}



.cpf-choose__stat-label {

  color: var(--cpf-color-white) !important;

}



.cpf-choose__stat-num,

.cpf-choose__stat-detail {

  color: rgba(255, 255, 255, 0.5) !important;

}



.cpf-choose__badge {

  color: var(--cpf-color-white) !important;

}



.cpf-choose__badge-icon svg circle {

  fill: var(--cpf-color-accent) !important;

}



.cpf-choose__badge-icon svg path {

  stroke: var(--cpf-color-dark) !important;

}



.cpf-choose__logos img {

  filter: invert(1) brightness(10) opacity(0.5) !important;

}



.cpf-choose__media-plus svg circle {

  fill: var(--cpf-color-accent) !important;

}



.cpf-choose__media-plus svg path {

  stroke: var(--cpf-color-dark) !important;

}



/* ==============================================

   SECTION: Services

   ============================================== */

.cpf-services {

  padding-block: clamp(6rem, 12vw, 10rem);

  padding-inline: var(--cpf-nav-px);

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  /* Separator */

}



.cpf-services__container {

  max-inline-size: 1440px;

  margin-inline: auto;

}



.cpf-services__header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-block-end: clamp(3rem, 6vw, 6rem);

}



.cpf-services__badge {

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  color: var(--cpf-color-white);

}



.cpf-services__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3.5rem, 10vw, 8rem);

  font-weight: 600;

  line-height: 0.9;

  letter-spacing: var(--cpf-ls-hero);

  color: var(--cpf-color-white);

  max-inline-size: 70%;

  text-align: right;

  display: flex;

  align-items: flex-start;

  justify-content: flex-end;

  gap: 0.5rem;

}



.cpf-services__count {

  font-family: var(--cpf-font-body);

  font-size: clamp(1rem, 2vw, 1.8rem);

  color: rgba(255, 255, 255, 0.4);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-services__accordion {

  display: flex;

  flex-direction: column;

}



.cpf-services__item {

  display: flex;

  align-items: flex-start;

  padding-block: clamp(2rem, 4vw, 3.5rem);

  border-block-start: 1px solid rgba(255, 255, 255, 0.1);

  transition: background-color 0.3s ease;

}



.cpf-services__item-num {

  font-family: var(--cpf-font-mono);

  font-size: clamp(0.75rem, 1vw, 0.875rem);

  color: rgba(255, 255, 255, 0.6);

  flex: 0 0 15%;

  padding-block-start: 0.5rem;

}



.cpf-services__item-main {

  flex: 1;

}



.cpf-services__item-title-closed {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.2rem, 3vw, 1.5rem);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  color: var(--cpf-color-white);

  padding-block-start: 0.2rem;

  transition: opacity 0.3s ease;

}



.cpf-services__item-panel {

  display: none;

  /* hidden when not .is-active */

}



/* Base open state logic */

.cpf-services__item.is-active .cpf-services__item-title-closed {

  display: none;

}



.cpf-services__item.is-active .cpf-services__item-panel {

  display: grid;

  grid-template-columns: minmax(180px, 240px) 1.5fr 1.2fr;

  gap: clamp(1.5rem, 4vw, 4rem);

  align-items: flex-start;

  animation: fadePanel 0.4s ease forwards;

}



@keyframes fadePanel {

  from {

    opacity: 0;

    transform: translateY(10px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.cpf-services__item-media {

  border-radius: var(--cpf-radius-md);

  overflow: hidden;

  margin: 0;

  aspect-ratio: 16/9;

}



.cpf-services__img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  display: block;

}



.cpf-services__item-title-open {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.5rem, 4vw, 2.25rem);

  font-weight: 500;

  line-height: 1.1;

  letter-spacing: var(--cpf-ls-tight);

  margin-block-end: clamp(1rem, 2vw, 1.5rem);

}



.cpf-services__item-desc {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.65);

  line-height: 1.5;

  max-inline-size: 380px;

}



.cpf-services__cat-label {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.5);

  margin-block-end: 1rem;

}



.cpf-services__cat-list {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}



.cpf-services__cat-pill {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.7rem, 1vw, 0.8rem);

  font-weight: 500;

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  padding: 0.35rem 0.85rem;

  border-radius: 50px;

}



.cpf-services__cat-pill--dark {

  background-color: rgba(255, 255, 255, 0.1);

  color: var(--cpf-color-white);

}



.cpf-services__action {

  flex: 0 0 10%;

  display: flex;

  justify-content: flex-end;

  padding-block-start: 0.2rem;

}



.cpf-services__toggle {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.2);

  inline-size: 44px;

  block-size: 44px;

  border-radius: 50%;

  color: var(--cpf-color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: border-color var(--cpf-transition), color var(--cpf-transition);

}



.cpf-services__icon-plus,

.cpf-services__icon-minus {

  display: block;

  position: relative;

  inline-size: 14px;

  block-size: 14px;

}



.cpf-services__icon-plus::before,

.cpf-services__icon-plus::after,

.cpf-services__icon-minus::before {

  content: '';

  position: absolute;

  background-color: currentColor;

  inset-block-start: 50%;

  inset-inline-start: 50%;

  transform: translate(-50%, -50%);

}



.cpf-services__icon-plus::before {

  inline-size: 14px;

  block-size: 1.5px;

}



.cpf-services__icon-plus::after {

  inline-size: 1.5px;

  block-size: 14px;

}



.cpf-services__icon-minus::before {

  inline-size: 14px;

  block-size: 1.5px;

}



.cpf-services__toggle:hover {

  border-color: var(--cpf-color-accent);

  color: var(--cpf-color-accent);

  /* Inject Theme Colored Hover */

}



/* Logic for plus/minus icons */

.cpf-services__item.is-active .cpf-services__toggle {

  border-color: rgba(255, 255, 255, 0.4);

}



.cpf-services__item.is-active .cpf-services__icon-plus {

  display: none;

}



.cpf-services__item.is-active .cpf-services__icon-minus {

  display: block;

}



.cpf-services__footer {

  display: flex;

  justify-content: center;

  margin-block-start: clamp(3rem, 6vw, 5rem);

}



.cpf-services__btn {

  display: inline-flex;

  align-items: center;

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  text-decoration: none;

  padding: 0.8rem 1.75rem;

  border-radius: 50px;

  transition: background-color var(--cpf-transition), transform var(--cpf-transition);

}



.cpf-services__btn:hover {

  background-color: var(--cpf-color-accent);

  /* Orange/Yellow integration */

  transform: translateY(-3px);

}



@media (max-width: 991.98px) {

  .cpf-services__header {

    flex-direction: column;

    gap: 1rem;

    align-items: flex-start;

  }



  .cpf-services__title {

    max-inline-size: 100%;

    text-align: left;

    justify-content: flex-start;

  }



  .cpf-services__item.is-active .cpf-services__item-panel {

    grid-template-columns: 1fr;

    gap: 2rem;

  }



  .cpf-services__item-media {

    max-inline-size: 100%;

    aspect-ratio: auto;

  }

}



/* ==============================================

   SERVICES SECTION REFINEMENTS & SCHEME INJECTION

   ============================================== */



/* OVERRIDE: Prevent inline display:none from blocking the icon */

.cpf-services__item.is-active .cpf-services__icon-minus {

  display: block !important;

}



.cpf-services__item.is-active .cpf-services__icon-plus {

  display: none !important;

}



/* HIGHLIGHT: Scheme coloring for the active row indicator */

.cpf-services__item.is-active .cpf-services__item-num {

  color: var(--cpf-color-accent) !important;

  font-weight: 600;

}



/* HIGHLIGHT: Solid, luminous toggle button on active state */

.cpf-services__item.is-active .cpf-services__toggle {

  border-color: var(--cpf-color-accent) !important;

  background-color: var(--cpf-color-accent) !important;

  color: var(--cpf-color-dark) !important;

  box-shadow: 0 0 20px rgba(235, 203, 52, 0.15) !important;

}



/* POLISH: Row Interaction Logic for closed rows */

.cpf-services__item {

  transition: background-color 0.4s ease, border-color 0.4s ease;

}



.cpf-services__item:not(.is-active):hover {

  background-color: rgba(255, 255, 255, 0.015);

  border-block-start-color: rgba(255, 255, 255, 0.25);

}



.cpf-services__item:not(.is-active):hover .cpf-services__item-title-closed {

  color: var(--cpf-color-accent);

  transform: translateX(10px);

}



.cpf-services__item:not(.is-active):hover .cpf-services__toggle {

  border-color: var(--cpf-color-accent);

  color: var(--cpf-color-accent);

}



/* POLISH: Active media image frame gloss */

.cpf-services__item.is-active .cpf-services__item-media {

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

  position: relative;

}



/* Subtle cinematic light leak over the thumbnail */

.cpf-services__item.is-active .cpf-services__item-media::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(235, 203, 52, 0.15) 0%, transparent 40%);

  pointer-events: none;

}



/* POLISH: Categories Pill Interaction */

.cpf-services__cat-pill {

  transition: all 0.3s ease;

  cursor: default;

}



.cpf-services__cat-pill:hover {

  background-color: var(--cpf-color-accent) !important;

  color: var(--cpf-color-dark) !important;

  transform: translateY(-2px);

}



/* ==============================================

   SERVICES 2.0: ADVANCED KINETIC INTERACTIONS

   ============================================== */



/* 1. Staggered Entrance Animations for the Expanding Panel */



/* Override basic display block logic for panel layers to allow animation */

.cpf-services__item.is-active .cpf-services__item-panel {

  animation: none !important;

  /* disable old global fadePanel */

}



/* Initial hidden states */

.cpf-services__item-panel .cpf-services__item-media,

.cpf-services__item-panel .cpf-services__item-info,

.cpf-services__item-panel .cpf-services__item-cats {

  opacity: 0;

  transform: translateY(30px);

}



/* Staggered cascading reveal when node becomes active */

.cpf-services__item.is-active .cpf-services__item-media {

  animation: kineticReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;

}



.cpf-services__item.is-active .cpf-services__item-info {

  animation: kineticReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;

}



.cpf-services__item.is-active .cpf-services__item-cats {

  animation: kineticReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;

}



@keyframes kineticReveal {

  0% {

    opacity: 0;

    transform: translateY(30px) scale(0.97);

    filter: blur(8px);

  }



  100% {

    opacity: 1;

    transform: translateY(0) scale(1);

    filter: blur(0);

  }

}



/* 2. Intense Image Hover Depth Effects */

.cpf-services__item-media {

  overflow: hidden;

  transform: translateZ(0);

  /* Hardware accelerate */

}



.cpf-services__img {

  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform, filter;

}



.cpf-services__item.is-active .cpf-services__item-media:hover .cpf-services__img {

  transform: scale(1.12) rotate(1.5deg);

  filter: saturate(1.3) contrast(1.15) brightness(0.9);

}



/* 3. Sweeping Scheme Text Highlight on Inactive Rows */

.cpf-services__item-title-closed {

  position: relative;

  display: inline-block;

}



.cpf-services__item-title-closed::after {

  content: '';

  position: absolute;

  inset-inline-start: 0;

  inset-block-end: -4px;

  inline-size: 0;

  block-size: 2px;

  background-color: var(--cpf-color-accent);

  transition: inline-size 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-services__item:not(.is-active):hover .cpf-services__item-title-closed::after {

  inline-size: 100%;

}



/* 4. Tracking Lines: Dynamic border interactions */

.cpf-services__item {

  position: relative;

  border-block-start: none !important;

  /* Strip static border */

}



.cpf-services__item::before {

  content: '';

  position: absolute;

  inset-block-start: 0;

  inset-inline-start: 0;

  inline-size: 100%;

  block-size: 1px;

  background-color: rgba(255, 255, 255, 0.08);

  /* Fainter baseline */

  transition: background-color 0.5s ease;

}



/* Inject sweeping gradient on hover */

.cpf-services__item:not(.is-active):hover::before {

  background-color: transparent;

  background-image: linear-gradient(90deg, var(--cpf-color-accent) 0%, rgba(255, 255, 255, 0.08) 60%);

  block-size: 1.5px;

}



/* Solid laser-line for active items */

.cpf-services__item.is-active::before {

  background-color: transparent;

  background-image: linear-gradient(90deg, var(--cpf-color-accent) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.05) 100%);

  block-size: 2px;

}



/* 5. Liquid Fill Expansion CTA Button */

.cpf-services__btn {

  position: relative;

  overflow: hidden;

  z-index: 1;

  background-color: transparent !important;

  color: var(--cpf-color-white) !important;

  border: 1px solid rgba(255, 255, 255, 0.3) !important;

  transition: color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.cpf-services__btn::after {

  content: '';

  position: absolute;

  inset-block-start: 120%;

  inset-inline-start: 0;

  inline-size: 100%;

  block-size: 100%;

  background-color: var(--cpf-color-accent);

  z-index: -1;

  border-radius: 50% 50% 0 0;

  transition: inset-block-start 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-services__btn:hover {

  color: var(--cpf-color-dark) !important;

  border-color: var(--cpf-color-accent) !important;

  transform: translateY(-5px) !important;

  box-shadow: 0 15px 30px rgba(235, 203, 52, 0.25) !important;

}



.cpf-services__btn:hover::after {

  inset-block-start: 0;

  border-radius: 0;

}



/* 6. Advanced Category Pill Easing */

/* Pills pop in rapidly right after the parent grid lands */

.cpf-services__item.is-active .cpf-services__cat-list li {

  opacity: 0;

  animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}



.cpf-services__cat-list li:nth-child(1) {

  animation-delay: 0.30s !important;

}



.cpf-services__cat-list li:nth-child(2) {

  animation-delay: 0.35s !important;

}



.cpf-services__cat-list li:nth-child(3) {

  animation-delay: 0.40s !important;

}



.cpf-services__cat-list li:nth-child(4) {

  animation-delay: 0.45s !important;

}



.cpf-services__cat-list li:nth-child(5) {

  animation-delay: 0.50s !important;

}



.cpf-services__cat-list li:nth-child(6) {

  animation-delay: 0.55s !important;

}



.cpf-services__cat-list li:nth-child(7) {

  animation-delay: 0.60s !important;

}



.cpf-services__cat-list li:nth-child(8) {

  animation-delay: 0.65s !important;

}



@keyframes popInPill {

  from {

    opacity: 0;

    transform: scale(0.6) translateY(15px);

  }



  to {

    opacity: 1;

    transform: scale(1) translateY(0);

  }

}





/* ==============================================

   GLOBAL SMOOTH SCROLL

   ============================================== */

html {}



/* ==============================================

   SECTION: How We Launch

   ============================================== */

.cpf-launch {

  background-color: #f4f4f5;

  /* Light theme background matching portfolio baseline */

  padding-block: clamp(6rem, 12vw, 10rem);

  padding-inline: var(--cpf-nav-px);

  color: var(--cpf-color-dark);

}



.cpf-launch__container {

  max-inline-size: 1440px;

  margin-inline: auto;

}



.cpf-launch__top {

  display: grid;

  grid-template-columns: minmax(180px, 240px) 1fr;

  gap: clamp(2rem, 5vw, 4rem);

  align-items: start;

}



.cpf-launch__badge {

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 600;

  color: var(--cpf-color-dark);

}



.cpf-launch__title-wrapper {

  max-inline-size: 850px;

}



.cpf-launch__brand {

  display: block;

  font-family: var(--cpf-font-body);

  font-weight: 700;

  font-size: 1.1rem;

  margin-block-end: 1rem;

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-launch__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(2.8rem, 6vw, 4.5rem);

  font-weight: 500;

  line-height: 1.05;

  letter-spacing: var(--cpf-ls-hero);

  margin-block-end: 1.5rem;

}



.cpf-launch__title-gray {

  color: rgba(10, 10, 10, 0.45);

}



.cpf-launch__subtitle {

  font-family: var(--cpf-font-body);

  font-size: clamp(1rem, 2vw, 1.15rem);

  color: rgba(10, 10, 10, 0.65);

  line-height: 1.6;

  max-inline-size: 420px;

}



.cpf-launch__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem;

  margin-block-start: clamp(4rem, 8vw, 6rem);

}



.cpf-launch__card {

  background-color: var(--cpf-color-white);

  border-radius: var(--cpf-radius-lg);

  padding: 2.5rem 1.75rem;

  display: flex;

  flex-direction: column;

  gap: 3.5rem;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform;

}



.cpf-launch__card:hover {

  transform: translateY(-8px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);

}



.cpf-launch__card-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.cpf-launch__dots {

  display: flex;

  gap: 5px;

}



.cpf-launch__dot {

  inline-size: 6px;

  block-size: 6px;

  border-radius: 50%;

  background-color: rgba(10, 10, 10, 0.1);

  transition: background-color 0.3s ease;

}



.cpf-launch__dot.is-active {

  background-color: var(--cpf-color-dark);

}



.cpf-launch__card-num {

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  color: rgba(10, 10, 10, 0.4);

}



.cpf-launch__card-content {

  display: flex;

  align-items: center;

  gap: 1.25rem;

  margin-block-start: auto;

  /* Push to bottom */

}



.cpf-launch__card-img {

  border-radius: 8px;

  object-fit: cover;

  flex: 0 0 48px;

}



.cpf-launch__card-title {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.95rem, 1.2vw, 1.1rem);

  font-weight: 500;

  line-height: 1.35;

  color: var(--cpf-color-dark);

}



.cpf-launch__media {

  margin-block-start: clamp(3rem, 6vw, 5rem);

}



.cpf-launch__figure {

  position: relative;

  border-radius: var(--cpf-radius-lg);

  overflow: hidden;

  margin: 0;

  aspect-ratio: 16/7;

  /* Super wide cinematic */

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);

  background-color: #0A0A0A;

}



.cpf-launch__video-cover {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  display: block;

  filter: grayscale(1) contrast(1.1) brightness(0.85);

  /* Force cinematic B&W */

  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s ease;

}



.cpf-launch__figure:hover .cpf-launch__video-cover {

  transform: scale(1.05);

  /* Slow profound zoom */

  filter: grayscale(1) contrast(1.2) brightness(0.75);

}



.cpf-launch__play-btn {

  position: absolute;

  inset-block-start: 50%;

  inset-inline-start: 50%;

  transform: translate(-50%, -50%);

  display: inline-flex;

  align-items: center;

  gap: 1.5rem;

  background: transparent;

  border: none;

  color: var(--cpf-color-white);

  cursor: pointer;

  z-index: 2;

  text-align: left;

}



.cpf-launch__play-circle {

  inline-size: 80px;

  block-size: 80px;

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, box-shadow 0.4s ease;

}



.cpf-launch__play-btn:hover .cpf-launch__play-circle {

  background-color: var(--cpf-color-accent);

  transform: scale(1.1);

  box-shadow: 0 0 40px rgba(235, 203, 52, 0.4);

  /* Scheme color glow */

}



.cpf-launch__play-text {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.25rem, 3vw, 1.6rem);

  font-weight: 500;

  line-height: 1.25;

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-launch__play-text small {

  display: block;

  font-size: 0.8rem;

  font-weight: 400;

  opacity: 0.7;

  font-family: var(--cpf-font-mono);

  margin-block-start: 0.2rem;

}



@media (max-width: 1024px) {

  .cpf-launch__top {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }



  .cpf-launch__grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .cpf-launch__figure {

    aspect-ratio: 16/9;

  }

}



@media (max-width: 575.98px) {

  .cpf-launch__grid {

    grid-template-columns: 1fr;

  }



  .cpf-launch__play-btn {

    flex-direction: column;

    text-align: center;

    gap: 1rem;

  }

}



/* ==============================================

   SERVICES: FLUID COLLAPSE & MINUS EXPERIENCES

   ============================================== */

/* Add fluid fading out to panel elements when the "is-active" class is stripped */

.cpf-services__item-panel .cpf-services__item-media,

.cpf-services__item-panel .cpf-services__item-info,

.cpf-services__item-panel .cpf-services__item-cats {

  transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;

}



/* Hyper-kinetic rotation on the active close button to simulate mechanism */

.cpf-services__item.is-active .cpf-services__toggle {

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.cpf-services__item.is-active:hover .cpf-services__toggle {

  transform: scale(1.05);

  /* React when roaming around the row */

}



.cpf-services__item.is-active .cpf-services__toggle:hover {

  transform: rotate(90deg) scale(1.15) !important;

  background-color: var(--cpf-color-white) !important;

  border-color: var(--cpf-color-white) !important;

  box-shadow: 0 0 35px rgba(255, 255, 255, 0.4) !important;

}



/* Fix grid to transition closed even smoother */

.cpf-services__item-main {

  transition: grid-template-rows 0.7s cubic-bezier(0.86, 0, 0.07, 1) !important;

  /* extreme expo curve */

}



.cpf-services__item {

  transition: background-color 0.5s ease, border-color 0.5s ease !important;

}



/* ==============================================

   HOW WE LAUNCH: MASSIVE DARK THEME INJECTION

   ============================================== */

.cpf-launch {

  background-color: var(--cpf-color-dark) !important;

  color: var(--cpf-color-white) !important;

}



.cpf-launch__badge-icon svg circle {

  fill: var(--cpf-color-accent) !important;

}



.cpf-launch__badge-icon svg path {

  stroke: var(--cpf-color-dark) !important;

}



.cpf-launch__badge-text {

  color: var(--cpf-color-accent) !important;

}



.cpf-launch__title-gray {

  color: rgba(255, 255, 255, 0.35) !important;

}



.cpf-launch__subtitle {

  color: rgba(255, 255, 255, 0.65) !important;

}



/* The Matrix Grid Cards */

.cpf-launch__card {

  background-color: rgba(255, 255, 255, 0.02) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  backdrop-filter: blur(10px);

}



.cpf-launch__card-title,

.cpf-launch__card-num {

  color: rgba(255, 255, 255, 0.9) !important;

}



/* Kinetic Grid Cards Hover */

.cpf-launch__card:hover {

  background-color: rgba(255, 255, 255, 0.04) !important;

  border-color: rgba(235, 203, 52, 0.4) !important;

  /* Lock into the EBCB34 brand */

  transform: translateY(-10px) scale(1.02) !important;

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(235, 203, 52, 0.08) !important;

}



/* Dot Tracker Upgrades */

.cpf-launch__dot {

  background-color: rgba(255, 255, 255, 0.15) !important;

}



.cpf-launch__dot.is-active {

  background-color: var(--cpf-color-accent) !important;

  box-shadow: 0 0 10px rgba(235, 203, 52, 0.5) !important;

  /* Glow on active dot */

}



/* Media Block Deep Contrast */

.cpf-launch__figure {

  border: 1px solid rgba(255, 255, 255, 0.05);

}



/* Watch Showreel Interactivity Boost */

.cpf-launch__play-btn:hover .cpf-launch__play-circle {

  background-color: var(--cpf-color-accent) !important;

  transform: scale(1.15) rotate(90deg) !important;

  /* Add slight physics */

}





/* ==============================================

   SECTION: Expert Insights (Dark Gold Overhaul)

   ============================================== */

.cpf-insights {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  padding-block: clamp(6rem, 12vw, 10rem);

  padding-inline: var(--cpf-nav-px);

  position: relative;

  overflow: hidden;

}



.cpf-insights__container {

  max-inline-size: 1440px;

  margin-inline: auto;

}



/* Header Grid */

.cpf-insights__header {

  margin-block-end: clamp(4rem, 8vw, 6rem);

}



.cpf-insights__huge-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(4rem, 10vw, 8rem);

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: var(--cpf-ls-hero);

  margin-block-end: clamp(2.5rem, 5vw, 4rem);

  color: var(--cpf-color-white);

}



.cpf-insights__header-bottom {

  display: grid;

  grid-template-columns: minmax(140px, auto) 1fr minmax(200px, 300px);

  gap: clamp(2rem, 4vw, 5rem);

  align-items: start;

}



.cpf-insights__badge {

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 600;

  color: var(--cpf-color-accent);

}



.cpf-insights__desc-title {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.25rem, 2.5vw, 1.7rem);

  font-weight: 400;

  line-height: 1.35;

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-insights__desc-gray {

  color: rgba(255, 255, 255, 0.45);

}



.cpf-insights__text {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.9rem, 1.2vw, 1rem);

  color: rgba(255, 255, 255, 0.65);

  line-height: 1.6;

}



/* Base Grid Layout */

.cpf-insights__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: clamp(1rem, 2vw, 1.5rem);

}



.cpf-insights__card {

  position: relative;

  background-color: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: var(--cpf-radius-lg);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease;

}



.cpf-insights__card-link {

  position: absolute;

  inset: 0;

  z-index: 10;

}



/* Kinetic Hover Physics */

.cpf-insights__card:hover {

  transform: translateY(-8px);

  border-color: rgba(235, 203, 52, 0.3);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(235, 203, 52, 0.05);

  background-color: rgba(255, 255, 255, 0.03);

}



.cpf-insights__meta {

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.5);

  display: block;

  margin-block-end: 1.25rem;

  transition: color 0.4s ease;

}



.cpf-insights__card:hover .cpf-insights__meta {

  color: var(--cpf-color-accent);

}



/* == HERO CARD OVERRIDES == */

.cpf-insights__card--hero {

  grid-column: span 2;

  grid-row: span 2;

  min-height: 500px;

}



.cpf-insights__hero-media {

  position: absolute;

  inset: 0;

  margin: 0;

}



.cpf-insights__hero-img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  filter: grayscale(1) contrast(1.1) brightness(0.85);

  /* Dark cinematic */

  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s ease;

}



.cpf-insights__hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.2) 60%, transparent 100%);

}



.cpf-insights__card--hero:hover .cpf-insights__hero-img {

  transform: scale(1.05);

  filter: grayscale(0.5) contrast(1.2) brightness(0.75);

  /* Starts injecting color back smoothly */

}



.cpf-insights__hero-content {

  position: relative;

  z-index: 2;

  margin-block-start: auto;

  padding: 3rem;

}



.cpf-insights__hero-title {

  font-family: var(--cpf-font-body);

  font-size: clamp(2rem, 3.5vw, 3rem);

  font-weight: 500;

  line-height: 1.1;

  margin-block-end: 1rem;

  color: var(--cpf-color-white);

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-insights__hero-excerpt {

  font-family: var(--cpf-font-body);

  font-size: 1.05rem;

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.5;

}



/* == STANDARD CARDS == */

.cpf-insights__card--standard {

  grid-column: span 1;

}



.cpf-insights__card-inner {

  padding: 2.5rem 2rem;

  display: flex;

  flex-direction: column;

  block-size: 100%;

}



.cpf-insights__card-media {

  margin: 0;

  margin-block-end: 3rem;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}



.cpf-insights__card-img {

  inline-size: 80px;

  block-size: 80px;

  border-radius: 12px;

  object-fit: cover;

  filter: grayscale(1) brightness(0.8);

  transition: filter 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform;

}



.cpf-insights__card--standard:hover .cpf-insights__card-img {

  filter: grayscale(0) brightness(1);

  transform: scale(1.1) rotate(2deg);

}



.cpf-insights__card-plus {

  display: inline-flex;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-insights__card-plus svg circle {

  fill: rgba(255, 255, 255, 0.1);

  transition: fill 0.3s ease;

}



.cpf-insights__card-plus svg path {

  stroke: var(--cpf-color-white);

  transition: stroke 0.3s ease;

}



.cpf-insights__card--standard:hover .cpf-insights__card-plus {

  transform: rotate(90deg) scale(1.2);

}



.cpf-insights__card--standard:hover .cpf-insights__card-plus svg circle {

  fill: var(--cpf-color-accent);

}



.cpf-insights__card--standard:hover .cpf-insights__card-plus svg path {

  stroke: var(--cpf-color-dark);

}



.cpf-insights__card-content {

  margin-block-start: auto;

  /* Locks to bottom of standard card */

}



.cpf-insights__card-title {

  font-family: var(--cpf-font-body);

  font-size: 1.15rem;

  font-weight: 500;

  line-height: 1.35;

  color: var(--cpf-color-white);

  margin-block-end: 1rem;

}



.cpf-insights__card-excerpt {

  font-family: var(--cpf-font-body);

  font-size: 0.95rem;

  color: rgba(255, 255, 255, 0.6);

  line-height: 1.5;

}



/* == RESPONSIVE RULES == */

@media (max-width: 1200px) {

  .cpf-insights__grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



@media (max-width: 991.98px) {

  .cpf-insights__header-bottom {

    grid-template-columns: 1fr;

    gap: 2rem;

  }



  .cpf-insights__grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .cpf-insights__card--hero {

    grid-column: span 2;

  }

}



@media (max-width: 575.98px) {

  .cpf-insights__grid {

    grid-template-columns: 1fr;

  }



  .cpf-insights__card--hero {

    grid-column: span 1;

    min-height: 400px;

  }



  .cpf-insights__hero-content {

    padding: 2rem;

  }

}



/* ==============================================

   SECTION: FOOTER (Dark Matrix Integration)

   ============================================== */

.cpf-footer {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  padding-block-start: clamp(6rem, 12vw, 10rem);

  position: relative;

  overflow: hidden;

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  /* Faint separation from Insights */

}



.cpf-footer__container {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



/* Pre-Footer Matrix */

.cpf-footer__pre {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(4rem, 8vw, 8rem);

  margin-block-end: clamp(4rem, 8vw, 6rem);

}



.cpf-footer__cta-title {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.5rem, 2.8vw, 2.5rem);

  font-weight: 300;

  line-height: 1.3;

  color: rgba(255, 255, 255, 0.6);

  margin-block-end: 3rem;

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-footer__cta-title strong {

  font-weight: 500;

  color: var(--cpf-color-white);

}



.cpf-footer__manager {

  display: flex;

  align-items: center;

  gap: 1.25rem;

}



.cpf-manager__img {

  inline-size: 48px;

  block-size: 48px;

  border-radius: 50%;

  object-fit: cover;

  filter: grayscale(1);

}



.cpf-manager__info {

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

}



.cpf-manager__name {

  font-family: var(--cpf-font-body);

  font-size: 1rem;

  font-weight: 600;

  color: var(--cpf-color-white);

}



.cpf-manager__role {

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.5);

}



/* Newsletter Geometry */

.cpf-footer__newsletter-title {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.5rem, 2vw, 1.8rem);

  font-weight: 500;

  margin-block-end: 2rem;

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-newsletter__form {

  margin-block-end: 2rem;

}



/* Interactive Floating Label Inputs */

.cpf-input-group {

  position: relative;

  margin-block-end: 1rem;

}



.cpf-input {

  inline-size: 100%;

  background: transparent;

  border: none;

  border-block-end: 1px solid rgba(255, 255, 255, 0.15);

  color: var(--cpf-color-white);

  padding-block: 1.25rem 0.5rem;

  font-family: var(--cpf-font-body);

  font-size: 1rem;

  transition: border-color 0.4s ease;

}



.cpf-label {

  position: absolute;

  inset-inline-start: 0;

  inset-block-start: 1rem;

  font-family: var(--cpf-font-body);

  font-size: 0.95rem;

  color: rgba(255, 255, 255, 0.4);

  pointer-events: none;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;

  transform-origin: left top;

}



/* Advanced Floating Trigger (Requires a placeholder space in HTML to hack pseudo logic) */

.cpf-input:focus~.cpf-label,

.cpf-input:not(:placeholder-shown)~.cpf-label {

  transform: translateY(-1.25rem);

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.8);

}



.cpf-input:focus {

  outline: none;

}



.cpf-input-focus-line {

  position: absolute;

  inset-block-end: 0;

  inset-inline-start: 0;

  inline-size: 0;

  block-size: 2px;

  background-color: var(--cpf-color-accent);

  transition: inline-size 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-input:focus~.cpf-input-focus-line {

  inline-size: 100%;

}



/* Newsletter CTA */

.cpf-btn--newsletter {

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  border: none;

  border-radius: var(--cpf-radius-round);

  padding: 0.8rem 1.5rem;

  font-family: var(--cpf-font-body);

  font-weight: 600;

  font-size: 0.9rem;

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  cursor: pointer;

  margin-block-start: 1.5rem;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;

}



.cpf-btn-dot {

  inline-size: 6px;

  block-size: 6px;

  border-radius: 50%;

  background-color: var(--cpf-color-accent);

  transition: transform 0.4s ease;

}



.cpf-btn--newsletter:hover {

  background-color: var(--cpf-color-accent);

  transform: translateY(-3px);

  box-shadow: 0 10px 20px rgba(235, 203, 52, 0.15);

}



.cpf-btn--newsletter:hover .cpf-btn-dot {

  transform: scale(1.5);

  background-color: var(--cpf-color-dark);

}



.cpf-footer__newsletter-desc {

  font-family: var(--cpf-font-body);

  font-size: 0.95rem;

  color: rgba(255, 255, 255, 0.45);

  line-height: 1.6;

}



/* Divider Tracker */

.cpf-footer__divider {

  border: none;

  block-size: 1px;

  background-color: rgba(255, 255, 255, 0.08);

  /* Dark subtle */

  margin-block-end: clamp(4rem, 8vw, 6rem);

}



/* Main Hub Network */

.cpf-footer__main {

  display: grid;

  grid-template-columns: minmax(280px, 1fr) 1fr 1fr;

  gap: 4rem;

  align-items: start;

}



.cpf-footer__col-head {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  margin-block-end: 2rem;

}



.cpf-plus-icon {

  font-family: var(--cpf-font-mono);

  color: rgba(255, 255, 255, 0.4);

}



.cpf-col-label {

  font-family: var(--cpf-font-body);

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.4);

}



.cpf-footer__col-content {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.cpf-footer__phone {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.2rem, 1.5vw, 1.4rem);

  font-weight: 500;

}



.cpf-footer__email {

  position: relative;

  font-family: var(--cpf-font-display);

  font-size: clamp(1.5rem, 3vw, 2.5rem);

  font-weight: 600;

  color: var(--cpf-color-white);

  text-decoration: none;

  display: inline-block;

  padding-block-end: 0.2rem;

}



.cpf-email-underline {

  position: absolute;

  inset-block-end: 0;

  inset-inline-start: 0;

  inline-size: 100%;

  block-size: 2px;

  background-color: rgba(255, 255, 255, 0.2);

  transition: background-color 0.4s ease;

}



.cpf-footer__email:hover .cpf-email-underline {

  background-color: var(--cpf-color-accent);

}



.cpf-footer__list {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.cpf-footer__link {

  font-family: var(--cpf-font-body);

  font-size: 1.1rem;

  color: rgba(255, 255, 255, 0.75);

  text-decoration: none;

  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

}



.cpf-arrow-up {

  opacity: 0;

  transform: translate(-10px, 10px);

  color: var(--cpf-color-accent);

  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-footer__link:hover {

  color: var(--cpf-color-accent);

  transform: translateX(8px);

}



.cpf-footer__link--social:hover .cpf-arrow-up {

  opacity: 1;

  transform: translate(0, 0);

}



/* Typography Macro Architecture */

.cpf-footer__huge {

  margin-block-start: clamp(6rem, 15vw, 10rem);

  text-align: left;

  user-select: none;

}



.cpf-footer__huge-text {

  display: block;

  font-family: var(--cpf-font-display);

  font-size: clamp(6rem, 20.5vw, 26rem);

  font-weight: 700;

  line-height: 0.8;

  letter-spacing: -0.04em;

  color: var(--cpf-color-white);

  position: relative;

}



.cpf-footer__huge-reg {

  font-size: 0.4em;

  vertical-align: super;

  font-family: var(--cpf-font-mono);

  font-weight: 300;

}



.cpf-footer__huge-sub {

  font-family: var(--cpf-font-body);

  font-size: clamp(3rem, 10.5vw, 12rem);

  font-weight: 500;

  line-height: 1;

  display: block;

  margin-block-start: 1rem;

  letter-spacing: -0.02em;

  color: rgba(255, 255, 255, 0.9);

}



/* Legal Ground Floor */

.cpf-footer__bottom {

  background-color: rgba(0, 0, 0, 0.4);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  padding-block: 2rem;

  margin-block-start: clamp(4rem, 8vw, 6rem);

}



.cpf-footer__bottom-container {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.4);

}



.cpf-footer__legal {

  display: flex;

  gap: 2rem;

}



.cpf-footer__legal a {

  color: rgba(255, 255, 255, 0.4);

  text-decoration: none;

  transition: color 0.3s ease;

}



.cpf-footer__legal a:hover {

  color: var(--cpf-color-accent);

}



.cpf-footer__credits {

  display: flex;

  gap: 0.5rem;

  align-items: center;

}



.cpf-footer__credits-sep {

  opacity: 0.3;

}



/* RESPONSIVE SCALING */

@media (max-width: 991.98px) {

  .cpf-footer__pre {

    grid-template-columns: 1fr;

    gap: 4rem;

  }



  .cpf-footer__main {

    grid-template-columns: 1fr;

    gap: 3rem;

  }



  .cpf-footer__bottom-container {

    flex-wrap: wrap;

    gap: 1.5rem;

    justify-content: center;

    text-align: center;

  }

}



@media (max-width: 575.98px) {

  .cpf-footer__huge-text {

    font-size: clamp(4rem, 18vw, 6rem);

  }



  .cpf-footer__huge-sub {

    font-size: clamp(2.5rem, 10vw, 4rem);

  }

}



/* =============================================

   SECTION: EXPERIENCES (Testimonials)

   ============================================= */

.cpf-experiences {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 12vw, 10rem);

  color: var(--cpf-color-white);

  position: relative;

  overflow: hidden;

}



.cpf-experiences__container {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.cpf-experiences__header {

  margin-block-end: clamp(4rem, 8vw, 6rem);

}



.cpf-experiences__title-wrap {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

  align-items: flex-start;

}



.cpf-experiences__badge {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--cpf-color-accent);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.cpf-experiences__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(4rem, 10vw, 12rem);

  font-weight: 700;

  line-height: 0.85;

  letter-spacing: -0.04em;

  margin: 0;

}



.cpf-experiences__year {

  font-family: var(--cpf-font-mono);

  font-size: 1.25rem;

  opacity: 0.4;

  margin-block-start: 0.5rem;

}



.cpf-experiences__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;

  align-items: start;

}



.cpf-experiences__card {

  background-color: rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(12px);

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

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: var(--cpf-radius-lg);

  padding: 2.5rem;

  display: flex;

  flex-direction: column;

  gap: 2.5rem;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;

  position: relative;

  overflow: hidden;

}



.cpf-experiences__card:hover {

  transform: translateY(-10px);

  background-color: rgba(255, 255, 255, 0.06);

  border-color: rgba(235, 203, 52, 0.3);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(235, 203, 52, 0.05);

}



.cpf-experiences__card--stat {

  grid-column: span 1;

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

}



.cpf-experiences__card--stat:hover {

  background-color: var(--cpf-color-white);

  border-color: var(--cpf-color-accent);

}



.cpf-experiences__stat-value {

  display: block;

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 5vw, 4.5rem);

  font-weight: 700;

  line-height: 1;

  margin-block-end: 1.5rem;

}



.cpf-experiences__stat-value small {

  font-size: 0.4em;

  opacity: 0.5;

}



.cpf-experiences__stat-text {

  font-family: var(--cpf-font-body);

  font-size: 1rem;

  line-height: 1.6;

  opacity: 0.7;

}



.cpf-experiences__stat-footer {

  margin-block-start: auto;

  display: flex;

  flex-direction: column;

  gap: 2rem;

}



.cpf-experiences__brand {

  display: block;

  font-family: var(--cpf-font-body);

  font-size: 1.25rem;

  font-weight: 700;

  margin-block-end: 1rem;

}



.cpf-experiences__trust {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.cpf-experiences__avatars {

  display: flex;

  align-items: center;

}



.cpf-experiences__avatar {

  inline-size: 32px;

  block-size: 32px;

  border-radius: 50%;

  border: 2px solid var(--cpf-color-white);

  margin-inline-end: -0.75rem;

}



.cpf-experiences__avatar-more {

  inline-size: 32px;

  block-size: 32px;

  border-radius: 50%;

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.65rem;

  font-weight: 700;

  border: 2px solid var(--cpf-color-white);

}



.cpf-experiences__stars {

  color: var(--cpf-color-accent);

  font-size: 0.9rem;

}



.cpf-experiences__trust-text {

  font-size: 0.75rem;

  opacity: 0.5;

  font-weight: 500;

}



.cpf-experiences__review-btn {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  border: none;

  border-radius: 50px;

  padding: 1rem 2rem;

  font-family: var(--cpf-font-body);

  font-weight: 600;

  font-size: 0.9rem;

  cursor: pointer;

  transition: transform 0.3s ease, background-color 0.3s ease;

}



.cpf-experiences__review-btn:hover {

  transform: scale(1.05);

  background-color: var(--cpf-color-dark);

}



.cpf-experiences__card--quote {

  grid-column: span 1;

}



.cpf-experiences__card--tall {

  grid-row: span 1;

}



.cpf-experiences__user {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.cpf-experiences__user-img {

  inline-size: 48px;

  block-size: 48px;

  border-radius: 12px;

  object-fit: cover;

}



.cpf-experiences__user-name {

  font-size: 1rem;

  font-weight: 600;

}



.cpf-experiences__user-company {

  font-size: 0.8rem;

  opacity: 0.5;

}



.cpf-experiences__quote-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.cpf-experiences__plus {

  font-family: var(--cpf-font-mono);

  opacity: 0.3;

}



.cpf-experiences__quote-text {

  font-size: 1.125rem;

  line-height: 1.5;

  font-weight: 500;

  color: rgba(255, 255, 255, 0.9);

}



.cpf-experiences__quote-large {

  font-size: 1.75rem;

  font-weight: 500;

  line-height: 1.3;

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-experiences__quote-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-block-start: 2rem;

}



.cpf-experiences__glass-fade {

  position: absolute;

  inset-block-end: 0;

  inset-inline: 0;

  block-size: 15rem;

  background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.9));

  backdrop-filter: blur(8px);

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

  pointer-events: none;

  z-index: 5;

}



@media (max-width: 1199.98px) {

  .cpf-experiences__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 767.98px) {

  .cpf-experiences__grid {

    grid-template-columns: 1fr;

  }



  .cpf-experiences__title {

    font-size: 3.5rem;

  }

}



/* =============================================

   REFINED EXPERIENCES (Match Mockup Correctly)

   ============================================= */

.cpf-experiences {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 12vw, 10rem);

  color: var(--cpf-color-white);

  position: relative;

}



.cpf-experiences__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;

  align-items: stretch;

}



.cpf-experiences__card {

  background-color: #121212;

  border-radius: 20px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.4s var(--cpf-ease);

  height: 100%;

  border: 1px solid rgba(255, 255, 255, 0.03);

}



.cpf-experiences__card:hover {

  transform: translateY(-8px);

  border-color: rgba(235, 203, 52, 0.2);

}



.cpf-experiences__card--stat {

  padding: 2.5rem;

  gap: 3rem;

}



.cpf-experiences__stat-value {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 5vw, 5rem);

  font-weight: 600;

  line-height: 1;

  display: flex;

  align-items: baseline;

  gap: 0.1em;

}



.cpf-experiences__stat-value small {

  font-size: 0.4em;

  opacity: 0.5;

}



.cpf-experiences__stat-text {

  font-size: 1rem;

  opacity: 0.7;

  margin-block-start: 1rem;

}



.cpf-experiences__brand {

  display: block;

  font-weight: 700;

  font-size: 1.25rem;

  margin-block-end: 1rem;

}



.cpf-experiences__avatars {

  display: flex;

  margin-block-end: 1rem;

}



.cpf-experiences__avatar {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  border: 2px solid #121212;

  margin-inline-end: -10px;

}



.cpf-experiences__avatar-more {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: #000;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.7rem;

  font-weight: 700;

  border: 2px solid #121212;

}



.cpf-experiences__stars-wrap {

  display: flex;

  flex-direction: column;

  gap: 0.25rem;

}



.cpf-experiences__stars {

  color: var(--cpf-color-accent);

}



.cpf-experiences__trust {

  font-size: 0.75rem;

  opacity: 0.4;

}



.cpf-experiences__btn {

  background-color: #000;

  color: #fff;

  border: none;

  border-radius: 50px;

  padding: 1rem 2rem;

  font-weight: 600;

  cursor: pointer;

  margin-block-start: 2rem;

  transition: background-color 0.3s ease;

}



.cpf-experiences__btn:hover {

  background-color: #222;

}



.cpf-experiences__author {

  padding: 1.5rem;

  display: flex;

  align-items: center;

  gap: 1rem;

  border-block-end: 1px solid rgba(255, 255, 255, 0.05);

}



.cpf-experiences__author-img {

  width: 44px;

  height: 44px;

  border-radius: 12px;

  object-fit: cover;

}



.cpf-experiences__author-name {

  font-size: 1rem;

  font-weight: 600;

}



.cpf-experiences__author-sub {

  font-size: 0.8rem;

  opacity: 0.4;

  display: block;

}



.cpf-experiences__body {

  padding: 2.5rem;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.cpf-experiences__meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-block-end: 2rem;

}



.cpf-experiences__text {

  font-size: 1.125rem;

  line-height: 1.5;

  color: rgba(255, 255, 255, 0.8);

}



.cpf-experiences__text-large {

  font-size: 1.75rem;

  font-weight: 500;

  line-height: 1.3;

  margin-block-end: 2.5rem;

}



.cpf-experiences__plus {

  opacity: 0.3;

  font-weight: 300;

}



.cpf-experiences__card--large .cpf-experiences__author {

  border-block-end: none;

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  margin-block-start: auto;

}



.cpf-viewport-glass {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 15vh;

  z-index: 1000;

  background: linear-gradient(to top, rgba(10, 10, 10, 0.95), transparent);

  backdrop-filter: blur(20px);

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

  pointer-events: none;

  mask-image: linear-gradient(to bottom, transparent, black 80%);

  -webkit-mask-image: linear-gradient(to bottom, transparent, black 80%);

}



@media (max-width: 1199.98px) {

  .cpf-experiences__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 767.98px) {

  .cpf-experiences__grid {

    grid-template-columns: 1fr;

  }

}



/* =============================================

   ORANGE BACKGROUND INTEGRATION (Per Request)

   ============================================= */

.cpf-experiences__card--stat {

  background-color: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  border: none;

}



.cpf-experiences__card--stat .cpf-experiences__stat-text {

  color: inherit;

  opacity: 0.8;

}



.cpf-experiences__card--stat .cpf-experiences__stars {

  color: var(--cpf-color-dark);

}



.cpf-experiences__card--stat .cpf-experiences__trust {

  color: var(--cpf-color-dark);

  opacity: 0.6;

}



.cpf-experiences__card--stat .cpf-experiences__btn {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

}



/* =============================================

   SECTION: IMPACT (Stats & Philosophy)

   ============================================= */

.cpf-impact {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 10vw, 12rem);

  color: var(--cpf-color-white);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

}



.cpf-impact__container {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.cpf-impact__stats {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;

  margin-block-end: clamp(4rem, 8vw, 6rem);

}



.cpf-impact__stat-number {

  display: block;

  font-family: var(--cpf-font-display);

  font-size: clamp(3.5rem, 8vw, 7rem);

  font-weight: 600;

  line-height: 1;

  letter-spacing: -0.02em;

  margin-block-end: 1rem;

}



.cpf-impact__stat-label {

  font-size: 0.875rem;

  opacity: 0.5;

  line-height: 1.5;

  font-weight: 500;

}



.cpf-impact__divider {

  border: none;

  border-block-start: 1px solid rgba(255, 255, 255, 0.1);

  margin-block-end: clamp(4rem, 8vw, 6rem);

}



.cpf-impact__philosophy {

  display: grid;

  grid-template-columns: 320px 1fr;

  gap: 4rem;

  align-items: start;

}



.cpf-impact__brand-title {

  font-family: var(--cpf-font-body);

  font-size: 1.125rem;

  font-weight: 700;

  margin-block-end: 0.75rem;

}



.cpf-impact__brand-motto {

  font-size: 0.875rem;

  opacity: 0.5;

  line-height: 1.6;

}



.cpf-impact__heading {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.75rem, 3.5vw, 2.75rem);

  font-weight: 400;

  line-height: 1.35;

  color: rgba(255, 255, 255, 0.6);

  margin-block-end: 2.5rem;

  letter-spacing: -0.01em;

}



.cpf-impact__heading strong {

  color: var(--cpf-color-white);

  font-weight: 500;

}



.cpf-impact__description {

  font-size: 1.125rem;

  line-height: 1.65;

  opacity: 0.5;

  max-inline-size: 800px;

}



@media (max-width: 1023.98px) {

  .cpf-impact__philosophy {

    grid-template-columns: 1fr;

    gap: 3rem;

  }

}



@media (max-width: 767.98px) {

  .cpf-impact__stats {

    grid-template-columns: repeat(2, 1fr);

    gap: 3rem 1.5rem;

  }

}



/* =============================================

   CUSTOM SCROLLBAR DESIGN

   ============================================= */

::-webkit-scrollbar {

  width: 8px;

}



::-webkit-scrollbar-track {

  background: var(--cpf-color-dark);

}



::-webkit-scrollbar-thumb {

  background: rgba(255, 255, 255, 0.1);

  border-radius: 100px;

  border: 2px solid var(--cpf-color-dark);

  transition: background 0.3s ease;

}



::-webkit-scrollbar-thumb:hover {

  background: var(--cpf-color-accent);

}



/* =============================================

   REFINED SCROLLBAR DESIGN (Accent Color)

   ============================================= */

::-webkit-scrollbar {

  width: 10px;

}



::-webkit-scrollbar-track {

  background: var(--cpf-color-dark);

}



::-webkit-scrollbar-thumb {

  background: var(--cpf-color-accent);

  border-radius: 100px;

  border: 2px solid var(--cpf-color-dark);

}



/* =============================================

   SECTION: CASE STUDY (Grid Metrics)

   ============================================= */

.cpf-case-study {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 10vw, 12rem);

  color: var(--cpf-color-white);

}



.cpf-case-study__container {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.cpf-case-study__grid {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: 1.5rem;

  align-items: stretch;

}



.cpf-case-study__hero-card {

  position: relative;

  background-color: #000;

  border-radius: var(--cpf-radius-lg);

  overflow: hidden;

  padding: 3rem;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 600px;

}



.cpf-case-study__hero-meta {

  z-index: 2;

}



.cpf-case-study__tag {

  display: block;

  font-weight: 700;

  font-size: 1.25rem;

  margin-block-end: 0.5rem;

}



.cpf-case-study__tags {

  font-size: 0.875rem;

  opacity: 0.5;

}



.cpf-case-study__hero-brand {

  position: absolute;

  top: 50%;

  left: 3rem;

  transform: translateY(-50%);

  font-family: var(--cpf-font-body);

  font-size: clamp(4rem, 8vw, 7rem);

  font-weight: 700;

  letter-spacing: -0.05em;

  z-index: 2;

  margin: 0;

}



.cpf-case-study__hero-img {

  position: absolute;

  top: 0;

  right: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.7;

  z-index: 1;

  mask-image: linear-gradient(to right, black 30%, transparent 80%);

  -webkit-mask-image: linear-gradient(to right, black 30%, transparent 80%);

}



.cpf-case-study__hero-footer {

  z-index: 2;

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

}



.cpf-case-study__live-link {

  color: var(--cpf-color-white);

  text-decoration: none;

  font-weight: 600;

  font-size: 0.9rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.cpf-case-study__closing {

  text-align: right;

}



.cpf-case-study__closing p {

  font-size: 1.25rem;

  font-weight: 600;

  line-height: 1.2;

  margin-block-end: 0.5rem;

}



.cpf-case-study__closing span {

  font-size: 0.875rem;

  opacity: 0.5;

}



.cpf-case-study__metrics {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.5rem;

}



.cpf-case-study__metric-card {

  background-color: #121212;

  border-radius: var(--cpf-radius-lg);

  padding: 2.25rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.03);

  transition: border-color 0.4s ease, transform 0.4s ease;

}



.cpf-case-study__metric-card:hover {

  border-color: rgba(235, 203, 52, 0.2);

  transform: translateY(-5px);

}



.cpf-case-study__metric-group {

  margin-block-end: 2rem;

}



.cpf-case-study__metric-group:last-child {

  margin-block-end: 0;

}



.cpf-case-study__metric-label {

  display: block;

  font-size: 0.75rem;

  opacity: 0.4;

  margin-block-end: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.cpf-case-study__metric-value {

  font-size: 1.5rem;

  font-weight: 600;

  line-height: 1.3;

}



.cpf-case-study__metric-value-accent {

  font-family: var(--cpf-font-display);

  font-size: 2rem;

  font-weight: 600;

  color: var(--cpf-color-accent);

}



.cpf-case-study__metric-card--center {

  align-items: center;

  text-align: center;

}



.cpf-case-study__score-circle {

  width: 100px;

  height: 100px;

  border-radius: 50%;

  border: 12px solid rgba(255, 255, 255, 0.05);

  border-top-color: var(--cpf-color-accent);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-block-end: 2rem;

}



.cpf-case-study__score-num {

  font-size: 1.5rem;

  font-weight: 700;

}



.cpf-case-study__metric-label-lg {

  font-size: 1.25rem;

  font-weight: 600;

  margin-block-end: 1rem;

}



.cpf-case-study__metric-sub {

  font-size: 0.85rem;

  opacity: 0.4;

  line-height: 1.5;

}



.cpf-case-study__stars {

  color: var(--cpf-color-accent);

  margin-block-end: 1.5rem;

  font-size: 0.875rem;

}



.cpf-case-study__quote {

  font-size: 1.125rem;

  line-height: 1.5;

  font-weight: 500;

  margin-block-end: 2rem;

}



.cpf-case-study__author {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.cpf-case-study__author img {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  object-fit: cover;

}



.cpf-case-study__author span {

  font-size: 0.875rem;

  font-weight: 600;

}



.cpf-case-study__chart-header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-block-end: 2rem;

}



.cpf-case-study__chart-val {

  display: block;

  font-size: 2rem;

  font-weight: 700;

}



.cpf-case-study__chart-label {

  font-size: 0.75rem;

  opacity: 0.4;

}



.cpf-case-study__chart-pct {

  background: rgba(235, 203, 52, 0.1);

  color: var(--cpf-color-accent);

  padding: 0.25rem 0.6rem;

  border-radius: 50px;

  font-size: 0.75rem;

  font-weight: 700;

}



.cpf-case-study__chart-bars {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  height: 120px;

  gap: 0.75rem;

}



.cpf-case-study__chart-bars .bar {

  flex: 1;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 4px;

  position: relative;

  transition: height 1s var(--cpf-ease);

}



.cpf-case-study__chart-bars .bar.highlight {

  background: var(--cpf-color-accent);

}



.cpf-case-study__chart-bars .bar span {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  font-size: 0.6rem;

  opacity: 0.3;

  margin-block-start: 0.5rem;

}



@media (max-width: 1199.98px) {

  .cpf-case-study__grid {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 767.98px) {

  .cpf-case-study__metrics {

    grid-template-columns: 1fr;

  }

}



/* =============================================

   REFINED CASE STUDY (Mockup Accuracy Upgrade)

   ============================================= */

.cpf-case-study__hero-plus {

  position: absolute;

  top: 3rem;

  right: 3rem;

  font-size: 1.5rem;

  opacity: 0.3;

  z-index: 2;

}



.cpf-case-study__conversion {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.cpf-case-study__conversion .val {

  font-family: var(--cpf-font-display);

  font-size: 1.75rem;

  font-weight: 600;

}



.cpf-case-study__conversion .val.accent {

  color: var(--cpf-color-accent);

}



.cpf-case-study__conversion .arrow {

  opacity: 0.2;

  font-size: 1.5rem;

}



.cpf-case-study__gauge-wrapper {

  position: relative;

  width: 140px;

  height: 80px;

  margin-block-end: 1rem;

  display: flex;

  align-items: center;

  justify-content: center;

}



.cpf-case-study__gauge {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.cpf-case-study__gauge .bg {

  stroke: rgba(255, 255, 255, 0.05);

}



.cpf-case-study__gauge .fg {

  stroke: var(--cpf-color-accent);

  stroke-dasharray: 126;

  stroke-dashoffset: 2;

  /* Slight gap at ends for styling */

}



.cpf-case-study__score-num {

  position: relative;

  top: 10px;

  font-size: 1.75rem;

  font-weight: 700;

}



.cpf-case-study__author .avatar-wrap img {

  width: 36px;

  height: 36px;

  border-radius: 10px;

}



/* =============================================

   SECTION: PRICING (Premium Plans)

   ============================================= */

.cpf-pricing {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 12vw, 15rem);

  color: var(--cpf-color-white);

}



.cpf-pricing__container {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.cpf-pricing__header {

  text-align: center;

  margin-block-end: clamp(4rem, 8vw, 8rem);

  display: flex;

  flex-direction: column;

  align-items: center;

}



.cpf-pricing__tag-wrap {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  margin-block-end: 1.5rem;

}



.cpf-pricing__tag-icon {

  width: 18px;

  height: 18px;

  background: white;

  color: black;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 0.8rem;

}



.cpf-pricing__tag {

  font-size: 0.875rem;

  font-weight: 600;

}



.cpf-pricing__title {

  font-size: clamp(4rem, 10vw, 8rem);

  font-weight: 700;

  line-height: 1;

  margin-block-end: 3rem;

  letter-spacing: -0.04em;

}



.cpf-pricing__toggle-wrap {

  background: #121212;

  border-radius: 50px;

  padding: 0.35rem;

  display: flex;

  gap: 0.5rem;

}



.cpf-pricing__toggle-btn {

  background: transparent;

  border: none;

  color: rgba(255, 255, 255, 0.4);

  padding: 0.6rem 1.5rem;

  border-radius: 50px;

  font-weight: 600;

  font-size: 0.875rem;

  cursor: pointer;

  transition: all 0.3s ease;

}



.cpf-pricing__toggle-btn.is-active {

  background: #222;

  color: white;

}



.cpf-pricing__grid {

  display: flex;

  gap: 1.25rem;

  align-items: stretch;

}



.cpf-pricing__card {

  background-color: #121212;

  border-radius: 25px;

  padding: 3rem;

  display: flex;

  flex-direction: column;

  transition: transform 0.4s var(--cpf-ease);

  border: 1px solid rgba(255, 255, 255, 0.03);

}



.cpf-pricing__card:hover {

  transform: translateY(-5px);

  border-color: rgba(255, 255, 255, 0.08);

}



.cpf-pricing__card--small {

  flex: 0 0 350px;

}



.cpf-pricing__card--large {

  flex: 1;

  justify-content: space-between;

}



.cpf-pricing__card-title {

  font-size: 1.5rem;

  font-weight: 600;

  line-height: 1.25;

  margin-block-end: 1rem;

}



.cpf-pricing__card-sub {

  font-size: 0.95rem;

  opacity: 0.4;

  line-height: 1.5;

}



.cpf-pricing__addon {

  margin-block-start: auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.cpf-pricing__addon-price {

  font-size: 1.75rem;

  font-weight: 600;

}



.cpf-pricing__switch {

  width: 44px;

  height: 24px;

  background: #333;

  border-radius: 20px;

  position: relative;

  cursor: pointer;

}



.cpf-pricing__switch::after {

  content: "";

  position: absolute;

  top: 3px;

  left: 3px;

  width: 18px;

  height: 18px;

  background: white;

  border-radius: 50%;

  transition: transform 0.3s ease;

}



.cpf-pricing__price-wrap {

  display: flex;

  align-items: baseline;

  gap: 0.1em;

  margin-block-end: 3rem;

}



.cpf-pricing__currency {

  font-size: 2.5rem;

  font-weight: 500;

  opacity: 0.3;

}



.cpf-pricing__amount {

  font-family: var(--cpf-font-body);

  font-size: 5rem;

  font-weight: 700;

  letter-spacing: -0.04em;

}



.cpf-pricing__period {

  font-size: 1rem;

  opacity: 0.3;

  margin-inline-start: 0.5rem;

}



.cpf-pricing__features {

  display: flex;

  flex-direction: column;

  gap: 1.25rem;

}



.cpf-pricing__feature {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  font-size: 1rem;

  font-weight: 500;

}



.cpf-pricing__feature span {

  opacity: 0.3;

}



.cpf-pricing__footer {

  margin-block-start: 6rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  padding-block-start: 2rem;

}



.cpf-pricing__delivery .label {

  display: block;

  font-size: 0.75rem;

  opacity: 0.3;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-block-end: 0.5rem;

}



.cpf-pricing__delivery .val {

  font-size: 1rem;

  font-weight: 600;

}



.cpf-pricing__cta {

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  padding: 1.25rem 3rem;

  border-radius: 50px;

  font-weight: 700;

  text-decoration: none;

  transition: transform 0.3s ease, background-color 0.3s ease;

}



.cpf-pricing__cta:hover {

  transform: scale(1.05);

  background-color: var(--cpf-color-accent);

}



.cpf-case-study__chart-bars .bar .val {

  position: absolute;

  top: 1rem;

  left: 50%;

  transform: translateX(-50%) rotate(-90deg);

  transform-origin: center;

  font-size: 0.75rem;

  font-weight: 800;

  white-space: nowrap;

}



.cpf-case-study__chart-bars .bar .label {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  font-size: 0.7rem;

  opacity: 0.4;

  margin-block-start: 0.75rem;

}



/* =============================================

   REFINED PRICING (100% FIDELITY UPGRADE)

   ============================================= */

.cpf-pricing__card {

  background-color: #111 !important;

  padding: 3.5rem !important;

}



.cpf-pricing__card--small {

  flex: 0 0 380px !important;

}



.cpf-pricing__card-title {

  font-size: 1.75rem !important;

  letter-spacing: -0.02em;

  margin-block-end: 0.75rem !important;

}



.cpf-pricing__card-sub {

  font-size: 0.9rem !important;

  max-width: 220px;

  opacity: 0.5 !important;

}



.cpf-pricing__switch-wrap {

  background: #252525;

  width: 68px;

  height: 38px;

  border-radius: 100px;

  display: flex;

  align-items: center;

  padding-inline: 4px;

  cursor: pointer;

}



.cpf-pricing__switch {

  width: 30px;

  height: 30px;

  background: #444;

  border-radius: 50%;

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;

}



.cpf-pricing__switch.is-active {

  background: #fff !important;

  transform: translateX(30px);

}



.cpf-pricing__price-wrap {

  margin-block-end: 4rem !important;

}



.cpf-pricing__amount {

  font-size: 6rem !important;

  line-height: 0.8 !important;

}



.cpf-pricing__currency {

  font-size: 3rem !important;

}



.cpf-pricing__feature {

  font-size: 1.1rem !important;

  gap: 1rem !important;

}



.cpf-pricing__feature .icon {

  opacity: 0.5 !important;

  font-weight: 400 !important;

}



.cpf-pricing__delivery .label {

  font-size: 0.7rem !important;

  opacity: 0.5 !important;

  font-weight: 700 !important;

  letter-spacing: 0.08em !important;

}



.cpf-pricing__delivery .val {

  font-size: 1.1rem !important;

}



/* =============================================

   PRICING EXTRA FOOTER (Looking for more?)

   ============================================= */

.cpf-pricing__extra {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

  margin-top: 6rem;

  display: grid;

  grid-template-columns: 380px 1fr;

  gap: 2rem;

  padding-block: 6rem 4rem;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.cpf-pricing__extra-label {

  font-size: 0.9rem;

  opacity: 0.4;

  font-weight: 500;

}



.cpf-pricing__extra-text {

  font-size: 1.75rem;

  font-weight: 600;

  line-height: 1.35;

  margin-block-end: 3rem;

  max-width: 850px;

  letter-spacing: -0.01em;

}



.cpf-pricing__extra-text .dim {

  opacity: 0.4;

  font-weight: 500;

}



.cpf-pricing__manager {

  display: flex;

  align-items: center;

  gap: 1.25rem;

}



.cpf-pricing__manager-img {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  object-fit: cover;

  filter: grayscale(1);

}



.cpf-pricing__manager-info {

  display: flex;

  flex-direction: column;

}



.cpf-pricing__manager-info .name {

  font-size: 0.9rem;

  font-weight: 700;

  line-height: 1.2;

}



.cpf-pricing__manager-info .role {

  font-size: 0.75rem;

  opacity: 0.4;

  font-weight: 600;

  text-transform: none;

  letter-spacing: 0;

}



/* =============================================

   SECTION: TEAM (Premium Editorial Card)

   ============================================= */

.cpf-team {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 10vw, 15rem);

}



.cpf-team__container {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.cpf-team__card-wrap {

  background-color: #0d0d0d;

  border-radius: clamp(30px, 5vw, 60px);

  padding: clamp(3rem, 6vw, 6rem);

  display: grid;

  grid-template-columns: 1.15fr 1fr;

  gap: 3rem;

  color: var(--cpf-color-white);

  border: 1px solid rgba(255, 255, 255, 0.03);

}



.cpf-team__editorial {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.cpf-team__brand {

  display: block;

  font-weight: 700;

  font-size: 1.1rem;

  margin-block-end: 1rem;

}



.cpf-team__title {

  font-family: var(--cpf-font-body);

  font-size: clamp(3rem, 6vw, 5rem);

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: -0.04em;

  max-width: 500px;

}



.cpf-team__title .gray {

  opacity: 0.4;

}



.cpf-team__editorial-mid {

  display: flex;

  gap: clamp(4rem, 15vw, 18rem);

  margin-block: 4rem;

}



.cpf-team__editorial-mid .plus-icon {

  font-size: 1.25rem;

  opacity: 0.15;

}



.cpf-team__editorial-bottom {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

  align-items: flex-end;

}



.col--mission .mission-title {

  font-size: 1.1rem;

  font-weight: 700;

  margin-block-end: 1rem;

}



.col--mission p {

  font-size: 0.95rem;

  opacity: 0.5;

  margin-block-end: 2rem;

  line-height: 1.5;

}



.cpf-team__apply-btn {

  display: inline-flex;

  align-items: center;

  gap: 1.5rem;

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  padding: 0.8rem 1.75rem;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 700;

  font-size: 0.95rem;

  transition: transform 0.3s var(--cpf-ease);

}



.cpf-team__apply-btn .dot {

  width: 14px;

  height: 14px;

  background: var(--cpf-color-dark);

  border-radius: 50%;

}



.col--collab p {

  font-size: 1.15rem;

  font-weight: 500;

  line-height: 1.4;

  opacity: 0.7;

}



.col--collab strong {

  font-weight: 800;

  color: var(--cpf-color-accent);

}



.cpf-team__grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

}



.cpf-team__member {

  position: relative;

  background-color: #000;

  border-radius: 20px;

  overflow: hidden;

  aspect-ratio: 0.85;

  color: #fff;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 1.75rem;

  transition: box-shadow 0.4s var(--cpf-ease);

}



.cpf-team__member-img-wrap {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  transition: transform 0.8s var(--cpf-ease), filter 0.8s var(--cpf-ease);

}



.cpf-team__member img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.7;

  transition: opacity 0.6s var(--cpf-ease);

}



.cpf-team__member:hover .cpf-team__member-img-wrap {

  transform: scale(1.1);

  filter: blur(15px) brightness(0.5);

}



.plus-top-left {

  position: relative;

  z-index: 2;

  font-size: 0.9rem;

  opacity: 0.6;

}



.cpf-team__member-info-top {

  position: relative;

  z-index: 2;

  text-align: right;

  display: flex;

  flex-direction: column;

}



.cpf-team__member-info-top .role {

  font-weight: 700;

  font-size: 0.85rem;

}



.cpf-team__member-info-top .at {

  font-size: 0.7rem;

  opacity: 0.6;

}





.cpf-team__member-info-bottom {

  position: relative;

  z-index: 2;

}



.cpf-team__member-info-bottom .name {

  font-size: 1.4rem;

  font-weight: 700;

  margin-block-end: 0.5rem;

  transition: transform 0.4s var(--cpf-ease);

}



.cpf-team__member-info-bottom .desc {

  font-size: 0.85rem;

  line-height: 1.5;

  opacity: 0;

  max-height: 0;

  overflow: hidden;

  transition: all 0.5s var(--cpf-ease);

}



.cpf-team__member:hover .cpf-team__member-info-bottom .desc {

  opacity: 0.9;

  max-height: 100px;

  margin-block-start: 1rem;

}



/* ==============================================

   THEME UPGRADE 2026: KINETIC INTERACTIONS

   ============================================== */



/* HERO VIDEO OVERLAY */

.cpf-hero__video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: brightness(0.6) contrast(1.1);

  opacity: 0.9;

}





/* ==============================================

   SECTION: Services (RESORED FROM SACRED BACKUP)

   ============================================== */

.cpf-services {

  padding-block: clamp(6rem, 12vw, 10rem);

  padding-inline: var(--cpf-nav-px);

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  /* Separator */

}



.cpf-services__container {

  max-inline-size: 1440px;

  margin-inline: auto;

}



.cpf-services__header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-block-end: clamp(3rem, 6vw, 6rem);

}



.cpf-services__badge {

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  color: var(--cpf-color-white);

}



.cpf-services__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3.5rem, 10vw, 8rem);

  font-weight: 600;

  line-height: 0.9;

  letter-spacing: var(--cpf-ls-hero);

  color: var(--cpf-color-white);

  max-inline-size: 70%;

  text-align: right;

  display: flex;

  align-items: flex-start;

  justify-content: flex-end;

  gap: 0.5rem;

}



.cpf-services__count {

  font-family: var(--cpf-font-body);

  font-size: clamp(1rem, 2vw, 1.8rem);

  color: rgba(255, 255, 255, 0.4);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

}



.cpf-services__accordion {

  display: flex;

  flex-direction: column;

}



.cpf-services__item {

  display: flex;

  align-items: flex-start;

  padding-block: clamp(2rem, 4vw, 3.5rem);

  border-block-start: 1px solid rgba(255, 255, 255, 0.1);

  transition: background-color 0.3s ease;

}



.cpf-services__item-num {

  font-family: var(--cpf-font-mono);

  font-size: clamp(0.75rem, 1vw, 0.875rem);

  color: rgba(255, 255, 255, 0.6);

  flex: 0 0 15%;

  padding-block-start: 0.5rem;

}



.cpf-services__item-main {

  flex: 1;

  display: grid;

  grid-template-rows: 1fr 0fr;

  /* Row 1: Title Closed, Row 2: Panel Open */

  transition: grid-template-rows 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  min-inline-size: 0;

}



.cpf-services__item.is-active .cpf-services__item-main {

  grid-template-rows: 0fr 1fr;

}



.cpf-services__item-title-closed {

  grid-row: 1;

  overflow: hidden;

  font-family: var(--cpf-font-body);

  font-size: clamp(1.2rem, 3vw, 1.5rem);

  font-weight: 500;

  letter-spacing: var(--cpf-ls-tight);

  color: var(--cpf-color-white);

  padding-block-start: 0.2rem;

  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-services__item.is-active .cpf-services__item-title-closed {

  opacity: 0;

  transform: translateY(-20px);

}



.cpf-services__item-panel {

  grid-row: 2;

  overflow: hidden;

  display: grid;

  grid-template-columns: minmax(180px, 240px) 1.5fr 1.2fr;

  gap: clamp(1.5rem, 4vw, 4rem);

  align-items: flex-start;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-services__item.is-active .cpf-services__item-panel {

  opacity: 1;

  transform: translateY(0);

}



@keyframes fadePanel {

  from {

    opacity: 0;

    transform: translateY(10px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.cpf-services__item-media {

  border-radius: var(--cpf-radius-md);

  overflow: hidden;

  margin: 0;

  aspect-ratio: 16/9;

}



.cpf-services__img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  display: block;

}



.cpf-services__item-title-open {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.5rem, 4vw, 2.25rem);

  font-weight: 500;

  line-height: 1.1;

  letter-spacing: var(--cpf-ls-tight);

  margin-block-end: clamp(1rem, 2vw, 1.5rem);

}



.cpf-services__item-desc {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.65);

  line-height: 1.5;

  max-inline-size: 380px;

}



.cpf-services__cat-label {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.5);

  margin-block-end: 1rem;

}



.cpf-services__cat-list {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}



.cpf-services__cat-pill {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.7rem, 1vw, 0.8rem);

  font-weight: 500;

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  padding: 0.35rem 0.85rem;

  border-radius: 50px;

}



.cpf-services__cat-pill--dark {

  background-color: rgba(255, 255, 255, 0.1);

  color: var(--cpf-color-white);

}



.cpf-services__action {

  flex: 0 0 10%;

  display: flex;

  justify-content: flex-end;

  padding-block-start: 0.2rem;

}



.cpf-services__toggle {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.2);

  inline-size: 52px;

  block-size: 52px;

  border-radius: 50%;

  color: var(--cpf-color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

  overflow: hidden;

}



.cpf-services__toggle::before {

  content: '';

  position: absolute;

  inset: 0;

  background-color: var(--cpf-color-accent);

  transform: scale(0);

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  border-radius: 50%;

}



.cpf-services__item.is-active .cpf-services__toggle {

  border-color: var(--cpf-color-accent);

}



.cpf-services__item.is-active .cpf-services__toggle::before {

  transform: scale(1);

}



.cpf-services__icon-plus,

.cpf-services__icon-minus {

  display: block;

  position: relative;

  inline-size: 16px;

  block-size: 16px;

  z-index: 2;

}



.cpf-services__icon-plus::before,

.cpf-services__icon-plus::after,

.cpf-services__icon-minus::before {

  content: '';

  position: absolute;

  background-color: currentColor;

  inset-block-start: 50%;

  inset-inline-start: 50%;

  transform: translate(-50%, -50%);

  transition: all 0.4s ease;

}



.cpf-services__icon-plus::before {

  inline-size: 16px;

  block-size: 1.5px;

}



.cpf-services__icon-plus::after {

  inline-size: 1.5px;

  block-size: 16px;

}



.cpf-services__icon-minus::before {

  inline-size: 16px;

  block-size: 1.5px;

}



.cpf-services__item.is-active .cpf-services__toggle {

  color: var(--cpf-color-dark);

}



.cpf-services__toggle:hover {

  border-color: var(--cpf-color-accent);

  color: var(--cpf-color-accent);

  /* Inject Theme Colored Hover */

}



/* Logic for plus/minus icons */

.cpf-services__item.is-active .cpf-services__toggle {

  border-color: rgba(255, 255, 255, 0.4);

}



.cpf-services__item.is-active .cpf-services__icon-plus {

  display: none;

}



.cpf-services__item.is-active .cpf-services__icon-minus {

  display: block;

}



.cpf-services__footer {

  display: flex;

  justify-content: center;

  margin-block-start: clamp(3rem, 6vw, 5rem);

}



.cpf-services__btn {

  display: inline-flex;

  align-items: center;

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  text-decoration: none;

  padding: 0.8rem 1.75rem;

  border-radius: 50px;

  transition: background-color var(--cpf-transition), transform var(--cpf-transition);

}



.cpf-services__btn:hover {

  background-color: var(--cpf-color-accent);

  /* Orange/Yellow integration */

  transform: translateY(-3px);

}



@media (max-width: 991.98px) {

  .cpf-services__header {

    flex-direction: column;

    gap: 1rem;

    align-items: flex-start;

  }



  .cpf-services__title {

    max-inline-size: 100%;

    text-align: left;

    justify-content: flex-start;

  }



  .cpf-services__item.is-active .cpf-services__item-panel {

    grid-template-columns: 1fr;

    gap: 2rem;

  }



  .cpf-services__item-media {

    max-inline-size: 100%;

    aspect-ratio: auto;

  }

}



/* ==============================================

   SERVICES SECTION REFINEMENTS & SCHEME INJECTION

   ============================================== */



/* OVERRIDE: Prevent inline display:none from blocking the icon */

.cpf-services__item.is-active .cpf-services__icon-minus {

  display: block !important;

}



.cpf-services__item.is-active .cpf-services__icon-plus {

  display: none !important;

}



/* HIGHLIGHT: Scheme coloring for the active row indicator */

.cpf-services__item.is-active .cpf-services__item-num {

  color: var(--cpf-color-accent) !important;

  font-weight: 600;

}



/* HIGHLIGHT: Solid, luminous toggle button on active state */

.cpf-services__item.is-active .cpf-services__toggle {

  border-color: var(--cpf-color-accent) !important;

  background-color: var(--cpf-color-accent) !important;

  color: var(--cpf-color-dark) !important;

  box-shadow: 0 0 20px rgba(235, 203, 52, 0.15) !important;

}



/* POLISH: Row Interaction Logic for closed rows */

.cpf-services__item {

  transition: background-color 0.4s ease, border-color 0.4s ease;

}



.cpf-services__item:not(.is-active):hover {

  background-color: rgba(255, 255, 255, 0.015);

  border-block-start-color: rgba(255, 255, 255, 0.25);

}



.cpf-services__item:not(.is-active):hover .cpf-services__item-title-closed {

  color: var(--cpf-color-accent);

  transform: translateX(10px);

}



.cpf-services__item:not(.is-active):hover .cpf-services__toggle {

  border-color: var(--cpf-color-accent);

  color: var(--cpf-color-accent);

}



/* POLISH: Active media image frame gloss */

.cpf-services__item.is-active .cpf-services__item-media {

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

  position: relative;

}



/* Subtle cinematic light leak over the thumbnail */

.cpf-services__item.is-active .cpf-services__item-media::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(235, 203, 52, 0.15) 0%, transparent 40%);

  pointer-events: none;

}



/* POLISH: Categories Pill Interaction */

.cpf-services__cat-pill {

  transition: all 0.3s ease;

  cursor: default;

}



.cpf-services__cat-pill:hover {

  background-color: var(--cpf-color-accent) !important;

  color: var(--cpf-color-dark) !important;

  transform: translateY(-2px);

}



/* ==============================================

   SERVICES 2.0: ADVANCED KINETIC INTERACTIONS

   ============================================== */



/* 1. Staggered Entrance Animations for the Expanding Panel */



/* Override basic display block logic for panel layers to allow animation */

.cpf-services__item.is-active .cpf-services__item-panel {

  animation: none !important;

  /* disable old global fadePanel */

}



/* Initial hidden states */

.cpf-services__item-panel .cpf-services__item-media,

.cpf-services__item-panel .cpf-services__item-info,

.cpf-services__item-panel .cpf-services__item-cats {

  opacity: 0;

  transform: translateY(30px);

}



/* Staggered cascading reveal when node becomes active */

.cpf-services__item.is-active .cpf-services__item-media {

  animation: kineticReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;

}



.cpf-services__item.is-active .cpf-services__item-info {

  animation: kineticReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;

}



.cpf-services__item.is-active .cpf-services__item-cats {

  animation: kineticReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;

}



@keyframes kineticReveal {

  0% {

    opacity: 0;

    transform: translateY(30px) scale(0.97);

    filter: blur(8px);

  }



  100% {

    opacity: 1;

    transform: translateY(0) scale(1);

    filter: blur(0);

  }

}



/* 2. Intense Image Hover Depth Effects */

.cpf-services__item-media {

  overflow: hidden;

  transform: translateZ(0);

  /* Hardware accelerate */

}



.cpf-services__img {

  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform, filter;

}



.cpf-services__item.is-active .cpf-services__item-media:hover .cpf-services__img {

  transform: scale(1.12) rotate(1.5deg);

  filter: saturate(1.3) contrast(1.15) brightness(0.9);

}



/* 3. Sweeping Scheme Text Highlight on Inactive Rows */

.cpf-services__item-title-closed {

  position: relative;

  display: inline-block;

}



.cpf-services__item-title-closed::after {

  content: '';

  position: absolute;

  inset-inline-start: 0;

  inset-block-end: -4px;

  inline-size: 0;

  block-size: 2px;

  background-color: var(--cpf-color-accent);

  transition: inline-size 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-services__item:not(.is-active):hover .cpf-services__item-title-closed::after {

  inline-size: 100%;

}



/* 4. Tracking Lines: Dynamic border interactions */

.cpf-services__item {

  position: relative;

  border-block-start: none !important;

  /* Strip static border */

}



.cpf-services__item::before {

  content: '';

  position: absolute;

  inset-block-start: 0;

  inset-inline-start: 0;

  inline-size: 100%;

  block-size: 1px;

  background-color: rgba(255, 255, 255, 0.08);

  /* Fainter baseline */

  transition: background-color 0.5s ease;

}



/* Inject sweeping gradient on hover */

.cpf-services__item:not(.is-active):hover::before {

  background-color: transparent;

  background-image: linear-gradient(90deg, var(--cpf-color-accent) 0%, rgba(255, 255, 255, 0.08) 60%);

  block-size: 1.5px;

}



/* Solid laser-line for active items */

.cpf-services__item.is-active::before {

  background-color: transparent;

  background-image: linear-gradient(90deg, var(--cpf-color-accent) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.05) 100%);

  block-size: 2px;

}



/* 5. Liquid Fill Expansion CTA Button */

.cpf-services__btn {

  position: relative;

  overflow: hidden;

  z-index: 1;

  background-color: transparent !important;

  color: var(--cpf-color-white) !important;

  border: 1px solid rgba(255, 255, 255, 0.3) !important;

  transition: color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.cpf-services__btn::after {

  content: '';

  position: absolute;

  inset-block-start: 120%;

  inset-inline-start: 0;

  inline-size: 100%;

  block-size: 100%;

  background-color: var(--cpf-color-accent);

  z-index: -1;

  border-radius: 50% 50% 0 0;

  transition: inset-block-start 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-services__btn:hover {

  color: var(--cpf-color-dark) !important;

  border-color: var(--cpf-color-accent) !important;

  transform: translateY(-5px) !important;

  box-shadow: 0 15px 30px rgba(235, 203, 52, 0.25) !important;

}



.cpf-services__btn:hover::after {

  inset-block-start: 0;

  border-radius: 0;

}



/* 6. Advanced Category Pill Easing */

/* Pills pop in rapidly right after the parent grid lands */

.cpf-services__item.is-active .cpf-services__cat-list li {

  opacity: 0;

  animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}



.cpf-services__cat-list li:nth-child(1) {

  animation-delay: 0.30s !important;

}



.cpf-services__cat-list li:nth-child(2) {

  animation-delay: 0.35s !important;

}



.cpf-services__cat-list li:nth-child(3) {

  animation-delay: 0.40s !important;

}



.cpf-services__cat-list li:nth-child(4) {

  animation-delay: 0.45s !important;

}



.cpf-services__cat-list li:nth-child(5) {

  animation-delay: 0.50s !important;

}



.cpf-services__cat-list li:nth-child(6) {

  animation-delay: 0.55s !important;

}



.cpf-services__cat-list li:nth-child(7) {

  animation-delay: 0.60s !important;

}



.cpf-services__cat-list li:nth-child(8) {

  animation-delay: 0.65s !important;

}



@keyframes popInPill {

  from {

    opacity: 0;

    transform: scale(0.6) translateY(15px);

  }



  to {

    opacity: 1;

    transform: scale(1) translateY(0);

  }

}



/* ==============================================

   HOW WE LAUNCH: KINETIC HOVER SUITE

   ============================================== */



/* Card Lift & Shadow Easing */

.cpf-launch__card {

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;

  position: relative;

  z-index: 1;

}



.cpf-launch__card:hover {

  transform: translateY(-12px) scale(1.02);

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);

  background-color: #ffffff;

}



/* Card Number Morph */

.cpf-launch__card-num {

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;

}



.cpf-launch__card:hover .cpf-launch__card-num {

  transform: scale(1.2) translateX(5px);

  color: var(--cpf-color-accent);

}



/* Image Pulse on Card Hover */

.cpf-launch__card-img {

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-launch__card:hover .cpf-launch__card-img {

  transform: rotate(-5deg) scale(1.1);

}



/* Video Play Button Magnetism & Pulse */

.cpf-launch__play-btn {

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform;

}



.cpf-launch__play-btn:hover {

  transform: scale(1.1);

}



.cpf-launch__play-circle {

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 0 0 0 rgba(235, 203, 52, 0.4);

}



.cpf-launch__play-btn:hover .cpf-launch__play-circle {

  background-color: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  box-shadow: 0 0 0 15px rgba(235, 203, 52, 0);

  animation: pulseShadow 1.5s infinite;

}



@keyframes pulseShadow {

  0% {

    box-shadow: 0 0 0 0 rgba(235, 203, 52, 0.4);

  }



  70% {

    box-shadow: 0 0 0 20px rgba(235, 203, 52, 0);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(235, 203, 52, 0);

  }

}



/* Video Cover Zoom */

.cpf-launch__video-cover {

  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s ease;

}



.cpf-launch__media:hover .cpf-launch__video-cover {

  transform: scale(1.08);

  filter: brightness(0.7) blur(2px);

}



/* ==============================================

   GLOBAL SMOOTHNESS & TRANSITION DEFAULTS

   ============================================== */



/* Ensure all interactive elements have a baseline ease */

a,

button,

input,

.cpf-nav__link,

.cpf-footer__social-link {

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Global text selection color matching theme */

::selection {

  background: var(--cpf-color-accent);

  color: #000;

}



/* ==============================================

   SECTION: FAQ (STARK DARK EDITORIAL)

   ============================================== */

.cpf-faq {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  padding-block: clamp(8rem, 12vw, 15rem);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

}



.cpf-faq__container {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.cpf-faq__grid {

  display: grid;

  grid-template-columns: 1fr 1.25fr;

  gap: clamp(4rem, 8vw, 10rem);

  align-items: start;

}



.cpf-faq__heading {

  font-family: var(--cpf-font-display);

  font-size: clamp(6rem, 15vw, 12rem);

  font-weight: 500;

  line-height: 0.8;

  letter-spacing: -0.06em;

  margin-block-end: 2.5rem;

}



.cpf-faq__heading .dot {

  color: var(--cpf-color-accent);

}



.cpf-faq__sub-wrap {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

}



.cpf-faq__subtitle {

  font-family: var(--cpf-font-body);

  font-size: clamp(1rem, 1.5vw, 1.25rem);

  line-height: 1.5;

  opacity: 0.5;

  max-width: 320px;

}



.cpf-faq__editorial-plus {

  font-size: 2.5rem;

  opacity: 0.2;

  font-weight: 200;

}



.cpf-faq__accordion {

  display: flex;

  flex-direction: column;

}



.cpf-faq__item {

  border-block-start: 1px solid rgba(255, 255, 255, 0.1);

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-faq__item:last-child {

  border-block-end: 1px solid rgba(255, 255, 255, 0.1);

}



.cpf-faq__trigger {

  width: 100%;

  background: transparent;

  border: none;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-block: clamp(2rem, 4vw, 3rem);

  cursor: pointer;

  color: var(--cpf-color-white);

  text-align: left;

  transition: padding-inline 0.4s var(--cpf-ease);

}



.cpf-faq__item:hover .cpf-faq__trigger {

  padding-inline: 1.5rem 0;

}



.cpf-faq__question {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.2rem, 2.5vw, 1.75rem);

  font-weight: 500;

  letter-spacing: -0.02em;

}



.cpf-faq__icon-wrap {

  width: 32px;

  height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0.4;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;

}



.cpf-faq__icon-plus {

  position: relative;

  width: 16px;

  height: 16px;

}



.cpf-faq__icon-plus::before,

.cpf-faq__icon-plus::after {

  content: '';

  position: absolute;

  background-color: currentColor;

  inset: 50% 0 0 50%;

  transform: translate(-50%, -50%);

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-faq__icon-plus::before {

  width: 100%;

  height: 1.5px;

}



.cpf-faq__icon-plus::after {

  width: 1.5px;

  height: 100%;

}



.cpf-faq__item.is-active .cpf-faq__icon-wrap {

  transform: rotate(45deg);

  opacity: 1;

  color: var(--cpf-color-accent);

}



.cpf-faq__panel {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-faq__item.is-active .cpf-faq__panel {

  grid-template-rows: 1fr;

}



.cpf-faq__content {

  overflow: hidden;

}



.cpf-faq__content p {

  padding-block-end: 3rem;

  font-family: var(--cpf-font-body);

  font-size: 1.05rem;

  line-height: 1.7;

  opacity: 0.6;

  max-width: 600px;

}



@media (max-width: 991px) {

  .cpf-faq__grid {

    grid-template-columns: 1fr;

    gap: 4rem;

  }

}



/* ==============================================

   PRICING SMOOTHNESS OVERRIDES

   ============================================== */

[data-pricing-amount],

[data-pricing-period] {

  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-pricing__toggle-btn.is-active {

  background-color: var(--cpf-color-accent) !important;

  color: var(--cpf-color-dark) !important;

  box-shadow: 0 4px 15px rgba(235, 203, 52, 0.25);

}



/* ==============================================

   SECTION: Insights (Stark Dark Grid)

   ============================================== */

.cpf-insights {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  padding-block: clamp(6rem, 10vw, 12rem);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  overflow: hidden;

}



.cpf-insights__container {

  max-inline-size: 1440px;

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.cpf-insights__header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-block-end: clamp(3rem, 6vw, 5rem);

  gap: 2rem;

}



.cpf-insights__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(2.5rem, 6vw, 5.5rem);

  font-weight: 500;

  line-height: 1.05;

  letter-spacing: -0.04em;

  color: var(--cpf-color-white);

}



.cpf-insights__title-gray {

  color: rgba(255, 255, 255, 0.3);

}



.cpf-insights__meta {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 1.5rem;

  max-inline-size: 320px;

  text-align: right;

  padding-block-start: 1rem;

}



.cpf-insights__desc {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  line-height: 1.5;

  opacity: 0.5;

}



.cpf-insights__all-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  padding-block: 0.6rem;

  padding-inline: 1.25rem;

  background-color: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 600;

  border-radius: 50px;

  transition: transform 0.4s var(--cpf-ease), background-color 0.4s var(--cpf-ease);

}



.cpf-insights__all-btn:hover {

  background-color: var(--cpf-color-accent);

  transform: translateY(-3px);

}



.cpf-insights__all-dot {

  inline-size: 8px;

  block-size: 8px;

  background-color: var(--cpf-color-dark);

  border-radius: 50%;

}



/* Grid Layout */

.cpf-insights__grid {

  display: grid;

  grid-template-columns: 1fr 1fr 2fr;

  gap: clamp(1rem, 1.5vw, 1.5rem);

}



/* Base Card */

.cpf-insights__card {

  position: relative;

  background-color: #151515;

  border-radius: var(--cpf-radius-lg);

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  border: 1px solid rgba(255, 255, 255, 0.03);

}



.cpf-insights__card:hover {

  transform: translateY(-10px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

  border-color: rgba(255, 255, 255, 0.1);

}



/* Small Card Spacing */

.cpf-insights__card--small {

  min-block-size: 440px;

  justify-content: space-between;

}



.cpf-insights__card-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}



.cpf-insights__card-avatar {

  inline-size: 80px;

  block-size: 100px;

  border-radius: var(--cpf-radius-md);

  overflow: hidden;

  margin: 0;

}



.cpf-insights__card-avatar img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

}



.cpf-insights__card-plus {

  font-family: var(--cpf-font-body);

  font-size: 1.5rem;

  font-weight: 300;

  opacity: 0.6;

}



.cpf-insights__card-content {

  margin-block-start: 2rem;

}



.cpf-insights__card-date {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  color: rgba(255, 255, 255, 0.4);

  margin-block-end: 1rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.cpf-insights__card-title {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.1rem, 1.5vw, 1.35rem);

  font-weight: 600;

  line-height: 1.3;

  margin-block-end: 1rem;

}



.cpf-insights__card-text {

  font-family: var(--cpf-font-body);

  font-size: 0.875rem;

  line-height: 1.6;

  opacity: 0.5;

}



/* Large Card */

.cpf-insights__card--large {

  grid-column: span 1;

  padding: 0;

  overflow: hidden;

}



@media (min-width: 1024px) {

  .cpf-insights__card--large {

    grid-column: 3;

  }

}



.cpf-insights__card-bg {

  position: absolute;

  inset: 0;

  margin: 0;

  z-index: 1;

}



.cpf-insights__card-bg img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.cpf-insights__card:hover .cpf-insights__card-bg img {

  transform: scale(1.08);

}



.cpf-insights__card-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, transparent 60%);

  z-index: 2;

}



.cpf-insights__card--large .cpf-insights__card-plus {

  position: absolute;

  inset-block-start: 1.5rem;

  inset-inline-end: 1.5rem;

  z-index: 3;

  color: var(--cpf-color-white);

}



.cpf-insights__card-brand {

  position: absolute;

  inset-block-start: 1.5rem;

  inset-inline-start: 1.5rem;

  z-index: 3;

  font-family: var(--cpf-font-body);

  font-size: 1.25rem;

  font-weight: 700;

  letter-spacing: -0.02em;

}



.cpf-insights__card--large .cpf-insights__card-content {

  position: absolute;

  inset-block-end: 2rem;

  inset-inline-start: 2rem;

  z-index: 3;

  margin: 0;

}



.cpf-insights__card-title-lg {

  font-family: var(--cpf-font-display);

  font-size: clamp(2rem, 4vw, 4rem);

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -0.04em;

  color: var(--cpf-color-white);

}



/* Responsiveness */

@media (max-width: 1023px) {

  .cpf-insights__grid {

    grid-template-columns: 1fr 1fr;

  }



  .cpf-insights__card--large {

    grid-column: span 2;

    min-block-size: 400px;

  }

}



@media (max-width: 767px) {

  .cpf-insights__header {

    flex-direction: column;

    align-items: flex-start;

  }



  .cpf-insights__meta {

    align-items: flex-start;

    text-align: left;

    max-inline-size: 100%;

  }



  .cpf-insights__grid {

    grid-template-columns: 1fr;

  }



  .cpf-insights__card--large {

    grid-column: span 1;

  }

}







/* =============================================

   ZYLYF THEME OVERRIDE: YELLOW BOTTOM FOOTER

   ============================================= */

.cpf-footer__bottom {

  background-color: var(--cpf-color-accent) !important;

  border-block-start: none !important;

}



.cpf-footer__bottom-container {

  color: var(--cpf-color-dark) !important;

}



.cpf-footer__legal a {

  color: var(--cpf-color-dark) !important;

  text-decoration: none;

  transition: opacity var(--cpf-transition);

}



.cpf-footer__legal a:hover {

  opacity: 0.6;

}



.cpf-footer__credits-sep {

  opacity: 0.3;

}



/* REFINED FOOTER TEXT OVERRIDES */

.cpf-footer__copy,

.cpf-footer__credits,

.cpf-footer__credits span,

.cpf-footer__legal a {

  color: var(--cpf-color-dark) !important;

}



.cpf-footer__legal a:hover {

  opacity: 0.6;

  color: var(--cpf-color-dark) !important;

}



/* ENSURE FLUSH YELLOW BAR */

.cpf-footer__bottom {

  margin-block-start: 0 !important;

  padding-block: 1.5rem !important;

  /* Slightly tighter for premium look */

}



/* VISIBILITY & ACCESSIBILITY FIX: FOOTER GLASS OVERRIDE */

.cpf-footer__bottom {

  padding-block: clamp(4rem, 10vw, 6rem) clamp(6rem, 15vw, 8rem) !important;

  /* Extreme padding to push content above fixed overlays */

  position: relative;

  z-index: 1010 !important;

  /* Ensure it sits above the fixed .cpf-viewport-glass (z-index 1000) */

}



.cpf-footer__bottom-container {

  font-size: 0.9rem !important;

  /* Upscaled typography for footer links */

  font-weight: 500 !important;

  letter-spacing: -0.01em !important;

}



.cpf-footer__legal a,

.cpf-footer__credits span,

.cpf-footer__copy {

  color: var(--cpf-color-dark) !important;

  opacity: 1 !important;

  /* Remove any dimming/opacity that fights the glass effect */

}



/* =============================================

   ULTRA-PREMIUM FOOTER REFINEMENT

   SHOT STYLE: Minimalist Editorial

   ============================================= */

.cpf-footer__bottom {

  padding-block: clamp(1rem, 2vw, 1.25rem) !important;

  background-color: var(--cpf-color-accent) !important;

}



.cpf-footer__bottom-container {

  display: grid !important;

  grid-template-columns: 1fr auto 1fr !important;

  align-items: center !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  /* Smaller, precise font size */

  text-transform: uppercase !important;

  letter-spacing: 0.12em !important;

  font-weight: 600 !important;

}



.cpf-footer__copy {

  justify-self: start !important;

  margin: 0 !important;

}



.cpf-footer__legal {

  justify-self: center !important;

  display: flex !important;

  gap: 2rem !important;

  margin: 0 !important;

}



.cpf-footer__credits {

  justify-self: end !important;

  margin: 0 !important;

}



/* Removal of default decorations for a cleaner look */

.cpf-footer__legal a {

  text-decoration: none !important;

  position: relative;

}



.cpf-footer__legal a::after {

  content: '';

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 0;

  height: 1px;

  background: var(--cpf-color-dark);

  transition: width 0.3s ease;

}



.cpf-footer__legal a:hover::after {

  width: 100%;

}



@media (max-width: 768px) {

  .cpf-footer__bottom-container {

    grid-template-columns: 1fr !important;

    gap: 1.5rem !important;

    text-align: center !important;

    padding-block: 2rem !important;

  }



  .cpf-footer__copy,

  .cpf-footer__legal,

  .cpf-footer__credits {

    justify-self: center !important;

  }

}



/* TECHNICAL ACCENT */

.cpf-footer__bottom {

  border-top: 1px solid rgba(10, 10, 10, 0.1) !important;

}



/* =============================================

   BOXED FLOATING FOOTER (ZENITH REFINEMENT)

   ============================================= */

.cpf-footer__bottom {

  /* 1. Boxed Layout */

  max-width: var(--cpf-nav-max-w) !important;

  width: calc(100% - (var(--cpf-nav-px) * 2)) !important;

  margin-inline: auto !important;

  margin-block: clamp(3rem, 6vw, 5rem) !important;

  border-radius: var(--cpf-radius-lg) !important;



  /* 2. Visual Polish */

  background-color: var(--cpf-color-accent) !important;

  border: none !important;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;

  overflow: hidden;

}



.cpf-footer__bottom-container {

  padding-inline: 3rem !important;

  /* More breathing room for boxed look */

}



/* 3. Scrubbing "Stupid" Borders/Dividers */

.cpf-footer__legal,

.cpf-footer__legal::before,

.cpf-footer__legal::after,

.cpf-footer__legal a,

.cpf-footer__legal a::before,

.cpf-footer__legal a::after {

  border: none !important;

  text-decoration: none !important;

  background: none !important;

}



/* Cleaner Hover (no underlines/lines) */

.cpf-footer__legal a:hover {

  opacity: 0.5 !important;

  transform: translateY(-1px);

  transition: all var(--cpf-transition);

}



@media (max-width: 991px) {

  .cpf-footer__bottom {

    width: calc(100% - 2rem) !important;

    margin-block: 2rem !important;

  }



  .cpf-footer__bottom-container {

    padding-inline: 1.5rem !important;

  }

}



/* =============================================

   ALIGNING FOOTER TO MAIN WRAPPER (1440PX)

   ============================================= */

.cpf-footer__bottom {

  max-width: 1440px !important;

  /* Sync with .cpf-footer__container */

  width: calc(100% - (var(--cpf-nav-px) * 2)) !important;

  margin-inline: auto !important;

}



.cpf-footer__bottom-container {

  padding-inline: var(--cpf-nav-px) !important;

  /* Align inner content to site grid padding */

}



/* ==========================================================================

   UPGRADE: Professional Project Filter Bar

   ========================================================================== */

.cpf-projects__filter-bar {

  display: flex;

  gap: clamp(10px, 1vw, 20px);

  flex-wrap: wrap;

  justify-content: flex-end;

}



.cpf-filter-btn {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--cpf-color-text-dim);

  padding: 10px 24px;

  border-radius: 100px;

  font-family: var(--cpf-font-main);

  font-size: 14px;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.4s var(--cpf-ease-main);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.cpf-filter-btn:hover {

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.3);

  color: var(--cpf-color-text);

  transform: translateY(-2px);

}



.cpf-filter-btn.is-active {

  background: var(--cpf-color-accent);

  border-color: var(--cpf-color-accent);

  color: #000;

  box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);

}



/* ==========================================================================

   FIX: Project Card Logo Clipping

   ========================================================================== */

.cpf-projects__card-logo {

  max-inline-size: 80% !important;

  max-block-size: 45% !important;

  inline-size: auto !important;

  block-size: auto !important;

  object-fit: contain !important;

  padding: 15px !important;

}



.cpf-projects__card-overlay {

  padding: 20px;

  overflow: hidden;

}



/* ==========================================================================

   ADJUSTMENT: Portfolio Logos (50% Smaller)

   ========================================================================== */

.cpf-projects__card-logo {

  max-inline-size: 40% !important;

  /* Reduced from 80% */

  max-block-size: 22% !important;

  /* Reduced from 45% */

}



/* =============================================

   SECTION: Hero Services (Enhanced)

   ============================================= */

.tft-services {

  position: absolute;

  inset-block-start: calc(var(--cpf-nav-height) + clamp(3rem, 6vw, 5rem));

  inset-inline-end: clamp(1.5rem, 2.5vw, 2.25rem);

  z-index: var(--cpf-z-2);

}



.tft-services__list {

  display: flex;

  flex-direction: column;

  gap: clamp(1rem, 1.5vw, 1.25rem);

}



.tft-services__item {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 4px;

  cursor: pointer;

  opacity: 0;

  transform: translateX(20px);

  animation: tftFadeInLeft 0.8s var(--cpf-ease) forwards;

  animation-delay: calc(var(--tft-index) * 0.1s + 0.5s);

  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);

  position: relative;

}



.tft-services__item:hover {

  transform: translateX(-8px);

}



.tft-services__meta {

  display: flex;

  align-items: center;

  gap: 8px;

  opacity: 0.5;

  transition: opacity 0.3s var(--cpf-ease);

}



.tft-services__item:hover .tft-services__meta {

  opacity: 1;

}



.tft-services__num {

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  letter-spacing: 0.05em;

  color: var(--cpf-color-white);

  padding-block: 2px;

  padding-inline: 4px;

  border-radius: 2px;

  transition: background 0.3s var(--cpf-ease);

}



.tft-services__item:hover .tft-services__num {

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(4px);

}



.tft-services__dot {

  inline-size: 4px;

  block-size: 4px;

  background-color: var(--cpf-color-white);

  border-radius: 50%;

  box-shadow: 0 0 8px rgba(255, 255, 255, 0);

  transition: box-shadow 0.3s var(--cpf-ease), transform 0.3s var(--cpf-ease);

}



.tft-services__item:hover .tft-services__dot {

  transform: scale(1.5);

  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);

}



.tft-services__title {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  color: var(--cpf-color-white);

  letter-spacing: var(--cpf-ls-tight);

  line-height: 1.2;

  opacity: 0.6;

  transition: opacity 0.3s var(--cpf-ease), transform 0.3s var(--cpf-ease);

  text-align: right;

}



.tft-services__item:hover .tft-services__title {

  opacity: 1;

}



@keyframes tftFadeInLeft {

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



/* Responsive: Hide on mobile */

@media (max-width: 809.98px) {

  .tft-services {

    display: none;

  }

}



/* =============================================

   SECTION: Hero Services (Elite V2 Upgrade)

   ============================================= */

.tft-services {

  perspective: 1200px;

}



.tft-services__item {

  transform-style: preserve-3d;

  padding: 0.8rem 1.25rem;

  border-radius: var(--cpf-radius-md);

  background: rgba(255, 255, 255, 0);

  transition: background 0.4s var(--cpf-ease), transform 0.1s ease-out;

}



.tft-services__item:hover {

  background: rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(10px);

}



/* Image Preview Projection */

.tft-services__preview {

  position: absolute;

  inset-inline-start: -140px;

  inset-block-start: 50%;

  transform: translateY(-50%) rotateY(45deg) scale(0.8);

  inline-size: 110px;

  block-size: 70px;

  border-radius: var(--cpf-radius-sm);

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.5s var(--cpf-ease), transform 0.5s var(--cpf-ease);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

  z-index: -1;

}



.tft-services__item:hover .tft-services__preview {

  opacity: 0.6;

  transform: translateY(-50%) rotateY(0deg) scale(1);

}



.tft-services__preview-img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  filter: grayscale(100%) contrast(1.2);

  transition: filter 0.5s var(--cpf-ease);

}



.tft-services__item:hover .tft-services__preview-img {

  filter: grayscale(0%) contrast(1);

}



/* Data Indicator */

.tft-services__indicator {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.tft-services__pulse {

  position: absolute;

  inline-size: 100%;

  block-size: 100%;

  background-color: var(--cpf-color-white);

  border-radius: 50%;

  opacity: 0;

  transform: scale(1);

}



.tft-services__item:hover .tft-services__pulse {

  animation: tftPulse 1.5s infinite var(--cpf-ease);

}



@keyframes tftPulse {

  0% {

    transform: scale(1);

    opacity: 0.4;

  }



  100% {

    transform: scale(4);

    opacity: 0;

  }

}



/* Glass Layer */

.tft-services__glass {

  position: absolute;

  inset: 0;

  border: 1px solid rgba(255, 255, 255, 0);

  border-radius: inherit;

  pointer-events: none;

  transition: border 0.4s var(--cpf-ease);

}



.tft-services__item:hover .tft-services__glass {

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);

}



/* =============================================

   SECTION: Hero Services (Elite V2 - Polish Up)

   ============================================= */

.tft-services__num {

  position: relative;

  transition: color 0.3s var(--cpf-ease);

}



.tft-services__item:hover .tft-services__num {

  color: #fff;

  text-shadow:

    2px 0 0 rgba(255, 0, 0, 0.5),

    -2px 0 0 rgba(0, 255, 255, 0.5);

  animation: tftChrono 0.2s infinite alternate;

}



@keyframes tftChrono {

  0% {

    transform: translate(0);

    text-shadow: 1px 0 0 rgba(255, 0, 0, 0.5), -1px 0 0 rgba(0, 255, 255, 0.5);

  }



  100% {

    transform: translate(-1px, 1px);

    text-shadow: -1px 0 0 rgba(255, 0, 0, 0.5), 1px 0 0 rgba(0, 255, 255, 0.5);

  }

}



.tft-services__item::before {

  content: "";

  position: absolute;

  inset-inline-start: -5px;

  inset-block: 10%;

  inline-size: 2px;

  background: var(--cpf-color-white);

  transform: scaleY(0);

  transition: transform 0.4s var(--cpf-ease);

  transform-origin: bottom;

}



.tft-services__item:hover::before {

  transform: scaleY(1);

  transform-origin: top;

}



/* =============================================

   SECTION: Hero Services (Master V3 Final Polish)

   ============================================= */

.tft-services__tag {

  font-family: var(--cpf-font-mono);

  font-size: 8px;

  color: rgba(255, 255, 255, 0.4);

  letter-spacing: 0.15em;

  margin-inline-end: auto;

  opacity: 0;

  transform: translateX(-10px);

  transition: opacity 0.4s var(--cpf-ease), transform 0.4s var(--cpf-ease);

}



.tft-services__item:hover .tft-services__tag {

  opacity: 1;

  transform: translateX(0);

}



/* Data Connector Line */

.tft-services__line {

  position: absolute;

  inset-inline-start: -80px;

  inset-block-start: 50%;

  inline-size: 80px;

  block-size: 1px;

  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);

  opacity: 0;

  transform: scaleX(0);

  transform-origin: left;

  transition: opacity 0.6s var(--cpf-ease), transform 0.6s var(--cpf-ease);

  pointer-events: none;

}



.tft-services__item:hover .tft-services__line {

  opacity: 1;

  transform: scaleX(1);

  animation: tftLinePulse 2s infinite var(--cpf-ease);

}



@keyframes tftLinePulse {



  0%,

  100% {

    opacity: 0.3;

  }



  50% {

    opacity: 0.7;

  }

}



/* Surface Glare Shimmer */

.tft-services__glare {

  position: absolute;

  inset: 0;

  background: linear-gradient(110deg,

      transparent 0%,

      rgba(255, 255, 255, 0) 40%,

      rgba(255, 255, 255, 0.08) 50%,

      rgba(255, 255, 255, 0) 60%,

      transparent 100%);

  background-size: 200% 100%;

  border-radius: inherit;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.4s var(--cpf-ease);

}



.tft-services__item:hover .tft-services__glare {

  opacity: 1;

  animation: tftGlareSweep 1.5s var(--cpf-ease) forwards;

}



@keyframes tftGlareSweep {

  0% {

    background-position: -200% 0;

  }



  100% {

    background-position: 200% 0;

  }

}



/* Master Depth Tweak */

.tft-services__item:hover {

  box-shadow:

    0 20px 40px rgba(0, 0, 0, 0.4),

    inset 0 0 0 1px rgba(255, 255, 255, 0.05);

}



/* =============================================

   SECTION: Hero Services (Editorial Boutique Upgrade)

   ============================================= */

.tft-editorial-services {

  position: absolute;

  inset-block-start: calc(var(--cpf-nav-height) + clamp(3rem, 6vw, 5rem));

  inset-inline-end: clamp(1.5rem, 2.5vw, 2.25rem);

  z-index: var(--cpf-z-2);

}



.tft-editorial-services__list {

  display: flex;

  flex-direction: column;

  gap: clamp(1.5rem, 2.5vw, 2.25rem);

}



.tft-editorial-services__item {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  padding-block: 0.5rem;

  cursor: pointer;

  transition: opacity 0.4s var(--cpf-ease);

}



.tft-editorial-services__preview {

  inline-size: 50px;

  block-size: 50px;

  border-radius: 50%;

  overflow: hidden;

  opacity: 0;

  transform: scale(0.8) rotate(-10deg);

  transition: opacity 0.5s var(--cpf-ease), transform 0.5s var(--cpf-ease);

}



.tft-editorial-services__item:hover .tft-editorial-services__preview {

  opacity: 1;

  transform: scale(1) rotate(0deg);

}



.tft-editorial-services__thumb {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

}



.tft-editorial-services__content {

  display: flex;

  flex-direction: column;

  gap: 4px;

  text-align: right;

}



.tft-editorial-services__header {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.45);

  transition: color 0.3s var(--cpf-ease);

}



.tft-editorial-services__item:hover .tft-editorial-services__header {

  color: var(--cpf-color-white);

}



.tft-editorial-services__title {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  color: var(--cpf-color-white);

  letter-spacing: var(--cpf-ls-tight);

  opacity: 0.6;

  transition: opacity 0.3s var(--cpf-ease), transform 0.3s var(--cpf-ease);

}



.tft-editorial-services__item:hover .tft-editorial-services__title {

  opacity: 1;

  transform: translateX(-5px);

}



/* RESPONSIVE RESET */

@media (max-width: 809.98px) {

  .tft-editorial-services {

    display: none;

  }

}



/* =============================================

   SECTION: Hero Services (Editorial Polish V2)

   ============================================= */

.tft-editorial-services__num {

  font-family: var(--cpf-font-body);

  font-weight: 200;

  font-size: 0.9rem;

  color: rgba(255, 255, 255, 0.2);

  transition: color 0.4s var(--cpf-ease), transform 0.4s var(--cpf-ease);

}



.tft-editorial-services__item:hover .tft-editorial-services__num {

  color: var(--cpf-color-accent);

  transform: scale(1.1);

}



/* =============================================

   SECTION: Hero Services (Alignment Correction)

   ============================================= */

.tft-editorial-services__item {

  position: relative;

  justify-content: flex-end;

  padding-inline: 0;

  margin-inline-start: auto;

}



.tft-editorial-services__preview {

  position: absolute;

  inset-inline-end: 100%;

  margin-inline-end: 1.5rem;

  inset-block-start: 50%;

  transform: translateY(-50%) scale(0.8);

}



.tft-editorial-services__item:hover .tft-editorial-services__preview {

  transform: translateY(-50%) scale(1);

}



.tft-editorial-services__content {

  width: auto;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

}



.tft-editorial-services__header {

  justify-content: flex-end;

  width: 100%;

}



/* =============================================

   SECTION: Hero Services (Master V4 Final Polish)

   ============================================= */

.tft-editorial-services__divider {

  inline-size: 100%;

  block-size: 1px;

  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);

  margin-block: 0.5rem;

}



.tft-editorial-services__item:hover .tft-editorial-services__header {

  letter-spacing: 0.15em;

}



.tft-editorial-services__bg-num {

  position: absolute;

  inset-inline-end: 0;

  inset-block-start: 50%;

  transform: translateY(-50%);

  font-family: var(--cpf-font-body);

  font-size: 5rem;

  font-weight: 900;

  color: rgba(255, 255, 255, 0.03);

  pointer-events: none;

  z-index: -1;

  transition: color 0.4s var(--cpf-ease), transform 0.4s var(--cpf-ease);

}



.tft-editorial-services__item:hover .tft-editorial-services__bg-num {

  color: rgba(255, 255, 255, 0.05);

  transform: translateY(-50%) translateX(-10px) scale(1.1);

}



.tft-editorial-services__title {

  position: relative;

  display: inline-block;

}



.tft-editorial-services__title::after {

  content: "";

  position: absolute;

  inset-block-end: -4px;

  inset-inline-end: 0;

  inline-size: 0;

  block-size: 1px;

  background: var(--cpf-color-white);

  transition: inline-size 0.4s var(--cpf-ease);

}



.tft-editorial-services__item:hover .tft-editorial-services__title::after {

  inline-size: 40%;

}



.tft-editorial-services__preview {

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

  border: 1px solid rgba(255, 255, 255, 0.05);

}



/* =============================================

   SECTION: The Team

   SHOT REF: User Provided Image

   STATUS: WP-Ready (Ticker Edition)

   ============================================= */

.cpf-team {

  position: relative;

  background-color: var(--cpf-color-dark);

  padding-block: clamp(4rem, 8vw, 10rem);

  overflow: hidden;

}



/* Ticker Wrap - Handles the fading mask */

.cpf-team__ticker-wrap {

  position: relative;

  inline-size: 100%;

  pointer-events: none;

  mask-image: linear-gradient(to right,

      transparent,

      black 15%,

      black 85%,

      transparent);

  -webkit-mask-image: linear-gradient(to right,

      transparent,

      black 15%,

      black 85%,

      transparent);

}



.cpf-team__track {

  display: flex;

  inline-size: max-content;

  /* Critical for seamless loop */

  animation: cpf-ticker 60s linear infinite;

  /* Slower, more cinematic speed */

  pointer-events: auto;

}



/* Pause on hover for premium feel */

.cpf-team__track:hover {

  animation-play-state: paused;

}



.cpf-team__list {

  display: flex;

  gap: clamp(1rem, 2vw, 2.5rem);

  padding-inline-end: clamp(1rem, 2vw, 2.5rem);

  /* Match gap */

}



@keyframes cpf-ticker {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }



  /* Exact half for seamless */

}



/* Individual Member Photo */

.cpf-team__member {

  flex: 0 0 clamp(280px, 40vw, 450px);

  position: relative;

  overflow: hidden;

}



.cpf-team__photo {

  aspect-ratio: 4 / 5;

  inline-size: 100%;

  margin: 0;

  overflow: hidden;

  border-right: 1px solid rgba(255, 255, 255, 0.05);

  /* Slight separation as in image */

}



.cpf-team__photo img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  transition: transform 0.8s var(--cpf-ease);

}



.cpf-team__member:hover .cpf-team__photo img {

  transform: scale(1.05);

}



/* Centered Overlay Content */

.cpf-team__overlay {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  pointer-events: none;

  z-index: 2;

}



.cpf-team__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 12vw, 12rem);

  font-weight: 500;

  color: var(--cpf-color-white);

  letter-spacing: -0.04em;

  margin: 0;

  line-height: 0.9;

  text-align: center;

  text-transform: capitalize;

  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

  /* Boosted for ticker background */

}



/* Glassmorphism Button */

.cpf-team__cta-wrap {

  margin-block-start: clamp(-1rem, -1.5vw, -3rem);

  /* Overlap slightly with text as in image */

  pointer-events: auto;

}



.cpf-team__btn {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(12px);

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

  border: 1px solid rgba(255, 255, 255, 0.1);

  padding-block: 0.75rem;

  padding-inline: 1.5rem 1rem;

  border-radius: 100px;

  color: var(--cpf-color-white);

  text-decoration: none;

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-xs);

  font-weight: 600;

  letter-spacing: 0.05em;

  transition: all 0.3s var(--cpf-ease);

}



.cpf-team__btn:hover {

  background: rgba(255, 255, 255, 0.12);

  transform: translateY(-2px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



.cpf-team__btn-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  inline-size: 2rem;

  block-size: 2rem;

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  border-radius: 50%;

}



/* Responsive adjustments */

@media (max-width: 809.98px) {

  .cpf-team {

    padding-block: 4rem;

  }



  .cpf-team__member {

    flex: 0 0 70vw;

  }



  .cpf-team__title {

    font-size: 20vw;

  }



  .cpf-team__cta-wrap {

    margin-block-start: 1rem;

  }



  .cpf-team__track {

    animation-duration: 35s;

    /* Scale speed for mobile */

  }

}



/* =============================================

   SECTION: Pricing V2 (Built to Scale)

   STATUS: WP-Ready | Premium Editorial

   ============================================= */

.cpf-pricing-v2 {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 12vw, 12rem);

  position: relative;

  overflow: hidden;

}



.cpf-pricing-v2__container {

  max-width: var(--cpf-container-max);

  margin-inline: auto;

  padding-inline: var(--cpf-pad-gutter);

}



.cpf-pricing-v2__header {

  text-align: center;

  max-width: 800px;

  margin-inline: auto;

  margin-block-end: clamp(4rem, 8vw, 6rem);

}



.cpf-pricing-v2__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(4rem, 10vw, 8rem);

  font-weight: 500;

  color: var(--cpf-color-white);

  letter-spacing: -0.04em;

  line-height: 0.9;

  margin-block-end: 2rem;

}



.cpf-pricing-v2__desc {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-base);

  color: rgba(255, 255, 255, 0.6);

  line-height: 1.6;

}



.cpf-pricing-v2__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

  align-items: start;

}



.cpf-pricing-v2__card {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  padding: clamp(2rem, 4vw, 3.5rem);

  border-radius: 24px;

  position: relative;

  transition: transform 0.4s var(--cpf-ease), border-color 0.4s var(--cpf-ease), box-shadow 0.4s var(--cpf-ease);

  display: flex;

  flex-direction: column;

}



.cpf-pricing-v2__card:hover {

  border-color: rgba(255, 255, 255, 0.15);

  transform: translateY(-8px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

}



.cpf-pricing-v2__card--scale {

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.12);

}



.cpf-pricing-v2__badge {

  position: absolute;

  inset-block-start: 1.5rem;

  inset-inline-end: 1.5rem;

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  padding: 0.4rem 0.9rem;

  border-radius: 100px;

  font-family: var(--cpf-font-body);

  font-size: 0.65rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.cpf-pricing-v2__card-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(2rem, 4vw, 3.2rem);

  color: var(--cpf-color-white);

  margin-block-end: 0.5rem;

  font-weight: 500;

}



.cpf-pricing-v2__card-sub {

  font-family: var(--cpf-font-body);

  font-size: 0.95rem;

  color: rgba(255, 255, 255, 0.45);

  margin-block-end: 2.5rem;

  min-height: 2.8rem;

  line-height: 1.4;

}



.cpf-pricing-v2__toggle {

  display: inline-flex;

  background: rgba(0, 0, 0, 0.4);

  padding: 4px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  margin-block-end: 3rem;

  align-self: flex-start;

}



.cpf-pricing-v2__toggle-btn {

  padding: 0.6rem 1.4rem;

  border-radius: 8px;

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.4);

  cursor: pointer;

  transition: all 0.3s var(--cpf-ease);

  background: transparent;

  border: none;

}



.cpf-pricing-v2__toggle-btn.is-active {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

}



.cpf-pricing-v2__price-block {

  margin-block-end: 2.5rem;

}



.cpf-pricing-v2__price {

  font-family: var(--cpf-font-display);

  font-size: clamp(3.5rem, 5vw, 4.5rem);

  color: var(--cpf-color-white);

  letter-spacing: -0.02em;

  font-weight: 500;

  line-height: 1;

}



.cpf-pricing-v2__price span {

  font-family: var(--cpf-font-body);

  font-size: 1rem;

  color: rgba(255, 255, 255, 0.35);

  font-weight: 400;

  margin-inline-start: 0.5rem;

}



.cpf-pricing-v2__price-sub {

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  color: rgba(255, 255, 255, 0.3);

  margin-block-start: 0.5rem;

}



.cpf-pricing-v2__btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  inline-size: 100%;

  padding-block: 1.25rem;

  border-radius: 14px;

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.15);

  color: var(--cpf-color-white);

  text-decoration: none;

  font-family: var(--cpf-font-body);

  font-weight: 600;

  margin-block-end: 3.5rem;

  transition: all 0.3s var(--cpf-ease);

}



.cpf-pricing-v2__btn span {

  font-size: 1.2rem;

  line-height: 1;

}



.cpf-pricing-v2__btn:hover {

  background: rgba(255, 255, 255, 0.05);

  border-color: var(--cpf-color-white);

  transform: scale(1.02);

}



.cpf-pricing-v2__btn--white {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  border-color: var(--cpf-color-white);

}



.cpf-pricing-v2__btn--white:hover {

  background: #f0f0f0;

  transform: scale(1.02);

}



.cpf-pricing-v2__features-title {

  font-family: var(--cpf-font-body);

  font-size: 1.1rem;

  font-weight: 500;

  color: var(--cpf-color-white);

  margin-block-end: 1.8rem;

}



.cpf-pricing-v2__features-list {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.4rem 2rem;

  list-style: none;

  padding: 0;

  margin: 0;

}



.cpf-pricing-v2__features-list li {

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.5);

  line-height: 1.4;

  display: flex;

  gap: 0.6rem;

}



.cpf-pricing-v2__features-list li span {

  color: rgba(255, 255, 255, 0.25);

  font-weight: 400;

}



/* Custom & Manager Col */

.cpf-pricing-v2__col-custom {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

  block-size: 100%;

}



.cpf-pricing-v2__card--custom {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.cpf-pricing-v2__price-label {

  display: block;

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  color: rgba(255, 255, 255, 0.35);

  margin-block-end: 0.7rem;

}



.cpf-pricing-v2__btn-wrap {

  margin-block-start: 2rem;

}



.cpf-pricing-v2__btn-outline {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.9rem 1.8rem;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 12px;

  color: var(--cpf-color-white);

  text-decoration: none;

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  font-weight: 600;

  transition: all 0.3s var(--cpf-ease);

}



.cpf-pricing-v2__btn-outline:hover {

  background: rgba(255, 255, 255, 0.05);

  border-color: var(--cpf-color-white);

}



/* Manager Card */

.cpf-pricing-v2__card--manager {

  padding: clamp(1.8rem, 3vw, 2.8rem);

  background: rgba(255, 255, 255, 0.02);

}



.cpf-pricing-v2__manager-header {

  display: flex;

  align-items: center;

  gap: 1.25rem;

  margin-block-end: 1.8rem;

}



.cpf-pricing-v2__manager-img {

  inline-size: 54px;

  block-size: 54px;

  border-radius: 50%;

  object-fit: cover;

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.cpf-pricing-v2__manager-info span {

  display: block;

}



.cpf-pricing-v2__manager-info .name {

  font-family: var(--cpf-font-body);

  font-weight: 600;

  font-size: 1.1rem;

  color: var(--cpf-color-white);

}



.cpf-pricing-v2__manager-info .role {

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.4);

  margin-block-start: 2px;

}



.cpf-pricing-v2__manager-text {

  font-family: var(--cpf-font-body);

  font-size: 1rem;

  color: rgba(255, 255, 255, 0.55);

  line-height: 1.6;

  margin-block-end: 2.5rem;

}



.cpf-pricing-v2__manager-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-block-start: 1.8rem;

}



.cpf-pricing-v2__slots {

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  color: var(--cpf-color-white);

  display: flex;

  align-items: center;

  gap: 0.75rem;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}



.cpf-pricing-v2__slots .dots {

  color: rgba(255, 255, 255, 0.15);

  font-family: var(--cpf-font-mono);

  font-weight: bold;

}



.cpf-pricing-v2__book-btn {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  padding: 0.75rem 1.5rem;

  border-radius: 10px;

  text-decoration: none;

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  font-weight: 700;

  transition: all 0.3s var(--cpf-ease);

}



.cpf-pricing-v2__book-btn:hover {

  transform: scale(1.05);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

}



/* =============================================

   GLASSMORPHISM FADE (Team Ticker)

   ============================================= */

.cpf-team__ticker-wrap {

  mask-image: none !important;

  /* Disable previous transparency mask */

  -webkit-mask-image: none !important;

}



/* Glass Edges */

.cpf-team__ticker-wrap::before,

.cpf-team__ticker-wrap::after {

  content: "";

  position: absolute;

  inset-block: 0;

  inline-size: 15%;

  z-index: 10;

  pointer-events: none;

  backdrop-filter: blur(12px);

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

}



.cpf-team__ticker-wrap::before {

  inset-inline-start: 0;

  background: linear-gradient(to right, var(--cpf-color-dark) 20%, transparent);

}



.cpf-team__ticker-wrap::after {

  inset-inline-end: 0;

  background: linear-gradient(to left, var(--cpf-color-dark) 20%, transparent);

}



/* Responsive Overrides */

@media (max-width: 1200px) {

  .cpf-pricing-v2__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 809.98px) {

  .cpf-pricing-v2 {

    padding-block: 6rem;

  }



  .cpf-pricing-v2__title {

    font-size: 15vw;

  }



  .cpf-pricing-v2__grid {

    grid-template-columns: 1fr;

    gap: 2rem;

  }



  .cpf-pricing-v2__features-list {

    grid-template-columns: 1fr;

  }



  .cpf-pricing-v2__card {

    padding: 2.5rem;

  }



  .cpf-team__ticker-wrap::before,

  .cpf-team__ticker-wrap::after {

    inline-size: 10%;

  }

}



/* =============================================

   FIX: Fadey Darky Glassmorphism (No Sharp Cutoff)

   ============================================= */

.cpf-team__ticker-wrap::before,

.cpf-team__ticker-wrap::after {

  inline-size: 25% !important;

  /* Deeper fade */

  backdrop-filter: blur(25px) !important;

  -webkit-backdrop-filter: blur(25px) !important;

}



.cpf-team__ticker-wrap::before {

  background: linear-gradient(to right,

      var(--cpf-color-dark) 0%,

      rgba(10, 10, 10, 0.8) 30%,

      transparent 100%) !important;

  mask-image: linear-gradient(to right,

      rgba(0, 0, 0, 1) 0%,

      rgba(0, 0, 0, 0.8) 40%,

      transparent 100%) !important;

  -webkit-mask-image: linear-gradient(to right,

      rgba(0, 0, 0, 1) 0%,

      rgba(0, 0, 0, 0.8) 40%,

      transparent 100%) !important;

}



.cpf-team__ticker-wrap::after {

  background: linear-gradient(to left,

      var(--cpf-color-dark) 0%,

      rgba(10, 10, 10, 0.8) 30%,

      transparent 100%) !important;

  mask-image: linear-gradient(to left,

      rgba(0, 0, 0, 1) 0%,

      rgba(0, 0, 0, 0.8) 40%,

      transparent 100%) !important;

  -webkit-mask-image: linear-gradient(to left,

      rgba(0, 0, 0, 1) 0%,

      rgba(0, 0, 0, 0.8) 40%,

      transparent 100%) !important;

}



/* =============================================

   SECTION: Field Reports (Bento Grid)

   STATUS: WP-Ready | Editorial Premium

   ============================================= */

.cpf-reports {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 12vw, 12rem);

  color: var(--cpf-color-white);

}



.cpf-reports__container {

  max-width: var(--cpf-container-max);

  margin-inline: auto;

  padding-inline: var(--cpf-pad-gutter);

}



.cpf-reports__header {

  margin-block-end: clamp(3rem, 6vw, 5rem);

}



.cpf-reports__badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  padding: 0.5rem 1rem;

  border-radius: 100px;

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-block-end: 1.5rem;

}



.cpf-reports__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 6vw, 5rem);

  font-weight: 500;

  letter-spacing: -0.03em;

  line-height: 1;

}



.cpf-reports__bento {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-auto-rows: minmax(200px, auto);

  gap: 1.5rem;

}



.cpf-reports__card {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 28px;

  padding: 2.2rem;

  display: flex;

  flex-direction: column;

  transition: all 0.5s var(--cpf-ease);

  position: relative;

  overflow: hidden;

}



.cpf-reports__card:hover {

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.15);

  transform: translateY(-8px);

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);

}



.cpf-reports__card--main {

  grid-column: span 2;

  grid-row: span 2;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);

  justify-content: space-between;

  padding: 3.5rem;

}



.cpf-reports__stat-val {

  font-family: var(--cpf-font-display);

  font-size: clamp(5rem, 9vw, 9rem);

  line-height: 0.8;

  font-weight: 600;

  display: block;

  margin-block-end: 2.5rem;

  letter-spacing: -0.05em;

}



.cpf-reports__stat-val small {

  font-size: 0.35em;

  opacity: 0.3;

}



.cpf-reports__stat-desc {

  font-family: var(--cpf-font-body);

  font-size: 1.15rem;

  color: rgba(255, 255, 255, 0.55);

  line-height: 1.6;

  max-width: 420px;

}



.cpf-reports__brand {

  margin-block-start: 4rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.cpf-reports__brand-name {

  font-family: var(--cpf-font-mono);

  font-size: 0.8rem;

  letter-spacing: 0.25em;

  opacity: 0.4;

}



.cpf-reports__avatars {

  display: flex;

  align-items: center;

}



.cpf-reports__avatar {

  inline-size: 40px;

  block-size: 40px;

  border-radius: 50%;

  border: 2px solid var(--cpf-color-dark);

  margin-inline-start: -14px;

}



.cpf-reports__avatar-plus {

  inline-size: 40px;

  block-size: 40px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.7rem;

  font-family: var(--cpf-font-mono);

  margin-inline-start: -14px;

  border: 2px solid var(--cpf-color-dark);

  color: rgba(255, 255, 255, 0.6);

}



.cpf-reports__card--quote {

  grid-column: span 2;

}



.cpf-reports__author {

  display: flex;

  align-items: center;

  gap: 1.25rem;

  margin-block-end: 1.8rem;

}



.cpf-reports__author-img {

  inline-size: 52px;

  block-size: 52px;

  border-radius: 50%;

  object-fit: cover;

  border: 1px solid rgba(255, 255, 255, 0.12);

}



.cpf-reports__author-meta .name {

  font-family: var(--cpf-font-body);

  font-weight: 600;

  font-size: 1.1rem;

}



.cpf-reports__author-meta .sub {

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  opacity: 0.35;

  margin-block-start: 2px;

}



.cpf-reports__text {

  font-family: var(--cpf-font-body);

  font-size: 1.1rem;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.65);

  font-style: italic;

}



.cpf-reports__footer {

  margin-block-start: auto;

  padding-block-start: 1.8rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.cpf-reports__footer .stars {

  color: #FFB800;

  font-size: 0.75rem;

  letter-spacing: 3px;

}



.cpf-reports__footer .tag {

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  letter-spacing: 0.15em;

  background: rgba(0, 255, 150, 0.08);

  color: #00FF96;

  padding: 0.25rem 0.7rem;

  border-radius: 6px;

  font-weight: bold;

}



.cpf-reports__card--vert {

  grid-row: span 2;

  justify-content: space-between;

}



.cpf-reports__text-large {

  font-family: var(--cpf-font-display);

  font-size: 2.6rem;

  line-height: 1.1;

  font-weight: 500;

  letter-spacing: -0.02em;

}



.cpf-reports__visual-dot {

  position: absolute;

  inset-block-end: 2.5rem;

  inset-inline-end: 2.5rem;

  inline-size: 8px;

  block-size: 8px;

  background: var(--cpf-color-white);

  border-radius: 50%;

  box-shadow: 0 0 20px var(--cpf-color-white);

  opacity: 0.6;

}



.cpf-reports__card--small {

  text-align: center;

  justify-content: center;

}



.cpf-reports__label {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  opacity: 0.3;

  letter-spacing: 0.15em;

  margin-block-end: 1.2rem;

  text-transform: uppercase;

}



.cpf-reports__val-small {

  font-family: var(--cpf-font-display);

  font-size: 3rem;

  font-weight: 700;

}



.cpf-reports__sub {

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  opacity: 0.4;

  margin-block-start: 0.5rem;

}



/* Responsive Overrides */

@media (max-width: 1200px) {

  .cpf-reports__bento {

    grid-template-columns: repeat(3, 1fr);

  }

}



@media (max-width: 991.98px) {

  .cpf-reports__bento {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 809.98px) {

  .cpf-reports__bento {

    grid-template-columns: 1fr;

    grid-auto-rows: auto;

  }



  .cpf-reports__card--main,

  .cpf-reports__card--quote {

    grid-column: span 1;

  }



  .cpf-reports__card--main {

    padding: 2.5rem;

  }



  .cpf-reports__stat-val {

    font-size: 22vw;

  }

}



/* =============================================

   SECTION: Pipeline Authority (Impact)

   STATUS: WP-Ready | Tactical Editorial

   ============================================= */

.cpf-impact {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 10vw, 10rem);

  color: var(--cpf-color-white);

  border-block: 1px solid rgba(255, 255, 255, 0.05);

}



.cpf-impact__container {

  max-width: var(--cpf-container-max);

  margin-inline: auto;

  padding-inline: var(--cpf-pad-gutter);

}



.cpf-impact__stats-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;

  margin-block-end: clamp(5rem, 8vw, 8rem);

  padding-block-end: 4rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.cpf-impact__stat {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.cpf-impact__number {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 5vw, 6rem);

  font-weight: 600;

  line-height: 1;

  letter-spacing: -0.04em;

}



.cpf-impact__number small {

  font-size: 0.5em;

  opacity: 0.3;

  margin-inline-start: 4px;

}



.cpf-impact__label {

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  letter-spacing: 0.15em;

  color: rgba(255, 255, 255, 0.4);

  line-height: 1.4;

}



.cpf-impact__doctrine {

  display: grid;

  grid-template-columns: 350px 1fr;

  gap: clamp(4rem, 8vw, 10rem);

  align-items: start;

}



.cpf-impact__brand-identity {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.cpf-impact__brand-identity .name {

  font-family: var(--cpf-font-body);

  font-weight: 700;

  font-size: 1.5rem;

  letter-spacing: -0.02em;

}



.cpf-impact__brand-identity .motto {

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  letter-spacing: 0.15em;

  color: rgba(255, 255, 255, 0.4);

  line-height: 1.6;

}



.cpf-impact__manifesto .heading {

  font-family: var(--cpf-font-body);

  font-size: clamp(2rem, 3.5vw, 3.5rem);

  font-weight: 300;

  line-height: 1.2;

  letter-spacing: -0.01em;

  color: rgba(255, 255, 255, 0.6);

  margin-block-end: 2.5rem;

}



.cpf-impact__manifesto .heading strong {

  color: var(--cpf-color-white);

  font-weight: 600;

}



.cpf-impact__manifesto .text {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.1rem, 1.4vw, 1.4rem);

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.45);

  max-width: 800px;

}



/* Responsive Overrides */

@media (max-width: 1024px) {

  .cpf-impact__stats-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 3rem;

  }



  .cpf-impact__doctrine {

    grid-template-columns: 1fr;

    gap: 4rem;

  }

}



@media (max-width: 809.98px) {

  .cpf-impact {

    padding-block: 6rem;

  }



  .cpf-impact__stats-grid {

    grid-template-columns: 1fr;

    gap: 2.5rem;

    padding-block-end: 3rem;

  }



  .cpf-impact__number {

    font-size: 18vw;

  }



  .cpf-impact__manifesto .heading {

    font-size: 8vw;

  }

}



/* =============================================

   EDITORIAL UPGRADE: Mission Dossier

   ============================================= */

.cpf-case-study__metric-card {

  background: rgba(255, 255, 255, 0.03) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  backdrop-filter: blur(8px);

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

  border-radius: 24px !important;

  padding: 2rem !important;

}



.cpf-case-study__metric-card:hover {

  background: rgba(255, 255, 255, 0.06) !important;

  border-color: rgba(255, 255, 255, 0.15) !important;

  transform: translateY(-8px);

}



.cpf-case-study__tag {

  font-family: var(--cpf-font-mono) !important;

  letter-spacing: 0.12em !important;

  background: rgba(255, 255, 255, 0.08) !important;

  padding: 0.5rem 1rem !important;

  border-radius: 100px !important;

  font-size: 0.65rem !important;

}



.cpf-case-study__metric-label,

.cpf-case-study__chart-label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  opacity: 0.4 !important;

  letter-spacing: 0.15em !important;

  text-transform: uppercase;

}



.cpf-case-study__metric-value,

.cpf-case-study__score-num,

.cpf-case-study__chart-val {

  font-family: var(--cpf-font-display) !important;

  font-weight: 600 !important;

  letter-spacing: -0.02em !important;

}



.cpf-case-study__hero-brand {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(4rem, 10vw, 10rem) !important;

  letter-spacing: -0.05em !important;

  opacity: 0.1 !important;

  pointer-events: none;

}



.cpf-case-study__hero-card {

  border-radius: 32px !important;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);

}



/* =============================================

   HERO: Tactical Overhaul & Component Fixes

   ============================================= */

.cpf-hero__signal {

  position: absolute;

  inset-block-end: 2.5rem;

  inset-inline-start: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 1.2rem;

  z-index: 20;

}



.cpf-hero__signal-dot {

  inline-size: 7px;

  block-size: 7px;

  background: #00FF96;

  border-radius: 50%;

  box-shadow: 0 0 15px rgba(0, 255, 150, 0.6);

  animation: cpf-blink-tactical 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;

}



@keyframes cpf-blink-tactical {



  0%,

  100% {

    opacity: 0.4;

    transform: scale(1);

  }



  50% {

    opacity: 1;

    transform: scale(1.4);

  }

}



.cpf-hero__signal-content {

  display: flex;

  flex-direction: column;

}



.cpf-hero__signal-label {

  font-family: var(--cpf-font-mono);

  font-size: 0.55rem;

  opacity: 0.35;

  letter-spacing: 0.25em;

  line-height: 1;

  margin-block-end: 4px;

}



.cpf-hero__signal-status {

  font-family: var(--cpf-font-mono);

  font-size: 0.8rem;

  font-weight: 500;

  letter-spacing: 0.08em;

  line-height: 1;

}



.cpf-hero__tactical-card {

  position: absolute;

  inset-block-end: 2.5rem;

  inset-inline-end: 2.5rem;

  inline-size: 300px;

  background: rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(25px);

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

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 28px;

  padding: 2rem;

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

  z-index: 20;

  transition: all 0.4s var(--cpf-ease);

}



.cpf-hero__tactical-card:hover {

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.15);

  transform: translateY(-5px);

}



.cpf-hero__tactical-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.cpf-hero__tactical-pill {

  font-family: var(--cpf-font-mono);

  font-size: 0.5rem;

  font-weight: 700;

  background: rgba(0, 255, 150, 0.1);

  color: #00FF96;

  padding: 0.25rem 0.6rem;

  border-radius: 100px;

  letter-spacing: 0.1em;

}



.cpf-hero__tactical-time {

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  font-weight: 500;

  color: rgba(255, 255, 255, 0.5);

}



.cpf-hero__tactical-body {

  display: flex;

  flex-direction: column;

  gap: 0.8rem;

}



.cpf-hero__tactical-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.cpf-hero__tactical-row .label {

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  opacity: 0.3;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}



.cpf-hero__tactical-row .value {

  font-family: var(--cpf-font-display);

  font-size: 1.1rem;

  font-weight: 600;

  letter-spacing: -0.02em;

}



.cpf-hero__tactical-cta {

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  font-weight: 700;

  color: var(--cpf-color-white);

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-block-start: 1.5rem;

  margin-block-start: 0.5rem;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  transition: all 0.3s var(--cpf-ease);

  letter-spacing: 0.1em;

}



.cpf-hero__tactical-cta:hover {

  color: #00FF96;

}



/* ---------------------------------------------

   SYSTEM FIXES: DRAWER & SLIDER

   --------------------------------------------- */

.cpf-drawer {

  position: fixed;

  inset-block: 0;

  inset-inline-end: 0;

  inline-size: min(540px, 100vw);

  background: var(--cpf-color-dark);

  z-index: 10000;

  transform: translateX(100%);

  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);

  border-inline-start: 1px solid rgba(255, 255, 255, 0.1);

  display: flex;

  flex-direction: column;

  visibility: hidden;

}



.cpf-drawer.is-open {

  transform: translateX(0);

  visibility: visible;

}



.cpf-nav__overlay {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.8);

  backdrop-filter: blur(15px);

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

  z-index: 9999;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.6s var(--cpf-ease);

}



.cpf-nav__overlay.is-open {

  opacity: 1;

  pointer-events: auto;

}



/* SLIDER CORE */

.tft-hero-slider {

  position: relative;

  overflow: hidden;

}



.tft-hero-slider__bg {

  position: absolute;

  inset: 0;

  z-index: 1;

}



.tft-hero-slider__layer {

  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);

  pointer-events: none;

}



.tft-hero-slider__layer.is-active {

  opacity: 1;

  pointer-events: auto;

}



.tft-hero-slider__img,

.cpf-hero__bg-img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  display: block;

}



/* Responsive Fixes */

@media (max-width: 809.98px) {



  .cpf-hero__tactical-card,

  .cpf-hero__signal {

    display: none;

  }

}



/* =============================================

   EDITORIAL REFINEMENT: High-End Minimalist

   ============================================= */

.cpf-hero__signal,

.cpf-hero__tactical-card,

.cpf-hero__marker {

  display: none !important;

}



.cpf-hero__stamp {

  position: absolute;

  inset-block-end: 3rem;

  inset-inline-start: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

  z-index: 20;

  text-align: center;

}



.cpf-hero__stamp-copy {

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  font-weight: 500;

  letter-spacing: 0.02em;

  color: var(--cpf-color-white);

}



.cpf-hero__stamp-loc {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  opacity: 0.25;

  letter-spacing: 0.2em;

}



.cpf-hero__featured-card {

  position: absolute;

  inset-block-end: 3rem;

  inset-inline-end: 3rem;

  inline-size: 340px;

  background: rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(30px);

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

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 24px;

  padding: 2.2rem;

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

  z-index: 20;

  transition: all 0.5s var(--cpf-ease);

}



.cpf-hero__featured-card:hover {

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.12);

  transform: translateY(-5px);

}



.cpf-hero__featured-label {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  opacity: 0.3;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  display: block;

}



.cpf-hero__featured-text {

  font-family: var(--cpf-font-body);

  font-size: 1.05rem;

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.75);

}



.cpf-hero__featured-link {

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--cpf-color-white);

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-block-start: 1.5rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  transition: opacity 0.3s var(--cpf-ease);

}



.cpf-hero__featured-link:hover {

  opacity: 0.6;

}



@media (max-width: 991.98px) {

  .cpf-hero__featured-card {

    display: none;

  }

}



/* =============================================

   SECTION: Strategic Foundation (Bento)

   STATUS: WP-Ready | Containerized

   ============================================= */

.cpf-foundation {

  background-color: var(--cpf-color-dark);

  padding-block: clamp(6rem, 12vw, 12rem);

  color: var(--cpf-color-white);

}



.cpf-foundation__container {

  max-width: var(--cpf-container-max);

  margin-inline: auto;

  padding-inline: var(--cpf-pad-gutter);

}



.cpf-foundation__header {

  margin-block-end: clamp(3rem, 6vw, 5rem);

}



.cpf-foundation__badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  padding: 0.5rem 1rem;

  border-radius: 100px;

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-block-end: 1.5rem;

}



.cpf-foundation__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 6vw, 5rem);

  font-weight: 500;

  letter-spacing: -0.03em;

  line-height: 1;

}



.cpf-foundation__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-auto-rows: minmax(180px, auto);

  gap: 1.5rem;

}



.cpf-foundation__card {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 28px;

  padding: 2.2rem;

  display: flex;

  flex-direction: column;

  transition: all 0.5s var(--cpf-ease);

  position: relative;

  overflow: hidden;

}



.cpf-foundation__card--media {

  grid-column: span 2;

  grid-row: span 2;

  padding: 0;

}



.cpf-foundation__media-wrap {

  inline-size: 100%;

  block-size: 100%;

  position: relative;

}



.cpf-foundation__img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  transition: transform 1.2s var(--cpf-ease);

}



.cpf-foundation__card--media:hover .cpf-foundation__img {

  transform: scale(1.08);

}



.cpf-foundation__overlay {

  position: absolute;

  inset-block-start: 2.2rem;

  inset-inline-end: 2.2rem;

  background: rgba(0, 0, 0, 0.7);

  backdrop-filter: blur(15px);

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

  padding: 1rem 1.4rem;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  display: flex;

  flex-direction: column;

  z-index: 2;

}



.cpf-foundation__overlay .label {

  font-family: var(--cpf-font-mono);

  font-size: 0.55rem;

  opacity: 0.4;

  letter-spacing: 0.15em;

  margin-block-end: 6px;

}



.cpf-foundation__overlay .status {

  font-family: var(--cpf-font-mono);

  font-size: 0.8rem;

  font-weight: 700;

  color: #00FF96;

  letter-spacing: 0.05em;

}



.cpf-foundation__card--insight {

  grid-column: span 2;

  justify-content: center;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);

}



.cpf-foundation__text {

  font-family: var(--cpf-font-body);

  font-size: clamp(1.2rem, 1.6vw, 1.6rem);

  line-height: 1.62;

  color: rgba(255, 255, 255, 0.55);

  max-width: 90%;

}



.cpf-foundation__text strong {

  color: var(--cpf-color-white);

  font-weight: 600;

}



.cpf-foundation__visual-line {

  margin-block-start: 2.5rem;

  inline-size: 60%;

  block-size: 1px;

  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);

}



.cpf-foundation__card--stat {

  grid-column: span 1;

  justify-content: space-between;

}



.cpf-foundation__stat-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.cpf-foundation__stat-meta .label {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  opacity: 0.35;

  letter-spacing: 0.12em;

}



.cpf-foundation__stat-meta .num {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  opacity: 0.2;

}



.cpf-foundation__stat-val {

  font-family: var(--cpf-font-display);

  font-size: 4rem;

  font-weight: 700;

  letter-spacing: -0.05em;

  line-height: 0.9;

}



.cpf-foundation__card--wide {

  grid-column: span 2;

  background: rgba(255, 255, 255, 0.02);

}



.cpf-foundation__subtitle {

  font-family: var(--cpf-font-display);

  font-size: 2.2rem;

  font-weight: 600;

  margin-block-end: 1rem;

  letter-spacing: -0.02em;

}



.cpf-foundation__desc {

  font-family: var(--cpf-font-body);

  font-size: 1.1rem;

  opacity: 0.45;

  line-height: 1.7;

}



/* Hover State */

.cpf-foundation__card:not(.cpf-foundation__card--media):hover {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.15);

  transform: translateY(-8px);

  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);

}



/* Responsive Overrides */

@media (max-width: 1200px) {

  .cpf-foundation__grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



@media (max-width: 991.98px) {

  .cpf-foundation__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 809.98px) {

  .cpf-foundation__grid {

    grid-template-columns: 1fr;

    grid-auto-rows: auto;

  }



  .cpf-foundation__card--media,

  .cpf-foundation__card--insight,

  .cpf-foundation__card--stat,

  .cpf-foundation__card--wide {

    grid-column: span 1;

  }



  .cpf-foundation__stat-val {

    font-size: 15vw;

  }

}



/* =============================================

   SECTION: Architects Collective

   ============================================= */

.cpf-architects {

  padding-block: var(--cpf-section-spacing, 120px);

  background: var(--cpf-color-dark, #0a0a0a);

  overflow: hidden;

}



.cpf-architects__layout {

  max-width: var(--cpf-container-max, 1480px);

  margin-inline: auto;

  padding-inline: 40px;

  display: grid;

  grid-template-columns: 1fr 2fr;

  gap: 80px;

}



.cpf-architects__intel {

  position: sticky;

  top: 120px;

  height: fit-content;

}



.cpf-architects__tag {

  display: block;

  font-size: 11px;

  font-weight: 700;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  letter-spacing: 0.2em;

  margin-bottom: 24px;

}



.cpf-architects__title {

  font-size: clamp(40px, 5vw, 64px);

  line-height: 1.1;

  font-weight: 700;

  margin-bottom: 32px;

}



.cpf-architects__title .dim {

  color: rgba(255, 255, 255, 0.2);

}



.cpf-architects__desc {

  font-size: 18px;

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.6);

  max-width: 400px;

}



.cpf-architects__collection {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 32px;

}



.cpf-architects__card {

  position: relative;

  border-radius: 32px;

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.05);

  overflow: hidden;

  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}



.cpf-architects__card.secondary {

  margin-top: 60px;

}



.cpf-architects__card .photo {

  aspect-ratio: 4 / 5;

  overflow: hidden;

  position: relative;

}



.cpf-architects__card .photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 1.2s ease;

}



.cpf-architects__card .overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(10, 10, 10, 0.8), transparent);

  display: flex;

  align-items: flex-end;

  padding: 32px;

  opacity: 0;

  transition: opacity 0.4s ease;

}



.cpf-architects__card .role {

  font-size: 13px;

  font-weight: 600;

  color: #fff;

  padding: 8px 16px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  border-radius: 100px;

}



.cpf-architects__card .info {

  padding: 32px;

}



.cpf-architects__card .name {

  font-size: 20px;

  font-weight: 700;

  margin-bottom: 8px;

}



.cpf-architects__card .studio {

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.1em;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.cpf-architects__card:hover {

  transform: translateY(-10px);

  border-color: rgba(232, 185, 35, 0.3);

}



.cpf-architects__card:hover .photo img {

  transform: scale(1.1);

}



.cpf-architects__card:hover .overlay {

  opacity: 1;

}



/* =============================================

   SECTION: Project Analytics

   ============================================= */

.cpf-analytics {

  padding-block: var(--cpf-section-spacing, 120px);

  background: #000;

}



.cpf-analytics__container {

  max-width: var(--cpf-container-max, 1480px);

  margin-inline: auto;

  padding-inline: 40px;

}



.cpf-analytics__header {

  margin-bottom: 80px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



.cpf-analytics__badge {

  font-size: 11px;

  font-weight: 700;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-bottom: 24px;

  letter-spacing: 0.25em;

}



.cpf-analytics__title {

  font-size: clamp(40px, 6vw, 80px);

  font-weight: 800;

  line-height: 1;

  letter-spacing: -0.02em;

}



.cpf-analytics__grid {

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 40px;

  align-items: stretch;

}



.cpf-analytics__hero {

  position: relative;

  border-radius: 40px;

  overflow: hidden;

  height: 100%;

}



.cpf-analytics__hero-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.cpf-analytics__hero-data {

  position: absolute;

  bottom: 40px;

  left: 40px;

}



.cpf-analytics__hero-data .brand {

  display: block;

  font-size: 32px;

  font-weight: 800;

  color: #fff;

  margin-bottom: 8px;

}



.cpf-analytics__hero-data .category {

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.2em;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.cpf-analytics__bento {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-template-rows: repeat(2, 1fr);

  gap: 32px;

}



.cpf-analytics__card {

  background: #111;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 32px;

  padding: 40px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.cpf-analytics__card .card-tag {

  font-size: 11px;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.4);

  letter-spacing: 0.1em;

  text-transform: uppercase;

}



.cpf-analytics__card .val {

  font-size: 48px;

  font-weight: 800;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-block: 16px 8px;

}



.cpf-analytics__card .txt {

  font-size: 14px;

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.5);

}



.cpf-analytics__card--center {

  justify-content: center;

  align-items: center;

  text-align: center;

}



.gauge-display {

  position: relative;

  width: 180px;

}



.gauge-svg {

  width: 100%;

  transform: translateY(20px);

}



.gauge-track {

  stroke: rgba(255, 255, 255, 0.05);

  stroke-width: 8;

  fill: none;

}



.gauge-fill {

  stroke: var(--cpf-color-accent, var(--cpf-color-accent));

  stroke-width: 8;

  fill: none;

  stroke-dasharray: 126;

  stroke-dashoffset: 0;

}



.gauge-val {

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  font-size: 40px;

  font-weight: 800;

}



.gauge-label {

  display: block;

  font-size: 14px !important;

  font-weight: 700;

  margin-top: 40px;

  color: rgba(255, 255, 255, 0.3);

}



.cpf-analytics__card--quote .quote {

  font-style: italic;

  font-size: 16px;

  line-height: 1.6;

  margin-bottom: 24px;

}



.cpf-analytics__card .profile {

  display: flex;

  align-items: center;

  gap: 12px;

}



.cpf-analytics__card .avatar {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  object-fit: cover;

}



.cpf-analytics__card .name {

  font-size: 13px;

  font-weight: 600;

}



.growth-mini {

  display: flex;

  align-items: flex-end;

  gap: 4px;

  height: 40px;

  margin-top: 24px;

}



.growth-mini .bar {

  flex: 1;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 2px;

}



.growth-mini .bar.highlight {

  background: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* =============================================

   SECTION: Studio Engagement

   ============================================= */

.cpf-investment {

  padding-block: var(--cpf-section-spacing, 120px);

  background: var(--cpf-color-dark, #0a0a0a);

}



.cpf-investment__container {

  max-width: var(--cpf-container-max, 1480px);

  margin-inline: auto;

  padding-inline: 40px;

}



.cpf-investment__header {

  margin-bottom: 80px;

  max-width: 700px;

}



.cpf-investment__badge {

  font-size: 11px;

  font-weight: 700;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-bottom: 24px;

  letter-spacing: 0.25em;

}



.cpf-investment__title {

  font-size: clamp(40px, 5vw, 64px);

  font-weight: 700;

  margin-bottom: 24px;

}



.cpf-investment__desc {

  font-size: 18px;

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.6);

}



.cpf-investment__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 32px;

}



.cpf-investment__card {

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 32px;

  padding: 48px;

  display: flex;

  flex-direction: column;

  position: relative;

  transition: border-color 0.4s ease;

}



.cpf-investment__card--featured {

  background: #111;

  border-color: rgba(232, 185, 35, 0.4);

  transform: scale(1.05);

  z-index: 2;

}



.cpf-investment__popular-tag {

  position: absolute;

  top: -14px;

  left: 48px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  color: #000;

  font-size: 14px !important;

  font-weight: 800;

  padding: 6px 16px;

  border-radius: 100px;

  letter-spacing: 0.05em;

}



.cpf-investment__card .title {

  font-size: 28px;

  font-weight: 700;

  margin-bottom: 8px;

}



.cpf-investment__card .sub {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.5);

  margin-bottom: 40px;

}



.cpf-investment__price {

  display: flex;

  align-items: baseline;

  gap: 4px;

  margin-bottom: 40px;

}



.cpf-investment__price .currency {

  font-size: 24px;

  font-weight: 600;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.cpf-investment__price .amount {

  font-size: 56px;

  font-weight: 800;

  letter-spacing: -0.03em;

}



.cpf-investment__price .period {

  font-size: 12px;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.4);

}



.cpf-investment__features {

  list-style: none;

  padding: 0;

  margin-bottom: 48px;

}



.cpf-investment__features li {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  font-size: 15px;

  margin-bottom: 16px;

  color: rgba(255, 255, 255, 0.8);

}



.cpf-investment__features li span {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  font-weight: 700;

}



.cpf-investment__btn {

  margin-top: auto;

  display: block;

  text-align: center;

  background: #fff;

  color: #000;

  font-size: 13px;

  font-weight: 800;

  padding: 20px;

  border-radius: 16px;

  text-decoration: none;

  transition: all 0.3s ease;

}



.cpf-investment__btn--gold {

  background: var(--cpf-color-accent, var(--cpf-color-accent));

}



.cpf-investment__btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



.cpf-investment__col-group {

  display: flex;

  flex-direction: column;

  gap: 24px;

}



.cpf-investment__card--compact {

  padding: 32px;

}



.cpf-investment__price-min {

  margin-block: 24px;

}



.cpf-investment__price-min .label {

  display: block;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.4);

  margin-bottom: 4px;

}



.cpf-investment__price-min .amount {

  font-size: 24px;

  font-weight: 700;

}



.cpf-investment__btn--outline {

  display: block;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: #fff;

  font-size: 12px;

  font-weight: 700;

  padding: 16px;

  border-radius: 12px;

  text-decoration: none;

  transition: all 0.3s ease;

}



.cpf-investment__btn--outline:hover {

  background: #fff;

  color: #000;

}



.cpf-investment__card--partner {

  background: rgba(232, 185, 35, 0.03);

  border-color: rgba(232, 185, 35, 0.1);

  padding: 32px;

}



.cpf-investment__card--partner .profile {

  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 24px;

}



.cpf-investment__card--partner .img {

  width: 48px;

  height: 48px;

  border-radius: 12px;

  object-fit: cover;

}



.cpf-investment__card--partner .name {

  display: block;

  font-size: 15px;

  font-weight: 700;

}



.cpf-investment__card--partner .role {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.5);

}



.cpf-investment__card--partner .txt {

  font-size: 14px;

  line-height: 1.5;

  color: rgba(255, 255, 255, 0.6);

  margin-bottom: 24px;

}



.cpf-investment__card--partner .slots {

  font-size: 14px !important;

  font-weight: 800;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-bottom: 16px;

}



.cpf-investment__card--partner .btn-brief {

  font-size: 12px;

  font-weight: 800;

  color: #fff;

  text-decoration: underline;

  text-underline-offset: 4px;

}



/* =============================================

   SOVEREIGN INSTITUTIONAL SYSTEM (v2.0.26)

   ---------------------------------------------

   Components: Institutional Header, Console,

   and Master Screen (Slider).

   ============================================= */



:root {

  --tft-gold: #E8B923;

  --tft-console-bg: #0a0a0a;

  --tft-glass: rgba(10, 10, 10, 0.7);

  --tft-header-height: 110px;

  /* status-bar + nav */

}



/* Institutional Header */

.cpf-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  background: transparent;

}



/* 1. Status Bar (Console) */

.cpf-header__console {

  background: #000;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  padding-block: 8px;

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.4);

}



.cpf-header__console-inner {

  max-width: var(--cpf-container-max, 1480px);

  margin-inline: auto;

  padding-inline: 40px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.cpf-header__status {

  display: flex;

  align-items: center;

  gap: 12px;

}



.cpf-header__dot {

  width: 6px;

  height: 6px;

  background: var(--tft-gold);

  border-radius: 50%;

  box-shadow: 0 0 10px var(--tft-gold);

  animation: tft-pulse 2s infinite;

}



@keyframes tft-pulse {

  0% {

    opacity: 0.4;

  }



  50% {

    opacity: 1;

  }



  100% {

    opacity: 0.4;

  }

}



.cpf-header__label .val {

  color: #fff;

  font-weight: 700;

}



.cpf-header__sep {

  font-size: 0 !important;

  width: 3px !important;

  height: 12px !important;

  background: rgba(255, 255, 255, 0.2) !important;

  margin-inline: 12px !important;

  transform: none !important;

}



.cpf-header__meta {

  display: flex;

  align-items: center;

  gap: 20px;

}



/* 2. Main Nav Row */

.cpf-header__main {

  padding-block: 24px;

  backdrop-filter: blur(20px);

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);

  transition: all 0.4s ease;

}



.cpf-header__nav-inner {

  max-width: var(--cpf-container-max, 1480px);

  margin-inline: auto;

  padding-inline: 40px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.cpf-header__logo {

  font-size: 24px;

  font-weight: 800;

  color: #fff;

  text-decoration: none;

  letter-spacing: -0.02em;

}



.cpf-header__logo .plus {

  color: var(--tft-gold);

  margin-left: 2px;

}



.cpf-header__menu {

  display: flex;

  gap: 60px;

  list-style: none;

}



.cpf-header__link {

  text-decoration: none;

  color: #fff;

  font-size: 13px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  opacity: 0.6;

  transition: opacity 0.3s ease;

  position: relative;

}



.cpf-header__link .count {

  font-size: 14px !important;

  color: var(--tft-gold);

  margin-left: 2px;

}



.cpf-header__link:hover {

  opacity: 1;

}



.cpf-header__link::after {

  content: '';

  position: absolute;

  bottom: -4px;

  left: 0;

  width: 100%;

  height: 1px;

  background: var(--tft-gold);

  transform: scaleX(0);

  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);

  transform-origin: right;

}



.cpf-header__link:hover::after {

  transform: scaleX(1);

  transform-origin: left;

}



.cpf-header__burger {

  background: none;

  border: none;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.cpf-header__burger .line {

  width: 32px;

  height: 2px;

  background: #fff;

  transition: all 0.4s ease;

}



/* Sovereign Master Screen (Section) */

.tft-master-screen {

  position: relative;

  width: 100%;

  height: 100vh;

  background: #000;

  overflow: hidden;

  display: flex;

  align-items: center;

}



/* 1. Atmosphere Overlays */

.tft-master-screen__atmosphere {

  position: absolute;

  inset: 0;

  z-index: 5;

  pointer-events: none;

}



.scanlines {

  position: absolute;

  inset: 0;

  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));

  background-size: 100% 4px, 3px 100%;

  opacity: 0.15;

}



.grain {

  position: absolute;

  inset: 0;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  opacity: 0.05;

}



.vignette {

  position: absolute;

  inset: 0;

  background: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.8) 100%);

}



.brackets {

  position: absolute;

  font-family: var(--cpf-font-mono);

  font-size: 24px;

  color: var(--tft-gold);

  opacity: 0.3;

  padding: 40px;

}



.brackets.top-left {

  top: 120px;

  left: 40px;

}



.brackets.top-right {

  top: 120px;

  right: 40px;

}



.brackets.bottom-left {

  bottom: 40px;

  left: 40px;

}



.brackets.bottom-right {

  bottom: 40px;

  right: 40px;

}



/* 2. Slider Scenes */

.tft-master-screen__scenes {

  position: absolute;

  inset: 0;

  z-index: 1;

}



.tft-scene {

  position: absolute;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);

  transform: scale(1.1);

}



.tft-scene.is-active {

  opacity: 1;

  visibility: visible;

  transform: scale(1);

}



.tft-scene__media {

  width: 100%;

  height: 100% !important;

  object-fit: cover  !important;

}



.tft-scene__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, transparent 60%);

}



/* 3. Master Content (Typography) */

.tft-master-screen__content {

  position: relative;

  z-index: 10;

  max-width: var(--cpf-container-max, 1480px);

  margin-inline: auto;

  padding-inline: 40px;

  width: 100%;

  pointer-events: none;

}



.tft-master-screen__title {

  display: flex;

  flex-direction: column;

  line-height: 0.9;

}



.tft-master-screen__title .word-1 {

  font-size: clamp(80px, 15vw, 240px);

  font-weight: 900;

  color: var(--tft-gold);

  letter-spacing: -0.05em;

  text-transform: uppercase;

}



.tft-master-screen__title .word-1 .reg {

  font-size: 0.2em;

  vertical-align: super;

  font-weight: 500;

}



.tft-master-screen__title .word-2 {

  font-size: clamp(40px, 8vw, 80px);

  font-weight: 400;

  color: #fff;

  margin-left: 0.5em;

  letter-spacing: -0.02em;

}



.tft-master-screen__meta {

  margin-top: 60px;

  display: flex;

  gap: 48px;

  font-family: var(--cpf-font-mono);

  font-size: 11px;

}



.tft-master-screen__meta .item {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.tft-master-screen__meta .label {

  color: rgba(255, 255, 255, 0.3);

}



.tft-master-screen__meta .val {

  color: var(--tft-gold);

  font-weight: 700;

}



/* 4. Sidebar Archive Nav */

.tft-archives {

  position: absolute;

  right: 60px;

  top: 50%;

  transform: translateY(-50%);

  z-index: 20;

}



.tft-archives__list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 32px;

}



.tft-archives__item {

  display: flex;

  align-items: center;

  gap: 24px;

  cursor: pointer;

  transition: all 0.4s ease;

  opacity: 0.4;

}



.tft-archives__item.is-active {

  opacity: 1;

}



.tft-archives__item .preview {

  width: 0;

  height: 48px;

  overflow: hidden;

  border-radius: 4px;

  transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);

}



.tft-archives__item:hover .preview,

.tft-archives__item.is-active .preview {

  width: 64px;

}



.tft-archives__item .preview img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tft-archives__item .info {

  display: flex;

  flex-direction: column;

  text-align: right;

}



.tft-archives__item .num {

  font-family: var(--cpf-font-mono);

  font-size: 9px;

  color: var(--tft-gold);

}



.tft-archives__item .name {

  font-size: 16px;

  font-weight: 800;

  color: #fff;

  margin-top: 4px;

}



.tft-archives__item .line {

  width: 40px;

  height: 1px;

  background: rgba(255, 255, 255, 0.1);

  transition: all 0.4s ease;

}



.tft-archives__item.is-active .line {

  background: var(--tft-gold);

  width: 60px;

}



.tft-archives__item:hover {

  opacity: 1;

  transform: translateX(-10px);

}



/* 5. Bottom Ticker */

.tft-master-screen__ticker {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  background: rgba(0, 0, 0, 0.5);

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  padding-block: 12px;

  z-index: 10;

  overflow: hidden;

}



.ticker-inner {

  display: flex;

  gap: 100px;

  white-space: nowrap;

  animation: tft-ticker 30s linear infinite;

}



@keyframes tft-ticker {

  0% {

    transform: translateX(100%);

  }



  100% {

    transform: translateX(-100%);

  }

}



.ticker-inner .msg {

  font-family: var(--cpf-font-mono);

  font-size: 9px;

  color: rgba(255, 255, 255, 0.4);

  display: flex;

  align-items: center;

  gap: 12px;

}



.ticker-inner .msg::before {

  content: '>';

  color: var(--tft-gold);

}



/* Header Scroll State */

.cpf-header.is-scrolled .cpf-header__main {

  background: rgba(0, 0, 0, 0.95);

  padding-block: 16px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}



/* Fix mobile nav line color */

.cpf-header__burger .line:nth-child(2) {

  width: 20px;

  align-self: flex-end;

}



/* Stabilizing Archive Navigation (No Jump on Hover) */

.tft-archives__item {

  opacity: 0.3;

  transform: none !important;

  /* Force no shift */

  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);

  padding-block: 8px;

  /* Stable vertical volume */

}



/* Hover only affects brightness/opacity, not position/size */

.tft-archives__item:hover {

  opacity: 0.7;

  transform: none;

}



/* Visual changes only on ACTIVE state (via JS click) */

.tft-archives__item.is-active {

  opacity: 1;

}



/* Preview Thumbnail Logic */

.tft-archives__item .preview {

  width: 0;

  height: 48px;

  overflow: hidden;

  border-radius: 6px;

  transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;

  opacity: 0;

}



.tft-archives__item.is-active .preview {

  width: 80px;

  /* Larger, stable expansion */

  opacity: 1;

  margin-right: 8px;

  /* Pre-allocated space or gap handling? */

}



/* Force layout stability using explicit flex spacing */

.tft-archives__item .info {

  min-width: 180px;

}



/* =============================================

   SOVEREIGN ARCHIVE NAVIGATION (STABILIZED)

   ---------------------------------------------

   Fixed jumpiness by pre-allocating space for 

   the preview and using stable flex alignments.

   ============================================= */



.tft-archives {

  position: absolute;

  right: clamp(40px, 6vw, 120px);

  top: 50%;

  transform: translateY(-50%);

  z-index: 20;

  width: 480px;

  /* Pre-allocate container width to prevent layout shifts */

}



.tft-archives__list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 40px;

  /* Balanced spacing */

  align-items: flex-end;

}



.tft-archives__item {

  display: flex;

  align-items: center;

  gap: 20px;

  cursor: pointer;

  opacity: 0.25;

  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

  width: 100%;

  justify-content: flex-end;

}



/* Hover effects with absolute stability */

.tft-archives__item:hover,

.tft-archives__item.is-active {

  opacity: 1;

}



.tft-archives__item .preview {

  width: 0;

  height: 54px;

  overflow: hidden;

  border-radius: 8px;

  background: #111;

  transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;

  flex-shrink: 0;

  opacity: 0;

}



/* Expanded state on hover OR active */

.tft-archives__item:hover .preview,

.tft-archives__item.is-active .preview {

  width: 86px;

  opacity: 1;

}



.tft-archives__item .preview img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Text alignment & rhythmic consistency */

.tft-archives__item .info {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  min-width: 200px;

}



.tft-archives__item .num {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  font-weight: 700;

  color: var(--tft-gold);

  letter-spacing: 0.15em;

  margin-bottom: 6px;

}



.tft-archives__item .name {

  font-size: clamp(24px, 2vw, 32px);

  font-weight: 800;

  color: #fff;

  letter-spacing: -0.02em;

}



.tft-archives__item .line {

  width: 40px;

  height: 1.5px;

  background: rgba(255, 255, 255, 0.08);

  transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.4s ease;

  margin-left: 20px;

  flex-shrink: 0;

}



.tft-archives__item:hover .line,

.tft-archives__item.is-active .line {

  background: var(--tft-gold);

  width: 80px;

}



/* Responsive adjustment for the side nav */

@media (max-width: 1024px) {

  .tft-archives {

    display: none;

    /* Hide on mobile to focus on the main content */

  }

}



/* =============================================

   SOVEREIGN BENTO PORTFOLIO (v2026)

   ---------------------------------------------

   Components: Filter Bar, Bento Grid,

   Institutional Cards.

   ============================================= */



.tft-portfolio {

  padding-block: 140px;

  background: var(--cpf-color-bg, #000);

}



.tft-portfolio__container {

  max-width: var(--cpf-container-max, 1480px);

  margin-inline: auto;

  padding-inline: 40px;

}



/* 1. Header & Filter Bar */

.tft-portfolio__header {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin-bottom: 80px;

}



.tft-portfolio__title-group {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.tft-portfolio__badge {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  color: var(--tft-gold);

  letter-spacing: 0.2em;

}



.tft-portfolio__title {

  font-size: clamp(48px, 6vw, 92px);

  font-weight: 800;

  color: #fff;

  letter-spacing: -0.04em;

  line-height: 0.9;

}



.tft-filter-bar {

  display: flex;

  gap: 12px;

  background: rgba(255, 255, 255, 0.03);

  padding: 6px;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-filter-btn {

  background: none;

  border: none;

  padding: 12px 28px;

  border-radius: 100px;

  color: rgba(255, 255, 255, 0.6);

  font-size: 13px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  cursor: pointer;

  transition: all 0.4s ease;

}



.tft-filter-btn.is-active {

  background: var(--tft-gold);

  color: #000;

  box-shadow: 0 4px 20px rgba(232, 185, 35, 0.4);

}



.tft-filter-btn:hover:not(.is-active) {

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

}



/* 2. Bento Grid System */

.tft-portfolio__grid {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 30px;

}



/* 3. Portfolio Card (Institutional Revamp) */

.tft-portfolio__card {

  grid-column: span 6;

  /* Default half width */

  background: #0a0a0a;

  border-radius: 12px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.03);

  display: flex;

  flex-direction: column;

  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);

  opacity: 0;

  transform: translateY(30px);

}



.tft-portfolio__card.is-visible {

  opacity: 1;

  transform: translateY(0);

}



.tft-portfolio__card:hover {

  transform: translateY(-8px);

  border-color: rgba(232, 185, 35, 0.3);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

}



/* Bento Variations */

.tft-portfolio__card.is-large {

  grid-column: span 8;

}



.tft-portfolio__card.is-tall {

  grid-row: span 2;

}



.tft-portfolio__card.is-small {

  grid-column: span 4;

}



/* Card Top Bar */

.tft-portfolio__card-header {

  padding: 20px 24px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: rgba(0, 0, 0, 0.2);

}



.tft-portfolio__card-title {

  font-size: 18px;

  font-weight: 800;

  color: #fff;

}



.tft-portfolio__card-title .year {

  font-weight: 400;

  opacity: 0.3;

  margin-left: 4px;

}



.tft-portfolio__card-dots {

  color: rgba(255, 255, 255, 0.15);

  font-size: 18px;

  letter-spacing: 2px;

}



/* Card Media Area */

.tft-portfolio__card-media {

  position: relative;

  aspect-ratio: 16/10;

  overflow: hidden;

  background: #111;

}



.is-tall .tft-portfolio__card-media {

  aspect-ratio: 10/12;

}



.tft-portfolio__card-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);

}



.tft-portfolio__card:hover .tft-portfolio__card-img {

  transform: scale(1.05);

}



.tft-portfolio__card-index {

  position: absolute;

  top: 24px;

  left: 24px;

  font-family: var(--cpf-font-mono);

  font-size: 12px;

  color: #fff;

  opacity: 0.6;

}



.tft-portfolio__card-logo {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  max-width: 40%;

  opacity: 0;

  transition: all 0.5s ease;

  filter: brightness(0) invert(1);

}



.tft-portfolio__card:hover .tft-portfolio__card-logo {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1.1);

}



/* Card Footer */

.tft-portfolio__card-footer {

  padding: 24px;

  margin-top: auto;

  border-top: 1px solid rgba(255, 255, 255, 0.03);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.tft-portfolio__card-desc {

  font-size: 14px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.5);

}



.tft-portfolio__card-meta-year {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  color: var(--tft-gold);

  font-weight: 700;

}



/* Responsive Grid */

@media (max-width: 1024px) {



  .tft-portfolio__card,

  .tft-portfolio__card.is-large,

  .tft-portfolio__card.is-small {

    grid-column: span 12;

  }



  .tft-portfolio__header {

    flex-direction: column;

    align-items: flex-start;

    gap: 40px;

  }

}



/* Rhythmic Alignment for Side Nav */

.tft-archives__item .info {

  align-items: flex-end;

  text-align: right;

  line-height: 1.2;

}



.tft-archives__item .num {

  transform: translateY(2px);

  /* Optic alignment with the line */

}



/* Ensure images in Bento grid are properly cropped */

.tft-portfolio__card-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



/* =============================================

   SOVEREIGN ELITE REVAMP (v2.0.26)

   ---------------------------------------------

   - Full Width Header System

   - Institutional Console Drawer

   - 2-Column Portfolio Grid (Selected Works)

   ============================================= */



/* 1. Full-Width Header Overrides */

.cpf-header__console-inner,

.cpf-header__nav-inner {

  max-width: 100% !important;

  padding-inline: clamp(1.5rem, 4vw, 4rem);

}



.cpf-header__menu {

  gap: clamp(2rem, 5vw, 5rem);

}



/* 2. Institutional Console Drawer */





/* =============================================

   EDITORIAL MENU DRAWER (RESTORED)

   ---------------------------------------------

   Matches backup design with pitch-black theme.

   ============================================= */



.cpf-drawer {

  position: fixed;

  top: 0;

  right: 0;

  width: min(500px, 100%);

  height: 100vh;

  background: #000;

  z-index: 10000;

  /* Above EVERYTHING, including header blur */

  transform: translateX(100%);

  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

  display: flex;

  flex-direction: column;

  padding: clamp(1.5rem, 4vw, 3rem);

  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);

  overflow-y: auto;

  overflow-x: hidden;

  scrollbar-width: none;

  /* Hide for clean look */

  -ms-overflow-style: none;

}



.cpf-drawer::-webkit-scrollbar {

  display: none;

}



.cpf-drawer.is-open {

  transform: translateX(0);

}



.cpf-drawer__close {

  position: absolute;

  top: 30px;

  right: 30px;

  background: none;

  border: none;

  color: #fff;

  cursor: pointer;

  opacity: 0.6;

  transition: opacity 0.3s ease;

  z-index: 10;

}



.cpf-drawer__close:hover {

  opacity: 1;

}



/* Scrollable Content */

.cpf-drawer__top {

  margin-block-start: 20px;

}



.cpf-drawer__label {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: rgba(255, 255, 255, 0.4);

  letter-spacing: 0.1em;

  margin-block-end: 15px;

}



.cpf-drawer__list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.cpf-drawer__link {

  text-decoration: none;

  color: #fff;

  font-family: var(--cpf-font-display);

  font-size: clamp(32px, 5vw, 54px);

  font-weight: 700;

  line-height: 1.05;

  transition: transform 0.3s ease, opacity 0.3s ease;

  display: inline-block;

}



.cpf-drawer__link:hover {

  opacity: 0.6;

  transform: translateX(10px);

}



.cpf-drawer__count {

  font-family: var(--cpf-font-mono);

  font-size: 0.35em;

  color: rgba(255, 255, 255, 0.3);

  vertical-align: middle;

  margin-inline-start: 8px;

}



/* Specific Gold Item for "Work" */

.cpf-drawer__item:nth-child(3) .cpf-drawer__link {

  color: var(--tft-gold);

}



/* Mid Section (Contact) */

.cpf-drawer__mid {

  margin-block-start: 40px;

  padding-block-start: 30px;

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

}



.cpf-drawer__tiny-label {

  font-family: var(--cpf-font-body);

  font-size: 11px;

  color: rgba(255, 255, 255, 0.3);

  margin-block-end: 10px;

}



.cpf-drawer__email-wrapper {

  text-decoration: none;

  color: #fff;

  font-size: 20px;

  font-weight: 600;

  display: block;

  margin-block-end: 15px;

}



.cpf-drawer__location {

  display: flex;

  gap: 8px;

  font-family: var(--cpf-font-mono);

  font-size: 13px;

  color: #fff;

}





.cpf-drawer__time {

  color: rgba(255, 255, 255, 0.4);

}



.cpf-drawer__socials {

  margin-block-start: 40px;

}



.cpf-drawer__socials-list {

  display: flex;

  gap: 24px;

}



.cpf-drawer__social-link {

  text-decoration: none;

  font-family: var(--cpf-font-mono);

  font-weight: 700;

  color: #fff;

  font-size: 12px;

  letter-spacing: 0.1em;

}



/* Legal Footer */

.cpf-drawer__legal {

  padding-block-start: 40px;

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

}



.cpf-drawer__legal-links {

  display: flex;

  gap: 24px;

  margin-block-end: 12px;

}



.cpf-drawer__legal-link {

  text-decoration: underline;

  text-underline-offset: 4px;

  color: #fff;

  font-size: 12px;

  font-weight: 600;

}



.cpf-drawer__legal-copy {

  display: block;

  font-family: var(--cpf-font-body);

  font-size: 11px;

  color: rgba(255, 255, 255, 0.2);

}



/* Fix Overlay Blur Conflict */

.cpf-nav__overlay {

  z-index: 9999;

}



body.drawer-open .cpf-header {

  backdrop-filter: none;

  /* Disable header blur when drawer is open to prevent visual artifacts */

}



/* Portfolio Header Margin Fix (matches editorial layout) */

.tft-portfolio__header {

  margin-block-end: 80px;

}



/* Boxed Foundation Wrapper */

.cpf-foundation__container {

  max-width: var(--cpf-container-max, 1480px);

  margin-inline: auto;

  padding-inline: 40px;

}



/* =============================================

   STRATEGIC FOUNDATION (Sovereign Elite)

   ---------------------------------------------

   Compact editorial grid with zero gaps.

   ============================================= */



.cpf-foundation {

  padding-block: 100px;

  background: #121212;

}



.cpf-foundation__header {

  margin-bottom: 60px;

}



.cpf-foundation__badge {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  color: var(--tft-gold);

  letter-spacing: 2px;

  margin-bottom: 15px;

}



.cpf-foundation__title {

  font-size: clamp(40px, 5vw, 72px);

  font-weight: 800;

  color: #fff;

  letter-spacing: -0.02em;

}



.cpf-foundation__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: auto auto;

  gap: 20px;

}



.cpf-foundation__card {

  background: #0a0a0a;

  border: 1px solid rgba(255, 255, 255, 0.05);

  padding: 40px;

  border-radius: 20px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  transition: all 0.4s ease;

}



.cpf-foundation__card--media {

  grid-row: span 2;

  padding: 0;

  overflow: hidden;

}



.cpf-foundation__img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.8s ease;

}



.cpf-foundation__card--media:hover .cpf-foundation__img {

  transform: scale(1.05);

}



.cpf-foundation__card--insight {

  grid-column: span 2;

  background: #111;

  padding: 60px;

}



.cpf-foundation__text {

  font-size: clamp(18px, 2vw, 24px);

  line-height: 1.5;

  color: rgba(255, 255, 255, 0.8);

}



.cpf-foundation__text strong {

  color: #fff;

  display: block;

  margin-bottom: 10px;

}



.cpf-foundation__card--stat {

  background: #0a0a0a;

  padding: 30px;

  align-items: flex-start;

}



.cpf-foundation__stat-val {

  font-size: 64px;

  font-weight: 800;

  color: #fff;

  line-height: 1;

  margin-top: 10px;

}



.cpf-foundation__stat-meta {

  display: flex;

  justify-content: space-between;

  width: 100%;

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: rgba(255, 255, 255, 0.3);

}



.cpf-foundation__card--wide {

  grid-column: span 3;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  background: #0a0a0a;

  padding: 40px 60px;

}



.cpf-foundation__subtitle {

  font-size: 32px;

  color: #fff;

  font-weight: 800;

  margin: 0;

}



.cpf-foundation__desc {

  max-width: 500px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 14px;

  margin: 0;

}



@media (max-width: 1024px) {

  .cpf-foundation__grid {

    grid-template-columns: 1fr;

  }



  .cpf-foundation__card--media,

  .cpf-foundation__card--insight,

  .cpf-foundation__card--wide {

    grid-column: span 1;

    grid-row: auto;

  }



  .cpf-foundation__card--wide {

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

  }

}



/* =============================================

   SECTION: Sovereign Footer Rebirth

   ============================================= */

.tft-ftr {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  position: relative;

  z-index: 10;

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-ftr__container {

  padding-block-start: clamp(3rem, 6vw, 6rem);

}



/* Huge Typography */

.tft-ftr__hero {

  padding-inline: var(--cpf-nav-px);

  margin-block-end: clamp(2rem, 5vw, 4rem);

  padding-block-end: clamp(2rem, 5vw, 4rem);

  text-align: center;

  border-block-end: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-ftr__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 15vw, 18rem);

  font-weight: 700;

  line-height: 0.8;

  letter-spacing: -0.05em;

  margin: 0;

  text-transform: uppercase;

  color: var(--cpf-color-white);

}



.tft-ftr__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  padding-inline: var(--cpf-nav-px);

  padding-block-end: clamp(3rem, 6vw, 5rem);

}



.tft-ftr__col {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  padding-inline: 2rem;

  border-inline-end: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-ftr__col:first-child {

  padding-inline-start: 0;

}



.tft-ftr__col:last-child {

  border-inline-end: none;

  padding-inline-end: 0;

}



.tft-ftr__link,

.tft-ftr__val {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  color: var(--cpf-color-white);

  text-decoration: none;

  line-height: 1.5;

  transition: opacity var(--cpf-transition);

}



.tft-ftr__link:hover {

  opacity: 0.6;

}



.tft-ftr__icon {

  font-size: 0.8em;

  opacity: 0.5;

  margin-inline-start: 0.2rem;

}



.tft-ftr__label {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-xs);

  color: rgba(255, 255, 255, 0.4);

  margin-block-end: 0.25rem;

  text-transform: uppercase;

  letter-spacing: 0.02em;

}



.tft-ftr__col--address {

  font-style: normal;

}



/* Copyright Bar */

.tft-ftr__bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-block: 1.5rem;

  padding-inline: var(--cpf-nav-px);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  font-size: var(--cpf-text-xs);

}



.tft-ftr__copy {

  color: rgba(255, 255, 255, 0.6);

}



.tft-ftr__legal {

  display: flex;

  gap: 2rem;

}



.tft-ftr__up {

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(10px);

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

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  cursor: pointer;

  color: var(--cpf-color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  padding: 0;

  opacity: 0.8;

  transition: all var(--cpf-transition);

}



.tft-ftr__up:hover {

  opacity: 1;

  background: rgba(255, 255, 255, 0.1);

  transform: translateY(-3px);

}



/* Tactical CTA Banner */

.tft-ftr__banner {

  background-color: var(--cpf-color-accent);

  border-block-start: 1px dashed rgba(255, 255, 255, 0.2);

  padding-block: 1rem;

  padding-inline: var(--cpf-nav-px);

  color: var(--cpf-color-dark);

}



.tft-ftr__banner-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.tft-ftr__banner-brand {

  font-family: var(--cpf-font-display);

  font-size: 1.25rem;

  letter-spacing: -0.02em;

}



.tft-ftr__banner-text {

  font-size: var(--cpf-text-xs);

  font-family: var(--cpf-font-mono);

  text-transform: uppercase;

  letter-spacing: 0.1em;

}



.tft-ftr__banner-pill {

  border: 1px solid var(--cpf-color-dark);

  border-radius: 50px;

  padding-block: 0.4rem;

  padding-inline: 1rem;

  font-size: var(--cpf-text-xs);

  font-family: var(--cpf-font-mono);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.tft-ftr__banner-btn {

  background-color: rgba(10, 10, 10, 0.85);

  backdrop-filter: blur(8px);

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

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--cpf-color-white);

  text-decoration: none;

  padding-block: 0.8rem;

  padding-inline: 1.5rem;

  border-radius: 50px;

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  transition: all var(--cpf-transition);

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.tft-ftr__banner-btn:hover {

  background-color: rgba(10, 10, 10, 1);

  transform: translateY(-2px);

}



/* Responsive */

@media (max-width: 1024px) {

  .tft-ftr__grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 3rem 0;

  }



  .tft-ftr__col {

    padding-inline: 1.5rem;

  }



  .tft-ftr__col:nth-child(even) {

    border-inline-end: none;

    padding-inline-end: 0;

  }



  .tft-ftr__col:nth-child(odd) {

    padding-inline-start: 0;

  }

}



@media (max-width: 768px) {

  .tft-ftr__grid {

    grid-template-columns: 1fr;

    gap: 0;

  }



  .tft-ftr__col {

    padding-inline: 0 !important;

    padding-block: 2rem;

    border-inline-end: none !important;

    border-block-end: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 0;

  }



  .tft-ftr__col:last-child {

    border-block-end: none;

    padding-block-end: 0;

  }



  .tft-ftr__bottom {

    flex-direction: column;

    gap: 1.5rem;

    text-align: center;

  }



  .tft-ftr__legal {

    flex-wrap: wrap;

    justify-content: center;

    gap: 1rem;

  }



  .tft-ftr__banner-inner {

    flex-direction: column;

    gap: 1.5rem;

    text-align: center;

  }

}



/* =============================================

   SECTION: About Page - Phase 1 Hero

   ============================================= */

.tft-about-hero {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  padding-block-start: clamp(8rem, 12vw, 12rem);

  padding-block-end: clamp(4rem, 8vw, 8rem);

  position: relative;

  overflow: hidden;

}



.tft-about-hero__container {

  display: flex;

  flex-direction: column;

  gap: clamp(3rem, 6vw, 5rem);

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-about-hero__top {

  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 3rem;

  align-items: flex-end;

}



.tft-about-hero__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(4rem, 12vw, 12rem);

  font-weight: 700;

  line-height: 0.85;

  letter-spacing: -0.05em;

  margin: 0;

  color: var(--cpf-color-accent);

  display: flex;

  align-items: center;

  gap: clamp(0.5rem, 2vw, 1rem);

}



.tft-about-hero__icon {

  display: inline-flex;

  opacity: 0.8;

  color: var(--cpf-color-accent);

}



.tft-about-hero__media-small {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.tft-about-hero__media-small img {

  width: 100%;

  aspect-ratio: 4/3;

  object-fit: cover;

  border-radius: var(--cpf-radius-md);

}



.tft-about-hero__caption {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.5;

  max-width: 300px;

}



.tft-about-hero__caption strong {

  color: var(--cpf-color-white);

  font-weight: 500;

}



.tft-about-hero__media-large {

  width: 100%;

}



.tft-about-hero__media-large img {

  width: 100%;

  aspect-ratio: 21/9;

  object-fit: cover;

  border-radius: var(--cpf-radius-lg);

}



@media (max-width: 1024px) {

  .tft-about-hero__top {

    grid-template-columns: 1fr;

    align-items: flex-start;

  }



  .tft-about-hero__media-small {

    max-width: 400px;

  }

}



@media (max-width: 768px) {

  .tft-about-hero__media-large img {

    aspect-ratio: 16/9;

  }

}



/* =============================================

   SECTION: About Page - Phase 2 Intro

   ============================================= */

.tft-about-intro {

  padding-block: clamp(6rem, 10vw, 10rem);

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-about-intro__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

  display: flex;

  flex-direction: column;

  gap: clamp(4rem, 8vw, 8rem);

}



.tft-about-intro__grid {

  display: grid;

  grid-template-columns: 1fr 3fr;

  gap: 3rem;

}



.tft-about-intro__heading {

  font-family: var(--cpf-font-heading);

  font-size: clamp(2rem, 4vw, 4.5rem);

  font-weight: 500;

  line-height: 1.1;

  margin-block-end: 2rem;

  letter-spacing: -0.02em;

}



.tft-about-intro__desc {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-lg);

  color: rgba(255, 255, 255, 0.7);

  max-width: 800px;

  line-height: 1.6;

}



.tft-about-intro__cards {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  padding-block-start: clamp(3rem, 5vw, 5rem);

}



.tft-about-intro__card {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.tft-about-intro__card-title {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-sm);

  letter-spacing: 0.1em;

  color: var(--cpf-color-accent);

}



.tft-about-intro__card-text {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-base);

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.6;

  max-width: 450px;

}



@media (max-width: 1024px) {

  .tft-about-intro__grid {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }

}



@media (max-width: 768px) {

  .tft-about-intro__cards {

    grid-template-columns: 1fr;

    gap: 2rem;

  }

}



/* =============================================

   SECTION: About Page - Phase 3 Tabs

   ============================================= */

.tft-about-tabs {

  padding-block: clamp(5rem, 8vw, 8rem);

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

}



.tft-about-tabs__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-about-tabs__grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(3rem, 6vw, 6rem);

  align-items: center;

}



.tft-about-tabs__img {

  width: 100%;

  aspect-ratio: 4/5;

  object-fit: cover;

  border-radius: var(--cpf-radius-lg);

}



.tft-about-tabs__content {

  display: flex;

  flex-direction: column;

  gap: 3rem;

}



.tft-about-tabs__nav {

  display: flex;

  flex-wrap: wrap;

  gap: 2rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-bottom: 1rem;

}



.tft-about-tabs__btn {

  background: none;

  border: none;

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.5);

  cursor: pointer;

  padding: 0;

  letter-spacing: 0.1em;

  transition: color var(--cpf-trans-fast);

}



.tft-about-tabs__btn:hover {

  color: var(--cpf-color-white);

}



.tft-about-tabs__btn.is-active {

  color: var(--cpf-color-accent);

}



.tft-about-tabs__panel {

  display: none;

  animation: tabFadeIn var(--cpf-trans-med) ease-out forwards;

}



.tft-about-tabs__panel.is-active {

  display: block;

}



@keyframes tabFadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.tft-about-tabs__panel-title {

  font-family: var(--cpf-font-heading);

  font-size: clamp(1.8rem, 3vw, 2.5rem);

  font-weight: 500;

  line-height: 1.1;

  margin-bottom: 1.5rem;

}



.tft-about-tabs__panel-desc {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-base);

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.6;

}



@media (max-width: 1024px) {

  .tft-about-tabs__grid {

    grid-template-columns: 1fr;

    gap: 3rem;

  }



  .tft-about-tabs__img {

    aspect-ratio: 16/9;

  }

}



/* =============================================

   SECTION: About Page - Phase 4 Founder

   ============================================= */

.tft-about-founder {

  padding-block: clamp(5rem, 8vw, 8rem);

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-about-founder__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-about-founder__grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(4rem, 8vw, 8rem);

  align-items: center;

}



.tft-about-founder__media-wrapper {

  position: relative;

}



.tft-about-founder__img {

  width: 100%;

  aspect-ratio: 3/4;

  object-fit: cover;

  border-radius: var(--cpf-radius-lg);

  filter: grayscale(100%) contrast(1.2);

}



.tft-about-founder__quote {

  position: absolute;

  bottom: -2rem;

  right: -2rem;

  background-color: var(--cpf-color-black);

  padding: 2.5rem;

  border: 1px solid rgba(255, 255, 255, 0.1);

  max-width: 80%;

  border-radius: var(--cpf-radius-md);

  margin: 0;

}



.tft-about-founder__quote::before {

  content: '"';

  font-family: var(--cpf-font-display);

  font-size: 4rem;

  color: var(--cpf-color-accent);

  position: absolute;

  top: -1rem;

  left: 1.5rem;

  line-height: 1;

}



.tft-about-founder__quote {

  font-family: var(--cpf-font-heading);

  font-size: clamp(1.2rem, 2vw, 1.5rem);

  line-height: 1.4;

  font-style: italic;

}



.tft-about-founder__cite {

  display: block;

  margin-top: 1.5rem;

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-xs);

  color: var(--cpf-color-accent);

  font-style: normal;

  letter-spacing: 0.1em;

}



.tft-about-founder__acronym-heading {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.5);

  letter-spacing: 0.1em;

  margin-bottom: 3rem;

}



.tft-about-founder__list {

  display: flex;

  flex-direction: column;

  gap: 2rem;

  list-style: none;

  padding: 0;

  margin: 0;

}



.tft-about-founder__item {

  display: flex;

  gap: 1.5rem;

  align-items: flex-start;

}



.tft-about-founder__letter {

  font-family: var(--cpf-font-display);

  font-size: 3rem;

  color: var(--cpf-color-accent);

  line-height: 1;

  font-weight: 700;

}



.tft-about-founder__text-box strong {

  display: block;

  font-family: var(--cpf-font-heading);

  font-size: 1.25rem;

  margin-bottom: 0.5rem;

  letter-spacing: 0.05em;

}



.tft-about-founder__text-box p {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.5;

  margin: 0;

}



@media (max-width: 1024px) {

  .tft-about-founder__grid {

    grid-template-columns: 1fr;

  }



  .tft-about-founder__quote {

    position: relative;

    bottom: auto;

    right: auto;

    max-width: 100%;

    margin-top: -2rem;

    margin-inline: 1rem;

  }

}



/* =============================================

   SECTION: About Page - Phase 5 Team

   ============================================= */

.tft-about-team {

  padding-block: clamp(6rem, 10vw, 10rem);

  background-color: var(--cpf-color-black);

  color: var(--cpf-color-white);

}



.tft-about-team__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

  display: flex;

  flex-direction: column;

  gap: clamp(4rem, 8vw, 6rem);

}



.tft-about-team__header {

  max-width: 600px;

}



.tft-about-team__title {

  font-family: var(--cpf-font-heading);

  font-size: clamp(3rem, 6vw, 5rem);

  font-weight: 500;

  line-height: 1;

  margin-bottom: 1rem;

}



.tft-about-team__desc {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-lg);

  color: rgba(255, 255, 255, 0.7);

}



.tft-about-team__accordion {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-about-team__details {

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-about-team__summary {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-block: 2rem;

  cursor: pointer;

  list-style: none;

}



.tft-about-team__summary::-webkit-details-marker {

  display: none;

}



.tft-about-team__summary-title {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-base);

  letter-spacing: 0.05em;

}



.tft-about-team__icon {

  font-family: var(--cpf-font-mono);

  font-size: 1.5rem;

  transition: transform var(--cpf-trans-fast);

}



.tft-about-team__details[open] .tft-about-team__icon {

  transform: rotate(45deg);

}



.tft-about-team__content {

  padding-bottom: 2rem;

  padding-right: 2rem;

}



.tft-about-team__content p {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-lg);

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.6;

  max-width: 800px;

}



.tft-about-team__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;

  margin-top: 2rem;

}



.tft-about-team__card {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.tft-about-team__photo-wrapper {

  overflow: hidden;

  border-radius: var(--cpf-radius-md);

  aspect-ratio: 3/4;

}



.tft-about-team__photo {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(100%);

  transition: filter var(--cpf-trans-slow), transform var(--cpf-trans-slow);

}



.tft-about-team__card:hover .tft-about-team__photo {

  filter: grayscale(0%);

  transform: scale(1.05);

}



.tft-about-team__name {

  font-family: var(--cpf-font-heading);

  font-size: 1.25rem;

  margin-bottom: 0.25rem;

}



.tft-about-team__role {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-xs);

  color: var(--cpf-color-accent);

  letter-spacing: 0.05em;

}



@media (max-width: 1024px) {

  .tft-about-team__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .tft-about-team__grid {

    grid-template-columns: 1fr;

  }

}



/* =============================================

   SECTION: About Page - Phase 6 Data

   ============================================= */

.tft-about-data {

  padding-block: clamp(5rem, 8vw, 8rem);

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  border-block-end: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-about-data__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-about-data__grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(4rem, 8vw, 8rem);

}



.tft-about-data__title {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.5);

  letter-spacing: 0.1em;

  margin-bottom: 3rem;

}



.tft-about-data__track {

  display: flex;

  flex-direction: column;

  position: relative;

}



.tft-about-data__track::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  width: 1px;

  background-color: rgba(255, 255, 255, 0.1);

}



.tft-about-data__event {

  position: relative;

  padding-left: 2rem;

  padding-bottom: 3rem;

}



.tft-about-data__event::before {

  content: '';

  position: absolute;

  top: 0.5rem;

  left: -4px;

  width: 9px;

  height: 9px;

  background-color: var(--cpf-color-accent);

  border-radius: 50%;

}



.tft-about-data__year {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-base);

  color: var(--cpf-color-white);

  display: block;

  margin-bottom: 0.5rem;

}



.tft-about-data__milestone {

  font-family: var(--cpf-font-heading);

  font-size: 1.5rem;

  color: rgba(255, 255, 255, 0.7);

  margin: 0;

}



.tft-about-data__metrics-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

}



.tft-about-data__metric {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  padding-top: 1.5rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-about-data__number {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 5vw, 4.5rem);

  font-weight: 700;

  line-height: 1;

  color: var(--cpf-color-white);

}



.tft-about-data__plus {

  color: var(--cpf-color-accent);

  font-size: 0.6em;

  vertical-align: super;

}



.tft-about-data__label {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-xs);

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.5);

}



@media (max-width: 768px) {

  .tft-about-data__grid {

    grid-template-columns: 1fr;

    gap: 4rem;

  }

}



/* =============================================

   SECTION: About Page - Phase 7 Partners

   ============================================= */

.tft-about-partners {

  padding-block: clamp(4rem, 6vw, 6rem);

  background-color: var(--cpf-color-black);

  border-block-end: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-about-partners__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

  text-align: center;

}



.tft-about-partners__title {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-xs);

  color: rgba(255, 255, 255, 0.4);

  letter-spacing: 0.2em;

  margin-bottom: 3rem;

}



.tft-about-partners__grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: clamp(2rem, 5vw, 4rem);

}



.tft-about-partners__logo {

  font-family: var(--cpf-font-heading);

  font-size: clamp(1.5rem, 3vw, 2.5rem);

  color: rgba(255, 255, 255, 0.2);

  letter-spacing: 0.1em;

  font-weight: 700;

  transition: color var(--cpf-trans-med);

  cursor: default;

}



.tft-about-partners__logo:hover {

  color: var(--cpf-color-white);

}



/* =============================================

   SECTION: About Page - Phase 8 Stack

   ============================================= */

.tft-about-stack {

  padding-block: clamp(6rem, 10vw, 10rem);

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

}



.tft-about-stack__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-about-stack__header {

  max-width: 700px;

  margin-bottom: clamp(4rem, 8vw, 6rem);

}



.tft-about-stack__heading {

  font-family: var(--cpf-font-heading);

  font-size: clamp(3rem, 6vw, 5rem);

  font-weight: 500;

  line-height: 1.1;

  margin-bottom: 1rem;

}



.tft-about-stack__desc {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-lg);

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.6;

}



.tft-about-stack__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: clamp(3rem, 6vw, 4rem);

}



.tft-about-stack__col {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-top: 2rem;

}



.tft-about-stack__col-title {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-sm);

  color: var(--cpf-color-accent);

  letter-spacing: 0.1em;

  margin-bottom: 2rem;

}



.tft-about-stack__list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.tft-about-stack__list li {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-base);

  color: rgba(255, 255, 255, 0.8);

  position: relative;

  padding-left: 1.5rem;

}



.tft-about-stack__list li::before {

  content: '>';

  position: absolute;

  left: 0;

  top: 0;

  color: rgba(255, 255, 255, 0.3);

  font-family: var(--cpf-font-mono);

}



@media (max-width: 900px) {

  .tft-about-stack__grid {

    grid-template-columns: 1fr;

    gap: 4rem;

  }

}



/* =============================================

   SECTION: About Page - Phase 9 Press

   ============================================= */

.tft-about-press {

  padding-block: clamp(5rem, 8vw, 8rem);

  background-color: var(--cpf-color-black);

  color: var(--cpf-color-white);

  border-block-end: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-about-press__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-about-press__title {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.5);

  letter-spacing: 0.1em;

  margin-bottom: 4rem;

}



.tft-about-press__list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

}



.tft-about-press__item {

  display: grid;

  grid-template-columns: 100px 1fr 200px;

  align-items: center;

  padding-block: 2rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  transition: background-color var(--cpf-trans-fast);

}



.tft-about-press__item:hover {

  background-color: rgba(255, 255, 255, 0.02);

}



.tft-about-press__item:last-child {

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-about-press__year {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.5);

}



.tft-about-press__award {

  font-family: var(--cpf-font-heading);

  font-size: clamp(1.25rem, 3vw, 2rem);

  font-weight: 500;

}



.tft-about-press__org {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-sm);

  color: var(--cpf-color-accent);

  text-align: right;

  letter-spacing: 0.1em;

}



@media (max-width: 768px) {

  .tft-about-press__item {

    grid-template-columns: 1fr;

    gap: 0.5rem;

  }



  .tft-about-press__org {

    text-align: left;

  }



  .tft-about-press__year {

    margin-bottom: 0.5rem;

  }

}



/* =============================================

   SECTION: Hero Layout Fixes (Eliminate Emptiness)

   ============================================= */

.tft-about-hero__top {

  display: flex !important;

  justify-content: space-between !important;

  white-space: nowrap !important;

  align-items: center !important;

  gap: 2rem !important;

  flex-wrap: wrap !important;

}



.tft-about-hero__title {

  font-size: clamp(5rem, 16vw, 18rem) !important;

  flex: 1 !important;

  line-height: 0.8 !important;

}



.tft-about-hero__media-small {

  max-width: 380px !important;

  /* Slightly wider to balance the massive text */

  flex-shrink: 0 !important;

  margin-bottom: 2rem !important;

}



.tft-about-hero__media-small img {

  aspect-ratio: 16/9 !important;

  /* Cinematic crop instead of boxy 4/3 */

}



.tft-about-hero__caption {

  font-size: var(--cpf-text-base) !important;

  /* Slightly larger text */

}



@media (max-width: 1024px) {

  .tft-about-hero__top {

    flex-direction: column !important;

    align-items: flex-start !important;

  }



  .tft-about-hero__title {

    font-size: clamp(6rem, 20vw, 12rem) !important;

  }

}



/* =============================================

   SECTION: Cinematic About Hero Redesign

   ============================================= */

.tft-about-hero__layout {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: clamp(4rem, 8vw, 8rem) !important;

  align-items: center !important;

  min-height: 80vh !important;

}



.tft-about-hero__text-col {

  display: flex !important;

  flex-direction: column !important;

  gap: 2rem !important;

}



.tft-about-hero__label {

  display: inline-flex !important;

  align-items: center !important;

  gap: 1rem !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: var(--cpf-text-sm) !important;

  color: rgba(255, 255, 255, 0.7) !important;

  letter-spacing: 0.1em !important;

}



.tft-about-hero__dot {

  width: 8px !important;

  height: 8px !important;

  background-color: var(--cpf-color-accent) !important;

  border-radius: 50% !important;

  box-shadow: 0 0 10px var(--cpf-color-accent) !important;

}



.tft-about-hero__massive-text {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(4rem, 7vw, 8rem) !important;

  font-weight: 500 !important;

  line-height: 0.9 !important;

  letter-spacing: -0.02em !important;

  margin: 0 !important;

  color: var(--cpf-color-white) !important;

}



.tft-about-hero__text-accent {

  color: var(--cpf-color-accent) !important;

  font-style: italic !important;

}



.tft-about-hero__subtext {

  font-family: var(--cpf-font-body) !important;

  font-size: var(--cpf-text-lg) !important;

  color: rgba(255, 255, 255, 0.6) !important;

  max-width: 500px !important;

  line-height: 1.6 !important;

}



.tft-about-hero__visual-col {

  position: relative !important;

}



.tft-about-hero__image-grid {

  position: relative !important;

  display: flex !important;

  justify-content: flex-end !important;

}



.tft-about-hero__img-primary {

  width: 80% !important;

  aspect-ratio: 4/5 !important;

  object-fit: cover !important;

  border-radius: var(--cpf-radius-lg) !important;

  filter: grayscale(100%) !important;

}



.tft-about-hero__glass-card {

  position: absolute !important;

  bottom: -4rem !important;

  left: -2rem !important;

  width: 55% !important;

  background: rgba(20, 20, 20, 0.6) !important;

  backdrop-filter: blur(16px) !important;

  -webkit-backdrop-filter: blur(16px) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding: 1.5rem !important;

  border-radius: var(--cpf-radius-md) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 1.5rem !important;

}



.tft-about-hero__img-secondary {

  width: 100% !important;

  aspect-ratio: 16/9 !important;

  object-fit: cover !important;

  border-radius: var(--cpf-radius-sm) !important;

  filter: grayscale(100%) !important;

}



.tft-about-hero__glass-content {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

}



.tft-about-hero__glass-content strong {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.5rem !important;

  color: var(--cpf-color-white) !important;

}



.tft-about-hero__glass-content span {

  font-family: var(--cpf-font-mono) !important;

  font-size: var(--cpf-text-xs) !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.1em !important;

}



@media (max-width: 1024px) {

  .tft-about-hero__layout {

    grid-template-columns: 1fr !important;

    min-height: auto !important;

    padding-top: 4rem !important;

  }



  .tft-about-hero__glass-card {

    left: 2rem !important;

    bottom: -2rem !important;

  }

}



/* =============================================

   SECTION: Phase 2 (Intro) Redesign

   ============================================= */

.tft-about-intro__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: var(--cpf-text-xs) !important;

  letter-spacing: 0.1em !important;

  color: rgba(255, 255, 255, 0.5) !important;

  display: flex !important;

  align-items: center !important;

  gap: 1rem !important;

}



.tft-about-intro__label::before {

  content: '';

  width: 40px;

  height: 1px;

  background: var(--cpf-color-accent);

}



.tft-about-intro__right {

  position: relative !important;

}



.tft-about-intro__quote-mark {

  position: absolute !important;

  top: -4rem !important;

  left: -2rem !important;

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(8rem, 15vw, 12rem) !important;

  line-height: 1 !important;

  color: rgba(255, 255, 255, 0.05) !important;

  z-index: 0 !important;

}



.tft-about-intro__heading {

  position: relative !important;

  z-index: 1 !important;

  letter-spacing: -0.03em !important;

}



.tft-about-intro__highlight {

  color: var(--cpf-color-accent) !important;

  font-style: italic !important;

}



.tft-about-intro__divider {

  width: 100% !important;

  height: 1px !important;

  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%) !important;

  margin-block: 2rem !important;

}



.tft-about-intro__cards {

  gap: 4rem !important;

}



.tft-about-intro__card {

  position: relative !important;

  padding-top: 2rem !important;

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

  transition: border-color var(--cpf-trans-fast) !important;

}



.tft-about-intro__card:hover {

  border-top-color: var(--cpf-color-accent) !important;

}



.tft-about-intro__card-icon {

  position: absolute !important;

  top: -1.5rem !important;

  right: 0 !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 3rem !important;

  color: rgba(255, 255, 255, 0.05) !important;

  font-weight: 700 !important;

}



/* =============================================

   SECTION: Phase 3 (Tabs) Redesign

   ============================================= */

.tft-about-tabs__media {

  position: relative !important;

}



.tft-about-tabs__img-frame {

  position: relative !important;

  padding: 1rem !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  border-radius: var(--cpf-radius-lg) !important;

}



.tft-about-tabs__img {

  border-radius: calc(var(--cpf-radius-lg) - 0.5rem) !important;

  filter: grayscale(100%) contrast(1.1) !important;

}



.tft-about-tabs__img-overlay {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%) !important;

  border-radius: var(--cpf-radius-lg) !important;

  pointer-events: none !important;

}



.tft-about-tabs__glass-panel {

  background: rgba(20, 20, 20, 0.4) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-radius: var(--cpf-radius-md) !important;

  padding: 3rem !important;

}



.tft-about-tabs__nav {

  display: flex !important;

  gap: 0.5rem !important;

  border-bottom: none !important;

  background: rgba(0, 0, 0, 0.2) !important;

  padding: 0.5rem !important;

  border-radius: 100px !important;

  width: fit-content !important;

  margin-bottom: 2rem !important;

}



.tft-about-tabs__btn {

  padding: 0.75rem 1.5rem !important;

  border-radius: 100px !important;

  color: rgba(255, 255, 255, 0.5) !important;

  transition: all var(--cpf-trans-fast) !important;

}



.tft-about-tabs__btn:hover {

  color: var(--cpf-color-white) !important;

  background: rgba(255, 255, 255, 0.05) !important;

}



.tft-about-tabs__btn.is-active {

  color: var(--cpf-color-black) !important;

  background: var(--cpf-color-accent) !important;

  font-weight: 700 !important;

}



.tft-about-tabs__panel-subtitle {

  display: inline-block !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: var(--cpf-text-xs) !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.15em !important;

  margin-bottom: 1rem !important;

}



.tft-about-tabs__panel-title {

  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;

  letter-spacing: -0.02em !important;

  margin-bottom: 2rem !important;

}



/* =============================================

   SECTION: Phase 2 Clean Cards Redesign

   ============================================= */

.tft-about-intro__divider {

  display: none !important;

}



.tft-about-intro__cards {

  gap: 3rem !important;

  margin-top: 5rem !important;

}



.tft-about-intro__card {

  padding-top: 0 !important;

  border-top: none !important;

  background: rgba(20, 20, 20, 0.4) !important;

  padding: 3rem !important;

  border-radius: var(--cpf-radius-md) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  transition: all var(--cpf-trans-fast) !important;

}



.tft-about-intro__card:hover {

  background: rgba(30, 30, 30, 0.8) !important;

  border-color: rgba(255, 255, 255, 0.1) !important;

  transform: translateY(-5px) !important;

}



.tft-about-intro__card-icon {

  display: none !important;

}



.tft-about-intro__card-title {

  display: flex !important;

  align-items: center !important;

  font-size: 1.25rem !important;

  margin-bottom: 1.5rem !important;

  letter-spacing: 0.05em !important;

}



.tft-about-intro__card-num {

  font-family: var(--cpf-font-mono) !important;

  color: var(--cpf-color-accent) !important;

  margin-right: 1rem !important;

  font-size: 1rem !important;

}



.tft-about-intro__card-text {

  margin: 0 !important;

  font-size: var(--cpf-text-base) !important;

  line-height: 1.6 !important;

  color: rgba(255, 255, 255, 0.7) !important;

}



/* =============================================

   SECTION: Phase 3 Tabs Wrapping Fix

   ============================================= */

.tft-about-tabs__nav {

  flex-wrap: nowrap !important;

  overflow-x: auto !important;

  max-width: 100% !important;

  padding-right: 2rem !important;

  /* allow scrolling space */

}



.tft-about-tabs__btn {

  white-space: nowrap !important;

  padding: 0.75rem 1.25rem !important;

}



/* =============================================

   SECTION: Phase 4 Process (E.L.I.T.E) Premium Redesign

   ============================================= */

.tft-about-founder__list {

  display: flex !important;

  flex-direction: column !important;

  gap: 0 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

  margin-top: 2rem !important;

}



.tft-about-founder__item {

  display: flex !important;

  gap: 2rem !important;

  align-items: center !important;

  padding: 2rem 1rem !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  transition: background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), padding-left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

  cursor: default !important;

}



.tft-about-founder__item:hover {

  background: rgba(255, 255, 255, 0.02) !important;

  padding-left: 2.5rem !important;

}



.tft-about-founder__letter {

  font-family: var(--cpf-font-display) !important;

  font-size: 3rem !important;

  color: rgba(255, 255, 255, 0.1) !important;

  transition: color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

  min-width: 3rem !important;

}



.tft-about-founder__item:hover .tft-about-founder__letter {

  color: var(--cpf-color-accent) !important;

}



/* =============================================

   SECTION: Phase 5 Team Accordion Premium Redesign

   ============================================= */

.tft-about-team__accordion {

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

  margin-top: 3rem !important;

}



.tft-about-team__details {

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  transition: background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

}



.tft-about-team__details:hover {

  background: rgba(255, 255, 255, 0.02) !important;

}



.tft-about-team__summary {

  padding-block: 2.5rem !important;

  padding-inline: 1rem !important;

  transition: padding-left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

}



.tft-about-team__details:hover .tft-about-team__summary {

  padding-left: 2.5rem !important;

}



.tft-about-team__summary-title {

  color: rgba(255, 255, 255, 0.5) !important;

  transition: color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

}



.tft-about-team__details:hover .tft-about-team__summary-title {

  color: var(--cpf-color-white) !important;

}



.tft-about-team__details[open] .tft-about-team__summary-title {

  color: var(--cpf-color-accent) !important;

}



.tft-about-team__icon {

  color: rgba(255, 255, 255, 0.5) !important;

  transition: color 0.4s ease, transform 0.4s ease !important;

}



.tft-about-team__details:hover .tft-about-team__icon {

  color: var(--cpf-color-accent) !important;

}



.tft-about-team__content {

  padding-inline: 2.5rem !important;

  /* align with new hover padding */

  padding-bottom: 3rem !important;

}



/* Fix Jumpiness on Intro Cards */

.tft-about-intro__card {

  transition: background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

}



.tft-about-tabs__btn {

  transition: background 0.2s ease, color 0.2s ease !important;

}



/* =============================================

   MASSIVE INTERACTIVE OVERHAUL (PHASE 2, 3, 5, 6, 7)

   ============================================= */



/* Phase 2: Intro Editorial (Massive Typography) */

.tft-about-intro__editorial {

  display: flex !important;

  flex-direction: column !important;

  gap: 6rem !important;

  margin-top: 5rem !important;

}



.tft-about-intro__ed-block {

  display: flex !important;

  flex-direction: column !important;

  gap: 1.5rem !important;

  border-left: 2px solid rgba(255, 255, 255, 0.05) !important;

  padding-left: 3rem !important;

  transition: border-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

}



.tft-about-intro__ed-block:hover {

  border-left-color: var(--cpf-color-accent) !important;

}



.tft-about-intro__ed-header {

  display: flex !important;

  align-items: center !important;

  gap: 1.5rem !important;

}



.tft-about-intro__ed-num {

  font-family: var(--cpf-font-mono) !important;

  font-size: clamp(2rem, 4vw, 3rem) !important;

  color: var(--cpf-color-accent) !important;

}



.tft-about-intro__ed-title {

  font-size: clamp(2.5rem, 5vw, 4rem) !important;

  letter-spacing: -0.03em !important;

}



.tft-about-intro__ed-text {

  font-size: clamp(1.25rem, 2vw, 1.5rem) !important;

  line-height: 1.5 !important;

  color: rgba(255, 255, 255, 0.6) !important;

  max-width: 800px !important;

}





/* Phase 3: Tabs Premium Borderless */

.tft-about-tabs__nav-premium {

  display: flex !important;

  flex-direction: column !important;

  gap: 1.5rem !important;

  margin-bottom: 4rem !important;

}



.tft-about-tabs__btn-premium {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(3rem, 5vw, 4.5rem) !important;

  color: rgba(255, 255, 255, 0.1) !important;

  text-align: left !important;

  letter-spacing: -0.02em !important;

  transition: color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

  width: fit-content !important;

}



.tft-about-tabs__btn-premium:hover {

  color: rgba(255, 255, 255, 0.5) !important;

  transform: translateX(10px) !important;

}



.tft-about-tabs__btn-premium.is-active {

  color: var(--cpf-color-white) !important;

}



#tft-about-tab-img {

  transition: opacity 0.3s ease !important;

}





/* Phase 5: Massive Accordion */

.tft-about-team__accordion-premium {

  display: flex !important;

  flex-direction: column !important;

  gap: 1rem !important;

  margin-top: 4rem !important;

}



.tft-about-team__details-premium {

  background: rgba(20, 20, 20, 0.4) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-radius: var(--cpf-radius-md) !important;

  transition: background 0.4s ease !important;

}



.tft-about-team__details-premium:hover {

  background: rgba(30, 30, 30, 0.8) !important;

}



.tft-about-team__summary-premium {

  display: grid !important;

  grid-template-columns: auto 1fr auto !important;

  align-items: center !important;

  gap: 2rem !important;

  padding: 3rem !important;

  cursor: pointer !important;

  list-style: none !important;

}



.tft-about-team__summary-num {

  font-family: var(--cpf-font-mono) !important;

  color: var(--cpf-color-accent) !important;

  font-size: 1.25rem !important;

}



.tft-about-team__summary-title {

  font-size: clamp(2rem, 3vw, 2.5rem) !important;

  color: var(--cpf-color-white) !important;

  transition: color 0.4s ease !important;

}



.tft-about-team__icon-premium {

  width: 20px !important;

  height: 2px !important;

  background: var(--cpf-color-white) !important;

  position: relative !important;

  transition: transform 0.4s ease !important;

}



.tft-about-team__icon-premium::after {

  content: '' !important;

  position: absolute !important;

  top: -9px !important;

  left: 9px !important;

  width: 2px !important;

  height: 20px !important;

  background: var(--cpf-color-white) !important;

  transition: transform 0.4s ease, opacity 0.4s ease !important;

}



.tft-about-team__details-premium[open] .tft-about-team__icon-premium::after {

  transform: rotate(90deg) !important;

  opacity: 0 !important;

}



.tft-about-team__content-premium {

  padding: 0 3rem 3rem 3rem !important;

  font-size: 1.25rem !important;

  line-height: 1.6 !important;

  color: rgba(255, 255, 255, 0.6) !important;

  max-width: 800px !important;

}





/* Phase 6: Metrics Dashboard */

.tft-about-data__grid-premium {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 6rem !important;

}



.tft-about-data__trajectory-premium {

  position: relative !important;

}



.tft-about-data__timeline-premium {

  position: relative !important;

  padding-left: 2rem !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 4rem !important;

}



.tft-about-data__timeline-premium::before {

  content: '' !important;

  position: absolute !important;

  top: 0 !important;

  bottom: 0 !important;

  left: 0 !important;

  width: 2px !important;

  background: rgba(255, 255, 255, 0.05) !important;

}



.tft-about-data__event-premium {

  position: relative !important;

}



.tft-about-data__node {

  position: absolute !important;

  left: -2.35rem !important;

  top: 0.25rem !important;

  width: 12px !important;

  height: 12px !important;

  background: #111 !important;

  border: 2px solid rgba(255, 255, 255, 0.2) !important;

  border-radius: 50% !important;

  transition: all 0.4s ease !important;

  z-index: 2 !important;

}



.tft-about-data__event-premium:hover .tft-about-data__node,

.tft-about-data__node.is-active {

  background: var(--cpf-color-accent) !important;

  border-color: var(--cpf-color-accent) !important;

  box-shadow: 0 0 15px var(--cpf-color-accent) !important;

}



.tft-about-data__stats-grid {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 4rem !important;

}



.tft-about-data__stat-premium {

  display: flex !important;

  flex-direction: column !important;

}



.tft-about-data__number {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(4rem, 8vw, 6rem) !important;

  line-height: 1 !important;

  color: var(--cpf-color-white) !important;

}



.tft-about-data__plus {

  color: var(--cpf-color-accent) !important;

}





/* Phase 7: Infinite Marquee */

.tft-about-partners__marquee {

  overflow: hidden !important;

  white-space: nowrap !important;

  position: relative !important;

  width: 100vw !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  padding-block: 4rem !important;

  border-block: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-about-partners__marquee-track {

  display: inline-flex !important;

  animation: marquee 20s linear infinite !important;

}



.tft-about-partners__marquee-track:hover {

  animation-play-state: paused !important;

}



.tft-about-partners__logo-premium {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(3rem, 6vw, 5rem) !important;

  color: rgba(255, 255, 255, 0.05) !important;

  margin-inline: 4rem !important;

  transition: color 0.4s ease !important;

  cursor: default !important;

}



.tft-about-partners__logo-premium:hover {

  color: var(--cpf-color-white) !important;

}



@keyframes marquee {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



@media (max-width: 1024px) {

  .tft-about-data__grid-premium {

    grid-template-columns: 1fr !important;

  }

}



/* Phase 5: Team Grid Magnetic Focus */

.tft-about-team__grid {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 2rem !important;

  margin-top: 4rem !important;

}



.tft-about-team__card {

  position: relative !important;

  overflow: hidden !important;

  border-radius: var(--cpf-radius-md) !important;

  transition: filter 0.4s ease, transform 0.4s ease !important;

  cursor: crosshair !important;

}



.tft-about-team__grid:hover .tft-about-team__card:not(:hover) {

  filter: grayscale(100%) opacity(0.3) !important;

  transform: scale(0.95) !important;

}



.tft-about-team__card:hover {

  transform: scale(1.05) !important;

  z-index: 10 !important;

}



.tft-about-team__photo-wrapper {

  position: relative !important;

  width: 100% !important;

  aspect-ratio: 3/4 !important;

}



.tft-about-team__photo {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.tft-about-team__info {

  position: absolute !important;

  bottom: 0 !important;

  left: 0 !important;

  width: 100% !important;

  padding: 2rem !important;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent) !important;

  transform: translateY(100%) !important;

  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

}



.tft-about-team__card:hover .tft-about-team__info {

  transform: translateY(0) !important;

}



.tft-about-team__name {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.5rem !important;

  color: var(--cpf-color-white) !important;

}



.tft-about-team__role {

  color: var(--cpf-color-accent) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.875rem !important;

  margin-top: 0.5rem !important;

  display: block !important;

}



/* =============================================

   PHASE 3: HORIZONTAL IMAGE ACCORDION

   ============================================= */

.tft-about-tabs__split {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  border-radius: var(--cpf-radius-lg) !important;

  overflow: hidden !important;

  background: #111 !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-about-tabs__image-accordion {

  display: flex !important;

  width: 100% !important;

  min-height: 500px !important;

  background: #000 !important;

}



.tft-about-tabs__img-slice {

  flex: 0 0 15% !important;

  /* Inactive slice width */

  height: 100% !important;

  position: relative !important;

  overflow: hidden !important;

  transition: flex 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

  border-right: 1px solid #000 !important;

}



.tft-about-tabs__img-slice.is-active {

  flex: 1 1 70% !important;

  /* Active slice width */

}



.tft-about-tabs__img-slice img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  position: absolute !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  opacity: 0.5 !important;

  transition: opacity 0.6s ease !important;

}



.tft-about-tabs__img-slice.is-active img {

  opacity: 1 !important;

}



.tft-about-tabs__content-box {

  display: flex !important;

  flex-direction: column !important;

}



.tft-about-tabs__header {

  display: flex !important;

  width: 100% !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-about-tabs__toggle {

  flex: 1 !important;

  padding: 1.5rem 1rem !important;

  background: transparent !important;

  border: none !important;

  color: rgba(255, 255, 255, 0.4) !important;

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.25rem !important;

  cursor: pointer !important;

  transition: all 0.3s ease !important;

  text-align: center !important;

}



.tft-about-tabs__toggle:hover {

  background: rgba(255, 255, 255, 0.02) !important;

  color: rgba(255, 255, 255, 0.8) !important;

}



.tft-about-tabs__toggle.is-active {

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

}



.tft-about-tabs__panels {

  padding: 4rem 3rem !important;

  flex: 1 !important;

}



.tft-about-tabs__panel-subtitle {

  font-family: var(--cpf-font-mono) !important;

  color: var(--cpf-color-accent) !important;

  display: block !important;

  margin-bottom: 1rem !important;

}



.tft-about-tabs__panel-title {

  font-size: clamp(2rem, 3vw, 2.5rem) !important;

  margin-bottom: 2rem !important;

  color: var(--cpf-color-white) !important;

}



.tft-about-tabs__panel-list {

  display: flex !important;

  flex-direction: column !important;

  gap: 1rem !important;

  list-style: none !important;

  padding: 0 !important;

}



.tft-about-tabs__panel-list li {

  position: relative !important;

  padding-left: 1.5rem !important;

  color: rgba(255, 255, 255, 0.7) !important;

  line-height: 1.6 !important;

}



.tft-about-tabs__panel-list li::before {

  content: '�' !important;

  position: absolute !important;

  left: 0 !important;

  color: var(--cpf-color-accent) !important;

}





/* =============================================

   PHASE 8: TECHNICAL MASTERY (PREMIUM GRID)

   ============================================= */

.tft-about-stack__header-premium {

  margin-bottom: 4rem !important;

  max-width: 800px !important;

}



.tft-about-stack__heading-premium {

  font-size: clamp(3rem, 5vw, 4.5rem) !important;

  letter-spacing: -0.02em !important;

  margin-bottom: 1rem !important;

}



.tft-about-stack__desc-premium {

  font-size: 1.25rem !important;

  color: rgba(255, 255, 255, 0.6) !important;

  line-height: 1.6 !important;

}



.tft-about-stack__grid-premium {

  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap: 2rem !important;

}



.tft-about-stack__card-premium {

  background: rgba(20, 20, 20, 0.4) !important;

  border-top: 2px solid rgba(255, 255, 255, 0.05) !important;

  padding: 3rem 2rem !important;

  transition: background 0.4s ease, border-color 0.4s ease !important;

}



.tft-about-stack__card-premium:hover {

  background: rgba(30, 30, 30, 0.8) !important;

  border-top-color: var(--cpf-color-accent) !important;

}



.tft-about-stack__card-title {

  font-size: 1.5rem !important;

  margin-bottom: 2rem !important;

  display: flex !important;

  gap: 0.5rem !important;

}



.tft-about-stack__card-title span {

  color: var(--cpf-color-accent) !important;

  font-family: var(--cpf-font-mono) !important;

}



.tft-about-stack__card-list {

  list-style: none !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 1rem !important;

}



.tft-about-stack__card-list li {

  color: rgba(255, 255, 255, 0.6) !important;

  display: flex !important;

  align-items: center !important;

  gap: 0.75rem !important;

  transition: color 0.3s ease, transform 0.3s ease !important;

}



.tft-about-stack__card-list li::before {

  content: '?' !important;

  color: var(--cpf-color-accent) !important;

  opacity: 0 !important;

  transform: translateX(-10px) !important;

  transition: opacity 0.3s ease, transform 0.3s ease !important;

}



.tft-about-stack__card-premium:hover .tft-about-stack__card-list li {

  color: var(--cpf-color-white) !important;

  transform: translateX(10px) !important;

}



.tft-about-stack__card-premium:hover .tft-about-stack__card-list li::before {

  opacity: 1 !important;

  transform: translateX(0) !important;

}





/* =============================================

   PHASE 9: AWARDS LIST (PREMIUM ROWS)

   ============================================= */

.tft-about-press__heading-premium {

  font-family: var(--cpf-font-mono) !important;

  color: rgba(255, 255, 255, 0.4) !important;

  font-size: 1rem !important;

  letter-spacing: 0.1em !important;

  margin-bottom: 3rem !important;

}



.tft-about-press__list-premium {

  list-style: none !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

}



.tft-about-press__item-premium {

  display: grid !important;

  grid-template-columns: 100px 1fr 200px !important;

  align-items: center !important;

  padding: 2.5rem 1rem !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  transition: background 0.4s ease, padding-left 0.4s ease !important;

}



.tft-about-press__item-premium:hover {

  background: var(--cpf-color-accent) !important;

  padding-left: 2.5rem !important;

  color: #000 !important;

}



.tft-about-press__year-premium {

  font-family: var(--cpf-font-mono) !important;

  color: rgba(255, 255, 255, 0.4) !important;

  transition: color 0.4s ease !important;

}



.tft-about-press__item-premium:hover .tft-about-press__year-premium {

  color: rgba(0, 0, 0, 0.5) !important;

}



.tft-about-press__award-premium {

  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;

  color: var(--cpf-color-white) !important;

  transition: color 0.4s ease !important;

}



.tft-about-press__item-premium:hover .tft-about-press__award-premium {

  color: #000 !important;

}



.tft-about-press__org-premium {

  font-family: var(--cpf-font-mono) !important;

  color: var(--cpf-color-accent) !important;

  text-align: right !important;

  transition: color 0.4s ease !important;

}



.tft-about-press__item-premium:hover .tft-about-press__org-premium {

  color: #000 !important;

}



@media (max-width: 1024px) {

  .tft-about-tabs__split {

    grid-template-columns: 1fr !important;

  }



  .tft-about-stack__grid-premium {

    grid-template-columns: 1fr !important;

  }



  .tft-about-press__item-premium {

    grid-template-columns: 1fr !important;

    gap: 1rem !important;

  }

}



/* =============================================

   FOOTER REDESIGN (Premium, Split Layout)

   ============================================= */



/* Banner */

.tft-ftr__banner-premium {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  background: #111 !important;

  padding: 1.5rem 3rem !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-top: 2px solid var(--cpf-color-accent) !important;

}



.tft-ftr__banner-text {

  font-family: var(--cpf-font-heading) !important;

  color: var(--cpf-color-white) !important;

  font-size: 1.25rem !important;

  letter-spacing: 0.05em !important;

}



.tft-ftr__banner-status {

  display: flex !important;

  align-items: center !important;

  gap: 0.5rem !important;

  font-family: var(--cpf-font-mono) !important;

  color: rgba(255, 255, 255, 0.6) !important;

  font-size: 0.875rem !important;

}



.tft-ftr__pulse {

  display: inline-block !important;

  width: 8px !important;

  height: 8px !important;

  background-color: var(--cpf-color-accent) !important;

  border-radius: 50% !important;

  animation: tft-pulse 2s infinite !important;

}



@keyframes tft-pulse {

  0% {

    box-shadow: 0 0 0 0 rgba(226, 255, 0, 0.4);

  }



  70% {

    box-shadow: 0 0 0 10px rgba(226, 255, 0, 0);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(226, 255, 0, 0);

  }

}



.tft-ftr__banner-btn {

  background: var(--cpf-color-white) !important;

  color: #000 !important;

  padding: 0.75rem 1.5rem !important;

  border-radius: 2rem !important;

  font-family: var(--cpf-font-mono) !important;

  text-decoration: none !important;

  font-weight: 600 !important;

  transition: transform 0.3s ease, background 0.3s ease !important;

}



.tft-ftr__banner-btn:hover {

  background: var(--cpf-color-accent) !important;

  transform: translateY(-2px) !important;

}



/* Main Split */

.tft-ftr__main-split {

  display: flex !important;

  justify-content: space-between !important;

  padding: 6rem 0 !important;

  gap: 4rem !important;

}



.tft-ftr__brand-col {

  flex: 0 0 40% !important;

}



.tft-ftr__title-premium {

  font-size: clamp(4rem, 8vw, 7rem) !important;

  line-height: 0.9 !important;

  letter-spacing: -0.04em !important;

  margin-bottom: 2rem !important;

  color: transparent !important;

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2) !important;

  transition: color 0.4s ease, -webkit-text-stroke 0.4s ease !important;

  cursor: default !important;

}



.tft-ftr__title-premium:hover {

  color: var(--cpf-color-white) !important;

  -webkit-text-stroke: 1px transparent !important;

}



.tft-ftr__brand-desc {

  font-family: var(--cpf-font-mono) !important;

  color: var(--cpf-color-accent) !important;

  font-size: 1rem !important;

}



.tft-ftr__grid-premium {

  flex: 1 !important;

  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap: 2rem !important;

}



.tft-ftr__col-heading {

  font-family: var(--cpf-font-mono) !important;

  color: rgba(255, 255, 255, 0.4) !important;

  font-size: 0.75rem !important;

  letter-spacing: 0.1em !important;

  margin-bottom: 1.5rem !important;

}



.tft-ftr__contact-links {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

  margin-top: 1rem !important;

}



.tft-ftr__social-nav {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

}



@media (max-width: 1024px) {

  .tft-ftr__main-split {

    flex-direction: column !important;

  }



  .tft-ftr__grid-premium {

    grid-template-columns: 1fr 1fr !important;

  }



  .tft-ftr__banner-premium {

    flex-direction: column !important;

    gap: 1rem !important;

    text-align: center !important;

  }

}



@media (max-width: 640px) {

  .tft-ftr__grid-premium {

    grid-template-columns: 1fr !important;

  }

}



/* =============================================

   PHASE 6: METRICS ENHANCEMENT

   ============================================= */

.tft-about-data__stat-premium {

  background: rgba(20, 20, 20, 0.6) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  padding: 3rem 2rem !important;

  border-radius: var(--cpf-radius-lg) !important;

  text-align: center !important;

  transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease !important;

}



.tft-about-data__stat-premium:hover {

  transform: translateY(-10px) !important;

  border-color: var(--cpf-color-accent) !important;

  background: rgba(255, 255, 255, 0.02) !important;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;

}



.tft-about-data__number {

  font-size: clamp(3rem, 6vw, 5rem) !important;

  line-height: 1 !important;

  color: var(--cpf-color-white) !important;

  display: block !important;

  margin-bottom: 1rem !important;

  font-family: var(--cpf-font-heading) !important;

}



.tft-about-data__label {

  font-family: var(--cpf-font-mono) !important;

  color: var(--cpf-color-accent) !important;

  font-size: 0.875rem !important;

  letter-spacing: 0.1em !important;

}



.tft-about-data__stats-grid {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 1.5rem !important;

}



.tft-about-data__trajectory-premium {

  padding-right: 4rem !important;

}



/* Footer Title Fix - Make it solid white instead of outline */

.tft-ftr__title-premium {

  color: var(--cpf-color-white) !important;

  -webkit-text-stroke: 0 !important;

}



/* =============================================

   ELITE FOOTER REDESIGN (2026)

   ============================================= */

.tft-ftr-premium {

  background: #080808 !important;

  color: #fff !important;

  padding: 0 !important;

  position: relative !important;

  overflow: hidden !important;

  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-ftr-premium__status-bar {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding: 0.75rem 2rem !important;

  background: #000 !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-ftr-premium__status-left {

  display: flex !important;

  align-items: center !important;

  gap: 0.75rem !important;

}



.tft-ftr-premium__pulse {

  width: 6px !important;

  height: 6px !important;

  background: var(--cpf-color-accent) !important;

  border-radius: 50% !important;

  box-shadow: 0 0 10px var(--cpf-color-accent) !important;

  animation: tft-pulse-elite 2s infinite !important;

}



@keyframes tft-pulse-elite {

  0% {

    opacity: 0.3;

    transform: scale(0.8);

  }



  50% {

    opacity: 1;

    transform: scale(1.2);

  }



  100% {

    opacity: 0.3;

    transform: scale(0.8);

  }

}



.tft-ftr-premium__status-text {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.15em !important;

  color: rgba(255, 255, 255, 0.4) !important;

}



.tft-ftr-premium__time {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  color: var(--cpf-color-accent) !important;

}



.tft-ftr-premium__container {

  max-width: 1440px !important;

  margin: 0 auto !important;

  padding: 6rem 2rem 2rem !important;

}



.tft-ftr-premium__layout {

  display: flex !important;

  justify-content: space-between !important;

  gap: 4rem !important;

  margin-bottom: 6rem !important;

}



.tft-ftr-premium__branding {

  flex: 0 0 45% !important;

}



.tft-ftr-premium__logo {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(4rem, 10vw, 8rem) !important;

  line-height: 0.85 !important;

  letter-spacing: -0.04em !important;

  margin-bottom: 2rem !important;

  text-transform: uppercase !important;

}



.tft-ftr-premium__tagline {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.9rem !important;

  line-height: 1.6 !important;

  color: rgba(255, 255, 255, 0.4) !important;

}



.tft-ftr-premium__data {

  flex: 1 !important;

}



.tft-ftr-premium__grid {

  display: grid !important;

  grid-template-areas:

    "contact contact"

    "social location"

    "cta cta" !important;

  grid-template-columns: 1fr 1.2fr !important;

  gap: 3rem !important;

}



.tft-ftr-premium__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.1em !important;

  color: var(--cpf-color-accent) !important;

  margin-bottom: 1.5rem !important;

}



.tft-ftr-premium__link {

  display: block !important;

  color: #fff !important;

  text-decoration: none !important;

  font-size: 1rem !important;

  margin-bottom: 0.5rem !important;

  transition: opacity 0.3s ease !important;

}



.tft-ftr-premium__link:hover {

  opacity: 0.6 !important;

}



.tft-ftr-premium__link--large {

  font-size: 1.5rem !important;

  font-weight: 500 !important;

}



.tft-ftr-premium__nav {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

}



.tft-ftr-premium__address {

  font-style: normal !important;

  line-height: 1.6 !important;

  color: rgba(255, 255, 255, 0.6) !important;

}



/* Unique Circular CTA */

.tft-ftr-premium__cta-wrap {

  display: flex !important;

  justify-content: flex-end !important;

  margin-top: 2rem !important;

}



.tft-ftr-premium__cta {

  width: 140px !important;

  height: 140px !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-decoration: none !important;

  position: relative !important;

  overflow: hidden !important;

  transition: border-color 0.4s ease !important;

}



.tft-ftr-premium__cta-text {

  position: relative !important;

  z-index: 2 !important;

  color: #fff !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.75rem !important;

  text-align: center !important;

  font-weight: 700 !important;

  line-height: 1.1 !important;

  transition: color 0.4s ease !important;

}



.tft-ftr-premium__cta-liquid {

  position: absolute !important;

  top: 100% !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  background: var(--cpf-color-accent) !important;

  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

  z-index: 1 !important;

}



.tft-ftr-premium__cta:hover {

  border-color: var(--cpf-color-accent) !important;

}



.tft-ftr-premium__cta:hover .tft-ftr-premium__cta-liquid {

  transform: translateY(-100%) !important;

}



.tft-ftr-premium__cta:hover .tft-ftr-premium__cta-text {

  color: #000 !important;

}



/* Bottom Bar */

.tft-ftr-premium__bottom {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-top: 2rem !important;

  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-ftr-premium__copyright {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.6rem !important;

  color: rgba(255, 255, 255, 0.3) !important;

  letter-spacing: 0.05em !important;

}



.tft-ftr-premium__legal {

  display: flex !important;

  gap: 2rem !important;

}



.tft-ftr-premium__legal .tft-ftr-premium__link {

  font-size: 0.65rem !important;

  font-family: var(--cpf-font-mono) !important;

  margin-bottom: 0 !important;

  color: rgba(255, 255, 255, 0.5) !important;

}



.tft-ftr-premium__up {

  background: transparent !important;

  border: none !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  gap: 0.75rem !important;

  padding: 0.5rem !important;

  transition: opacity 0.3s ease !important;

}



.tft-ftr-premium__up:hover {

  opacity: 0.6 !important;

}



.tft-ftr-premium__up-arrow {

  width: 1px !important;

  height: 30px !important;

  background: var(--cpf-color-accent) !important;

  position: relative !important;

}



.tft-ftr-premium__up-arrow::before {

  content: '' !important;

  position: absolute !important;

  top: 0 !important;

  left: -2px !important;

  width: 5px !important;

  height: 5px !important;

  border-left: 1px solid var(--cpf-color-accent) !important;

  border-top: 1px solid var(--cpf-color-accent) !important;

  transform: rotate(45deg) !important;

}



.tft-ftr-premium__up-text {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  color: #fff !important;

  letter-spacing: 0.1em !important;

}



@media (max-width: 1024px) {

  .tft-ftr-premium__layout {

    flex-direction: column !important;

    gap: 4rem !important;

  }



  .tft-ftr-premium__branding {

    flex: 1 !important;

  }

}



@media (max-width: 768px) {

  .tft-ftr-premium__grid {

    grid-template-areas:

      "contact"

      "social"

      "location"

      "cta" !important;

    grid-template-columns: 1fr !important;

  }



  .tft-ftr-premium__cta-wrap {

    justify-content: flex-start !important;

  }



  .tft-ftr-premium__bottom {

    flex-direction: column !important;

    gap: 2rem !important;

    align-items: flex-start !important;

  }

}



/* =============================================

   LOGO VISIBILITY FIX (PHASE 7)

   ============================================= */

.tft-about-partners__logo-img {

  max-height: 40px !important;

  width: auto !important;

  filter: grayscale(1) invert(1) !important;

  /* Forces them to white if they are dark */

  opacity: 0.7 !important;

  transition: opacity 0.4s ease, transform 0.4s ease !important;

  display: block !important;

}



.tft-about-partners__logo-img:hover {

  opacity: 1 !important;

  transform: scale(1.05) !important;

}



/* =============================================

   CINEMATIC ELITE FOOTER (2026)

   ============================================= */

.tft-ftr-elite {

  background: #000 !important;

  color: #fff !important;

  padding: 8rem 0 2rem !important;

  position: relative !important;

  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;

}



.tft-ftr-elite__container {

  max-width: 1600px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-ftr-elite__content {

  display: flex !important;

  justify-content: space-between !important;

  align-items: flex-start !important;

  gap: 6rem !important;

  margin-bottom: 8rem !important;

}



.tft-ftr-elite__brand {

  flex: 0 0 40% !important;

}



.tft-ftr-elite__logo {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(5rem, 12vw, 10rem) !important;

  line-height: 0.8 !important;

  letter-spacing: -0.05em !important;

  text-transform: uppercase !important;

  margin-bottom: 2rem !important;

  color: #fff !important;

}



.tft-ftr-elite__brand-meta {

  display: flex !important;

  gap: 2rem !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  letter-spacing: 0.1em !important;

  color: rgba(255, 255, 255, 0.3) !important;

}



.tft-ftr-elite__grid {

  flex: 1 !important;

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 4rem !important;

}



.tft-ftr-elite__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  color: var(--cpf-color-accent) !important;

  margin-bottom: 2rem !important;

  letter-spacing: 0.2em !important;

}



.tft-ftr-elite__link {

  display: block !important;

  color: #fff !important;

  text-decoration: none !important;

  font-size: 0.9rem !important;

  margin-bottom: 0.75rem !important;

  transition: color 0.3s ease !important;

}



.tft-ftr-elite__link:hover {

  color: var(--cpf-color-accent) !important;

}



.tft-ftr-elite__link--big {

  font-size: 1.75rem !important;

  font-weight: 500 !important;

  margin-bottom: 1rem !important;

}



.tft-ftr-elite__address {

  font-style: normal !important;

  line-height: 1.8 !important;

  color: rgba(255, 255, 255, 0.5) !important;

  font-size: 0.9rem !important;

}



.tft-ftr-elite__cta-wrap {

  grid-column: span 2 !important;

  padding-top: 2rem !important;

}



.tft-ftr-elite__cta {

  display: inline-block !important;

  padding: 1.5rem 3rem !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  text-decoration: none !important;

  color: #fff !important;

  transition: all 0.4s ease !important;

  width: 100% !important;

}



.tft-ftr-elite__cta-inner {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

}



.tft-ftr-elite__cta-title {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.5rem !important;

  letter-spacing: 0.05em !important;

}



.tft-ftr-elite__cta-arrow {

  font-size: 2rem !important;

  transition: transform 0.4s ease !important;

}



.tft-ftr-elite__cta:hover {

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

  border-color: var(--cpf-color-accent) !important;

}



.tft-ftr-elite__cta:hover .tft-ftr-elite__cta-arrow {

  transform: translateX(10px) !important;

}



.tft-ftr-elite__baseline {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-top: 3rem !important;

  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-ftr-elite__copy {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.6rem !important;

  color: rgba(255, 255, 255, 0.3) !important;

  letter-spacing: 0.1em !important;

}



.tft-ftr-elite__legal {

  display: flex !important;

  gap: 2rem !important;

}



.tft-ftr-elite__link-small {

  color: rgba(255, 255, 255, 0.3) !important;

  text-decoration: none !important;

  font-size: 0.65rem !important;

  font-family: var(--cpf-font-mono) !important;

  transition: color 0.3s ease !important;

}



.tft-ftr-elite__link-small:hover {

  color: #fff !important;

}



.tft-ftr-elite__up {

  background: rgba(255, 255, 255, 0.05) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  width: 50px !important;

  height: 50px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  transition: all 0.3s ease !important;

}



.tft-ftr-elite__up:hover {

  background: var(--cpf-color-accent) !important;

}



.tft-ftr-elite__up-icon {

  width: 10px !important;

  height: 10px !important;

  border-left: 2px solid #fff !important;

  border-top: 2px solid #fff !important;

  transform: rotate(45deg) translateY(2px) !important;

  transition: border-color 0.3s ease !important;

}



.tft-ftr-elite__up:hover .tft-ftr-elite__up-icon {

  border-color: #000 !important;

}



@media (max-width: 1200px) {

  .tft-ftr-elite__content {

    flex-direction: column !important;

    gap: 4rem !important;

  }

}



@media (max-width: 768px) {

  .tft-ftr-elite__container {

    padding: 0 2rem !important;

  }



  .tft-ftr-elite__grid {

    grid-template-columns: 1fr !important;

    gap: 3rem !important;

  }



  .tft-ftr-elite__baseline {

    flex-direction: column !important;

    gap: 2rem !important;

    align-items: flex-start !important;

  }

}



/* =============================================

   PHASE 3: STRATEGIC FOUNDATION (VERTICAL TABS)

   ============================================= */

.tft-about-strat {

  background: #000 !important;

  padding: 10rem 0 !important;

  position: relative !important;

  overflow: hidden !important;

}



.tft-about-strat__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-about-strat__split {

  display: grid !important;

  grid-template-columns: 1fr 1.2fr !important;

  gap: 6rem !important;

  align-items: center !important;

}



.tft-about-strat__images {

  position: relative !important;

  height: 600px !important;

  border-radius: 20px !important;

  overflow: hidden !important;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;

}



.tft-about-strat__img-slice {

  position: absolute !important;

  inset: 0 !important;

  opacity: 0 !important;

  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

  transform: scale(1.1) !important;

}



.tft-about-strat__img-slice.is-active {

  opacity: 1 !important;

  transform: scale(1) !important;

  z-index: 2 !important;

}



.tft-about-strat__img-slice img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.tft-about-strat__content {

  display: flex !important;

  gap: 4rem !important;

}



.tft-about-strat__nav {

  display: flex !important;

  flex-direction: column !important;

  gap: 2rem !important;

  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding-right: 2rem !important;

}



.tft-about-strat__btn {

  background: none !important;

  border: none !important;

  text-align: left !important;

  padding: 1rem 0 !important;

  cursor: pointer !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

  opacity: 0.3 !important;

  transition: all 0.4s ease !important;

}



.tft-about-strat__btn.is-active {

  opacity: 1 !important;

}



.tft-about-strat__num {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.1em !important;

}



.tft-about-strat__nav-label {

  font-family: var(--cpf-font-heading) !important;

  font-size: 0.9rem !important;

  color: #fff !important;

  letter-spacing: 0.2em !important;

  text-transform: uppercase !important;

}



.tft-about-strat__panels {

  flex: 1 !important;

}



.tft-about-strat__panel {

  display: none !important;

  animation: stratFadeIn 0.8s ease forwards !important;

}



.tft-about-strat__panel.is-active {

  display: block !important;

}



@keyframes stratFadeIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.tft-about-strat__panel-tag {

  display: block !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  color: var(--cpf-color-accent) !important;

  margin-bottom: 1.5rem !important;

  letter-spacing: 0.2em !important;

}



.tft-about-strat__panel-title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(3rem, 5vw, 4.5rem) !important;

  line-height: 1 !important;

  margin-bottom: 3rem !important;

  text-transform: uppercase !important;

}



.tft-about-strat__list {

  list-style: none !important;

  padding: 0 !important;

}



.tft-about-strat__list li {

  font-size: 1.1rem !important;

  line-height: 1.8 !important;

  margin-bottom: 1.5rem !important;

  color: rgba(255, 255, 255, 0.7) !important;

  position: relative !important;

  padding-left: 2rem !important;

}



.tft-about-strat__list li::before {

  content: '?' !important;

  position: absolute !important;

  left: 0 !important;

  color: var(--cpf-color-accent) !important;

}



.tft-about-strat__list li strong {

  color: #fff !important;

}



/* =============================================

   REFINED BACK TO TOP (YELLOW CIRCLE)

   ============================================= */

.tft-ftr-elite__up {

  background: var(--cpf-color-accent) !important;

  border: none !important;

  width: 70px !important;

  height: 70px !important;

  border-radius: 50% !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.4s ease !important;

  box-shadow: 0 10px 30px rgba(226, 255, 0, 0.2) !important;

}



.tft-ftr-elite__up:hover {

  transform: scale(1.15) translateY(-5px) !important;

  background: #fff !important;

}



.tft-ftr-elite__up-arrow {

  width: 12px !important;

  height: 12px !important;

  border-left: 2px solid #000 !important;

  border-top: 2px solid #000 !important;

  transform: rotate(45deg) translateY(3px) !important;

  margin-bottom: 5px !important;

}



.tft-ftr-elite__up-text {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.6rem !important;

  font-weight: 900 !important;

  color: #000 !important;

  letter-spacing: 0.1em !important;

}



/* =============================================

   POLISHED MARQUEE & METRICS

   ============================================= */

.tft-about-partners__heading {

  font-size: 0.7rem !important;

  letter-spacing: 0.3em !important;

  color: rgba(255, 255, 255, 0.4) !important;

  text-align: center !important;

  margin-bottom: 4rem !important;

}



.tft-about-data__stat-premium {

  background: rgba(255, 255, 255, 0.02) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  padding: 3rem !important;

  border-radius: 20px !important;

  transition: all 0.4s ease !important;

}



.tft-about-data__stat-premium:hover {

  background: rgba(226, 255, 0, 0.05) !important;

  border-color: var(--cpf-color-accent) !important;

  transform: translateY(-10px) !important;

}



.tft-about-data__number {

  font-size: 4rem !important;

  font-weight: 700 !important;

  color: #fff !important;

}



.tft-about-data__plus {

  color: var(--cpf-color-accent) !important;

}



.tft-about-data__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.2em !important;

  color: rgba(255, 255, 255, 0.4) !important;

  margin-top: 1rem !important;

}



@media (max-width: 1200px) {

  .tft-about-strat__split {

    grid-template-columns: 1fr !important;

  }



  .tft-about-strat__images {

    height: 400px !important;

  }

}



/* =============================================

   PREMIUM LIST ICON FIX

   ============================================= */

.tft-about-strat__list li::before {

  content: '' !important;

  position: absolute !important;

  left: 0 !important;

  top: 0.75rem !important;

  width: 8px !important;

  height: 8px !important;

  background: var(--cpf-color-accent) !important;

  transform: rotate(45deg) !important;

  box-shadow: 0 0 10px var(--cpf-color-accent) !important;

}



.tft-about-strat__list li:hover::before {

  transform: rotate(225deg) scale(1.2) !important;

  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

}



/* =============================================

   LAYOUT STABILIZATION (PHASE 3)

   ============================================= */

.tft-about-strat__panels {

  display: grid !important;

  grid-template-columns: 1fr !important;

  align-items: start !important;

  min-height: 400px !important;

  /* Prevents jumping */

  position: relative !important;

}



.tft-about-strat__panel {

  grid-area: 1 / 1 !important;

  /* Stacks panels in the same spot */

  opacity: 0 !important;

  visibility: hidden !important;

  transform: translateY(10px) !important;

  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s !important;

  display: block !important;

  /* Keep it in the DOM for grid stacking */

}



.tft-about-strat__panel.is-active {

  opacity: 1 !important;

  visibility: visible !important;

  transform: translateY(0) !important;

  z-index: 5 !important;

}



/* Ensure images don't jump */

.tft-about-strat__images {

  aspect-ratio: 4 / 5 !important;

  height: auto !important;

  max-height: 600px !important;

}



/* =============================================

   PARTNERS MARQUEE DIVIDER FIX

   ============================================= */

.tft-about-partners__marquee-track {

  gap: 120px !important;

  /* Massive gap between global leaders */

  padding: 0 60px !important;

}



.tft-about-partners__logo-img {

  max-height: 35px !important;

  opacity: 0.6 !important;

  filter: grayscale(1) invert(1) brightness(1.5) !important;

}



/* =============================================

   INDUSTRY RECOGNITION PREMIUM POLISH

   ============================================= */

.tft-about-press__list-premium {

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

}



.tft-about-press__item-premium {

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding: 2.5rem 0 !important;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

  position: relative !important;

  overflow: hidden !important;

}



.tft-about-press__item-premium:hover {

  background: var(--cpf-color-accent) !important;

  padding-left: 2rem !important;

  padding-right: 2rem !important;

}



.tft-about-press__item-premium:hover * {

  color: #000 !important;

}



.tft-about-press__award-premium {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.5rem !important;

  letter-spacing: -0.02em !important;

}



/* =============================================

   PHASE 2: SPACING FIX (TITLES TUCKED)

   ============================================= */

.tft-about-intro__ed-header,

.tft-about-data__premium-heading {

  margin-bottom: 3rem !important;

  /* Fixed tucked titles */

}



/* =============================================

   PHASE 3: REFINED SHOT STYLE (MISSION/VISION)

   ============================================ */

.tft-about-strat {

  background: #000 !important;

  padding: 12rem 0 !important;

}



.tft-about-strat__tag {

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  font-weight: 900 !important;

  padding: 0.2rem 0.5rem !important;

  display: inline-block !important;

  margin-bottom: 2rem !important;

}



.tft-about-strat__main-title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(3rem, 6vw, 5.5rem) !important;

  line-height: 1 !important;

  margin-bottom: 6rem !important;

  letter-spacing: -0.02em !important;

}



.tft-about-strat__grid-shot {

  display: grid !important;

  grid-template-columns: 1.2fr 1fr !important;

  gap: 0 !important;

  align-items: stretch !important;

}



.tft-about-strat__media {

  position: relative !important;

  display: flex !important;

  gap: 1rem !important;

  padding-right: 2rem !important;

}



.tft-about-strat__img-wrap {

  flex: 1 !important;

  height: 600px !important;

  overflow: hidden !important;

  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.tft-about-strat__img-wrap:not(.is-active) {

  flex: 0.2 !important;

  opacity: 0.5 !important;

}



.tft-about-strat__img-wrap img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.tft-about-strat__content-shot {

  display: flex !important;

  flex-direction: column !important;

}



.tft-about-strat__tabs-shot {

  display: flex !important;

  background: #111 !important;

}



.tft-about-strat__tab-btn {

  flex: 1 !important;

  background: none !important;

  border: none !important;

  padding: 1.5rem !important;

  color: #fff !important;

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.2rem !important;

  cursor: pointer !important;

  transition: all 0.4s ease !important;

}



.tft-about-strat__tab-btn.is-active {

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

}



.tft-about-strat__panels-shot {

  flex: 1 !important;

  background: #fdfdf5 !important;

  /* Bone/Off-white as in shot */

  padding: 5rem !important;

  color: #000 !important;

}



.tft-about-strat__panel-title-shot {

  font-family: var(--cpf-font-heading) !important;

  font-size: 3rem !important;

  margin-bottom: 2rem !important;

  color: #000 !important;

}



.tft-about-strat__panel-list-shot {

  list-style: none !important;

  padding: 0 !important;

}



.tft-about-strat__panel-list-shot li {

  font-size: 1.1rem !important;

  line-height: 1.8 !important;

  margin-bottom: 1.5rem !important;

  color: #333 !important;

  position: relative !important;

  padding-left: 1.5rem !important;

}



.tft-about-strat__panel-list-shot li::before {

  content: '�' !important;

  position: absolute !important;

  left: 0 !important;

  font-size: 0.6rem !important;

  top: 0.4rem !important;

  color: #000 !important;

}



@media (max-width: 1024px) {

  .tft-about-strat__grid-shot {

    grid-template-columns: 1fr !important;

  }

}



/* =============================================

   FULLY DARK & UNIQUE MISSION/VISION

   ============================================= */

.tft-about-strat__panels-shot {

  background: #000 !important;

  /* Fully dark as requested */

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-left: 4px solid var(--cpf-color-accent) !important;

  /* Unique architectural accent */

  padding: 6rem !important;

  color: #fff !important;

  position: relative !important;

  z-index: 10 !important;

}



.tft-about-strat__panel-title-shot {

  color: #fff !important;

  font-size: 3.5rem !important;

  letter-spacing: -0.03em !important;

  margin-bottom: 3rem !important;

  text-transform: uppercase !important;

}



.tft-about-strat__panel-list-shot li {

  color: rgba(255, 255, 255, 0.6) !important;

  font-size: 1.2rem !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;

  padding-bottom: 1.5rem !important;

  margin-bottom: 2rem !important;

}



.tft-about-strat__panel-list-shot li strong {

  color: #fff !important;

}



.tft-about-strat__panel-list-shot li::before {

  color: var(--cpf-color-accent) !important;

  /* Yellow diamond/square */

  content: '?' !important;

  font-size: 0.8rem !important;

  top: 0.6rem !important;

}



/* Unique Tab Design */

.tft-about-strat__tabs-shot {

  background: transparent !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  margin-bottom: 2rem !important;

  gap: 2rem !important;

}



.tft-about-strat__tab-btn {

  flex: none !important;

  width: auto !important;

  padding: 1rem 0 !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  letter-spacing: 0.3em !important;

  text-transform: uppercase !important;

  opacity: 0.4 !important;

  position: relative !important;

}



.tft-about-strat__tab-btn.is-active {

  background: none !important;

  color: var(--cpf-color-accent) !important;

  opacity: 1 !important;

}



.tft-about-strat__tab-btn.is-active::after {

  content: '' !important;

  position: absolute !important;

  bottom: -1px !important;

  left: 0 !important;

  width: 100% !important;

  height: 2px !important;

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 15px var(--cpf-color-accent) !important;

}



/* Cinematic Image Refinement */

.tft-about-strat__img-wrap {

  border-radius: 4px !important;

  /* Subtle rounding for premium feel */

  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8) !important;

}



.tft-about-strat__img-wrap::after {

  content: '' !important;

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(to top, #000, transparent) !important;

  opacity: 0.4 !important;

}



/* =============================================

   REFINED UNIQUE DARK MISSION/VISION

   ============================================= */

.tft-about-strat__panels-shot {

  border-left: 2px solid rgba(255, 255, 255, 0.1) !important;

  /* Thinner, subtle base line */

  padding: 4rem 5rem !important;

  /* Slightly more compact */

}



/* Unique Floating Accent Line */

.tft-about-strat__panel-shot::before {

  content: '' !important;

  position: absolute !important;

  left: -2px !important;

  top: 0 !important;

  width: 2px !important;

  height: 80px !important;

  /* Only spans the title area */

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 15px var(--cpf-color-accent) !important;

}



/* NO MORE '?' BULLETS - CSS SHAPES ONLY */

.tft-about-strat__panel-list-shot li::before {

  content: '' !important;

  position: absolute !important;

  left: 0 !important;

  top: 0.7rem !important;

  width: 6px !important;

  height: 6px !important;

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 8px var(--cpf-color-accent) !important;

  border-radius: 1px !important;

  /* Tiny square */

}



.tft-about-strat__panel-title-shot {

  font-size: 2.8rem !important;

  /* Slightly more balanced */

  margin-bottom: 2.5rem !important;

}



.tft-about-strat__panel-list-shot li {

  padding-left: 1.8rem !important;

  /* Better spacing from bullet */

  font-size: 1.1rem !important;

  line-height: 1.7 !important;

}



/* =============================================

   PHASE 3: THE ARCHITECTURAL CORE (REVAMP)

   ============================================= */

.tft-about-core {

  position: relative !important;

  min-height: 100vh !important;

  display: flex !important;

  align-items: center !important;

  background: #000 !important;

  overflow: hidden !important;

  padding: 10rem 0 !important;

}



.tft-about-core__bg {

  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

}



.tft-about-core__bg-img {

  position: absolute !important;

  inset: 0 !important;

  opacity: 0 !important;

  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 2s ease !important;

  transform: scale(1.1) !important;

}



.tft-about-core__bg-img.is-active {

  opacity: 0.4 !important;

  transform: scale(1) !important;

}



.tft-about-core__bg-img img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.tft-about-core__overlay {

  position: absolute !important;

  inset: 0 !important;

  background: radial-gradient(circle at center, transparent 0%, #000 80%) !important;

  z-index: 2 !important;

}



.tft-about-core__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

  position: relative !important;

  z-index: 10 !important;

  width: 100% !important;

}



.tft-about-core__layout {

  display: grid !important;

  grid-template-columns: 350px 1fr !important;

  gap: 8rem !important;

  align-items: center !important;

}



.tft-about-core__nav-group {

  display: flex !important;

  flex-direction: column !important;

  gap: 1.5rem !important;

}



.tft-about-core__btn {

  background: none !important;

  border: none !important;

  text-align: left !important;

  padding: 2rem !important;

  cursor: pointer !important;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  background: rgba(255, 255, 255, 0.02) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

  backdrop-filter: blur(10px) !important;

}



.tft-about-core__btn:hover,

.tft-about-core__btn.is-active {

  background: rgba(226, 255, 0, 0.05) !important;

  border-color: var(--cpf-color-accent) !important;

  transform: translateX(10px) !important;

}



.tft-about-core__btn-num {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.2em !important;

}



.tft-about-core__btn-text {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.1rem !important;

  color: #fff !important;

  letter-spacing: 0.1em !important;

  text-transform: uppercase !important;

}



.tft-about-core__panel-wrap {

  position: relative !important;

  min-height: 500px !important;

}



.tft-about-core__panel {

  position: absolute !important;

  inset: 0 !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: all 0.8s ease !important;

  transform: translateY(20px) !important;

}



.tft-about-core__panel.is-active {

  opacity: 1 !important;

  visibility: visible !important;

  transform: translateY(0) !important;

}



.tft-about-core__tag {

  display: inline-block !important;

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.6rem !important;

  font-weight: 900 !important;

  padding: 0.2rem 0.5rem !important;

  margin-bottom: 2rem !important;

}



.tft-about-core__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(3.5rem, 6vw, 5rem) !important;

  line-height: 1 !important;

  margin-bottom: 2.5rem !important;

  text-transform: uppercase !important;

  letter-spacing: -0.04em !important;

}



.tft-about-core__desc {

  font-size: 1.3rem !important;

  line-height: 1.6 !important;

  color: rgba(255, 255, 255, 0.7) !important;

  margin-bottom: 3rem !important;

  max-width: 600px !important;

}



.tft-about-core__list {

  list-style: none !important;

  padding: 0 !important;

}



.tft-about-core__list li {

  font-size: 1.1rem !important;

  margin-bottom: 1rem !important;

  padding-left: 2rem !important;

  position: relative !important;

  color: rgba(255, 255, 255, 0.5) !important;

}



.tft-about-core__list li::before {

  content: '' !important;

  position: absolute !important;

  left: 0 !important;

  top: 0.6rem !important;

  width: 6px !important;

  height: 6px !important;

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 10px var(--cpf-color-accent) !important;

}



@media (max-width: 1200px) {

  .tft-about-core__layout {

    grid-template-columns: 1fr !important;

    gap: 4rem !important;

  }



  .tft-about-core__nav-group {

    flex-direction: row !important;

    flex-wrap: wrap !important;

  }



  .tft-about-core__btn {

    flex: 1 !important;

    min-width: 150px !important;

  }

}



/* =============================================

   PHASE 3: STRATEGIC FOUNDATION (RESTORED DARK)

   ============================================= */

.tft-about-strat-refined {

  background: #000 !important;

  padding: 10rem 0 !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-about-strat-refined__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-about-strat-refined__header {

  margin-bottom: 6rem !important;

}



.tft-about-strat-refined__tag {

  color: var(--cpf-color-accent) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  letter-spacing: 0.3em !important;

  margin-bottom: 1.5rem !important;

  display: block !important;

}



.tft-about-strat-refined__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;

  line-height: 1.1 !important;

  color: #fff !important;

}



.tft-about-strat-refined__grid {

  display: grid !important;

  grid-template-columns: 1.2fr 1fr !important;

  gap: 6rem !important;

  align-items: center !important;

}



.tft-about-strat-refined__media {

  position: relative !important;

  height: 500px !important;

  display: flex !important;

  gap: 1rem !important;

}



.tft-about-strat-refined__img {

  flex: 1 !important;

  height: 100% !important;

  overflow: hidden !important;

  border-radius: 4px !important;

  transition: all 0.8s ease !important;

}



.tft-about-strat-refined__img:not(.is-active) {

  flex: 0.3 !important;

  opacity: 0.3 !important;

}



.tft-about-strat-refined__img img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.tft-about-strat-refined__tabs {

  display: flex !important;

  gap: 3rem !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  margin-bottom: 3rem !important;

}



.tft-about-strat-refined__tab-btn {

  background: none !important;

  border: none !important;

  padding: 1rem 0 !important;

  color: #fff !important;

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.1rem !important;

  opacity: 0.3 !important;

  cursor: pointer !important;

  transition: all 0.4s ease !important;

  position: relative !important;

}



.tft-about-strat-refined__tab-btn.is-active {

  opacity: 1 !important;

  color: var(--cpf-color-accent) !important;

}



.tft-about-strat-refined__tab-btn.is-active::after {

  content: '' !important;

  position: absolute !important;

  bottom: -1px !important;

  left: 0 !important;

  width: 100% !important;

  height: 2px !important;

  background: var(--cpf-color-accent) !important;

}



.tft-about-strat-refined__panel {

  animation: refinedFadeIn 0.6s ease forwards !important;

}



@keyframes refinedFadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.tft-about-strat-refined__panel-title {

  font-size: 2.5rem !important;

  margin-bottom: 2rem !important;

  color: #fff !important;

}



.tft-about-strat-refined__list {

  list-style: none !important;

  padding: 0 !important;

}



.tft-about-strat-refined__list li {

  margin-bottom: 1.2rem !important;

  line-height: 1.7 !important;

  color: rgba(255, 255, 255, 0.6) !important;

  padding-left: 1.5rem !important;

  position: relative !important;

}



.tft-about-strat-refined__list li::before {

  content: '?' !important;

  position: absolute !important;

  left: 0 !important;

  color: var(--cpf-color-accent) !important;

}



/* =============================================

   PHASE 2: THE PERFORMANCE MATRIX (HUD STYLE)

   ============================================= */

.tft-about-matrix {

  background: #050505 !important;

  padding: 12rem 0 !important;

  position: relative !important;

  overflow: hidden !important;

}



.tft-about-matrix__grid-bg {

  position: absolute !important;

  inset: 0 !important;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;

  background-size: 50px 50px !important;

  z-index: 1 !important;

}



.tft-about-matrix__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

  position: relative !important;

  z-index: 10 !important;

}



.tft-about-matrix__header {

  margin-bottom: 8rem !important;

  border-left: 3px solid var(--cpf-color-accent) !important;

  padding-left: 2rem !important;

}



.tft-about-matrix__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.4em !important;

  display: block !important;

  margin-bottom: 1rem !important;

}



.tft-about-matrix__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2rem, 4vw, 3.5rem) !important;

  color: #fff !important;

  letter-spacing: -0.02em !important;

}



.tft-about-matrix__main-grid {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 10rem !important;

}



/* Kinetic Timeline */

.tft-about-matrix__timeline {

  position: relative !important;

  padding-left: 3rem !important;

}



.tft-about-matrix__timeline-line {

  position: absolute !important;

  left: 0 !important;

  top: 0 !important;

  width: 1px !important;

  height: 100% !important;

  background: rgba(255, 255, 255, 0.05) !important;

}



.tft-about-matrix__node {

  position: relative !important;

  margin-bottom: 5rem !important;

  transition: all 0.5s ease !important;

}



.tft-about-matrix__node-year {

  position: absolute !important;

  left: -7rem !important;

  top: 0 !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.9rem !important;

  color: rgba(255, 255, 255, 0.2) !important;

}



.tft-about-matrix__node-point {

  position: absolute !important;

  left: -3rem !important;

  top: 0.5rem !important;

  width: 8px !important;

  height: 8px !important;

  background: #222 !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  transform: rotate(45deg) !important;

  z-index: 5 !important;

}



.tft-about-matrix__node.is-current .tft-about-matrix__node-point {

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 15px var(--cpf-color-accent) !important;

}



.tft-about-matrix__node-name {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.5rem !important;

  color: #fff !important;

  margin-bottom: 0.5rem !important;

  letter-spacing: 0.1em !important;

}



.tft-about-matrix__node-desc {

  color: rgba(255, 255, 255, 0.4) !important;

  font-size: 1rem !important;

  line-height: 1.6 !important;

}



/* HUD Stats */

.tft-about-matrix__stat-row {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 2rem !important;

  margin-bottom: 2rem !important;

}



.tft-about-matrix__stat-box {

  background: rgba(255, 255, 255, 0.02) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  padding: 3rem 2rem !important;

  position: relative !important;

  overflow: hidden !important;

  transition: all 0.4s ease !important;

}



.tft-about-matrix__stat-box:hover {

  background: rgba(255, 255, 255, 0.04) !important;

  border-color: rgba(255, 255, 255, 0.2) !important;

  transform: translateY(-5px) !important;

}



.tft-about-matrix__stat-val {

  font-family: var(--cpf-font-heading) !important;

  font-size: 3.5rem !important;

  color: #fff !important;

  line-height: 1 !important;

  margin-bottom: 1rem !important;

}



.tft-about-matrix__stat-lab {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  color: rgba(255, 255, 255, 0.3) !important;

  letter-spacing: 0.2em !important;

  margin-bottom: 2rem !important;

  display: block !important;

}



.tft-about-matrix__stat-bar {

  height: 2px !important;

  background: rgba(255, 255, 255, 0.05) !important;

  width: 100% !important;

  position: relative !important;

}



.tft-about-matrix__stat-progress {

  position: absolute !important;

  left: 0 !important;

  top: 0 !important;

  height: 100% !important;

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 10px var(--cpf-color-accent) !important;

}



/* =============================================

   PHASE 2: ULTRA-REVAMP HUD ENHANCEMENTS

   ============================================= */

.tft-about-matrix__stat-box {

  border-right: 4px solid rgba(226, 255, 0, 0) !important;

}



.tft-about-matrix__stat-box:hover {

  border-right: 4px solid var(--cpf-color-accent) !important;

  box-shadow: -10px 0 30px rgba(226, 255, 0, 0.05) !important;

}



/* Corner Brackets for HUD Boxes */

.tft-about-matrix__stat-box::before,

.tft-about-matrix__stat-box::after {

  content: '' !important;

  position: absolute !important;

  width: 10px !important;

  height: 100% !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  transition: all 0.4s ease !important;

}



.tft-about-matrix__stat-box::before {

  left: 0 !important;

  top: 0 !important;

  border-right: none !important;

}



.tft-about-matrix__stat-box::after {

  right: 0 !important;

  top: 0 !important;

  border-left: none !important;

}



.tft-about-matrix__stat-box:hover::before,

.tft-about-matrix__stat-box:hover::after {

  border-color: var(--cpf-color-accent) !important;

}



/* Kinetic Pulse for Current Year */

.tft-about-matrix__node.is-current .tft-about-matrix__node-point::after {

  content: '' !important;

  position: absolute !important;

  inset: -5px !important;

  border: 1px solid var(--cpf-color-accent) !important;

  animation: matrixPulse 2s infinite !important;

  border-radius: 50% !important;

}



@keyframes matrixPulse {

  0% {

    transform: scale(1);

    opacity: 1;

  }



  100% {

    transform: scale(3);

    opacity: 0;

  }

}



/* Circuit Line Style */

.tft-about-matrix__timeline-line {

  background: linear-gradient(to bottom,

      rgba(255, 255, 255, 0.05) 0%,

      var(--cpf-color-accent) 50%,

      rgba(255, 255, 255, 0.05) 100%) !important;

  width: 2px !important;

  box-shadow: 0 0 10px rgba(226, 255, 0, 0.2) !important;

}



/* =============================================

   PHASE 2 CLEANUP (REMOVING PATTERN & BUGS)

   ============================================= */

.tft-about-matrix__grid-bg {

  display: none !important;

  /* Removed pattern as requested */

}



.tft-about-matrix {

  background: #000 !important;

  /* Pure black */

}



.tft-about-matrix__main-grid {

  display: grid !important;

  grid-template-columns: 0.8fr 1.2fr !important;

  /* Adjusted proportions */

  gap: 12rem !important;

}



/* Timeline Cleanup */

.tft-about-matrix__timeline {

  padding-left: 0 !important;

}



.tft-about-matrix__timeline-line {

  left: 60px !important;

  /* Aligned with nodes */

  background: rgba(255, 255, 255, 0.03) !important;

}



.tft-about-matrix__node {

  display: flex !important;

  align-items: center !important;

  gap: 3rem !important;

  margin-bottom: 6rem !important;

}



.tft-about-matrix__node-year {

  position: static !important;

  width: 60px !important;

  text-align: right !important;

  font-size: 0.8rem !important;

  opacity: 0.3 !important;

}



.tft-about-matrix__node-point {

  position: static !important;

  flex-shrink: 0 !important;

  width: 10px !important;

  height: 10px !important;

}



.tft-about-matrix__node-info {

  flex: 1 !important;

}



/* Stats Cleanup */

.tft-about-matrix__stat-box {

  background: #080808 !important;

  /* Subtle dark grey instead of generic transparent */

  border: 1px solid rgba(255, 255, 255, 0.03) !important;

  padding: 4rem 3rem !important;

}



.tft-about-matrix__stat-val {

  font-size: 4rem !important;

}



.tft-about-matrix__stat-lab {

  color: var(--cpf-color-accent) !important;

  /* Yellow labels for elite feel */

  opacity: 1 !important;

  font-weight: 700 !important;

}



/* =============================================

   PHASE 2 INTERACTION & VISIBILITY FIX

   ============================================= */

.tft-about-matrix__node {

  cursor: pointer !important;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.tft-about-matrix__node-year {

  opacity: 0.8 !important;

  /* Made years visible */

  color: #fff !important;

  transition: all 0.4s ease !important;

}



.tft-about-matrix__node:hover .tft-about-matrix__node-year {

  color: var(--cpf-color-accent) !important;

  transform: scale(1.1) !important;

}



.tft-about-matrix__node:hover .tft-about-matrix__node-point {

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 15px var(--cpf-color-accent) !important;

}



.tft-about-matrix__node:hover .tft-about-matrix__node-info {

  transform: translateX(10px) !important;

}



/* Stat Box Architectural Corners */

.tft-about-matrix__stat-box {

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  position: relative !important;

  background: #080808 !important;

}



.tft-about-matrix__stat-box::before,

.tft-about-matrix__stat-box::after {

  content: '' !important;

  position: absolute !important;

  width: 10px !important;

  height: 10px !important;

  border-color: var(--cpf-color-accent) !important;

  border-style: solid !important;

  opacity: 0 !important;

  transition: all 0.3s ease !important;

}



.tft-about-matrix__stat-box::before {

  top: -1px !important;

  left: -1px !important;

  border-width: 2px 0 0 2px !important;

  /* Top-Left bracket */

}



.tft-about-matrix__stat-box::after {

  bottom: -1px !important;

  right: -1px !important;

  border-width: 0 2px 2px 0 !important;

  /* Bottom-Right bracket */

}



.tft-about-matrix__stat-box:hover::before,

.tft-about-matrix__stat-box:hover::after {

  opacity: 1 !important;

  width: 20px !important;

  height: 20px !important;

}



.tft-about-matrix__stat-box:hover {

  background: #0c0c0c !important;

  box-shadow: inset 0 0 50px rgba(226, 255, 0, 0.02) !important;

}



/* =============================================

   PHASE 2 ARCHITECTURAL STABILIZATION

   ============================================= */

.tft-about-matrix__timeline-line {

  left: 85px !important;

  /* Precision alignment with nodes */

  width: 1px !important;

  opacity: 0.1 !important;

}



.tft-about-matrix__node-year {

  width: 85px !important;

  /* Fixed width for perfect grid alignment */

  flex-shrink: 0 !important;

  text-align: center !important;

  font-weight: 700 !important;

  letter-spacing: 0.1em !important;

}



.tft-about-matrix__node-point {

  width: 12px !important;

  height: 12px !important;

  background: #111 !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  transform: rotate(45deg) !important;

  z-index: 10 !important;

}



/* Sovereignty Node Pulse */

.tft-about-matrix__node.is-current .tft-about-matrix__node-point {

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 0 0 rgba(226, 255, 0, 0.4) !important;

  animation: tft-node-pulse 2s infinite !important;

  border: none !important;

}



@keyframes tft-node-pulse {

  0% {

    box-shadow: 0 0 0 0 rgba(226, 255, 0, 0.4);

  }



  70% {

    box-shadow: 0 0 0 15px rgba(226, 255, 0, 0);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(226, 255, 0, 0);

  }

}



/* Stat Box Fixes */

.tft-about-matrix__stat-box {

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.tft-about-matrix__stat-box::before,

.tft-about-matrix__stat-box::after {

  display: none !important;

  /* Removing buggy brackets, replacing with solid architecture */

}



.tft-about-matrix__stat-box:hover {

  border-color: var(--cpf-color-accent) !important;

  background: #0a0a0a !important;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;

}



/* NO MORE CHARACTERS FOR BULLETS - CSS ONLY */

.tft-about-matrix__node-info li::before,

.tft-about-strat-refined__list li::before,

.tft-about-core__list li::before {

  content: '' !important;

  display: inline-block !important;

  width: 6px !important;

  height: 6px !important;

  background: var(--cpf-color-accent) !important;

  margin-right: 15px !important;

  box-shadow: 0 0 10px var(--cpf-color-accent) !important;

  vertical-align: middle !important;

}



/* =============================================

   FINAL KINETIC POLISH (BRINGING IT TO LIFE)

   ============================================= */



/* Stat Box Liquid Progress & Kinetic Text */

.tft-about-matrix__stat-box {

  cursor: crosshair !important;

  perspective: 1000px !important;

}



.tft-about-matrix__stat-progress {

  width: 0 !important;

  /* Initial state for animation */

  transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1) !important;

}



.tft-about-matrix__stat-box:hover .tft-about-matrix__stat-progress {

  width: var(--target-width, 100%) !important;

  /* Will set via inline style or specific classes */

}



/* Specific Progress Widths */

.tft-about-matrix__stat-box:nth-child(1) {

  --target-width: 85%;

}



.tft-about-matrix__stat-box:nth-child(2) {

  --target-width: 95%;

}



.tft-about-matrix__stat-box:nth-child(3) {

  --target-width: 99%;

}



.tft-about-matrix__stat-box:nth-child(4) {

  --target-width: 70%;

}



.tft-about-matrix__stat-val {

  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.tft-about-matrix__stat-box:hover .tft-about-matrix__stat-val {

  color: var(--cpf-color-accent) !important;

  transform: translateZ(30px) !important;

  letter-spacing: 0.05em !important;

}



/* Box Glitch/Scanline Hover */

.tft-about-matrix__stat-box::after {

  content: '' !important;

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(transparent 50%, rgba(226, 255, 0, 0.02) 50%) !important;

  background-size: 100% 4px !important;

  opacity: 0 !important;

  pointer-events: none !important;

  transition: opacity 0.3s ease !important;

}



.tft-about-matrix__stat-box:hover::after {

  opacity: 1 !important;

  animation: tft-scanline 10s linear infinite !important;

}



@keyframes tft-scanline {

  from {

    background-position: 0 0;

  }



  to {

    background-position: 0 100%;

  }

}



/* Timeline Staggered Reveal */

.tft-about-matrix__node-info {

  opacity: 0.4 !important;

  transition: all 0.6s ease !important;

  transform: translateX(-10px) !important;

}



.tft-about-matrix__node:hover .tft-about-matrix__node-info {

  opacity: 1 !important;

  transform: translateX(0) !important;

}



.tft-about-matrix__node-name {

  position: relative !important;

  display: inline-block !important;

}



.tft-about-matrix__node-name::after {

  content: '' !important;

  position: absolute !important;

  bottom: -5px !important;

  left: 0 !important;

  width: 0 !important;

  height: 1px !important;

  background: var(--cpf-color-accent) !important;

  transition: width 0.6s ease !important;

}



.tft-about-matrix__node:hover .tft-about-matrix__node-name::after {

  width: 100% !important;

}



/* =============================================

   PHASE 2: THE PERFORMANCE MATRIX (HUD STYLE)

   ============================================= */

.tft-about-matrix {

  background: #000 !important;

  padding: 12rem 0 !important;

  position: relative !important;

  overflow: hidden !important;

}



.tft-about-matrix__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

  position: relative !important;

  z-index: 10 !important;

}



.tft-about-matrix__header {

  margin-bottom: 8rem !important;

  border-left: 3px solid var(--cpf-color-accent) !important;

  padding-left: 2rem !important;

}



.tft-about-matrix__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.4em !important;

  display: block !important;

  margin-bottom: 1rem !important;

}



.tft-about-matrix__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2rem, 4vw, 3.5rem) !important;

  color: #fff !important;

  letter-spacing: -0.02em !important;

}



.tft-about-matrix__main-grid {

  display: grid !important;

  grid-template-columns: 0.8fr 1.2fr !important;

  gap: 12rem !important;

}



.tft-about-matrix__timeline {

  position: relative !important;

}



.tft-about-matrix__timeline-line {

  position: absolute !important;

  left: 85px !important;

  top: 0 !important;

  width: 1px !important;

  height: 100% !important;

  background: rgba(255, 255, 255, 0.1) !important;

}



.tft-about-matrix__node {

  display: flex !important;

  align-items: center !important;

  gap: 3rem !important;

  margin-bottom: 6rem !important;

  cursor: crosshair !important;

  transition: all 0.4s ease !important;

}



.tft-about-matrix__node-year {

  width: 85px !important;

  flex-shrink: 0 !important;

  text-align: center !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.9rem !important;

  color: #fff !important;

  opacity: 0.8 !important;

}



.tft-about-matrix__node-point {

  width: 12px !important;

  height: 12px !important;

  background: #111 !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  transform: rotate(45deg) !important;

  z-index: 10 !important;

}



.tft-about-matrix__node.is-current .tft-about-matrix__node-point {

  background: var(--cpf-color-accent) !important;

  animation: tft-node-pulse 2s infinite !important;

  border: none !important;

}



@keyframes tft-node-pulse {

  0% {

    box-shadow: 0 0 0 0 rgba(226, 255, 0, 0.4);

  }



  70% {

    box-shadow: 0 0 0 15px rgba(226, 255, 0, 0);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(226, 255, 0, 0);

  }

}



.tft-about-matrix__stat-box {

  background: #080808 !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  padding: 4rem 3rem !important;

  position: relative !important;

  overflow: hidden !important;

  transition: all 0.3s ease !important;

}



.tft-about-matrix__stat-val {

  font-family: var(--cpf-font-heading) !important;

  font-size: 4rem !important;

  color: #fff !important;

  line-height: 1 !important;

  margin-bottom: 1rem !important;

}



.tft-about-matrix__stat-lab {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  color: var(--cpf-color-accent) !important;

  font-weight: 700 !important;

  letter-spacing: 0.2em !important;

  margin-bottom: 2rem !important;

  display: block !important;

}



.tft-about-matrix__stat-bar {

  height: 2px !important;

  background: rgba(255, 255, 255, 0.05) !important;

  width: 100% !important;

}



.tft-about-matrix__stat-progress {

  height: 100% !important;

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 10px var(--cpf-color-accent) !important;

  transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1) !important;

}



/* =============================================

   ULTRA-PREMIUM GLASSMORPHISM (REVAMP)

   ============================================= */

.tft-about-core__btn {

  background: rgba(255, 255, 255, 0.02) !important;

  backdrop-filter: blur(20px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;

  position: relative !important;

  transform-style: preserve-3d !important;

}



.tft-about-core__btn::after {

  content: '' !important;

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent) !important;

  opacity: 0 !important;

  transition: opacity 0.6s ease !important;

}



.tft-about-core__btn:hover {

  background: rgba(255, 255, 255, 0.06) !important;

  border-color: rgba(255, 255, 255, 0.15) !important;

  transform: translateX(15px) translateZ(30px) !important;

  box-shadow:

    -20px 20px 40px rgba(0, 0, 0, 0.5),

    inset 0 0 20px rgba(255, 255, 255, 0.02) !important;

}



.tft-about-core__btn:hover::after {

  opacity: 1 !important;

}



.tft-about-core__btn.is-active {

  background: rgba(255, 255, 255, 0.08) !important;

  border-color: var(--cpf-color-accent) !important;

  box-shadow:

    0 0 40px rgba(226, 255, 0, 0.05),

    inset 0 0 30px rgba(255, 255, 255, 0.05) !important;

}



/* Content Panel Glass Glow */

.tft-about-core__panel {

  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 70%) !important;

  padding: 4rem !important;

  border-radius: 8px !important;

  border: 1px solid rgba(255, 255, 255, 0.02) !important;

}





/* =============================================

   HERO KINETIC BACKGROUND (ATMOSPHERIC DEPTH)

   ============================================= */

.tft-about-hero {

  position: relative !important;

  overflow: hidden !important;

  background: #000 !important;

}



.tft-about-hero__bg {

  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

  opacity: 0.08 !important;

  /* Ultra-low opacity for subtle depth */

  pointer-events: none !important;

  mix-blend-mode: plus-lighter !important;

}



.tft-about-hero__bg-img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  filter: grayscale(1) brightness(0.5) contrast(1.5) !important;

  animation: tft-hero-float 30s ease-in-out infinite alternate !important;

}



.tft-about-hero__bg-overlay {

  position: absolute !important;

  inset: 0 !important;

  background: radial-gradient(circle at center, transparent 0%, #000 85%) !important;

}



.tft-about-hero__container {

  position: relative !important;

  z-index: 10 !important;

  /* Ensures text is above the background */

}



@keyframes tft-hero-float {

  from {

    transform: scale(1.0) rotate(0deg);

  }



  to {

    transform: scale(1.1) rotate(1deg);

  }

}



/* =============================================

   PHASE 2: THE PERFORMANCE MATRIX (HUD STYLE)

   ============================================= */

.tft-about-matrix {

  background: #000 !important;

  padding: 12rem 0 !important;

  position: relative !important;

  overflow: hidden !important;

}



.tft-about-matrix__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

  position: relative !important;

  z-index: 10 !important;

}



.tft-about-matrix__header {

  margin-bottom: 8rem !important;

  border-left: 3px solid var(--cpf-color-accent) !important;

  padding-left: 2rem !important;

}



.tft-about-matrix__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.4em !important;

  display: block !important;

  margin-bottom: 1rem !important;

}



.tft-about-matrix__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2rem, 4vw, 3.5rem) !important;

  color: #fff !important;

  letter-spacing: -0.02em !important;

}



.tft-about-matrix__main-grid {

  display: grid !important;

  grid-template-columns: 0.8fr 1.2fr !important;

  gap: 12rem !important;

}



.tft-about-matrix__timeline {

  position: relative !important;

}



.tft-about-matrix__timeline-line {

  position: absolute !important;

  left: 85px !important;

  top: 0 !important;

  width: 1px !important;

  height: 100% !important;

  background: rgba(255, 255, 255, 0.1) !important;

}



.tft-about-matrix__node {

  display: flex !important;

  align-items: center !important;

  gap: 3rem !important;

  margin-bottom: 6rem !important;

  cursor: crosshair !important;

  transition: all 0.4s ease !important;

}



.tft-about-matrix__node-year {

  width: 85px !important;

  flex-shrink: 0 !important;

  text-align: center !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.9rem !important;

  color: #fff !important;

  opacity: 0.8 !important;

}



.tft-about-matrix__node-point {

  width: 12px !important;

  height: 12px !important;

  background: #111 !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  transform: rotate(45deg) !important;

  z-index: 10 !important;

}



.tft-about-matrix__node.is-current .tft-about-matrix__node-point {

  background: var(--cpf-color-accent) !important;

  animation: tft-node-pulse 2s infinite !important;

  border: none !important;

}



@keyframes tft-node-pulse {

  0% {

    box-shadow: 0 0 0 0 rgba(226, 255, 0, 0.4);

  }



  70% {

    box-shadow: 0 0 0 15px rgba(226, 255, 0, 0);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(226, 255, 0, 0);

  }

}



.tft-about-matrix__stat-box {

  background: #080808 !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  padding: 4rem 3rem !important;

  position: relative !important;

  overflow: hidden !important;

  transition: all 0.3s ease !important;

}



.tft-about-matrix__stat-val {

  font-family: var(--cpf-font-heading) !important;

  font-size: 4rem !important;

  color: #fff !important;

  line-height: 1 !important;

  margin-bottom: 1rem !important;

}



.tft-about-matrix__stat-lab {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  color: var(--cpf-color-accent) !important;

  font-weight: 700 !important;

  letter-spacing: 0.2em !important;

  margin-bottom: 2rem !important;

  display: block !important;

}



.tft-about-matrix__stat-bar {

  height: 2px !important;

  background: rgba(255, 255, 255, 0.05) !important;

  width: 100% !important;

}



.tft-about-matrix__stat-progress {

  height: 100% !important;

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 10px var(--cpf-color-accent) !important;

  transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1) !important;

}





/* =============================================

   INSTITUTIONAL HEADER BACKGROUND

   ============================================= */

.cpf-header {

  position: relative !important;

  background: #000 !important;

  overflow: hidden !important;

}



.cpf-header::before {

  content: '' !important;

  position: absolute !important;

  inset: 0 !important;

  background-size: cover !important;

  background-position: center !important;

  opacity: 0.15 !important;

  z-index: 0 !important;

  pointer-events: none !important;

  mix-blend-mode: soft-light !important;

}



.cpf-header::after {

  content: '' !important;

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%) !important;

  z-index: 1 !important;

  pointer-events: none !important;

}



.cpf-header__console,

.cpf-header__main {

  position: relative !important;

  z-index: 10 !important;

}



/* =============================================

   SERVICES PAGE (SOVEREIGN ELITE SPEC)

   ============================================= */



/* --- Services Hero --- */

.tft-srv-hero {

  position: relative !important;

  min-height: 80vh !important;

  display: flex !important;

  align-items: center !important;

  background: #000 !important;

  overflow: hidden !important;

  padding: 15rem 0 10rem !important;

}



.tft-srv-hero__bg {

  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

  opacity: 0.1 !important;

}



.tft-srv-hero__bg-img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  filter: grayscale(1) brightness(0.5) !important;

}



.tft-srv-hero__bg-overlay {

  position: absolute !important;

  inset: 0 !important;

  background: radial-gradient(circle at center, transparent 0%, #000 85%) !important;

}



.tft-srv-hero__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

  position: relative !important;

  z-index: 10 !important;

}



.tft-srv-hero__tag {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.85rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.5em !important;

  display: block !important;

  margin-bottom: 2rem !important;

}



.tft-srv-hero__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(3rem, 8vw, 7.5rem) !important;

  color: #fff !important;

  line-height: 0.9 !important;

  letter-spacing: -0.04em !important;

  margin-bottom: 3rem !important;

}



.tft-srv-hero__title-accent {

  color: var(--cpf-color-accent) !important;

  font-style: italic !important;

}



.tft-srv-hero__subtext {

  max-width: 600px !important;

  font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;

  color: rgba(255, 255, 255, 0.6) !important;

  line-height: 1.6 !important;

}



/* --- Services Grid --- */

.tft-srv-grid {

  background: #000 !important;

  padding-bottom: 15rem !important;

}



.tft-srv-grid__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-grid__layout {

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 4rem !important;

}



.tft-srv-card {

  background: rgba(255, 255, 255, 0.02) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-radius: 2rem !important;

  overflow: hidden !important;

  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;

  display: flex !important;

  flex-direction: column !important;

}



.tft-srv-card:hover {

  background: rgba(255, 255, 255, 0.04) !important;

  border-color: rgba(226, 255, 0, 0.3) !important;

  transform: translateY(-10px) !important;

}



.tft-srv-card__media {

  height: 400px !important;

  overflow: hidden !important;

}



.tft-srv-card__img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  transition: transform 0.8s ease !important;

}



.tft-srv-card:hover .tft-srv-card__img {

  transform: scale(1.05) !important;

}



.tft-srv-card__content {

  padding: 4rem !important;

  position: relative !important;

}



.tft-srv-card__num {

  position: absolute !important;

  top: 4rem !important;

  right: 4rem !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  color: var(--cpf-color-accent) !important;

  opacity: 0.5 !important;

}



.tft-srv-card__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.5rem !important;

  color: #fff !important;

  margin-bottom: 1.5rem !important;

}



.tft-srv-card__desc {

  font-size: 1.1rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  line-height: 1.6 !important;

  margin-bottom: 2.5rem !important;

}



.tft-srv-card__list {

  list-style: none !important;

  padding: 0 !important;

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 1.5rem !important;

}



.tft-srv-card__list li {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.75rem !important;

  color: #fff !important;

  padding: 0.5rem 1rem !important;

  background: rgba(255, 255, 255, 0.05) !important;

  border-radius: 100px !important;

  letter-spacing: 0.05em !important;

}



/* --- Process Section --- */

.tft-srv-process {

  background: #050505 !important;

  padding: 15rem 0 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-srv-process__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-process__header {

  margin-bottom: 8rem !important;

  max-width: 800px !important;

}



.tft-srv-process__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2.5rem, 4vw, 4.5rem) !important;

  color: #fff !important;

  margin-bottom: 2rem !important;

}



.tft-srv-process__desc {

  font-size: 1.2rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

}



.tft-srv-process__grid {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 4rem !important;

}



.tft-srv-process__step {

  padding-top: 3rem !important;

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

  transition: border-color 0.4s ease !important;

}



.tft-srv-process__step:hover {

  border-color: var(--cpf-color-accent) !important;

}



.tft-srv-process__step-head {

  display: flex !important;

  flex-direction: column !important;

  gap: 1rem !important;

  margin-bottom: 2rem !important;

}



.tft-srv-process__step-num {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  color: var(--cpf-color-accent) !important;

}



.tft-srv-process__step-title {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.5rem !important;

  color: #fff !important;

}



.tft-srv-process__step-text {

  font-size: 1rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

  line-height: 1.6 !important;

}



@media (max-width: 1024px) {

  .tft-srv-grid__layout {

    grid-template-columns: 1fr !important;

  }



  .tft-srv-process__grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }

}



@media (max-width: 768px) {

  .tft-srv-process__grid {

    grid-template-columns: 1fr !important;

  }

}



/* --- Capability Matrix (HUD) --- */

.tft-srv-matrix {

  background: #000 !important;

  padding: 10rem 0 5rem !important;

}



.tft-srv-matrix__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-matrix__header {

  margin-bottom: 4rem !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: flex-end !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

  padding-bottom: 2rem !important;

}



.tft-srv-matrix__status {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.75rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

  display: flex !important;

  align-items: center !important;

  gap: 1rem !important;

}



.tft-srv-matrix__pulse {

  width: 8px !important;

  height: 8px !important;

  background: var(--cpf-color-accent) !important;

  border-radius: 50% !important;

  animation: srv-pulse 2s infinite !important;

}



@keyframes srv-pulse {

  0% {

    opacity: 1;

    transform: scale(1);

  }



  50% {

    opacity: 0.4;

    transform: scale(1.2);

  }



  100% {

    opacity: 1;

    transform: scale(1);

  }

}



.tft-srv-matrix__val {

  color: #fff !important;

  font-weight: 700 !important;

}



.tft-srv-matrix__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.5rem !important;

  color: #fff !important;

  letter-spacing: -0.02em !important;

}



.tft-srv-matrix__stats {

  display: flex !important;

  gap: 8rem !important;

}



.tft-srv-matrix__stat {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

}



.tft-srv-matrix__num {

  font-family: var(--cpf-font-heading) !important;

  font-size: 3rem !important;

  color: #fff !important;

}



.tft-srv-matrix__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.2em !important;

}



/* --- Technical Blueprint (Deep Dive) --- */

.tft-srv-blueprint {

  position: relative !important;

  padding: 15rem 0 !important;

  background: #000 !important;

  overflow: hidden !important;

}



.tft-srv-blueprint__bg {

  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

}



.tft-srv-blueprint__bg-img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  opacity: 0.15 !important;

  filter: grayscale(1) !important;

}



.tft-srv-blueprint__overlay {

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(to right, #000 30%, transparent 70%), linear-gradient(to top, #000 10%, transparent 50%) !important;

}



.tft-srv-blueprint__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

  position: relative !important;

  z-index: 10 !important;

}



.tft-srv-blueprint__layout {

  display: grid !important;

  grid-template-columns: 1fr 1.2fr !important;

  gap: 10rem !important;

  align-items: center !important;

}



.tft-srv-blueprint__tag {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.4em !important;

  display: block !important;

  margin-bottom: 2rem !important;

}



.tft-srv-blueprint__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(3rem, 5vw, 5.5rem) !important;

  color: #fff !important;

  line-height: 1 !important;

  margin-bottom: 3rem !important;

}



.tft-srv-blueprint__desc {

  max-width: 500px !important;

  font-size: 1.2rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  line-height: 1.6 !important;

  margin-bottom: 4rem !important;

}



.tft-srv-blueprint__specs {

  display: flex !important;

  gap: 4rem !important;

}



.tft-srv-blueprint__spec {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

}



.tft-srv-blueprint__spec strong {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.5rem !important;

  color: #fff !important;

}



.tft-srv-blueprint__spec span {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.75rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

}



.tft-srv-blueprint__visual {

  position: relative !important;

}



.tft-srv-blueprint__frame {

  position: relative !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding: 2rem !important;

  background: rgba(255, 255, 255, 0.02) !important;

  backdrop-filter: blur(10px) !important;

}



.tft-srv-blueprint__frame-img {

  width: 100% !important;

  display: block !important;

  filter: contrast(1.1) brightness(0.8) !important;

}



.tft-srv-blueprint__frame-overlay {

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(45deg, rgba(226, 255, 0, 0.05) 0%, transparent 100%) !important;

}



/* --- Voice of Sovereignty (Testimonials) --- */

.tft-srv-voice {

  background: #000 !important;

  padding: 15rem 0 !important;

}



.tft-srv-voice__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-voice__header {

  margin-bottom: 8rem !important;

  text-align: center !important;

  max-width: 800px !important;

  margin-inline: auto !important;

}



.tft-srv-voice__tag {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.4em !important;

  display: block !important;

  margin-bottom: 2rem !important;

}



.tft-srv-voice__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2rem, 3.5vw, 3.5rem) !important;

  color: #fff !important;

  line-height: 1.2 !important;

}



.tft-srv-voice__grid {

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 4rem !important;

}



.tft-srv-voice__card {

  background: rgba(255, 255, 255, 0.03) !important;

  padding: 5rem !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  position: relative !important;

}



.tft-srv-voice__quote {

  font-size: clamp(1.2rem, 1.8vw, 1.8rem) !important;

  color: #fff !important;

  line-height: 1.5 !important;

  font-style: italic !important;

  margin-bottom: 4rem !important;

  position: relative !important;

}



.tft-srv-voice__quote::before {

  content: '�' !important;

  position: absolute !important;

  top: -2rem !important;

  left: -2rem !important;

  font-size: 6rem !important;

  color: var(--cpf-color-accent) !important;

  opacity: 0.2 !important;

  font-family: serif !important;

}



.tft-srv-voice__author {

  display: flex !important;

  align-items: center !important;

  gap: 1.5rem !important;

}



.tft-srv-voice__avatar {

  width: 60px !important;

  height: 60px !important;

  border-radius: 50% !important;

  object-fit: cover !important;

}



.tft-srv-voice__meta {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.25rem !important;

}



.tft-srv-voice__meta strong {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.9rem !important;

  color: #fff !important;

}



.tft-srv-voice__meta span {

  font-size: 0.8rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

}



/* --- Elite FAQ (Glassmorphic) --- */

.tft-srv-faq {

  background: #050505 !important;

  padding-bottom: 15rem !important;

}



.tft-srv-faq__container {

  max-width: 900px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-faq__header {

  margin-bottom: 6rem !important;

  text-align: center !important;

}



.tft-srv-faq__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: 3rem !important;

  color: #fff !important;

}



.tft-srv-faq__list {

  display: flex !important;

  flex-direction: column !important;

  gap: 1.5rem !important;

}



.tft-srv-faq__item {

  background: rgba(255, 255, 255, 0.02) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  transition: all 0.3s ease !important;

}



.tft-srv-faq__item[open] {

  background: rgba(255, 255, 255, 0.04) !important;

  border-color: rgba(226, 255, 0, 0.2) !important;

}



.tft-srv-faq__trigger {

  padding: 2.5rem 3rem !important;

  list-style: none !important;

  cursor: pointer !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

}



.tft-srv-faq__trigger::-webkit-details-marker {

  display: none !important;

}



.tft-srv-faq__q {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.4rem !important;

  color: #fff !important;

}



.tft-srv-faq__icon {

  width: 20px !important;

  height: 20px !important;

  position: relative !important;

}



.tft-srv-faq__icon::before,

.tft-srv-faq__icon::after {

  content: '' !important;

  position: absolute !important;

  top: 50% !important;

  left: 50% !important;

  background: #fff !important;

  transform: translate(-50%, -50%) !important;

  transition: all 0.3s ease !important;

}



.tft-srv-faq__icon::before {

  width: 100% !important;

  height: 1px !important;

}



.tft-srv-faq__icon::after {

  width: 1px !important;

  height: 100% !important;

}



.tft-srv-faq__item[open] .tft-srv-faq__icon::after {

  transform: translate(-50%, -50%) rotate(90deg) !important;

  opacity: 0 !important;

}



.tft-srv-faq__content {

  padding: 0 3rem 3rem !important;

}



.tft-srv-faq__content p {

  font-size: 1.1rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  line-height: 1.6 !important;

}



/* =============================================

   SERVICES PAGE (EDITORIAL OVERHAUL)

   ============================================= */



/* --- Editorial Intro --- */

.tft-srv-intro {

  position: relative !important;

  background: #050505 !important;

  padding: 15rem 0 10rem !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-srv-intro__bg {

  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

  pointer-events: none !important;

}



.tft-srv-intro__bg-img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  opacity: 0.15 !important;

  filter: grayscale(1) !important;

}



.tft-srv-intro__bg-overlay {

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 0%, #050505 100%) !important;

}



.tft-srv-intro__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

  position: relative !important;

  z-index: 10 !important;

}



.tft-srv-intro__top {

  display: grid !important;

  grid-template-columns: 2fr 1fr !important;

  gap: 8rem !important;

  margin-bottom: 10rem !important;

  align-items: end !important;

}



.tft-srv-intro__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2rem, 4vw, 4.2rem) !important;

  color: #fff !important;

  line-height: 1.1 !important;

  letter-spacing: -0.02em !important;

  font-weight: 500 !important;

}



.tft-srv-intro__side {

  display: flex !important;

  flex-direction: column !important;

  gap: 3rem !important;

}



.tft-srv-intro__side-col p {

  font-size: 1.1rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  line-height: 1.6 !important;

}



.tft-srv-intro__bottom {

  display: flex !important;

  gap: 6rem !important;

}



.tft-srv-intro__stat {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

}



.tft-srv-intro__stat-val {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.5rem !important;

  color: #fff !important;

  font-weight: 600 !important;

}



.tft-srv-intro__stat-lab {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.75rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.1em !important;

}



/* --- Visual Showcase --- */

.tft-srv-showcase {

  background: #0a0a0a !important;

  padding: 10rem 0 !important;

}



.tft-srv-showcase__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-showcase__heading {

  font-family: var(--cpf-font-heading) !important;

  font-size: 3rem !important;

  color: #fff !important;

  margin-bottom: 4rem !important;

}



.tft-srv-showcase__grid {

  display: grid !important;

  grid-template-columns: 1.5fr 1fr !important;

  gap: 2rem !important;

  align-items: start !important;

}



.tft-srv-showcase__col-main,

.tft-srv-showcase__col-side {

  position: relative !important;

}



.tft-srv-showcase__img {

  width: 100% !important;

  height: 600px !important;

  object-fit: cover !important;

  border-radius: 4px !important;

  margin-bottom: 1.5rem !important;

}



.tft-srv-showcase__img--small {

  height: 450px !important;

}



.tft-srv-showcase__caption {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.25rem !important;

}



.tft-srv-showcase__caption strong {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.2rem !important;

  color: #fff !important;

}



.tft-srv-showcase__caption span {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

}



/* --- The Statement --- */

.tft-srv-statement {

  background: #000 !important;

  padding: 15rem 0 !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-srv-statement__container {

  max-width: 900px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

  text-align: center !important;

}



.tft-srv-statement__text {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2rem, 3.5vw, 3.5rem) !important;

  color: #fff !important;

  line-height: 1.2 !important;

  margin-bottom: 3rem !important;

}



.tft-srv-statement__meta p {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.9rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

  line-height: 1.6 !important;

}



/* --- Vertical Offerings --- */

.tft-srv-offerings {

  background: #050505 !important;

  padding: 10rem 0 !important;

}



.tft-srv-offerings__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-offerings__layout {

  display: grid !important;

  grid-template-columns: 1fr 2fr !important;

  gap: 8rem !important;

}



.tft-srv-offerings__heading {

  font-family: var(--cpf-font-heading) !important;

  font-size: 3rem !important;

  color: #fff !important;

  position: sticky !important;

  top: 150px !important;

}



.tft-srv-offerings__list {

  display: flex !important;

  flex-direction: column !important;

}



.tft-srv-offerings__item {

  padding: 4rem 0 !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 1.5rem !important;

}



.tft-srv-offerings__item:first-child {

  padding-top: 0 !important;

}



.tft-srv-offerings__item-title {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.5rem !important;

  color: #fff !important;

}



.tft-srv-offerings__item-desc {

  font-size: 1.2rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  line-height: 1.6 !important;

  max-width: 600px !important;

}



/* --- Insights Row --- */

.tft-srv-insights {

  background: #000 !important;

  padding: 15rem 0 !important;

}



.tft-srv-insights__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-insights__header {

  display: flex !important;

  justify-content: space-between !important;

  align-items: flex-end !important;

  margin-bottom: 5rem !important;

}



.tft-srv-insights__heading {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.5rem !important;

  color: #fff !important;

}



.tft-srv-insights__link {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  color: var(--cpf-color-accent) !important;

  text-decoration: none !important;

  padding-bottom: 4px !important;

  border-bottom: 1px solid var(--cpf-color-accent) !important;

  transition: opacity 0.3s ease !important;

}



.tft-srv-insights__link:hover {

  opacity: 0.7 !important;

}



.tft-srv-insights__grid {

  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap: 2rem !important;

}



.tft-srv-insights__card {

  position: relative !important;

  display: flex !important;

  flex-direction: column !important;

  text-decoration: none !important;

  overflow: hidden !important;

  border-radius: 4px !important;

  transition: transform 0.4s ease !important;

}



.tft-srv-insights__card:hover {

  transform: translateY(-10px) !important;

}



.tft-srv-insights__card-img {

  width: 100% !important;

  height: 500px !important;

  object-fit: cover !important;

  filter: brightness(0.6) !important;

  transition: filter 0.4s ease, transform 0.6s ease !important;

}



.tft-srv-insights__card:hover .tft-srv-insights__card-img {

  filter: brightness(0.8) !important;

  transform: scale(1.05) !important;

}



.tft-srv-insights__card-content {

  position: absolute !important;

  top: 2rem !important;

  left: 2rem !important;

  right: 2rem !important;

  z-index: 10 !important;

}



.tft-srv-insights__card-tag {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.1em !important;

  margin-bottom: 1rem !important;

  display: inline-block !important;

  background: rgba(0, 0, 0, 0.5) !important;

  padding: 4px 8px !important;

  border-radius: 2px !important;

}



.tft-srv-insights__card-title {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.5rem !important;

  color: #fff !important;

  line-height: 1.3 !important;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;

}



@media (max-width: 1024px) {

  .tft-srv-intro__top {

    grid-template-columns: 1fr !important;

    gap: 4rem !important;

  }



  .tft-srv-showcase__grid {

    grid-template-columns: 1fr !important;

  }



  .tft-srv-showcase__img {

    height: 400px !important;

  }



  .tft-srv-offerings__layout {

    grid-template-columns: 1fr !important;

    gap: 4rem !important;

  }



  .tft-srv-offerings__heading {

    position: static !important;

  }



  .tft-srv-insights__grid {

    grid-template-columns: 1fr !important;

  }

}



@media (max-width: 768px) {

  .tft-srv-intro__bottom {

    flex-direction: column !important;

    gap: 2rem !important;

  }



  .tft-srv-insights__header {

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 2rem !important;

  }

}



/* =============================================

   SERVICES PAGE: EXTREME EDITORIAL OVERHAUL v2

   ============================================= */



/* Force extreme typography and layout matching the inspiration shot */



#wp-block-srv-intro .tft-srv-intro__top {

  display: grid !important;

  grid-template-columns: 2.5fr 1fr !important;

  gap: 4rem !important;

  align-items: start !important;

}



#wp-block-srv-intro .tft-srv-intro__title {

  font-size: clamp(3.5rem, 6vw, 6.5rem) !important;

  line-height: 1 !important;

  letter-spacing: -0.04em !important;

  font-weight: 500 !important;

  max-width: 1000px !important;

}



#wp-block-srv-intro .tft-srv-intro__side {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 2rem !important;

  margin-top: 1rem !important;

}



#wp-block-srv-intro .tft-srv-intro__side-col p {

  font-size: 0.9rem !important;

  color: #fff !important;

  opacity: 0.7 !important;

}



#wp-block-srv-intro .tft-srv-intro__bottom {

  gap: 8rem !important;

}



#wp-block-srv-intro .tft-srv-intro__stat-val {

  font-size: 3.5rem !important;

}



#wp-block-srv-intro .tft-srv-intro__stat-lab {

  font-size: 0.85rem !important;

}



/* Fix Statement Section */

#wp-block-srv-statement {

  background: #0a0a0a !important;

}



#wp-block-srv-statement .tft-srv-statement__container {

  max-width: 1200px !important;

  text-align: left !important;

}



#wp-block-srv-statement .tft-srv-statement__text {

  font-size: clamp(2.5rem, 5vw, 5rem) !important;

  line-height: 1.1 !important;

  margin-bottom: 4rem !important;

  max-width: 900px !important;

}



#wp-block-srv-statement .tft-srv-statement__meta {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  max-width: 600px !important;

  gap: 3rem !important;

}



/* Fix Offerings to match "What we do" layout */

#wp-block-srv-offerings .tft-srv-offerings__layout {

  grid-template-columns: 1fr !important;

  gap: 4rem !important;

}



#wp-block-srv-offerings .tft-srv-offerings__list {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 2rem !important;

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding-top: 4rem !important;

}



#wp-block-srv-offerings .tft-srv-offerings__item {

  border-bottom: none !important;

  padding: 0 !important;

}



#wp-block-srv-offerings .tft-srv-offerings__item-title {

  font-size: 1.5rem !important;

  margin-bottom: 1.5rem !important;

}



#wp-block-srv-offerings .tft-srv-offerings__item-desc {

  font-size: 0.95rem !important;

  line-height: 1.5 !important;

}



/* =============================================

   SERVICES PAGE: MUGEN EXACT ALIGNMENT FIXES

   ============================================= */



/* Intro Stats - Vertical Stack */

#wp-block-srv-intro .tft-srv-intro__bottom {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 2rem !important;

}



#wp-block-srv-intro .tft-srv-intro__stats-col,

#wp-block-srv-intro .tft-srv-intro__links-col {

  display: flex !important;

  flex-direction: column !important;

  gap: 3rem !important;

}



#wp-block-srv-intro .tft-srv-intro__stat {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

}



#wp-block-srv-intro .tft-srv-intro__link-item a {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.85rem !important;

  color: var(--cpf-color-accent) !important;

  text-decoration: none !important;

  text-transform: uppercase !important;

  letter-spacing: 0.1em !important;

  border-bottom: 1px solid rgba(226, 255, 0, 0.3) !important;

  padding-bottom: 4px !important;

}



/* Statement - Left Aligned */

#wp-block-srv-statement .tft-srv-statement__container {

  max-width: 1400px !important;

  padding: 0 4rem !important;

  margin: 0 auto !important;

  text-align: left !important;

}



#wp-block-srv-statement .tft-srv-statement__text {

  font-size: clamp(2.5rem, 4.5vw, 4.5rem) !important;

  max-width: 1000px !important;

}



/* Clients Grid (Mugen Logo Row) */

.tft-srv-clients {

  background: #000 !important;

  padding: 5rem 0 10rem !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-srv-clients__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-clients__header {

  margin-bottom: 4rem !important;

}



.tft-srv-clients__heading {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2rem !important;

  color: #fff !important;

  margin-bottom: 1rem !important;

}



.tft-srv-clients__desc {

  font-size: 1rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

}



.tft-srv-clients__grid {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 2rem !important;

  row-gap: 4rem !important;

}



.tft-srv-clients__logo {

  font-family: var(--cpf-font-heading) !important;

  font-size: 1.5rem !important;

  color: rgba(255, 255, 255, 0.2) !important;

  letter-spacing: 0.1em !important;

  transition: color 0.3s ease !important;

  cursor: default !important;

}



.tft-srv-clients__logo:hover {

  color: #fff !important;

}



/* Offerings - 3 Column Layout */

#wp-block-srv-offerings .tft-srv-offerings__header {

  margin-bottom: 5rem !important;

}



#wp-block-srv-offerings .tft-srv-offerings__heading {

  font-size: 2.5rem !important;

  margin-bottom: 1.5rem !important;

}



#wp-block-srv-offerings .tft-srv-offerings__desc {

  font-size: 1.1rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  max-width: 600px !important;

  line-height: 1.6 !important;

}



#wp-block-srv-offerings .tft-srv-offerings__list {

  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap: 4rem !important;

  row-gap: 6rem !important;

  border-top: none !important;

  padding-top: 0 !important;

}



@media (max-width: 1024px) {

  #wp-block-srv-intro .tft-srv-intro__bottom {

    grid-template-columns: 1fr !important;

  }



  .tft-srv-clients__grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  #wp-block-srv-offerings .tft-srv-offerings__list {

    grid-template-columns: repeat(2, 1fr) !important;

  }

}



@media (max-width: 768px) {

  #wp-block-srv-offerings .tft-srv-offerings__list {

    grid-template-columns: 1fr !important;

  }

}



/* =============================================

   SERVICES PAGE: AGEVIA STRUCTURAL ADAPTATION

   ============================================= */



/* Text Highlighting (AGEvia style) */

.tft-hl {

  background-color: var(--cpf-color-accent) !important;

  color: #000 !important;

  padding: 0 0.5rem !important;

  display: inline-block !important;

  line-height: 1.1 !important;

  border-radius: 2px !important;

}



.tft-hl--dark {

  background-color: #000 !important;

  color: var(--cpf-color-accent) !important;

}



/* Inverted Statement Block */

.tft-srv-statement--inverted {

  background: var(--cpf-color-accent) !important;

  border-bottom: none !important;

}



.tft-srv-statement--inverted .tft-srv-statement__text {

  color: #000 !important;

  letter-spacing: -0.05em !important;

  font-weight: 600 !important;

}



.tft-srv-statement--inverted .tft-srv-statement__meta p {

  color: rgba(0, 0, 0, 0.7) !important;

}



/* E.L.I.T.E. Vertical Acronym Block (Adapting S.C.A.L.E.) */

.tft-srv-elite {

  background: #050505 !important;

  padding: 15rem 0 !important;

}



.tft-srv-elite__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-elite__layout {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 8rem !important;

  align-items: start !important;

}



.tft-srv-elite__heading {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2.5rem, 4vw, 4rem) !important;

  color: #fff !important;

  line-height: 1.1 !important;

  margin-bottom: 2rem !important;

}



.tft-srv-elite__desc {

  font-size: 1.2rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  line-height: 1.6 !important;

}



.tft-srv-elite__list {

  display: flex !important;

  flex-direction: column !important;

  gap: 3rem !important;

}



.tft-srv-elite__item {

  display: flex !important;

  gap: 2rem !important;

  align-items: flex-start !important;

}



.tft-srv-elite__letter {

  font-family: var(--cpf-font-heading) !important;

  font-size: 5rem !important;

  line-height: 0.8 !important;

  color: var(--cpf-color-accent) !important;

  font-weight: 700 !important;

  min-width: 60px !important;

  text-align: center !important;

}



.tft-srv-elite__content h4 {

  font-family: var(--cpf-font-mono) !important;

  font-size: 1.2rem !important;

  color: #fff !important;

  margin-bottom: 0.5rem !important;

  letter-spacing: 0.1em !important;

  text-transform: uppercase !important;

}



.tft-srv-elite__content p {

  font-size: 1rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

  line-height: 1.5 !important;

}



/* Accordion Disciplines Block (Adapting "Meet the Team") */

.tft-srv-acc {

  background: #000 !important;

  padding: 10rem 0 !important;

}



.tft-srv-acc__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-acc__header {

  margin-bottom: 8rem !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding-bottom: 2rem !important;

}



.tft-srv-acc__heading {

  font-family: var(--cpf-font-heading) !important;

  font-size: 3rem !important;

  color: #fff !important;

}



.tft-srv-acc__row {

  display: grid !important;

  grid-template-columns: 350px 1fr !important;

  gap: 4rem !important;

  margin-bottom: 6rem !important;

  align-items: start !important;

}



.tft-srv-acc__col-img img {

  width: 100% !important;

  height: 450px !important;

  object-fit: cover !important;

  border-radius: 2px !important;

  filter: grayscale(0.5) contrast(1.2) !important;

}



.tft-srv-acc__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: 3rem !important;

  color: #fff !important;

  margin-bottom: 3rem !important;

}



.tft-srv-acc__toggles {

  display: flex !important;

  flex-direction: column !important;

}



.tft-srv-acc__toggle {

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

}



.tft-srv-acc__toggle summary {

  padding: 1.5rem 0 !important;

  cursor: pointer !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 1rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.1em !important;

  text-transform: uppercase !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  list-style: none !important;

}



.tft-srv-acc__toggle summary::-webkit-details-marker {

  display: none !important;

}



.tft-srv-acc__toggle-content {

  padding: 0 0 2rem 0 !important;

}



.tft-srv-acc__toggle-content p {

  font-size: 1.1rem !important;

  color: rgba(255, 255, 255, 0.6) !important;

  line-height: 1.6 !important;

  max-width: 800px !important;

}



@media (max-width: 1024px) {

  .tft-srv-elite__layout {

    grid-template-columns: 1fr !important;

    gap: 4rem !important;

  }



  .tft-srv-acc__row {

    grid-template-columns: 1fr !important;

    gap: 2rem !important;

  }



  .tft-srv-acc__col-img img {

    height: 300px !important;

  }

}



/* =============================================

   SERVICES PAGE: EXTREME SERVICE REWRITE

   ============================================= */



/* Simple Service Hero */

.tft-srv-hero {

  background: #000 !important;

  padding: 15rem 0 5rem !important;

  text-align: center !important;

}



.tft-srv-hero__title {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(3rem, 6vw, 6rem) !important;

  color: #fff !important;

  line-height: 1 !important;

  margin-bottom: 1.5rem !important;

  letter-spacing: -0.04em !important;

}



.tft-srv-hero__subtitle {

  font-family: var(--cpf-font-mono) !important;

  font-size: 1.2rem !important;

  color: var(--cpf-color-accent) !important;

  letter-spacing: 0.05em !important;

  text-transform: uppercase !important;

}



/* AGEvia 2x2 Features Grid */

.tft-srv-features {

  background: #050505 !important;

  padding: 10rem 0 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-srv-features__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-features__heading {

  font-family: var(--cpf-font-heading) !important;

  font-size: clamp(2rem, 3.5vw, 3.5rem) !important;

  color: #fff !important;

  max-width: 800px !important;

  margin-bottom: 6rem !important;

  line-height: 1.1 !important;

}



.tft-srv-features__grid {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 4rem !important;

  row-gap: 6rem !important;

}



.tft-srv-features__box {

  display: flex !important;

  gap: 2rem !important;

}



.tft-srv-features__icon {

  font-family: var(--cpf-font-mono) !important;

  font-size: 1.5rem !important;

  color: #000 !important;

  background: var(--cpf-color-accent) !important;

  width: 60px !important;

  height: 60px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 50% !important;

  flex-shrink: 0 !important;

  font-weight: 700 !important;

}



.tft-srv-features__content h3 {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2rem !important;

  color: #fff !important;

  margin-bottom: 1rem !important;

}



.tft-srv-features__content p {

  font-size: 1.1rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  line-height: 1.6 !important;

}



/* AGEvia Solid Blocks Grid */

.tft-srv-blocks {

  background: #000 !important;

  padding: 10rem 0 !important;

}



.tft-srv-blocks__container {

  max-width: 1400px !important;

  margin: 0 auto !important;

  padding: 0 4rem !important;

}



.tft-srv-blocks__heading {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.5rem !important;

  color: #fff !important;

  margin-bottom: 5rem !important;

}



.tft-srv-blocks__grid {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 2rem !important;

}



.tft-srv-blocks__card {

  padding: 5rem 4rem !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: space-between !important;

  min-height: 400px !important;

  border-radius: 4px !important;

}



.tft-srv-blocks__card h3 {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.5rem !important;

  line-height: 1.1 !important;

  margin-bottom: 2rem !important;

}



.tft-srv-blocks__card p {

  font-size: 1.2rem !important;

  line-height: 1.5 !important;

}



.tft-srv-blocks__card--accent {

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

}



.tft-srv-blocks__card--dark {

  background: #0a0a0a !important;

  color: #fff !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.tft-srv-blocks__card--dark p {

  color: rgba(255, 255, 255, 0.5) !important;

}



@media (max-width: 1024px) {

  .tft-srv-features__grid {

    grid-template-columns: 1fr !important;

  }



  .tft-srv-blocks__grid {

    grid-template-columns: 1fr !important;

  }



  .tft-srv-blocks__card {

    min-height: 300px !important;

    padding: 3rem !important;

  }

}



/* =============================================

   FIXES: Foundation Grid & Services Polish

   ============================================= */



/* Foundation Grid Fix */

.cpf-foundation__grid {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  grid-auto-rows: minmax(180px, auto) !important;

  gap: 1.5rem !important;

}



.cpf-foundation__card--media {

  grid-column: span 2 !important;

  grid-row: span 2 !important;

}



.cpf-foundation__card--insight {

  grid-column: span 2 !important;

}



.cpf-foundation__card--stat {

  grid-column: span 1 !important;

}



.cpf-foundation__card--wide {

  grid-column: span 4 !important;

}



/* Responsive Fixes for Foundation Grid */

@media (max-width: 1024px) {

  .cpf-foundation__grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  .cpf-foundation__card--media,

  .cpf-foundation__card--insight,

  .cpf-foundation__card--wide {

    grid-column: span 2 !important;

  }

}



@media (max-width: 768px) {

  .cpf-foundation__grid {

    grid-template-columns: 1fr !important;

  }



  .cpf-foundation__card--media,

  .cpf-foundation__card--insight,

  .cpf-foundation__card--wide,

  .cpf-foundation__card--stat {

    grid-column: span 1 !important;

  }

}



/* Services Section Polish */

.cpf-services__cat-pill {

  background: rgba(255, 255, 255, 0.05) !important;

  color: #fff !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  transition: all 0.3s ease !important;

}



.cpf-services__cat-pill:hover {

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

  border-color: var(--cpf-color-accent) !important;

}



.cpf-services__cat-pill--dark {

  background: transparent !important;

  border-color: var(--cpf-color-accent) !important;

  color: var(--cpf-color-accent) !important;

}



.cpf-services__item-panel {

  display: grid !important;

  grid-template-columns: 280px 1.5fr 1fr !important;

  gap: 4rem !important;

  padding-top: 3rem !important;

  align-items: start !important;

}



.cpf-services__img {

  width: 100% !important;

  height: 100% !important;

  min-height: 180px !important;

  object-fit: cover !important;

  border-radius: 4px !important;

  filter: grayscale(0.5) contrast(1.2) !important;

}



.cpf-services__item-info h3 {

  font-family: var(--cpf-font-heading) !important;

  font-size: 2.2rem !important;

  margin-bottom: 1rem !important;

  line-height: 1.1 !important;

}



.cpf-services__item-desc {

  font-size: 1.1rem !important;

  color: rgba(255, 255, 255, 0.6) !important;

  line-height: 1.6 !important;

}



@media (max-width: 1024px) {

  .cpf-services__item-panel {

    grid-template-columns: 1fr !important;

    gap: 2rem !important;

  }

}



/* =============================================

   SECTION: Sovereign Contact (2026)

   ============================================= */



.tft-contact-hero {

  background-color: var(--cpf-color-page-bg);

  color: var(--cpf-color-white);

  padding-block: var(--cpf-space-xl);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-contact-hero__container {

  max-inline-size: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-contact-hero__layout {

  display: flex;

  flex-direction: column;

  gap: var(--cpf-space-xl);

}



@media (min-width: 1024px) {

  .tft-contact-hero__layout {

    flex-direction: row;

    justify-content: space-between;

  }

}



.tft-contact-hero__left {

  flex: 0 0 250px;

  display: flex;

  flex-direction: column;

  gap: var(--cpf-space-lg);

}



.tft-contact-hero__label {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-xs);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.5);

}



.tft-contact-hero__profile {

  display: flex;

  align-items: center;

  gap: var(--cpf-space-sm);

}



.tft-contact-hero__avatar {

  border-radius: 50%;

  filter: grayscale(1);

}



.tft-contact-hero__profile-info {

  display: flex;

  flex-direction: column;

}



.tft-contact-hero__profile-info .name {

  font-size: var(--cpf-text-sm);

  font-weight: 600;

}



.tft-contact-hero__profile-info .role {

  font-size: var(--cpf-text-xs);

  color: rgba(255, 255, 255, 0.5);

}



.tft-contact-hero__right {

  flex: 1;

  max-inline-size: 800px;

}



.tft-contact-hero__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(2.5rem, 6vw, 5rem);

  line-height: 1.1;

  letter-spacing: var(--cpf-ls-tight);

  margin-block-end: var(--cpf-space-lg);

}



.tft-contact-hero__title .italic {

  font-style: italic;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.6);

}



.tft-contact-hero__quote {

  position: relative;

  padding-inline-start: var(--cpf-space-lg);

  margin-block-end: var(--cpf-space-xl);

}



.tft-contact-hero__quote .quote-mark {

  position: absolute;

  inset-inline-start: 0;

  inset-block-start: -0.5rem;

  font-size: 3rem;

  font-family: var(--cpf-font-display);

  color: var(--cpf-color-accent);

  opacity: 0.8;

}



.tft-contact-hero__quote p {

  font-size: var(--cpf-text-sm);

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.7);

  max-inline-size: 600px;

}



.tft-contact-hero__details {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: var(--cpf-space-lg);

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-block-start: var(--cpf-space-lg);

}



.tft-contact-hero__detail-item .label {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

  display: block;

  margin-block-end: 0.5rem;

}



.tft-contact-hero__detail-item .value {

  font-size: var(--cpf-text-sm);

  color: var(--cpf-color-white);

  text-decoration: none;

}



/* Form Section */

.tft-contact-form {

  background-color: var(--cpf-color-page-bg);

  color: var(--cpf-color-white);

  padding-block: var(--cpf-space-xl);

}



.tft-contact-form__container {

  max-inline-size: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-contact-form__layout {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--cpf-space-xl);

}



@media (min-width: 1024px) {

  .tft-contact-form__layout {

    grid-template-columns: 300px 1fr;

  }

}



.tft-contact-form__sidebar {

  display: flex;

  flex-direction: column;

  gap: var(--cpf-space-xl);

}



.tft-contact-form__step {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.tft-contact-form__step .num {

  font-family: var(--cpf-font-mono);

  color: var(--cpf-color-accent);

  font-size: var(--cpf-text-xs);

}



.tft-contact-form__step p {

  font-size: var(--cpf-text-xs);

  color: rgba(255, 255, 255, 0.6);

  line-height: 1.5;

}



.tft-contact-form__tabs {

  display: flex;

  gap: var(--cpf-space-sm);

  margin-block-end: var(--cpf-space-lg);

}



.tft-contact-form__tab {

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--cpf-color-white);

  padding: 0.6rem 1.2rem;

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  text-transform: uppercase;

  cursor: pointer;

  transition: var(--cpf-transition);

}



.tft-contact-form__tab.is-active {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

}



.tft-contact-form__grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--cpf-space-md);

}



@media (min-width: 768px) {

  .tft-contact-form__grid {

    grid-template-columns: 1fr 1fr;

  }

}



.tft-contact-form__field {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.tft-contact-form__field.full {

  grid-column: 1 / -1;

}



.tft-contact-form__field label {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  text-transform: uppercase;

  color: var(--cpf-color-accent);

}



.tft-contact-form__field input,

.tft-contact-form__field textarea {

  background: transparent;

  border: none;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding: 0.75rem 0;

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  outline: none;

  transition: border-color var(--cpf-transition);

}



.tft-contact-form__field input:focus,

.tft-contact-form__field textarea:focus {

  border-bottom-color: var(--cpf-color-white);

}



.tft-contact-form__budget {

  margin-block: var(--cpf-space-lg);

}



.tft-contact-form__budget .label {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  text-transform: uppercase;

  color: var(--cpf-color-accent);

  margin-block-end: 1rem;

}



.tft-contact-form__budget-options {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}



.budget-option {

  cursor: pointer;

}



.budget-option input {

  display: none;

}



.budget-option span {

  display: inline-block;

  padding: 0.6rem 1rem;

  border: 1px solid rgba(255, 255, 255, 0.1);

  font-size: 11px;

  font-family: var(--cpf-font-mono);

  transition: var(--cpf-transition);

}



.budget-option input:checked+span {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

}



.tft-contact-form__footer {

  display: flex;

  flex-direction: column;

  gap: var(--cpf-space-lg);

  margin-block-start: var(--cpf-space-lg);

}



@media (min-width: 768px) {

  .tft-contact-form__footer {

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

  }

}



.tft-contact-form__checkbox {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  font-size: var(--cpf-text-xs);

  color: rgba(255, 255, 255, 0.5);

  cursor: pointer;

}



.tft-contact-form__submit {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  border: none;

  padding: 1rem 2rem;

  font-weight: 600;

  font-size: var(--cpf-text-xs);

  text-transform: uppercase;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 1rem;

  transition: var(--cpf-transition);

}



.tft-contact-form__submit:hover {

  background: var(--cpf-color-accent);

}



/* FAQ Section */

.tft-contact-faq {

  background-color: var(--cpf-color-page-bg);

  color: var(--cpf-color-white);

  padding-block: var(--cpf-space-xl);

}



.tft-contact-faq__container {

  max-inline-size: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-contact-faq__layout {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--cpf-space-xl);

}



@media (min-width: 1024px) {

  .tft-contact-faq__layout {

    grid-template-columns: 350px 1fr;

  }

}



.tft-contact-faq__sidebar .label {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-xs);

  color: rgba(255, 255, 255, 0.4);

  display: block;

}



.tft-contact-faq__sidebar .title {

  font-family: var(--cpf-font-display);

  font-size: 4rem;

  margin-block: 1rem;

}



.tft-contact-faq__sidebar .desc {

  font-size: var(--cpf-text-sm);

  color: var(--cpf-color-accent);

  margin-block-end: var(--cpf-space-xl);

}



.tft-contact-faq__cta {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.1);

  padding: var(--cpf-space-lg);

}



.tft-contact-faq__cta p:first-child {

  font-size: var(--cpf-text-sm);

  font-weight: 600;

  margin-block-end: 1rem;

}



.tft-contact-faq__cta p:nth-child(2) {

  font-size: var(--cpf-text-xs);

  color: rgba(255, 255, 255, 0.6);

  line-height: 1.6;

  margin-block-end: 2rem;

}



.tft-contact-faq__profile {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.tft-contact-faq__profile .avatar {

  border-radius: 50%;

  filter: grayscale(1);

}



.tft-contact-faq__profile .info {

  display: flex;

  flex-direction: column;

}



.tft-contact-faq__profile .name {

  font-size: var(--cpf-text-xs);

  font-weight: 600;

}



.tft-contact-faq__profile .role {

  font-size: 14px !important;

  color: rgba(255, 255, 255, 0.5);

}



.tft-contact-faq__item {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-contact-faq__item:last-child {

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-contact-faq__header {

  list-style: none;

  padding-block: var(--cpf-space-lg);

  font-size: var(--cpf-text-sm);

  font-weight: 500;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.tft-contact-faq__header::-webkit-details-marker {

  display: none;

}



.tft-contact-faq__content {

  padding-block-end: var(--cpf-space-lg);

  font-size: var(--cpf-text-xs);

  color: rgba(255, 255, 255, 0.6);

  line-height: 1.7;

  max-inline-size: 600px;

}



/* Finale Section */

.tft-contact-finale {

  background-color: var(--cpf-color-page-bg);

  color: var(--cpf-color-white);

  padding-block: var(--cpf-space-xl);

  overflow: hidden;

}



.tft-contact-finale__container {

  max-inline-size: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-contact-finale__header {

  display: flex;

  flex-direction: column;

  gap: var(--cpf-space-lg);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-block-end: var(--cpf-space-lg);

  margin-block-end: var(--cpf-space-xl);

}



@media (min-width: 1024px) {

  .tft-contact-finale__header {

    flex-direction: row;

    justify-content: space-between;

    align-items: flex-end;

  }

}



.tft-contact-finale__logo {

  font-family: var(--cpf-font-display);

  font-size: 2rem;

  letter-spacing: -0.05em;

}



.tft-contact-finale__meta {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  color: var(--cpf-color-accent);

}



.tft-contact-finale__newsletter {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.tft-contact-finale__newsletter label {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  text-transform: uppercase;

}



.tft-contact-finale__newsletter .input-wrap {

  display: flex;

  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

}



.tft-contact-finale__newsletter input {

  background: transparent;

  border: none;

  color: var(--cpf-color-white);

  padding: 0.5rem 0;

  outline: none;

}



.tft-contact-finale__newsletter button {

  background: transparent;

  border: none;

  color: var(--cpf-color-white);

  cursor: pointer;

}



.tft-contact-finale__main {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--cpf-space-xl);

}



@media (min-width: 1024px) {

  .tft-contact-finale__main {

    grid-template-columns: 1fr 300px;

  }

}



.tft-contact-finale__left .email {

  font-family: var(--cpf-font-display);

  font-size: clamp(1.5rem, 4vw, 3rem);

  color: var(--cpf-color-white);

  text-decoration: none;

  display: block;

  margin-block-end: var(--cpf-space-lg);

}



.tft-contact-finale__left .quote {

  display: flex;

  gap: 1rem;

  margin-block-end: var(--cpf-space-lg);

}



.tft-contact-finale__left .mark {

  font-size: 2rem;

  color: var(--cpf-color-accent);

}



.tft-contact-finale__left .quote p {

  font-size: var(--cpf-text-sm);

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.6);

  max-inline-size: 500px;

}



.tft-contact-finale__left .profile {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.tft-contact-finale__left .avatar {

  border-radius: 50%;

  filter: grayscale(1);

}



.tft-contact-finale__right .footer-nav {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.tft-contact-finale__right .footer-nav a {

  color: var(--cpf-color-white);

  text-decoration: none;

  font-size: var(--cpf-text-sm);

  transition: var(--cpf-transition);

}



.tft-contact-finale__right .footer-nav a:hover {

  color: var(--cpf-color-accent);

}



.tft-contact-finale__bottom {

  display: flex;

  justify-content: space-between;

  margin-block-start: var(--cpf-space-xl);

  padding-block: var(--cpf-space-lg);

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-contact-finale__bottom .legal,

.tft-contact-finale__bottom .socials {

  display: flex;

  gap: 2rem;

}



.tft-contact-finale__bottom a {

  font-size: 11px;

  color: rgba(255, 255, 255, 0.4);

  text-decoration: none;

}



.tft-contact-finale__massive {

  font-family: var(--cpf-font-display);

  font-size: clamp(5rem, 20vw, 15rem);

  line-height: 0.85;

  letter-spacing: -0.05em;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.03);

  margin-block-start: var(--cpf-space-xl);

  text-align: center;

}



/* Marquee */

.tft-contact-partners {

  background: var(--cpf-color-page-bg);

  padding-block: var(--cpf-space-lg);

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-contact-partners__marquee {

  overflow: hidden;

}



.tft-contact-partners__track {

  display: flex;

  gap: 4rem;

  width: max-content;

  animation: tft-marquee 30s linear infinite;

}



.tft-contact-partners__logo {

  filter: grayscale(1) brightness(0.5);

  opacity: 0.6;

}



@keyframes tft-marquee {

  to {

    transform: translateX(-50%);

  }

}



/* =============================================

   SECTION: Sovereign Contact V2 (POLISHED)

   ============================================= */



.tft-contact-v2 {

  background-color: var(--cpf-color-page-bg);

  color: var(--cpf-color-white);

  padding-block: var(--cpf-space-xl);

  position: relative;

  overflow: hidden;

}



.tft-contact-v2__container {

  max-inline-size: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.tft-contact-v2__header {

  display: flex;

  flex-direction: column;

  gap: var(--cpf-space-lg);

  margin-block-end: var(--cpf-space-xl);

}



@media (min-width: 1024px) {

  .tft-contact-v2__header {

    flex-direction: row;

    justify-content: space-between;

    align-items: flex-end;

  }

}



.tft-contact-v2__tag {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: var(--cpf-color-accent);

  letter-spacing: 0.1em;

  display: block;

  margin-block-end: 0.5rem;

}



.tft-contact-v2__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(2.5rem, 7vw, 4.5rem);

  line-height: 1.05;

  letter-spacing: var(--cpf-ls-tight);

}



.tft-contact-v2__title .accent {

  color: rgba(255, 255, 255, 0.4);

  font-style: italic;

  font-weight: 400;

}



.tft-contact-v2__meta {

  max-inline-size: 300px;

  font-size: var(--cpf-text-xs);

  color: rgba(255, 255, 255, 0.5);

  line-height: 1.6;

}



.tft-contact-v2__meta strong {

  color: var(--cpf-color-white);

}



.tft-contact-v2__layout {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--cpf-space-xl);

}



@media (min-width: 1024px) {

  .tft-contact-v2__layout {

    grid-template-columns: 280px 1fr;

    align-items: start;

  }

}



.tft-contact-v2__label {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  text-transform: uppercase;

  color: var(--cpf-color-accent);

  margin-block-end: 1.5rem;

  display: block;

}



/* Tag Selection */

.tft-contact-v2__tag-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

}



.tft-contact-v2__tag-item {

  cursor: pointer;

}



.tft-contact-v2__tag-item input {

  display: none;

}



.tft-contact-v2__tag-item span {

  display: inline-block;

  padding: 0.5rem 1rem;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 100px;

  font-size: 12px;

  transition: var(--cpf-transition);

}



.tft-contact-v2__tag-item input:checked+span {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  border-color: var(--cpf-color-white);

}



/* Form Fields */

.tft-contact-v2__grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--cpf-space-xl) var(--cpf-space-lg);

}



@media (min-width: 768px) {

  .tft-contact-v2__grid {

    grid-template-columns: 1fr 1fr;

  }

}



.tft-contact-v2__field {

  position: relative;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.tft-contact-v2__field.full {

  grid-column: 1 / -1;

}



.tft-contact-v2__field label {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

}



.tft-contact-v2__field input,

.tft-contact-v2__field select,

.tft-contact-v2__field textarea {

  background: transparent;

  border: none;

  padding: 0.75rem 0;

  color: var(--cpf-color-white);

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  outline: none;

}



.tft-contact-v2__field select {

  cursor: pointer;

  appearance: none;

}



.tft-contact-v2__line {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 1px;

  background: rgba(255, 255, 255, 0.15);

  transition: var(--cpf-transition);

}



.tft-contact-v2__field input:focus~.tft-contact-v2__line,

.tft-contact-v2__field textarea:focus~.tft-contact-v2__line {

  background: var(--cpf-color-accent);

  height: 2px;

}



/* Budget Cards */

.tft-contact-v2__budget-wrap {

  margin-block-start: var(--cpf-space-xl);

}



.tft-contact-v2__budget-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 1rem;

}



.tft-contact-v2__budget-card {

  cursor: pointer;

}



.tft-contact-v2__budget-card input {

  display: none;

}



.tft-contact-v2__budget-card .card-inner {

  padding: 1.5rem;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.02);

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  transition: var(--cpf-transition);

}



.tft-contact-v2__budget-card .price {

  font-family: var(--cpf-font-display);

  font-size: 1.5rem;

  font-weight: 600;

}



.tft-contact-v2__budget-card .desc {

  font-size: 11px;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

  letter-spacing: 0.05em;

}



.tft-contact-v2__budget-card input:checked+.card-inner {

  border-color: var(--cpf-color-accent);

  background: rgba(232, 201, 122, 0.05);

}



/* Footer & Submit */

.tft-contact-v2__footer {

  margin-block-start: var(--cpf-space-xl);

  display: flex;

  flex-direction: column;

  gap: var(--cpf-space-lg);

}



@media (min-width: 768px) {

  .tft-contact-v2__footer {

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

  }

}



.custom-check {

  display: flex;

  align-items: center;

  gap: 1rem;

  cursor: pointer;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.5);

  max-inline-size: 400px;

  line-height: 1.5;

}



.custom-check input {

  display: none;

}



.checkmark {

  width: 18px;

  height: 18px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  flex-shrink: 0;

  position: relative;

  transition: var(--cpf-transition);

}



.custom-check input:checked+.checkmark {

  background: var(--cpf-color-accent);

  border-color: var(--cpf-color-accent);

}



.custom-check input:checked+.checkmark::after {

  content: "";

  position: absolute;

  left: 5px;

  top: 2px;

  width: 5px;

  height: 9px;

  border: solid var(--cpf-color-dark);

  border-width: 0 2px 2px 0;

  transform: rotate(45deg);

}



.tft-contact-v2__submit {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  border: none;

  padding: 1.25rem 2.5rem;

  font-family: var(--cpf-font-mono);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.1em;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 2rem;

  transition: var(--cpf-transition-md);

  position: relative;

  overflow: hidden;

}



.tft-contact-v2__submit::before {

  content: "";

  position: absolute;

  inset: 0;

  background: var(--cpf-color-accent);

  transform: translateX(-101%);

  transition: transform 0.4s var(--cpf-ease);

  z-index: 0;

}



.tft-contact-v2__submit:hover::before {

  transform: translateX(0);

}



.tft-contact-v2__submit span {

  position: relative;

  z-index: 1;

}



.tft-contact-v2__submit .btn-arrow {

  transition: transform 0.3s var(--cpf-ease);

}



.tft-contact-v2__submit:hover .btn-arrow {

  transform: translateX(5px);

}



/* Ensure partners logos are visible on dark background */

.tft-contact-partners__logo {

  filter: brightness(0) invert(1);

  opacity: 0.5;

  transition: opacity 0.3s ease;

}



.tft-contact-partners__logo:hover {

  opacity: 1;

}



/* Fix logo stretching and add interaction */

.tft-contact-partners__logo {

  object-fit: contain;

  width: auto;

  max-width: 160px;

}



/* FAQ: Enhanced Transitions */

.tft-contact-faq__content {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 0.4s var(--cpf-ease);

  overflow: hidden;

}



.tft-contact-faq__item.is-active .tft-contact-faq__content {

  grid-template-rows: 1fr;

}



.tft-contact-faq__inner {

  min-height: 0;

  padding-block-start: 1rem;

}



.tft-contact-faq__header {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: none;

  border: none;

  color: var(--cpf-color-white);

  padding: 1.5rem 0;

  font-family: var(--cpf-font-display);

  font-size: 1.25rem;

  font-weight: 600;

  cursor: pointer;

  text-align: left;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  transition: var(--cpf-transition);

}



.tft-contact-faq__header:hover {

  color: var(--cpf-color-accent);

}



.tft-contact-faq__header .icon {

  font-family: var(--cpf-font-mono);

  font-size: 1.5rem;

  transition: transform 0.4s var(--cpf-ease);

  color: var(--cpf-color-accent);

}



.tft-contact-faq__item.is-active .icon {

  transform: rotate(45deg);

}



.tft-contact-faq__item.is-active .tft-contact-faq__header {

  border-bottom-color: transparent;

}



/* ============================================================

   SOVEREIGN MASTER SLIDER: ELITE STABILIZATION & POLISH

   ------------------------------------------------------------

   Fixes jumpiness, text-clashing, and active-state visual fatigue.

   ============================================================ */



.tft-archives__item {

  position: relative;

  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),

    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;

  opacity: 0.15 !important;

  /* Deeper dim for non-active items */

}



.tft-archives__item:hover {

  opacity: 0.6 !important;

}



.tft-archives__item.is-active {

  opacity: 1 !important;

  transform: translateX(-15px) !important;

}



.tft-archives__item .name {

  transition: color 0.6s ease, transform 0.6s var(--cpf-ease);

  font-family: var(--cpf-font-display);

  letter-spacing: -0.02em;

  color: rgba(255, 255, 255, 0.4);

  /* Muted by default */

}



.tft-archives__item.is-active .name {

  color: var(--cpf-color-white);

  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

}



.tft-archives__item .preview {

  border: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

  background: #000;

  transform: translateZ(0);

  /* Hardware acceleration */

}



/* Stabilize the layout shift during expansion */

.tft-archives__item .info {

  margin-left: 0;

  transition: margin-left 0.6s var(--cpf-ease);

}



.tft-archives__item.is-active .info {

  margin-left: 10px;

}



.tft-archives__item .line {

  background: rgba(255, 255, 255, 0.05) !important;

  height: 1px !important;

}



.tft-archives__item.is-active .line {

  background: var(--cpf-color-accent) !important;

  box-shadow: 0 0 15px var(--cpf-color-accent);

}



/* Mobile Responsiveness for Slider */

@media (max-width: 768px) {

  .tft-archives {

    right: 20px !important;

    width: calc(100% - 40px) !important;

  }



  .tft-archives__item .name {

    font-size: 20px !important;

  }



  .tft-archives__item.is-active .preview {

    width: 60px !important;

  }

}



/* ============================================================

   SOVEREIGN ARCHIVE NAVIGATION: STRUCTURAL STABILIZATION V3

   ------------------------------------------------------------

   Fixes: Text wrapping, layout jumping, and thumbnail drift.

   ============================================================ */



.tft-archives {

  width: 500px !important;

  /* Fixed container width for total stability */

}



.tft-archives__list {

  align-items: flex-end !important;

}



.tft-archives__item {

  display: flex !important;

  flex-direction: row !important;

  justify-content: flex-end !important;

  align-items: center !important;

  gap: 0 !important;

  /* Controlled via internal margins for stability */

  width: 100% !important;

}



/* Force Name to stay on one line */

.tft-archives__item .name {

  white-space: nowrap !important;

  display: block !important;

  margin: 0 !important;

  font-size: clamp(20px, 1.8vw, 28px) !important;

  /* Slightly smaller for stability */

}



/* Stable Info Box */

.tft-archives__item .info {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-end !important;

  min-width: 260px !important;

  /* Pre-allocate space for long titles */

  margin-right: 20px !important;

  /* Stable gap to the line */

  transition: transform 0.6s var(--cpf-ease) !important;

}



/* Preview Thumbnail: Expanding to the LEFT without pushing text */

.tft-archives__item .preview {

  width: 0 !important;

  height: 54px !important;

  margin-right: 0 !important;

  transition: width 0.6s var(--cpf-ease), opacity 0.4s ease, margin-right 0.6s var(--cpf-ease) !important;

  flex-shrink: 0 !important;

}



.tft-archives__item.is-active .preview,

.tft-archives__item:hover .preview {

  width: 86px !important;

  margin-right: 20px !important;

  /* The gap appears ONLY when the thumbnail is visible */

  opacity: 1 !important;

}



/* Active Line refinement */

.tft-archives__item .line {

  width: 40px !important;

  flex-shrink: 0 !important;

}



.tft-archives__item.is-active .line {

  width: 70px !important;

}



/* Ensure no overlap on smaller screens */

@media (max-width: 1200px) {

  .tft-archives {

    width: 400px !important;

  }



  .tft-archives__item .info {

    min-width: 200px !important;

  }

}



/* ============================================================

   SOVEREIGN FAQ: ELITE SPACING & VISIBILITY FIX

   ------------------------------------------------------------

   Fixes vertical clipping and improves editorial rhythm.

   ============================================================ */



.tft-contact-faq__content {

  display: grid !important;

  grid-template-rows: 0fr !important;

  transition: grid-template-rows 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;

  overflow: hidden !important;

  visibility: hidden;

  /* Prevent ghost text before expansion */

}



.tft-contact-faq__item.is-active .tft-contact-faq__content {

  grid-template-rows: 1fr !important;

  visibility: visible;

  padding-block-bottom: 2rem;

  /* Ensure space for the last line of text */

}



.tft-contact-faq__inner {

  min-height: 0 !important;

  padding-block: 1.5rem !important;

  /* Generous breathing room */

}



.tft-contact-faq__inner p {

  margin: 0 !important;

  line-height: 1.7 !important;

  /* Improved readability */

  color: rgba(255, 255, 255, 0.6) !important;

}



/* Fix Header clipping */

.tft-contact-faq__header {

  padding-block: 1.8rem !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

}



.tft-contact-faq__item.is-active .tft-contact-faq__header {

  color: var(--cpf-color-accent) !important;

}



/* Sidebar Adjustment */

.tft-contact-faq__sidebar .title {

  font-size: clamp(3rem, 10vw, 6rem) !important;

  line-height: 0.9 !important;

  margin-block: 1rem !important;

}



/* ============================================================

   SOVEREIGN FAQ: GAP ELIMINATION & RHYTHM REFINEMENT

   ------------------------------------------------------------

   Fixes: Excessive vertical spacing and ghost padding.

   ============================================================ */



.tft-contact-faq__item {

  margin: 0 !important;

  /* Eliminate item-level gaps */

  padding: 0 !important;

}



.tft-contact-faq__content {

  /* Reset all potential padding that prevents total collapse */

  padding: 0 !important;

  margin: 0 !important;

  border: none !important;

}



.tft-contact-faq__inner {

  /* Padding stays ONLY inside the inner div to ensure total collapse when 0fr */

  padding-block-top: 0.5rem !important;

  padding-block-bottom: 2.5rem !important;

  min-height: 0 !important;

}



.tft-contact-faq__header {

  margin: 0 !important;

  /* Balanced padding for the header only */

  padding-block: 1.25rem !important;

}



/* Ensure the accordion list itself doesn't have a gap between children */

.tft-contact-faq__accordion {

  display: flex !important;

  flex-direction: column !important;

  gap: 0 !important;

}



/* =============================================

   FIX: index-2.html - EXACT REFERENCE MATCH

   ============================================= */



.tft-body-alt {

  background-color: #ffffff !important;

  color: #000000 !important;

}



.tft-alt-hero {

  position: relative;

  inline-size: 100%;

  block-size: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #ffffff;

  padding: 0;

}



.tft-alt-hero__container {

  inline-size: 100%;

  block-size: 100%;

  display: block;

  max-inline-size: none;

  padding: 0;

}



/* Bottom Left Title */

.tft-alt-hero__header {

  position: absolute;

  inset-block-end: 5vw;

  inset-inline-start: 5vw;

  max-inline-size: 50vw;

  text-align: start;

  z-index: 10;

}



.tft-alt-hero__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 8vw, 8rem);

  line-height: 0.9;

  letter-spacing: -0.05em;

  font-weight: 700;

  color: #000;

  margin: 0;

}



.tft-alt-hero__title--accent {

  display: block;

  color: rgba(0, 0, 0, 0.4);

}



/* Orbit Positioning */

.tft-alt-hero__gallery-wrap {

  position: absolute;

  inset-block-start: 50%;

  inset-inline-start: 50%;

  transform: translate(-50%, -50%);

  inline-size: min(80vw, 80vh);

  aspect-ratio: 1;

}



.tft-alt-hero__orbit {

  animation: tft-orbit-rotate-v2 40s linear infinite;

}



.tft-alt-hero__item {

  --radius: 35%;

  /* Relative to container */

  --angle: calc(var(--index) * 45deg);

  inline-size: 18%;

  aspect-ratio: 1;

  border-radius: 35%;

  /* Squircle-ish */

  background: #fff;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

  transform: rotate(var(--angle)) translateY(calc(-1 * var(--radius) * 3)) rotate(calc(-1 * var(--angle)));

}



.tft-alt-hero__img {

  border-radius: inherit;

}



/* Central Card */

.tft-alt-hero__center {

  animation: tft-orbit-counter-v2 40s linear infinite;

}



.tft-alt-hero__center-card {

  inline-size: 22%;

  background: #fff;

  border: none;

  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);

  border-radius: 20%;

}



.tft-alt-hero__center-img {

  inline-size: 30%;

  opacity: 0.8;

}



/* Tags on Right */

.tft-alt-hero__tags {

  inset-inline-end: 3vw;

  gap: 0.5rem;

}



.tft-alt-hero__tag {

  background: #f8f8f8;

  border: none;

  color: #999;

  padding: 0.5rem 1rem;

  font-size: 12px;

}



.tft-alt-hero__tag.is-active {

  background: #fff;

  color: #000;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  border: 1px solid #eee;

}



/* Orbit Keyframes - Fixed */

@keyframes tft-orbit-rotate-v2 {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}



@keyframes tft-orbit-counter-v2 {

  from {

    transform: translate(-50%, -50%) rotate(0deg);

  }



  to {

    transform: translate(-50%, -50%) rotate(-360deg);

  }

}



/* Overwrite the previous faulty ones */

.tft-alt-hero__orbit {

  animation-name: tft-orbit-rotate-v2;

}



.tft-alt-hero__center {

  animation-name: tft-orbit-counter-v2;

}





/* =============================================

   REFINED ORBIT ENGINE - PIXEL PERFECT

   ============================================= */



.tft-alt-hero__orbit {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  animation: tft-rotate-orbit 60s linear infinite;

}



.tft-alt-hero__item {

  position: absolute;

  inline-size: 14%;

  aspect-ratio: 0.85;

  background: #fff;

  border-radius: 2.5vw;

  overflow: hidden;

  box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.06);

  /* The Secret: Position in center, then rotate/translate */

  inset-block-start: 50%;

  inset-inline-start: 50%;

  --item-radius: 32vw;

  --item-angle: calc(var(--index) * 45deg);

  margin-block-start: -7%;

  /* Offset half height */

  margin-inline-start: -7%;

  /* Offset half width */

  transform: rotate(var(--item-angle)) translateY(calc(-1 * var(--item-radius))) rotate(calc(-1 * var(--item-angle)));

}



/* Central Card Fix */

.tft-alt-hero__center {

  position: absolute;

  inset-block-start: 50%;

  inset-inline-start: 50%;

  transform: translate(-50%, -50%);

  inline-size: 16%;

  aspect-ratio: 1;

  z-index: 5;

  animation: tft-counter-rotate 60s linear infinite;

}



.tft-alt-hero__center-card {

  inline-size: 100%;

  block-size: 100%;

  background: #fff;

  border-radius: 2vw;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 1vw;

  box-shadow: 0 1.5vw 4vw rgba(0, 0, 0, 0.08);

}



.tft-alt-hero__center-img {

  inline-size: 2.5vw;

  height: auto;

  color: #000;

}



.tft-alt-hero__center-label {

  font-family: var(--cpf-font-body);

  font-size: clamp(8px, 0.7vw, 12px);

  font-weight: 500;

  color: #666;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



/* Title Color Correction */

.tft-alt-hero__title {

  color: #000 !important;

}



@keyframes tft-rotate-orbit {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}



@keyframes tft-counter-rotate {

  from {

    transform: translate(-50%, -50%) rotate(0deg);

  }



  to {

    transform: translate(-50%, -50%) rotate(-360deg);

  }

}





/* =============================================

   SOVEREIGN DARK ORBIT - ULTIMATE REFINEMENT

   ============================================= */



.tft-body-alt {

  background-color: var(--cpf-color-dark) !important;

  color: var(--cpf-color-white) !important;

  overflow: hidden;

}



.tft-alt-hero {

  background: var(--cpf-color-dark);

  position: relative;

  min-height: 100vh;

  width: 100%;

  overflow: hidden;

}



/* Fix Positioning Container */

.tft-alt-hero__container {

  position: absolute;

  inset: 0;

  pointer-events: none;

}



.tft-alt-hero__container>* {

  pointer-events: auto;

}



/* Hero Title - Bottom Left */

.tft-alt-hero__header {

  position: absolute;

  bottom: 8%;

  left: 5%;

  z-index: 20;

}



.tft-alt-hero__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 7vw, 10rem);

  line-height: 0.85;

  letter-spacing: -0.04em;

  font-weight: 700;

  color: var(--cpf-color-white) !important;

}



.tft-alt-hero__title--accent {

  color: rgba(255, 255, 255, 0.2);

}



/* Orbit - True Center */

.tft-alt-hero__gallery-wrap {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: min(85vw, 85vh);

  aspect-ratio: 1;

}



.tft-alt-hero__item {

  --item-radius: 35vw;

  width: 15%;

  border-radius: 50%;

  /* Pure circles for premium business look */

  border: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

  transform: rotate(var(--item-angle)) translateY(calc(-1 * var(--item-radius))) rotate(calc(-1 * var(--item-angle)));

}



/* Premium Project Button (The Middle) */

.tft-alt-hero__center {

  width: 20%;

}



.tft-alt-hero__center-card {

  background: rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 100px;

  /* Pill shape for button */

  padding: 2rem;

  transition: all 0.4s var(--cpf-ease);

  cursor: pointer;

}



.tft-alt-hero__center-card:hover {

  background: var(--cpf-color-white);

  transform: scale(1.05);

}



.tft-alt-hero__center-card:hover .tft-alt-hero__center-label,

.tft-alt-hero__center-card:hover .tft-alt-hero__center-img {

  color: var(--cpf-color-dark);

}



.tft-alt-hero__center-img {

  color: var(--cpf-color-white);

  width: 30px;

  margin-bottom: 0.5rem;

}



.tft-alt-hero__center-label {

  color: var(--cpf-color-white);

  font-size: 14px !important;

  font-weight: 700;

}



/* Floating Category Tags - Right Side */

.tft-alt-hero__tags {

  position: absolute;

  right: 4%;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 0.75rem;

  z-index: 20;

}



.tft-alt-hero__tag {

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.4);

  padding: 0.7rem 1.4rem;

  border-radius: 100px;

  font-size: 11px;

  font-weight: 600;

  transition: all 0.3s ease;

}



.tft-alt-hero__tag.is-active,

.tft-alt-hero__tag:hover {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

}



/* Footer Info - Bottom Right */

.tft-alt-hero__footer {

  position: absolute;

  bottom: 5%;

  right: 5%;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: rgba(255, 255, 255, 0.3);

  text-transform: uppercase;

  letter-spacing: 0.1em;

}



.tft-alt-hero__scroll {

  margin-top: 0.5rem;

  color: var(--cpf-color-white);

}



/* Responsiveness */

@media (max-width: 1024px) {

  .tft-alt-hero__item {

    --item-radius: 40vw;

    width: 20%;

  }



  .tft-alt-hero__center {

    width: 30%;

  }



  .tft-alt-hero__tags {

    display: none;

  }

}



@media (max-width: 768px) {

  .tft-alt-hero__title {

    font-size: 15vw;

  }



  .tft-alt-hero__header {

    bottom: 15%;

  }

}





/* =============================================

   ATMOSPHERIC REFINEMENT - TEXTURE & DEPTH

   ============================================= */



.tft-alt-hero {

  background-color: #050505 !important;

  background-image:

    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 80%),

    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);

  background-size: 100% 100%, 60px 60px, 60px 60px;

}



.tft-alt-hero__blob {

  position: absolute;

  width: 50vw;

  height: 50vw;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, transparent 70%);

  border-radius: 50%;

  filter: blur(100px);

  pointer-events: none;

  z-index: 1;

}



.tft-alt-hero__blob--1 {

  top: -10%;

  left: -10%;

}



.tft-alt-hero__blob--2 {

  bottom: -10%;

  right: -10%;

}



.tft-alt-hero__gallery-wrap {

  width: min(75vw, 75vh) !important;

}



.tft-alt-hero__item {

  --item-radius: 28vw !important;

  width: 15% !important;

  border-radius: 20% !important;

  background: #111;

  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

  z-index: 10;

  cursor: pointer;

}



.tft-alt-hero__item:hover {

  transform: rotate(var(--item-angle)) translateY(calc(-1 * var(--item-radius))) rotate(calc(-1 * var(--item-angle))) scale(1.35) !important;

  z-index: 50;

  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.9);

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.tft-alt-hero__center-card {

  position: relative;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.01) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

}



.tft-alt-hero__center-card::after {

  content: '';

  position: absolute;

  top: -100%;

  left: -100%;

  width: 300%;

  height: 300%;

  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.03), transparent);

  transform: rotate(45deg);

  animation: tft-shimmer 6s infinite linear;

}



@keyframes tft-shimmer {

  0% {

    transform: translate(-100%, -100%) rotate(45deg);

  }



  100% {

    transform: translate(100%, 100%) rotate(45deg);

  }

}





/* =============================================

   STATIONARY ORBIT & POLAROID REFINEMENT

   ============================================= */



.tft-alt-hero__item {

  /* Counter-rotate the item relative to its index so it starts upright */

  transform: rotate(var(--item-angle)) translateY(calc(-1 * var(--item-radius))) rotate(calc(-1 * var(--item-angle)));

  /* We will update --item-rotation via JS to keep it stationary during orbit */

  transition: opacity 0.5s var(--cpf-ease), transform 0.5s var(--cpf-ease), filter 0.5s var(--cpf-ease);

}



.tft-alt-hero__card {

  position: relative;

  width: 100%;

  height: 100%;

  background: #1a1a1a;

  border-radius: 12px;

  padding: 8px;

  padding-bottom: 35px;

  /* Polaroid bottom padding */

  border: 1px solid rgba(255, 255, 255, 0.05);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  display: flex;

  flex-direction: column;

}



.tft-alt-hero__img-wrap {

  width: 100%;

  aspect-ratio: 1;

  border-radius: 8px;

  overflow: hidden;

  background: #000;

}



.tft-alt-hero__img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  /* Stationary Image Logic */

  transform: rotate(var(--counter-rotate, 0deg));

  transition: transform 0.1s linear;

}



.tft-alt-hero__card-footer {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 8px 12px;

  display: flex;

  flex-direction: column;

  opacity: 0.4;

  /* Dim by default */

  transition: opacity 0.3s ease;

}



.tft-alt-hero__item:hover .tft-alt-hero__card-footer {

  opacity: 1;

}



.tft-alt-hero__card-name {

  font-family: var(--cpf-font-body);

  font-size: 14px !important;

  font-weight: 700;

  color: #fff;

  text-transform: uppercase;

}



.tft-alt-hero__card-cat {

  font-family: var(--cpf-font-mono);

  font-size: clamp(0.75rem, 1vw, 1rem) !important;

  color: rgba(255, 255, 255, 0.5);

  text-transform: uppercase;

  margin-top: 2px;

}



/* Filtration States */

.tft-alt-hero__item.is-hidden {

  opacity: 0;

  pointer-events: none;

  transform: rotate(var(--item-angle)) translateY(calc(-1 * var(--item-radius))) rotate(calc(-1 * var(--item-angle))) scale(0.5);

}



/* Viewport Fix: No Scroll */

.tft-body-alt {

  height: 100vh;

  overflow: hidden;

}



.tft-alt-hero {

  height: 100vh;

}





/* Disable CSS animation to allow JS control for stationary images */

.tft-alt-hero__orbit {

  animation: none !important;

}





/* =============================================

   ORBIT FIXES - NO CUTOFFS & PREMIUM SYNC

   ============================================= */



.tft-alt-hero__gallery-wrap,

.tft-alt-hero__orbit,

.tft-alt-hero__item,

.tft-alt-hero__card {

  overflow: visible !important;

}



.tft-alt-hero__item {

  --item-radius: 28vw !important;

  /* Tightened radius to prevent edge overflow */

}



.tft-alt-hero__center {

  position: absolute !important;

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%) !important;

  z-index: 100 !important;

  width: 160px !important;

  height: 160px !important;

  animation: none !important;

}



.tft-alt-hero__center-card {

  background: rgba(255, 255, 255, 0.03) !important;

  border-radius: 50% !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  backdrop-filter: blur(20px) !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

}



.tft-alt-hero__center-label {

  font-size: 9px !important;

  letter-spacing: 0.15em !important;

  margin-top: 5px !important;

}



/* Hover Info Fix */

.tft-alt-hero__card-footer {

  bottom: -40px !important;

  /* Move outside the card to prevent image overlap */

  pointer-events: none;

}



.tft-alt-hero__img {

  transform: rotate(var(--counter-rotate, 0deg)) !important;

  transition: none !important;

  /* instant sync */

}





/* =============================================

   ORBIT STABILITY & BUTTON PERFECTION

   ============================================= */



.tft-alt-hero__center {

  position: absolute !important;

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%) !important;

  width: 140px !important;

  height: 140px !important;

  pointer-events: auto !important;

  z-index: 100 !important;

}



.tft-alt-hero__center-card {

  width: 100% !important;

  height: 100% !important;

  background: rgba(255, 255, 255, 0.05) !important;

  backdrop-filter: blur(25px) !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;

  border-radius: 50% !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  text-decoration: none !important;

  color: #fff !important;

  transition: all 0.4s var(--cpf-ease) !important;

}



.tft-alt-hero__center-card:hover {

  background: #fff !important;

  color: #000 !important;

  transform: scale(1.1);

}



.tft-alt-hero__item {

  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.tft-alt-hero__card {

  overflow: visible !important;

  /* Ensure footer text is not cut off */

}



.tft-alt-hero__card-footer {

  position: absolute !important;

  bottom: -45px !important;

  left: 0 !important;

  width: 100% !important;

  text-align: center !important;

  padding: 0 !important;

}





/* =============================================

   FINAL STATIONARY REFINEMENT - HEAD UP ALWAYS

   ============================================= */



.tft-alt-hero__stationary {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  /* This element is counter-rotated by JS */

  will-change: transform;

}



.tft-alt-hero__card {

  background: #151515 !important;

  border-radius: 16px !important;

  padding: 10px !important;

  padding-bottom: 50px !important;

  /* Larger bottom for text */

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;

  overflow: visible !important;

  width: 100% !important;

  height: 100% !important;

}



.tft-alt-hero__card-footer {

  position: absolute !important;

  bottom: 12px !important;

  left: 0 !important;

  width: 100% !important;

  padding: 0 12px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  text-align: left !important;

  pointer-events: none;

}



.tft-alt-hero__card-name {

  font-family: var(--cpf-font-display);

  font-size: clamp(12px, 1vw, 16px) !important;

  font-weight: 700 !important;

  color: #fff !important;

  text-transform: uppercase;

  white-space: nowrap !important;

  letter-spacing: -0.01em;

}



.tft-alt-hero__card-cat {

  font-family: var(--cpf-font-mono);

  font-size: 10px !important;

  color: rgba(255, 255, 255, 0.4) !important;

  text-transform: uppercase;

  margin-top: 2px;

}



/* Deco Elements (Right Side Gap Fillers) */

.tft-alt-hero__deco-list {

  position: absolute;

  right: 5%;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  gap: 2rem;

  font-family: var(--cpf-font-mono);

  z-index: 20;

}



.tft-alt-hero__deco-item {

  display: flex;

  flex-direction: column;

  gap: 0.2rem;

}



.tft-alt-hero__deco-item .label {

  color: rgba(255, 255, 255, 0.2);

  font-size: 9px;

  letter-spacing: 0.1em;

}



.tft-alt-hero__deco-item .val {

  color: var(--cpf-color-white);

  font-size: 11px;

  font-weight: 500;

}



/* Center Card Fix */

.tft-alt-hero__center-card {

  border-radius: 50% !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

}





/* Force Visibility & Prevent Cutoffs in Orbit */

.tft-alt-hero__orbit,

.tft-alt-hero__item,

.tft-alt-hero__stationary,

.tft-alt-hero__card {

  overflow: visible !important;

}



.tft-alt-hero__card-footer {

  bottom: -45px !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  width: 150% !important;

  /* Allow text to be wider than card */

  text-align: center !important;

  align-items: center !important;

}





/* =============================================

   ORBIT REFINEMENT - MINIMAL & SLOW

   ============================================= */



.tft-alt-hero__float-item {

  position: relative;

  width: 100%;

  height: 100%;

  /* No background frame */

  display: flex;

  flex-direction: column;

  align-items: center;

}



.tft-alt-hero__img-wrap {

  width: 100%;

  aspect-ratio: 1;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

  background: #000;

}



/* Ensure menu is visible when open */

.cpf-drawer.is-open {

  transform: translateX(0) !important;

  visibility: visible !important;

  opacity: 1 !important;

  pointer-events: auto !important;

}



.cpf-nav__overlay.is-open {

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

}



/* removed static override */



.tft-alt-hero__card-name {

  font-size: clamp(1rem, 1.5vw, 1.5rem) !important;

  letter-spacing: 0.05em !important;

}



.tft-alt-hero__card-cat {

  font-size: clamp(0.75rem, 1vw, 1rem) !important;

  color: rgba(255, 255, 255, 0.3) !important;

}





/* =============================================

   ORBIT PERFECTION - CLEAN OBSIDIAN

   ============================================= */



/* Remove any leftover AI atmospheric blobs */

.tft-alt-hero__blob {

  display: none !important;

}



.tft-alt-hero {

  background: #050505 !important;

  /* Pure Obsidian */

}



/* Ensure all 8 items are positioned correctly in the 360 orbit */

.tft-alt-hero__item:nth-child(1) {

  --index: 0;

}



.tft-alt-hero__item:nth-child(2) {

  --index: 1;

}



.tft-alt-hero__item:nth-child(3) {

  --index: 2;

}



.tft-alt-hero__item:nth-child(4) {

  --index: 3;

}



.tft-alt-hero__item:nth-child(5) {

  --index: 4;

}



.tft-alt-hero__item:nth-child(6) {

  --index: 5;

}



.tft-alt-hero__item:nth-child(7) {

  --index: 6;

}



.tft-alt-hero__item:nth-child(8) {

  --index: 7;

}



.tft-alt-hero__item {

  --item-angle: calc(var(--index) * 45deg) !important;

}





/* =============================================

   ORBIT PURITY - ZERO ROTATED FRAMES

   ============================================= */



.tft-alt-hero__item,

.tft-alt-hero__card,

.tft-alt-hero__float-item {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



.tft-alt-hero__img-wrap {

  background: transparent !important;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);

  /* Shadow on the image itself */

}



/* Make images slightly larger to compensate for frame removal */

.tft-alt-hero__img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  display: block;

}



.tft-alt-hero__card-name {

  color: #fff !important;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

}





/* =============================================

   ATMOSPHERIC REFINEMENT - SOLID SIMPLE

   ============================================= */



/* Subtle Noise Grain Overlay */

.tft-body-alt::after {

  content: '';

  position: fixed;

  inset: 0;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  opacity: 0.03;

  pointer-events: none;

  z-index: 9999;

  mix-blend-mode: overlay;

}



/* Atmospheric Center Glow */

.tft-alt-hero__gallery-wrap::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 60%;

  height: 60%;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 70%);

  pointer-events: none;

  z-index: 0;

}



/* Fine Orbit Path Ring */

.tft-alt-hero__orbit::before {

  content: '';

  position: absolute;

  inset: 0;

  border: 1px solid rgba(255, 255, 255, 0.04);

  border-radius: 50%;

  pointer-events: none;

}



/* Refined Hero Text */

.tft-alt-hero__title {

  letter-spacing: -0.04em !important;

  line-height: 0.9 !important;

}



.tft-alt-hero__title--accent {

  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.4) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



/* Enhanced Item Hover */

.tft-alt-hero__item:hover .tft-alt-hero__img-wrap {

  transform: scale(1.05);

  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);

}



.tft-alt-hero__item:hover .tft-alt-hero__card-name {

  color: #fff !important;

  transform: translateY(-2px);

}





/* =============================================

   TYPOGRAPHY SAFETY - NO CUTOFFS

   ============================================= */



.tft-alt-hero__header {

  bottom: 8vh !important;

  /* Move higher from the bottom edge */

  left: 5% !important;

}



.tft-alt-hero__title {

  font-size: clamp(40px, 8.5vw, 120px) !important;

  /* Slightly smaller maximum size */

  line-height: 1.0 !important;

  /* Better clearance for descenders like 'g' and 'y' */

  margin-bottom: 0 !important;

}



.tft-alt-hero__title--accent {

  display: block;

  margin-top: -0.1em;

}





/* =============================================

   RESPONSIVE OVERHAUL - INDEX-2

   ============================================= */



/* Desktop Clearance Fix */

.tft-alt-hero__header {

  position: absolute !important;

  bottom: 12vh !important;

  /* Even higher for safety */

  left: 6% !important;

  max-width: 80% !important;

  z-index: 10 !important;

}



.tft-alt-hero__title {

  font-size: clamp(40px, 9vw, 130px) !important;

  line-height: 1.05 !important;

}



/* Mobile & Tablet Refinements */

@media (max-width: 1024px) {

  .tft-alt-hero__header {

    bottom: 15vh !important;

    left: 5% !important;

    max-width: 90% !important;

  }



  .tft-alt-hero__title {

    font-size: clamp(32px, 8vw, 80px) !important;

  }



  .tft-alt-hero__gallery-wrap {

    width: 90vw !important;

    height: 90vw !important;

    top: 40% !important;

    /* Move orbit up to clear text */

  }

}



@media (max-width: 768px) {

  .tft-alt-hero__header {

    bottom: 10vh !important;

  }



  .tft-alt-hero__title {

    font-size: clamp(28px, 12vw, 48px) !important;

    letter-spacing: -0.02em !important;

  }



  .tft-alt-hero__gallery-wrap {

    width: 100vw !important;

    height: 100vw !important;

    top: 35% !important;

  }



  .tft-alt-hero__item {

    width: 25% !important;

    /* Larger icons on mobile */

  }



  .tft-alt-hero__center {

    width: 120px !important;

    height: 120px !important;

  }



  /* Hide deco elements on small mobile to avoid clutter */

  .tft-alt-hero__deco-list {

    display: none !important;

  }

}



/* Final descender safety */

.tft-alt-hero__title span {

  display: inline-block;

  padding-bottom: 0.1em;

}





/* =============================================

   ORBIT RADIUS OPTIMIZATION - COMPACT VIEW

   ============================================= */



.tft-alt-hero__item {

  --item-radius: 20vw !important;

  /* Significantly more compact circle */

}



/* Update path ring to match new radius */

.tft-alt-hero__orbit::before {

  width: calc(var(--item-radius) * 2) !important;

  height: calc(var(--item-radius) * 2) !important;

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%) !important;

  border-color: rgba(255, 255, 255, 0.08) !important;

}



@media (max-width: 1024px) {

  .tft-alt-hero__item {

    --item-radius: 28vw !important;

    /* Slightly wider for tablet readability */

  }

}



@media (max-width: 768px) {

  .tft-alt-hero__item {

    --item-radius: 35vw !important;

    /* Clearer separation for mobile touch */

  }

}





/* =============================================

   THEME COLOR SHIFT - SOVEREIGN GOLD (YELLOWISH)

   ============================================= */



.tft-body-alt,

.tft-alt-hero {

  background: var(--tft-gold, var(--cpf-color-accent)) !important;

  color: #000 !important;

}



.tft-alt-hero__title {

  color: #000 !important;

}



.tft-alt-hero__title--accent {

  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 100%) !important;

  -webkit-background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

}



.tft-alt-hero__card-name {

  color: #000 !important;

}



.tft-alt-hero__card-cat {

  color: rgba(0, 0, 0, 0.5) !important;

}



.tft-alt-hero__orbit::before {

  border-color: rgba(0, 0, 0, 0.1) !important;

}



.tft-alt-hero__gallery-wrap::before {

  background: radial-gradient(circle, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 70%) !important;

}



/* Center Card Inversion */

.tft-alt-hero__center-card {

  background: rgba(0, 0, 0, 0.05) !important;

  border-color: rgba(0, 0, 0, 0.2) !important;

  color: #000 !important;

}



.tft-alt-hero__center-card:hover {

  background: #000 !important;

  color: var(--tft-gold, var(--cpf-color-accent)) !important;

}



/* Footer & Deco Inversion */

.tft-alt-hero__scroll,

.tft-alt-hero__deco-item .val {

  color: #000 !important;

}



.tft-alt-hero__deco-item .label {

  color: rgba(0, 0, 0, 0.4) !important;

}



/* Header & Console Adaptation for Light BG */

.cpf-header__status,

.cpf-header__meta,

.cpf-header__logo {

  color: #000 !important;

}



.cpf-header__dot {

  background: #000 !important;

}



.cpf-header__sep {

  color: rgba(0, 0, 0, 0.2) !important;

}



.cpf-header__burger .line {

  background: #000 !important;

}





/* =============================================

   RESTORING OBSIDIAN BG - GOLD BUTTON ONLY

   ============================================= */



.tft-body-alt,

.tft-alt-hero {

  background: #050505 !important;

  color: #fff !important;

}



.tft-alt-hero__title {

  color: #fff !important;

}



.tft-alt-hero__title--accent {

  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.4) 100%) !important;

  -webkit-background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

}



.tft-alt-hero__card-name {

  color: #fff !important;

}



.tft-alt-hero__card-cat {

  color: rgba(255, 255, 255, 0.5) !important;

}



.tft-alt-hero__orbit::before {

  border-color: rgba(255, 255, 255, 0.04) !important;

}



.tft-alt-hero__gallery-wrap::before {

  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 70%) !important;

}



/* THE BUTTON IS NOW THE ONLY GOLD ELEMENT */

.tft-alt-hero__center-card {

  background: var(--tft-gold, var(--cpf-color-accent)) !important;

  border-color: var(--tft-gold, var(--cpf-color-accent)) !important;

  color: #000 !important;

}



.tft-alt-hero__center-card:hover {

  background: #fff !important;

  color: #000 !important;

  transform: scale(1.1) !important;

}



.tft-alt-hero__center-img,

.tft-alt-hero__center-label {

  color: #000 !important;

  stroke: #000 !important;

}



/* Restore Footer & Deco */

.tft-alt-hero__scroll,

.tft-alt-hero__deco-item .val {

  color: #fff !important;

}



.tft-alt-hero__deco-item .label {

  color: rgba(255, 255, 255, 0.2) !important;

}



/* Restore Header & Console */

.cpf-header__status,

.cpf-header__meta,

.cpf-header__logo {

  color: #fff !important;

}



.cpf-header__dot {

  background: var(--tft-gold, var(--cpf-color-accent)) !important;

}



.cpf-header__sep {

  color: rgba(255, 255, 255, 0.2) !important;

}



.cpf-header__burger .line {

  background: #fff !important;

}





/* =============================================

   HIGHLIGHTER DECO - SOVEREIGN GOLD ACCENTS

   ============================================= */



.tft-alt-hero__deco-item .val {

  background: var(--tft-gold, var(--cpf-color-accent)) !important;

  color: #000 !important;

  padding: 4px 8px !important;

  display: inline-block !important;

  font-weight: 600 !important;

  line-height: 1 !important;

  border-radius: 2px !important;

}



.tft-alt-hero__deco-item {

  margin-bottom: 12px !important;

}





/* =============================================

   DETROIT THEME - HORIZONTAL SCROLL ENGINE

   ============================================= */



.tft-body-detroit {

  background: #050505 !important;

  color: #fff !important;

  overflow-x: hidden;

  height: 300vh;

  /* Allow for scroll depth to drive horizontal motion */

}



.Det-hero {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 100px 5vw 40px;

  overflow: hidden;

}



.Det-hero__title {

  font-family: 'Bebas Neue', sans-serif !important;

  font-size: clamp(80px, 18vw, 300px) !important;

  line-height: 0.8 !important;

  letter-spacing: -0.02em !important;

  margin-bottom: 20px;

  color: #fff;

}



.Det-hero__desc {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  line-height: 1.5;

  color: rgba(255, 255, 255, 0.6);

  max-width: 300px;

  text-transform: uppercase;

}



/* Horizontal Track */

.Det-scroll {

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  height: 50vh;

  transform: translateY(-50%);

  display: flex;

  align-items: center;

  pointer-events: none;

}



.Det-scroll__track {

  display: flex;

  align-items: center;

  gap: 10vw;

  padding: 0 40vw;

  /* Offset for start/end */

  pointer-events: auto;

  will-change: transform;

}



.Det-item {

  position: relative;

  flex-shrink: 0;

  width: 30vw;

  aspect-ratio: 16/9;

  cursor: none;

  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

  will-change: transform, scale;

}



.Det-item__inner {

  width: 100%;

  height: 100%;

  border-radius: 4px;

  overflow: hidden;

  background: #111;

  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



.Det-item__img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1.1);

  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.Det-item:hover .Det-item__inner {

  transform: scale(1.05) rotateY(10deg) rotateX(5deg);

}



.Det-item:hover .Det-item__img {

  transform: scale(1.0);

}



/* Interactive Cursor */

.Det-cursor {

  position: fixed;

  top: 0;

  left: 0;

  width: auto;

  min-width: 150px;

  padding: 15px 20px;

  background: #fff;

  color: #000;

  pointer-events: none;

  z-index: 10000;

  display: flex;

  flex-direction: column;

  opacity: 0;

  transition: opacity 0.3s ease, transform 0.1s linear;

  mix-blend-mode: normal;

  border-radius: 2px;

}



.Det-cursor.is-active {

  opacity: 1;

}



.Det-cursor__title {

  font-family: 'Bebas Neue', sans-serif;

  font-size: 24px;

  line-height: 1;

}



.Det-cursor__cat {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  margin-top: 5px;

  opacity: 0.6;

}



.Det-footer {

  display: flex;

  justify-content: space-between;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-top: 20px;

}



.Det-footer__label {

  font-family: var(--cpf-font-mono);

  font-size: 9px;

  color: rgba(255, 255, 255, 0.4);

}



.Det-link {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: #fff !important;

  letter-spacing: 0.1em;

  text-decoration: none;

  opacity: 0.6;

  transition: opacity 0.3s ease;

}



.Det-link:hover {

  opacity: 1;

}





/* =============================================

   DETROIT RESPONSIVE - MOBILE OPTIMIZATION

   ============================================= */



@media (max-width: 768px) {

  .Det-hero {

    padding: 80px 20px 40px;

  }



  .Det-hero__title {

    font-size: clamp(50px, 15vw, 100px) !important;

  }



  .Det-item {

    width: 75vw !important;

    aspect-ratio: 4/3;

  }



  .Det-scroll__track {

    gap: 15vw;

    padding: 0 10vw;

  }



  .Det-cursor {

    display: none !important;

    /* Tooltips on hover don't work on touch */

  }



  .Det-hero__desc {

    font-size: 9px;

    max-width: 200px;

  }



  .Det-footer {

    flex-direction: column;

    gap: 10px;

    align-items: center;

  }



  .Det-menu {

    display: none !important;

    /* Hide menu links on small mobile, use burger */

  }

}





/* =============================================

   GLOBAL NAVIGATION DROPDOWN

   ============================================= */



.cpf-header__item.has-dropdown {

  position: relative;

}



.cpf-header__dropdown {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%) translateY(10px);

  background: #0a0a0a;

  border: 1px solid rgba(255, 255, 255, 0.1);

  min-width: 220px;

  padding: 10px 0;

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease;

  z-index: 100;

  border-radius: 4px;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

}



.cpf-header__item.has-dropdown:hover .cpf-header__dropdown {

  opacity: 1;

  visibility: visible;

  transform: translateX(-50%) translateY(0);

}



.cpf-header__dropdown li {

  list-style: none;

}



.cpf-header__dropdown a {

  display: block;

  padding: 10px 20px;

  color: rgba(255, 255, 255, 0.6);

  text-decoration: none;

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  transition: all 0.3s ease;

}



.cpf-header__dropdown a:hover {

  color: #fff;

  background: rgba(255, 255, 255, 0.05);

  padding-left: 25px;

}



.cpf-header__link .arrow {

  font-size: 8px;

  margin-left: 4px;

  opacity: 0.5;

  transition: transform 0.3s ease;

}



.cpf-header__item.has-dropdown:hover .arrow {

  transform: rotate(180deg);

}



/* Mobile Drawer Dropdown Adaptation */

.cpf-drawer__item.has-dropdown {

  margin-bottom: 20px;

}



.cpf-drawer__sublist {

  margin-top: 15px;

  padding-left: 20px;

  border-left: 1px solid rgba(255, 255, 255, 0.1);

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.cpf-drawer__sublink {

  font-size: 14px !important;

  opacity: 0.4;

  transition: opacity 0.3s ease;

}



.cpf-drawer__sublink:hover {

  opacity: 1;

}





/* =============================================

   DROPDOWN VISIBILITY FIX - Z-INDEX OVERRIDE

   ============================================= */



.cpf-header {

  z-index: 10000 !important;

  /* Ensure header is above everything */

}



.cpf-header__main {

  overflow: visible !important;

  /* Prevent clipping of dropdowns */

}



.cpf-header__dropdown {

  z-index: 10001 !important;

}



/* Ensure Detroit Hero doesn't obscure the header */

.Det-hero {

  z-index: 1 !important;

}





/* =============================================

   ULTIMATE NAVIGATION PRIORITY & FIXES

   ============================================= */



.cpf-header {

  z-index: 9999999 !important;

  /* Absolute top priority */

  position: fixed !important;

}



.cpf-header__main {

  overflow: visible !important;

  /* Ensure dropdowns are NEVER clipped */

}



.cpf-header__dropdown {

  z-index: 10000000 !important;

  visibility: visible;

  /* Debugging check: ensures it's not hidden by other logic */

}



/* Ensure ALL hero/slider containers are below the header */

.tft-hero,

.tft-hero-slider,

.tft-scene,

.Det-hero,

.tft-alt-hero {

  z-index: 1 !important;

}



/* Fix portfolio card initial visibility and filtering animations */

.tft-portfolio__card {

  opacity: 1;

  transform: scale(1) translateY(0);

  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;

}



.tft-portfolio__card.tft-card-hidden {

  opacity: 0 !important;

  transform: scale(0.95) translateY(15px) !important;

}



.tft-portfolio__card.tft-card-none {

  display: none !important;

}





/* =============================================

   DETROIT V2 - CINEMATIC PRODUCTION ENGINE

   ============================================= */



.tft-body-detroit-v2 {

  background: #000 !important;

  color: #fff !important;

  overflow-x: hidden;

  height: 500vh;

  /* Deep scroll for smooth inertia */

}



.Det-v2 {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  overflow: hidden;

}



.Det-v2__fixed {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

  z-index: 0;

}



.Det-v2__bg-title {

  font-family: 'Bebas Neue', sans-serif !important;

  font-size: clamp(100px, 25vw, 600px) !important;

  line-height: 0.8 !important;

  color: rgba(255, 255, 255, 0.03);

  white-space: nowrap;

}



.Det-v2__scroll-wrap {

  position: relative;

  width: 100%;

  height: 100%;

  z-index: 10;

}



.Det-v2__track {

  display: flex;

  align-items: center;

  height: 100%;

  padding-left: 20vw;

  /* Initial offset */

  will-change: transform;

}



.Det-v2__item {

  position: relative;

  flex-shrink: 0;

  width: 50vw;

  height: 60vh;

  margin-right: 15vw;

  display: flex;

  flex-direction: column;

  justify-content: center;

  will-change: transform, opacity;

}



.Det-v2__item--intro,

.Det-v2__item--outro {

  width: 40vw;

}



.Det-v2__item-img-box {

  position: relative;

  width: 100%;

  height: 100%;

  background: #111;

  overflow: hidden;

  border-radius: 2px;

  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);

}



.Det-v2__img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1.1);

  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.Det-v2__item-hover-mask {

  position: absolute;

  inset: 0;

  background: #fff;

  mix-blend-mode: overlay;

  opacity: 0;

  transition: opacity 0.4s ease;

}



.Det-v2__item:hover .Det-v2__item-hover-mask {

  opacity: 0.1;

}



.Det-v2__item:hover .Det-v2__img {

  transform: scale(1.0);

}



.Det-v2__item-meta {

  position: absolute;

  bottom: -40px;

  left: 0;

  display: flex;

  align-items: baseline;

  gap: 15px;

  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}



.Det-v2__item-meta .num {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  opacity: 0.3;

}



.Det-v2__item-meta .title {

  font-family: 'Bebas Neue', sans-serif;

  font-size: 40px;

  letter-spacing: 0.05em;

}



/* Intro/Outro styles */

.Det-v2__item-content .label {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  color: var(--tft-gold);

  display: block;

  margin-bottom: 20px;

}



.Det-v2__item-content .desc {

  font-family: 'Inter', sans-serif;

  font-size: 24px;

  font-weight: 300;

  line-height: 1.4;

  opacity: 0.6;

}



.Det-v2__item-content .cta {

  font-family: 'Bebas Neue', sans-serif;

  font-size: 80px;

  line-height: 1;

}



.Det-v2__item-content .link {

  font-family: var(--cpf-font-mono);

  font-size: 14px;

  color: #fff;

  text-decoration: none;

  border-bottom: 1px solid #fff;

  padding-bottom: 5px;

  margin-top: 30px;

  display: inline-block;

  transition: color 0.3s ease, border-color 0.3s ease;

}



.Det-v2__item-content .link:hover {

  color: var(--tft-gold);

  border-color: var(--tft-gold);

}





/* =============================================

   ACCORDION & Z-INDEX MASTER FIX

   ============================================= */



/* 1. Ultimate Z-Index Fix */

html,

body {

  overflow-x: hidden;

}



.cpf-header {

  position: fixed !important;

  z-index: 999999999 !important;

}



.cpf-header__main {

  overflow: visible !important;

}



.cpf-header__dropdown {

  z-index: 1000000000 !important;

  pointer-events: auto !important;

}



/* 2. Smooth Accordion (Services & FAQ) */

.cpf-services__item-panel,

.cpf-faq__panel {

  display: grid !important;

  grid-template-rows: 0fr;

  transition: grid-template-rows 0.6s cubic-bezier(0.23, 1, 0.32, 1);

  overflow: hidden;

  opacity: 0;

}



.cpf-services__item.is-active .cpf-services__item-panel,

.cpf-faq__item.is-active .cpf-faq__panel {

  grid-template-rows: 1fr;

  opacity: 1;

}



.cpf-services__item-panel>div,

.cpf-faq__panel>div {

  min-height: 0;

}



/* 3. Pointer Cursors */

[data-service-item],

[data-faq-item],

.cpf-header__link,

.cpf-header__dropdown a,

.tft-filter-btn,

.tft-archives__item,

#tft-scroll-top-ultimate {

  cursor: pointer !important;

}



/* 4. Detroit V2 Refinement */

.tft-body-detroit-v2 {

  background: #fff !important;

  /* Switch to light for exact detroit.paris match if needed, but user said dark mode */

}



.Det-v2__bg-title {

  color: rgba(255, 255, 255, 1.0) !important;

  mix-blend-mode: difference;

  /* This makes it look super high-end */

}



.Det-v2__item {

  margin-right: -10vw;

  /* Overlap effect */

}





/* ==========================================================================

   MASTER HEADER & NAVIGATION VISIBILITY FIX (SOVEREIGN ELITE)

   Ensures dropdowns and drawers are never clipped by stacking contexts.

   ========================================================================== */

.cpf-header,

.cpf-header__main,

.cpf-header__nav-inner,

.cpf-header__menu {

  overflow: visible !important;

  z-index: 999999999 !important;

}



.cpf-header__dropdown {

  z-index: 1000000000 !important;

  overflow: visible !important;

}



.cpf-drawer {

  z-index: 1000000001 !important;

}



.cpf-nav__overlay {

  z-index: 1000000000 !important;

}



/* Drawer Toggle State */

.cpf-drawer.is-active {

  transform: translate3d(0, 0, 0) !important;

  visibility: visible !important;

  opacity: 1 !important;

}



.cpf-nav__overlay.is-active {

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

}



/* ========================================================================== 

   INTERACTIVE ARCHIVE REFINEMENT (V2.1) 

   ========================================================================== */

.tft-alt-hero__center-card {

  width: 100px !important;

  height: 100px !important;

  background: var(--gold) !important;

}



.tft-alt-hero__center-label {

  font-size: 10px !important;

  margin-top: 5px !important;

}



.tft-alt-hero__deco-item {

  background: transparent !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  color: #fff !important;

  padding: 6px 15px !important;

}



.tft-alt-hero__deco-item .val {

  color: #fff !important;

}



/* ========================================================================== 

   INTERACTIVE ARCHIVE CORRECTION (V2.2) 

   ========================================================================== */

.tft-alt-hero__center-card {

  width: 150px !important;

  height: 150px !important;

}



.tft-alt-hero__deco-item {

  background: var(--gold) !important;

  border: none !important;

  color: #000 !important;

  padding: 10px 20px !important;

}



.tft-alt-hero__deco-item .val {

  color: #000 !important;

}



.tft-alt-hero__gallery-wrap {

  inline-size: min(60vw, 60vh) !important;

}



/* ========================================================================== 

   ARCHIVE HUB READABILITY FIX (V2.3) 

   ========================================================================== */

.tft-alt-hero__center-card {

  background: var(--gold) !important;

  border: 2px solid #000 !important;

}



.tft-alt-hero__center-label {

  color: #000 !important;

  opacity: 1 !important;

}



.tft-alt-hero__center-img {

  color: #000 !important;

}



/* ========================================================================== 

   PREMIUM NAVIGATION DROPDOWN (SOVEREIGN ELITE) 

   ========================================================================== */

.cpf-header__dropdown {

  background: rgba(10, 10, 10, 0.95) !important;

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-top: 2px solid var(--gold) !important;

  padding: 15px 0 !important;

  min-width: 260px !important;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(232, 185, 35, 0.05) !important;

  border-radius: 0 0 4px 4px;

}



.cpf-header__dropdown li {

  position: relative;

  border-bottom: 1px solid rgba(255, 255, 255, 0.03);

}



.cpf-header__dropdown li:last-child {

  border-bottom: none;

}



.cpf-header__dropdown a {

  font-family: var(--mono) !important;

  font-size: 10px !important;

  font-weight: 500 !important;

  color: rgba(255, 255, 255, 0.6) !important;

  padding: 14px 25px !important;

  letter-spacing: 0.1em !important;

  text-transform: uppercase !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;

}



.cpf-header__dropdown a:hover {

  color: var(--gold) !important;

  background: rgba(232, 185, 35, 0.03) !important;

  padding-left: 32px !important;

}



.cpf-header__dropdown a::after {

  content: "/";

  font-size: 8px;

  opacity: 0;

  transition: opacity 0.3s ease;

  color: var(--gold);

}



.cpf-header__dropdown a:hover::after {

  opacity: 0.5;

}



/* ========================================================================== 

   NUCLEAR HUB READABILITY FIX (V2.5) 

   ========================================================================== */

.tft-alt-hero__center-card {

  background-color: var(--cpf-color-accent) !important;

  background: var(--cpf-color-accent) !important;

  border: 2px solid #000000 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #000000 !important;

}



.tft-alt-hero__center-label {

  color: #000000 !important;

  opacity: 1 !important;

  visibility: visible !important;

}



.tft-alt-hero__center-img {

  color: #000000 !important;

  opacity: 1 !important;

  stroke: #000000 !important;

}



/* ==========================================================================

   INSIGHTS CARDS VISIBILITY FIX (V2.6 - NUCLEAR FADE-IN RESTORE)

   ========================================================================== */

.cpf-insights__card.fade-in {

  opacity: 1 !important;

  transform: translateY(0) !important;

}



/* ==========================================================================

   INSIGHTS CARD REFINEMENTS (no bottom shadow, clean layout)

   ========================================================================== */

.cpf-insights__card--small {

  box-shadow: none !important;

  background: rgba(255, 255, 255, 0.04) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  border-radius: 4px;

  overflow: hidden;

  transition: border-color 0.3s ease !important;

}



.cpf-insights__card--small:hover {

  border-color: rgba(232, 185, 35, 0.4) !important;

}



.cpf-insights__card--large {

  box-shadow: none !important;

}



.cpf-insights__card-avatar {

  box-shadow: none !important;

  background: none !important;

}



/* ==========================================================================

   SOVEREIGN ELITE GLOBAL REFINEMENTS (2026)

   ========================================================================== */



/* 1. CONTACT PAGE: Header Clear & Title Visibility */

.tft-contact-hero {

  padding-top: calc(140px + var(--cpf-space-xl)) !important;

  overflow: visible !important;

}



.tft-contact-hero__container,

.tft-contact-hero__layout,

.tft-contact-hero__right {

  overflow: visible !important;

}



.tft-contact-hero__title {

  line-height: 1.2 !important;

  padding-top: 0.1em;

  margin-top: -0.1em;

  position: relative;

  z-index: 5;

}



/* 2. STRATEGIC FOUNDATION: Readability & Professional Polish */

.cpf-foundation__desc,

.cpf-foundation__text {

  opacity: 0.9 !important;

  color: var(--cpf-color-white) !important;

  font-weight: 400;

}



.cpf-foundation__card {

  background: rgba(255, 255, 255, 0.03) !important;

  backdrop-filter: blur(12px);

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

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;

}



.cpf-foundation__card:hover {

  background: rgba(255, 255, 255, 0.07) !important;

  border-color: var(--cpf-color-accent) !important;

  transform: translateY(-5px) scale(1.01) !important;

  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 30px rgba(235, 203, 52, 0.1) !important;

}



/* 3. ZYLYF ANALYTICS: HUD & BENTO REFINEMENTS */

.cpf-analytics__card {

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;

  border: 1px solid rgba(255, 255, 255, 0.06) !important;

  backdrop-filter: blur(15px);

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

  border-radius: 20px !important;

}



.cpf-analytics__card .val {

  color: var(--cpf-color-accent) !important;

  font-size: clamp(3rem, 8vw, 5rem) !important;

  text-shadow: 0 0 20px rgba(235, 203, 52, 0.4);

}



.cpf-analytics__hero-data {

  background: rgba(0, 0, 0, 0.85) !important;

  backdrop-filter: blur(12px);

  border: 1px solid var(--cpf-color-accent) !important;

  padding: 1rem 2rem !important;

  border-radius: 12px !important;

}



/* HUD Gauge Refinement */

.gauge-track {

  stroke: rgba(255, 255, 255, 0.05) !important;

  stroke-width: 8;

}



.gauge-fill {

  stroke: var(--cpf-color-accent) !important;

  stroke-width: 10;

  stroke-linecap: round;

  filter: drop-shadow(0 0 8px var(--cpf-color-accent));

  stroke-dasharray: 126;

  stroke-dashoffset: 20;

  /* Slightly off for visual interest */

}



/* 4. INSIGHTS SECTION: Editorial Polishing */

.cpf-insights__title {

  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;

  letter-spacing: -0.05em !important;

  line-height: 1 !important;

}



.cpf-insights__all-btn {

  background: var(--cpf-color-white) !important;

  color: var(--cpf-color-dark) !important;

  padding: 14px 32px !important;

  border-radius: 100px !important;

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  font-weight: 700 !important;

  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);

}



.cpf-insights__all-btn:hover {

  transform: translateY(-2px) !important;

  box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);

}



/* 5. UNIQUE RESPONSIVE MENU (EDITORIAL DRAWER) */

@media (max-width: 768px) {

  .cpf-drawer {

    inline-size: 100% !important;

    background: #000 !important;

    padding: 40px !important;

  }



  .cpf-drawer__link-text {

    font-size: clamp(2.5rem, 12vw, 4.5rem) !important;

    font-weight: 800 !important;

    line-height: 0.9;

    display: block;

    margin-bottom: 1rem;

  }



  .cpf-drawer__item {

    margin-bottom: 2rem;

  }



  .cpf-drawer__mid {

    margin-top: 4rem;

    padding-top: 2rem;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

  }



  .cpf-drawer__email {

    font-size: 1.5rem !important;

  }

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 2: RADIUS UNIFICATION & HIGH-FIDELITY DEPTH

   ========================================================================== */



/* Unify Radius & Add Premium Glass Depth to Analytics */

.cpf-analytics__card {

  border-radius: var(--cpf-radius-lg) !important;

  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;

  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.cpf-analytics__card:hover {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transform: translateY(-10px) !important;

  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 25px rgba(235, 203, 52, 0.2) !important;

}



/* Gauge Refinement: More Instrument feel */

.gauge-display {

  padding: 2.5rem !important;

  background: rgba(0, 0, 0, 0.3) !important;

  border-radius: var(--cpf-radius-lg) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  position: relative;

  overflow: hidden;

}



.gauge-display::before {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at top, rgba(235, 203, 52, 0.1), transparent 70%);

  pointer-events: none;

}



.gauge-track {

  stroke-width: 5 !important;

  opacity: 0.15;

}



.gauge-fill {

  stroke-width: 10 !important;

  stroke-dashoffset: 0 !important;

  filter: drop-shadow(0 0 15px var(--cpf-color-accent)) !important;

  transition: stroke-dashoffset 2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

}



.gauge-val {

  font-size: 4rem !important;

  font-weight: 800 !important;

  letter-spacing: -0.06em !important;

  background: linear-gradient(to bottom, #fff 40%, var(--cpf-color-accent));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));

}



/* Insights Section: Professional Editorial Layout & Unified Radius */

.cpf-insights__card {

  border-radius: var(--cpf-radius-lg) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  background: rgba(255, 255, 255, 0.03) !important;

  transition: all 0.5s var(--cpf-ease) !important;

}



.cpf-insights__card:hover {

  border-color: rgba(255, 255, 255, 0.2) !important;

  background: rgba(255, 255, 255, 0.05) !important;

  transform: translateY(-5px) !important;

}



.cpf-insights__card-avatar {

  border-radius: var(--cpf-radius-md) !important;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;

}



.cpf-insights__all-btn {

  border-radius: var(--cpf-radius-hero) !important;

  letter-spacing: 0.25em !important;

  text-indent: 0.25em;

  font-size: 10px !important;

  padding: 16px 36px !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

}



/* Strategic Foundation: Image Overlay HUD Radius */

.cpf-foundation__overlay {

  border-radius: var(--cpf-radius-md) !important;

  border-left: 4px solid var(--cpf-color-accent) !important;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;

}



.cpf-foundation__badge {

  border-radius: 100px !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding: 6px 16px !important;

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 3: COMPONENT REFINEMENT & FIXES

   ========================================================================== */



/* 1. GAUGE REPAIR: Fix overlap and clipped glow */

.gauge-display {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  overflow: visible !important;

  /* Fix cutted gradient bg */

  min-block-size: 180px !important;

}



.gauge-svg {

  overflow: visible !important;

  margin-bottom: -1rem !important;

}



.gauge-val {

  margin: 0 !important;

  line-height: 1 !important;

  position: relative;

  z-index: 2;

}



.gauge-label {

  margin-top: 0.5rem !important;

  font-family: var(--cpf-font-mono) !important;

  letter-spacing: 0.1em !important;

  opacity: 0.5 !important;

  text-transform: uppercase !important;

  position: relative;

  z-index: 1;

}



/* 2. ACCORDION (SERVICES) REFINEMENT: Cinematic Excellence */

.cpf-services__item {

  position: relative;

  overflow: hidden;

  transition: all 0.4s var(--cpf-ease) !important;

  border-color: rgba(255, 255, 255, 0.05) !important;

}



.cpf-services__item:hover {

  background: rgba(255, 255, 255, 0.02) !important;

  border-color: rgba(255, 255, 255, 0.15) !important;

}



.cpf-services__item.is-active {

  background: rgba(255, 255, 255, 0.03) !important;

  border-color: var(--cpf-color-accent) !important;

}



.cpf-services__item-num {

  transition: color 0.4s ease;

}



.cpf-services__item.is-active .cpf-services__item-num {

  color: var(--cpf-color-accent) !important;

}



.cpf-services__toggle {

  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;

}



.cpf-services__item.is-active .cpf-services__toggle {

  background: var(--cpf-color-accent) !important;

  transform: rotate(90deg) scale(1.1) !important;

}



.cpf-services__item.is-active .cpf-services__toggle::before {

  background: #000 !important;

}



/* Improved Category Badges inside Accordion */

.cpf-services__cat-item {

  background: rgba(255, 255, 255, 0.05) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  border-radius: 100px !important;

  padding: 6px 14px !important;

  font-size: 10px !important;

  transition: all 0.3s ease !important;

}



.cpf-services__cat-item:hover {

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

  transform: translateY(-2px);

}



/* Editorial touch for service title */

.cpf-services__item-title-closed {

  transition: transform 0.4s var(--cpf-ease) !important;

}



.cpf-services__item:hover .cpf-services__item-title-closed {

  transform: translateX(10px);

  color: var(--cpf-color-accent);

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 4: FINAL POLISH & DATA VISUALIZATION

   ========================================================================== */



/* 1. ZYLYF BADGE: High-Impact Yellow Highlight */

.cpf-analytics__hero-data .category {

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  color: #000 !important;

  padding: 0.2rem 0.6rem !important;

  border-radius: 4px !important;

  font-weight: 800 !important;

  font-size: 9px !important;

  letter-spacing: 0.1em !important;

  display: inline-block !important;

  margin-top: 0.5rem !important;

}



.cpf-analytics__hero-data {

  border-color: rgba(235, 203, 52, 0.4) !important;

  box-shadow: 0 0 30px rgba(235, 203, 52, 0.15) !important;

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 5: REPAIRING REGRESSIONS & OVERLAP FIXES

   ========================================================================== */



/* 1. GAUGE NUCLEAR REPAIR: Eliminating Text Overlap */

.gauge-display {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: flex-end !important;

  /* Push everything down slightly */

  gap: 0 !important;

  min-height: 220px !important;

  overflow: visible !important;

  padding-bottom: 2rem !important;

}



.gauge-svg {

  width: 140px !important;

  height: 70px !important;

  overflow: visible !important;

  margin-bottom: -1rem !important;

}



.gauge-val {

  display: block !important;

  position: static !important;

  margin: 0 !important;

  padding: 0 !important;

  line-height: 0.8 !important;

  transform: translateY(10px) !important;

  /* Fine-tuned adjustment */

}



.gauge-label {

  display: block !important;

  position: static !important;

  margin: 0 !important;

  padding: 0 !important;

  transform: translateY(15px) !important;

  /* Clear the overlap */

  font-size: 9px !important;

  letter-spacing: 0.2em !important;

  opacity: 0.6 !important;

}



/* 2. ACCORDION REPAIR: Restoring Icon Colors & Fixing Ring */

.cpf-services__item.is-active .cpf-services__toggle {

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  box-shadow: 0 0 25px rgba(235, 203, 52, 0.3) !important;

}



.cpf-services__item.is-active .cpf-services__toggle::before {

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  /* Restoration of yellow fill */

}



.cpf-services__item.is-active .cpf-services__icon-minus::before {

  background: #000 !important;

  /* Ensure the minus sign is visible/black */

}



.cpf-services__toggle {

  border-width: 1px !important;

  /* Thinner border to avoid ring look */

}



/* 3. RESPONSIVE TEXT REFINEMENT */

@media (max-width: 480px) {

  .gauge-val {

    font-size: 3rem !important;

  }



  .gauge-display {

    min-height: 180px !important;

  }

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 6: ALIGNMENT & ICON REPAIR

   ========================================================================== */



/* 1. SERVICES CONTAINER: Essential Side Breathing Room */

.cpf-services__container {

  padding-inline: clamp(1.5rem, 5vw, 4rem) !important;

}



/* 2. TOGGLE REPAIR: Fix rotation (no vertical line) and margin */

.cpf-services__toggle {

  margin-inline-start: auto !important;

  /* Force to right edge */

  margin-inline-end: 2.5rem !important;

  /* Critical spacing from right edge */

}



.cpf-services__item.is-active .cpf-services__toggle {

  transform: scale(1.1) !important;

  /* NO ROTATE - keeps minus horizontal */

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



/* 3. ICON POLISH: High-Fidelity Minus Sign */

.cpf-services__item.is-active .cpf-services__icon-minus::before {

  background: #000 !important;

  inline-size: 16px !important;

  block-size: 2px !important;

  border-radius: 1px;

}



/* Ensure no clipping on the glow/ring */

.cpf-services__item {

  overflow: visible !important;

}



/* 4. GAUGE REPAIR: Absolute Spacing Security */

.gauge-display {

  min-block-size: 200px !important;

  padding-block-end: 3rem !important;

}



.gauge-val {

  transform: translateY(5px) !important;

}



.gauge-label {

  transform: translateY(12px) !important;

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 7: PORTFOLIO RESTORATION & GAUGE SIMPLIFICATION

   ========================================================================== */



/* 1. GAUGE SIMPLIFICATION: Remove progress arc visual noise */

.gauge-svg {

  display: none !important;

  /* User requested removal of progress circle */

}



.gauge-display {

  min-block-size: 140px !important;

  /* Compact layout without SVG */

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

}



.gauge-val {

  font-size: 3.4rem !important;

  /* Emphasize the number */

  margin-bottom: 0 !important;

  transform: none !important;

}



.gauge-label {

  transform: translateY(-10px) !important;

  font-size: 10px !important;

  opacity: 0.4 !important;

}



/* 2. PORTFOLIO RESTORATION: Blurry Hover & Logo Overlay */

.tft-portfolio__card-media {

  position: relative;

  overflow: hidden;

  border-radius: var(--cpf-radius-lg) !important;

}



.tft-portfolio__card-img {

  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.tft-portfolio__card:hover .tft-portfolio__card-img {

  transform: scale(1.15) !important;

  filter: blur(15px) brightness(0.6) grayscale(0.2) !important;

}



.tft-portfolio__card-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  background: rgba(0, 0, 0, 0.15);

  transition: all 0.6s ease;

  z-index: 10;

  pointer-events: none;

}



.tft-portfolio__card:hover .tft-portfolio__card-overlay {

  opacity: 1;

}



.tft-portfolio__card-logo-box {

  text-align: center;

  transform: scale(0.8) translateY(20px);

  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



.tft-portfolio__card:hover .tft-portfolio__card-logo-box {

  transform: scale(1) translateY(0);

}



.tft-portfolio__card-logo-text {

  font-family: var(--cpf-font-body);

  font-size: 1.5rem;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: #fff;

  text-transform: uppercase;

  display: block;

}



.tft-portfolio__card-logo-sep {

  width: 30px;

  height: 2px;

  background: var(--cpf-color-accent);

  margin: 10px auto;

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 8: HIGH-FIDELITY PROJECT LOGO RESTORATION

   ========================================================================== */



/* 1. LOGO IMAGE POLISH: Force pure white and professional scaling */

.tft-portfolio__card-logo-img {

  max-inline-size: 160px !important;

  block-size: auto !important;

  filter: brightness(0) invert(1) !important;

  /* Force pure white institutional look */

  opacity: 1 !important;

}



.tft-portfolio__card-logo-box {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 2rem !important;

}



/* 2. HOVER DEPTH REFINEMENT: Cinematic Blur & Desaturation */

.tft-portfolio__card:hover .tft-portfolio__card-img {

  transform: scale(1.1) !important;

  filter: blur(20px) brightness(0.5) grayscale(0.4) !important;

}



.tft-portfolio__card-overlay {

  background: rgba(0, 0, 0, 0.3) !important;

  /* Deeper overlay for logo clarity */

}



/* 3. LOGO ENTRANCE ANIMATION */

.tft-portfolio__card-logo-box {

  opacity: 0;

  transform: scale(0.9) translateY(20px);

  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



.tft-portfolio__card:hover .tft-portfolio__card-logo-box {

  opacity: 1;

  transform: scale(1) translateY(0);

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 9: PORTFOLIO FILTRATION & BRANDING FINALIZATION

   ========================================================================== */



/* 1. FILTRATION ENGINE: Smooth grid transitions */

.tft-portfolio__card {

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),

    opacity 0.5s ease,

    filter 0.5s ease !important;

}



.tft-portfolio__card.is-hidden {

  display: none !important;

}



/* 2. BRANDING REBRAND: ZYLYF Dominance */

.brand {

  font-weight: 900 !important;

  letter-spacing: 0.1em !important;

  color: var(--cpf-color-accent) !important;

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 10: INTERACTIVITY & VISUAL POLISH

   ========================================================================== */



/* 1. CARD CLICKABILITY: Full-block anchor logic */

.tft-portfolio__card-link {

  display: flex !important;

  flex-direction: column !important;

  text-decoration: none !important;

  color: inherit !important;

  block-size: 100% !important;

  inline-size: 100% !important;

}



.tft-portfolio__card:hover {

  cursor: pointer !important;

}



/* 2. BLUR REFINEMENT: Institutional clarity (Less is more) */

.tft-portfolio__card:hover .tft-portfolio__card-img {

  filter: blur(8px) brightness(0.6) grayscale(0.3) !important;

  /* Reduced from 20px */

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 11: CORE ARCHITECTURE & CINEMATIC DEPTH

   ========================================================================== */



/* 1. ELITE BADGE & STATUS: Eliminate generic green, enforce institutional gold */

.cpf-foundation__overlay .status {

  color: var(--cpf-color-accent) !important;

  /* Institutional gold replacement for green */

  font-weight: 900 !important;

  letter-spacing: 0.15em !important;

  text-shadow: 0 0 15px var(--cpf-color-accent);

  /* Tactical glow */

}



.cpf-foundation__overlay .label {

  opacity: 0.6 !important;

  font-family: var(--cpf-font-mono) !important;

}



/* 2. CINEMATIC SCANLINE: Add hardware-accelerated visual complexity */

.cpf-foundation__scanline {

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom,

      transparent 50%,

      rgba(235, 203, 52, 0.05) 50%);

  background-size: 100% 4px;

  z-index: 2;

  pointer-events: none;

  opacity: 0.3;

}



/* 3. GRID & TYPOGRAPHY REFINEMENT: Authoritative layout */

.cpf-foundation__title {

  font-size: clamp(3rem, 8vw, 5rem) !important;

  line-height: 0.9 !important;

  letter-spacing: -0.04em !important;

}



.cpf-foundation__card--insight {

  border: 1px solid rgba(235, 203, 52, 0.2) !important;

  /* Subtle gold border */

  background: rgba(255, 255, 255, 0.02) !important;

  backdrop-filter: blur(10px) !important;

}



.cpf-foundation__text strong {

  color: var(--cpf-color-accent) !important;

  display: block;

  margin-bottom: 0.5rem;

  font-size: 1.2rem;

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 12: WORK PAGE ARCHITECTURE (UNIQUE EDITORIAL)

   ========================================================================== */



.tft-work-page {

  background-color: var(--cpf-color-bg) !important;

}



/* 1. WORK HERO: Massive Typography & Cinematic Layout */

.tft-work-hero {

  padding-top: calc(var(--cpf-header-height) + 4rem);

  padding-bottom: 6rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-work-hero__container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 5%;

}



.tft-work-hero__top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 2rem;

  font-family: var(--cpf-font-mono);

  font-size: 0.85rem;

  letter-spacing: 0.1em;

  opacity: 0.6;

}



.tft-work-hero__badge {

  background: rgba(255, 255, 255, 0.05);

  padding: 0.5rem 1rem;

  border-radius: 100px;

}



.tft-work-hero__title {

  font-size: clamp(4rem, 12vw, 10rem);

  font-weight: 700;

  line-height: 0.85;

  letter-spacing: -0.05em;

  margin-bottom: 4rem;

  text-transform: uppercase;

}



.tft-work-hero__title .dot {

  color: var(--cpf-color-accent);

}



.tft-work-hero__footer {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 4rem;

}



.tft-work-hero__desc {

  max-width: 500px;

  font-size: 1.25rem;

  line-height: 1.5;

  opacity: 0.8;

}



.tft-work-hero__scroll {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 1rem;

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  letter-spacing: 0.2em;

}



.tft-work-hero__scroll .line {

  width: 1px;

  height: 60px;

  background: linear-gradient(to bottom, var(--cpf-color-accent), transparent);

}



/* 2. STICKY FILTER WRAP: Floating Interaction */

.tft-work-filter-wrap {

  position: sticky;

  top: var(--cpf-header-height);

  z-index: 100;

  padding: 2rem 0;

  background: linear-gradient(to bottom, var(--cpf-color-bg) 70%, transparent);

  display: flex;

  justify-content: center;

}



.tft-portfolio--page {

  padding-top: 0 !important;

}



/* 3. MASONRY REFINEMENT FOR WORK PAGE */

.tft-work-page .tft-portfolio__grid {

  gap: 4rem 2rem !important;

}



.tft-work-page .tft-portfolio__card {

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease !important;

}



/* Responsive Fixes */

@media (max-width: 768px) {

  .tft-work-hero__footer {

    flex-direction: column;

    align-items: flex-start;

    gap: 2rem;

  }



  .tft-work-hero__scroll {

    display: none;

  }

}



/* FORCE DARK MODE FOR WORK PAGE */

.tft-work-page,

.tft-work-page body {

  background-color: #000 !important;

  color: #fff !important;

}



/* FIX TOP CUTOFF */

.tft-work-hero {

  padding-top: calc(var(--cpf-header-height) + 12rem) !important;

}



/* SOVEREIGN ELITE PHASE 13: CRITICAL UI REPAIR (TOP CUTOFF FIX) */

.tft-work-hero {

  padding-top: calc(var(--tft-header-height, 110px) + 8rem) !important;

}



.tft-work-hero__title {

  line-height: 1.1 !important;

  padding-top: 0.1em;

}



/* =============================================

   SECTION: ZYLYF Blog � Editorial Feed (2026)

   ============================================= */





/* ==========================================================================

   ZYF JOURNAL (PRO EDITORIAL REDESIGN 2026)

   ========================================================================== */



.zyf-blog-page {

  background-color: var(--cpf-color-page-bg);

  color: var(--cpf-color-white);

  overflow-x: hidden;

}



/* ---- Blog Hero (Aggressive Typography) ---- */

.zyf-blog-hero {

  padding-block: clamp(80px, 15vh, 160px) clamp(40px, 8vh, 80px);

  position: relative;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  background: radial-gradient(circle at top right, rgba(235, 203, 52, 0.03), transparent 40%);

}



.zyf-blog-hero__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

}



.zyf-blog-hero__badge {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: var(--cpf-color-accent);

  letter-spacing: 0.2em;

  margin-block-end: 20px;

  opacity: 0.8;

}



.zyf-blog-hero__title {

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(60px, 12vw, 120px);

  line-height: 0.9;

  text-transform: uppercase;

  margin-block-end: 30px;

  letter-spacing: -0.02em;

}



.zyf-blog-hero__title .dim {

  color: rgba(255, 255, 255, 0.15);

  font-style: italic;

}



.zyf-blog-hero__desc {

  max-width: 500px;

  font-size: var(--cpf-text-base);

  color: rgba(255, 255, 255, 0.5);

  line-height: 1.6;

}



/* ---- Ticker Animation ---- */

.zyf-blog-hero__ticker {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.02);

  padding-block: 10px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.zyf-blog-hero__ticker-inner {

  display: flex;

  white-space: nowrap;

  animation: zyf-ticker 30s linear infinite;

}



.zyf-blog-hero__ticker .msg {

  font-family: var(--cpf-font-mono);

  font-size: 8px;

  color: var(--cpf-color-accent);

  opacity: 0.4;

  margin-inline-end: 40px;

}



@keyframes zyf-ticker {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



/* ---- Layout Grid ---- */

.zyf-blog-layout {

  padding-block: 80px;

}



.zyf-blog-layout__container {

  max-width: var(--cpf-nav-max-w);

  margin-inline: auto;

  padding-inline: var(--cpf-nav-px);

  display: grid;

  grid-template-columns: 1fr;

  gap: 80px;

}



@media (min-width: 1024px) {

  .zyf-blog-layout__container {

    grid-template-columns: 8fr 4fr;

    align-items: start;

  }

}



/* ---- Featured Card (Asymmetrical) ---- */

.zyf-blog-featured-card {

  position: relative;

  margin-block-end: 100px;

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: var(--cpf-radius-md);

  overflow: hidden;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.zyf-blog-featured-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);

}



.zyf-blog-featured-card__media {

  position: relative;

  height: clamp(300px, 40vh, 540px);

  overflow: hidden;

}



.zyf-blog-featured-card__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.zyf-blog-featured-card:hover .zyf-blog-featured-card__media img {

  transform: scale(1.05);

}



.zyf-blog-featured-card__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, var(--cpf-color-page-bg), transparent 60%);

}



.zyf-blog-featured-card__tag {

  position: absolute;

  top: 30px;

  inset-inline-start: 30px;

  background: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  font-weight: 700;

  padding: 6px 12px;

  border-radius: 2px;

  letter-spacing: 0.1em;

  z-index: 2;

}



.zyf-blog-featured-card__content {

  padding: clamp(30px, 5vw, 60px);

  position: relative;

  margin-block-start: -80px;

  z-index: 2;

}



.zyf-blog-featured-card__meta {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: var(--cpf-color-accent);

  margin-block-end: 20px;

  display: flex;

  gap: 10px;

  opacity: 0.8;

}



.zyf-blog-featured-card__title {

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(36px, 5vw, 64px);

  line-height: 1;

  margin-block-end: 25px;

  transition: color 0.3s ease;

  letter-spacing: -0.01em;

}



.zyf-blog-featured-card__excerpt {

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.6);

  line-height: 1.7;

  max-width: 600px;

  margin-block-end: 40px;

}



.zyf-blog-featured-card__btn {

  display: inline-flex;

  align-items: center;

  gap: 15px;

  font-family: var(--cpf-font-mono);

  font-size: 12px;

  color: var(--cpf-color-white);

  text-decoration: none;

  border: 1px solid rgba(255, 255, 255, 0.1);

  padding: 18px 36px;

  border-radius: 4px;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  background: rgba(255, 255, 255, 0.02);

}



.zyf-blog-featured-card__btn:hover {

  background: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  border-color: var(--cpf-color-accent);

  transform: translateX(5px);

}



/* ---- Post Card Feed ---- */

.zyf-blog-feed__grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

  gap: 50px 40px;

}



.zyf-post-card {

  position: relative;

}



.zyf-post-card__link {

  text-decoration: none;

  color: inherit;

  display: block;

}



.zyf-post-card__media {

  position: relative;

  aspect-ratio: 16/10;

  overflow: hidden;

  border-radius: var(--cpf-radius-sm);

  margin-block-end: 25px;

  background: #1a1a1a;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



.zyf-post-card__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(1);

  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



.zyf-post-card:hover .zyf-post-card__media img {

  transform: scale(1.1);

  filter: grayscale(0);

}



.zyf-post-card__plus {

  position: absolute;

  top: 20px;

  inset-inline-end: 20px;

  width: 36px;

  height: 36px;

  background: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  font-weight: 700;

  opacity: 0;

  transform: scale(0.8) translateY(10px);

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  border-radius: 2px;

}



.zyf-post-card:hover .zyf-post-card__plus {

  opacity: 1;

  transform: scale(1) translateY(0);

}



.zyf-post-card__meta {

  font-family: var(--cpf-font-mono);

  font-size: 9px;

  color: var(--cpf-color-accent);

  margin-block-end: 15px;

  display: flex;

  gap: 10px;

  letter-spacing: 0.1em;

}



.zyf-post-card__title {

  font-family: var(--cpf-font-body);

  font-size: 22px;

  font-weight: 600;

  line-height: 1.3;

  margin-block-end: 15px;

  transition: color 0.3s ease;

  letter-spacing: -0.02em;

}



.zyf-post-card:hover .zyf-post-card__title {

  color: var(--cpf-color-accent);

}



.zyf-post-card__desc {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.4);

  line-height: 1.6;

}



/* ---- Pagination ---- */

.zyf-pagination {

  margin-block-start: 100px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  padding-block-start: 50px;

}



.zyf-pagination__list {

  display: flex;

  align-items: center;

  gap: 25px;

  list-style: none;

  padding: 0;

}



.zyf-pagination__link {

  font-family: var(--cpf-font-mono);

  font-size: 12px;

  color: rgba(255, 255, 255, 0.3);

  text-decoration: none;

  transition: all 0.3s ease;

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

}



.zyf-pagination__link.is-active {

  color: var(--cpf-color-accent);

  background: rgba(235, 203, 52, 0.1);

}



.zyf-pagination__link:hover:not(.is-active) {

  color: var(--cpf-color-white);

  background: rgba(255, 255, 255, 0.05);

}



.zyf-pagination__next {

  margin-inline-start: auto;

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  text-transform: uppercase;

  color: var(--cpf-color-white);

  text-decoration: none;

  border: 1px solid rgba(255, 255, 255, 0.1);

  padding: 12px 24px;

  transition: all 0.3s ease;

  border-radius: 4px;

  letter-spacing: 0.1em;

}



.zyf-pagination__next:hover {

  background: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  border-color: var(--cpf-color-accent);

}



/* ---- Sidebar ---- */

.zyf-sidebar {

  position: sticky;

  top: 100px;

  padding-inline-start: 20px;

}



@media (max-width: 1023px) {

  .zyf-sidebar {

    position: static;

    padding-inline-start: 0;

    margin-block-start: 80px;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    padding-block-start: 80px;

  }

}



.zyf-sidebar__widget {

  margin-block-end: 80px;

}



.zyf-sidebar__title {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  color: rgba(255, 255, 255, 0.3);

  margin-block-end: 30px;

  display: flex;

  align-items: center;

  gap: 20px;

}



.zyf-sidebar__title::after {

  content: "";

  flex: 1;

  height: 1px;

  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);

}



/* Sidebar Search */

.zyf-sidebar__search {

  position: relative;

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: 4px;

  padding: 5px 15px;

  display: flex;

  transition: all 0.3s ease;

}



.zyf-sidebar__search:focus-within {

  border-color: var(--cpf-color-accent);

  background: rgba(255, 255, 255, 0.04);

}



.zyf-sidebar__search input {

  background: none;

  border: none;

  color: #fff;

  font-family: var(--cpf-font-body);

  font-size: 14px;

  width: 100%;

  padding-block: 10px;

}



.zyf-sidebar__search input:focus {

  outline: none;

}



.zyf-sidebar__search input::placeholder {

  color: rgba(255, 255, 255, 0.2);

}



.zyf-sidebar__search button {

  background: none;

  border: none;

  color: rgba(255, 255, 255, 0.4);

  cursor: pointer;

  padding: 0;

  display: flex;

  align-items: center;

}



/* Sidebar List */

.zyf-sidebar__list {

  list-style: none;

  padding: 0;

}



.zyf-sidebar__link {

  display: flex;

  justify-content: space-between;

  padding-block: 15px;

  color: rgba(255, 255, 255, 0.5);

  text-decoration: none;

  font-size: 15px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.03);

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.zyf-sidebar__link:hover {

  color: var(--cpf-color-accent);

  padding-inline-start: 8px;

  background: rgba(255, 255, 255, 0.01);

}



.zyf-sidebar__link .count {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  opacity: 0.3;

}



/* Sidebar Trending */

.zyf-sidebar__item {

  display: grid;

  grid-template-columns: 70px 1fr;

  gap: 20px;

  margin-block-end: 30px;

}



.zyf-sidebar__item-media {

  aspect-ratio: 1/1;

  overflow: hidden;

  border-radius: 4px;

  background: #1a1a1a;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



.zyf-sidebar__item-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(1);

  transition: all 0.6s ease;

}



.zyf-sidebar__item:hover img {

  filter: grayscale(0);

  transform: scale(1.1);

}



.zyf-sidebar__item-content {

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.zyf-sidebar__item-title {

  font-size: 15px;

  line-height: 1.4;

  font-weight: 500;

  margin-block-end: 8px;

  letter-spacing: -0.01em;

}



.zyf-sidebar__item-title a {

  text-decoration: none;

  color: inherit;

  transition: color 0.3s ease;

}



.zyf-sidebar__item:hover .zyf-sidebar__item-title a {

  color: var(--cpf-color-accent);

}



.zyf-sidebar__item-date {

  font-family: var(--cpf-font-mono);

  font-size: 9px;

  opacity: 0.3;

  text-transform: uppercase;

}



/* Newsletter Widget */

.zyf-sidebar__newsletter {

  background: rgba(235, 203, 52, 0.02);

  padding: 40px 30px;

  border-radius: var(--cpf-radius-md);

  border: 1px solid rgba(235, 203, 52, 0.05);

  text-align: center;

}



.zyf-sidebar__newsletter-title {

  font-family: "Bebas Neue", sans-serif;

  font-size: 32px;

  margin-block-end: 15px;

  letter-spacing: 0.05em;

  color: var(--cpf-color-accent);

}



.zyf-sidebar__newsletter-desc {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.4);

  line-height: 1.6;

  margin-block-end: 30px;

}



.zyf-sidebar__newsletter-form input {

  width: 100%;

  background: var(--cpf-color-dark);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: #fff;

  padding: 15px;

  border-radius: 4px;

  margin-block-end: 15px;

  font-size: 14px;

  text-align: center;

}



.zyf-sidebar__newsletter-form input:focus {

  outline: none;

  border-color: var(--cpf-color-accent);

}



.zyf-sidebar__newsletter-btn {

  width: 100%;

  background: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  border: none;

  padding: 16px;

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  border-radius: 4px;

  transition: all 0.3s ease;

  letter-spacing: 0.1em;

}



.zyf-sidebar__newsletter-btn:hover {

  background: var(--cpf-color-white);

  transform: translateY(-2px);

}





/* ==========================================================================

   SOVEREIGN ELITE: INSIGHTS REFINEMENT (THE "99% + POLISH" VERSION)

   ========================================================================== */



/* 1. Card Surface Upgrade: Subtle Glass & Depth */

.cpf-insights__card {

  background: rgba(255, 255, 255, 0.015) !important;

  backdrop-filter: blur(5px);

  border: 1px solid rgba(255, 255, 255, 0.04) !important;

  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.cpf-insights__card:hover {

  background: rgba(255, 255, 255, 0.03) !important;

  border-color: rgba(235, 203, 52, 0.3) !important;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 20px rgba(235, 203, 52, 0.05) !important;

}



/* 2. Thumbnail Polish: Institutional Frame */

.cpf-insights__card-avatar {

  position: relative;

  border: 1px solid rgba(255, 255, 255, 0.1);

  padding: 4px;

  background: rgba(255, 255, 255, 0.02);

  transition: border-color 0.4s ease;

}



.cpf-insights__card:hover .cpf-insights__card-avatar {

  border-color: rgba(235, 203, 52, 0.5);

}



/* 3. The "Plus" Icon: Interactive Mechanism */

.cpf-insights__card-plus {

  width: 32px;

  height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 50%;

  font-size: 1.2rem !important;

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;

  color: rgba(255, 255, 255, 0.4);

}



.cpf-insights__card:hover .cpf-insights__card-plus {

  transform: rotate(90deg) scale(1.1);

  background: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  box-shadow: 0 0 15px rgba(235, 203, 52, 0.4);

}



/* 4. Meta Refinement: Technical Date */

.cpf-insights__card-date {

  font-family: var(--cpf-font-mono) !important;

  font-size: 9px !important;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  color: var(--cpf-color-accent) !important;

  opacity: 0.6;

  margin-block-end: 15px !important;

}



/* 5. Title Polish */

.cpf-insights__card-title {

  letter-spacing: -0.02em !important;

  font-weight: 500 !important;

}



/* 6. Hero Polish: The "See All" Magnetic Button */

.cpf-insights__all-btn {

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  background: transparent !important;

  color: #fff !important;

  padding-inline: 2rem !important;

}



.cpf-insights__all-btn:hover {

  background: #fff !important;

  color: var(--cpf-color-dark) !important;

  border-color: #fff !important;

}



.cpf-insights__all-dot {

  background-color: var(--cpf-color-accent) !important;

}



.cpf-insights__all-btn:hover .cpf-insights__all-dot {

  background-color: var(--cpf-color-dark) !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: INSIGHTS DIFFERENTIATION (THE "UNIQUE IDENTITY" VERSION)

   ========================================================================== */



/* 1. Sharper, more institutional geometry */

.cpf-insights__card {

  border-radius: 12px !important;

  background: rgba(15, 15, 15, 0.8) !important;

  border-bottom: 3px solid rgba(255, 255, 255, 0.05) !important;

}



.cpf-insights__card:hover {

  border-bottom-color: var(--cpf-color-accent) !important;

  transform: translateY(-8px) scale(1.01) !important;

}



/* 2. Large Card Overhaul: Meta & Unique Styling */

.cpf-insights__card--large {

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-end !important;

  padding: 40px !important;

}



.cpf-insights__card--large .cpf-insights__card-content {

  position: relative !important;

  bottom: auto !important;

  left: auto !important;

  z-index: 5 !important;

  padding: 0 !important;

}



/* Unique Meta for Large Card */

.cpf-insights__card--large::before {

  content: "REF-02 // DATA_INTEL";

  position: absolute;

  top: 40px;

  right: 40px;

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: var(--cpf-color-accent);

  letter-spacing: 0.2em;

  z-index: 5;

  border: 1px solid rgba(235, 203, 52, 0.3);

  padding: 5px 12px;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(10px);

}



.cpf-insights__card-title-lg {

  font-size: clamp(2rem, 3.5vw, 3.5rem) !important;

  line-height: 1 !important;

  letter-spacing: -0.04em !important;

  text-transform: none !important;

  color: #fff !important;

}



/* 3. Small Card Data Labels */

.cpf-insights__card-date::after {

  content: " // [ 51.50° N ]";

  margin-inline-start: 10px;

  opacity: 0.5;

}



/* 4. Scanning Decoration for Large Card */

.cpf-insights__card--large .cpf-insights__card-bg::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(rgba(235, 203, 52, 0.05) 1px, transparent 1px);

  background-size: 100% 4px;

  pointer-events: none;

  opacity: 0.2;

  z-index: 1;

}



/* 5. Plus Icon Progress Ring */

.cpf-insights__card-plus {

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  background: transparent !important;

}



.cpf-insights__card:hover .cpf-insights__card-plus {

  background: transparent !important;

  border-color: var(--cpf-color-accent) !important;

  box-shadow: 0 0 20px rgba(235, 203, 52, 0.2) !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: CLEANUP (REMOVING PSEUDO-DATA FLUFF)

   ========================================================================== */



/* Remove the technical labels from cards */

.cpf-insights__card--large::before {

  content: none !important;

  display: none !important;

}



.cpf-insights__card-date::after {

  content: none !important;

  display: none !important;

}



/* Keep the scanning line texture but ensure no text is involved */

.cpf-insights__card--large .cpf-insights__card-bg::after {

  z-index: 1 !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: SHADOW-FREE ARCHITECTURE (UNIQUE & STRUCTURAL)

   ========================================================================== */



/* 1. Global Shadow Scrub */

.cpf-insights__card,

.cpf-insights__all-btn,

.cpf-insights__card-plus,

.cpf-insights__card-avatar,

.cpf-insights__card--large {

  box-shadow: none !important;

  text-shadow: none !important;

}



/* 2. Asymmetrical Border Accents (The Unique Touch) */

.cpf-insights__card {

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  position: relative;

  background: rgba(255, 255, 255, 0.01) !important;

  transition: all 0.4s var(--cpf-ease) !important;

}



.cpf-insights__card::before {

  content: "";

  position: absolute;

  top: -1px;

  left: -1px;

  width: 20px;

  height: 20px;

  border-top: 2px solid rgba(255, 255, 255, 0.1);

  border-left: 2px solid rgba(255, 255, 255, 0.1);

  transition: all 0.4s var(--cpf-ease);

  z-index: 5;

  pointer-events: none;

}



.cpf-insights__card:hover::before {

  border-color: var(--cpf-color-accent);

  width: 40px;

  height: 40px;

}



/* 3. Category Tag (Replacing Circle Plus) */

.cpf-insights__card-category {

  position: absolute;

  top: 30px;

  right: 30px;

  font-family: var(--cpf-font-mono);

  font-size: 8px;

  color: var(--cpf-color-accent);

  text-transform: uppercase;

  letter-spacing: 0.2em;

  padding: 4px 10px;

  border: 1px solid rgba(235, 203, 52, 0.2);

  background: rgba(0, 0, 0, 0.4);

  z-index: 10;

  backdrop-filter: blur(5px);

}



/* Hide the old plus icon globally */

.cpf-insights__card-plus {

  display: none !important;

}



/* 4. Title Structural Accent */

.cpf-insights__card-title,

.cpf-insights__card-title-lg {

  position: relative;

  padding-left: 20px !important;

}



.cpf-insights__card-title::before,

.cpf-insights__card-title-lg::before {

  content: "";

  position: absolute;

  left: 0;

  top: 5px;

  bottom: 5px;

  width: 2px;

  background: rgba(235, 203, 52, 0.2);

  transition: all 0.4s ease;

}



.cpf-insights__card:hover .cpf-insights__card-title::before,

.cpf-insights__card:hover .cpf-insights__card-title-lg::before {

  background: var(--cpf-color-accent);

  width: 4px;

}



/* 5. Button Overhaul (No Glow) */

.cpf-insights__all-btn {

  background: transparent !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  overflow: hidden;

  position: relative;

  z-index: 1;

}



.cpf-insights__all-btn::after {

  content: "";

  position: absolute;

  inset: 0;

  background: #fff;

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: -1;

}



.cpf-insights__all-btn:hover::after {

  transform: scaleX(1);

  transform-origin: left;

}



.cpf-insights__all-btn:hover {

  color: #000 !important;

  border-color: #fff !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: REFINED GEOMETRY (REMOVING CORNER CLUTTER)

   ========================================================================== */



/* Remove the corner brackets that "looked bad" */

.cpf-insights__card::before {

  content: none !important;

  display: none !important;

}



/* New, Cleaner Accent: The "Top Horizon Line" */

.cpf-insights__card {

  overflow: hidden !important;

}



.cpf-insights__card::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background: var(--cpf-color-accent);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: 10;

}



.cpf-insights__card:hover::after {

  transform: scaleX(1);

}



/* Category Tag Refinement: More Subtle Pill */

.cpf-insights__card-category {

  top: 20px !important;

  right: 20px !important;

  border-radius: 20px !important;

  background: rgba(255, 255, 255, 0.05) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  color: #fff !important;

  backdrop-filter: blur(10px) !important;

  padding: 4px 12px !important;

  font-size: clamp(0.75rem, 1vw, 1rem) !important;

}



.cpf-insights__card:hover .cpf-insights__card-category {

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

  border-color: var(--cpf-color-accent) !important;

}



/* Blade Accent: Thinner and cleaner */

.cpf-insights__card-title::before,

.cpf-insights__card-title-lg::before {

  width: 1px !important;

  background: rgba(255, 255, 255, 0.1) !important;

}



.cpf-insights__card:hover .cpf-insights__card-title::before,

.cpf-insights__card:hover .cpf-insights__card-title-lg::before {

  background: var(--cpf-color-accent) !important;

  width: 2px !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: BLOG INTERFACE (SIDEBAR, PAGINATION, WIDGETS)

   ========================================================================== */



/* 1. Global Layout Fixes */

.zyf-blog-page {

  background-color: #000 !important;

}



.cpf-blog-layout {

  padding-block: 40px !important;

}



/* 2. Pagination Styling (Premium & Minimal) */

.cpf-pagination {

  margin-block-start: 80px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-block: 30px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.cpf-pagination__numbers {

  display: flex;

  gap: 20px;

  list-style: none;

  padding: 0;

  margin: 0;

}



.cpf-pagination__link {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  color: rgba(255, 255, 255, 0.4);

  text-decoration: none;

  transition: all 0.3s ease;

}



.cpf-pagination__link.is-active,

.cpf-pagination__link:hover {

  color: var(--cpf-color-accent);

}



.cpf-pagination__btn {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  padding: 12px 24px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: #fff;

  text-decoration: none;

  transition: all 0.4s var(--cpf-ease);

}



.cpf-pagination__btn:hover {

  background: #fff;

  color: #000;

  border-color: #fff;

}



/* 3. Sidebar & Widget Styling */

.cpf-blog-sidebar {

  display: flex;

  flex-direction: column;

  gap: 60px;

}



.cpf-widget {

  position: relative;

}



.cpf-widget__title {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  color: var(--cpf-color-accent);

  margin-block-end: 25px;

  display: flex;

  align-items: center;

  gap: 15px;

}



.cpf-widget__title::after {

  content: "";

  flex: 1;

  height: 1px;

  background: rgba(235, 203, 52, 0.2);

}



/* Search Widget */

.cpf-search__form {

  display: flex;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-block-end: 10px;

}



.cpf-search__field {

  background: transparent;

  border: none;

  color: #fff;

  font-family: var(--cpf-font-body);

  font-size: 14px;

  width: 100%;

  outline: none;

}



.cpf-search__submit {

  background: transparent;

  border: none;

  color: rgba(255, 255, 255, 0.4);

  cursor: pointer;

  transition: color 0.3s ease;

}



.cpf-search__submit:hover {

  color: var(--cpf-color-accent);

}



/* Taxonomy / List Widget */

.cpf-taxonomy__list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.cpf-taxonomy__link {

  display: flex;

  justify-content: space-between;

  font-family: var(--cpf-font-body);

  font-size: 14px;

  color: rgba(255, 255, 255, 0.5);

  text-decoration: none;

  transition: all 0.3s ease;

}



.cpf-taxonomy__link:hover {

  color: #fff;

  transform: translateX(5px);

}



.cpf-taxonomy__count {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: var(--cpf-color-accent);

  opacity: 0.5;

}



/* Newsletter Widget */

.cpf-newsletter__text {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.4);

  line-height: 1.6;

  margin-block-end: 20px;

}



.cpf-newsletter__form {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.cpf-newsletter__input {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.05);

  padding: 15px;

  color: #fff;

  font-size: 13px;

  outline: none;

}



.cpf-newsletter__btn {

  background: var(--cpf-color-accent);

  color: #000;

  border: none;

  padding: 15px;

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

}



.cpf-newsletter__btn:hover {

  background: #fff;

}



/* ==========================================================================

   SOVEREIGN ELITE: BLOG INTERFACE (CORRECTED CLASSES)

   ========================================================================== */



/* 1. Global Page Background */

body.zyf-blog-page {

  background-color: #000 !important;

}



/* 2. Pagination (Refined & Minimal) */

.zyf-pagination {

  margin-block-start: 80px;

  padding-block: 40px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.zyf-pagination__list {

  display: flex;

  align-items: center;

  gap: 25px;

  list-style: none;

  padding: 0;

  margin: 0;

}



.zyf-pagination__link {

  font-family: var(--cpf-font-mono);

  font-size: 11px;

  color: rgba(255, 255, 255, 0.4);

  text-decoration: none;

  transition: all 0.3s ease;

  position: relative;

}



.zyf-pagination__link.is-active,

.zyf-pagination__link:hover {

  color: var(--cpf-color-accent);

}



.zyf-pagination__next {

  margin-inline-start: auto;

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  padding: 14px 28px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: #fff;

  text-decoration: none;

  transition: all 0.4s var(--cpf-ease);

}



.zyf-pagination__next:hover {

  background: #fff;

  color: #000;

  border-color: #fff;

}



/* 3. Sidebar Widgets (Institutional Styling) */

.cpf-blog-sidebar {

  display: flex;

  flex-direction: column;

  gap: 60px;

}



.cpf-blog-sidebar__widget {

  position: relative;

}



.cpf-blog-sidebar__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.25em !important;

  color: var(--cpf-color-accent) !important;

  margin-block-end: 30px !important;

  display: flex;

  align-items: center;

  gap: 15px;

  font-weight: 500;

}



.cpf-blog-sidebar__label::after {

  content: "";

  flex: 1;

  height: 1px;

  background: rgba(235, 203, 52, 0.2);

}



/* Search Field */

.cpf-blog-sidebar__search {

  display: flex;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-block-end: 12px;

  transition: border-color 0.4s ease;

}



.cpf-blog-sidebar__search:focus-within {

  border-color: var(--cpf-color-accent);

}



.cpf-blog-sidebar__search input {

  background: transparent;

  border: none;

  color: #fff;

  font-family: var(--cpf-font-body);

  font-size: 14px;

  width: 100%;

  outline: none;

}



.cpf-blog-sidebar__search button {

  background: transparent;

  border: none;

  color: rgba(255, 255, 255, 0.4);

  cursor: pointer;

  transition: all 0.3s ease;

}



.cpf-blog-sidebar__search button:hover {

  color: var(--cpf-color-accent);

  transform: scale(1.1);

}



/* Taxonomy List */

.cpf-blog-sidebar__list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.cpf-blog-sidebar__link {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: var(--cpf-font-body);

  font-size: 14px;

  color: rgba(255, 255, 255, 0.5);

  text-decoration: none;

  transition: all 0.4s var(--cpf-ease);

}



.cpf-blog-sidebar__link:hover {

  color: #fff;

  padding-inline-start: 10px;

}



.cpf-blog-sidebar__link .num {

  font-family: var(--cpf-font-mono);

  font-size: 14px !important;

  color: var(--cpf-color-accent);

  opacity: 0.5;

}



/* Newsletter Registry */

.cpf-blog-sidebar__text {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.4);

  line-height: 1.8;

  margin-block-end: 25px;

}



.cpf-blog-sidebar__form {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.cpf-blog-sidebar__form input {

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.08);

  padding: 16px;

  color: #fff;

  font-size: 13px;

  outline: none;

  transition: all 0.4s ease;

}



.cpf-blog-sidebar__form input:focus {

  border-color: rgba(235, 203, 52, 0.5);

  background: rgba(255, 255, 255, 0.04);

}



.cpf-blog-sidebar__btn {

  background: var(--cpf-color-accent) !important;

  color: #000 !important;

  border: none !important;

  padding: 16px !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.15em !important;

  font-weight: 600 !important;

  cursor: pointer;

  transition: all 0.4s var(--cpf-ease) !important;

}



.cpf-blog-sidebar__btn:hover {

  background: #fff !important;

  transform: translateY(-2px);

}



/* ==========================================================================

   SOVEREIGN ELITE: BLOG LAYOUT FIX (GRID & SPACING)

   ========================================================================== */



/* 1. Fix the Sidebar Position (Desktop) */

.cpf-blog-layout__grid {

  display: grid !important;

  grid-template-columns: 1fr 350px !important;

  gap: 80px !important;

  align-items: start !important;

}



/* 2. Responsive Stack (Mobile/Tablet) */

@media (max-width: 1024px) {

  .cpf-blog-layout__grid {

    grid-template-columns: 1fr !important;

    gap: 60px !important;

  }

}



/* 3. Collapse the "Big Gap" between Hero and Grid */

#wp-block-blog-hero {

  padding-block-end: 0 !important;

}



.cpf-blog-layout {

  padding-block-start: 0 !important;

}



/* 4. Sidebar Width Constraint */

.cpf-blog-sidebar {

  width: 100% !important;

  max-width: 350px !important;

  position: sticky !important;

  top: 120px !important;

}



@media (max-width: 1024px) {

  .cpf-blog-sidebar {

    max-width: 100% !important;

    position: static !important;

  }

}



/* ==========================================================================

   SOVEREIGN ELITE: BESPOKE SIDEBAR WIDGETS (UNIQUE IDENTITY)

   ========================================================================== */



/* 1. The Terminal Widget (System Status) */

.zyf-terminal {

  background: rgba(235, 203, 52, 0.03) !important;

  border: 1px solid rgba(235, 203, 52, 0.1) !important;

  padding: 20px !important;

  position: relative !important;

  overflow: hidden !important;

  font-family: var(--cpf-font-mono) !important;

}



.zyf-terminal__row {

  display: flex !important;

  justify-content: space-between !important;

  margin-block-end: 8px !important;

  font-size: 10px !important;

  letter-spacing: 0.05em !important;

}



.zyf-terminal__key {

  color: rgba(255, 255, 255, 0.4) !important;

}



.zyf-terminal__val {

  color: #fff !important;

}



.zyf-terminal__val--active {

  color: var(--cpf-color-accent) !important;

  text-shadow: 0 0 10px rgba(235, 203, 52, 0.5) !important;

}



.zyf-terminal__scanline {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  background: linear-gradient(to bottom, transparent 50%, rgba(235, 203, 52, 0.05) 50%) !important;

  background-size: 100% 4px !important;

  pointer-events: none !important;

  animation: zyf-sidebar-scan 10s linear infinite !important;

}



@keyframes zyf-sidebar-scan {

  from {

    transform: translateY(-100%);

  }



  to {

    transform: translateY(100%);

  }

}



/* 2. Global Axis Clocks */

.zyf-clocks {

  display: flex !important;

  flex-direction: column !important;

  gap: 15px !important;

}



.zyf-clock {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-block-end: 10px !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.zyf-clock__city {

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  color: rgba(255, 255, 255, 0.4) !important;

  letter-spacing: 0.1em !important;

}



.zyf-clock__time {

  font-family: var(--cpf-font-mono) !important;

  font-size: 12px !important;

  color: #fff !important;

  font-variant-numeric: tabular-nums !important;

}



/* 3. Strategic Archive (Pill Tags) */

.zyf-archive {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 10px !important;

}



.zyf-archive__tag {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  background: rgba(255, 255, 255, 0.03) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  padding: 8px 14px !important;

  font-size: 14px !important;

  color: rgba(255, 255, 255, 0.6) !important;

  text-decoration: none !important;

  transition: all 0.4s var(--cpf-ease) !important;

}



.zyf-archive__tag:hover {

  background: #fff !important;

  color: #000 !important;

  border-color: #fff !important;

  transform: translateY(-2px) !important;

}



.zyf-archive__num {

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  color: var(--cpf-color-accent) !important;

  opacity: 0.6 !important;

}



.zyf-archive__tag:hover .zyf-archive__num {

  color: #000 !important;

  opacity: 1 !important;

}



/* 4. Access Portal (The Membership Card) */

.zyf-access-card {

  background: var(--cpf-color-accent) !important;

  padding: 30px !important;

  position: relative !important;

  overflow: hidden !important;

  color: #000 !important;

}



.zyf-access-card__text {

  font-size: 13px !important;

  line-height: 1.6 !important;

  margin-block-end: 20px !important;

  font-weight: 500 !important;

}



.zyf-access-card__form input {

  background: rgba(0, 0, 0, 0.1) !important;

  border: 1px solid rgba(0, 0, 0, 0.1) !important;

  padding: 12px !important;

  width: 100% !important;

  color: #000 !important;

  font-size: 12px !important;

  font-family: var(--cpf-font-mono) !important;

  outline: none !important;

  margin-block-end: 10px !important;

}



.zyf-access-card__form button {

  background: #000 !important;

  color: #fff !important;

  border: none !important;

  padding: 12px !important;

  width: 100% !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.1em !important;

  cursor: pointer !important;

  transition: all 0.3s ease !important;

}



.zyf-access-card__form button:hover {

  background: #fff !important;

  color: #000 !important;

}



.zyf-access-card__chip {

  position: absolute !important;

  bottom: -20px !important;

  right: -20px !important;

  width: 80px !important;

  height: 80px !important;

  background: rgba(0, 0, 0, 0.05) !important;

  border-radius: 50% !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: STP-APPROVED EDITORIAL WIDGETS

   ========================================================================== */



/* 1. Studio Mission */

.cpf-sidebar-mission__text {

  font-family: var(--cpf-font-body) !important;

  font-size: 14px !important;

  line-height: 1.8 !important;

  color: rgba(255, 255, 255, 0.4) !important;

  margin-block-end: 20px !important;

}



.cpf-sidebar-mission__link {

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.15em !important;

  color: var(--cpf-color-accent) !important;

  text-decoration: none !important;

  transition: all 0.3s ease !important;

}



.cpf-sidebar-mission__link:hover {

  color: #fff !important;

  padding-inline-start: 5px !important;

}



/* 2. Operational Indicators (Stats) */

.cpf-sidebar-stats {

  display: flex !important;

  flex-direction: column !important;

  gap: 15px !important;

}



.cpf-sidebar-stats__item {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-block-end: 12px !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

}



.cpf-sidebar-stats__key {

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  color: rgba(255, 255, 255, 0.3) !important;

  letter-spacing: 0.1em !important;

}



.cpf-sidebar-stats__val {

  font-family: var(--cpf-font-mono) !important;

  font-size: 14px !important;

  color: #fff !important;

  font-weight: 500 !important;

}



/* 3. Service Taxonomy (Nav) */

.cpf-sidebar-nav {

  display: flex !important;

  flex-direction: column !important;

  gap: 12px !important;

}



.cpf-sidebar-nav__link {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  font-family: var(--cpf-font-body) !important;

  font-size: 13px !important;

  color: rgba(255, 255, 255, 0.5) !important;

  text-decoration: none !important;

  transition: all 0.4s var(--cpf-ease) !important;

}



.cpf-sidebar-nav__link:hover {

  color: #fff !important;

  padding-inline-start: 10px !important;

}



.cpf-sidebar-nav__link .num {

  font-family: var(--cpf-font-mono) !important;

  font-size: 9px !important;

  color: var(--cpf-color-accent) !important;

  opacity: 0.5 !important;

}



/* 4. Secure Briefing (Newsletter Refined) */

.cpf-sidebar-briefing {

  background: var(--cpf-color-accent) !important;

  padding: 35px !important;

  color: #000 !important;

}



.cpf-sidebar-briefing__text {

  font-family: var(--cpf-font-body) !important;

  font-size: 14px !important;

  line-height: 1.6 !important;

  margin-block-end: 25px !important;

  font-weight: 500 !important;

}



.cpf-sidebar-briefing__form input {

  background: rgba(0, 0, 0, 0.05) !important;

  border: 1px solid rgba(0, 0, 0, 0.1) !important;

  padding: 14px !important;

  width: 100% !important;

  color: #000 !important;

  font-size: 13px !important;

  outline: none !important;

  margin-block-end: 12px !important;

  transition: all 0.3s ease !important;

}



.cpf-sidebar-briefing__form input:focus {

  background: rgba(0, 0, 0, 0.1) !important;

}



.cpf-sidebar-briefing__form button {

  background: #000 !important;

  color: #fff !important;

  border: none !important;

  padding: 14px !important;

  width: 100% !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.15em !important;

  font-weight: 600 !important;

  cursor: pointer !important;

  transition: all 0.3s ease !important;

}



.cpf-sidebar-briefing__form button:hover {

  background: #fff !important;

  color: #000 !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: STANDARD WORDPRESS WIDGETS (POLISHED DESIGN)

   ========================================================================== */



/* 1. Global Widget Heading */

.cpf-widget__title {

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.2em !important;

  color: var(--cpf-color-accent) !important;

  margin-block-end: 25px !important;

  display: flex !important;

  align-items: center !important;

  gap: 15px !important;

}



.cpf-widget__title::after {

  content: "";

  flex: 1;

  height: 1px;

  background: rgba(235, 203, 52, 0.2);

}



/* 2. Recent Posts Widget */

.cpf-recent-posts {

  display: flex !important;

  flex-direction: column !important;

  gap: 20px !important;

}



.cpf-recent-posts__item {

  display: flex !important;

  gap: 15px !important;

  align-items: center !important;

}



.cpf-recent-posts__thumb {

  width: 60px !important;

  height: 60px !important;

  flex-shrink: 0 !important;

  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.05) !important;

}



.cpf-recent-posts__thumb img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  filter: grayscale(1) !important;

  transition: filter 0.4s ease !important;

}



.cpf-recent-posts__item:hover img {

  filter: grayscale(0) !important;

}



.cpf-recent-posts__date {

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  color: var(--cpf-color-accent) !important;

  display: block !important;

  margin-block-end: 5px !important;

}



.cpf-recent-posts__name {

  font-family: var(--cpf-font-body) !important;

  font-size: 13px !important;

  line-height: 1.4 !important;

  margin: 0 !important;

}



.cpf-recent-posts__name a {

  color: rgba(255, 255, 255, 0.6) !important;

  text-decoration: none !important;

  transition: color 0.3s ease !important;

}



.cpf-recent-posts__name a:hover {

  color: #fff !important;

}



/* 3. Category List Widget */

.cpf-category-list {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 12px !important;

}



.cat-item {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

}



.cat-item a {

  font-family: var(--cpf-font-body) !important;

  font-size: 13px !important;

  color: rgba(255, 255, 255, 0.4) !important;

  text-decoration: none !important;

  transition: all 0.4s var(--cpf-ease) !important;

}



.cat-item a:hover {

  color: #fff !important;

  padding-inline-start: 8px !important;

}



.cat-item .count {

  font-family: var(--cpf-font-mono) !important;

  font-size: 9px !important;

  color: var(--cpf-color-accent) !important;

  opacity: 0.5 !important;

}



/* 4. Newsletter Box */

.cpf-newsletter-box {

  background: var(--cpf-color-accent) !important;

  padding: 30px !important;

  color: #000 !important;

}



.cpf-newsletter-box__title {

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.15em !important;

  margin-block-end: 15px !important;

  font-weight: 600 !important;

}



.cpf-newsletter-box__text {

  font-size: 13px !important;

  line-height: 1.5 !important;

  margin-block-end: 20px !important;

  opacity: 0.8 !important;

}



.cpf-newsletter-box__form input {

  background: rgba(0, 0, 0, 0.05) !important;

  border: 1px solid rgba(0, 0, 0, 0.1) !important;

  padding: 12px !important;

  width: 100% !important;

  color: #000 !important;

  font-size: 13px !important;

  outline: none !important;

  margin-block-end: 10px !important;

}



.cpf-newsletter-box__form button {

  background: #000 !important;

  color: #fff !important;

  border: none !important;

  padding: 12px !important;

  width: 100% !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 10px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.1em !important;

  font-weight: 600 !important;

  cursor: pointer !important;

  transition: all 0.3s ease !important;

}



.cpf-newsletter-box__form button:hover {

  background: #fff !important;

  color: #000 !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: HIGH-FIDELITY WIDGET POLISH

   ========================================================================== */



/* 1. Enhanced Widget Titles */

.cpf-widget__title {

  font-family: var(--cpf-font-mono) !important;

  font-size: 14px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.3em !important;

  color: #fff !important;

  /* Switch to white for more punch */

  margin-block-end: 35px !important;

  display: flex !important;

  align-items: center !important;

  gap: 20px !important;

  position: relative !important;

}



.cpf-widget__title::before {

  content: "\00BB";

  /* High-end directional prefix */

  color: var(--cpf-color-accent);

  font-size: 14px;

}



.cpf-widget__title::after {

  content: "";

  flex: 1;

  height: 1px;

  background: linear-gradient(to right, rgba(235, 203, 52, 0.4), transparent) !important;

}



/* 2. Bespoke Search Protocol */

.cpf-search-form {

  position: relative !important;

  background: rgba(255, 255, 255, 0.03) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  padding: 5px !important;

  display: flex !important;

  align-items: center !important;

  transition: all 0.4s var(--cpf-ease) !important;

}



.cpf-search-form:focus-within {

  border-color: var(--cpf-color-accent) !important;

  background: rgba(255, 255, 255, 0.05) !important;

}



.cpf-search-form__input {

  background: transparent !important;

  border: none !important;

  color: #fff !important;

  padding: 12px 15px !important;

  width: 100% !important;

  font-family: var(--cpf-font-body) !important;

  font-size: 13px !important;

  outline: none !important;

}



.cpf-search-form__input::placeholder {

  color: rgba(255, 255, 255, 0.2) !important;

}



.cpf-search-form__submit {

  background: var(--cpf-color-accent) !important;

  border: none !important;

  width: 45px !important;

  height: 45px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #000 !important;

  cursor: pointer !important;

  transition: all 0.3s ease !important;

}



.cpf-search-form__submit:hover {

  background: #fff !important;

}



/* 3. Kinetic Category Navigation */

.cpf-category-list {

  display: flex !important;

  flex-direction: column !important;

  gap: 5px !important;

}



.cat-item {

  position: relative !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;

}



.cat-item a {

  display: block !important;

  padding: 18px 0 !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 14px !important;

  letter-spacing: 0.1em !important;

  color: rgba(255, 255, 255, 0.5) !important;

  text-decoration: none !important;

  transition: all 0.5s var(--cpf-ease) !important;

  position: relative !important;

}



/* The "Blade" Indicator */

.cat-item a::before {

  content: "";

  position: absolute;

  left: -20px;

  top: 50%;

  transform: translateY(-50%) scaleY(0);

  width: 2px;

  height: 20px;

  background: var(--cpf-color-accent);

  transition: all 0.4s var(--cpf-ease);

  opacity: 0;

}



.cat-item:hover a {

  color: #fff !important;

  padding-inline-start: 15px !important;

}



.cat-item:hover a::before {

  transform: translateY(-50%) scaleY(1);

  opacity: 1;

}



.cat-item .count {

  position: absolute !important;

  right: 0 !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 9px !important;

  color: var(--cpf-color-accent) !important;

  opacity: 0.3 !important;

  transition: opacity 0.3s ease !important;

}



.cat-item:hover .count {

  opacity: 1 !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: CUSTOM VALIDATION PROTOCOL

   ========================================================================== */



.cpf-field-wrap {

  position: relative !important;

  width: 100% !important;

}



.cpf-validation-msg {

  position: absolute !important;

  top: 100% !important;

  left: 0 !important;

  background: #000 !important;

  color: var(--cpf-color-accent) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 9px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.1em !important;

  padding: 8px 12px !important;

  margin-top: 5px !important;

  z-index: 100 !important;

  display: none !important;

  pointer-events: none !important;

  white-space: nowrap !important;

}



.cpf-validation-msg.is-visible {

  display: block !important;

  animation: cpf-msg-slide 0.3s var(--cpf-ease) !important;

}



@keyframes cpf-msg-slide {

  from {

    opacity: 0;

    transform: translateY(-5px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.cpf-field--error {

  border-color: rgba(0, 0, 0, 0.2) !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: GLOBAL ALIGNMENT SYNC (GRID CONSTRAINTS)

   ========================================================================== */



/* Synchronize Footer width with Content width */

.tft-ftr-elite__container {

  max-width: 1440px !important;

  max-inline-size: 1440px !important;

  padding-inline: var(--cpf-nav-px) !important;

  margin-inline: auto !important;

}



@media (max-width: 1024px) {

  .tft-ftr-elite__container {

    padding-inline: 20px !important;

  }

}



/* 2. Custom Validation Protocol Styles */

.cpf-field-wrap {

  position: relative !important;

  width: 100% !important;

}



.cpf-validation-msg {

  position: absolute !important;

  top: 100% !important;

  left: 0 !important;

  background: #000 !important;

  color: var(--cpf-color-accent) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 9px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.1em !important;

  padding: 8px 12px !important;

  margin-top: 5px !important;

  z-index: 100 !important;

  display: none !important;

  pointer-events: none !important;

  white-space: nowrap !important;

  border: 1px solid rgba(235, 203, 52, 0.2) !important;

}



.cpf-validation-msg.is-visible {

  display: block !important;

  animation: cpf-msg-slide 0.3s var(--cpf-ease) !important;

}



@keyframes cpf-msg-slide {

  from {

    opacity: 0;

    transform: translateY(-5px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ==========================================================================

   SOVEREIGN ELITE: THUMBNAIL RADIUS ENHANCEMENT

   ========================================================================== */



/* 1. Blog Grid Avatars */

.cpf-insights__card-avatar,

.cpf-insights__card-avatar img {

  border-radius: 16px !important;

  overflow: hidden !important;

}



/* 2. Sidebar Recent Posts Thumbnails */

.cpf-recent-posts__thumb,

.cpf-recent-posts__thumb img {

  border-radius: 12px !important;

  overflow: hidden !important;

}





/* ==========================================================================

   SOVEREIGN ELITE: CINEMATIC FLASH PRELOADER (AETHERIS PROTOCOL)

   ========================================================================== */

#d3-flash-modal {

  position: fixed;

  inset: 0;

  z-index: 9999999999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: #080808;

  pointer-events: all;

  overflow: hidden;

}



#d3-flash-modal.is-gone {

  pointer-events: none;

}



.d3-flash__bar {

  position: absolute;

  inset: 0;

  background: var(--cpf-color-accent);

  transform: scaleY(0);

  transform-origin: bottom;

  animation: flashBarIn 0.35s cubic-bezier(0.76, 0, 0.24, 1) 0.1s forwards,

    flashBarOut 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.55s forwards;

}



@keyframes flashBarIn {

  to {

    transform: scaleY(1);

  }

}



@keyframes flashBarOut {

  from {

    transform: scaleY(1);

    transform-origin: top;

  }



  to {

    transform: scaleY(0);

    transform-origin: top;

  }

}



.d3-flash__logo {

  position: relative;

  z-index: 2;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(48px, 8vw, 120px);

  color: #fff;

  letter-spacing: 0.05em;

  opacity: 0;

  animation: flashLogoIn 0.5s ease 0.6s forwards, flashLogoOut 0.4s ease 1.3s forwards;

}



.d3-flash__logo span {

  color: var(--cpf-color-accent);

}



@keyframes flashLogoIn {

  to {

    opacity: 1;

    transform: translateY(0);

  }



  from {

    opacity: 0;

    transform: translateY(20px);

  }

}



@keyframes flashLogoOut {

  to {

    opacity: 0;

    transform: translateY(-20px);

  }

}



.d3-flash__cover {

  position: absolute;

  inset: 0;

  background: #080808;

  transform: scaleY(0);

  transform-origin: top;

  animation: coverSlide 0.55s cubic-bezier(0.76, 0, 0.24, 1) 1.6s forwards;

}



@keyframes coverSlide {

  to {

    transform: scaleY(1);

  }

}



/* ==========================================================================

 SOVEREIGN ELITE: TAB VISIBILITY FIX

 ========================================================================== */

[hidden] {

  display: none !important;

}





/* ==========================================================================



/* ==========================================================================

   SOVEREIGN ELITE: HIGH-FIDELITY HOVER ZOOM ARCHITECTURE

   ========================================================================== */



/* 1. Blog Grid Small Cards - Thumbnail Container Zoom Setup */

.cpf-insights__card-avatar {

  transition: transform 0.6s var(--cpf-ease), border-color 0.4s var(--cpf-ease), background 0.4s var(--cpf-ease) !important;

  will-change: transform;

  transform-origin: center center;

}



/* 2. Blog Grid Small Cards - Thumbnail Container Hover Scale */

.cpf-insights__card:hover .cpf-insights__card-avatar {

  transform: scale(1.18) !important;

}



/* 3. Blog Grid Small Cards - Inner Image Complementary Zoom */

.cpf-insights__card-avatar img {

  transition: transform 0.7s var(--cpf-ease) !important;

  will-change: transform;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}



.cpf-insights__card:hover .cpf-insights__card-avatar img {

  transform: scale(1.08) !important;

}



/* 4. Blog Grid Featured Card - Smooth Zoom Enhancement */

.cpf-insights__card-bg img {

  transition: transform 0.9s var(--cpf-ease) !important;

  will-change: transform;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}



.cpf-insights__card:hover .cpf-insights__card-bg img {

  transform: scale(1.1) !important;

}



/* 5. Sidebar Recent Dispatches - Thumbnail Container Zoom Setup */

.cpf-recent-posts__thumb {

  transition: transform 0.6s var(--cpf-ease) !important;

  will-change: transform;

  transform-origin: center center;

}



/* 6. Sidebar Recent Dispatches - Thumbnail Container Hover Scale */

.cpf-recent-posts__item:hover .cpf-recent-posts__thumb {

  transform: scale(1.18) !important;

}



/* 7. Sidebar Recent Dispatches - Inner Image Complementary Zoom */

.cpf-recent-posts__thumb img {

  transition: transform 0.7s var(--cpf-ease) !important;

  will-change: transform;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}



.cpf-recent-posts__item:hover .cpf-recent-posts__thumb img {

  transform: scale(1.08) !important;

}



/* ==========================================================================

   TFT STYLE SWITCHER SYSTEM (RTL-READY LOGICAL PROPERTIES)

   ========================================================================== */

.tft-style-switcher {

  position: fixed !important;

  inset-block-start: 50% !important;

  inset-inline-end: 0 !important;

  transform: translateY(-50%) translateX(100%) !important;

  width: 280px !important;

  background-color: var(--cpf-color-white) !important;

  box-shadow: -15px 0 60px rgba(0, 0, 0, 0.12) !important;

  z-index: 999999 !important;

  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;

  border-radius: var(--cpf-radius-md) 0 0 var(--cpf-radius-md) !important;

  padding-block: var(--cpf-space-md) !important;

  padding-inline: var(--cpf-space-sm) !important;

  display: flex !important;

  flex-direction: column !important;

}



.tft-style-switcher.is-open {

  transform: translateY(-50%) translateX(0) !important;

}



.tft-style-switcher__toggle {

  position: absolute !important;

  inset-inline-start: -52px !important;

  inset-block-start: 50% !important;

  transform: translateY(-50%) !important;

  width: 52px !important;

  height: 52px !important;

  background-color: var(--cpf-color-dark) !important;

  color: var(--cpf-color-white) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  border-radius: var(--cpf-radius-sm) 0 0 var(--cpf-radius-sm) !important;

  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.12) !important;

  transition: all 0.3s ease !important;

}



.tft-style-switcher__toggle:hover {

  opacity: 0.9 !important;

}



.tft-style-switcher__panel {

  max-height: 80vh !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  gap: var(--cpf-space-sm) !important;

  padding-inline-end: 4px !important;

}



.tft-style-switcher__panel::-webkit-scrollbar {

  width: 4px !important;

}



.tft-style-switcher__panel::-webkit-scrollbar-thumb {

  background-color: var(--cpf-color-light) !important;

  border-radius: var(--cpf-radius-sm) !important;

}



.tft-style-switcher__header {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-inline: var(--cpf-space-xs) !important;

  margin-block-end: var(--cpf-space-xs) !important;

}



.tft-switcher-label {

  font-family: var(--cpf-font-mono) !important;

  font-size: var(--cpf-text-xs) !important;

  font-weight: 700 !important;

  letter-spacing: 2px !important;

  color: var(--cpf-color-dark) !important;

  opacity: 0.8 !important;

}



.tft-switcher-count {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  color: var(--cpf-color-accent) !important;

  font-weight: 700 !important;

}



.tft-style-switcher__grid {

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 8px !important;

  padding-inline: 4px !important;

}



.tft-style-btn {

  display: flex !important;

  align-items: center !important;

  padding-block: 10px !important;

  padding-inline: 12px !important;

  background-color: var(--cpf-color-light) !important;

  border: 1px solid var(--cpf-color-light) !important;

  color: var(--cpf-color-dark) !important;

  cursor: pointer !important;

  font-family: var(--cpf-font-body) !important;

  font-size: 0.7rem !important;

  font-weight: 600 !important;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

  border-radius: var(--cpf-radius-sm) !important;

  text-transform: uppercase !important;

}



.tft-style-btn:hover,

.tft-style-btn.is-active {

  background-color: var(--cpf-color-dark) !important;

  color: var(--cpf-color-white) !important;

  border-color: var(--cpf-color-dark) !important;

}



.tft-dot {

  display: inline-block !important;

  width: 8px !important;

  height: 8px !important;

  border-radius: 50% !important;

  margin-inline-end: 8px !important;

  flex-shrink: 0 !important;

}



.tft-num {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.6rem !important;

  opacity: 0.5 !important;

  margin-inline-end: 6px !important;

}



.tft-name {

  letter-spacing: 0.5px !important;

}



.tft-color-picker-wrap {

  margin-block-start: var(--cpf-space-xs) !important;

  padding-block-start: var(--cpf-space-sm) !important;

  border-block-start: 1px solid var(--cpf-color-light) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 8px !important;

  padding-inline: var(--cpf-space-xs) !important;

}



.tft-color-label {

  font-family: var(--cpf-font-mono) !important;

  font-size: var(--cpf-text-xs) !important;

  font-weight: 700 !important;

  letter-spacing: 1px !important;

  color: var(--cpf-color-dark) !important;

}



.tft-color-input {

  width: 100% !important;

  height: 38px !important;

  border: 1px solid var(--cpf-color-light) !important;

  background: none !important;

  cursor: pointer !important;

  padding: 2px !important;

  border-radius: var(--cpf-radius-sm) !important;

}



.tft-typography-picker-wrap {

  margin-block-start: var(--cpf-space-xs) !important;

  padding-block-start: var(--cpf-space-sm) !important;

  border-block-start: 1px solid var(--cpf-color-light) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 8px !important;

  padding-inline: var(--cpf-space-xs) !important;

}



.tft-typography-label {

  font-family: var(--cpf-font-mono) !important;

  font-size: var(--cpf-text-xs) !important;

  font-weight: 700 !important;

  letter-spacing: 1px !important;

  color: var(--cpf-color-dark) !important;

}



.tft-typography-select {

  width: 100% !important;

  padding-block: 10px !important;

  padding-inline: 12px !important;

  background-color: var(--cpf-color-light) !important;

  border: 1px solid var(--cpf-color-light) !important;

  color: var(--cpf-color-dark) !important;

  font-family: var(--cpf-font-body) !important;

  font-size: 0.75rem !important;

  border-radius: var(--cpf-radius-sm) !important;

  outline: none !important;

  cursor: pointer !important;

  transition: border-color 0.3s ease !important;

}



.tft-typography-select:focus {

  border-color: var(--cpf-color-accent) !important;

}



.tft-reset-picker-wrap {

  margin-block-start: var(--cpf-space-xs) !important;

  padding-block-start: var(--cpf-space-sm) !important;

  border-block-start: 1px solid var(--cpf-color-light) !important;

  padding-inline: var(--cpf-space-xs) !important;

}



.tft-reset-all-btn {

  width: 100% !important;

  padding-block: 12px !important;

  padding-inline: 16px !important;

  background-color: var(--cpf-color-dark) !important;

  color: var(--cpf-color-white) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  letter-spacing: 1px !important;

  border: 1px solid var(--cpf-color-dark) !important;

  cursor: pointer !important;

  border-radius: var(--cpf-radius-sm) !important;

  transition: all 0.3s ease !important;

}



.tft-reset-all-btn:hover {

  background-color: var(--cpf-color-white) !important;

  color: var(--cpf-color-dark) !important;

  border-color: var(--cpf-color-dark) !important;

}







/* ============================================================

   TFT CORE EDITORIAL: SMOOTH THUMBNAIL SCALE ON HOVER

   ============================================================ */

.cpf-insights__card-avatar {

  overflow: hidden;

  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);

}



.cpf-insights__card-avatar img {

  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

  will-change: transform;

}



.cpf-insights__card:hover .cpf-insights__card-avatar img {

  transform: scale(1.18);

}



.cpf-insights__card:hover .cpf-insights__card-avatar {

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);

}





/* ============================================================

   SOVEREIGN ELITE BENTO GRID POLISHING & CURATION (2026 SPEC)

   ============================================================ */

.cpf-foundation__card {

  background: color-mix(in srgb, var(--cpf-color-white) 2%, transparent) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

  border-radius: var(--cpf-radius-lg) !important;

  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),

    border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1),

    box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),

    background 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



/* Card hover scaling and interactive border glow */

.cpf-foundation__card:hover {

  transform: translateY(-4px) !important;

  border-color: color-mix(in srgb, var(--cpf-color-white) 15%, transparent) !important;

  background: color-mix(in srgb, var(--cpf-color-white) 4%, transparent) !important;

  box-shadow: 0 15px 45px var(--cpf-color-dark) !important;

}



/* Make media overlay look like a premium studio glass tag */

.cpf-foundation__overlay {

  background: color-mix(in srgb, var(--cpf-color-dark) 75%, transparent) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 15%, transparent) !important;

  border-radius: var(--cpf-radius-md) !important;

  box-shadow: 0 8px 32px var(--cpf-color-dark) !important;

  padding: 1.1rem 1.6rem !important;

  transition: all 0.4s var(--cpf-ease) !important;

}



.cpf-foundation__card--media:hover .cpf-foundation__overlay {

  border-color: color-mix(in srgb, var(--cpf-color-white) 30%, transparent) !important;

  transform: translateY(-2px) !important;

}



/* Sleek color curation for the status text - pure white, no hacker green */

.cpf-foundation__overlay .status {

  color: var(--cpf-color-white) !important;

  text-transform: uppercase !important;

  letter-spacing: 0.12em !important;

  font-size: 0.75rem !important;

  font-weight: 800 !important;

  opacity: 0.95 !important;

}



.cpf-foundation__overlay .label {

  letter-spacing: 0.2em !important;

  font-size: 0.5rem !important;

  opacity: 0.5 !important;

}



/* Curate insight card text */

.cpf-foundation__text {

  letter-spacing: -0.01em !important;

  line-height: 1.55 !important;

}



.cpf-foundation__text strong {

  letter-spacing: -0.02em !important;

}



/* Dynamic visual line animation on hover */

.cpf-foundation__card--insight:hover .cpf-foundation__visual-line {

  inline-size: 85% !important;

}



.cpf-foundation__visual-line {

  transition: inline-size 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important;

  background: linear-gradient(90deg, color-mix(in srgb, var(--cpf-color-white) 15%, transparent) 0%, color-mix(in srgb, var(--cpf-color-white) 0%, transparent) 100%) !important;

}



/* Polishing numbers for stats card */

.cpf-foundation__stat-val {

  font-size: clamp(3.5rem, 5vw, 4.5rem) !important;

  font-weight: 800 !important;

  color: var(--cpf-color-white) !important;

  letter-spacing: -0.04em !important;

  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



.cpf-foundation__card--stat:hover .cpf-foundation__stat-val {

  transform: scale(1.05) translateX(3px) !important;

}



/* Polishing wide feature card */

.cpf-foundation__subtitle {

  font-size: clamp(1.8rem, 3vw, 2.2rem) !important;

  font-weight: 700 !important;

  letter-spacing: -0.03em !important;

  color: var(--cpf-color-white) !important;

}



.cpf-foundation__desc {

  opacity: 0.55 !important;

  line-height: 1.65 !important;

  letter-spacing: -0.01em !important;

}



/* Bento responsive layout enhancements for 320px up to tablets */

@media (max-width: 767.98px) {

  .cpf-foundation__grid {

    grid-template-columns: 1fr !important;

    gap: 1rem !important;

  }



  .cpf-foundation__card {

    grid-column: span 1 !important;

    grid-row: span 1 !important;

    padding: 1.8rem !important;

  }



  .cpf-foundation__card--media {

    padding: 0 !important;

    aspect-ratio: 4/5 !important;

  }

}





/* ============================================================

   SOVEREIGN ELITE DISCOURSE & COMMENT FORM OVERHAUL (2026 SPEC)

   ============================================================ */



/* Define accent variable cleanly */

:root {

  --cpf-color-accent: #ebcb34;

}



/* 1. Comment Section Title & Styling */

.tft-post-discourse__title {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;

  font-weight: 700 !important;

  letter-spacing: -0.03em !important;

  text-transform: uppercase !important;

  color: var(--cpf-color-white) !important;

  border-bottom: 2px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  padding-bottom: 1.25rem !important;

  margin-bottom: 2.5rem !important;

  display: flex !important;

  align-items: baseline !important;

  gap: 8px !important;

}



.tft-post-discourse__title span {

  font-family: var(--cpf-font-mono) !important;

  font-size: 1.1rem !important;

  font-weight: 400 !important;

  color: var(--cpf-color-accent) !important;

  opacity: 0.85 !important;

  letter-spacing: 0 !important;

}



/* 2. Individual Comment Block Typography & Spacing */

.tft-post-comment {

  margin-bottom: 2.5rem !important;

}



.tft-post-comment__inner {

  gap: 20px !important;

}



/* Avatar polishing */

.tft-post-comment__avatar {

  width: 48px !important;

  height: 48px !important;

  border-radius: 8px !important;

  overflow: hidden !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 10%, transparent) !important;

  transition: transform 0.4s var(--cpf-ease) !important;

}



.tft-post-comment__avatar:hover {

  transform: scale(1.08) rotate(2deg) !important;

}



/* Commenter header details */

.tft-post-comment__user {

  font-family: var(--cpf-font-display) !important;

  font-size: 1.05rem !important;

  font-weight: 600 !important;

  letter-spacing: -0.02em !important;

  color: var(--cpf-color-white) !important;

  text-transform: none !important;

  margin-bottom: 8px !important;

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

}



/* Monospace "Author" Badge */

.tft-post-comment__user span:not(.time) {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.1em !important;

  text-transform: uppercase !important;

  background: color-mix(in srgb, var(--cpf-color-accent) 15%, transparent) !important;

  color: var(--cpf-color-accent) !important;

  padding: 2px 8px !important;

  border-radius: 4px !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-accent) 30%, transparent) !important;

  display: inline-block !important;

}



/* Legible Metadata Time */

.tft-post-comment__user .time {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  letter-spacing: 0.05em !important;

  text-transform: uppercase !important;

  color: color-mix(in srgb, var(--cpf-color-white) 35%, transparent) !important;

}



/* High-Contrast Readability for Comment Text */

.tft-post-comment__text {

  font-family: var(--cpf-font-body) !important;

  font-size: 1.02rem !important;

  line-height: 1.68 !important;

  color: color-mix(in srgb, var(--cpf-color-white) 80%, transparent) !important;

  letter-spacing: -0.01em !important;

}



/* Elegant reply link styling */

.tft-post-comment__reply {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

  color: var(--cpf-color-accent) !important;

  margin-top: 12px !important;

  position: relative !important;

  transition: all 0.3s var(--cpf-ease) !important;

}



.tft-post-comment__reply::after {

  content: ' \2192' !important;

  opacity: 0 !important;

  display: inline-block !important;

  transform: translateX(-5px) !important;

  transition: all 0.3s var(--cpf-ease) !important;

}



.tft-post-comment__reply:hover {

  opacity: 1 !important;

  letter-spacing: 0.12em !important;

}



.tft-post-comment__reply:hover::after {

  opacity: 1 !important;

  transform: translateX(4px) !important;

}



/* 3. Nested (Child) Thread Curation - Premium Card Layout */

.tft-post-comment--child {

  margin-left: 68px !important;

  margin-top: 1.5rem !important;

  border-left: 2px solid var(--cpf-color-accent) !important;

  padding: 1.5rem 2rem !important;

  background: color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) !important;

  border-radius: var(--cpf-radius-md) !important;

  border-top-left-radius: 0 !important;

  border-bottom-left-radius: 0 !important;

  box-shadow: 0 4px 20px var(--cpf-color-dark) !important;

}



/* Responsive adjustment for nested comments */

@media (max-width: 575.98px) {

  .tft-post-comment--child {

    margin-left: 20px !important;

    padding: 1rem 1.25rem !important;

  }

}



/* 4. Elegant Comment Form Redesign */

.tft-post-form {

  background: color-mix(in srgb, var(--cpf-color-white) 1%, transparent) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

  padding: 3rem !important;

  border-radius: var(--cpf-radius-lg) !important;

  margin-top: var(--cpf-space-xl) !important;

  box-shadow: 0 10px 40px var(--cpf-color-dark) !important;

}



.tft-post-form__title {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;

  font-weight: 700 !important;

  letter-spacing: -0.03em !important;

  color: var(--cpf-color-white) !important;

  margin-bottom: 2rem !important;

  text-transform: uppercase !important;

  border-bottom: 1px dashed color-mix(in srgb, var(--cpf-color-white) 10%, transparent) !important;

  padding-bottom: 1rem !important;

}



.tft-post-form__title span {

  color: var(--cpf-color-accent) !important;

  font-style: normal !important;

}



.tft-post-form__grid {

  gap: 24px !important;

}



/* Minimalist Form Inputs - Underline border layout */

.tft-post-form__input,

.tft-post-form__textarea {

  background: color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) !important;

  border: none !important;

  border-bottom: 1px solid color-mix(in srgb, var(--cpf-color-white) 12%, transparent) !important;

  padding: 16px 8px !important;

  color: var(--cpf-color-white) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  letter-spacing: 0.08em !important;

  border-radius: 0 !important;

  transition: all 0.4s var(--cpf-ease) !important;

}



.tft-post-form__input::placeholder,

.tft-post-form__textarea::placeholder {

  color: color-mix(in srgb, var(--cpf-color-white) 35%, transparent) !important;

  letter-spacing: 0.1em !important;

}



.tft-post-form__input:focus,

.tft-post-form__textarea:focus {

  outline: none !important;

  border-bottom-color: var(--cpf-color-accent) !important;

  background: color-mix(in srgb, var(--cpf-color-white) 3%, transparent) !important;

  padding-left: 14px !important;

}



.tft-post-form__textarea {

  min-height: 120px !important;

}



/* High-contrast premium submit button */

.tft-post-form__btn {

  background: var(--cpf-color-accent) !important;

  color: var(--cpf-color-dark) !important;

  border: 1px solid var(--cpf-color-accent) !important;

  padding: 18px 48px !important;

  font-family: var(--cpf-font-mono) !important;

  font-weight: 700 !important;

  font-size: 0.8rem !important;

  text-transform: uppercase !important;

  letter-spacing: 0.15em !important;

  border-radius: 6px !important;

  cursor: pointer !important;

  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

  margin-top: 15px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

}



.tft-post-form__btn:hover {

  background: transparent !important;

  color: var(--cpf-color-accent) !important;

  border-color: var(--cpf-color-accent) !important;

  transform: translateY(-3px) !important;

  box-shadow: 0 8px 30px color-mix(in srgb, var(--cpf-color-accent) 25%, transparent) !important;

}



.tft-post-form__btn:active {

  transform: translateY(-1px) !important;

}





/* ==========================================================================

   SOVEREIGN ELITE: SINGLE PROJECT VERTICAL CASE STUDY LAYOUTS (2026 SPEC)

   ========================================================================== */



/* Page layout container configuration */

.tft-single-project-page {

  background-color: var(--cpf-color-dark) !important;

  color: var(--cpf-color-white) !important;

}



/* =============================================

   1. HERO SECTION DESIGN

   ============================================= */

.tft-project-hero {

  padding-block: var(--cpf-space-xl) !important;

  border-bottom: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  margin-inline: var(--cpf-hero-inset) !important;

}



.tft-project-hero__container {

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

  padding-inline: var(--cpf-nav-px) !important;

}



.tft-project-hero__header {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  border-bottom: 1px solid color-mix(in srgb, var(--cpf-color-white) 10%, transparent) !important;

  padding-block-end: var(--cpf-space-sm) !important;

  margin-block-end: var(--cpf-space-lg) !important;

}



.tft-project-hero__badge {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  letter-spacing: 0.15em !important;

  color: var(--cpf-color-accent) !important;

}



.tft-project-hero__index {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  color: color-mix(in srgb, var(--cpf-color-white) 40%, transparent) !important;

}



.tft-project-hero__split {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: var(--cpf-space-xl) !important;

  align-items: center !important;

}



.tft-project-hero__left {

  padding-inline-end: var(--cpf-space-md) !important;

}



.tft-project-hero__title {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(3.5rem, 8vw, 7.5rem) !important;

  font-weight: 700 !important;

  letter-spacing: -0.04em !important;

  line-height: 0.9 !important;

  text-transform: uppercase !important;

  color: var(--cpf-color-white) !important;

  margin-block-end: var(--cpf-space-md) !important;

}



.tft-project-hero__subtitle {

  font-family: var(--cpf-font-body) !important;

  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;

  font-weight: 300 !important;

  line-height: 1.5 !important;

  color: color-mix(in srgb, var(--cpf-color-white) 70%, transparent) !important;

  margin-block-end: var(--cpf-space-xl) !important;

}



.tft-project-hero__meta-grid {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: var(--cpf-space-md) !important;

  border-top: 1px dashed color-mix(in srgb, var(--cpf-color-white) 15%, transparent) !important;

  padding-block-start: var(--cpf-space-md) !important;

}



.tft-project-hero__meta-item {

  display: flex !important;

  flex-direction: column !important;

  gap: 4px !important;

}



.tft-project-hero__meta-item .label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.08em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 35%, transparent) !important;

}



.tft-project-hero__meta-item .val {

  font-family: var(--cpf-font-body) !important;

  font-size: 0.92rem !important;

  font-weight: 500 !important;

  color: var(--cpf-color-white) !important;

}



.tft-project-hero__media-wrap {

  position: relative !important;

  overflow: hidden !important;

  border-radius: var(--cpf-radius-lg) !important;

  box-shadow: 0 15px 50px var(--cpf-color-dark) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

}



.tft-project-hero__img {

  inline-size: 100% !important;

  block-size: auto !important;

  object-fit: cover !important;

  transition: transform 0.8s var(--cpf-ease) !important;

}



.tft-project-hero__media-wrap:hover .tft-project-hero__img {

  transform: scale(1.03) !important;

}



.tft-project-hero__img-caption {

  position: absolute !important;

  inset-block-end: 20px !important;

  inset-inline-start: 20px !important;

  background: color-mix(in srgb, var(--cpf-color-dark) 80%, transparent) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 15%, transparent) !important;

  padding: 8px 16px !important;

  border-radius: var(--cpf-radius-sm) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  color: var(--cpf-color-white) !important;

}



/* =============================================

   2. CONCEPT & DETAILED NARRATIVE

   ============================================= */

.tft-project-narrative {

  padding-block: var(--cpf-space-xl) !important;

  margin-inline: var(--cpf-hero-inset) !important;

}



.tft-project-narrative__container {

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

  padding-inline: var(--cpf-nav-px) !important;

}



.tft-project-narrative__concept-row {

  display: grid !important;

  grid-template-columns: 1fr 1.5fr !important;

  gap: var(--cpf-space-xl) !important;

  align-items: flex-start !important;

  margin-block-end: var(--cpf-space-xl) !important;

}



.tft-project-narrative__stat-col {

  display: flex !important;

  flex-direction: column !important;

}



.tft-project-narrative__stat-num {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(5rem, 12vw, 10rem) !important;

  font-weight: 800 !important;

  letter-spacing: -0.05em !important;

  line-height: 0.8 !important;

  color: var(--cpf-color-accent) !important;

}



.tft-project-narrative__stat-label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  letter-spacing: 0.08em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 50%, transparent) !important;

  margin-block-start: 10px !important;

}



.tft-project-narrative__text-col {

  padding-inline-start: var(--cpf-space-sm) !important;

}



.tft-project-narrative__lead {

  font-family: var(--cpf-font-body) !important;

  font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;

  font-weight: 400 !important;

  line-height: 1.6 !important;

  color: var(--cpf-color-white) !important;

  margin-block-end: var(--cpf-space-md) !important;

  letter-spacing: -0.01em !important;

}



.tft-project-narrative__body {

  font-family: var(--cpf-font-body) !important;

  font-size: 1.05rem !important;

  line-height: 1.7 !important;

  color: color-mix(in srgb, var(--cpf-color-white) 65%, transparent) !important;

}



/* Staggered gallery layout */

.tft-project-narrative__gallery {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: var(--cpf-space-xl) !important;

  margin-block-start: var(--cpf-space-xl) !important;

  position: relative !important;

}



.tft-project-narrative__photo {

  position: relative !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 12px !important;

}



.tft-project-narrative__photo--left {

  margin-block-end: var(--cpf-space-xl) !important;

}



.tft-project-narrative__photo--right {

  margin-block-start: var(--cpf-space-xl) !important;

}



.tft-project-narrative__img {

  inline-size: 100% !important;

  block-size: auto !important;

  object-fit: cover !important;

  border-radius: var(--cpf-radius-md) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

  transition: transform 0.6s var(--cpf-ease) !important;

}



.tft-project-narrative__photo:hover .tft-project-narrative__img {

  transform: scale(1.025) !important;

}



.tft-project-narrative__caption {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.05em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 40%, transparent) !important;

}



/* =============================================

   3. SPATIAL FLOW SECTION

   ============================================= */

.tft-project-flow {

  padding-block: var(--cpf-space-xl) !important;

  background: color-mix(in srgb, var(--cpf-color-white) 1%, transparent) !important;

  border-block: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

  margin-inline: var(--cpf-hero-inset) !important;

}



.tft-project-flow__container {

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

  padding-inline: var(--cpf-nav-px) !important;

}



.tft-project-flow__grid {

  display: flex !important;

  flex-direction: column !important;

  gap: var(--cpf-space-xl) !important;

}



.tft-project-flow__card {

  display: flex !important;

  flex-direction: column !important;

  gap: 15px !important;

}



.tft-project-flow__img-wrap {

  overflow: hidden !important;

  border-radius: var(--cpf-radius-lg) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

}



.tft-project-flow__img {

  inline-size: 100% !important;

  block-size: auto !important;

  object-fit: cover !important;

  transition: transform 0.8s var(--cpf-ease) !important;

}



.tft-project-flow__card:hover .tft-project-flow__img {

  transform: scale(1.02) !important;

}



.tft-project-flow__meta {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-inline: 4px !important;

}



.tft-project-flow__meta .label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  letter-spacing: 0.08em !important;

  color: var(--cpf-color-accent) !important;

}



.tft-project-flow__meta .detail {

  font-family: var(--cpf-font-body) !important;

  font-size: 0.8rem !important;

  font-weight: 500 !important;

  letter-spacing: -0.01em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 45%, transparent) !important;

}



.tft-project-flow__split-row {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: var(--cpf-space-xl) !important;

}



/* =============================================

   4. COLLABORATION & CREDITS

   ============================================= */

.tft-project-credits {

  padding-block: var(--cpf-space-xl) !important;

  margin-inline: var(--cpf-hero-inset) !important;

}



.tft-project-credits__container {

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

  padding-inline: var(--cpf-nav-px) !important;

}



.tft-project-credits__wrap {

  display: grid !important;

  grid-template-columns: 1fr 1.5fr !important;

  gap: var(--cpf-space-xl) !important;

  background: color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  padding: 3rem !important;

  border-radius: var(--cpf-radius-lg) !important;

  box-shadow: 0 10px 40px var(--cpf-color-dark) !important;

}



.tft-project-credits__profile {

  display: flex !important;

  align-items: center !important;

  gap: 20px !important;

  border-inline-end: 1px solid color-mix(in srgb, var(--cpf-color-white) 10%, transparent) !important;

  padding-inline-end: var(--cpf-space-md) !important;

}



.tft-project-credits__avatar {

  inline-size: 80px !important;

  block-size: 80px !important;

  border-radius: 50% !important;

  overflow: hidden !important;

  border: 2px solid var(--cpf-color-accent) !important;

  transition: transform 0.4s var(--cpf-ease) !important;

}



.tft-project-credits__avatar img {

  inline-size: 100% !important;

  block-size: 100% !important;

  object-fit: cover !important;

}



.tft-project-credits__profile:hover .tft-project-credits__avatar {

  transform: scale(1.08) rotate(3deg) !important;

}



.tft-project-credits__profile-info {

  display: flex !important;

  flex-direction: column !important;

}



.tft-project-credits__profile-info .label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.08em !important;

  color: var(--cpf-color-accent) !important;

  margin-block-end: 4px !important;

}



.tft-project-credits__profile-info .name {

  font-family: var(--cpf-font-display) !important;

  font-size: 1.35rem !important;

  font-weight: 700 !important;

  color: var(--cpf-color-white) !important;

  letter-spacing: -0.01em !important;

}



.tft-project-credits__profile-info .role {

  font-family: var(--cpf-font-body) !important;

  font-size: 0.85rem !important;

  color: color-mix(in srgb, var(--cpf-color-white) 45%, transparent) !important;

}



.tft-project-credits__specs {

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  gap: 20px !important;

}



.tft-project-credits__spec-item {

  display: flex !important;

  flex-direction: column !important;

  gap: 4px !important;

}



.tft-project-credits__spec-item .label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.1em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 35%, transparent) !important;

}



.tft-project-credits__spec-item .val {

  font-family: var(--cpf-font-body) !important;

  font-size: 0.95rem !important;

  font-weight: 500 !important;

  color: var(--cpf-color-white) !important;

}



/* =============================================

   5. NEXT PROJECT TRANSITION BANNER

   ============================================= */

.tft-project-next {

  position: relative !important;

  block-size: clamp(400px, 60vh, 700px) !important;

  overflow: hidden !important;

  margin: var(--cpf-hero-inset) !important;

  border-radius: var(--cpf-radius-hero) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 10%, transparent) !important;

}



.tft-project-next__link {

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  inline-size: 100% !important;

  block-size: 100% !important;

  padding: var(--cpf-space-xl) !important;

  text-decoration: none !important;

}



.tft-project-next__background {

  position: absolute !important;

  inset: 0 !important;

  background-size: cover !important;

  background-position: center !important;

  transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1) !important;

  z-index: 1 !important;

}



.tft-project-next__overlay {

  position: absolute !important;

  inset: 0 !important;

  background: color-mix(in srgb, var(--cpf-color-dark) 90%, transparent) !important;

  transition: background 0.6s var(--cpf-ease) !important;

  z-index: 2 !important;

}



.tft-project-next__container {

  position: relative !important;

  z-index: 3 !important;

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

  inline-size: 100% !important;

}



.tft-project-next__meta {

  display: flex !important;

  align-items: center !important;

  gap: 15px !important;

  margin-block-end: var(--cpf-space-md) !important;

}



.tft-project-next__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  letter-spacing: 0.15em !important;

  color: var(--cpf-color-accent) !important;

}



.tft-project-next__index {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  color: color-mix(in srgb, var(--cpf-color-white) 35%, transparent) !important;

}



.tft-project-next__title {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(2.5rem, 6vw, 5.5rem) !important;

  font-weight: 700 !important;

  letter-spacing: -0.03em !important;

  line-height: 1.0 !important;

  text-transform: uppercase !important;

  color: var(--cpf-color-white) !important;

  display: flex !important;

  align-items: center !important;

  gap: 15px !important;

  margin-block-end: var(--cpf-space-sm) !important;

  transition: transform 0.4s var(--cpf-ease) !important;

}



.tft-project-next__title .arrow {

  display: inline-block !important;

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



.tft-project-next__desc {

  font-family: var(--cpf-font-body) !important;

  font-size: 1.05rem !important;

  line-height: 1.6 !important;

  max-inline-size: 550px !important;

  color: color-mix(in srgb, var(--cpf-color-white) 50%, transparent) !important;

  transition: color 0.4s var(--cpf-ease) !important;

}



/* Hover active interactions */

.tft-project-next:hover .tft-project-next__background {

  transform: scale(1.05) !important;

}



.tft-project-next:hover .tft-project-next__overlay {

  background: color-mix(in srgb, var(--cpf-color-dark) 75%, transparent) !important;

}



.tft-project-next:hover .tft-project-next__title {

  color: var(--cpf-color-white) !important;

}



.tft-project-next:hover .tft-project-next__title .arrow {

  transform: translateX(12px) !important;

  color: var(--cpf-color-accent) !important;

}



.tft-project-next:hover .tft-project-next__desc {

  color: color-mix(in srgb, var(--cpf-color-white) 80%, transparent) !important;

}



/* =============================================

   6. RESPONSIVE MEDIA QUERIES (320PX PORTABLE)

   ============================================= */

@media (max-width: 991.98px) {

  .tft-project-hero__split {

    grid-template-columns: 1fr !important;

    gap: var(--cpf-space-lg) !important;

  }



  .tft-project-credits__wrap {

    grid-template-columns: 1fr !important;

    padding: 2rem !important;

  }



  .tft-project-credits__profile {

    border-inline-end: none !important;

    padding-inline-end: 0 !important;

    border-block-end: 1px solid color-mix(in srgb, var(--cpf-color-white) 10%, transparent) !important;

    padding-block-end: var(--cpf-space-md) !important;

  }

}



@media (max-width: 767.98px) {

  .tft-project-narrative__concept-row {

    grid-template-columns: 1fr !important;

    gap: var(--cpf-space-md) !important;

  }



  .tft-project-narrative__gallery {

    grid-template-columns: 1fr !important;

    gap: var(--cpf-space-md) !important;

  }



  .tft-project-narrative__photo--left {

    margin-block-end: 0 !important;

  }



  .tft-project-narrative__photo--right {

    margin-block-start: 0 !important;

  }



  .tft-project-flow__split-row {

    grid-template-columns: 1fr !important;

    gap: var(--cpf-space-md) !important;

  }



  .tft-project-next__link {

    padding: var(--cpf-space-lg) !important;

  }

}



@media (max-width: 479.98px) {

  .tft-project-hero__meta-grid {

    grid-template-columns: 1fr !important;

  }

}



/* ==========================================================================

   TFT ARCHITECTURAL CATALOG EDITORIAL EXTRAORDINARY ADDITIONS (2026 SPEC)

   ========================================================================== */



/* Terracotta Editorial Hero Card */

.tft-project-hero__left-terracotta {

  background-color: var(--cpf-color-terracotta) !important;

  border-radius: var(--cpf-radius-lg) !important;

  padding: 3.5rem !important;

  color: var(--cpf-color-white) !important;

  box-shadow: 0 25px 70px rgba(190, 90, 56, 0.25) !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  position: relative !important;

  overflow: hidden !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 15%, transparent) !important;

  transition: all 0.5s var(--cpf-ease) !important;

}



.tft-project-hero__left-terracotta::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background-image: radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--cpf-color-white) 8%, transparent) 0%, transparent 80%) !important;

  pointer-events: none !important;

}



.tft-project-hero__left-terracotta:hover {

  transform: translateY(-5px) !important;

  box-shadow: 0 35px 85px rgba(190, 90, 56, 0.35) !important;

  border-color: color-mix(in srgb, var(--cpf-color-white) 25%, transparent) !important;

}



.tft-project-hero__tag {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.2em !important;

  color: var(--cpf-color-accent) !important;

  text-transform: uppercase !important;

  margin-block-end: var(--cpf-space-sm) !important;

  display: block !important;

}



.tft-project-hero__left-terracotta .tft-project-hero__title {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(3rem, 7vw, 6rem) !important;

  font-weight: 700 !important;

  letter-spacing: -0.05em !important;

  line-height: 0.85 !important;

  color: var(--cpf-color-white) !important;

  margin-block-end: var(--cpf-space-sm) !important;

}



.tft-project-hero__left-terracotta .tft-project-hero__subtitle {

  font-family: var(--cpf-font-body) !important;

  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;

  font-weight: 400 !important;

  line-height: 1.6 !important;

  color: color-mix(in srgb, var(--cpf-color-white) 90%, transparent) !important;

  margin-block-end: var(--cpf-space-lg) !important;

}



.tft-project-hero__left-terracotta .tft-project-hero__meta-grid {

  border-top: 1px dashed color-mix(in srgb, var(--cpf-color-white) 20%, transparent) !important;

  padding-block-start: var(--cpf-space-md) !important;

}



.tft-project-hero__left-terracotta .tft-project-hero__meta-item {

  border-block-end: 1px dashed color-mix(in srgb, var(--cpf-color-white) 15%, transparent) !important;

  padding-block-end: 10px !important;

}



.tft-project-hero__left-terracotta .tft-project-hero__meta-item .label {

  color: var(--cpf-color-accent) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

}



.tft-project-hero__left-terracotta .tft-project-hero__meta-item .val {

  color: var(--cpf-color-white) !important;

  font-weight: 700 !important;

}



/* Double-Outline Architectural Gallery Poster Frame */

.tft-project-gallery-frame {

  position: relative !important;

  padding: 12px !important;

  background: color-mix(in srgb, var(--cpf-color-white) 1%, transparent) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  outline: 1px solid color-mix(in srgb, var(--cpf-color-white) 12%, transparent) !important;

  outline-offset: 6px !important;

  border-radius: var(--cpf-radius-md) !important;

  overflow: hidden !important;

  transition: all 0.5s var(--cpf-ease) !important;

}



.tft-project-gallery-frame:hover {

  outline-color: var(--cpf-color-accent) !important;

  outline-offset: 12px !important;

  background: color-mix(in srgb, var(--cpf-color-white) 2.5%, transparent) !important;

}



.tft-project-gallery-frame img {

  border-radius: calc(var(--cpf-radius-md) - 6px) !important;

  border: none !important;

}



/* Technical Blueprint Workspace Grid */

.tft-project-narrative {

  background-image:

    linear-gradient(color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) 1px, transparent 1px),

    linear-gradient(90deg, color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) 1px, transparent 1px) !important;

  background-size: 50px 50px !important;

  border-block: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

}



/* Polaroid Asymmetric Flow Cards */

.tft-project-flow__card {

  position: relative !important;

  background: color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  padding: 16px !important;

  border-radius: var(--cpf-radius-lg) !important;

  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45) !important;

  transition: all 0.5s var(--cpf-ease) !important;

}



.tft-project-flow__card:hover {

  border-color: var(--cpf-color-accent) !important;

  transform: translateY(-8px) !important;

  box-shadow: 0 25px 60px rgba(235, 203, 52, 0.15) !important;

}



.tft-project-flow__img-wrap {

  border-radius: var(--cpf-radius-md) !important;

  overflow: hidden !important;

}



.tft-project-flow__meta {

  padding-block-start: 16px !important;

}



/* Defined color variable token for terracotta to satisfy variable checks */

:root {

  --cpf-color-terracotta: #be5a38;

}



@media (max-width: 991.98px) {

  .tft-project-hero__left-terracotta {

    padding: 2.25rem !important;

  }

}



/* ==========================================================================

   TFT VERTU-INSPIRED ARCHITECTURAL EDITORIAL BRAND CANVAS (2026 SPEC)

   ========================================================================== */



.tft-vertu-study {

  background-color: var(--cpf-color-dark) !important;

  color: var(--cpf-color-white) !important;

  padding-block-start: calc(var(--cpf-nav-height) + 50px) !important;

  overflow-x: hidden !important;

}



/* 1. Gigantic Centered Typography Block */

.tft-vertu-study__header {

  text-align: center !important;

  padding-block: var(--cpf-space-xl) 3.5rem !important;

  padding-inline: var(--cpf-nav-px) !important;

}



.tft-vertu-study__big-title {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(4.5rem, 16vw, 14rem) !important;

  font-weight: 800 !important;

  line-height: 0.75 !important;

  letter-spacing: -0.05em !important;

  text-transform: uppercase !important;

  color: var(--cpf-color-white) !important;

  margin-block-end: 2rem !important;

}



.tft-vertu-study__big-subtitle {

  font-family: var(--cpf-font-mono) !important;

  font-size: clamp(0.68rem, 1.2vw, 0.8rem) !important;

  letter-spacing: 0.22em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 45%, transparent) !important;

  max-inline-size: 800px !important;

  margin-inline: auto !important;

  line-height: 1.6 !important;

}



/* 2. Full-Width Hero Cover */

.tft-vertu-study__hero-wrap {

  margin-inline: var(--cpf-hero-inset) !important;

  border-radius: var(--cpf-radius-hero) !important;

  overflow: hidden !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  margin-block-end: var(--cpf-space-xl) !important;

}



.tft-vertu-study__hero-media {

  inline-size: 100% !important;

}



.tft-vertu-study__hero-media img {

  inline-size: 100% !important;

  block-size: auto !important;

  display: block !important;

  object-fit: cover !important;

}



/* 3. Two-Column Narrative Row */

.tft-vertu-study__section {

  padding-block: var(--cpf-space-xl) !important;

  margin-inline: var(--cpf-hero-inset) !important;

}



.tft-vertu-study__grid-narrative {

  display: grid !important;

  grid-template-columns: 1fr 1.5fr !important;

  gap: var(--cpf-space-xl) !important;

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

  padding-inline: var(--cpf-nav-px) !important;

}



.tft-vertu-study__stages {

  display: flex !important;

  flex-direction: column !important;

  gap: 24px !important;

}



.tft-vertu-study__stages .stage-item {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  letter-spacing: 0.1em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 40%, transparent) !important;

  border-block-end: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

  padding-block-end: 12px !important;

}



.tft-vertu-study__stages .stage-item.text-accent {

  color: var(--cpf-color-accent) !important;

}



.tft-vertu-study__main-desc {

  font-family: var(--cpf-font-body) !important;

  font-size: clamp(1.2rem, 2.4vw, 1.7rem) !important;

  font-weight: 300 !important;

  line-height: 1.65 !important;

  color: var(--cpf-color-white) !important;

  letter-spacing: -0.01em !important;

}



.tft-vertu-study__main-desc p.story-lead {

  color: color-mix(in srgb, var(--cpf-color-white) 85%, transparent) !important;

}



/* 4. Signature Editorial Accordion & Collage Grid Section */

.tft-vertu-study__section--grid {

  background-image:

    linear-gradient(color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) 1px, transparent 1px),

    linear-gradient(90deg, color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) 1px, transparent 1px) !important;

  background-size: 40px 40px !important;

  border-block: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

  border-radius: var(--cpf-radius-lg) !important;

}



.tft-vertu-study__materials-layout {

  display: grid !important;

  grid-template-columns: 1fr 1.25fr !important;

  gap: var(--cpf-space-xl) !important;

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

  padding-inline: var(--cpf-nav-px) !important;

  align-items: flex-start !important;

}



/* Editorial Accordion */

.tft-project-accordion {

  display: flex !important;

  flex-direction: column !important;

  border-block-start: 1px solid color-mix(in srgb, var(--cpf-color-white) 10%, transparent) !important;

}



.tft-project-accordion__item {

  border-block-end: 1px solid color-mix(in srgb, var(--cpf-color-white) 10%, transparent) !important;

  padding-block: 22px !important;

  transition: all 0.35s var(--cpf-ease) !important;

  outline: none !important;

}



.tft-project-accordion__header {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  cursor: pointer !important;

}



.tft-project-accordion__title {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.85rem !important;

  letter-spacing: 0.15em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 45%, transparent) !important;

  transition: color 0.35s var(--cpf-ease) !important;

}



.tft-project-accordion__item:hover .tft-project-accordion__title,

.tft-project-accordion__item.is-active .tft-project-accordion__title {

  color: var(--cpf-color-white) !important;

}



.tft-project-accordion__toggle-icon {

  inline-size: 14px !important;

  block-size: 14px !important;

  position: relative !important;

}



.tft-project-accordion__toggle-icon::before,

.tft-project-accordion__toggle-icon::after {

  content: "" !important;

  position: absolute !important;

  background-color: color-mix(in srgb, var(--cpf-color-white) 40%, transparent) !important;

  transition: all 0.35s var(--cpf-ease) !important;

}



.tft-project-accordion__toggle-icon::before {

  inline-size: 100% !important;

  block-size: 2px !important;

  inset-block-start: 6px !important;

  inset-inline-start: 0 !important;

}



.tft-project-accordion__toggle-icon::after {

  inline-size: 2px !important;

  block-size: 100% !important;

  inset-block-start: 0 !important;

  inset-inline-start: 6px !important;

}



.tft-project-accordion__item.is-active .tft-project-accordion__toggle-icon::after {

  transform: rotate(90deg) scaleY(0) !important;

}



.tft-project-accordion__item.is-active .tft-project-accordion__toggle-icon::before {

  background-color: var(--cpf-color-accent) !important;

}



.tft-project-accordion__content {

  max-block-size: 0 !important;

  opacity: 0 !important;

  overflow: hidden !important;

  transition: max-block-size 0.4s cubic-bezier(0.25, 1, 0.5, 1),

    opacity 0.4s var(--cpf-ease),

    padding-block-start 0.4s var(--cpf-ease) !important;

  padding-block-start: 0 !important;

}



.tft-project-accordion__item.is-active .tft-project-accordion__content {

  max-block-size: 500px !important;

  opacity: 1 !important;

  padding-block-start: 18px !important;

}



.tft-project-accordion__bullets {

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

  padding-inline-start: 4px !important;

}



.tft-project-accordion__bullets li {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  letter-spacing: 0.05em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 65%, transparent) !important;

  list-style: none !important;

}



/* Collage Grid */

.tft-collage-grid {

  display: flex !important;

  flex-direction: column !important;

  gap: var(--cpf-space-md) !important;

}



.tft-collage-grid__large {

  border-radius: var(--cpf-radius-lg) !important;

  overflow: hidden !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

}



.tft-collage-grid__large img {

  inline-size: 100% !important;

  block-size: auto !important;

  display: block !important;

}



.tft-collage-grid__row {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: var(--cpf-space-md) !important;

}



.tft-collage-grid__small {

  border-radius: var(--cpf-radius-md) !important;

  overflow: hidden !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

}



.tft-collage-grid__small img {

  inline-size: 100% !important;

  block-size: auto !important;

  display: block !important;

}



/* 7. Landscape Context Shot */

.tft-vertu-study__landscape-wrap {

  margin-inline: var(--cpf-hero-inset) !important;

  border-radius: var(--cpf-radius-hero) !important;

  overflow: hidden !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  margin-block: var(--cpf-space-xl) !important;

}



.tft-vertu-study__landscape-media {

  inline-size: 100% !important;

  position: relative !important;

}



.tft-vertu-study__landscape-media img {

  inline-size: 100% !important;

  block-size: auto !important;

  display: block !important;

}



.tft-vertu-study__caption {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.05em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 35%, transparent) !important;

  padding: 18px !important;

  background: color-mix(in srgb, var(--cpf-color-dark) 90%, transparent) !important;

  border-block-start: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

}



/* 8. Detailed Showcase Block */

.tft-vertu-study__details-split {

  display: grid !important;

  grid-template-columns: 1fr 1.2fr !important;

  gap: var(--cpf-space-xl) !important;

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

  padding-inline: var(--cpf-nav-px) !important;

}



.tft-vertu-study__details-right-col {

  display: flex !important;

  flex-direction: column !important;

  gap: var(--cpf-space-md) !important;

}



.tft-vertu-study__details-text {

  display: flex !important;

  flex-direction: column !important;

  gap: 12px !important;

}



.tft-vertu-study__details-text p {

  font-family: var(--cpf-font-body) !important;

  font-size: 1.05rem !important;

  line-height: 1.65 !important;

  color: color-mix(in srgb, var(--cpf-color-white) 65%, transparent) !important;

}



/* 9. Institutional Credit Board */

.tft-vertu-study__credits-block {

  padding-block: var(--cpf-space-xl) !important;

  border-block-start: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  margin-inline: var(--cpf-hero-inset) !important;

}



.tft-vertu-study__credits-container {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: var(--cpf-space-md) !important;

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

  padding-inline: var(--cpf-nav-px) !important;

}



.credit-col {

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

}



.credit-col .label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.15em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 35%, transparent) !important;

}



.credit-col .val {

  font-family: var(--cpf-font-body) !important;

  font-size: 1.05rem !important;

  font-weight: 500 !important;

  color: var(--cpf-color-white) !important;

}



/* 10. Gigantic Next Up Trigger Footer */

.tft-vertu-study__next-section {

  background-color: #0b0b0b !important;

  color: var(--cpf-color-white) !important;

  padding-block: var(--cpf-space-xl) !important;

  margin-inline: var(--cpf-hero-inset) !important;

  border-radius: var(--cpf-radius-hero) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: var(--cpf-space-xl) !important;

  overflow: hidden !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

}



.tft-vertu-study__next-trigger {

  text-decoration: none !important;

  display: block !important;

  text-align: center !important;

}



.tft-vertu-study__next-trigger .title-huge {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(3.5rem, 14vw, 11rem) !important;

  font-weight: 800 !important;

  letter-spacing: -0.05em !important;

  line-height: 0.85 !important;

  color: var(--cpf-color-white) !important;

  text-transform: uppercase !important;

  transition: transform 0.4s var(--cpf-ease) !important;

  display: inline-block !important;

}



.tft-vertu-study__next-trigger:hover .title-huge {

  transform: scale(1.02) !important;

}



.tft-vertu-study__next-trigger .arrow {

  display: inline-block !important;

  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



.tft-vertu-study__next-trigger:hover .arrow {

  transform: translateX(18px) !important;

  color: var(--cpf-color-accent) !important;

}



.tft-vertu-study__next-grid {

  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap: var(--cpf-space-md) !important;

  padding-inline: var(--cpf-nav-px) !important;

  max-inline-size: var(--cpf-nav-max-w) !important;

  margin-inline: auto !important;

}



.tft-next-card {

  position: relative !important;

  border-radius: var(--cpf-radius-md) !important;

  overflow: hidden !important;

  background-color: color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  transition: all 0.4s var(--cpf-ease) !important;

}



.tft-next-card__link {

  text-decoration: none !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 12px !important;

}



.tft-next-card__media {

  overflow: hidden !important;

  aspect-ratio: 16/10 !important;

}



.tft-next-card__media img {

  inline-size: 100% !important;

  block-size: 100% !important;

  object-fit: cover !important;

  transition: transform 0.6s var(--cpf-ease) !important;

}



.tft-next-card__info {

  padding: 0 4px 12px 14px !important;

}



.tft-next-card__info .name {

  font-family: var(--cpf-font-display) !important;

  font-size: 1.15rem !important;

  font-weight: 700 !important;

  color: var(--cpf-color-white) !important;

}



.tft-next-card__info .category {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.05em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 45%, transparent) !important;

  text-transform: uppercase !important;

}



.tft-next-card:hover {

  transform: translateY(-5px) !important;

  border-color: var(--cpf-color-accent) !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;

}



.tft-next-card:hover .tft-next-card__media img {

  transform: scale(1.04) !important;

}



/* ============================================================

   RESPONSIVE SHIELD COLLAPSE OVERRIDES (320PX PORTABLE PARITY)

   ============================================================ */



@media (max-width: 991.98px) {

  .tft-vertu-study__grid-narrative {

    grid-template-columns: 1fr !important;

    gap: var(--cpf-space-md) !important;

  }



  .tft-vertu-study__materials-layout {

    grid-template-columns: 1fr !important;

    gap: var(--cpf-space-lg) !important;

  }



  .tft-vertu-study__details-split {

    grid-template-columns: 1fr !important;

    gap: var(--cpf-space-lg) !important;

  }



  .tft-vertu-study__credits-container {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: var(--cpf-space-md) !important;

  }



  .tft-vertu-study__next-grid {

    grid-template-columns: 1fr !important;

    gap: var(--cpf-space-md) !important;

  }

}



@media (max-width: 575.98px) {

  .tft-vertu-study__credits-container {

    grid-template-columns: 1fr !important;

  }

}





/* ==========================================================================

   TFT CORE EDITORIAL 42% / 58% SPLIT-CANVAS LAYOUT SHIELD (2026 SPEC)

   ========================================================================== */



.tft-project-split {

  display: flex !important;

  min-height: 100vh !important;

  background-color: var(--cpf-color-dark) !important;

  color: var(--cpf-color-white) !important;

  position: relative !important;

}



/* Left Column: 42% Sticky Control Station */

.tft-project-split__left {

  flex: 0 0 42% !important;

  inline-size: 42% !important;

  border-inline-end: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  position: sticky !important;

  inset-block-start: var(--cpf-nav-height) !important;

  block-size: calc(100vh - var(--cpf-nav-height)) !important;

  overflow-y: auto !important;

  padding: 4.5rem 3.5rem !important;

  scrollbar-width: none !important;

  /* Hide scrollbar Firefox */

}



.tft-project-split__left::-webkit-scrollbar {

  display: none !important;

  /* Hide scrollbar Webkit */

}



.tft-project-split__sticky-content {

  display: flex !important;

  flex-direction: column !important;

  gap: 2.5rem !important;

}



/* Right Column: 58% Vertical scrolling showcase */

.tft-project-split__right {

  flex: 0 0 58% !important;

  inline-size: 58% !important;

  padding-block-start: var(--cpf-space-md) !important;

  overflow-x: hidden !important;

}



/* Compass & GPS Telemetry */

.tft-project-split__compass-wrap {

  display: flex !important;

  align-items: center !important;

  gap: 16px !important;

}



.tft-project-split__compass {

  animation: tftRotateCompass 40s linear infinite !important;

  transform-origin: center !important;

}



@keyframes tftRotateCompass {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}



.tft-project-split__gps {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.08em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 45%, transparent) !important;

}



/* Typographic Title wrap */

.tft-project-split__brand-wrap {

  display: flex !important;

  flex-direction: column !important;

  gap: 12px !important;

}



.tft-project-split__badge {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.15em !important;

  color: var(--cpf-color-accent) !important;

  text-transform: uppercase !important;

}



.tft-project-split__title {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(3.5rem, 8vw, 7rem) !important;

  font-weight: 700 !important;

  letter-spacing: -0.05em !important;

  line-height: 0.85 !important;

  text-transform: uppercase !important;

  color: var(--cpf-color-white) !important;

}



.tft-project-split__subtitle {

  font-family: var(--cpf-font-body) !important;

  font-size: clamp(1rem, 1.8vw, 1.2rem) !important;

  font-weight: 300 !important;

  line-height: 1.55 !important;

  color: color-mix(in srgb, var(--cpf-color-white) 65%, transparent) !important;

}



/* Left Spec Telemetry Table */

.tft-project-split__telemetry {

  inline-size: 100% !important;

  border-collapse: collapse !important;

}



.tft-project-split__telemetry td {

  padding-block: 12px !important;

  border-block-end: 1px dashed color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  font-family: var(--cpf-font-body) !important;

  font-size: 0.78rem !important;

  color: color-mix(in srgb, var(--cpf-color-white) 45%, transparent) !important;

}



.tft-project-split__telemetry td:last-child {

  text-align: end !important;

  color: var(--cpf-color-white) !important;

  font-weight: 600 !important;

}



.tft-project-split__telemetry .monospace {

  font-family: var(--cpf-font-mono) !important;

}



.tft-project-split__telemetry .text-accent {

  color: var(--cpf-color-accent) !important;

}



/* Status Indicator Dot pulsing */

.tft-project-split__telemetry .status-locked {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  color: var(--cpf-color-accent) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.05em !important;

}



.tft-project-split__telemetry .status-locked .dot {

  inline-size: 6px !important;

  block-size: 6px !important;

  background-color: var(--cpf-color-accent) !important;

  border-radius: 50% !important;

  box-shadow: 0 0 10px var(--cpf-color-accent) !important;

  animation: tftStatusPulse 1.5s ease-in-out infinite !important;

}



@keyframes tftStatusPulse {



  0%,

  100% {

    transform: scale(0.8);

    opacity: 0.5;

  }



  50% {

    transform: scale(1.2);

    opacity: 1;

  }

}



/* ============================================================

   INTERACTIVE MATERIAL PALETTE SYSTEM

   ============================================================ */

.tft-material-board {

  background: color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

  padding: 2.25rem !important;

  border-radius: var(--cpf-radius-lg) !important;

  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--cpf-color-white) 5%, transparent) !important;

}



.tft-material-board__title {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.12em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 35%, transparent) !important;

  margin-block-end: 1.5rem !important;

}



.tft-material-board__list {

  display: flex !important;

  flex-direction: column !important;

  gap: 2px !important;

}



.tft-material-board__item {

  display: flex !important;

  align-items: center !important;

  gap: 14px !important;

  padding-block: 14px !important;

  border-block-end: 1px solid color-mix(in srgb, var(--cpf-color-white) 5%, transparent) !important;

  cursor: pointer !important;

  transition: all 0.35s var(--cpf-ease) !important;

}



.tft-material-board__item:last-child {

  border-block-end: none !important;

}



.tft-material-board__item:hover {

  transform: translateX(8px) !important;

}



.tft-material-board__swatch {

  inline-size: 26px !important;

  block-size: 26px !important;

  border-radius: 6px !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 15%, transparent) !important;

  transition: transform 0.4s var(--cpf-ease) !important;

}



.tft-material-board__item:hover .tft-material-board__swatch {

  transform: scale(1.18) rotate(-4deg) !important;

}



.tft-material-board__info {

  display: flex !important;

  flex-direction: column !important;

  flex-grow: 1 !important;

}



.tft-material-board__info .code {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.62rem !important;

  color: var(--cpf-color-accent) !important;

}



.tft-material-board__info .name {

  font-family: var(--cpf-font-body) !important;

  font-size: 0.85rem !important;

  font-weight: 500 !important;

  color: color-mix(in srgb, var(--cpf-color-white) 75%, transparent) !important;

}



.tft-material-board__hotlink {

  font-size: 0.9rem !important;

  color: color-mix(in srgb, var(--cpf-color-white) 20%, transparent) !important;

  transition: transform 0.3s var(--cpf-ease), color 0.3s var(--cpf-ease) !important;

}



.tft-material-board__item:hover .tft-material-board__hotlink {

  color: var(--cpf-color-accent) !important;

  transform: translateX(4px) !important;

}



/* ============================================================

   HIGH-FIDELITY INTERACTIVE HOTSPOT IMAGING SYSTEM

   ============================================================ */

.tft-hotspot-container {

  position: relative !important;

  overflow: hidden !important;

  border-radius: var(--cpf-radius-lg) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

}



.tft-hotspot-container__img {

  inline-size: 100% !important;

  block-size: auto !important;

  display: block !important;

  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



.tft-hotspot-container:hover .tft-hotspot-container__img {

  transform: scale(1.015) !important;

}



.tft-hotspot-container__caption {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.05em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 35%, transparent) !important;

  margin-block-start: 12px !important;

  padding-inline-start: 4px !important;

}



/* Pulse trigger circle styling */

.tft-hotspot {

  position: absolute !important;

  z-index: var(--cpf-z-nav) !important;

}



.tft-hotspot__trigger {

  inline-size: 20px !important;

  block-size: 20px !important;

  background-color: var(--cpf-color-accent) !important;

  border: 4px solid var(--cpf-color-dark) !important;

  border-radius: 50% !important;

  cursor: pointer !important;

  box-shadow: 0 0 15px var(--cpf-color-accent) !important;

  position: relative !important;

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



.tft-hotspot__trigger::after {

  content: "" !important;

  position: absolute !important;

  inset: -12px !important;

  border: 2px solid var(--cpf-color-accent) !important;

  border-radius: 50% !important;

  opacity: 0 !important;

  animation: tftHotspotPulse 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite !important;

}



@keyframes tftHotspotPulse {

  0% {

    transform: scale(0.5);

    opacity: 0;

  }



  50% {

    opacity: 0.6;

  }



  100% {

    transform: scale(1.5);

    opacity: 0;

  }

}



.tft-hotspot:hover .tft-hotspot__trigger {

  transform: scale(1.25) !important;

  background-color: var(--cpf-color-white) !important;

}



/* Glassmorphic tooltips overlaying on hover */

.tft-hotspot__tooltip {

  position: absolute !important;

  inset-block-end: 32px !important;

  inset-inline-start: 50% !important;

  transform: translateX(-50%) translateY(12px) !important;

  inline-size: 280px !important;

  padding: 1.35rem !important;

  background: color-mix(in srgb, var(--cpf-color-dark) 90%, transparent) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 15%, transparent) !important;

  border-radius: var(--cpf-radius-md) !important;

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7) !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;

  pointer-events: none !important;

}



.tft-hotspot:hover .tft-hotspot__tooltip {

  opacity: 1 !important;

  visibility: visible !important;

  transform: translateX(-50%) translateY(0) !important;

}



.tft-hotspot__code {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.62rem !important;

  letter-spacing: 0.1em !important;

  color: var(--cpf-color-accent) !important;

  margin-block-end: 6px !important;

  display: block !important;

}



.tft-hotspot__title {

  font-family: var(--cpf-font-display) !important;

  font-size: 0.95rem !important;

  font-weight: 700 !important;

  color: var(--cpf-color-white) !important;

  margin-block-end: 6px !important;

}



.tft-hotspot__desc {

  font-family: var(--cpf-font-body) !important;

  font-size: 0.78rem !important;

  line-height: 1.45 !important;

  color: color-mix(in srgb, var(--cpf-color-white) 65%, transparent) !important;

}



/* ============================================================

   BLUEPRINT GALLERY & SECTION SYSTEM

   ============================================================ */

.tft-project-split__section {

  padding-block: var(--cpf-space-xl) !important;

  padding-inline: var(--cpf-nav-px) !important;

  border-block-end: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

}



.tft-project-split__section--blueprint {

  background-image:

    linear-gradient(color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) 1px, transparent 1px),

    linear-gradient(90deg, color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) 1px, transparent 1px) !important;

  background-size: 40px 40px !important;

}



.tft-project-split__container-inner {

  max-inline-size: 900px !important;

  margin-inline: auto !important;

}



.tft-project-split__lead-wrap {

  display: flex !important;

  flex-direction: column !important;

  gap: 12px !important;

  margin-block-end: 2rem !important;

}



.tft-project-split__num {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  letter-spacing: 0.15em !important;

  color: var(--cpf-color-accent) !important;

}



.tft-project-split__heading {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(2rem, 4vw, 3.25rem) !important;

  font-weight: 700 !important;

  letter-spacing: -0.04em !important;

  line-height: 1.0 !important;

  color: var(--cpf-color-white) !important;

  text-transform: uppercase !important;

}



.tft-project-split__lead {

  font-family: var(--cpf-font-body) !important;

  font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important;

  font-weight: 400 !important;

  line-height: 1.6 !important;

  color: var(--cpf-color-white) !important;

}



.tft-project-split__body-grid {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: var(--cpf-space-md) !important;

  margin-block-end: var(--cpf-space-xl) !important;

}



.tft-project-split__body-grid p {

  font-family: var(--cpf-font-body) !important;

  font-size: 1rem !important;

  line-height: 1.65 !important;

  color: color-mix(in srgb, var(--cpf-color-white) 65%, transparent) !important;

}



.tft-project-split__gallery-double {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: var(--cpf-space-md) !important;

}



.tft-project-split__caption-small {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.68rem !important;

  color: color-mix(in srgb, var(--cpf-color-white) 40%, transparent) !important;

  margin-block-start: 12px !important;

}



/* Polaroid Collage Asymmetry offsets */

.tft-project-flow__grid-asym {

  display: flex !important;

  flex-direction: column !important;

  gap: var(--cpf-space-lg) !important;

}



.tft-project-flow__split-row-asym {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: var(--cpf-space-md) !important;

}



/* ============================================================

   MONOSPACE BLUEPRINT COMPARISON TABLE

   ============================================================ */

.tft-spec-table {

  inline-size: 100% !important;

  border-collapse: collapse !important;

  margin-block: 3.5rem !important;

}



.tft-spec-table th {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.72rem !important;

  letter-spacing: 0.1em !important;

  color: color-mix(in srgb, var(--cpf-color-white) 40%, transparent) !important;

  border-block-end: 2px solid color-mix(in srgb, var(--cpf-color-white) 15%, transparent) !important;

  padding: 14px !important;

  text-align: start !important;

}



.tft-spec-table td {

  padding: 18px 14px !important;

  border-block-end: 1px solid color-mix(in srgb, var(--cpf-color-white) 6%, transparent) !important;

  font-family: var(--cpf-font-body) !important;

  font-size: 0.9rem !important;

  color: color-mix(in srgb, var(--cpf-color-white) 80%, transparent) !important;

}



.tft-spec-table .monospace {

  font-family: var(--cpf-font-mono) !important;

}



.tft-spec-table .text-accent {

  color: var(--cpf-color-accent) !important;

  font-weight: 500 !important;

}



/* Credits block inside scroll grid */

.tft-project-credits__split-row {

  display: grid !important;

  grid-template-columns: 1fr 1.5fr !important;

  gap: var(--cpf-space-md) !important;

  background: color-mix(in srgb, var(--cpf-color-white) 1.5%, transparent) !important;

  border: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

  padding: 2.5rem !important;

  border-radius: var(--cpf-radius-lg) !important;

  margin-block-start: 4rem !important;

}



/* ============================================================

   RESPONSIVE SHIELD AND COLLAPSE (320PX SYSTEM PARITY)

   ============================================================ */



@media (max-width: 991.98px) {

  .tft-project-split {

    flex-direction: column !important;

  }



  .tft-project-split__left {

    flex: 0 0 100% !important;

    inline-size: 100% !important;

    position: relative !important;

    inset-block-start: 0 !important;

    block-size: auto !important;

    border-inline-end: none !important;

    border-block-end: 1px solid color-mix(in srgb, var(--cpf-color-white) 8%, transparent) !important;

    padding: 3rem 2rem !important;

    overflow-y: visible !important;

  }



  .tft-project-split__right {

    flex: 0 0 100% !important;

    inline-size: 100% !important;

    padding-block-start: 0 !important;

  }



  .tft-project-split__section {

    padding-inline: 1.5rem !important;

    padding-block: var(--cpf-space-lg) !important;

  }



  .tft-project-split__body-grid {

    grid-template-columns: 1fr !important;

    gap: 1rem !important;

  }



  .tft-project-split__gallery-double {

    grid-template-columns: 1fr !important;

    gap: 1.5rem !important;

  }



  .tft-project-flow__split-row-asym {

    grid-template-columns: 1fr !important;

    gap: 1.5rem !important;

  }



  .tft-project-credits__split-row {

    grid-template-columns: 1fr !important;

    gap: 1.5rem !important;

    padding: 2rem 1.5rem !important;

  }



  .tft-spec-table {

    display: block !important;

    overflow-x: auto !important;

    white-space: nowrap !important;

  }

}



/* ============================================================

   TFT WEBGL & SVG DISPLACEMENT HOVER ENGINE STYLES

   ============================================================ */

.tft-webgl-wrapper {

  position: relative !important;

  overflow: hidden !important;

}



.tft-webgl-canvas {

  position: absolute !important;

  inset-block-start: 0 !important;

  inset-inline-start: 0 !important;

  inline-size: 100% !important;

  block-size: 100% !important;

  pointer-events: none !important;

  z-index: 5 !important;

  opacity: 0 !important;

  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



.tft-webgl-canvas.is-visible {

  opacity: 1 !important;

}



/* Class to fade out the static image when WebGL is active */

.tft-webgl-active img {

  opacity: 0 !important;

  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



/* Fallback transitions */

.tft-svg-displaced {

  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



/* Master Slider displacement styling */

.tft-slider-displaced {

  will-change: filter !important;

  transform: translate3d(0, 0, 0) !important;

}



.tft-svg-displaced {

  will-change: filter !important;

}



/* Neutralize normal CSS wobbly/blurry/grayscale hovers on portfolio cards to allow clean WebGL ripple & zoom */

.tft-portfolio__card:hover .tft-portfolio__card-img {

  filter: none !important;

  transform: none !important;

}



/* Fallback & WebGL image wrapper transitions */

.tft-img-displacement-wrap {

  will-change: filter, transform !important;

  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) !important;

}



/* Add zoom factor in fallback (non-WebGL) mode to match the WebGL hover shader zoom */

.tft-portfolio__card:hover .tft-img-displacement-wrap {

  transform: scale(1.05) !important;

}



/* Neutralize normal CSS hovers on strategic foundation card to allow clean WebGL ripple & zoom */

.cpf-foundation__card--media:hover .cpf-foundation__img {

  transform: none !important;

}



.cpf-foundation__card--media:hover .tft-img-displacement-wrap {

  transform: scale(1.05) !important;

}













/* ============================================================

   CPF INVESTMENT — PREMIUM INTERACTIVE HOVER SYSTEM

   ============================================================ */



/* Card base — will-change primes GPU layer */

.cpf-investment__card {

  will-change: transform, box-shadow;

  transform-style: preserve-3d;

  perspective: 1000px;

  overflow: hidden;

}



/* Shimmer sweep overlay (pseudo-element on each card) */

.cpf-investment__card::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(120deg,

      transparent 0%,

      transparent 30%,

      rgba(255, 255, 255, 0.035) 50%,

      transparent 70%,

      transparent 100%);

  background-size: 300% 100%;

  background-position: 200% 0;

  border-radius: inherit;

  pointer-events: none;

  z-index: 1;

  transition: background-position 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;

  opacity: 0;

}



.cpf-investment__card:hover::before {

  background-position: -50% 0;

  opacity: 1;

}



/* Glowing border trace on hover */

.cpf-investment__card::after {

  content: '';

  position: absolute;

  inset: -1px;

  border-radius: inherit;

  background: conic-gradient(from var(--cpf-inv-angle, 0deg),

      transparent 0deg,

      var(--cpf-color-accent, var(--cpf-color-accent)) 60deg,

      transparent 120deg);

  opacity: 0;

  z-index: 0;

  transition: opacity 0.5s ease;

  pointer-events: none;

  animation: tft-invest-border-spin 3s linear infinite paused;

}



.cpf-investment__card:hover::after {

  opacity: 0.25;

  animation-play-state: running;

}



@property --cpf-inv-angle {

  syntax: '<angle>';

  inherits: false;

  initial-value: 0deg;

}



@keyframes tft-invest-border-spin {

  to {

    --cpf-inv-angle: 360deg;

  }

}



/* Card lift + subtle tilt (JS fills in transform, CSS handles transition) */

.cpf-investment__card {

  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),

    box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1),

    border-color 0.4s ease !important;

}



.cpf-investment__card:hover {

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5),

    0 0 40px rgba(232, 185, 35, 0.06) !important;

  border-color: rgba(232, 185, 35, 0.25) !important;

}



.cpf-investment__card--featured:hover {

  border-color: rgba(232, 185, 35, 0.7) !important;

  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6),

    0 0 60px rgba(232, 185, 35, 0.12) !important;

}



/* Feature list items — staggered slide-in on card hover */

.cpf-investment__card .cpf-investment__features li {

  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;

  transform: translateX(0);

  opacity: 0.8;

}



.cpf-investment__card:hover .cpf-investment__features li:nth-child(1) {

  transform: translateX(5px);

  opacity: 1;

  transition-delay: 0.00s;

}



.cpf-investment__card:hover .cpf-investment__features li:nth-child(2) {

  transform: translateX(5px);

  opacity: 1;

  transition-delay: 0.05s;

}



.cpf-investment__card:hover .cpf-investment__features li:nth-child(3) {

  transform: translateX(5px);

  opacity: 1;

  transition-delay: 0.10s;

}



.cpf-investment__card:hover .cpf-investment__features li:nth-child(4) {

  transform: translateX(5px);

  opacity: 1;

  transition-delay: 0.15s;

}



/* Price amount — subtle scale pulse on hover */

.cpf-investment__price .amount {

  display: inline-block;

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease;

}



.cpf-investment__card:hover .cpf-investment__price .amount {

  transform: scale(1.06) translateY(-2px);

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Liquid-fill effect on CTA buttons (override existing) */

.cpf-investment__btn,

.cpf-investment__btn--outline {

  position: relative !important;

  overflow: hidden !important;

  z-index: 2;

}



.cpf-investment__btn .tft-inv-fill,

.cpf-investment__btn--outline .tft-inv-fill {

  position: absolute;

  inset: 0;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  transform: scaleX(0);

  transform-origin: left center;

  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);

  z-index: -1;

  border-radius: inherit;

}



.cpf-investment__btn:hover .tft-inv-fill,

.cpf-investment__btn--outline:hover .tft-inv-fill {

  transform: scaleX(1);

}



.cpf-investment__btn:hover,

.cpf-investment__btn--outline:hover {

  color: #000 !important;

  transform: translateY(-3px) !important;

}



/* Gold button gets a white-fill on hover instead */

.cpf-investment__btn--gold .tft-inv-fill {

  background: rgba(255, 255, 255, 0.15);

}



.cpf-investment__btn--gold:hover {

  color: #000 !important;

}



/* Partner card warm glow pulse */

.cpf-investment__card--partner {

  transition: border-color 0.4s ease, background 0.5s ease, box-shadow 0.4s ease !important;

}



.cpf-investment__card--partner:hover {

  background: rgba(232, 185, 35, 0.06) !important;

  border-color: rgba(232, 185, 35, 0.3) !important;

  box-shadow: 0 20px 60px rgba(232, 185, 35, 0.08) !important;

}



/* Cursor: expand to ring on hovering any card */

.cpf-investment__card:hover~.tft-sld-cursor,

.cpf-investment:hover .tft-sld-cursor {

  width: 52px !important;

  height: 52px !important;

}





/* ============================================================

   CPF INVESTMENT — CLEAN CSS-ONLY HOVER RESET

   Removes conic spin, shimmer. Pure transitions only.

   ============================================================ */



/* Kill spinning conic border trace & shimmer sweep */

.cpf-investment__card::after {

  content: none !important;

  display: none !important;

}



.cpf-investment__card::before {

  content: none !important;

  display: none !important;

}



/* Kill @property animation — no WebGL, no canvas, no conic */

.cpf-investment__card {

  will-change: transform !important;

  transform-style: flat !important;

  perspective: none !important;

  overflow: visible !important;

}



/* ---- CLEAN CARD HOVER ---- */

/* Default card: lift + accent border */

.cpf-investment__card:hover {

  transform: translateY(-8px) !important;

  border-color: rgba(232, 185, 35, 0.35) !important;

  background: rgba(255, 255, 255, 0.04) !important;

  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),

    0 0 0 1px rgba(232, 185, 35, 0.15) !important;

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),

    border-color 0.4s ease,

    background 0.4s ease,

    box-shadow 0.4s ease !important;

}



/* Featured card: preserve scale(1.05) + lift more */

.cpf-investment__card--featured:hover {

  transform: scale(1.05) translateY(-10px) !important;

  border-color: rgba(232, 185, 35, 0.65) !important;

  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55),

    0 0 0 1px rgba(232, 185, 35, 0.3),

    0 0 50px rgba(232, 185, 35, 0.08) !important;

}



/* Partner card */

.cpf-investment__card--partner:hover {

  transform: translateY(-6px) !important;

  background: rgba(232, 185, 35, 0.06) !important;

  border-color: rgba(232, 185, 35, 0.28) !important;

  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35) !important;

  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



/* Card base transition (no will-change filter, no 3D tilt) */

.cpf-investment__card {

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),

    border-color 0.4s ease,

    background 0.4s ease,

    box-shadow 0.4s ease !important;

}



/* ---- FEATURE LIST: simple opacity + slide ---- */

.cpf-investment__features li {

  transition: color 0.3s ease, transform 0.3s ease;

}



.cpf-investment__card:hover .cpf-investment__features li {

  color: rgba(255, 255, 255, 1) !important;

}



.cpf-investment__card:hover .cpf-investment__features li:nth-child(1) {

  transition-delay: 0.00s;

}



.cpf-investment__card:hover .cpf-investment__features li:nth-child(2) {

  transition-delay: 0.04s;

}



.cpf-investment__card:hover .cpf-investment__features li:nth-child(3) {

  transition-delay: 0.08s;

}



.cpf-investment__card:hover .cpf-investment__features li:nth-child(4) {

  transition-delay: 0.12s;

}



/* ---- PRICE AMOUNT: subtle accent on hover ---- */

.cpf-investment__price .amount {

  display: inline-block;

  transition: color 0.35s ease, transform 0.35s ease;

}



.cpf-investment__card:hover .cpf-investment__price .amount {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  transform: translateY(-2px);

}



/* ---- BUTTONS: clean solid-state wipe fill ---- */

.cpf-investment__btn,

.cpf-investment__btn--outline {

  position: relative !important;

  overflow: hidden !important;

  z-index: 1;

  transition: color 0.35s ease,

    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),

    box-shadow 0.35s ease !important;

}



.cpf-investment__btn .tft-inv-fill,

.cpf-investment__btn--outline .tft-inv-fill {

  position: absolute !important;

  inset: 0 !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transform: scaleX(0) !important;

  transform-origin: left center !important;

  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1) !important;

  z-index: -1 !important;

  border-radius: inherit !important;

}



.cpf-investment__btn:hover .tft-inv-fill,

.cpf-investment__btn--outline:hover .tft-inv-fill {

  transform: scaleX(1) !important;

}



.cpf-investment__btn:hover {

  color: #000 !important;

  transform: translateY(-3px) !important;

  box-shadow: 0 12px 32px rgba(232, 185, 35, 0.3) !important;

}



.cpf-investment__btn--outline:hover {

  color: #000 !important;

  transform: translateY(-3px) !important;

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  box-shadow: 0 12px 32px rgba(232, 185, 35, 0.2) !important;

}



/* Gold button: white fill wipe instead */

.cpf-investment__btn--gold .tft-inv-fill {

  background: rgba(255, 255, 255, 0.18) !important;

}



.cpf-investment__btn--gold:hover {

  color: #000 !important;

  box-shadow: 0 12px 40px rgba(232, 185, 35, 0.45) !important;

}





/* ============================================================

   GLOBAL SMOOTH SCROLL — all pages via shared stylesheet

   ============================================================ */

html {

  scroll-behavior: smooth;

  scroll-padding-block-start: 90px;

  /* Clears sticky nav on anchor jump */

}



/* Respect reduced-motion preference */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }

}



/* =================================================================

   ZYLYF — AURORA PULSE ENGINE (index-4.html)

   ================================================================= */

:root {

  --cpf-color-accent: #E8B923;

}



.tft-aurora-page {

  background: var(--cpf-color-page-bg);

  overflow: hidden;

  height: 100vh;

  margin: 0;

  padding: 0;

}



.tft-aurora {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background: var(--cpf-color-page-bg);

  overflow: hidden;

  z-index: 0;

}



.tft-aurora__snakes {

  position: absolute;

  inset: 0;

  z-index: 10;

  pointer-events: none;

  opacity: .45;

}



.tft-aurora__path {

  transition: d 1.4s cubic-bezier(1, 0, 0, 1), stroke-dashoffset .1s linear, filter .8s ease;

  stroke-dasharray: 4000;

  stroke-dashoffset: 4000;

  filter: drop-shadow(0 0 12px var(--cpf-color-accent));

  will-change: d, filter;

}



.tft-aurora__path.is-glitching {

  filter: blur(35px) brightness(2.5) contrast(150%);

  transform: scale(1.1) translate(15px, -10px);

  opacity: .6;

}



.tft-aurora__slider {

  position: absolute;

  inset: 0;

}



.tft-aurora__slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  transition: all 1.4s cubic-bezier(0.19, 1, 0.22, 1);

  transform: translateX(10%);

  filter: blur(5px);

}



.tft-aurora__slide.is-active {

  opacity: 1;

  visibility: visible;

  transform: translateX(0);

  filter: blur(0);

  z-index: 20;

}



.tft-aurora__slide.is-exiting {

  opacity: 0;

  visibility: hidden;

  transform: translateX(-10%);

  filter: blur(10px);

  z-index: 10;

  transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);

}



.tft-aurora__bg {

  position: absolute;

  inset: 0;

  overflow: hidden;

}



.tft-aurora__bg img {

  width: 100%;

  height: 100% !important;

  object-fit: cover;

  opacity: .45;

  filter: grayscale(1);

  display: block;

  transform: scale(1.05);

  transition: transform 2.5s cubic-bezier(0.19, 1, 0.22, 1);

}



.tft-aurora__bg-grad {

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom, var(--cpf-color-page-bg) 0%, transparent 35%, transparent 65%, var(--cpf-color-page-bg) 100%);

}



.tft-aurora__slide.is-active .tft-aurora__bg img {

  animation: tft-kenburns 20s infinite alternate ease-in-out;

}



@keyframes tft-kenburns {

  from {

    transform: scale(1.05) translate(0, 0);

  }



  to {

    transform: scale(1.2) translate(-2%, -2%);

  }

}



.tft-aurora__overlay {

  position: absolute;

  inset: 0;

  background: rgba(10, 10, 10, 0);

  backdrop-filter: blur(0);

  transition: all .8s cubic-bezier(1, 0, 0, 1);

  pointer-events: none;

  z-index: 45;

}



.tft-aurora--transitioning .tft-aurora__overlay {

  background: rgba(10, 10, 10, .8);

  backdrop-filter: blur(30px);

  pointer-events: auto;

}



.tft-aurora__content {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: clamp(1rem, 4vw, 4rem);

  text-align: center;

  z-index: 30;

}



.tft-aurora__meta {

  font-family: var(--cpf-font-mono);

  font-size: clamp(.6rem, 1vw, .8rem);

  letter-spacing: .5em;

  text-transform: uppercase;

  color: var(--cpf-color-accent);

  display: block;

  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);

  opacity: 0;

  transform: translateY(20px);

  transition: opacity .8s ease .3s, transform .8s ease .3s;

}



.tft-aurora__slide.is-active .tft-aurora__meta {

  opacity: 1;

  transform: translateY(0);

}



.tft-aurora__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3.5rem, 13vw, 14rem);

  font-weight: 900;

  line-height: .8;

  letter-spacing: -.05em;

  text-transform: uppercase;

  color: var(--cpf-color-white);

  opacity: 0;

  transform: translateY(120px) skewY(12deg);

  transition: opacity 1.4s cubic-bezier(.19, 1, .22, 1) .6s, transform 1.4s cubic-bezier(.19, 1, .22, 1) .6s;

}



.tft-aurora__slide.is-active .tft-aurora__title {

  opacity: 1;

  transform: translateY(0) skewY(0);

}



.tft-aurora__title em {

  display: block;

  font-style: italic;

  font-weight: 300;

  color: var(--cpf-color-accent);

  font-size: clamp(4rem, 15vw, 16rem);

  line-height: .78;

}



.tft-aurora__hud {

  position: absolute;

  bottom: clamp(1.5rem, 4vh, 3rem);

  left: 50%;

  transform: translateX(-50%);

  z-index: 50;

  display: flex;

  align-items: center;

  gap: clamp(.75rem, 2vw, 3rem);

  pointer-events: auto;

}



.tft-aurora__nav-btn {

  position: relative;

  width: clamp(44px, 4.5vw, 60px);

  height: clamp(44px, 4.5vw, 60px);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  background: rgba(255, 255, 255, .04);

  backdrop-filter: blur(12px);

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

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, .1);

  transition: all .4s ease;

  color: var(--cpf-color-white);

}



.tft-aurora__nav-btn:hover {

  background: rgba(232, 185, 35, .12);

  border-color: var(--cpf-color-accent);

  transform: scale(1.06);

  color: var(--cpf-color-accent);

}



.tft-aurora__nav-btn svg {

  width: 20px;

  height: 20px;

  stroke: currentColor;

  stroke-width: 1.5;

  fill: none;

  stroke-linecap: round;

  stroke-linejoin: round;

  pointer-events: none;

}



.tft-aurora__prog-wrap {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.tft-aurora__count {

  font-family: var(--cpf-font-display);

  font-size: 1.2rem;

  line-height: 1;

}



.tft-aurora__count--cur {

  color: var(--cpf-color-accent);

}



.tft-aurora__count--tot {

  opacity: .2;

}



.tft-aurora__prog-bar {

  width: clamp(60px, 7vw, 128px);

  height: 1px;

  background: rgba(255, 255, 255, .1);

  position: relative;

  overflow: hidden;

}



.tft-aurora__prog-fill {

  position: absolute;

  inset-block-start: 0;

  inset-inline-start: 0;

  height: 100%;

  background: var(--cpf-color-accent);

  width: 25%;

  transition: width .7s ease;

}



/* =================================================================

   ZYLYF — PROJECT DETAIL PAGE (work-single.html redesign)

   ================================================================= */

.tft-pd-page {

  background: var(--cpf-color-page-bg);

  color: var(--cpf-color-white);

}



.tft-pd-hero {

  position: relative;

  height: 100dvh;

  overflow: hidden;

}



.tft-pd-hero__bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transform: scale(1.08);

  transition: transform .1s linear;

}



.tft-pd-hero__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom, rgba(10, 10, 10, .3) 0%, rgba(10, 10, 10, .96) 100%);

}



.tft-pd-hero__hud {

  position: absolute;

  top: 5vh;

  inset-inline-start: 0;

  width: 100%;

  z-index: 20;

  padding-inline: 5vw;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.tft-pd-hero__hud-path {

  flex: 1;

  height: 1px;

  background: repeating-linear-gradient(90deg, rgba(232, 185, 35, .25) 0, rgba(232, 185, 35, .25) 4px, transparent 4px, transparent 8px);

  margin-inline: 2rem;

  opacity: .4;

}



.tft-pd-hero__hud-node {

  font-family: var(--cpf-font-mono);

  font-size: .6rem;

  letter-spacing: .4em;

  text-transform: uppercase;

  color: var(--cpf-color-accent);

}



.tft-pd-hero__scanline {

  position: absolute;

  inset-block-start: 0;

  inset-inline-start: 0;

  width: 100%;

  height: 15vh;

  background: linear-gradient(to bottom, transparent, rgba(232, 185, 35, .05), transparent);

  z-index: 5;

  pointer-events: none;

  animation: tft-pdscan 8s linear infinite;

}



@keyframes tft-pdscan {

  0% {

    transform: translateY(-100vh);

  }



  100% {

    transform: translateY(100vh);

  }

}



.tft-pd-hero__body {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding-inline: clamp(1rem, 6vw, 6rem);

  text-align: center;

  padding-block-start: 8rem;

  z-index: 10;

}



.tft-pd-title-sup {

  font-family: var(--cpf-font-display);

  font-style: italic;

  font-size: clamp(1.5rem, 5vw, 4.5rem);

  color: var(--cpf-color-accent);

  margin-block-end: -1.2rem;

  display: block;

  line-height: 1;

  letter-spacing: .05em;

}



.tft-pd-title-main {

  font-family: var(--cpf-font-display);

  font-size: clamp(4rem, 18vw, 16rem);

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: -.06em;

  line-height: .82;

  color: var(--cpf-color-white);

}



.tft-pd-hero__cta {

  margin-block-start: clamp(2rem, 5vh, 4rem);

  display: inline-flex;

  align-items: center;

  gap: 1.5rem;

  padding-block: 1.2rem;

  padding-inline: 3rem;

  background: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  font-family: var(--cpf-font-body);

  font-size: .65rem;

  font-weight: 700;

  letter-spacing: .4em;

  text-transform: uppercase;

  text-decoration: none;

  transition: all .7s ease;

}



.tft-pd-hero__cta:hover {

  background: var(--cpf-color-white);

  color: var(--cpf-color-dark);

  transform: translateY(-2px);

}



.tft-pd-scroll-hint {

  position: absolute;

  bottom: 3rem;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

  z-index: 10;

}



.tft-pd-scroll-hint span {

  font-family: var(--cpf-font-mono);

  font-size: .6rem;

  letter-spacing: .4em;

  text-transform: uppercase;

  opacity: .4;

}



.tft-pd-scroll-hint__line {

  width: 1px;

  height: 4rem;

  background: rgba(255, 255, 255, .15);

  position: relative;

  overflow: hidden;

}



.tft-pd-scroll-hint__dot {

  position: absolute;

  inset-block-start: 0;

  inset-inline-start: 0;

  width: 100%;

  height: 40%;

  background: var(--cpf-color-accent);

  animation: tft-scrolldot 2s ease-in-out infinite;

}



@keyframes tft-scrolldot {

  0% {

    transform: translateY(-100%);

  }



  100% {

    transform: translateY(250%);

  }

}



.tft-pd-section {

  padding-block: clamp(4rem, 8vh, 8rem);

  padding-inline: clamp(1rem, 6vw, 6rem);

  max-width: 1400px;

  margin-inline: auto;

}



.tft-pd-brief__label {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  margin-block-end: 2rem;

}



.tft-pd-brief__line {

  width: 3rem;

  height: 1px;

  background: var(--cpf-color-accent);

  flex-shrink: 0;

}



.tft-pd-brief__tag {

  font-family: var(--cpf-font-mono);

  font-size: .65rem;

  color: var(--cpf-color-accent);

  letter-spacing: .2em;

  text-transform: uppercase;

}



.tft-pd-brief__headline,

.tft-pd-brief__content h2,

.tft-pd-brief__content h3 {

  font-family: var(--cpf-font-display);

  font-size: clamp(1.5rem, 3.5vw, 2.8rem);

  font-weight: 700;

  line-height: 1.2;

  margin-block-end: 2rem;

  color: var(--cpf-color-white);

  max-width: 900px;

}



.tft-pd-brief__body,

.tft-pd-brief__content p {

  font-family: var(--cpf-font-body);

  font-size: clamp(.95rem, 1.4vw, 1.3rem);

  color: rgba(255, 255, 255, .6);

  line-height: 1.8;

  font-weight: 300;

  max-width: 800px;

}



.tft-pd-brief__body strong {

  color: var(--cpf-color-white);

  font-weight: 500;

}



.tft-pd-gallery {

  padding-block-end: clamp(4rem, 8vh, 8rem);

  padding-inline: clamp(1rem, 6vw, 6rem);

  max-width: 1500px;

  margin-inline: auto;

}



.tft-pd-gallery__grid {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: clamp(1rem, 1.5vw, 1.5rem);

}



.tft-pd-gallery__large {

  grid-column: span 8;

  overflow: hidden;

  aspect-ratio: 16/10;

}



.tft-pd-gallery__small {

  grid-column: span 4;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding-block-end: 3rem;

}



.tft-pd-gallery__alt {

  grid-column: span 8;

  overflow: hidden;

  aspect-ratio: 16/9;

}



.tft-pd-gallery__aside {

  grid-column: span 4;

  overflow: hidden;

  aspect-ratio: 4/5;

}



.tft-pd-gallery__large img,

.tft-pd-gallery__alt img,

.tft-pd-gallery__aside img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 1s ease;

  display: block;

}



.tft-pd-gallery__large:hover img,

.tft-pd-gallery__alt:hover img,

.tft-pd-gallery__aside:hover img {

  transform: scale(1.05);

}



.tft-pd-gallery__label {

  font-family: var(--cpf-font-mono);

  font-size: .6rem;

  color: var(--cpf-color-accent);

  text-transform: uppercase;

  letter-spacing: .2em;

  margin-block-end: 1rem;

}



.tft-pd-gallery__caption {

  font-size: .75rem;

  opacity: .4;

  line-height: 1.6;

  text-transform: uppercase;

  letter-spacing: .1em;

}



.tft-pd-specs {

  padding-block: clamp(4rem, 8vh, 8rem);

  padding-inline: clamp(1rem, 6vw, 6rem);

  background: rgba(255, 255, 255, .02);

  border-block: 1px solid rgba(255, 255, 255, .05);

}



.tft-pd-specs__inner {

  max-width: 1320px;

  margin-inline: auto;

  display: flex;

  gap: clamp(3rem, 6vw, 8rem);

  flex-wrap: wrap;

}



.tft-pd-specs__heading {

  width: min(100%, 30%);

  flex-shrink: 0;

}



.tft-pd-specs__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(2rem, 4vw, 3.5rem);

  font-weight: 700;

  line-height: 1.1;

  margin-block-end: 1.5rem;

  color: var(--cpf-color-white);

}



.tft-pd-specs__subtitle {

  font-family: var(--cpf-font-mono);

  font-size: .65rem;

  opacity: .4;

  line-height: 1.8;

  text-transform: uppercase;

  letter-spacing: .2em;

}



.tft-pd-specs__list {

  flex: 1;

  min-width: min(100%, 400px);

}



.tft-pd-spec-item {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  padding-block: 1.5rem;

  border-block-end: 1px solid rgba(255, 255, 255, .05);

  transition: all .4s ease;

  gap: 2rem;

}



.tft-pd-spec-item:last-child {

  border-block-end: none;

}



.tft-pd-spec-item:hover {

  padding-inline-start: 1rem;

  border-block-end-color: var(--cpf-color-accent);

}



.tft-pd-spec-item__label {

  font-family: var(--cpf-font-mono);

  font-size: .65rem;

  opacity: .4;

  text-transform: uppercase;

  letter-spacing: .2em;

  transition: opacity .4s;

  white-space: nowrap;

}



.tft-pd-spec-item:hover .tft-pd-spec-item__label {

  opacity: 1;

}



.tft-pd-spec-item__val {

  font-family: var(--cpf-font-body);

  font-size: clamp(.9rem, 1.4vw, 1.15rem);

  text-transform: uppercase;

  letter-spacing: -.02em;

  color: var(--cpf-color-white);

  text-align: end;

  transition: color .4s;

}



.tft-pd-spec-item:hover .tft-pd-spec-item__val {

  color: var(--cpf-color-accent);

}



.tft-pd-next {

  padding-block: clamp(5rem, 12vh, 10rem);

  padding-inline: clamp(1rem, 6vw, 6rem);

  text-align: center;

  background: var(--cpf-color-page-bg);

  overflow: hidden;

  position: relative;

}



.tft-pd-next__glow {

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at center, rgba(232, 185, 35, .06) 0%, transparent 70%);

  pointer-events: none;

}



.tft-pd-next__meta {

  font-family: var(--cpf-font-mono);

  font-size: .65rem;

  color: var(--cpf-color-accent);

  text-transform: uppercase;

  letter-spacing: .5em;

  display: block;

  margin-block-end: 2.5rem;

}



.tft-pd-next__link {

  font-family: var(--cpf-font-display);

  font-style: italic;

  font-size: clamp(3rem, 10vw, 9rem);

  color: var(--cpf-color-white);

  text-decoration: none;

  display: block;

  transition: all 1s ease;

  line-height: 1;

}



.tft-pd-next__link:hover {

  transform: scale(1.04);

  color: var(--cpf-color-accent);

}



.tft-pd-next__circle {

  margin-block-start: 3rem;

  width: clamp(80px, 8vw, 128px);

  height: clamp(80px, 8vw, 128px);

  border-radius: 50%;

  border: 1px solid rgba(232, 185, 35, .3);

  margin-inline: auto;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all .7s ease;

  text-decoration: none;

}



.tft-pd-next__circle:hover {

  background: var(--cpf-color-accent);

  border-color: var(--cpf-color-accent);

}



.tft-pd-next__circle svg {

  width: clamp(28px, 4vw, 52px);

  height: clamp(28px, 4vw, 52px);

  stroke: var(--cpf-color-white);

  fill: none;

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-linejoin: round;

  transition: stroke .7s ease;

}



.tft-pd-next__circle:hover svg {

  stroke: var(--cpf-color-dark);

}



@media (max-width: 768px) {

  .tft-pd-gallery__grid {

    display: flex;

    flex-direction: column;

  }



  .tft-pd-hero__hud-path {

    display: none;

  }



  .tft-pd-specs__inner {

    flex-direction: column;

  }



  .tft-pd-specs__heading {

    width: 100%;

  }



  .tft-aurora__title {

    font-size: clamp(3rem, 14vw, 8rem) !important;

  }



  .tft-aurora__title em {

    font-size: clamp(3.5rem, 16vw, 9rem) !important;

  }



  .tft-aurora__hud {

    gap: 1rem;

  }

}



@media (max-width: 480px) {

  .tft-pd-hero__hud {

    display: none;

  }

}



/* ================================================================

   AURORA PULSE — TEXT OVERLAY & READABILITY UPGRADE

   ================================================================ */



/* --- Gradient overlay for text legibility ----------------------- */

.tft-aurora__slide::after {

  content: '';

  position: absolute;

  inset: 0;

  background:

    linear-gradient(to right, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .55) 45%, rgba(8, 8, 8, .05) 100%),

    linear-gradient(to top, rgba(8, 8, 8, .9) 0%, transparent 55%);

  z-index: 8;

  pointer-events: none;

}



/* --- Re-anchor content to bottom-left for cinematic feel -------- */

.tft-aurora__content {

  align-items: flex-start !important;

  justify-content: flex-end !important;

  padding-block-end: clamp(6rem, 12vh, 10rem) !important;

  padding-inline-start: clamp(2rem, 6vw, 7rem) !important;

  text-align: left !important;

  z-index: 30 !important;

}



/* --- Title text shadow for hard legibility ---------------------- */

.tft-aurora__title {

  text-shadow: 0 2px 40px rgba(0, 0, 0, .8), 0 0 80px rgba(0, 0, 0, .5) !important;

  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .6));

}



/* --- Meta label: upgrade contrast + add accent glow ------------- */

.tft-aurora__meta {

  text-shadow: 0 0 20px rgba(232, 185, 35, .5) !important;

  color: var(--cpf-color-accent) !important;

}



.tft-aurora__slide.is-active .tft-aurora__meta {

  opacity: 1;

  transform: translateY(0);

}



/* --- HUD: pill container, higher contrast, always visible ------- */

.tft-aurora__hud {

  background: rgba(8, 8, 8, .45) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  border: 1px solid rgba(255, 255, 255, .1) !important;

  border-radius: 999px !important;

  padding: .6rem 1.6rem !important;

  z-index: 100 !important;

}



/* =================================================================

   ZYLYF — DIAGONAL WEBGL SHOWCASE (index-5.html)

   ================================================================= */

.tfd-diagonal-page {

  background: var(--cpf-color-page-bg, #121212);

  overflow: hidden;

  height: 100vh;

  margin: 0;

  padding: 0;

}



.tfd-slider {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background: var(--cpf-color-page-bg, #121212);

  overflow: hidden;

  z-index: 0;

}



.tfd-slider__snakes {

  position: absolute;

  inset: 0;

  z-index: 10;

  pointer-events: none;

  opacity: 0.6;

}



.tfd-slider__path {

  transition: d 1.6s cubic-bezier(0.19, 1, 0.22, 1), stroke-dashoffset 0.1s linear, filter 0.8s ease;

  stroke-dasharray: 4000;

  stroke-dashoffset: 4000;

  filter: drop-shadow(0 0 15px var(--cpf-color-accent, var(--cpf-color-accent)));

  will-change: d, filter;

}



.tfd-slider__path.is-glitching {

  filter: blur(20px) brightness(2.0) contrast(130%);

  opacity: 0.8;

}



.tfd-slider__slider {

  position: absolute;

  inset: 0;

}



.tfd-slider__slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  transition: all 1.4s cubic-bezier(0.19, 1, 0.22, 1);

  transform: translate(3%, -3%) scale(1.02);

  filter: blur(8px);

}



.tfd-slider__slide.is-active {

  opacity: 1;

  visibility: visible;

  transform: translate(0, 0) scale(1);

  filter: blur(0);

  z-index: 20;

}



.tfd-slider__slide.is-exiting {

  opacity: 0;

  visibility: hidden;

  transform: translate(-3%, 3%) scale(0.98);

  filter: blur(12px);

  z-index: 10;

  transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);

}



.tfd-slider__bg {

  position: absolute;

  inset: 0;

  overflow: hidden;

}



.tfd-slider__bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.35;

  filter: grayscale(1);

  display: block;

  transform: scale(1.05);

}



.tfd-slider__slide.is-active .tfd-slider__bg img {

  animation: tfd-kenburns-diag 24s infinite alternate ease-in-out;

}



@keyframes tfd-kenburns-diag {

  from {

    transform: scale(1.05) translate(0, 0);

  }



  to {

    transform: scale(1.18) translate(-1.5%, 1.5%);

  }

}



.tfd-slider__slide::after {

  content: '';

  position: absolute;

  inset: 0;

  background:

    linear-gradient(135deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.55) 45%, rgba(8, 8, 8, 0.05) 100%),

    linear-gradient(to top, rgba(8, 8, 8, 0.85) 0%, transparent 60%);

  z-index: 8;

  pointer-events: none;

}



.tfd-slider__content {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-end;

  padding-block-end: clamp(6rem, 12vh, 10rem);

  padding-inline-start: clamp(2rem, 6vw, 7rem);

  text-align: left;

  z-index: 30;

}



.tfd-slider__meta {

  font-family: var(--cpf-font-mono);

  font-size: clamp(0.6rem, 1vw, 0.8rem);

  letter-spacing: 0.5em;

  text-transform: uppercase;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  display: block;

  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);

  text-shadow: 0 0 20px rgba(232, 185, 35, 0.45);

  opacity: 0;

  transform: translate(-30px, 15px);

  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;

}



.tfd-slider__slide.is-active .tfd-slider__meta {

  opacity: 1;

  transform: translate(0, 0);

}



.tfd-slider__title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3.5rem, 13vw, 14rem);

  font-weight: 900;

  line-height: 0.8;

  letter-spacing: -0.05em;

  text-transform: uppercase;

  color: var(--cpf-color-white, #ffffff);

  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.85);

  opacity: 0;

  transform: translate(-80px, 40px) skewX(-10deg);

  transition: opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1) 0.6s, transform 1.4s cubic-bezier(0.19, 1, 0.22, 1) 0.6s;

}



.tfd-slider__slide.is-active .tfd-slider__title {

  opacity: 1;

  transform: translate(0, 0) skewX(0);

}



.tfd-slider__title em {

  display: block;

  font-style: italic;

  font-weight: 300;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  font-size: clamp(4rem, 15vw, 16rem);

  line-height: 0.78;

}



.tfd-slider__hud {

  position: absolute;

  bottom: clamp(1.5rem, 4vh, 3rem);

  left: 50%;

  transform: translateX(-50%);

  z-index: 50;

  display: flex;

  align-items: center;

  gap: clamp(0.75rem, 2vw, 3rem);

  background: rgba(8, 8, 8, 0.5) !important;

  backdrop-filter: blur(25px) !important;

  -webkit-backdrop-filter: blur(25px) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  border-radius: 999px !important;

  padding: 0.6rem 1.8rem !important;

  pointer-events: auto;

}



.tfd-slider__nav-btn {

  position: relative;

  width: clamp(44px, 4.5vw, 60px);

  height: clamp(44px, 4.5vw, 60px);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  background: rgba(255, 255, 255, 0.04);

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.1);

  transition: all 0.4s ease;

  color: var(--cpf-color-white, #ffffff);

}



.tfd-slider__nav-btn:hover {

  background: rgba(232, 185, 35, 0.15);

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

  transform: scale(1.08);

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tfd-slider__nav-btn svg {

  width: 20px;

  height: 20px;

  stroke: currentColor;

  stroke-width: 1.5;

  fill: none;

  stroke-linecap: round;

  stroke-linejoin: round;

  pointer-events: none;

}



.tfd-slider__prog-wrap {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.tfd-slider__count {

  font-family: var(--cpf-font-display);

  font-size: 1.2rem;

  line-height: 1;

}



.tfd-slider__count--cur {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tfd-slider__count--tot {

  opacity: 0.25;

  color: var(--cpf-color-white, #ffffff);

}



.tfd-slider__prog-bar {

  width: clamp(60px, 7vw, 128px);

  height: 1px;

  background: rgba(255, 255, 255, 0.15);

  position: relative;

  overflow: hidden;

}



.tfd-slider__prog-fill {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  width: 12.5%;

  transition: width 0.7s ease;

}



@media (max-width: 768px) {

  .tfd-slider__title {

    font-size: clamp(3rem, 14vw, 8rem) !important;

  }



  .tfd-slider__title em {

    font-size: clamp(3.5rem, 16vw, 9rem) !important;

  }



  .tfd-slider__hud {

    gap: 1rem;

  }

}



/* =================================================================

   ZYLYF — DIAGONAL RESPONSIVE OVERLAY MENU (.tfd-menu)

   ================================================================= */

.tfd-menu {

  position: fixed;

  inset: 0;

  z-index: 9999;

  background: var(--cpf-color-page-bg, #121212);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  opacity: 0;

  visibility: hidden;

  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);

  transition: opacity 0.6s ease, clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.6s;

}



.tfd-menu.is-open {

  opacity: 1;

  visibility: visible;

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

}



.tfd-menu__bg-decoration {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  opacity: 0.15;

}



.tfd-menu__bg-line {

  position: absolute;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  width: 1px;

  height: 150%;

  top: -25%;

  left: 50%;

  transform: rotate(45deg);

}



.tfd-menu__inner {

  position: relative;

  z-index: 10;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  width: 100%;

  padding: 2rem;

}



.tfd-menu__close {

  position: absolute;

  top: 2rem;

  right: 2rem;

  background: none;

  border: none;

  color: var(--cpf-color-white, #ffffff);

  cursor: pointer;

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.4s ease, color 0.4s ease;

}



.tfd-menu__close:hover {

  transform: rotate(90deg);

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tfd-menu__close svg {

  width: 24px;

  height: 24px;

  stroke: currentColor;

  stroke-width: 1.5;

  fill: none;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.tfd-menu__nav {

  margin-block-end: 3rem;

}



.tfd-menu__list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.tfd-menu__item {

  overflow: hidden;

}



.tfd-menu__link {

  font-family: var(--cpf-font-display, 'Bebas Neue', sans-serif);

  font-size: clamp(2.5rem, 6vw, 4.5rem);

  text-transform: uppercase;

  color: var(--cpf-color-white, #ffffff);

  text-decoration: none;

  display: inline-block;

  transition: transform 0.4s ease, color 0.4s ease;

  transform: translateY(100%);

}



.tfd-menu.is-open .tfd-menu__link {

  transform: translateY(0);

}



.tfd-menu__item:nth-child(1) .tfd-menu__link {

  transition-delay: 0.1s;

}



.tfd-menu__item:nth-child(2) .tfd-menu__link {

  transition-delay: 0.15s;

}



.tfd-menu__item:nth-child(3) .tfd-menu__link {

  transition-delay: 0.2s;

}



.tfd-menu__item:nth-child(4) .tfd-menu__link {

  transition-delay: 0.25s;

}



.tfd-menu__item:nth-child(5) .tfd-menu__link {

  transition-delay: 0.3s;

}



.tfd-menu__item:nth-child(6) .tfd-menu__link {

  transition-delay: 0.35s;

}



.tfd-menu__link:hover {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  transform: skewX(-10deg) scale(1.05);

}



.tfd-menu__footer {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;

}



.tfd-menu.is-open .tfd-menu__footer {

  opacity: 1;

  transform: translateY(0);

}



.tfd-menu__email {

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.85rem;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  text-decoration: none;

  letter-spacing: 0.1em;

}



.tfd-menu__socials {

  display: flex;

  gap: 1.5rem;

  list-style: none;

  padding: 0;

  margin: 0;

}



.tfd-menu__socials-link {

  font-family: var(--cpf-font-body, sans-serif);

  font-size: 0.8rem;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.6);

  text-decoration: none;

  letter-spacing: 0.15em;

  transition: color 0.3s ease;

}



.tfd-menu__socials-link:hover {

  color: var(--cpf-color-white, #ffffff);

}



/* ==============================================

   SECTION: ZYLYF 3-Column Vertical Showcase

   id="wp-block-vertical-showcase"

   ============================================== */

:root {

  --tfd-color-deep-green: #041009;

  --tfd-color-neon-glow: #39ff14;

  --tfd-color-panel-bg: rgba(4, 16, 9, 0.85);

}



.tfd-showcase {

  position: relative;

  inline-size: 100%;

  block-size: 100dvh;

  background-color: var(--cpf-color-dark, #0a0a0a);

  overflow: hidden;

  display: flex;

  flex-direction: column;

}



.tfd-showcase__inner {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  inline-size: 100%;

  block-size: 100%;

  position: relative;

}



/* Panel Structure */

.tfd-showcase__panel {

  position: relative;

  overflow: hidden;

  block-size: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding-block: clamp(2rem, 5vw, 4.5rem);

  padding-inline: clamp(1.5rem, 3.5vw, 3rem);

  background-color: var(--tfd-color-deep-green);

  transition: flex-grow 0.6s cubic-bezier(0.25, 1, 0.5, 1),

    background-color 0.6s ease;

}



/* Separator Borders */

.tfd-showcase__panel:not(:last-child) {

  border-inline-end: 1px solid var(--tfd-color-neon-glow);

}



/* Background image containment */

.tfd-showcase__bg {

  position: absolute;

  inset: 0;

  z-index: 1;

  overflow: hidden;

  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);

  pointer-events: none;

}



.tfd-showcase__bg img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  opacity: 0.65;

  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);

}



/* Gradient overlay for readability */

.tfd-showcase__panel::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(4, 16, 9, 0.95) 0%, rgba(4, 16, 9, 0.4) 50%, transparent 100%);

  z-index: 2;

  pointer-events: none;

  transition: opacity 0.6s ease;

}



/* Content overlays */

.tfd-showcase__content {

  position: relative;

  z-index: 5;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

}



.tfd-showcase__num {

  font-family: var(--cpf-font-mono, monospace);

  font-size: var(--cpf-text-xs, 0.875rem);

  color: var(--tfd-color-neon-glow);

  margin-block-end: 1rem;

  letter-spacing: 0.2em;

}



.tfd-showcase__tag {

  font-family: var(--cpf-font-body, sans-serif);

  font-size: var(--cpf-text-xs, 0.875rem);

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.5);

  margin-block-end: 0.5rem;

  letter-spacing: 0.1em;

}



.tfd-showcase__panel-title {

  font-family: var(--cpf-font-display, sans-serif);

  font-size: clamp(1.75rem, 3.5vw, 2.75rem);

  color: var(--cpf-color-white, #ffffff);

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: -0.02em;

  transition: color 0.4s ease;

}



/* Middle panel custom title font */

.tfd-showcase__title {

  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;

  font-size: clamp(2.5rem, 5.5vw, 5rem);

  font-weight: 300;

  font-style: italic;

  color: var(--cpf-color-white, #ffffff);

  line-height: 1.05;

  margin-block-end: 2rem;

  transition: color 0.4s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

}



/* Interactive Rotating Badge Button */

.tfd-showcase__badge {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 130px;

  height: 130px;

  text-decoration: none;

  color: var(--cpf-color-white, #ffffff);

  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;

  margin-block-start: 1rem;

}



.tfd-showcase__badge-text {

  position: absolute;

  width: 100%;

  height: 100%;

  animation: tfd-spin 15s linear infinite;

  transform-origin: center;

  pointer-events: none;

}



.tfd-showcase__badge-text text {

  fill: rgba(255, 255, 255, 0.6);

  font-family: var(--cpf-font-mono, monospace);

  text-transform: uppercase;

  transition: fill 0.4s ease;

}



.tfd-showcase__badge-arrow {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background-color: var(--cpf-color-white, #ffffff);

  color: var(--cpf-color-dark, #0a0a0a);

  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),

    background-color 0.4s ease,

    color 0.4s ease;

}



/* Badge hover state */

.tfd-showcase__badge:hover {

  background-color: rgba(57, 255, 20, 0.05);

  border-color: var(--tfd-color-neon-glow);

  transform: scale(1.05);

}



.tfd-showcase__badge:hover .tfd-showcase__badge-text text {

  fill: var(--tfd-color-neon-glow);

}



.tfd-showcase__badge:hover .tfd-showcase__badge-arrow {

  transform: scale(1.1) rotate(45deg);

  background-color: var(--tfd-color-neon-glow);

  color: var(--tfd-color-deep-green);

}



/* Right Column HUD Coordinate Graphics */

.tfd-showcase__hud {

  position: absolute;

  inset-block-start: clamp(2rem, 5vw, 4rem);

  inset-inline-end: clamp(1.5rem, 3.5vw, 3rem);

  z-index: 4;

  font-family: var(--cpf-font-mono, monospace);

  font-size: clamp(0.7rem, 1vw, 0.85rem);

  color: var(--tfd-color-neon-glow);

  pointer-events: none;

  opacity: 0.65;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 0.5rem;

  transition: opacity 0.4s ease;

}



.tfd-showcase__hud-coords {

  letter-spacing: 0.15em;

  background-color: rgba(4, 16, 9, 0.8);

  padding: 0.25rem 0.5rem;

  border: 1px solid rgba(57, 255, 20, 0.2);

  border-radius: 3px;

}



.tfd-showcase__hud-grid {

  width: 80px;

  height: 80px;

  border: 1px solid rgba(57, 255, 20, 0.2);

  position: relative;

  background-image: linear-gradient(rgba(57, 255, 20, 0.1) 1px, transparent 1px),

    linear-gradient(90deg, rgba(57, 255, 20, 0.1) 1px, transparent 1px);

  background-size: 10px 10px;

}



.tfd-showcase__hud-grid::before {

  content: '';

  position: absolute;

  width: 4px;

  height: 4px;

  background: var(--tfd-color-neon-glow);

  border-radius: 50%;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  animation: tfd-hud-blink 1.5s infinite ease-in-out;

}



/* Panel hover expansions (Desktop only) */

@media (min-width: 810px) {

  .tfd-showcase__panel:hover {

    flex-grow: 1.15;

    background-color: #030c07;

  }



  .tfd-showcase__panel:hover .tfd-showcase__bg img {

    opacity: 0.85;

    transform: scale(1.03) translateZ(0);

  }



  .tfd-showcase__panel:hover .tfd-showcase__panel-title {

    color: var(--tfd-color-neon-glow);

  }



  .tfd-showcase__panel:hover .tfd-showcase__title {

    color: var(--tfd-color-neon-glow);

    transform: translateY(-5px);

  }



  .tfd-showcase__panel:hover .tfd-showcase__hud {

    opacity: 1;

  }

}



/* Responsive viewports stacking */

@media (max-width: 809.98px) {

  .tfd-showcase {

    block-size: auto;

    min-block-size: 100dvh;

    padding-block-start: var(--cpf-nav-height);

  }



  .tfd-showcase__inner {

    grid-template-columns: 1fr;

    grid-template-rows: repeat(3, minmax(320px, 1fr));

    block-size: auto;

    min-block-size: calc(100dvh - var(--cpf-nav-height));

  }



  .tfd-showcase__panel {

    block-size: auto;

    min-block-size: 33vh;

    padding-block: 3rem;

  }



  .tfd-showcase__panel:not(:last-child) {

    border-inline-end: none;

    border-block-end: 1px solid var(--tfd-color-neon-glow);

  }



  .tfd-showcase__title {

    margin-block-end: 1.5rem;

  }



  .tfd-showcase__badge {

    width: 100px;

    height: 100px;

  }



  .tfd-showcase__badge-arrow {

    width: 36px;

    height: 36px;

  }

}



/* Custom animations */

@keyframes tfd-spin {

  0% {

    transform: rotate(0deg);

  }



  100% {

    transform: rotate(360deg);

  }

}



@keyframes tfd-hud-blink {



  0%,

  100% {

    opacity: 0.2;

  }



  50% {

    opacity: 1;

  }

}



/* Custom Overlay Menu Style Variant */

.tfd-menu {

  background-color: rgba(4, 16, 9, 0.98) !important;

  border-inline-start: 1px solid var(--tfd-color-neon-glow);

}



.tfd-menu__bg-line {

  background: var(--tfd-color-neon-glow) !important;

}



.tfd-menu__link:hover {

  color: var(--tfd-color-neon-glow) !important;

}



.tfd-menu__email {

  color: var(--tfd-color-neon-glow) !important;

}







/* ============================================================

   SECTION: Diagonal WebGL Showcase Styles

   ============================================================ */



/* Fullscreen showcase container */

.tfd-showcase--diagonal {

  position: relative;

  inline-size: 100%;

  block-size: 100dvh;

  background-color: var(--cpf-color-dark, #0a0a0a);

  overflow: hidden;

  font-family: var(--cpf-font-body, sans-serif);

}



/* WebGL canvas container */

.tfd-showcase__webgl-container {

  position: absolute;

  inset: 0;

  z-index: 1;

  inline-size: 100%;

  block-size: 100%;

}



.tfd-showcase__webgl-container canvas {

  display: block;

  inline-size: 100%;

  block-size: 100%;

}



/* Interactive overlays wrapper */

.tfd-showcase__overlays {

  position: absolute;

  inset: 0;

  z-index: 5;

  pointer-events: none;

  /* Let canvas capture mouse movement */

}



/* Interactive elements inside overlays must be pointer-events auto */

.tfd-showcase__badge,

.tfd-showcase__label-zone {

  pointer-events: auto;

}



/* Top-Right Coordinate HUD */

.tfd-showcase__hud-coords {

  position: absolute;

  inset-block-start: clamp(2rem, 5vh, 4rem);

  inset-inline-end: clamp(1.5rem, 3.5vw, 3rem);

  font-family: var(--cpf-font-mono, monospace);

  font-size: clamp(0.7rem, 1.2vw, 0.85rem);

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  letter-spacing: 0.15em;

  text-transform: uppercase;

  background: rgba(10, 10, 10, 0.6);

  padding: 0.5rem 1rem;

  border-radius: 4px;

  backdrop-filter: blur(8px);

  border: 1px solid color-mix(in srgb, var(--cpf-color-accent, var(--cpf-color-accent)) 20%, transparent);

}



/* Dynamic text label zones floating centered horizontally at the bottom */

.tfd-showcase__labels {

  position: absolute;

  inset-block-end: clamp(2rem, 6vh, 5.5rem);

  inset-inline-start: 0;

  inline-size: 100%;

  block-size: auto;

}



.tfd-showcase__label-zone {

  position: absolute;

  inset-block-end: 0;

  transform: translateX(-50%);

  /* Centered horizontally at the dynamic left position */

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

  will-change: inset-inline-start, transform, opacity;

}



.tfd-showcase__label-zone .tfd-showcase__num {

  font-family: var(--cpf-font-mono, monospace);

  font-size: var(--cpf-text-xs, 0.875rem);

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-block-end: 0.5rem;

  letter-spacing: 0.2em;

}



.tfd-showcase__label-zone .tfd-showcase__title {

  font-family: var(--cpf-font-display, sans-serif);

  font-size: clamp(1.5rem, 2.5vw, 2.25rem);

  color: var(--cpf-color-white, #ffffff);

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: var(--cpf-ls-tight, -0.04em);

  text-transform: uppercase;

  margin-block-end: 0.25rem;

  transition: color 0.3s ease;

}



.tfd-showcase__label-zone .tfd-showcase__category {

  font-family: var(--cpf-font-body, sans-serif);

  font-size: var(--cpf-text-xs, 0.875rem);

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

  letter-spacing: 0.1em;

}



/* Hovering styling for zones */

.tfd-showcase__label-zone:hover .tfd-showcase__title {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Case Study Badge positioned at bottom-middle or responsive center */

.tfd-showcase__badge {

  position: absolute;

  inset-block-end: clamp(1.5rem, 5vh, 4rem);

  inset-inline-start: 50%;

  transform: translateX(-50%);

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 130px;

  height: 130px;

  border-radius: 50%;

  text-decoration: none;

  background: rgba(10, 10, 10, 0.5);

  backdrop-filter: blur(8px);

  border: 1px solid color-mix(in srgb, var(--cpf-color-accent, var(--cpf-color-accent)) 25%, transparent);

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),

    border-color 0.4s ease,

    background-color 0.4s ease;

}



.tfd-showcase__badge:hover {

  transform: translateX(-50%) scale(1.08);

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

  background: rgba(10, 10, 10, 0.8);

}



.tfd-showcase__badge-text {

  position: absolute;

  width: 100%;

  height: 100%;

  animation: tfd-spin 16s linear infinite;

  transform-origin: center;

  pointer-events: none;

}



.tfd-showcase__badge:hover .tfd-showcase__badge-text {

  animation-duration: 8s;

  /* Spins faster on hover */

}



.tfd-showcase__badge-text path {

  fill: none;

}



.tfd-showcase__badge-text text {

  font-family: var(--cpf-font-mono, monospace);

  text-transform: uppercase;

}



.tfd-showcase__badge-arrow {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  color: var(--cpf-color-dark, #0a0a0a);

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),

    background-color 0.4s ease,

    color 0.4s ease;

}



.tfd-showcase__badge:hover .tfd-showcase__badge-arrow {

  transform: rotate(45deg);

  background: var(--cpf-color-white, #ffffff);

  color: var(--cpf-color-dark, #0a0a0a);

}



/* Stacking and responsive adjustments */

@media (max-width: 809.98px) {

  .tfd-showcase__labels {

    position: relative;

    inset-block-end: auto;

    display: flex;

    flex-direction: column;

    gap: 3rem;

    padding: 3rem 1.5rem;

    margin-block-start: 100dvh;

    /* Place labels below canvas on mobile */

    background: var(--cpf-color-dark, #0a0a0a);

    z-index: 10;

  }



  .tfd-showcase__label-zone {

    position: relative;

    inset-inline-start: auto !important;

    /* Reset dynamic horizontal centering */

    transform: none;

    inset-block-end: auto;

    align-items: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    padding-block-end: 2rem;

  }



  .tfd-showcase__label-zone:last-child {

    border-bottom: none;

  }



  .tfd-showcase__hud-coords {

    inset-block-start: clamp(1rem, 3vh, 2rem);

    inset-inline-end: 1rem;

    font-size: 0.65rem;

    padding: 0.35rem 0.75rem;

  }



  .tfd-showcase__badge {

    position: relative;

    inset-block-end: auto;

    inset-inline-start: 50%;

    margin-block: 2rem;

    z-index: 15;

  }

}



/* CSS clip-path Fallback Grid & Panels */

.tfd-showcase__fallback-grid {

  display: none;

  position: absolute;

  inset: 0;

  z-index: 2;

  inline-size: 100%;

  block-size: 100%;

}



.tfd-showcase--webgl-failed .tfd-showcase__fallback-grid {

  display: block;

}



.tfd-showcase--webgl-failed .tfd-showcase__webgl-container {

  display: none;

}



.tfd-showcase__fallback-panel {

  position: absolute;

  inset-block-start: 0;

  block-size: 100%;

  background-size: cover;

  background-position: center;

  transition: width 0.1s ease, inset-inline-start 0.1s ease;

  will-change: width, inset-inline-start;

}



.tfd-showcase__fallback-panel--left {

  inset-inline-start: 0;

  clip-path: polygon(0 0, 100% 0, calc(100% - 10vh) 100%, 0 100%);

  border-inline-end: 1px solid var(--cpf-color-accent, var(--cpf-color-accent));

}



.tfd-showcase__fallback-panel--center {

  clip-path: polygon(10vh 0, 100% 0, calc(100% - 10vh) 100%, 0 100%);

  border-inline-end: 1px solid var(--cpf-color-accent, var(--cpf-color-accent));

}



.tfd-showcase__fallback-panel--right {

  clip-path: polygon(10vh 0, 100% 0, 100% 100%, 0 100%);

}



/* Desktop Centering and Overlay overrides */

@media (min-width: 810px) {

  .tfd-showcase__overlays::before {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at center, transparent 30%, rgba(10, 10, 10, 0.45) 100%);

    pointer-events: none;

    z-index: 2;

  }



  .tfd-showcase__labels {

    position: absolute;

    inset: 0;

    inset-block-end: auto;

    block-size: 100%;

  }



  .tfd-showcase__label-zone {

    position: absolute;

    inset-block-end: auto;

    top: 50%;

    transform: translateX(-50%) translateY(-50%);

    z-index: 5;

    /* Style overridden by final block below — no circle/ellipse here */

  }



  .tfd-showcase__label-zone .tfd-showcase__title {

    font-size: clamp(2rem, 3.5vw, 3.5rem);

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);

  }



  .tfd-showcase__label-zone .tfd-showcase__num {

    font-size: clamp(0.85rem, 1.2vw, 1.1rem);

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);

  }



  .tfd-showcase__label-zone .tfd-showcase__category {

    font-size: clamp(0.75rem, 1vw, 0.95rem);

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);

  }

}



/* 2026 Sovereign Elite - Tech Box Overlay & Divider Line Styles */

@media (min-width: 810px) {

  .tfd-showcase__label-zone {

    background: rgba(10, 10, 10, 0.85) !important;

    border-radius: 4px !important;

    border: 1px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    padding: 1.8rem 3rem !important;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), inset 0 0 15px rgba(232, 185, 35, 0.08) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

  }



  .tfd-showcase__label-zone::before {

    content: "";

    position: absolute;

    top: -2px;

    left: -2px;

    width: 8px;

    height: 8px;

    border-top: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    border-left: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    pointer-events: none;

  }



  .tfd-showcase__label-zone::after {

    content: "";

    position: absolute;

    bottom: -2px;

    right: -2px;

    width: 8px;

    height: 8px;

    border-bottom: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    border-right: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    pointer-events: none;

  }

}



/* Diagonal Divider Borders */

.tfd-showcase__divider {

  position: absolute;

  top: 0;

  bottom: 0;

  width: 1.5px;

  background-color: var(--cpf-color-accent, var(--cpf-color-accent));

  box-shadow: 0 0 8px var(--cpf-color-accent, var(--cpf-color-accent)), 0 0 15px var(--cpf-color-accent, var(--cpf-color-accent));

  transform: skewX(-16.7deg);

  transform-origin: center;

  z-index: 4;

  pointer-events: none;

  transition: left 0.1s ease;

}



.tfd-showcase__divider--1 {

  left: calc(var(--div1, 0.3333) * 100%);

}



.tfd-showcase__divider--2 {

  left: calc(var(--div2, 0.6667) * 100%);

}



#tfd-showcase-canvas {

  display: block;

  width: 100%;

  height: 100%;

}







/* ===========================================================

   SOVEREIGN ELITE 2026 — FINAL SHOWCASE OVERRIDE BLOCK

   Fixes: double-transform conflict, vertical centering,

   corner brackets, premium hover, divider glow.

   =========================================================== */



.tfd-showcase--diagonal {

  position: relative !important;

  overflow: hidden !important;

}



@media (min-width: 810px) {

  .tfd-showcase__label-zone {

    position: absolute !important;

    top: 50% !important;

    inset-block-end: unset !important;

    transform: translateX(-50%) translateY(-50%) !important;

    will-change: left, transform, opacity !important;

    background: linear-gradient(135deg, rgba(10, 10, 10, 0.92) 0%, rgba(20, 18, 10, 0.88) 100%) !important;

    border-radius: 2px !important;

    border: 1px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    padding: clamp(1.2rem, 2.5vh, 1.8rem) clamp(1.8rem, 3vw, 3rem) !important;

    box-shadow: 0 0 0 1px rgba(232, 185, 35, 0.08), 0 12px 40px rgba(0, 0, 0, 0.95), 0 0 30px rgba(232, 185, 35, 0.12), inset 0 0 20px rgba(232, 185, 35, 0.05) !important;

    backdrop-filter: blur(16px) saturate(1.4) !important;

    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;

    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;

  }



  .tfd-showcase__label-zone::before {

    content: "" !important;

    position: absolute !important;

    top: -5px !important;

    left: -5px !important;

    width: 14px !important;

    height: 14px !important;

    border-top: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    border-left: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    pointer-events: none !important;

    z-index: 10 !important;

  }



  .tfd-showcase__label-zone::after {

    content: "" !important;

    position: absolute !important;

    bottom: -5px !important;

    right: -5px !important;

    width: 14px !important;

    height: 14px !important;

    border-bottom: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    border-right: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

    pointer-events: none !important;

    z-index: 10 !important;

  }



  .tfd-showcase__label-zone:hover {

    box-shadow: 0 0 0 1px rgba(232, 185, 35, 0.3), 0 12px 50px rgba(0, 0, 0, 0.98), 0 0 50px rgba(232, 185, 35, 0.4), inset 0 0 25px rgba(232, 185, 35, 0.12) !important;

    border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  }



  .tfd-showcase__label-zone:hover .tfd-showcase__title {

    color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  }



  .tfd-showcase__label-zone .tfd-showcase__num {

    display: block !important;

    padding-block-end: 0.6rem !important;

    margin-block-end: 0.6rem !important;

    border-block-end: 1px solid rgba(232, 185, 35, 0.3) !important;

    width: 100% !important;

    text-align: center !important;

  }



  .tfd-showcase__label-zone .tfd-showcase__category::before {

    content: "\2014 " !important;

    opacity: 0.4 !important;

  }



  .tfd-showcase__label-zone .tfd-showcase__title {

    font-size: clamp(1.8rem, 3vw, 3.2rem) !important;

    line-height: 1.0 !important;

    margin-block: 0.35rem !important;

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95) !important;

    transition: color 0.3s ease !important;

  }

}



.tfd-showcase__divider {

  position: absolute !important;

  top: -10% !important;

  bottom: -10% !important;

  width: 2px !important;

  background: linear-gradient(to bottom, transparent 0%, var(--cpf-color-accent, var(--cpf-color-accent)) 20%, var(--cpf-color-accent, var(--cpf-color-accent)) 80%, transparent 100%) !important;

  box-shadow: 0 0 6px var(--cpf-color-accent, var(--cpf-color-accent)), 0 0 20px var(--cpf-color-accent, var(--cpf-color-accent)), 0 0 45px rgba(232, 185, 35, 0.4) !important;

  transform: skewX(-16.7deg) !important;

  transform-origin: center center !important;

  z-index: 4 !important;

  pointer-events: none !important;

  transition: left 0.12s linear !important;

}



.tfd-showcase__divider--1 {

  left: calc(var(--div1, 0.3333) * 100%) !important;

}



.tfd-showcase__divider--2 {

  left: calc(var(--div2, 0.6667) * 100%) !important;

}



@media (max-width: 809.98px) {

  .tfd-showcase__divider {

    display: none !important;

  }

}



/* =========================================

   SHOWCASE PATCH: Label zones as <a> links

   + Remove divider display

   ========================================= */



/* Label zones are now <a> tags  reset link styling */

a.tfd-showcase__label-zone {

  text-decoration: none !important;

  color: inherit !important;

  cursor: pointer !important;

}



a.tfd-showcase__label-zone:visited {

  color: inherit !important;

}



/* Kill the HTML divider elements  WebGL draws the real diagonal borders */

.tfd-showcase__divider {

  display: none !important;

}



/* Badge arrow: force dark icon on accent background */

.tfd-showcase__badge-arrow {

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  color: var(--cpf-color-dark, #0a0a0a) !important;

}



/* Badge SVG text: force accent color */

.tfd-showcase__badge-text text {

  fill: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



/* =====================================================

   SHOWCASE: Transparent labels  hover dark gradient

   ===================================================== */



/* Default: fully transparent, no background, no border */

.tfd-showcase__label-zone,

a.tfd-showcase__label-zone {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



/* Corner brackets: hidden by default */

.tfd-showcase__label-zone::before,

.tfd-showcase__label-zone::after {

  opacity: 0 !important;

  transition: opacity 0.3s ease !important;

}



/* Hover: cinematic dark radial gradient behind the text */

.tfd-showcase__label-zone:hover,

a.tfd-showcase__label-zone:hover {

  background: radial-gradient(ellipse 140% 120% at 50% 50%,

      rgba(5, 5, 5, 0.82) 0%,

      rgba(5, 5, 5, 0.55) 55%,

      transparent 100%) !important;

  box-shadow: none !important;

  border: none !important;

  backdrop-filter: blur(4px) !important;

  -webkit-backdrop-filter: blur(4px) !important;

}



/* Corner brackets: appear on hover */

.tfd-showcase__label-zone:hover::before,

a.tfd-showcase__label-zone:hover::before,

.tfd-showcase__label-zone:hover::after,

a.tfd-showcase__label-zone:hover::after {

  opacity: 1 !important;

}



/* Badge: now just a clean circle with arrow  no spinning text */

.tfd-showcase__badge {

  width: 56px !important;

  height: 56px !important;

  border-radius: 50% !important;

  background: rgba(10, 10, 10, 0.7) !important;

  border: 1px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  box-shadow: 0 0 12px rgba(232, 185, 35, 0.3) !important;

}



.tfd-showcase__badge:hover {

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  box-shadow: 0 0 25px rgba(232, 185, 35, 0.6) !important;

}



.tfd-showcase__badge .tfd-showcase__badge-arrow {

  background: transparent !important;

  width: auto !important;

  height: auto !important;

}



.tfd-showcase__badge svg path {

  stroke: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.tfd-showcase__badge:hover svg path {

  stroke: var(--cpf-color-dark, #0a0a0a) !important;

}



/* HUD coords: hidden (element removed from HTML) */

.tfd-showcase__hud-coords {

  display: none !important;

}



/* =====================================================

   SHOWCASE LABEL ZONES  Final Interaction Layer 2026

   Default: glass text with omnidirectional dark halo

   Hover: animated pseudo-element overlay + micro-moves

   ===================================================== */



/* Reset everything from previous override blocks */

.tfd-showcase__label-zone,

a.tfd-showcase__label-zone {

  position: absolute !important;

  top: 50% !important;

  inset-block-end: unset !important;

  transform: translateX(-50%) translateY(-50%) !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

  text-decoration: none !important;

  color: inherit !important;

  will-change: transform, opacity !important;

  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;



  /* No background box */

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  border-radius: 0 !important;

  padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1rem, 2vw, 2rem) !important;

}



/* ::before  the animatable dark overlay (opacity transition = smooth) */

.tfd-showcase__label-zone::before {

  content: "" !important;

  position: absolute !important;

  inset: -1.5rem -2.5rem !important;

  background: radial-gradient(ellipse 100% 90% at 50% 50%,

      rgba(4, 4, 4, 0.86) 0%,

      rgba(4, 4, 4, 0.55) 55%,

      transparent 100%) !important;

  opacity: 0 !important;

  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;

  pointer-events: none !important;

  z-index: 0 !important;

  border-radius: 4px !important;

}



/* ::after  accent underline that slides in from center */

.tfd-showcase__label-zone::after {

  content: "" !important;

  position: absolute !important;

  bottom: -0.2rem !important;

  left: 50% !important;

  transform: translateX(-50%) scaleX(0) !important;

  transform-origin: center !important;

  width: 55% !important;

  height: 1px !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  box-shadow: 0 0 8px var(--cpf-color-accent, var(--cpf-color-accent)), 0 0 18px rgba(232, 185, 35, 0.5) !important;

  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;

  pointer-events: none !important;

  z-index: 2 !important;

  border-radius: 0 !important;

  border: none !important;

}



/* Hover: overlay fades in + float up */

.tfd-showcase__label-zone:hover,

a.tfd-showcase__label-zone:hover {

  transform: translateX(-50%) translateY(calc(-50% - 8px)) !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



.tfd-showcase__label-zone:hover::before,

a.tfd-showcase__label-zone:hover::before {

  opacity: 1 !important;

}



.tfd-showcase__label-zone:hover::after,

a.tfd-showcase__label-zone:hover::after {

  transform: translateX(-50%) scaleX(1) !important;

}



/* All children sit above the ::before overlay */

.tfd-showcase__label-zone .tfd-showcase__num,

.tfd-showcase__label-zone .tfd-showcase__title,

.tfd-showcase__label-zone .tfd-showcase__category {

  position: relative !important;

  z-index: 1 !important;

}



/* Number: omnidirectional dark halo for contrast  no directional shadow */

.tfd-showcase__label-zone .tfd-showcase__num {

  font-family: var(--cpf-font-mono, monospace) !important;

  font-size: clamp(0.7rem, 1vw, 0.9rem) !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  letter-spacing: 0.25em !important;

  text-shadow:

    0 0 6px rgba(0, 0, 0, 1),

    0 0 14px rgba(0, 0, 0, 0.95) !important;

  transition: transform 0.35s ease, letter-spacing 0.35s ease !important;

  margin-block-end: 0.4rem !important;

  border-block-end: none !important;

  padding-block-end: 0 !important;

}



/* Title: strong omnidirectional halo  readable on any background */

.tfd-showcase__label-zone .tfd-showcase__title {

  font-size: clamp(2rem, 3.5vw, 3.8rem) !important;

  color: var(--cpf-color-white, #ffffff) !important;

  font-weight: 700 !important;

  line-height: 1.0 !important;

  text-transform: uppercase !important;

  letter-spacing: var(--cpf-ls-tight, -0.02em) !important;

  margin-block: 0.2rem !important;

  text-shadow:

    0 0 12px rgba(0, 0, 0, 1),

    0 0 24px rgba(0, 0, 0, 0.95),

    0 0 48px rgba(0, 0, 0, 0.85) !important;

  transition: color 0.35s ease, letter-spacing 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



/* Category: slightly dim, slides up on hover */

.tfd-showcase__label-zone .tfd-showcase__category {

  font-size: clamp(0.7rem, 0.9vw, 0.85rem) !important;

  color: rgba(255, 255, 255, 0.55) !important;

  letter-spacing: 0.12em !important;

  text-transform: uppercase !important;

  text-shadow: 0 0 8px rgba(0, 0, 0, 1) !important;

  opacity: 0.7 !important;

  transform: translateY(4px) !important;

  transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.38s ease !important;

}



/* Hover micro-animations */

.tfd-showcase__label-zone:hover .tfd-showcase__num {

  transform: translateY(-3px) !important;

  letter-spacing: 0.35em !important;

}



.tfd-showcase__label-zone:hover .tfd-showcase__title {

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  letter-spacing: 0.02em !important;

}



.tfd-showcase__label-zone:hover .tfd-showcase__category {

  transform: translateY(0) !important;

  opacity: 1 !important;

  color: rgba(255, 255, 255, 0.85) !important;

}



/* Category dash */

.tfd-showcase__label-zone .tfd-showcase__category::before {

  content: " " !important;

  opacity: 0.4 !important;

}



/* =====================================================

   SHOWCASE LABELS  CLEAN FINAL OVERRIDE

   Zero text-shadow. Gold title = readable on any bg.

   Hover: dark veil fades in via ::before opacity only.

   ===================================================== */



.tfd-showcase__label-zone,

a.tfd-showcase__label-zone {

  position: absolute !important;

  top: 50% !important;

  inset-block-end: unset !important;

  transform: translateX(-50%) translateY(-50%) !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

  text-decoration: none !important;

  color: inherit !important;

  cursor: pointer !important;

  padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1rem, 2vw, 2rem) !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  border-radius: 0 !important;

  will-change: transform, opacity !important;

  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



/* Dark radial veil  opacity-animated for smooth fade */

.tfd-showcase__label-zone::before,

a.tfd-showcase__label-zone::before {

  content: "" !important;

  position: absolute !important;

  inset: -2rem -3rem !important;

  background: radial-gradient(ellipse 110% 100% at 50% 55%, rgba(4, 4, 4, 0.78) 0%, rgba(4, 4, 4, 0.38) 60%, transparent 100%) !important;

  opacity: 0 !important;

  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;

  pointer-events: none !important;

  z-index: 0 !important;

}



/* Accent underline slides from center on hover */

.tfd-showcase__label-zone::after,

a.tfd-showcase__label-zone::after {

  content: "" !important;

  position: absolute !important;

  bottom: -0.3rem !important;

  left: 50% !important;

  transform: translateX(-50%) scaleX(0) !important;

  transform-origin: center !important;

  width: 50% !important;

  height: 1px !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  box-shadow: 0 0 10px var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;

  pointer-events: none !important;

  z-index: 2 !important;

}



/* Hover state */

.tfd-showcase__label-zone:hover,

a.tfd-showcase__label-zone:hover {

  transform: translateX(-50%) translateY(calc(-50% - 6px)) !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



.tfd-showcase__label-zone:hover::before,

a.tfd-showcase__label-zone:hover::before {

  opacity: 1 !important;

}



.tfd-showcase__label-zone:hover::after,

a.tfd-showcase__label-zone:hover::after {

  transform: translateX(-50%) scaleX(1) !important;

}



/* All text above the veil */

.tfd-showcase__label-zone .tfd-showcase__num,

.tfd-showcase__label-zone .tfd-showcase__title,

.tfd-showcase__label-zone .tfd-showcase__category {

  position: relative !important;

  z-index: 1 !important;

  text-shadow: none !important;

}



/* Number */

.tfd-showcase__label-zone .tfd-showcase__num {

  font-family: var(--cpf-font-mono, monospace) !important;

  font-size: clamp(0.65rem, 0.9vw, 0.8rem) !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  letter-spacing: 0.25em !important;

  text-shadow: none !important;

  margin-block-end: 0.5rem !important;

  transition: letter-spacing 0.4s ease, transform 0.4s ease !important;

}



/* Title  always accent gold, zero shadow, sharp */

.tfd-showcase__label-zone .tfd-showcase__title {

  font-size: clamp(2rem, 3.5vw, 4rem) !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  font-weight: 700 !important;

  line-height: 1.0 !important;

  text-transform: uppercase !important;

  letter-spacing: -0.02em !important;

  margin-block: 0.15rem !important;

  text-shadow: none !important;

  transition: color 0.3s ease, letter-spacing 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



/* Category */

.tfd-showcase__label-zone .tfd-showcase__category {

  font-size: clamp(0.65rem, 0.85vw, 0.8rem) !important;

  color: rgba(255, 255, 255, 0.65) !important;

  letter-spacing: 0.15em !important;

  text-transform: uppercase !important;

  text-shadow: none !important;

  opacity: 0.7 !important;

  transform: translateY(3px) !important;

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease !important;

}



.tfd-showcase__label-zone .tfd-showcase__category::before {

  content: " " !important;

  opacity: 0.5 !important;

}



/* Hover micro-moves */

.tfd-showcase__label-zone:hover .tfd-showcase__num {

  letter-spacing: 0.35em !important;

  transform: translateY(-2px) !important;

}



.tfd-showcase__label-zone:hover .tfd-showcase__title {

  color: #ffffff !important;

  letter-spacing: 0.01em !important;

}



.tfd-showcase__label-zone:hover .tfd-showcase__category {

  transform: translateY(0) !important;

  opacity: 1 !important;

  color: rgba(255, 255, 255, 0.9) !important;

}



/* =====================================================

   SHOWCASE LABELS  GUARANTEED READABILITY FIX

   backdrop-filter: brightness() darkens the ACTUAL

   WebGL image pixels  works on white OR black bg.

   ===================================================== */



.tfd-showcase__label-zone::before,

a.tfd-showcase__label-zone::before {

  content: "" !important;

  position: absolute !important;

  inset: -2rem -3rem !important;

  /* backdrop-filter darkens whatever image is behind  guaranteed contrast */

  backdrop-filter: brightness(0.18) !important;

  -webkit-backdrop-filter: brightness(0.18) !important;

  /* Fallback rgba tint for browsers without backdrop-filter support */

  background: rgba(0, 0, 0, 0.55) !important;

  opacity: 0 !important;

  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;

  pointer-events: none !important;

  z-index: 0 !important;

  border-radius: 2px !important;

}



.tfd-showcase__label-zone:hover::before,

a.tfd-showcase__label-zone:hover::before {

  opacity: 1 !important;

}



/* On hover: title must be white (dark veil guarantees contrast) */

.tfd-showcase__label-zone:hover .tfd-showcase__title {

  color: #ffffff !important;

  letter-spacing: 0.01em !important;

  text-shadow: none !important;

}



/* Default: title stays accent gold (readable on any unmodified bg) */

.tfd-showcase__label-zone .tfd-showcase__title {

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  text-shadow: none !important;

}



/* No shadow anywhere */

.tfd-showcase__label-zone .tfd-showcase__num,

.tfd-showcase__label-zone .tfd-showcase__category {

  text-shadow: none !important;

}



/* =====================================================

   SHOWCASE LABEL VEIL  Real HTML div child

   backdrop-filter: brightness() physically darkens

   the WebGL canvas pixels behind the text.

   Guaranteed readable on white OR black backgrounds.

   ===================================================== */



.tfd-showcase__label-veil {

  position: absolute !important;

  inset: -1.8rem -2.8rem !important;

  backdrop-filter: brightness(0.15) !important;

  -webkit-backdrop-filter: brightness(0.15) !important;

  background: rgba(0, 0, 0, 0.45) !important;

  opacity: 0 !important;

  pointer-events: none !important;

  z-index: 0 !important;

  border-radius: 2px !important;

  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



/* Activate veil on hover */

.tfd-showcase__label-zone:hover .tfd-showcase__label-veil,

a.tfd-showcase__label-zone:hover .tfd-showcase__label-veil {

  opacity: 1 !important;

}



/* Ensure text children sit above the veil */

.tfd-showcase__label-zone .tfd-showcase__num,

.tfd-showcase__label-zone .tfd-showcase__title,

.tfd-showcase__label-zone .tfd-showcase__category {

  position: relative !important;

  z-index: 1 !important;

  text-shadow: none !important;

}



/* Disable ALL pseudo-element backgrounds  veil handles it */

.tfd-showcase__label-zone::before,

a.tfd-showcase__label-zone::before {

  display: none !important;

}



.tfd-showcase__label-zone::after,

a.tfd-showcase__label-zone::after {

  display: none !important;

}



/* On hover: title flips to white (veil guarantees contrast) */

.tfd-showcase__label-zone:hover .tfd-showcase__title,

a.tfd-showcase__label-zone:hover .tfd-showcase__title {

  color: #ffffff !important;

  text-shadow: none !important;

}



/* Default: title gold (readable without any veil on any bg) */

.tfd-showcase__label-zone .tfd-showcase__title,

a.tfd-showcase__label-zone .tfd-showcase__title {

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  text-shadow: none !important;

}



/* Float zone up on hover */

.tfd-showcase__label-zone:hover,

a.tfd-showcase__label-zone:hover {

  transform: translateX(-50%) translateY(calc(-50% - 8px)) !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



/* Hover: category becomes fully visible */

.tfd-showcase__label-zone:hover .tfd-showcase__category,

a.tfd-showcase__label-zone:hover .tfd-showcase__category {

  opacity: 1 !important;

  transform: translateY(0) !important;

  color: rgba(255, 255, 255, 0.9) !important;

}



/* Default: category slightly faded */

.tfd-showcase__label-zone .tfd-showcase__category {

  opacity: 0.7 !important;

  transform: translateY(3px) !important;

  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

}



/* =====================================================

   LABEL VEIL  Diagonal parallelogram shape

   skewX matches the column diagonal angle (-16.7deg)

   so the dark overlay follows the column geometry

   ===================================================== */



.tfd-showcase__label-veil {

  transform: skewX(-16.7deg) !important;

}



/* Activation on hover stays the same */

.tfd-showcase__label-zone:hover .tfd-showcase__label-veil,

a.tfd-showcase__label-zone:hover .tfd-showcase__label-veil {

  opacity: 1 !important;

}



/* =====================================================

   PORTFOLIO HOVER FIX  Remove Blur

   The user requested to remove the blur on portfolio 

   items in home 2, keeping them sharp.

   ===================================================== */



.tft-portfolio__card:hover .tft-portfolio__card-img {

  filter: blur(0px) brightness(0.6) grayscale(0.2) !important;

}



/* =====================================================

   ARCHIVE HOVER FIX  Remove Blur

   The user requested to remove the blur on Archive items

   in home 2, keeping them sharp and clear on hover.

   ===================================================== */



.tft-alt-hero__item:hover .tft-alt-hero__img-wrap,

.tft-alt-hero__item:hover .tft-alt-hero__img {

  filter: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



/* =====================================================

   ARCHIVE TEXT BLUR FIX (WEBKIT RASTERIZATION)

   Forces the browser to re-rasterize the text at the larger 

   scale instead of stretching the low-res composite layer.

   ===================================================== */



.tft-alt-hero__item:hover .tft-alt-hero__stationary,

.tft-alt-hero__item:hover .tft-alt-hero__float-item {

  will-change: auto !important;

}



.tft-alt-hero__item:hover .tft-alt-hero__card-name,

.tft-alt-hero__item:hover .tft-alt-hero__card-cat {

  -webkit-font-smoothing: antialiased !important;

  -moz-osx-font-smoothing: grayscale !important;

  text-rendering: optimizeLegibility !important;

  transform: translateZ(0) !important;

  backface-visibility: hidden !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: PREMIUM ACCORDION SMOOTHNESS

   ========================================================================== */

:root {

  interpolate-size: allow-keywords;

}



.tft-about-team__details-premium::details-content {

  transition: block-size 0.5s var(--cpf-ease), content-visibility 0.5s var(--cpf-ease), opacity 0.5s var(--cpf-ease);

  block-size: 0;

  opacity: 0;

  overflow: hidden;

}



.tft-about-team__details-premium[open]::details-content {

  block-size: auto;

  opacity: 1;

}



.tft-about-team__details-premium {

  transition: background 0.4s var(--cpf-ease), transform 0.4s var(--cpf-ease), border-color 0.4s var(--cpf-ease) !important;

}



.tft-about-team__details-premium:hover {

  transform: translateX(5px);

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.tft-about-team__summary-title {

  transition: color 0.4s var(--cpf-ease) !important;

}



.tft-about-team__details-premium:hover .tft-about-team__summary-title {

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



/* ==========================================================================

   SOVEREIGN ELITE: ARCHITECTURAL CORE — 3-COLUMN VISIBLE IMAGE FIX

   Root cause: images were invisible at opacity 0.4 behind a black radial overlay.

   Fix: new .tft-about-core__img-col column with real visible image frames.

   ========================================================================== */



/* Override 2-col grid to 3-col */

.tft-about-core__layout {

  grid-template-columns: 280px 1fr 1fr !important;

  gap: 5rem !important;

}



/* Image column container — stacks all frames in same spot */

.tft-about-core__img-col {

  position: relative !important;

  width: 100% !important;

  aspect-ratio: 4 / 3 !important;

  border-radius: 4px !important;

  overflow: hidden !important;

}



/* Each frame is absolutely stacked, invisible by default */

.tft-about-core__img-frame {

  position: absolute !important;

  inset: 0 !important;

  opacity: 0 !important;

  transform: scale(1.04) !important;

  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s ease !important;

  border-radius: 4px !important;

  overflow: hidden !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

}



/* Active frame is fully visible */

.tft-about-core__img-frame.is-active {

  opacity: 1 !important;

  transform: scale(1) !important;

}



/* Image fills the frame perfectly */

.tft-about-core__img-frame img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

}



/* Accent label in bottom-left corner of image */

.tft-about-core__img-label {

  position: absolute !important;

  bottom: 1.5rem !important;

  inset-inline-start: 1.5rem !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.2em !important;

  color: var(--cpf-color-accent) !important;

  background: rgba(0, 0, 0, 0.75) !important;

  padding: 0.4rem 0.8rem !important;

  border-inline-start: 2px solid var(--cpf-color-accent) !important;

  backdrop-filter: blur(8px) !important;

}



/* Responsive: collapse to 1-column stack on mobile */

@media (max-width: 900px) {

  .tft-about-core__layout {

    grid-template-columns: 1fr !important;

    gap: 3rem !important;

  }



  .tft-about-core__img-col {

    aspect-ratio: 16 / 9 !important;

  }



  .tft-about-core__nav-group {

    flex-direction: row !important;

    flex-wrap: wrap !important;

  }



  .tft-about-core__btn {

    flex: 1 !important;

    min-width: 130px !important;

  }

}



/* ==========================================================================

   SOVEREIGN ELITE: ARCHITECTURAL CORE — FULLSCREEN BG IMAGE VISIBILITY FIX

   Revert to 2-col layout, boost bg image opacity, lighten overlay gradient.

   ========================================================================== */



/* Revert to 2-column: nav tabs + text panel */

.tft-about-core__layout {

  grid-template-columns: 300px 1fr !important;

  gap: 7rem !important;

}



/* Boost background image visibility — was 0.4 (invisible), now 0.65 */

.tft-about-core__bg-img.is-active {

  opacity: 0.65 !important;

  transform: scale(1) !important;

}



/* Soften the radial overlay so the image can breathe */

.tft-about-core__overlay {

  background: linear-gradient(to right,

      rgba(0, 0, 0, 0.92) 0%,

      rgba(0, 0, 0, 0.6) 40%,

      rgba(0, 0, 0, 0.2) 100%) !important;

}



/* Responsive: single column on mobile */

@media (max-width: 900px) {

  .tft-about-core__layout {

    grid-template-columns: 1fr !important;

    gap: 3rem !important;

  }

}



/* ==========================================================================

   SINGLE POST PAGE  tft-sp__* components

   Appended per APPEND-ONLY rule. All values use :root variables.

   ========================================================================== */



/* Progress Bar */

.tft-sp__progress-wrap {

  position: fixed;

  inset-block-start: 0;

  inset-inline: 0;

  height: 3px;

  background: rgba(255, 255, 255, 0.06);

  z-index: 9999;

}



.tft-sp__progress-fill {

  height: 100%;

  width: 0%;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  transition: width 0.1s linear;

}



/* Hero Section */

.tft-sp__hero {

  padding-top: clamp(150px, 20vh, 200px) !important;

  position: relative;

  block-size: 100svh;

  min-block-size: 600px;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  background: var(--cpf-color-dark);

}



.tft-sp__hero-media {

  position: absolute;

  inset: 0;

}



.tft-sp__hero-img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  opacity: 0.45;

  transform: scale(1.04);

  transition: transform 8s ease;

  filter: grayscale(30%);

}



.tft-sp__hero:hover .tft-sp__hero-img {

  transform: scale(1);

}



.tft-sp__hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, var(--cpf-color-page-bg, #121212) 0%, rgba(18, 18, 18, 0.6) 50%, transparent 100%);

}



.tft-sp__hero-content {

  position: relative;

  z-index: 2;

  inline-size: 100%;

  padding-block-end: clamp(3rem, 6vw, 6rem);

  padding-inline: clamp(1.5rem, 6vw, 8rem);

  display: flex;

  flex-direction: column;

  gap: 2rem;

  justify-content: flex-start !important;

}



.tft-sp__hero-inner {

  max-inline-size: 900px;

}



.tft-sp__hero-meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin-block-end: 1.5rem;

}



.tft-sp__hero-cat {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-xs);

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--cpf-color-dark);

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  padding-block: 0.3rem;

  padding-inline: 0.875rem;

  border-radius: 2px;

}



.tft-sp__hero-sep {

  color: rgba(255, 255, 255, 0.2);

  font-family: var(--cpf-font-mono);

}



.tft-sp__hero-date,

.tft-sp__hero-read {

  font-family: var(--cpf-font-mono);

  font-size: var(--cpf-text-xs);

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

}



.tft-sp__hero-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(4rem, 12vw, 11rem);

  line-height: 0.92;

  letter-spacing: -0.03em;

  color: var(--cpf-color-white);

  margin-block-end: 1.5rem;

}



.tft-sp__hero-accent {

  font-style: italic;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  display: block;

}



.tft-sp__hero-sub {

  font-family: var(--cpf-font-body);

  font-size: var(--cpf-text-sm);

  color: rgba(255, 255, 255, 0.5);

  max-inline-size: 560px;

  line-height: 1.7;

  margin-block-end: 2rem;

}



.tft-sp__hero-author {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.tft-sp__author-avatar {

  inline-size: 48px;

  block-size: 48px;

  border-radius: 50%;

  overflow: hidden;

  border: 2px solid var(--cpf-color-accent, var(--cpf-color-accent));

  flex-shrink: 0;

}



.tft-sp__author-avatar img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

}



.tft-sp__author-info {

  display: flex;

  flex-direction: column;

  gap: 0.2rem;

}



.tft-sp__author-label {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.3);

}



.tft-sp__author-name {

  font-family: var(--cpf-font-display);

  font-size: 1.1rem;

  color: var(--cpf-color-white);

}



.tft-sp__hero-scroll {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.75rem;

  opacity: 0.4;

  align-self: flex-end;

}



.tft-sp__scroll-label {

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: var(--cpf-color-white);

  writing-mode: vertical-lr;

}



.tft-sp__scroll-mouse {

  inline-size: 20px;

  block-size: 34px;

  border-radius: 10px;

  border: 1.5px solid rgba(255, 255, 255, 0.3);

  display: flex;

  justify-content: center;

  padding-block-start: 6px;

}



.tft-sp__scroll-dot {

  inline-size: 4px;

  block-size: 8px;

  border-radius: 2px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  animation: tft-sp-bounce 1.6s ease-in-out infinite;

}



@keyframes tft-sp-bounce {



  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(8px);

  }

}



/* Article Body Layout */

.tft-sp__body {

  background: var(--cpf-color-page-bg, #121212);

  padding-block: clamp(4rem, 8vw, 8rem);

}



.tft-sp__body-container {

  max-inline-size: 1300px;

  margin-inline: auto;

  padding-inline: clamp(1.25rem, 5vw, 4rem);

  display: grid;

  grid-template-columns: 260px 1fr;

  gap: clamp(3rem, 6vw, 7rem);

  align-items: start;

}



/* Sticky Sidebar */

.tft-sp__sidebar {

  position: sticky;

  inset-block-start: 120px;

  display: flex;

  flex-direction: column;

  gap: 3rem;

}



/* TOC */

.tft-sp__toc-label {

  font-family: var(--cpf-font-mono);

  font-size: 0.62rem;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.25);

  margin-block-end: 1.25rem;

  display: block;

}



.tft-sp__toc-list {

  display: flex;

  flex-direction: column;

  gap: 0;

}



.tft-sp__toc-item {

  border-block-start: 1px solid rgba(255, 255, 255, 0.06);

}



.tft-sp__toc-link {

  display: flex;

  align-items: center;

  gap: 0.875rem;

  padding-block: 0.875rem;

  text-decoration: none;

  transition: all var(--cpf-transition);

  position: relative;

}



.tft-sp__toc-link::before {

  content: '';

  position: absolute;

  inset-inline-start: -1rem;

  inset-block: 0;

  inline-size: 2px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  transform: scaleY(0);

  transition: transform var(--cpf-transition);

}



.tft-sp__toc-link.is-active::before,

.tft-sp__toc-link:hover::before {

  transform: scaleY(1);

}



.tft-sp__toc-num {

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.2);

  transition: color var(--cpf-transition);

  flex-shrink: 0;

}



.tft-sp__toc-text {

  font-family: var(--cpf-font-body);

  font-size: 0.8rem;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.4);

  transition: color var(--cpf-transition);

}



.tft-sp__toc-link:hover .tft-sp__toc-text,

.tft-sp__toc-link.is-active .tft-sp__toc-text {

  color: var(--cpf-color-white);

}



.tft-sp__toc-link.is-active .tft-sp__toc-num {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Share */

.tft-sp__share-list {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.tft-sp__share-btn {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding-block: 0.6rem;

  padding-inline: 0.875rem;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: var(--cpf-radius-sm);

  text-decoration: none;

  transition: all var(--cpf-transition);

  background: rgba(255, 255, 255, 0.02);

}



.tft-sp__share-btn:hover {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

  background: rgba(232, 185, 35, 0.05);

}



.tft-sp__share-icon {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  font-weight: 700;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  inline-size: 28px;

  block-size: 28px;

  border-radius: 50%;

  border: 1px solid rgba(232, 185, 35, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.tft-sp__share-txt {

  font-family: var(--cpf-font-body);

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.5);

  transition: color var(--cpf-transition);

}



.tft-sp__share-btn:hover .tft-sp__share-txt {

  color: var(--cpf-color-white);

}



/* Tags */

.tft-sp__tags-list {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}



.tft-sp__tag {

  font-family: var(--cpf-font-mono);

  font-size: 0.62rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 2px;

  padding-block: 0.35rem;

  padding-inline: 0.75rem;

  text-decoration: none;

  transition: all var(--cpf-transition);

}



.tft-sp__tag:hover {

  color: var(--cpf-color-dark);

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Article Typography */

.tft-sp__article {

  min-inline-size: 0;

}



.tft-sp__section {

  margin-block-end: clamp(3rem, 6vw, 5rem);

}



.tft-sp__section-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(1.8rem, 4vw, 3.2rem);

  line-height: 1;

  letter-spacing: -0.02em;

  color: var(--cpf-color-white);

  margin-block-end: 1.5rem;

}



.tft-sp__p {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.95rem, 1.5vw, 1.1rem);

  line-height: 1.85;

  color: rgba(255, 255, 255, 0.6);

  margin-block-end: 1.25rem;

}



.tft-sp__blockquote {

  border-inline-start: 3px solid var(--cpf-color-accent, var(--cpf-color-accent));

  padding-inline-start: 2rem;

  margin-block: 2.5rem;

}



.tft-sp__blockquote p {

  font-family: var(--cpf-font-display);

  font-size: clamp(1.4rem, 3vw, 2.2rem);

  font-style: italic;

  line-height: 1.2;

  color: var(--cpf-color-white);

  margin-block-end: 0.75rem;

}



.tft-sp__cite {

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.3);

  font-style: normal;

}



.tft-sp__figure {

  margin-block: clamp(2.5rem, 5vw, 4rem);

}



.tft-sp__figure-img {

  inline-size: 100%;

  block-size: auto;

  aspect-ratio: 16/9;

  object-fit: cover;

  filter: grayscale(20%);

  transition: filter 0.8s ease;

  border-radius: 4px;

}



.tft-sp__figure:hover .tft-sp__figure-img {

  filter: grayscale(0%);

}



.tft-sp__figcaption {

  margin-block-start: 0.875rem;

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.25);

}



/* Callout box */

.tft-sp__callout {

  display: flex;

  gap: 1.25rem;

  padding: 1.75rem;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-inline-start: 3px solid var(--cpf-color-accent, var(--cpf-color-accent));

  border-radius: 4px;

  margin-block: 2rem;

}



.tft-sp__callout-icon {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  font-size: 1rem;

  flex-shrink: 0;

  padding-block-start: 0.15rem;

}



.tft-sp__callout-title {

  font-family: var(--cpf-font-display);

  font-size: 1.1rem;

  font-style: italic;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-block-end: 0.5rem;

}



.tft-sp__callout-text {

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.5);

}



/* Two-col grid */

.tft-sp__two-col {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.5rem;

  margin-block-start: 2rem;

}



.tft-sp__two-col-item {

  padding: 1.5rem;

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 4px;

  background: rgba(255, 255, 255, 0.02);

  transition: border-color var(--cpf-transition), background var(--cpf-transition);

}



.tft-sp__two-col-item:hover {

  border-color: rgba(232, 185, 35, 0.3);

  background: rgba(232, 185, 35, 0.03);

}



.tft-sp__two-col-num {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 0.62rem;

  letter-spacing: 0.2em;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-block-end: 0.75rem;

}



.tft-sp__two-col-title {

  font-family: var(--cpf-font-display);

  font-size: 1.1rem;

  color: var(--cpf-color-white);

  margin-block-end: 0.5rem;

}



.tft-sp__two-col-text {

  font-family: var(--cpf-font-body);

  font-size: 0.8rem;

  line-height: 1.65;

  color: rgba(255, 255, 255, 0.4);

}



/* Author Bio */

.tft-sp__author-bio {

  display: flex;

  gap: 2rem;

  align-items: flex-start;

  padding-block: 2.5rem;

  border-block-start: 1px solid rgba(255, 255, 255, 0.08);

  border-block-end: 1px solid rgba(255, 255, 255, 0.08);

  margin-block-start: 4rem;

}



.tft-sp__author-bio-avatar {

  inline-size: 100px;

  block-size: 100px;

  border-radius: 50%;

  overflow: hidden;

  border: 3px solid rgba(255, 255, 255, 0.06);

  flex-shrink: 0;

}



.tft-sp__author-bio-avatar img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

}



.tft-sp__author-bio-label {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 0.62rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-block-end: 0.5rem;

}



.tft-sp__author-bio-name {

  font-family: var(--cpf-font-display);

  font-size: 1.8rem;

  color: var(--cpf-color-white);

  margin-block-end: 0.75rem;

}



.tft-sp__author-bio-text {

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.45);

  margin-block-end: 1rem;

}



.tft-sp__author-bio-socials {

  display: flex;

  gap: 0.75rem;

}



.tft-sp__author-bio-social {

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.3);

  text-decoration: none;

  padding-block: 0.4rem;

  padding-inline: 0.75rem;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 2px;

  transition: all var(--cpf-transition);

}



.tft-sp__author-bio-social:hover {

  color: var(--cpf-color-dark);

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Comments Section */

.tft-sp__comments {

  background: var(--cpf-color-dark);

  padding-block: clamp(4rem, 8vw, 7rem);

}



.tft-sp__comments-container {

  max-inline-size: 900px;

  margin-inline: auto;

  padding-inline: clamp(1.25rem, 5vw, 4rem);

}



.tft-sp__comments-header {

  margin-block-end: 3rem;

}



.tft-sp__comments-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(2rem, 5vw, 3.5rem);

  color: var(--cpf-color-white);

  line-height: 1;

}



.tft-sp__comments-count {

  font-style: italic;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Comment items */

.tft-sp__comment-list {

  display: flex;

  flex-direction: column;

  gap: 2.5rem;

  margin: 0;

  margin-block-end: 4rem;

  padding: 0;

  list-style: none;

}



.tft-sp__comment-list .children {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.tft-sp__comment {

  display: flex;

  gap: 1.25rem;

}



.tft-sp__comment--reply {

  margin-block-start: 1.5rem;

  margin-inline-start: 1.5rem;

  padding-inline-start: 1.5rem;

  border-inline-start: 1px solid rgba(255, 255, 255, 0.06);

}



.tft-sp__comment-avatar {

  inline-size: 52px;

  block-size: 52px;

  border-radius: 50%;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);

  flex-shrink: 0;

  background: rgba(255, 255, 255, 0.04);

}



.tft-sp__comment-avatar img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  filter: grayscale(30%);

}



.tft-sp__comment-avatar--author {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__comment-avatar--author img {

  filter: none;

}



.tft-sp__comment-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-block-end: 0.5rem;

  flex-wrap: wrap;

  gap: 0.5rem;

}



.tft-sp__comment-name {

  font-family: var(--cpf-font-display);

  font-size: 1.05rem;

  color: var(--cpf-color-white);

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.tft-sp__comment-badge {

  font-family: var(--cpf-font-mono);

  font-size: 0.55rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

  background: rgba(255, 255, 255, 0.06);

  padding-block: 0.2rem;

  padding-inline: 0.5rem;

  border-radius: 2px;

  font-style: normal;

}



.tft-sp__comment-time {

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.2);

}



.tft-sp__comment-text {

  font-family: var(--cpf-font-body);

  font-size: 0.875rem;

  line-height: 1.75;

  color: rgba(255, 255, 255, 0.5);

  margin-block-end: 0.875rem;

}



.tft-sp__comment-reply {

  background: none;

  border: none;

  cursor: pointer;

  font-family: var(--cpf-font-mono);

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  padding: 0;

  transition: opacity var(--cpf-transition);

}



.tft-sp__comment-reply:hover {

  opacity: 0.6;

}



/* Comment Form */

.tft-sp__comment-form-wrap {

  margin-block-start: 4rem;

}



.tft-sp__comment-form-header {

  margin-block-end: 3.5rem;

}



.tft-sp__comment-form-label {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 0.62rem;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.25);

  margin-block-end: 1rem;

}



.tft-sp__comment-form-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 7vw, 5rem);

  color: var(--cpf-color-white);

  line-height: 1.1;

  margin: 0;

}



.tft-sp__comment-form-title em {

  display: block;

  font-style: italic;

  color: transparent;

  -webkit-text-stroke: 1.5px var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__logged-in-notice {

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  color: rgba(255, 255, 255, 0.6);

  margin-block-end: 2.5rem;

}



.tft-sp__logged-in-notice a {

  color: var(--cpf-color-white);

  text-decoration: none;

  border-block-end: 1px solid rgba(255, 255, 255, 0.3);

  transition: color var(--cpf-transition), border-color var(--cpf-transition);

}



.tft-sp__logged-in-notice a:hover {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__comment-form {

  display: block;

}



.tft-sp__form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2.5rem;

  margin-block-end: 2.5rem;

}



@media (max-width: 768px) {

  .tft-sp__form-row {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }

}



.tft-sp__form-group {

  position: relative;

  margin-block-end: 2.5rem;

}



.tft-sp__form-group--full {

  margin-block-end: 3rem;

}



.tft-sp__form-input,

.tft-sp__form-textarea {

  inline-size: 100%;

  background: transparent;

  border: none;

  border-block-end: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 0;

  padding-block: 0.75rem;

  padding-inline: 0;

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  color: var(--cpf-color-white);

  transition: border-color var(--cpf-transition);

  outline: none;

}



.tft-sp__form-input::placeholder,

.tft-sp__form-textarea::placeholder {

  color: rgba(255, 255, 255, 0.35);

}



.tft-sp__form-input:focus,

.tft-sp__form-textarea:focus {

  border-block-end-color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__form-textarea {

  min-block-size: 140px;

  resize: vertical;

}



.tft-sp__form-btn {

  display: inline-flex;

  align-items: center;

  gap: 1.25rem;

  background: transparent;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  border: 1px solid var(--cpf-color-accent, var(--cpf-color-accent));

  cursor: pointer;

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  padding-block: 1.1rem;

  padding-inline: 2.5rem;

  border-radius: 2px;

  transition: all var(--cpf-transition);

}



.tft-sp__form-btn:hover {

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  color: var(--cpf-color-dark);

}



.tft-sp__form-btn-arrow {

  font-size: 1.1rem;

  transition: transform var(--cpf-transition);

}



.tft-sp__form-btn:hover .tft-sp__form-btn-arrow {

  transform: translateX(4px);

}



/* Related Posts */

.tft-sp__related {

  background: var(--cpf-color-page-bg, #121212);

  padding-block: clamp(4rem, 8vw, 7rem);

}



.tft-sp__related-container {

  max-inline-size: 1300px;

  margin-inline: auto;

  padding-inline: clamp(1.25rem, 5vw, 4rem);

}



.tft-sp__related-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-block-end: 3rem;

  flex-wrap: wrap;

  gap: 1rem;

}



.tft-sp__related-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(2rem, 5vw, 3.5rem);

  color: var(--cpf-color-white);

  line-height: 1;

}



.tft-sp__related-title em {

  font-style: italic;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__related-all {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.35);

  text-decoration: none;

  transition: color var(--cpf-transition);

}



.tft-sp__related-all:hover {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__related-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}



.tft-sp__related-card {

  overflow: hidden;

}



.tft-sp__related-link {

  text-decoration: none;

  display: block;

}



.tft-sp__related-media {

  position: relative;

  aspect-ratio: 4/3;

  overflow: hidden;

  margin-block-end: 1rem;

  background: rgba(255, 255, 255, 0.04);

}



.tft-sp__related-img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  filter: grayscale(25%);

  transform: scale(1.02);

  transition: filter 0.7s ease, transform 0.7s ease;

}



.tft-sp__related-link:hover .tft-sp__related-img {

  filter: grayscale(0%);

  transform: scale(1.06);

}



.tft-sp__related-media-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(10, 10, 10, 0.6) 0%, transparent 60%);

  transition: opacity var(--cpf-transition);

}



.tft-sp__related-link:hover .tft-sp__related-media-overlay {

  opacity: 0.5;

}



.tft-sp__related-cat {

  display: block;

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-block-end: 0.5rem;

}



.tft-sp__related-card-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(1.1rem, 2vw, 1.6rem);

  color: var(--cpf-color-white);

  line-height: 1.1;

  margin-block-end: 0.5rem;

  transition: color var(--cpf-transition);

}



.tft-sp__related-link:hover .tft-sp__related-card-title {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__related-date {

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  letter-spacing: 0.12em;

  color: rgba(255, 255, 255, 0.2);

}



/* Responsive */

@media (max-width: 1024px) {

  .tft-sp__body-container {

    grid-template-columns: 220px 1fr;

    gap: 3rem;

  }



  .tft-sp__related-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 768px) {

  .tft-sp__body-container {

    grid-template-columns: 1fr;

  }



  .tft-sp__sidebar {

    position: static;

    flex-direction: row;

    flex-wrap: wrap;

    gap: 2rem;

    border-block-end: 1px solid rgba(255, 255, 255, 0.06);

    padding-block-end: 2rem;

    margin-block-end: 2.5rem;

  }



  .tft-sp__toc {

    flex: 1 1 200px;

  }



  .tft-sp__share {

    flex: 0 1 auto;

  }



  .tft-sp__tags {

    flex: 1 1 100%;

  }



  .tft-sp__comment-form {

    grid-template-columns: 1fr;

  }



  .tft-sp__two-col {

    grid-template-columns: 1fr;

  }



  .tft-sp__related-grid {

    grid-template-columns: 1fr;

  }



  .tft-sp__author-bio {

    flex-direction: column;

    align-items: center;

    text-align: center;

  }



  .tft-sp__author-bio-socials {

    justify-content: center;

  }



  .tft-sp__hero-scroll {

    display: none;

  }

}



@media (max-width: 480px) {

  .tft-sp__hero-title {

    font-size: clamp(3rem, 14vw, 5rem);

  }



  .tft-sp__related-grid {

    grid-template-columns: 1fr;

  }

}



/* ==========================================================================

   ENHANCED COMMENT TREE v2  tft-sp__thread / tft-sp__comment--root

   ========================================================================== */



/* Header row with sort */

.tft-sp__comments-header {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 1.5rem;

  margin-block-end: 3rem;

}



.tft-sp__comments-sub {

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.3);

  margin-block-start: 0.5rem;

}



.tft-sp__comments-sort {

  display: flex;

  gap: 0.5rem;

}



.tft-sp__sort-btn {

  font-family: var(--cpf-font-mono);

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.3);

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 2px;

  padding-block: 0.45rem;

  padding-inline: 1rem;

  cursor: pointer;

  transition: all var(--cpf-transition);

}



.tft-sp__sort-btn:hover,

.tft-sp__sort-btn.is-active {

  color: var(--cpf-color-dark);

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Thread wrapper removed in favor of semantic ul/li structure */

/*

.tft-sp__thread {

  position: relative;

  margin-block-end: 0;

}



.tft-sp__thread+.tft-sp__thread {

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

  padding-block-start: 2rem;

  margin-block-start: 2rem;

}

*/



/* Comment base */

.tft-sp__comment {

  display: flex;

  gap: 1.25rem;

  position: relative;

}



.tft-sp__comment:focus-within {

  outline: none;

}



/* Comment aside (avatar + thread line) */

.tft-sp__comment-aside {

  display: flex;

  flex-direction: column;

  align-items: center;

  flex-shrink: 0;

}



.tft-sp__thread-line {

  inline-size: 2px;

  flex: 1;

  min-block-size: 20px;

  background: linear-gradient(to bottom, rgba(232, 185, 35, 0.25) 0%, rgba(255, 255, 255, 0.04) 100%);

  border-radius: 1px;

  margin-block-start: 8px;

}



/* Avatar */

.tft-sp__comment-avatar {

  position: relative;

  inline-size: 52px;

  block-size: 52px;

  border-radius: 50%;

  overflow: hidden;

  border: 1.5px solid rgba(255, 255, 255, 0.08);

  background: rgba(255, 255, 255, 0.04);

  flex-shrink: 0;

  transition: border-color var(--cpf-transition);

}



.tft-sp__comment-avatar img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

  filter: grayscale(20%);

  transition: filter var(--cpf-transition);

}



.tft-sp__comment:hover .tft-sp__comment-avatar {

  border-color: rgba(255, 255, 255, 0.2);

}



.tft-sp__comment:hover .tft-sp__comment-avatar img {

  filter: grayscale(0%);

}



.tft-sp__comment-avatar--author {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.tft-sp__comment-avatar--author img {

  filter: none !important;

}



.tft-sp__avatar-author-dot {

  position: absolute;

  inset-block-end: 2px;

  inset-inline-end: 2px;

  inline-size: 10px;

  block-size: 10px;

  border-radius: 50%;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  border: 2px solid var(--cpf-color-dark);

}



/* Comment body */

.tft-sp__comment-body {

  flex: 1;

  min-inline-size: 0;

  padding-block-end: 1.5rem;

}



/* Header row */

.tft-sp__comment-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 1rem;

  margin-block-end: 0.625rem;

}



.tft-sp__comment-identity {

  display: flex;

  align-items: center;

  gap: 0.625rem;

  flex-wrap: wrap;

}



.tft-sp__comment-meta-right {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  flex-shrink: 0;

}



/* Name */

.tft-sp__comment-name {

  font-family: var(--cpf-font-display);

  font-size: 1rem;

  color: var(--cpf-color-white);

  line-height: 1;

}



/* Role badges */

.tft-sp__comment-role {

  font-family: var(--cpf-font-mono);

  font-size: 0.55rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding-block: 0.25rem;

  padding-inline: 0.6rem;

  border-radius: 2px;

}



.tft-sp__comment-role--author {

  color: var(--cpf-color-dark);

  background: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__comment-role--community {

  color: rgba(255, 255, 255, 0.35);

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.08);

}



/* Time */

.tft-sp__comment-time {

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.2);

}



/* Options button */

.tft-sp__comment-options {

  background: none;

  border: none;

  cursor: pointer;

  color: rgba(255, 255, 255, 0.2);

  font-size: 1.1rem;

  line-height: 1;

  padding: 0.25rem;

  border-radius: 3px;

  transition: all var(--cpf-transition);

  opacity: 0;

}



.tft-sp__comment:hover .tft-sp__comment-options {

  opacity: 1;

}



.tft-sp__comment-options:hover {

  color: var(--cpf-color-white);

  background: rgba(255, 255, 255, 0.06);

}



/* Comment text */

.tft-sp__comment-text {

  font-family: var(--cpf-font-body);

  font-size: 0.9rem;

  line-height: 1.75;

  color: rgba(255, 255, 255, 0.55);

  margin-block-end: 1rem;

  transition: color var(--cpf-transition);

}



.tft-sp__comment:hover .tft-sp__comment-text {

  color: rgba(255, 255, 255, 0.7);

}



/* Action bar */

.tft-sp__comment-actions {

  display: flex;

  align-items: center;

  gap: 1.25rem;

  flex-wrap: wrap;

}



/* Like button */

.tft-sp__like-btn {

  display: flex;

  align-items: center;

  gap: 0.45rem;

  background: none;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 20px;

  padding-block: 0.35rem;

  padding-inline: 0.875rem;

  cursor: pointer;

  color: rgba(255, 255, 255, 0.35);

  font-family: var(--cpf-font-mono);

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  transition: all var(--cpf-transition-md);

}



.tft-sp__like-btn:hover {

  border-color: rgba(232, 185, 35, 0.4);

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  background: rgba(232, 185, 35, 0.06);

}



.tft-sp__like-btn.is-liked {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  background: rgba(232, 185, 35, 0.08);

}



.tft-sp__like-btn.is-liked .tft-sp__like-icon {

  fill: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__like-icon {

  transition: fill var(--cpf-transition), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  flex-shrink: 0;

}



.tft-sp__like-btn:active .tft-sp__like-icon {

  transform: scale(1.3);

}



.tft-sp__like-count {

  transition: all 0.2s ease;

}



/* Reply / inline toggle buttons */

.tft-sp__reply-toggle,

.tft-sp__inline-reply-toggle {

  display: flex;

  align-items: center;

  gap: 0.4rem;

  background: none;

  border: none;

  cursor: pointer;

  font-family: var(--cpf-font-mono);

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.25);

  padding: 0;

  transition: color var(--cpf-transition);

}



.tft-sp__reply-toggle:hover,

.tft-sp__inline-reply-toggle:hover {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Nested reply comment */

.tft-sp__replies {

  margin-block-start: 1.25rem;

}



.tft-sp__comment--reply {

  margin-inline-start: 0;

  padding-inline-start: 1.5rem;

  border-inline-start: 2px solid rgba(232, 185, 35, 0.15);

  position: relative;

}



.tft-sp__comment--reply::before {

  content: '';

  position: absolute;

  inset-inline-start: -2px;

  inset-block-start: 0;

  block-size: 26px;

  inline-size: 2px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  opacity: 0.5;

}



.tft-sp__comment--reply .tft-sp__comment-avatar {

  inline-size: 44px;

  block-size: 44px;

}



/* Collapse/show replies */

.tft-sp__collapse-replies {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  margin-block-start: 0.75rem;

  background: none;

  border: none;

  cursor: pointer;

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.2);

  transition: color var(--cpf-transition);

  padding: 0;

}



.tft-sp__collapse-replies:hover {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__collapse-icon {

  inline-size: 16px;

  block-size: 16px;

  border: 1px solid currentColor;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 0.7rem;

  line-height: 1;

}



/* Inline reply form */

.tft-sp__inline-reply {

  margin-block-start: 1rem;

  animation: tft-reply-slide-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;

}



@keyframes tft-reply-slide-in {

  from {

    opacity: 0;

    transform: translateY(-8px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.tft-sp__inline-reply-inner {

  display: flex;

  gap: 0.875rem;

  align-items: flex-start;

}



.tft-sp__inline-reply-avatar {

  inline-size: 32px;

  block-size: 32px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

  border: 1.5px solid var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-sp__inline-reply-avatar img {

  inline-size: 100%;

  block-size: 100%;

  object-fit: cover;

}



.tft-sp__inline-reply-field-wrap {

  flex: 1;

  min-inline-size: 0;

}



.tft-sp__inline-reply-field {

  inline-size: 100%;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 6px;

  padding: 0.875rem 1rem;

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  color: var(--cpf-color-white);

  resize: vertical;

  outline: none;

  transition: border-color var(--cpf-transition), background var(--cpf-transition);

}



.tft-sp__inline-reply-field:focus {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

  background: rgba(232, 185, 35, 0.03);

}



.tft-sp__inline-reply-actions {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 0.75rem;

  margin-block-start: 0.625rem;

}



.tft-sp__inline-cancel {

  background: none;

  border: none;

  cursor: pointer;

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.25);

  transition: color var(--cpf-transition);

}



.tft-sp__inline-cancel:hover {

  color: var(--cpf-color-white);

}



.tft-sp__inline-submit {

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  border: none;

  cursor: pointer;

  font-family: var(--cpf-font-mono);

  font-size: 0.6rem;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--cpf-color-dark);

  padding-block: 0.5rem;

  padding-inline: 1.25rem;

  border-radius: 2px;

  transition: background var(--cpf-transition), transform var(--cpf-transition);

}



.tft-sp__inline-submit:hover {

  background: var(--cpf-color-white);

  transform: translateX(2px);

}



/* Responsive comment tree */

@media (max-width: 600px) {

  .tft-sp__comment-avatar {

    inline-size: 40px;

    block-size: 40px;

  }



  .tft-sp__comment--reply .tft-sp__comment-avatar {

    inline-size: 36px;

    block-size: 36px;

  }



  .tft-sp__comment-actions {

    gap: 0.75rem;

  }



  .tft-sp__comments-header {

    flex-direction: column;

    align-items: flex-start;

  }



  .tft-sp__inline-reply-inner {

    flex-direction: column;

  }



  .tft-sp__inline-reply-avatar {

    display: none;

  }

}











/* ==========================================================================

   DRAWER REDESIGN (CYBER-GLASS, PREMIUM, EYE-CATCHING) - V4

   ========================================================================== */



/* Drawer Container with Glassmorphism & Atmospheric Glow */

.cpf-drawer {

  background-color: rgba(8, 8, 8, 0.75) !important;

  backdrop-filter: blur(35px) !important;

  -webkit-backdrop-filter: blur(35px) !important;

  color: #ffffff !important;

  border-inline-start: 1px solid rgba(255, 255, 255, 0.06) !important;

  max-width: 580px !important;

  padding-inline: clamp(2.5rem, 6vw, 4.5rem) !important;

  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.8) !important;

  /* Removed position: relative !important so it stays fixed on the right */

}



/* Atmospheric Glowing Orb inside Drawer */

.cpf-drawer::before {

  content: '';

  position: absolute;

  top: 0%;

  left: -20%;

  width: 500px;

  height: 500px;

  background: radial-gradient(circle, rgba(64, 146, 153, 0.12) 0%, transparent 70%);

  border-radius: 50%;

  filter: blur(50px);

  z-index: -1;

  pointer-events: none;

}



.cpf-drawer::after {

  content: '';

  position: absolute;

  bottom: 10%;

  right: -20%;

  width: 400px;

  height: 400px;

  background: radial-gradient(circle, rgba(232, 185, 35, 0.08) 0%, transparent 70%);

  border-radius: 50%;

  filter: blur(50px);

  z-index: -1;

  pointer-events: none;

}



/* Close Button */

.cpf-drawer__close {

  color: #ffffff !important;

  opacity: 0.6 !important;

  top: 2.5rem !important;

  right: clamp(2.5rem, 6vw, 4.5rem) !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;

  width: 48px !important;

  height: 48px !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: rgba(255, 255, 255, 0.03) !important;

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.cpf-drawer__close:hover {

  opacity: 1 !important;

  color: var(--cpf-color-dark) !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transform: rotate(90deg) scale(1.1) !important;

}



/* Top Section */

.cpf-drawer__top {

  padding-block-start: 2.5rem !important;

  padding-block-end: 3.5rem !important;

  border-block-end: 1px solid rgba(255, 255, 255, 0.06) !important;

  padding-inline: 0 !important;

}



/* Menu Label */

.cpf-drawer__label {

  display: inline-flex !important;

  align-items: center !important;

  gap: 1rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.3em !important;

  text-transform: uppercase !important;

  margin-block-end: 3rem !important;

  padding-inline: 0 !important;

}



.cpf-drawer__label::before {

  content: '';

  width: 30px;

  height: 1px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Setup CSS Counter for the Menu */

.cpf-drawer__list {

  display: flex !important;

  flex-direction: column !important;

  gap: 1.5rem !important;

  counter-reset: menu-counter -1;

}



/* Links (Solid, elegant font) */

.cpf-drawer__link {

  position: relative !important;

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(2.2rem, 5vw, 3.2rem) !important;

  /* Slightly larger but not massive */

  font-weight: 400 !important;

  /* Changed from 300 to 400 for better solid visibility */

  letter-spacing: -0.01em !important;

  padding-inline: 0 !important;

  text-transform: capitalize !important;

  color: #ffffff !important;

  /* SOLID WHITE */

  -webkit-text-stroke: 0 !important;

  /* NO OUTLINE */

  opacity: 0.7 !important;

  /* Slightly dim by default */

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 1.5rem !important;

}



/* Numbering via counter */

.cpf-drawer__item {

  counter-increment: menu-counter;

}



.cpf-drawer__link::before {

  content: "0" counter(menu-counter) ".";

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  font-weight: 500 !important;

  letter-spacing: 0.1em !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  opacity: 0.5 !important;

  transform: translateY(-8px) !important;

  transition: all 0.4s ease !important;

}



/* Main Links Hover */

.cpf-drawer__item:not(.has-dropdown) .cpf-drawer__link:hover,

.cpf-drawer__item:not(.has-dropdown) .cpf-drawer__link.cpf-drawer__link--active {

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  /* TURN YELLOW ON HOVER */

  opacity: 1 !important;

  transform: translateX(10px) !important;

}



.cpf-drawer__item:not(.has-dropdown) .cpf-drawer__link:hover::before {

  opacity: 1 !important;

  transform: translateY(0) !important;

  color: #ffffff !important;

  /* Number turns white on hover to contrast with yellow text */

}



/* Reset the inner text transforms */

.cpf-drawer__link-text {

  transform: none !important;

  opacity: 1 !important;

}



/* Sublist (Portals) */

.cpf-drawer__item.has-dropdown {

  margin-block-end: 1.5rem !important;

  counter-reset: menu-counter 0;

  /* Reset so About starts at 01 */

}



.cpf-drawer__item.has-dropdown .cpf-drawer__link {

  font-size: clamp(2rem, 4vw, 2.6rem) !important;

  margin-block-end: 2rem !important;

  cursor: default !important;

  color: #ffffff !important;

  opacity: 1 !important;

  font-weight: 500 !important;

}



.cpf-drawer__item.has-dropdown .cpf-drawer__link::before {

  display: none !important;

  /* No number on portals header */

}



/* Sublist items */

.cpf-drawer__sublist {

  display: flex !important;

  flex-direction: column !important;

  gap: 1.25rem !important;

  border-inline-start: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding-inline-start: 2.5rem !important;

  margin-inline-start: 0.5rem !important;

  position: relative !important;

}



.cpf-drawer__sublink {

  font-family: var(--cpf-font-body) !important;

  font-size: 0.95rem !important;

  letter-spacing: 0.05em !important;

  color: rgba(255, 255, 255, 0.4) !important;

  text-decoration: none !important;

  font-weight: 400 !important;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  display: inline-flex !important;

  align-items: center !important;

  position: relative !important;

}



.cpf-drawer__sublink::before {

  content: '';

  position: absolute;

  left: -2.5rem;

  width: 0;

  height: 1px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  transition: width 0.4s ease !important;

}



.cpf-drawer__sublink:hover {

  color: #ffffff !important;

  transform: translateX(12px) !important;

}



.cpf-drawer__sublink:hover::before {

  width: 1.5rem;

}



/* Mid Section */

.cpf-drawer__mid {

  padding-inline: 0 !important;

  padding-block-start: 3.5rem !important;

}



.cpf-drawer__tiny-label {

  color: rgba(255, 255, 255, 0.3) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.6rem !important;

  text-transform: uppercase !important;

  letter-spacing: 0.25em !important;

  margin-block-end: 1.25rem !important;

}



/* Email */

.cpf-drawer__email {

  color: #ffffff !important;

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(1.4rem, 3vw, 1.8rem) !important;

  font-weight: 400 !important;

  letter-spacing: 0.02em !important;

  border-block-end: 1px solid rgba(255, 255, 255, 0.2) !important;

  padding-block-end: 0.5rem !important;

  transition: all 0.4s ease !important;

}



.cpf-drawer__email-wrapper:hover .cpf-drawer__email {

  color: var(--cpf-color-dark) !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-color: transparent !important;

  padding-inline: 0.75rem !important;

}



/* Location */

.cpf-drawer__location {

  color: #ffffff !important;

  align-items: center !important;

  margin-block-start: 1.5rem !important;

  display: flex !important;

  gap: 1.5rem !important;

}



.cpf-drawer__city {

  color: rgba(255, 255, 255, 0.5) !important;

  font-weight: 300 !important;

  letter-spacing: 0.05em !important;

}



.cpf-drawer__time {

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.2em !important;

  background: rgba(232, 185, 35, 0.08) !important;

  border: 1px solid rgba(232, 185, 35, 0.2) !important;

  padding: 0.4rem 0.8rem !important;

  border-radius: 4px !important;

}



/* Socials */

.cpf-drawer__socials {

  padding-block: 4rem 1rem !important;

}



.cpf-drawer__socials-list {

  gap: 1rem !important;

}



.cpf-drawer__social-link {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 44px !important;

  height: 44px !important;

  border-radius: 50% !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  color: rgba(255, 255, 255, 0.5) !important;

  font-weight: 500 !important;

  font-size: 0.75rem !important;

  letter-spacing: 0 !important;

  padding: 0 !important;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  background: rgba(255, 255, 255, 0.02) !important;

}



.cpf-drawer__social-link::after {

  display: none !important;

}



.cpf-drawer__social-link:hover {

  color: var(--cpf-color-dark) !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transform: translateY(-5px) scale(1.05) !important;

}



/* Legal Bottom */

.cpf-drawer__legal {

  padding-inline: 0 !important;

  border-block-start: 1px solid rgba(255, 255, 255, 0.06) !important;

  padding-block: 2.5rem !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  flex-wrap: wrap !important;

  gap: 1.5rem !important;

}



.cpf-drawer__legal-links {

  display: flex !important;

  gap: 2rem !important;

}



.cpf-drawer__legal-link {

  color: rgba(255, 255, 255, 0.4) !important;

  font-family: var(--cpf-font-body) !important;

  font-size: 0.75rem !important;

  font-weight: 400 !important;

  letter-spacing: 0.05em !important;

  text-decoration: none !important;

  transition: color 0.3s ease !important;

  position: relative !important;

}



.cpf-drawer__legal-link::after {

  content: '';

  position: absolute;

  bottom: -6px;

  left: 0;

  width: 0;

  height: 1px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  transition: width 0.4s ease;

}



.cpf-drawer__legal-link:hover {

  color: #ffffff !important;

}



.cpf-drawer__legal-link:hover::after {

  width: 100%;

}



.cpf-drawer__legal-copy {

  color: rgba(255, 255, 255, 0.2) !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.1em !important;

}



/* ==========================================================================

   SINGLE POST REDESIGN (CYBER/PREMIUM OVERHAUL)

   ========================================================================== */



/* 1. Feature Grid (Two-Col Numbered Blocks) */

.tft-sp__two-col {

  gap: 2.5rem !important;

  counter-reset: feature-counter !important;

}



.tft-sp__two-col-item {

  position: relative !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 100%) !important;

  padding: 3.5rem 3rem !important;

  overflow: hidden !important;

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;

  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02) !important;

}



.tft-sp__two-col-item:hover {

  transform: translateY(-5px) !important;

  border-color: rgba(232, 185, 35, 0.3) !important;

  box-shadow: inset 0 0 40px rgba(232, 185, 35, 0.05), 0 20px 40px rgba(0, 0, 0, 0.4) !important;

}



/* Giant background number */

.tft-sp__two-col-item::after {

  content: "0" counter(feature-counter) !important;

  position: absolute !important;

  right: -5% !important;

  bottom: -15% !important;

  font-family: var(--cpf-font-display) !important;

  font-size: 14rem !important;

  font-weight: 700 !important;

  color: rgba(255, 255, 255, 0.02) !important;

  line-height: 1 !important;

  pointer-events: none !important;

  transition: color 0.5s ease !important;

}



.tft-sp__two-col-item {

  counter-increment: feature-counter !important;

}



.tft-sp__two-col-item:hover::after {

  color: rgba(232, 185, 35, 0.05) !important;

}



/* The visible accent number */

.tft-sp__two-col-num {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.75rem !important;

  color: var(--cpf-color-dark) !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  padding: 0.4rem 0.8rem !important;

  border-radius: 2px !important;

  display: inline-block !important;

  margin-block-end: 2rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.15em !important;

}



.tft-sp__two-col-title {

  font-size: clamp(1.6rem, 3vw, 2rem) !important;

  margin-block-end: 1rem !important;

}



.tft-sp__two-col-text {

  font-size: 1rem !important;

  line-height: 1.7 !important;

  color: rgba(255, 255, 255, 0.5) !important;

}



/* 2. Author Bio */

.tft-sp__author-bio {

  border: none !important;

  padding: 5rem 0 !important;

  margin: 6rem 0 !important;

  position: relative !important;

  display: flex !important;

  gap: 4rem !important;

  align-items: center !important;

}



.tft-sp__author-bio::before,

.tft-sp__author-bio::after {

  content: '' !important;

  position: absolute !important;

  left: 0 !important;

  width: 100% !important;

  height: 1px !important;

  background: linear-gradient(90deg, rgba(232, 185, 35, 0.8) 0%, rgba(255, 255, 255, 0.05) 100%) !important;

}



.tft-sp__author-bio::before {

  top: 0 !important;

}



.tft-sp__author-bio::after {

  bottom: 0 !important;

}



.tft-sp__author-bio-avatar {

  width: 180px !important;

  height: 180px !important;

  border: 1px solid rgba(232, 185, 35, 0.4) !important;

  padding: 10px !important;

  border-radius: 50% !important;

  position: relative !important;

  flex-shrink: 0 !important;

}



.tft-sp__author-bio-avatar::before {

  content: '' !important;

  position: absolute !important;

  inset: -8px !important;

  border-radius: 50% !important;

  border: 1px dashed rgba(255, 255, 255, 0.2) !important;

  animation: tft-spin 20s linear infinite !important;

}



@keyframes tft-spin {

  100% {

    transform: rotate(360deg);

  }

}



.tft-sp__author-bio-label {

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.4em !important;

  margin-block-end: 1rem !important;

  display: block !important;

}



.tft-sp__author-bio-name {

  font-size: clamp(3rem, 6vw, 4.5rem) !important;

  margin-block-end: 1.5rem !important;

  letter-spacing: -0.03em !important;

}



.tft-sp__author-bio-text {

  font-size: 1.1rem !important;

  line-height: 1.8 !important;

  color: rgba(255, 255, 255, 0.5) !important;

  margin-block-end: 2.5rem !important;

  max-width: 800px !important;

}



.tft-sp__author-bio-socials {

  display: flex !important;

  gap: 1rem !important;

}



.tft-sp__author-bio-social {

  width: auto !important;

  padding: 0.6rem 2rem !important;

  border-radius: 30px !important;

  background: rgba(255, 255, 255, 0.03) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  color: #ffffff !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.7rem !important;

  letter-spacing: 0.1em !important;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.tft-sp__author-bio-social:hover {

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  color: var(--cpf-color-dark) !important;

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transform: translateY(-4px) !important;

}



/* ============================================================

   SOVEREIGN FIX: ELITE GLASSMORPHISM TEAM CARDS

   ============================================================ */



.tft-about-team__info {

  background: rgba(20, 20, 20, 0.4) !important;

  backdrop-filter: blur(20px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

  border-radius: 16px !important;



  /* Floating positioning */

  bottom: 1.5rem !important;

  left: 1.5rem !important;

  width: calc(100% - 3rem) !important;

  padding: 1.5rem !important;



  /* Initial state: pushed down and faded out */

  transform: translateY(40px) !important;

  opacity: 0 !important;

  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;



  /* Ensure children can be animated independently */

  display: flex !important;

  flex-direction: column !important;

  gap: 0.25rem !important;

}



.tft-about-team__card:hover .tft-about-team__info {

  transform: translateY(0) !important;

  opacity: 1 !important;

}



/* Staggered text animation inside the glass */

.tft-about-team__name {

  transform: translateY(10px) !important;

  opacity: 0 !important;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, opacity 0.6s ease 0.1s !important;

}



.tft-about-team__role {

  transform: translateY(10px) !important;

  opacity: 0 !important;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 0.6s ease 0.15s !important;

  margin-top: 0 !important;

}



.tft-about-team__card:hover .tft-about-team__name,

.tft-about-team__card:hover .tft-about-team__role {

  transform: translateY(0) !important;

  opacity: 1 !important;

}



/* Subtle image scale effect on hover */

.tft-about-team__photo {

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.tft-about-team__card:hover .tft-about-team__photo {

  transform: scale(1.05) !important;

}



/* Elevate the card itself */

.tft-about-team__card {

  transition: filter 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease !important;

}



.tft-about-team__card:hover {

  transform: translateY(-8px) !important;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;

}



/* ============================================================

   SOVEREIGN FIX: ELITE ARROW BULLET REPLACEMENT

   ============================================================ */

.tft-about-stack__card-list li::before,

.tft-about-strat__list li::before,

.tft-about-strat__panel-list-shot li::before,

.tft-about-strat-refined__list li::before {

  content: '\2192' !important;

  /* → */

  font-family: var(--cpf-font-mono, monospace) !important;

}



/* ============================================================

   SOVEREIGN FIX: ELITE TEAM SOCIAL ICONS

   ============================================================ */

.tft-about-team__socials {

  display: flex !important;

  gap: 0.75rem !important;

  margin-top: 1rem !important;

  opacity: 0 !important;

  transform: translateY(10px) !important;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, opacity 0.6s ease 0.2s !important;

}



.tft-about-team__card:hover .tft-about-team__socials {

  transform: translateY(0) !important;

  opacity: 1 !important;

}



.tft-about-team__social-link {

  color: var(--cpf-color-white) !important;

  font-family: var(--cpf-font-mono, monospace) !important;

  font-size: 0.75rem !important;

  text-decoration: none !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  border-radius: 50% !important;

  width: 32px !important;

  height: 32px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;

}



.tft-about-team__social-link:hover {

  background: var(--cpf-color-white) !important;

  color: var(--cpf-color-dark) !important;

  border-color: var(--cpf-color-white) !important;

}



/* ============================================================

   SOVEREIGN FIX: SELECT OPTIONS VISIBILITY & BUDGET INTERACTIONS

   ============================================================ */



/* Fix invisible options in native select dropdown */

.tft-contact-v2__field select option {

  background-color: var(--cpf-color-page-bg) !important;

  color: var(--cpf-color-white) !important;

}



.tft-contact-v2__field select:focus~.tft-contact-v2__line {

  background: var(--cpf-color-accent) !important;

  height: 2px !important;

}



/* Elite Interaction for Budget Cards */

.tft-contact-v2__budget-card .card-inner {

  position: relative !important;

  overflow: hidden !important;

  transition: transform 0.4s var(--cpf-ease), border-color 0.4s var(--cpf-ease), background 0.4s var(--cpf-ease), box-shadow 0.4s var(--cpf-ease) !important;

}



.tft-contact-v2__budget-card .card-inner::before {

  content: "" !important;

  position: absolute !important;

  inset-block-start: 0 !important;

  inset-inline-start: -100% !important;

  inline-size: 50% !important;

  block-size: 100% !important;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent) !important;

  transform: skewX(-20deg) !important;

  transition: inset-inline-start 0.6s var(--cpf-ease) !important;

}



.tft-contact-v2__budget-card:hover .card-inner {

  transform: translateY(-4px) !important;

  border-color: rgba(255, 255, 255, 0.3) !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;

}



.tft-contact-v2__budget-card:hover .card-inner::before {

  inset-inline-start: 200% !important;

}



.tft-contact-v2__budget-card:active .card-inner {

  transform: translateY(2px) !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;

  transition: transform 0.1s var(--cpf-ease), box-shadow 0.1s var(--cpf-ease) !important;

}



.tft-contact-v2__budget-card input:checked+.card-inner {

  transform: translateY(-4px) !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;

  border-color: var(--cpf-color-accent) !important;

}



/* 3. Comment Form */

.tft-sp__comment-form-wrap {

  padding: 5rem 4rem !important;

  background: rgba(255, 255, 255, 0.02) !important;

  border: 1px solid rgba(255, 255, 255, 0.06) !important;

  position: relative !important;

  margin-block-start: 6rem !important;

}



/* Cyber brackets */

.tft-sp__comment-form-wrap::before,

.tft-sp__comment-form-wrap::after {

  content: '' !important;

  position: absolute !important;

  width: 30px !important;

  height: 30px !important;

  border: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.tft-sp__comment-form-wrap::before {

  top: -2px !important;

  left: -2px !important;

  border-right: none !important;

  border-bottom: none !important;

}



.tft-sp__comment-form-wrap::after {

  bottom: -2px !important;

  right: -2px !important;

  border-left: none !important;

  border-top: none !important;

}



.tft-sp__comment-form-title {

  font-size: clamp(3rem, 7vw, 4.5rem) !important;

  letter-spacing: -0.02em !important;

  margin-block-end: 3.5rem !important;

}



.tft-sp__comment-form-title em {

  font-style: italic !important;

  color: transparent !important;

  -webkit-text-stroke: 1.5px var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.tft-sp__field {

  background: transparent !important;

  border: none !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;

  border-radius: 0 !important;

  padding: 1.5rem 0 !important;

  font-size: 1.15rem !important;

  color: #ffffff !important;

}



.tft-sp__field:focus {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  background: transparent !important;

}



.tft-sp__field-label {

  left: 0 !important;

  top: 1.5rem !important;

  font-size: 0.95rem !important;

  color: rgba(255, 255, 255, 0.4) !important;

}



.tft-sp__field:focus~.tft-sp__field-label,

.tft-sp__field:not(:placeholder-shown)~.tft-sp__field-label {

  top: -1.2rem !important;

  left: 0 !important;

  font-size: 0.65rem !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  background: transparent !important;

  padding: 0 !important;

}



/* Submit Button */

.tft-sp__submit-btn {

  background: transparent !important;

  border: 1px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  padding: 1.5rem 3.5rem !important;

  font-size: 0.8rem !important;

  letter-spacing: 0.25em !important;

  position: relative !important;

  overflow: hidden !important;

  z-index: 1 !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 1.5rem !important;

  margin-block-start: 1.5rem !important;

}



.tft-sp__submit-btn::before {

  content: '' !important;

  position: absolute !important;

  top: 0 !important;

  left: -100% !important;

  width: 100% !important;

  height: 100% !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;

  z-index: -1 !important;

}



.tft-sp__submit-btn:hover {

  color: var(--cpf-color-dark) !important;

  transform: none !important;

}



.tft-sp__submit-btn:hover::before {

  transform: translateX(100%) !important;

}



/* Responsive tweaks for the new large structures */

@media (max-width: 768px) {

  .tft-sp__author-bio {

    flex-direction: column !important;

    text-align: center !important;

    gap: 2.5rem !important;

  }



  .tft-sp__author-bio-socials {

    justify-content: center !important;

  }



  .tft-sp__comment-form-wrap {

    padding: 3rem 1.5rem !important;

  }

}



/* Fix Author Avatar Image Circle */

.tft-sp__author-bio-avatar img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  border-radius: 50% !important;

}



/* ==========================================================================

   SERVICES PAGE OVERHAUL (THE CAPABILITIES MATRIX)

   ========================================================================== */

.tft-srv-body {

  background-color: var(--cpf-color-dark);

  color: var(--cpf-color-white);

  overflow-x: hidden;

}



/* --- Hero Section --- */

.tft-srv__hero {

  min-height: 90vh;

  display: flex;

  align-items: center;

  padding-top: 15vh;

  padding-inline: clamp(2rem, 5vw, 6rem);

  position: relative;

  background: radial-gradient(circle at 80% 20%, rgba(232, 185, 35, 0.05) 0%, transparent 50%);

}



.tft-srv__hero-container {

  max-width: 1400px;

  width: 100%;

  margin: 0 auto;

}



.tft-srv__hero-hud {

  display: flex;

  gap: 2rem;

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  letter-spacing: 0.2em;

  color: rgba(255, 255, 255, 0.5);

  margin-block-end: 3rem;

  border-block-end: 1px solid rgba(255, 255, 255, 0.1);

  padding-block-end: 1rem;

}



.tft-srv__hud-item {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.tft-srv__hud-dot {

  width: 8px;

  height: 8px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  border-radius: 50%;

  box-shadow: 0 0 10px var(--cpf-color-accent, var(--cpf-color-accent));

  animation: tft-pulse 2s infinite;

}



@keyframes tft-pulse {

  0% {

    opacity: 1;

    transform: scale(1);

  }



  50% {

    opacity: 0.5;

    transform: scale(0.8);

  }



  100% {

    opacity: 1;

    transform: scale(1);

  }

}



.tft-srv__hero-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(4rem, 10vw, 9rem);

  line-height: 0.85;

  letter-spacing: -0.04em;

  text-transform: uppercase;

  margin-block-end: 4rem;

}



.tft-srv__hero-accent {

  font-style: italic;

  color: transparent;

  -webkit-text-stroke: 1.5px var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-srv__hero-scroll {

  display: flex;

  align-items: center;

  gap: 1.5rem;

}



.tft-srv__scroll-line {

  width: 100px;

  height: 1px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  position: relative;

  overflow: hidden;

}



.tft-srv__scroll-line::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 20%;

  height: 100%;

  background: #fff;

  animation: tft-scroll-line 2s ease-in-out infinite;

}



@keyframes tft-scroll-line {

  0% {

    transform: translateX(-100%);

  }



  100% {

    transform: translateX(500%);

  }

}



.tft-srv__scroll-text {

  font-family: var(--cpf-font-mono);

  font-size: 0.65rem;

  letter-spacing: 0.3em;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* --- The Deck (Sticky Stacking Cards) --- */

.tft-srv__deck {

  padding-bottom: 20vh;

  position: relative;

}



.tft-srv__card {

  position: sticky;

  top: 10vh;

  /* Base sticky position */

  padding-inline: clamp(1rem, 4vw, 4rem);

  margin-block-end: 15vh;

}



/* Stacking offsets to create the "deck" look */

#card-01 {

  top: calc(10vh + 0px);

  z-index: 1;

}



#card-02 {

  top: calc(10vh + 30px);

  z-index: 2;

}



#card-03 {

  top: calc(10vh + 60px);

  z-index: 3;

}



#card-04 {

  top: calc(10vh + 90px);

  z-index: 4;

}



.tft-srv__card-inner {

  background: #080808;

  /* Dark solid bg so cards cover each other */

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-top: 1px solid rgba(232, 185, 35, 0.5);

  /* Top accent border */

  border-radius: 12px;

  display: grid;

  grid-template-columns: 1fr 400px;

  min-height: 70vh;

  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.8);

  /* Shadow onto the card behind it */

  overflow: hidden;

}



/* Left Visual Side */

.tft-srv__card-visual {

  padding: clamp(3rem, 6vw, 6rem);

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border-right: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-srv__card-glow {

  position: absolute;

  top: 20%;

  left: 20%;

  width: 60%;

  height: 60%;

  background: radial-gradient(circle, rgba(232, 185, 35, 0.1) 0%, transparent 70%);

  filter: blur(60px);

  z-index: 0;

  pointer-events: none;

}



.tft-srv__card-glow--cyan {

  background: radial-gradient(circle, rgba(64, 146, 153, 0.1) 0%, transparent 70%);

}



.tft-srv__card-glow--magenta {

  background: radial-gradient(circle, rgba(153, 64, 146, 0.1) 0%, transparent 70%);

}



.tft-srv__card-glow--white {

  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);

}



.tft-srv__card-num {

  font-family: var(--cpf-font-mono);

  font-size: 1.5rem;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  margin-block-end: 2rem;

  z-index: 1;

}



.tft-srv__card-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 6vw, 6rem);

  line-height: 0.9;

  letter-spacing: -0.03em;

  margin-block-end: 2rem;

  z-index: 1;

}



.tft-srv__card-desc {

  font-family: var(--cpf-font-body);

  font-size: 1.2rem;

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.6);

  max-width: 600px;

  margin-block-end: 3rem;

  z-index: 1;

}



.tft-srv__card-btn {

  align-self: flex-start;

  font-family: var(--cpf-font-mono);

  font-size: 0.75rem;

  letter-spacing: 0.2em;

  color: var(--cpf-color-dark);

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  padding: 1rem 2.5rem;

  text-decoration: none;

  font-weight: 700;

  border-radius: 2px;

  z-index: 1;

  transition: transform 0.3s ease, background 0.3s ease;

}



.tft-srv__card-btn:hover {

  background: #ffffff;

  transform: translateX(10px);

}



/* Right Data Side */

.tft-srv__card-data {

  padding: clamp(3rem, 4vw, 4rem);

  background: rgba(255, 255, 255, 0.02);

  display: flex;

  flex-direction: column;

  justify-content: space-around;

}



.tft-srv__data-block {

  margin-block-end: 3rem;

}



.tft-srv__data-title {

  font-family: var(--cpf-font-mono);

  font-size: 0.7rem;

  color: rgba(255, 255, 255, 0.4);

  letter-spacing: 0.15em;

  margin-block-end: 1.5rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-bottom: 0.5rem;

}



.tft-srv__data-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.tft-srv__data-list li {

  font-family: var(--cpf-font-mono);

  font-size: 0.95rem;

  color: #ffffff;

  margin-block-end: 1rem;

  display: flex;

  align-items: center;

  gap: 1rem;

}



.tft-srv__data-list li::before {

  content: '>';

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  font-weight: 700;

}



/* Responsive */

@media (max-width: 1024px) {

  .tft-srv__card-inner {

    grid-template-columns: 1fr;

    min-height: auto;

  }



  .tft-srv__card-visual {

    border-right: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    padding: 3rem 2rem;

  }



  .tft-srv__card-data {

    padding: 3rem 2rem;

  }



  .tft-srv__card {

    position: relative;

    /* Disable sticky stacking on smaller screens */

    top: auto !important;

    margin-block-end: 4rem;

  }

}



/* --- Services Expanded Features --- */



/* Infinite Marquee */

.tft-srv__marquee-section {

  width: 100%;

  overflow: hidden;

  padding-block: 4rem;

  background: var(--cpf-color-dark);

  border-block-end: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-srv__marquee-track {

  width: 100%;

  display: flex;

}



.tft-srv__marquee-content {

  display: flex;

  gap: 2rem;

  padding-right: 2rem;

  animation: tft-marquee-scroll 30s linear infinite;

  white-space: nowrap;

}



.tft-srv__marquee-content img {

  height: 300px;

  width: auto;

  object-fit: cover;

  border-radius: 4px;

  opacity: 0.7;

  filter: grayscale(50%);

  transition: all 0.4s ease;

}



.tft-srv__marquee-content img:hover {

  opacity: 1;

  filter: grayscale(0%);

}



@keyframes tft-marquee-scroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



/* Card Images */

.tft-srv__card-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.15;

  mix-blend-mode: overlay;

  z-index: 0;

  pointer-events: none;

  transition: opacity 0.5s ease;

}



.tft-srv__card-visual:hover .tft-srv__card-img {

  opacity: 0.4;

}



/* 3D Tilt Grid */

.tft-srv__tilt-section {

  padding: 10vh clamp(2rem, 5vw, 6rem);

  max-width: 1400px;

  margin: 0 auto;

}



.tft-srv__tilt-header {

  margin-block-end: 5rem;

}



.tft-srv__tilt-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 5vw, 5rem);

  margin-block-end: 1rem;

}



.tft-srv__tilt-sub {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  font-family: var(--cpf-font-mono);

  letter-spacing: 0.1em;

}



.tft-srv__tilt-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 3rem;

  perspective: 1000px;

}



.tft-srv__tilt-card {

  height: 400px;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  position: relative;

  transform-style: preserve-3d;

  transition: transform 0.1s ease-out;

  cursor: crosshair;

}



.tft-srv__tilt-inner {

  position: absolute;

  inset: 2rem;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  transform: translateZ(50px);

}



.tft-srv__tilt-step {

  font-family: var(--cpf-font-mono);

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  font-size: 0.75rem;

  margin-block-end: 1rem;

  letter-spacing: 0.1em;

}



.tft-srv__tilt-inner h3 {

  font-size: 2rem;

  margin-block-end: 1rem;

}



.tft-srv__tilt-inner p {

  color: rgba(255, 255, 255, 0.5);

  line-height: 1.6;

}



/* Hover Reveal Section */

.tft-srv__reveal-section {

  position: relative;

  min-height: 80vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border-block-start: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-srv__reveal-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  opacity: 0;

  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: 0;

  filter: brightness(0.4);

}



.tft-srv__reveal-content {

  position: relative;

  z-index: 1;

  text-align: center;

}



.tft-srv__reveal-text {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 7vw, 7rem);

  line-height: 1.1;

  letter-spacing: -0.02em;

}



.tft-srv__hover-word {

  color: transparent;

  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.2);

  cursor: crosshair;

  transition: -webkit-text-stroke 0.4s ease, color 0.4s ease;

  position: relative;

}



.tft-srv__hover-word:hover {

  -webkit-text-stroke: 1.5px var(--cpf-color-accent, var(--cpf-color-accent));

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* --- REVISED TILT GRID CSS (Semantic, BEM & High-Fidelity) --- */

.tft-srv__tilt-card {

  height: 450px;

  border-radius: 12px;

  background: #050505;

  border: 1px solid rgba(255, 255, 255, 0.05);

  position: relative;

  transform-style: preserve-3d;

  transition: transform 0.1s ease-out;

  cursor: crosshair;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}



.tft-srv__tilt-card:hover {

  border-color: rgba(232, 185, 35, 0.3);

}



.tft-srv__tilt-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  opacity: 0.1;

  transition: opacity 0.5s ease, transform 0.5s ease;

  z-index: 0;

  filter: grayscale(100%);

}



.tft-srv__tilt-bg--1 {

  background-image: url('../img/tft-proj-2.jpg');

}



.tft-srv__tilt-bg--2 {

  background-image: url('../img/tft-proj-3.jpg');

}



.tft-srv__tilt-bg--3 {

  background-image: url('../img/tft-proj-4.jpg');

}



.tft-srv__tilt-card:hover .tft-srv__tilt-bg {

  opacity: 0.5;

  transform: scale(1.1) translateZ(0);

  filter: grayscale(0%);

}



.tft-srv__tilt-inner {

  position: absolute;

  inset: 2rem;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  transform: translateZ(50px);

  z-index: 1;

}



.tft-srv__tilt-step {

  font-family: var(--cpf-font-mono);

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  font-size: 0.85rem;

  margin-block-end: 1rem;

  letter-spacing: 0.15em;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

}



.tft-srv__tilt-step::before {

  content: '';

  display: inline-block;

  width: 12px;

  height: 2px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-srv__tilt-heading {

  font-family: var(--cpf-font-display);

  font-size: clamp(2rem, 4vw, 3rem);

  line-height: 1.1;

  color: #ffffff;

  margin-block-end: 1rem;

  letter-spacing: -0.02em;

}



.tft-srv__tilt-desc {

  font-family: var(--cpf-font-body);

  font-size: 1.1rem;

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.6;

}



/* ==========================================================================

   PREMIUM OVERRIDE: STACKING DECK HIGH-FIDELITY UPGRADE

   ========================================================================== */



/* Left Side: Visual Upgrades */

.tft-srv__card-visual {

  position: relative;

  overflow: hidden;

}



/* Turn the tiny number into a massive background watermark */

.tft-srv__card-num {

  position: absolute !important;

  top: -10% !important;

  right: -5% !important;

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(10rem, 20vw, 25rem) !important;

  color: rgba(255, 255, 255, 0.03) !important;

  line-height: 0.8 !important;

  z-index: 0 !important;

  margin: 0 !important;

  pointer-events: none;

}



/* Premium Button Hover Fill */

.tft-srv__card-btn {

  position: relative;

  overflow: hidden;

  background: transparent !important;

  color: #ffffff !important;

  border: 1px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  box-shadow: inset 0 0 0 0 var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.tft-srv__card-btn:hover {

  box-shadow: inset 300px 0 0 0 var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  color: #000000 !important;

  transform: translateY(-3px) !important;

}



/* Right Side: Data Panel Upgrades (Cyber HUD) */

.tft-srv__card-data {

  position: relative;

  background:

    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;

  background-size: 30px 30px !important;

  background-color: rgba(8, 8, 8, 0.95) !important;

  backdrop-filter: blur(20px) !important;

  overflow: hidden;

  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.1);

}



/* Scanning Laser Line */

.tft-srv__card-data::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--cpf-color-accent, var(--cpf-color-accent)), transparent);

  box-shadow: 0 0 20px var(--cpf-color-accent, var(--cpf-color-accent));

  animation: tft-data-scan 6s linear infinite;

  opacity: 0.6;

  pointer-events: none;

  z-index: 10;

}



@keyframes tft-data-scan {

  0% {

    transform: translateY(-100px);

  }



  100% {

    transform: translateY(1000px);

  }

}



/* Upgraded Section Titles */

.tft-srv__data-title {

  display: inline-block;

  background: rgba(255, 255, 255, 0.03);

  padding: 0.5rem 1rem !important;

  border-radius: 2px;

  border-left: 2px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-bottom: none !important;

  color: #ffffff !important;

  font-family: var(--cpf-font-mono) !important;

  letter-spacing: 0.2em !important;

  margin-block-end: 2rem !important;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

}



/* Upgraded List Items (Grid Pills) */

.tft-srv__data-list {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 1rem;

}



.tft-srv__data-list li {

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.04);

  padding: 1.25rem 1rem !important;

  border-radius: 4px;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.85rem !important;

  color: rgba(255, 255, 255, 0.8) !important;

  transition: all 0.3s ease !important;

  position: relative;

  overflow: hidden;

  margin: 0 !important;

  display: flex !important;

  align-items: center;

  justify-content: center;

  text-align: center;

  cursor: crosshair;

}



.tft-srv__data-list li::before {

  content: '' !important;

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 4px;

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  transform: scaleY(0);

  transform-origin: bottom;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.tft-srv__data-list li:hover {

  background: rgba(255, 255, 255, 0.08) !important;

  transform: translateY(-4px) !important;

  border-color: rgba(232, 185, 35, 0.3) !important;

  color: #ffffff !important;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);

}



.tft-srv__data-list li:hover::before {

  transform: scaleY(1);

}



/* Override: Remove Scan Line from Services Data Panel */

.tft-srv__card-data::after {

  display: none !important;

}





/* ==========================================================================

   PREMIUM NEWSLETTER WIDGET UPGRADE

   ========================================================================== */

.cpf-newsletter-box {

  background: rgba(8, 8, 8, 0.9) !important;

  backdrop-filter: blur(20px) !important;

  border: 1px solid rgba(232, 185, 35, 0.2) !important;

  border-top: 3px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  padding: 35px 30px !important;

  color: #ffffff !important;

  position: relative;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;

}



/* Subtle background accent grid */

.cpf-newsletter-box::before {

  content: '';

  position: absolute;

  inset: 0;

  background:

    linear-gradient(rgba(232, 185, 35, 0.05) 1px, transparent 1px),

    linear-gradient(90deg, rgba(232, 185, 35, 0.05) 1px, transparent 1px);

  background-size: 15px 15px;

  pointer-events: none;

  z-index: 0;

}



.cpf-newsletter-box__title {

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  font-size: 12px !important;

  letter-spacing: 0.3em !important;

  margin-block-end: 20px !important;

  position: relative;

  z-index: 1;

}



.cpf-newsletter-box__text {

  font-size: 14px !important;

  color: rgba(255, 255, 255, 0.7) !important;

  position: relative;

  z-index: 1;

}



.cpf-newsletter-box__form {

  position: relative;

  z-index: 1;

}



/* Cyber Terminal Input */

.cpf-newsletter-box__form input {

  background: rgba(255, 255, 255, 0.03) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;

  color: #ffffff !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 12px !important;

  padding: 15px !important;

  transition: all 0.3s ease !important;

}



.cpf-newsletter-box__form input:focus {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  background: rgba(255, 255, 255, 0.06) !important;

  outline: none !important;

}



/* Kinetic Hover Button */

.cpf-newsletter-box__form button {

  background: transparent !important;

  color: #ffffff !important;

  border: 1px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  padding: 15px !important;

  font-size: 12px !important;

  letter-spacing: 0.2em !important;

  box-shadow: inset 0 0 0 0 var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  margin-top: 5px !important;

}



.cpf-newsletter-box__form button:hover {

  box-shadow: inset 350px 0 0 0 var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  color: #000000 !important;

  transform: translateY(-2px) !important;

}







/* ==========================================================================

   ADVANCED ATMOSPHERIC FOOTER (AURORA OVERLAY)

   ========================================================================== */

.tft-ftr-elite {

  position: relative;

  background-color: #020202 !important;

  margin-top: 10vh !important;

  padding-top: 10rem !important;

  padding-bottom: 3rem !important;

  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;

  overflow: hidden;

}



/* 1. Atmospheric Gradient/Fading Shape Overlay */

.tft-ftr-elite::before {

  content: '';

  position: absolute;

  inset: 0;

  /* Top harsh fade to black, layered over a slow-moving aurora gradient image */

  background-image:

    linear-gradient(to bottom, #000000 0%, transparent 50%),

    url('../img/aurora-bg-2.png');

  background-size: cover;

  background-position: center center;

  opacity: 0.35;

  mix-blend-mode: screen;

  pointer-events: none;

  z-index: 0;

  animation: tft-footer-aurora 25s ease-in-out infinite alternate;

}



@keyframes tft-footer-aurora {

  0% {

    transform: scale(1) translateY(0);

    opacity: 0.2;

  }



  100% {

    transform: scale(1.15) translateY(-30px) rotate(2deg);

    opacity: 0.5;

  }

}



/* Ensure all content sits above the atmospheric overlay */

.tft-ftr-elite__container {

  position: relative;

  z-index: 10;

}



/* 2. Advanced Column Styling (Frosted Glass) */

.tft-ftr-elite__col {

  background: rgba(255, 255, 255, 0.015) !important;

  border: 1px solid rgba(255, 255, 255, 0.04) !important;

  padding: 3.5rem !important;

  border-radius: 16px !important;

  backdrop-filter: blur(15px) !important;

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;

}



.tft-ftr-elite__col:hover {

  background: rgba(255, 255, 255, 0.03) !important;

  border-color: rgba(255, 255, 255, 0.15) !important;

  transform: translateY(-8px) !important;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;

}



/* 3. Refined Typography */

.tft-ftr-elite__label {

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.75rem !important;

  letter-spacing: 0.4em !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  margin-bottom: 2.5rem !important;

  opacity: 0.9;

}



.tft-ftr-elite__link {

  font-size: 1rem !important;

  color: rgba(255, 255, 255, 0.5) !important;

  transition: all 0.3s ease !important;

  display: block !important;

  padding: 0.4rem 0 !important;

}



.tft-ftr-elite__link:hover {

  color: #fff !important;

  transform: translateX(5px) !important;

  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;

}



.tft-ftr-elite__logo {

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(3rem, 9vw, 9rem) !important;

  line-height: 0.8 !important;

  letter-spacing: -0.04em !important;

  color: #ffffff !important;

  margin-bottom: 2rem !important;

  text-shadow: 0 15px 40px rgba(0, 0, 0, 0.8) !important;

}



/* 4. Elite Pill CTA Button */

.tft-ftr-elite__cta-wrap {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.tft-ftr-elite__cta {

  background: rgba(255, 255, 255, 0.02) !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;

  padding: 2.5rem 3.5rem !important;

  border-radius: 100px !important;

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;

  display: inline-block !important;

  backdrop-filter: blur(10px) !important;

}



.tft-ftr-elite__cta:hover {

  background: #ffffff !important;

  border-color: #ffffff !important;

  transform: translateY(-4px) !important;

  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1) !important;

}



.tft-ftr-elite__cta-inner {

  display: flex !important;

  align-items: center !important;

  gap: 1rem !important;

}



.tft-ftr-elite__cta-title {

  transition: color 0.4s ease !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 1.2rem !important;

  letter-spacing: 0.1em !important;

}



.tft-ftr-elite__cta:hover .tft-ftr-elite__cta-title {

  color: #000000 !important;

}



.tft-ftr-elite__cta-arrow {

  display: inline-block !important;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease !important;

  font-size: 2rem !important;

  line-height: 1 !important;

}



.tft-ftr-elite__cta:hover .tft-ftr-elite__cta-arrow {

  color: #000000 !important;

  transform: translateX(12px) !important;

}



/* ==========================================================================

   ULTRA-ADVANCED FOOTER ELEMENTS (MARQUEE, STATUS, NEWSLETTER)

   ========================================================================== */



/* Full Bleed Marquee */

.tft-ftr-elite__marquee {

  width: 100vw !important;

  margin-left: calc(-50vw + 50%) !important;

  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

  padding: 1.5rem 0 !important;

  overflow: hidden !important;

  white-space: nowrap !important;

  background: rgba(0, 0, 0, 0.4) !important;

  margin-bottom: 6rem !important;

  position: relative;

  z-index: 10;

}



.tft-ftr-elite__marquee-track {

  display: inline-block !important;

  animation: tft-marquee-scroll 30s linear infinite !important;

  font-family: var(--cpf-font-display) !important;

  font-size: clamp(2rem, 4vw, 3rem) !important;

  color: transparent !important;

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2) !important;

  letter-spacing: 0.1em !important;

  text-transform: uppercase !important;

}



.tft-ftr-elite__marquee-track span {

  padding: 0 3rem !important;

}



.tft-ftr-elite__marquee-track span.solid {

  color: #fff !important;

  -webkit-text-stroke: 0 !important;

}



.tft-ftr-elite__marquee-track span.accent {

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  -webkit-text-stroke: 0 !important;

}



@keyframes tft-marquee-scroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



/* System Status Node */

.tft-ftr-elite__status {

  display: flex !important;

  align-items: center !important;

  gap: 1rem !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.75rem !important;

  color: rgba(255, 255, 255, 0.6) !important;

  background: rgba(255, 255, 255, 0.02) !important;

  padding: 1rem 2rem !important;

  border-radius: 100px !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  margin-top: 3rem !important;

  width: fit-content !important;

  backdrop-filter: blur(10px) !important;

}



.tft-ftr-elite__status-dot {

  width: 8px !important;

  height: 8px !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-radius: 50% !important;

  box-shadow: 0 0 12px var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  animation: tft-pulse-status 2s infinite !important;

}



@keyframes tft-pulse-status {



  0%,

  100% {

    opacity: 1;

  }



  50% {

    opacity: 0.3;

  }

}



/* Newsletter Input Terminal */

.tft-ftr-elite__newsletter {

  margin-top: 2rem !important;

  display: flex !important;

  gap: 0 !important;

  position: relative !important;

}



.tft-ftr-elite__newsletter input {

  background: rgba(255, 255, 255, 0.03) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding: 1.2rem 1.5rem !important;

  color: #fff !important;

  font-family: var(--cpf-font-mono) !important;

  font-size: 0.8rem !important;

  outline: none !important;

  width: 100% !important;

  border-radius: 4px 0 0 4px !important;

  transition: all 0.3s ease !important;

}



.tft-ftr-elite__newsletter input:focus {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  background: rgba(255, 255, 255, 0.06) !important;

}



.tft-ftr-elite__newsletter button {

  background: #fff !important;

  color: #000 !important;

  border: none !important;

  padding: 0 1.5rem !important;

  font-family: var(--cpf-font-mono) !important;

  font-weight: 700 !important;

  cursor: pointer !important;

  border-radius: 0 4px 4px 0 !important;

  transition: all 0.3s ease !important;

}



.tft-ftr-elite__newsletter button:hover {

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  box-shadow: 0 0 20px rgba(232, 185, 35, 0.3) !important;

}



/* Adjust grid for the new elements */

@media (min-width: 1024px) {

  .tft-ftr-elite__grid {

    grid-template-columns: 1fr 1fr 1fr 1.5fr !important;

    /* Give CTA/Newsletter more room */

  }

}



/* ==========================================================================

   INDEX-2.HTML (ARCHIVE) SPLIT-SCREEN LAYOUT OVERRIDE

   ========================================================================== */

@media (min-width: 1024px) {



  /* 1. Left side: Text Block */

  .tft-alt-hero__header {

    bottom: auto !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    left: 5vw !important;

    width: 45vw !important;

    z-index: 20 !important;

  }



  .tft-alt-hero__title {

    font-size: clamp(3rem, 5.5vw, 8rem) !important;

    text-align: left !important;

  }



  /* 2. Right side: Orbiting Gallery */

  .tft-alt-hero__gallery-wrap {

    left: 75vw !important;

    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: min(45vw, 80vh) !important;

    height: min(45vw, 80vh) !important;

  }



  .tft-alt-hero__center {

    width: 25% !important;

  }

}



@media (max-width: 1023px) {

  .tft-alt-hero__header {

    bottom: 5vh !important;

    left: 5vw !important;

    width: 90vw !important;

    z-index: 50 !important;

  }



  .tft-alt-hero__gallery-wrap {

    top: 45% !important;

    left: 50% !important;

    width: 90vw !important;

    height: 90vw !important;

  }



  .tft-alt-hero__title {

    font-size: clamp(2.5rem, 8vw, 4rem) !important;

  }

}



/* ==========================================================================

   INDEX-2.HTML DECO LIST (DATA TAGS) REPOSITION & RESTYLE

   ========================================================================== */

.tft-alt-hero__deco-list {

  right: auto !important;

  left: 5vw !important;

  top: auto !important;

  bottom: 8vh !important;

  transform: none !important;

  flex-direction: row !important;

  flex-wrap: wrap !important;

  gap: 1.5rem !important;

  z-index: 20 !important;

}



/* Cyber Data Tag Design */

.tft-alt-hero__deco-item {

  background: rgba(255, 255, 255, 0.02) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  padding: 0.6rem 1.2rem !important;

  border-left: 3px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 0.8rem !important;

  backdrop-filter: blur(10px) !important;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  margin: 0 !important;

  border-radius: 2px !important;

}



.tft-alt-hero__deco-item:hover {

  background: rgba(255, 255, 255, 0.05) !important;

  border-color: rgba(255, 255, 255, 0.2) !important;

  transform: translateY(-2px) !important;

}



/* Blinking Terminal Cursor inside Tag */

.tft-alt-hero__deco-item::before {

  content: '>';

  display: block !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  font-family: var(--cpf-font-mono) !important;

  font-weight: 700 !important;

  font-size: 14px !important;

  animation: tft-blink 1s infinite !important;

}



@keyframes tft-blink {



  0%,

  49% {

    opacity: 1;

  }



  50%,

  100% {

    opacity: 0;

  }

}



/* Text Style Override */

.tft-alt-hero__deco-item .val {

  color: #ffffff !important;

  background: transparent !important;

  padding: 0 !important;

  font-size: 0.7rem !important;

  font-family: var(--cpf-font-mono) !important;

  letter-spacing: 0.2em !important;

  font-weight: 500 !important;

  text-transform: uppercase !important;

}



@media (max-width: 1023px) {

  .tft-alt-hero__deco-list {

    bottom: auto !important;

    top: 12vh !important;

    left: 5vw !important;

    gap: 1rem !important;

  }

}



/* ==========================================================================

   REMOVE TERMINAL CURSOR FROM DATA TAGS

   ========================================================================== */

.tft-alt-hero__deco-item::before {

  content: '' !important;

  width: 6px !important;

  height: 6px !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-radius: 50% !important;

  box-shadow: 0 0 10px var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  animation: none !important;

}



/* ==========================================================================

   INDEX-2.HTML ORBIT CENTER SIZE REDUCTION

   ========================================================================== */

.tft-alt-hero__center {

  width: 15% !important;

  /* Reduced from 25% */

  max-width: 140px !important;

  aspect-ratio: 1 !important;

}



@media (max-width: 1024px) {

  .tft-alt-hero__center {

    width: 20% !important;

  }

}



@media (max-width: 768px) {

  .tft-alt-hero__center {

    width: 90px !important;

    height: 90px !important;

  }

}



/* Adjust inner label and icon to fit the new smaller circle */

.tft-alt-hero__center-label {

  font-size: 10px !important;

  letter-spacing: 0.1em !important;

  margin-top: 4px !important;

}



.tft-alt-hero__center-img {

  width: 16px !important;

  height: 16px !important;

}



/* ==========================================================================

   INDEX-2.HTML ORBIT CENTER SIZE (FURTHER 30% REDUCTION)

   ========================================================================== */

.tft-alt-hero__center {

  width: 10% !important;

  /* Reduced from 15% */

  max-width: 100px !important;

  /* Reduced from 140px */

}



@media (max-width: 1024px) {

  .tft-alt-hero__center {

    width: 14% !important;

    /* Reduced from 20% */

  }

}



@media (max-width: 768px) {

  .tft-alt-hero__center {

    width: 60px !important;

    /* Reduced from 90px */

    height: 60px !important;

  }

}



/* Adjust inner label and icon for extreme compactness */

.tft-alt-hero__center-label {

  font-size: 10px !important;

  letter-spacing: 0.05em !important;

  margin-top: 2px !important;

}



.tft-alt-hero__center-img {

  width: 12px !important;

  height: 12px !important;

}



/* ==========================================================================

   INDEX-2.HTML MASTER ORBIT SCALE OVERRIDE (USER REQ: ENTIRE CONTAINER -30%)

   ========================================================================== */



/* Scale the entire orbital wrapper down by 35% */

.tft-alt-hero__gallery-wrap {

  transform: translate(-50%, -50%) scale(0.65) !important;

}



/* Reset the center circle to its original internal proportions so it doesn't become microscopic */

.tft-alt-hero__center {

  width: 25% !important;

  max-width: none !important;

  height: auto !important;

  aspect-ratio: 1 !important;

}



.tft-alt-hero__center-label {

  font-size: 14px !important;

}



.tft-alt-hero__center-img {

  width: 20px !important;

  height: 20px !important;

}



@media (max-width: 1024px) {

  .tft-alt-hero__gallery-wrap {

    transform: translate(-50%, -50%) scale(0.65) !important;

  }

}



@media (max-width: 768px) {

  .tft-alt-hero__gallery-wrap {

    transform: translate(-50%, -50%) scale(0.55) !important;

  }



  .tft-alt-hero__center {

    width: 120px !important;

    height: 120px !important;

  }

}



/* ==========================================================================

   INDEX-2.HTML CENTER BUTTON COUNTER-ROTATION FIX

   ========================================================================== */



/* The center button is nested in the rotating orbit, so it spins upside down. 

   We must force it to spin backwards at the exact same speed to stay upright. */

.tft-alt-hero__center {

  animation: tft-counter-spin 60s linear infinite !important;

}



@keyframes tft-counter-spin {

  from {

    transform: translate(-50%, -50%) rotate(0deg);

  }



  to {

    transform: translate(-50%, -50%) rotate(-360deg);

  }

}



/* ==========================================================================

   ADVANCED PREMIUM DROPDOWN MENU OVERHAUL & RESPONSIVE FIX

   ========================================================================== */



/* 1. Hide the entire inline menu on Tablet/Mobile (Rely purely on Hamburger Drawer) */

@media (max-width: 1024px) {

  .cpf-header__menu {

    display: none !important;

  }

}



/* 2. Premium Glassmorphism Dropdown Architecture */

.cpf-header__dropdown {

  position: absolute !important;

  top: calc(100% + 20px) !important;

  /* Floating gap */

  left: -20px !important;

  background: rgba(8, 8, 8, 0.65) !important;

  backdrop-filter: blur(25px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;

  border: 1px solid rgba(255, 255, 255, 0.06) !important;

  border-top: 1px solid var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  padding: 10px !important;

  min-width: 280px !important;

  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  border-radius: 8px !important;

  opacity: 0;

  visibility: hidden;

  transform: translateY(15px) scale(0.98) !important;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  transform-origin: top left;

}



/* Invisible hit area to prevent hover drop-off over the gap */

.cpf-header__item.has-dropdown::after {

  content: '';

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  height: 30px;

}



/* Smooth reveal animation */

.cpf-header__item.has-dropdown:hover .cpf-header__dropdown {

  opacity: 1;

  visibility: visible;

  transform: translateY(0) scale(1) !important;

}



/* 3. Refined Dropdown Items */

.cpf-header__dropdown li {

  position: relative;

  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;

  overflow: hidden;

  border-radius: 4px;

}



.cpf-header__dropdown li:last-child {

  border-bottom: none !important;

}



.cpf-header__dropdown a {

  font-family: var(--cpf-font-mono, monospace) !important;

  font-size: 14px !important;

  font-weight: 500 !important;

  color: rgba(255, 255, 255, 0.5) !important;

  padding: 16px 20px !important;

  letter-spacing: 0.15em !important;

  text-transform: uppercase !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  position: relative;

  z-index: 2;

}



/* Premium Hover State with Sliding Background and Arrow */

.cpf-header__dropdown a::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(232, 185, 35, 0.08) 0%, transparent 100%);

  transform: translateX(-100%);

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: -1;

}



.cpf-header__dropdown a:hover {

  color: var(--cpf-color-white, #fff) !important;

  padding-left: 28px !important;

}



.cpf-header__dropdown a:hover::before {

  transform: translateX(0);

}



.cpf-header__dropdown a::after {

  content: "→" !important;

  font-size: 14px !important;

  opacity: 0 !important;

  transform: translateX(-10px);

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.cpf-header__dropdown a:hover::after {

  opacity: 1 !important;

  transform: translateX(0);

}



/* ==========================================================================

   INDEX-6.HTML: GLASS MONOLITH (THREE.JS GRID)

   ========================================================================== */



.tft-glass-hero {

  position: relative;

  width: 100vw;

  height: 100vh;

  background-color: var(--cpf-color-dark, #050505);

  overflow: hidden;

}



/* Three.js Canvas Container */

.tft-glass-hero__canvas {

  position: absolute;

  inset: 0;

  z-index: 1;

}



/* Ambient Background Text */

.tft-glass-hero__ambient {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  text-align: center;

  z-index: 0;

  pointer-events: none;

}



.tft-glass-hero__bg-text {

  font-family: var(--cpf-font-display, sans-serif);

  font-size: clamp(8rem, 25vw, 30rem);

  font-weight: 900;

  color: rgba(255, 255, 255, 0.02);

  margin: 0;

  line-height: 0.8;

  letter-spacing: -0.05em;

  user-select: none;

}



/* Custom HTML HUD Interface */

.tft-glass-hud {

  position: absolute;

  top: 50%;

  right: 5vw;

  transform: translateY(-50%);

  z-index: 10;

  width: 300px;

  display: flex;

  flex-direction: column;

  gap: 3rem;

}



.tft-glass-hud__header {

  border-left: 2px solid var(--cpf-color-accent, var(--cpf-color-accent));

  padding-left: 1rem;

}



.tft-glass-hud__title {

  font-family: var(--cpf-font-display, sans-serif);

  font-size: 1.5rem;

  color: var(--cpf-color-white, #fff);

  margin: 0 0 0.5rem 0;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.tft-glass-hud__meta {

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.4);

  letter-spacing: 0.1em;

}



.tft-glass-hud__list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.tft-glass-hud__btn {

  background: transparent;

  border: none;

  width: 100%;

  text-align: left;

  padding: 1rem;

  display: flex;

  align-items: center;

  gap: 1rem;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.05);

  background: rgba(255, 255, 255, 0.02);

  border-radius: 4px;

  backdrop-filter: blur(10px);

  transition: all 0.4s var(--cpf-ease, cubic-bezier(0.16, 1, 0.3, 1));

}



.tft-glass-hud__btn:hover {

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.15);

  transform: translateX(-5px);

}



.tft-glass-hud__btn.is-active {

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

  transform: translateX(-10px);

}



.tft-glass-hud__btn .num {

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.3);

  font-weight: 700;

}



.tft-glass-hud__btn .name {

  font-family: var(--cpf-font-body, sans-serif);

  font-size: 0.9rem;

  color: var(--cpf-color-white, #fff);

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.tft-glass-hud__btn.is-active .num,

.tft-glass-hud__btn.is-active .name {

  color: var(--cpf-color-dark, #000);

}



/* Play/Pause Control */

.tft-glass-hud__controls {

  display: flex;

  justify-content: flex-end;

}



.tft-glass-hud__toggle {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: var(--cpf-color-white, #fff);

  padding: 0.5rem 1rem;

  border-radius: 4px;

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.75rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  transition: all 0.3s ease;

}



.tft-glass-hud__toggle:hover {

  background: rgba(255, 255, 255, 0.1);

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  border-color: var(--cpf-color-accent, var(--cpf-color-accent));

}



/* Responsive Scaling */

@media (max-width: 1024px) {

  .tft-glass-hud {

    top: auto;

    bottom: 5vh;

    right: 5vw;

    transform: none;

    width: 90vw;

    flex-direction: row;

    align-items: flex-end;

    justify-content: space-between;

  }



  .tft-glass-hud__list {

    flex-direction: row;

    flex-wrap: nowrap;

    overflow-x: auto;

    padding-bottom: 10px;

    width: 60%;

    scrollbar-width: none;

  }



  .tft-glass-hud__btn {

    width: auto;

    white-space: nowrap;

  }



  .tft-glass-hud__btn:hover,

  .tft-glass-hud__btn.is-active {

    transform: translateY(-5px);

  }

}



/* ==========================================================================

   INDEX-6.HTML: PARTICLE POINT-CLOUD SLIDER

   ========================================================================== */



.tft-particle-hero {

  position: relative;

  width: 100vw;

  height: 100vh;

  background-color: var(--cpf-color-dark, #050505);

  overflow: hidden;

}



/* Three.js Canvas Container */

.tft-particle-hero__canvas {

  position: absolute;

  inset: 0;

  z-index: 1;

}



/* Minimalist Slider UI Overlay */

.tft-particle-ui {

  position: absolute;

  inset: 0;

  z-index: 10;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 6vh 5vw;

  pointer-events: none;

  /* Let clicks pass through to canvas if needed */

}



/* Text Content Area */

.tft-particle-ui__content {

  margin-top: 15vh;

  border-left: 3px solid var(--cpf-color-accent, var(--cpf-color-accent));

  padding-left: 2rem;

  pointer-events: auto;

}



.tft-particle-ui__title {

  font-family: var(--cpf-font-display, sans-serif);

  font-size: clamp(3rem, 6vw, 6rem);

  font-weight: 700;

  color: var(--cpf-color-white, #fff);

  margin: 0 0 1rem 0;

  text-transform: uppercase;

  letter-spacing: -0.02em;

  line-height: 1;

  transition: opacity 0.3s ease;

}



.tft-particle-ui__meta {

  font-family: var(--cpf-font-mono, monospace);

  font-size: 1rem;

  color: var(--cpf-color-accent, var(--cpf-color-accent));

  letter-spacing: 0.2em;

  text-transform: uppercase;

  transition: opacity 0.3s ease;

}



/* Bottom Controls */

.tft-particle-ui__controls {

  display: flex;

  align-items: center;

  gap: 3rem;

  pointer-events: auto;

}



.tft-particle-btn {

  background: transparent;

  border: none;

  color: var(--cpf-color-white, #fff);

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.9rem;

  letter-spacing: 0.1em;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1rem 0;

  transition: all 0.3s ease;

}



.tft-particle-btn:hover {

  color: var(--cpf-color-accent, var(--cpf-color-accent));

}



.tft-particle-btn .arrow {

  font-size: 1.2rem;

  transition: transform 0.3s ease;

}



#tft-btn-prev:hover .arrow {

  transform: translateX(-5px);

}



#tft-btn-next:hover .arrow {

  transform: translateX(5px);

}



.tft-particle-ui__progress {

  font-family: var(--cpf-font-mono, monospace);

  color: rgba(255, 255, 255, 0.4);

  font-size: 1rem;

  letter-spacing: 0.1em;

}



#tft-slider-current {

  color: var(--cpf-color-white, #fff);

  font-weight: 700;

}



@media (max-width: 768px) {

  .tft-particle-ui__controls {

    gap: 1.5rem;

    justify-content: space-between;

    width: 100%;

  }

}



/* =============================================

   SECTION: Brutalist Footer (Softened / Sovereign Edge)

   ============================================= */

.tft-ftr-brutalist {

  background-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  color: var(--cpf-color-dark, #0a0a0a) !important;

  position: relative !important;

  z-index: 10 !important;

  display: flex !important;

  flex-direction: column !important;

  border-radius: var(--cpf-radius-hero, 25px) !important;

  margin: 1rem !important;

  overflow: hidden !important;

}



.tft-ftr-brutalist__grid {

  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  min-height: 400px !important;

  position: relative !important;

}



.tft-ftr-brutalist__grid::after {

  content: '' !important;

  position: absolute !important;

  bottom: 0 !important;

  left: 3rem !important;

  right: 3rem !important;

  height: 1px !important;

  background-color: rgba(0, 0, 0, 0.15) !important;

}



.tft-ftr-brutalist__block {

  padding: 3.5rem 3rem !important;

  display: flex !important;

  flex-direction: column !important;

}



.tft-ftr-brutalist__block-header {

  display: flex !important;

  justify-content: space-between !important;

  align-items: flex-start !important;

  margin-bottom: 6rem !important;

}



.tft-ftr-brutalist__block-title {

  font-family: var(--cpf-font-body, sans-serif) !important;

  font-size: 0.8rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.05em !important;

  text-transform: uppercase !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  background-color: var(--cpf-color-dark, #0a0a0a) !important;

  padding: 0.4rem 1rem !important;

  border-radius: 20px !important;

}



.tft-ftr-brutalist__block-square {

  display: none !important;

}



.tft-ftr-brutalist__links-wrap {

  display: flex !important;

  gap: 5rem !important;

  margin-top: auto !important;

}



.tft-ftr-brutalist__col {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.4rem !important;

}



.tft-ftr-brutalist__link,

.tft-ftr-brutalist__text {

  font-family: var(--cpf-font-body, sans-serif) !important;

  font-size: 1.1rem !important;

  font-weight: 500 !important;

  color: var(--cpf-color-dark, #0a0a0a) !important;

  text-decoration: none !important;

  letter-spacing: -0.02em !important;

  transition: all 0.3s ease !important;

  position: relative !important;

  display: inline-block !important;

  width: fit-content !important;

}



.tft-ftr-brutalist__link::after {

  content: '' !important;

  position: absolute !important;

  bottom: -2px !important;

  left: 0 !important;

  width: 0 !important;

  height: 1.5px !important;

  background-color: var(--cpf-color-dark, #0a0a0a) !important;

  transition: width 0.3s ease !important;

}



.tft-ftr-brutalist__link:hover {

  opacity: 1 !important;

  transform: translateX(6px) !important;

}



.tft-ftr-brutalist__link:hover::after {

  width: 100% !important;

}



.tft-ftr-brutalist__marquee-wrap {

  padding: 0 !important;

  overflow: hidden !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.tft-ftr-brutalist__giant-text {

  font-family: var(--cpf-font-display, sans-serif) !important;

  font-size: clamp(6rem, 18.5vw, 25rem) !important;

  font-weight: 800 !important;

  color: var(--cpf-color-dark, #0a0a0a) !important;

  line-height: 0.75 !important;

  letter-spacing: -0.07em !important;

  margin: 0 !important;

  padding: 4rem 0 4.6rem 0 !important;

  text-transform: none !important;

  position: relative !important;

  white-space: nowrap !important;

  text-align: center !important;

  width: 100% !important;

  overflow: hidden !important;

}



.tft-ftr-brutalist__giant-text span {

  font-family: var(--cpf-font-body, sans-serif) !important;

  font-size: clamp(1.5rem, 4vw, 5rem) !important;

  font-weight: 700 !important;

  position: absolute !important;

  top: 4rem !important;

  right: -clamp(1.5rem, 4vw, 5rem) !important;

}



.tft-ftr-brutalist__baseline {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding: 2rem 3rem !important;

  font-family: var(--cpf-font-body, sans-serif) !important;

  font-size: 0.8rem !important;

  font-weight: 600 !important;

  letter-spacing: 0.02em !important;

  color: var(--cpf-color-dark, #0a0a0a) !important;

  background-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.tft-ftr-brutalist__legal {

  display: flex !important;

  gap: 4rem !important;

}



.tft-ftr-brutalist__legal-link {

  color: var(--cpf-color-dark, #0a0a0a) !important;

  text-decoration: none !important;

  transition: opacity 0.25s ease !important;

}



.tft-ftr-brutalist__legal-link:hover {

  opacity: 0.5 !important;

}



@media (max-width: 1024px) {

  .tft-ftr-brutalist__grid {

    grid-template-columns: 1fr !important;

    min-height: auto !important;

  }



  .tft-ftr-brutalist__grid::after {

    display: none !important;

  }



  .tft-ftr-brutalist__block {

    padding: 2rem 2rem !important;

  }



  .tft-ftr-brutalist__legal {

    display: none !important;

  }

}



@media (max-width: 768px) {

  .tft-ftr-brutalist__baseline {

    flex-direction: column !important;

    gap: 1.5rem !important;

    align-items: flex-start !important;

    padding: 2rem !important;

  }

}



/* =============================================

   SECTION: Brutalist Back to Top Button

   ============================================= */

.tft-ftr-brutalist__credit-wrap {

  display: flex !important;

  align-items: center !important;

  gap: 2rem !important;

}



.tft-ftr-brutalist__btt {

  background: transparent !important;

  border: 1.5px solid var(--cpf-color-dark, #0a0a0a) !important;

  color: var(--cpf-color-dark, #0a0a0a) !important;

  width: 50px !important;

  height: 50px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  transition: all 0.3s ease !important;

  border-radius: 50% !important;

}



.tft-ftr-brutalist__btt:hover {

  background: var(--cpf-color-dark, #0a0a0a) !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  transform: translateY(-4px) !important;

}





/* ============================================================

   SOVEREIGN NEW: CAREERS PAGE STYLES (TOTAL REBUILD)

   ============================================================ */



.tft-careers-final-body {

  background-color: #050505;

  color: #ffffff;

  font-family: var(--cpf-font-body, "Inter", sans-serif);

  overflow-x: hidden;

}



.tft-careers-final {

  position: relative;

  z-index: 1;

  padding-bottom: 10vh;

}



/* --- 1. HERO & INFINITE GALLERY --- */

.tft-careers-final__hero {

  padding-top: 20vh;

  padding-bottom: 5vh;

  text-align: center;

  overflow: hidden;

}



.tft-careers-final__hero-text {

  max-width: 800px;

  margin: 0 auto 5vh;

  padding: 0 5vw;

}



.tft-careers-final__hero-kicker {

  display: block;

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.85rem;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.6);

  margin-bottom: 1rem;

  text-transform: uppercase;

}



.tft-careers-final__hero-title {

  font-family: var(--cpf-font-heading, "Inter", sans-serif);

  font-size: clamp(3rem, 6vw, 5rem);

  font-weight: 500;

  letter-spacing: -0.04em;

  margin-bottom: 1rem;

  line-height: 1.1;

}



.tft-careers-final__hero-sub {

  font-size: 1.125rem;

  color: rgba(255, 255, 255, 0.5);

  margin-bottom: 2.5rem;

}



.tft-careers-final__btn {

  display: inline-flex;

  align-items: center;

  background: #fff;

  color: #000;

  padding: 1rem 2rem;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 500;

  font-size: 0.95rem;

  transition: transform 0.3s ease, background 0.3s ease;

}



.tft-careers-final__btn:hover {

  transform: translateY(-2px);

  background: #e0e0e0;

}



.tft-careers-final__gallery-track-wrap {

  width: 100vw;

  overflow: hidden;

  padding: 2rem 0;

}



.tft-careers-final__gallery-track {

  display: flex;

  gap: 1.5rem;

  width: max-content;

  animation: tft-gallery-scroll 30s linear infinite;

}



.tft-careers-final__gallery-item {

  width: 280px;

  height: 350px;

  border-radius: 12px;

  overflow: hidden;

  flex-shrink: 0;

}



.tft-careers-final__gallery-item--alt {

  height: 400px;

  margin-top: -25px;

}



.tft-careers-final__gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(80%);

  transition: filter 0.4s ease;

}



.tft-careers-final__gallery-item:hover img {

  filter: grayscale(0%);

}



@keyframes tft-gallery-scroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(calc(-50% - 0.75rem));

  }

}



/* --- 2. MISSION TEXT --- */

.tft-careers-final__mission {

  padding: 10vh 5vw;

}



.tft-careers-final__mission-inner {

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr;

  gap: 3rem;

}



@media (min-width: 992px) {

  .tft-careers-final__mission-inner {

    grid-template-columns: 1fr 1fr;

    gap: 5rem;

  }

}



.tft-careers-final__mission-left h2 {

  font-size: clamp(1.5rem, 3vw, 2.5rem);

  line-height: 1.3;

  font-weight: 500;

  letter-spacing: -0.02em;

}



.tft-careers-final__mission-right p {

  font-size: 1.125rem;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.6);

  margin-bottom: 1.5rem;

}



/* --- 3. WHAT WE VALUE --- */

.tft-careers-final__values {

  padding: 5vh 5vw;

}



.tft-careers-final__values-box {

  background: #111111;

  border-radius: 20px;

  padding: 5vw;

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr;

  gap: 4rem;

  position: relative;

  overflow: hidden;

}



@media (min-width: 992px) {

  .tft-careers-final__values-box {

    grid-template-columns: 1fr 2fr;

  }

}



.tft-careers-final__values-title {

  font-size: clamp(2rem, 4vw, 3rem);

  line-height: 1.1;

  font-weight: 500;

  letter-spacing: -0.03em;

}



.tft-careers-final__values-list {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.tft-careers-final__value-card {

  background: #1a1a1a;

  padding: 2.5rem;

  border-radius: 12px;

}



.tft-careers-final__value-card h3 {

  font-size: 1.25rem;

  font-weight: 500;

  margin-bottom: 1rem;

}



.tft-careers-final__value-card p {

  color: rgba(255, 255, 255, 0.6);

  line-height: 1.6;

}



/* --- 4. BENEFITS --- */

.tft-careers-final__benefits {

  padding: 5vh 5vw;

}



.tft-careers-final__benefits-box {

  background: #0a0a0a;

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: 20px;

  padding: 5vw;

  max-width: 1200px;

  margin: 0 auto;

}



.tft-careers-final__benefits-header {

  margin-bottom: 4rem;

}



.tft-careers-final__benefits-header h2 {

  font-size: clamp(2rem, 4vw, 3rem);

  font-weight: 500;

  margin-bottom: 0.5rem;

}



.tft-careers-final__benefits-header p {

  color: rgba(255, 255, 255, 0.5);

  font-size: 1.125rem;

}



.tft-careers-final__benefits-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 3rem;

}



@media (min-width: 768px) {

  .tft-careers-final__benefits-grid {

    grid-template-columns: 1fr 1fr;

  }

}



@media (min-width: 1024px) {

  .tft-careers-final__benefits-grid {

    grid-template-columns: 1fr 1fr 1fr;

  }

}



.tft-careers-final__benefit-item {

  display: flex;

  gap: 1rem;

}



.tft-careers-final__benefit-item .icon {

  font-size: 1.5rem;

  color: var(--cpf-color-accent, #fff);

  margin-top: -4px;

}



.tft-careers-final__benefit-item h4 {

  font-size: 1rem;

  font-weight: 500;

  margin-bottom: 0.5rem;

}



.tft-careers-final__benefit-item p {

  font-size: 0.9rem;

  color: rgba(255, 255, 255, 0.5);

  line-height: 1.5;

}



/* --- 5. OPEN ROLES --- */

.tft-careers-final__roles {

  padding: 10vh 5vw;

  max-width: 1000px;

  margin: 0 auto;

}



.tft-careers-final__roles-title {

  font-size: clamp(2rem, 4vw, 3rem);

  font-weight: 500;

  text-align: center;

  margin-bottom: 4rem;

}



.tft-careers-final__role-group {

  background: #111;

  border-radius: 12px;

  padding: 2rem;

  margin-bottom: 2rem;

}



.tft-careers-final__role-dept {

  font-size: 1.25rem;

  font-weight: 500;

  margin-bottom: 1.5rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  padding-bottom: 1rem;

}



.tft-careers-final__role-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1.5rem 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  text-decoration: none;

  color: #fff;

  transition: padding 0.3s ease;

}



.tft-careers-final__role-row:last-child {

  border-bottom: none;

  padding-bottom: 0;

}



.tft-careers-final__role-row .info h4 {

  font-size: 1.1rem;

  font-weight: 500;

  margin-bottom: 0.25rem;

}



.tft-careers-final__role-row .info span {

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.4);

}



.tft-careers-final__role-row .badge {

  background: rgba(255, 255, 255, 0.05);

  padding: 0.5rem 1rem;

  border-radius: 50px;

  font-size: 0.85rem;

  font-weight: 500;

  transition: background 0.3s ease, color 0.3s ease;

}



.tft-careers-final__role-row:hover {

  padding-left: 1rem;

}



.tft-careers-final__role-row:hover .badge {

  background: #fff;

  color: #000;

}



/* --- 6. CTA --- */

.tft-careers-final__cta {

  padding: 5vh 5vw;

}



.tft-careers-final__cta-box {

  background: #0a0a0a;

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: 20px;

  padding: 5vw;

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 2rem;

}



@media (min-width: 768px) {

  .tft-careers-final__cta-box {

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

  }

}



.tft-careers-final__cta-box h3 {

  font-size: 1.25rem;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.6);

  margin-bottom: 0.5rem;

}



.tft-careers-final__cta-box h2 {

  font-size: clamp(1.5rem, 3vw, 2.5rem);

  font-weight: 500;

}



.tft-careers-final__cta-btn {

  display: inline-flex;

  background: #fff;

  color: #000;

  padding: 1rem 2rem;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 500;

  transition: transform 0.3s ease;

}



.tft-careers-final__cta-btn:hover {

  transform: translateY(-2px);

}





/* ============================================================

   SOVEREIGN NEW: ABOUT ME V3 (PREMIUM HYBRID)

   ============================================================ */



.tft-about-me-v3-body {

  background-color: #050505;

  color: #ffffff;

  font-family: var(--cpf-font-body, "Inter", sans-serif);

  overflow-x: hidden;

}



.tft-about-me-v3 {

  position: relative;

  z-index: 1;

  padding-bottom: 10vh;

}



/* --- 1. HERO CUTOUT & MARQUEE --- */

.tft-about-me-v3__hero {

  position: relative;

  height: 100vh;

  min-height: 700px;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  overflow: hidden;

  background: radial-gradient(circle at 50% 50%, #151515 0%, #050505 100%);

}



.tft-about-me-v3__hero-glow {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 60vw;

  height: 60vw;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);

  border-radius: 50%;

  z-index: 0;

}



.tft-about-me-v3__hero-marquee {

  position: absolute;

  top: 50%;

  left: 0;

  width: 100vw;

  transform: translateY(-50%);

  overflow: hidden;

  white-space: nowrap;

  z-index: 1;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.tft-about-me-v3__hero-marquee-inner {

  display: inline-block;

  animation: tft-marquee-scroll 35s linear infinite;

  font-family: var(--cpf-font-heading, "Inter", sans-serif);

  font-size: clamp(5rem, 12vw, 15rem);

  font-weight: 700;

  line-height: 0.85;

  letter-spacing: -0.04em;

  text-transform: uppercase;

}



.tft-about-me-v3__hero-marquee-inner--reverse {

  animation-direction: reverse;

  margin-left: -50vw;

}



.tft-about-me-v3__hero-marquee-inner span {

  color: transparent;

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);

  padding-right: 2rem;

}



.tft-about-me-v3__hero-marquee-inner span.filled {

  color: #fff;

  -webkit-text-stroke: 0;

}



@keyframes tft-marquee-scroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



.tft-about-me-v3__hero-cutout {

  position: relative;

  z-index: 2;

  max-width: 800px;

  width: 90%;

  height: 85%;

  display: flex;

  align-items: flex-end;

  justify-content: center;

}



.tft-about-me-v3__hero-img {

  max-height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 -20px 40px rgba(0, 0, 0, 0.8)) contrast(1.1);

}



.tft-about-me-v3__hero-badge {

  position: absolute;

  bottom: 5vh;

  right: 0;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  padding: 1rem 1.5rem;

  border-radius: 50px;

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.75rem;

  letter-spacing: 0.1em;

  display: flex;

  align-items: center;

  gap: 1rem;

  text-transform: uppercase;

}



.tft-about-me-v3__hero-badge .pulse {

  width: 10px;

  height: 10px;

  background: #00ff66;

  border-radius: 50%;

  box-shadow: 0 0 10px #00ff66;

  animation: tft-pulse 2s infinite;

}



@keyframes tft-pulse {

  0% {

    opacity: 1;

    transform: scale(1);

  }



  50% {

    opacity: 0.5;

    transform: scale(1.2);

  }



  100% {

    opacity: 1;

    transform: scale(1);

  }

}



/* --- 2. EDITORIAL PHILOSOPHY --- */

.tft-about-me-v3__philosophy {

  padding: 15vh 5vw;

  max-width: 1400px;

  margin: 0 auto;

}







.tft-about-me-v3__phil-header {

  margin-bottom: 10vh;

  position: relative;

}



.tft-about-me-v3__phil-title {

  font-family: var(--cpf-font-heading, "Inter", sans-serif);

  font-size: clamp(3.5rem, 8vw, 9rem);

  font-weight: 400;

  line-height: 0.9;

  letter-spacing: -0.02em;

  text-transform: uppercase;

}



.tft-about-me-v3__phil-title .indent {

  display: block;

  margin-left: 15vw;

}



.tft-about-me-v3__phil-icon {

  position: absolute;

  right: 5vw;

  top: 50%;

  transform: translateY(-50%);

  color: #fff;

  opacity: 0.4;

  transition: transform 10s linear;

}



.tft-about-me-v3__phil-icon:hover {

  transform: translateY(-50%) rotate(180deg);

}



.tft-about-me-v3__phil-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 4rem;

  margin-bottom: 15vh;

}



@media (min-width: 992px) {

  .tft-about-me-v3__phil-grid {

    grid-template-columns: 5fr 7fr;

    align-items: center;

  }

}



.tft-about-me-v3__phil-img-wrap {

  position: relative;

  padding-bottom: 75%;

  overflow: hidden;

  border-radius: 8px;

}



.tft-about-me-v3__phil-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(80%);

}



.tft-about-me-v3__phil-caption {

  position: absolute;

  bottom: 20px;

  left: 20px;

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.7rem;

  letter-spacing: 0.1em;

  background: #000;

  color: #fff;

  padding: 0.5rem 1rem;

  border-radius: 50px;

}



.tft-about-me-v3__phil-text {

  font-size: clamp(1rem, 1.5vw, 1.25rem);

  line-height: 1.8;

  color: rgba(255, 255, 255, 0.7);

  max-width: 600px;

}



.tft-about-me-v3__phil-text p {

  margin-bottom: 1.5rem;

}



.tft-about-me-v3__phil-statement {

  text-align: left;

  max-width: 1200px;

}



.tft-about-me-v3__phil-large-text {

  font-family: var(--cpf-font-heading, "Inter", sans-serif);

  font-size: clamp(2rem, 4vw, 4rem);

  font-weight: 400;

  line-height: 1.1;

  text-transform: uppercase;

  margin-bottom: 3rem;

}



.tft-about-me-v3__phil-subtext {

  font-size: clamp(1rem, 1.5vw, 1.25rem);

  line-height: 1.8;

  color: rgba(255, 255, 255, 0.7);

  max-width: 800px;

  margin-left: auto;

}



/* --- 3. INTERACTIVE ROW TIMELINE --- */

.tft-about-me-v3__timeline {

  padding: 15vh 0;

}



.tft-about-me-v3__section-title {

  font-size: clamp(2rem, 4vw, 3rem);

  font-weight: 500;

  margin-bottom: 5rem;

  text-align: center;

  padding: 0 5vw;

}



.tft-about-me-v3__timeline-container {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-about-me-v3__timeline-row {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

  padding: 2rem 5vw;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  text-decoration: none;

  color: #fff;

  transition: background 0.4s ease, color 0.4s ease;

  align-items: center;

}



@media (min-width: 768px) {

  .tft-about-me-v3__timeline-row {

    grid-template-columns: 2fr 4fr 3fr 1fr;

    gap: 2rem;

    padding: 3rem 5vw;

  }

}



.tft-about-me-v3__timeline-year {

  font-family: var(--cpf-font-mono, monospace);

  font-size: 1.1rem;

  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.5);

  transition: color 0.4s ease;

}



.tft-about-me-v3__timeline-role {

  font-family: var(--cpf-font-heading, "Inter", sans-serif);

  font-size: clamp(1.5rem, 3vw, 2.5rem);

  font-weight: 500;

  letter-spacing: -0.02em;

}



.tft-about-me-v3__timeline-company {

  font-size: 1.125rem;

  color: rgba(255, 255, 255, 0.6);

  transition: color 0.4s ease;

}



.tft-about-me-v3__timeline-arrow {

  font-size: 2rem;

  text-align: right;

  opacity: 0;

  transform: translateX(-20px);

  transition: opacity 0.4s ease, transform 0.4s ease;

}



.tft-about-me-v3__timeline-row:hover {

  background: var(--cpf-color-accent, var(--cpf-color-accent));

  color: #000;

}



.tft-about-me-v3__timeline-row:hover .tft-about-me-v3__timeline-year,

.tft-about-me-v3__timeline-row:hover .tft-about-me-v3__timeline-company {

  color: #000;

}



.tft-about-me-v3__timeline-row:hover .tft-about-me-v3__timeline-arrow {

  opacity: 1;

  transform: translateX(0);

}



/* --- 4. BRUTALIST 4-COLUMN DATA GRID --- */

.tft-about-me-v3__data-grid {

  padding: 10vh 5vw 15vh;

  max-width: 1400px;

  margin: 0 auto;

}



.tft-about-me-v3__data-row {

  display: grid;

  grid-template-columns: 1fr;

  gap: 3rem;

}



@media (min-width: 576px) {

  .tft-about-me-v3__data-row {

    grid-template-columns: 1fr 1fr;

  }

}



@media (min-width: 992px) {

  .tft-about-me-v3__data-row {

    grid-template-columns: 1fr 1fr 1fr 1fr;

    gap: 0;

  }

}



.tft-about-me-v3__data-col {

  position: relative;

}



@media (min-width: 992px) {

  .tft-about-me-v3__data-col {

    padding: 0 3rem;

    border-right: 1px solid rgba(255, 255, 255, 0.1);

  }



  .tft-about-me-v3__data-col:first-child {

    padding-left: 0;

  }



  .tft-about-me-v3__data-col:last-child {

    border-right: none;

    padding-right: 0;

  }

}



.tft-about-me-v3__data-label {

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.8rem;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.4);

  text-transform: uppercase;

  margin-bottom: 2rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-bottom: 1rem;

}



.tft-about-me-v3__data-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.tft-about-me-v3__data-list li {

  font-size: 0.95rem;

  margin-bottom: 1rem;

  color: #fff;

  line-height: 1.4;

  transition: transform 0.3s ease;

}



.tft-about-me-v3__data-list a {

  color: #fff;

  text-decoration: none;

  transition: opacity 0.3s ease;

}



.tft-about-me-v3__data-list li:hover {

  transform: translateX(10px);

}



.tft-about-me-v3__data-list a:hover {

  opacity: 0.5;

}



/* ============================================================

   SOVEREIGN NEW: ABOUT ME V3 PREMIUM FEATURES

   ============================================================ */



/* Hover Triggers */

.tft-about-me-v3__hover-trigger {

  text-decoration: underline;

  text-decoration-color: rgba(255, 255, 255, 0.3);

  text-underline-offset: 4px;

  color: #fff;

  cursor: pointer;

  transition: text-decoration-color 0.3s ease;

}



.tft-about-me-v3__hover-trigger:hover {

  text-decoration-color: #fff;

}



/* Cursor Follower Image */

.tft-about-me-v3__cursor-img {

  position: fixed;

  top: 0;

  left: 0;

  width: 250px;

  height: 350px;

  object-fit: cover;

  pointer-events: none;

  z-index: 9999;

  opacity: 0;

  transform: translate(-50%, -50%) scale(0.8);

  transition: opacity 0.4s ease, transform 0.4s ease;

  border-radius: 8px;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

  filter: grayscale(100%);

}



.tft-about-me-v3__cursor-img.is-visible {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

}



/* Gallery Ribbon */

.tft-about-me-v3__gallery-ribbon {

  padding: 10vh 0;

  overflow: hidden;

  width: 100vw;

  margin-left: calc(-50vw + 50%);

  background: #000;

}



.tft-about-me-v3__ribbon-track {

  display: flex;

  gap: 2rem;

  width: max-content;

  animation: tft-ribbon-scroll 40s linear infinite;

}



.tft-about-me-v3__ribbon-track img {

  height: 40vh !important;

  min-height: 250px;

  object-fit: cover;

  border-radius: 8px;

  filter: grayscale(100%) opacity(0.5);

  transition: filter 0.4s ease;

}



.tft-about-me-v3__ribbon-track img:hover {

  filter: grayscale(0%) opacity(1);

}



@keyframes tft-ribbon-scroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(calc(-50% - 1rem));

  }



  /* -50% of track length minus half the gap */

}



/* FAQ Accordion */

.tft-about-me-v3__faq {

  padding: 15vh 5vw;

  max-width: 1000px;

  margin: 0 auto;

}



.tft-about-me-v3__faq-item {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding: 2rem 0;

}



.tft-about-me-v3__faq-item:last-child {

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-about-me-v3__faq-item summary {

  font-size: clamp(1.25rem, 2vw, 1.75rem);

  font-weight: 500;

  cursor: pointer;

  list-style: none;

  position: relative;

  padding-right: 40px;

  color: rgba(255, 255, 255, 0.9);

  transition: color 0.3s ease;

}



.tft-about-me-v3__faq-item summary:hover {

  color: #fff;

}



.tft-about-me-v3__faq-item summary::after {

  content: '+';

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  font-size: 2rem;

  font-weight: 300;

  transition: transform 0.3s ease;

}



.tft-about-me-v3__faq-item[open] summary::after {

  transform: translateY(-50%) rotate(45deg);

}



.tft-about-me-v3__faq-item summary::-webkit-details-marker {

  display: none;

}



.tft-about-me-v3__faq-item .content {

  padding-top: 2rem;

  font-size: 1.1rem;

  line-height: 1.8;

  color: rgba(255, 255, 255, 0.6);

  max-width: 800px;

}



/* ============================================================

   TFT THEME OVERRIDES (APPENDED AT THE BOTTOM)

   ============================================================ */

.cpf-drawer__list .cpf-drawer__item.has-dropdown {

  counter-reset: none !important;

}





/* ==========================================================================

   WORK ALT (KINETIC TYPOGRAPHY) - NEW PORTFOLIO LAYOUT

   ========================================================================== */



body.tft-work-kinetic-page {

  background-color: var(--cpf-color-page-bg, #121212);

  color: var(--cpf-color-white, #ffffff);

  transition: background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  overflow-x: hidden;

}



.tft-work-kinetic {

  padding: 15vh 4vw;

  min-height: 100vh;

  position: relative;

  z-index: 1;

  transition: background-color 0.8s cubic-bezier(0.19, 1, 0.22, 1);

}



.tft-work-kinetic__header {

  margin-bottom: 8vh;

}



.tft-work-kinetic__badge {

  display: block;

  font-family: var(--tft-font-mono);

  font-size: 0.85rem;

  letter-spacing: 0.05em;

  color: var(--tft-text-muted);

  margin-bottom: 1rem;

}



.tft-work-kinetic__title {

  font-size: clamp(3rem, 6vw, 6rem);

  line-height: 1.1;

  font-weight: 400;

  text-transform: uppercase;

}



.tft-work-kinetic__title .italic {

  font-style: italic;

  font-family: var(--tft-font-serif, "Playfair Display", serif);

  text-transform: lowercase;

}



.tft-work-kinetic__list {

  list-style: none;

  padding: 0;

  margin: 0;

  position: relative;

  z-index: 2;

}



.tft-work-kinetic__item {

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  transition: opacity 0.4s ease;

}



.tft-work-kinetic__item:first-child {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.tft-work-kinetic__item.is-dimmed {

  opacity: 0.2;

}



.tft-work-kinetic__link {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  padding: 3vh 0;

  text-decoration: none;

  color: inherit;

  position: relative;

  overflow: hidden;

}



.tft-work-kinetic__index {

  font-family: var(--tft-font-mono);

  font-size: 1rem;

  color: var(--tft-text-muted);

  width: 50px;

}



.tft-work-kinetic__name {

  font-size: clamp(3rem, 7vw, 8rem);

  font-weight: 700;

  text-transform: uppercase;

  line-height: 0.9;

  flex: 1;

  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s ease, letter-spacing 0.6s cubic-bezier(0.19, 1, 0.22, 1);

  transform-origin: left center;

}



.tft-work-kinetic__cat {

  font-family: var(--tft-font-mono);

  font-size: 1rem;

  text-transform: uppercase;

  color: var(--tft-text-muted);

  text-align: right;

}



.tft-work-kinetic__item:hover .tft-work-kinetic__name {

  transform: translateX(4vw);

  letter-spacing: 0.05em;

  color: #ffcc00;

  font-style: normal;

}



.tft-work-kinetic__media-wrap {

  position: fixed;

  top: 0;

  left: 0;

  width: 25vw;

  min-width: 300px;

  max-width: 500px;

  aspect-ratio: 4/5;

  pointer-events: none;

  z-index: 5;

  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);

  visibility: hidden;

  transition: clip-path 0.7s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.7s;

  overflow: hidden;

}



#tft-kinetic-media-wrap {

  margin-top: -30vh;

  margin-left: -12.5vw;

}



.tft-work-kinetic__media-wrap.is-visible {

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

  visibility: visible;

}



.tft-work-kinetic__media-inner {

  position: relative;

  width: 100%;

  height: 100%;

}



.tft-work-kinetic__img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100% !important;

  object-fit: cover;

  opacity: 0;

  transform: scale(1.4) rotate(5deg);

  transition: opacity 0.4s ease, transform 1s cubic-bezier(0.19, 1, 0.22, 1);

}



.tft-work-kinetic__img.is-active {

  opacity: 1;

  transform: scale(1) rotate(0deg);

}



@media (max-width: 768px) {

  .tft-work-kinetic__link {

    flex-direction: column;

    padding: 4vh 0;

  }



  .tft-work-kinetic__index {

    margin-bottom: 1rem;

  }



  .tft-work-kinetic__cat {

    margin-top: 1rem;

    text-align: left;

  }



  .tft-work-kinetic__item:hover .tft-work-kinetic__name {

    transform: translateX(4vw);

    letter-spacing: 0.05em;

    color: #ffcc00;

    font-style: normal;

  }



  .tft-work-kinetic__media-wrap {

    display: none !important;

  }

}



/* KINETIC UPDATE: Animated Borders & Brutalist Tags */

.tft-work-kinetic__item {

  position: relative;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.tft-work-kinetic__item:first-child {

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



















.tft-work-kinetic__tags {

  display: flex;

  gap: 1rem;

  align-items: center;

}



.tft-work-kinetic__tag {

  font-family: var(--cpf-font-mono, 'Fragment Mono', monospace);

  font-size: 0.85rem;

  text-transform: uppercase;

  color: #ffffff;

  opacity: 0.8;

  border: 1px solid rgba(255, 255, 255, 0.3);

  padding: 0.4rem 0.8rem;

  border-radius: 4px;

  transition: background 0.4s ease, color 0.4s ease, opacity 0.4s ease, border-color 0.4s ease;

}



.tft-work-kinetic__item:hover .tft-work-kinetic__tag {

  background: #ffcc00;

  border-color: #ffcc00;

  color: #000000;

  opacity: 1;

}



/* Hide original .tft-work-kinetic__cat */

.tft-work-kinetic__cat {

  display: none !important;

}



/* KINETIC UPDATE: Image Animated Borders */

.tft-work-kinetic__media-inner::before,

.tft-work-kinetic__media-inner::after,

.tft-work-kinetic__media-wrap::before,

.tft-work-kinetic__media-wrap::after {

  content: '';

  position: absolute;

  background: #ffcc00;

  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);

  z-index: 10;

}



/* Top border */

.tft-work-kinetic__media-inner::before {

  top: 0;

  left: 0;

  width: 0;

  height: 3px;

}



.tft-work-kinetic__media-wrap.is-visible .tft-work-kinetic__media-inner::before {

  width: 100%;

  transition-delay: 0.3s;

}



/* Bottom border */

.tft-work-kinetic__media-inner::after {

  bottom: 0;

  right: 0;

  width: 0;

  height: 3px;

}



.tft-work-kinetic__media-wrap.is-visible .tft-work-kinetic__media-inner::after {

  width: 100%;

  transition-delay: 0.3s;

}



/* Left border */

.tft-work-kinetic__media-wrap::before {

  top: 0;

  left: 0;

  width: 3px;

  height: 0;

}



.tft-work-kinetic__media-wrap.is-visible::before {

  height: 100%;

  transition-delay: 0.3s;

}



/* Right border */

.tft-work-kinetic__media-wrap::after {

  bottom: 0;

  right: 0;

  width: 3px;

  height: 0;

}



.tft-work-kinetic__media-wrap.is-visible::after {

  height: 100%;

  transition-delay: 0.3s;

}



.tft-work-kinetic__index {

  display: inline-block;

  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s ease;

}



.tft-work-kinetic__item:hover .tft-work-kinetic__index {

  transform: translateY(-10px);

  color: #ffcc00;

}



/* ====== EXTREME INTERACTIONS UPDATE ====== */



/* 1. Aggressive Dimming */

.tft-work-kinetic__item.is-dimmed {

  opacity: 0.15;

  transform: scale(0.98);

  filter: blur(4px);

}



/* 2. Item Staggering & Depth */

.tft-work-kinetic__item {

  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), filter 0.6s ease;

  will-change: transform, opacity, filter;

}



.tft-work-kinetic__item:hover {

  z-index: 10;

  transform: scale(1.02);

}



/* 3. Massive Typography 3D Effect */

.tft-work-kinetic__item .tft-work-kinetic__name {

  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s ease, letter-spacing 0.6s cubic-bezier(0.19, 1, 0.22, 1), text-shadow 0.6s ease;

}



.tft-work-kinetic__item:hover .tft-work-kinetic__name {

  transform: translateX(4vw) scale(1.05);

  letter-spacing: 0.05em;

  color: #ffcc00;

  text-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);

}



/* 4. 3D Flipping Tags */

.tft-work-kinetic__tag {

  transform: perspective(600px) rotateX(90deg);

  transform-origin: bottom;

  opacity: 0;

  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), background 0.4s ease, color 0.4s ease, opacity 0.4s ease, border-color 0.4s ease;

}



.tft-work-kinetic__item:hover .tft-work-kinetic__tag {

  transform: perspective(600px) rotateX(0deg);

  opacity: 1;

}



.tft-work-kinetic__item:hover .tft-work-kinetic__tag:nth-child(2) {

  transition-delay: 0.1s;

}



/* 5. Image Reveal Aggression */

.tft-work-kinetic__media-wrap {

  transition: clip-path 0.8s cubic-bezier(0.85, 0, 0.15, 1), visibility 0.8s;

  will-change: transform, clip-path;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);

}



.tft-work-kinetic__img {

  transform: scale(1.6) rotate(8deg);

  filter: saturate(0) contrast(1.2);

  transition: opacity 0.4s ease, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), filter 1s ease;

}



.tft-work-kinetic__img.is-active {

  transform: scale(1) rotate(0deg);

  filter: saturate(1) contrast(1);

}



/* 6. Border Tracing Delay */

.tft-work-kinetic__media-wrap.is-visible .tft-work-kinetic__media-inner::before,

.tft-work-kinetic__media-wrap.is-visible .tft-work-kinetic__media-inner::after,

.tft-work-kinetic__media-wrap.is-visible::before,

.tft-work-kinetic__media-wrap.is-visible::after {

  transition-delay: 0.4s;

}



/* ====== UNIVERSAL FLUID TYPOGRAPHY & 320PX RESPONSIVE PATCH ====== */



/* 1. Fluid Typography Overrides */

h1,

.h1,

.tft-hero-title,

.tft-work-kinetic__name {

  font-size: clamp(2.5rem, 8vw, 8rem) !important;

  line-height: 1.1 !important;

}



h2,

.h2,

.section-title {

  font-size: clamp(2rem, 5vw, 4.5rem) !important;

  line-height: 1.2 !important;

}



h3,

.h3 {

  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;

}



p,

.text,

.desc {

  font-size: clamp(1rem, 1.2vw, 1.125rem) !important;

}



/* 2. Global Fluid Spacing */

section,

.tft-section {

  padding-top: clamp(4rem, 10vw, 10rem) !important;

  padding-bottom: clamp(4rem, 10vw, 10rem) !important;

}



/* 3. Extreme Mobile (320px) Safety Constraints */

html,

body {

  overflow-x: hidden !important;

  max-width: 100vw !important;

}



img,

video,

canvas,

iframe {

  max-width: 100% !important;

  display: block;

}



@media screen and (max-width: 400px) {



  /* Prevent word-breaks from overflowing the container */

  h1,

  h2,

  h3,

  h4,

  h5,

  h6,

  p,

  a,

  span {

    word-break: break-word !important;

    overflow-wrap: break-word !important;

  }



  /* Force grids and flex containers to stack linearly on extremely small screens */

  .tft-grid,

  .tft-flex,

  [style*="display: grid"],

  [style*="display: flex"] {

    grid-template-columns: 1fr !important;

    flex-direction: column !important;

  }



  /* Adjust kinetic portfolio specific elements for 320px */

  .tft-work-kinetic__item {

    flex-direction: column !important;

    align-items: flex-start !important;

    padding: 1.5rem 0 !important;

  }



  .tft-work-kinetic__name {

    font-size: clamp(2rem, 12vw, 3rem) !important;

    transform: none !important;

  }



  .tft-work-kinetic__tags {

    margin-top: 1rem !important;

    flex-wrap: wrap !important;

  }

}



@media screen and (max-width: 500px) {



  .tft-archives,

  [style*='width'],

  .tft-work-kinetic__media-wrap {

    max-width: 100vw !important;

    width: 100% !important;

  }

}



/* ====== MOBILE UI OVERHAUL (TFT V2.5) ====== */



/* 1. About Page Cutoff Fixes */

@media (max-width: 768px) {



  /* Fix Genesis Timeline Overflow */

  .tft-about-matrix,

  .tft-about-matrix__row,

  .tft-about-matrix__node {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    max-width: 100vw !important;

    overflow: hidden !important;

  }



  .tft-about-matrix__node-name,

  .tft-about-matrix__node-desc,

  .tft-about-matrix__year {

    width: 100% !important;

    text-align: left !important;

    padding-left: 0 !important;

    word-break: normal !important;

  }



  /* Fix Mission/Core Tab Overflow */

  .tft-about-strat-refined__content,

  .tft-about-core__content,

  .tft-about-core__panel {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    padding: 1rem !important;

  }



  .tft-about-strat-refined__panel-list li,

  .tft-about-core__btn {

    white-space: normal !important;

    word-wrap: break-word !important;

  }

}



/* 2. Menu Z-Index Fix (Index-5) */

#tfd-menu-overlay,

.tfd-menu,

.tfd-menu__nav {

  z-index: 99999 !important;

  /* Force above WebGL canvas */

}



#tfd-burger,

.cpf-header__burger {

  z-index: 100000 !important;

}



/* 3. Slider Image Aspect Ratio Fixes (Index-4 / Pulse / Aurora) */

.tft-pulse__img,

.tft-aurora__img,

.tft-detroit__img {

  object-fit: cover !important;

  height: 100% !important;

  width: 100% !important;

}



/* 4. Index-6 Mobile Typography/Spacing Polish */

@media (max-width: 768px) {

  .tft-particle-hero__title {

    font-size: clamp(2.5rem, 12vw, 4rem) !important;

    line-height: 1.1 !important;

  }



  .tft-particle-hero__subtitle {

    font-size: 1rem !important;

    margin-bottom: 2rem !important;

  }



  .tft-particle-hero__content {

    padding: 0 1.5rem !important;

    width: 100% !important;

  }

}



/* ====== METABALLS SHOWCASE (INDEX-7) ====== */

.tft-metaballs-hero {

  position: relative;

  width: 100vw;

  height: 100vh;

  overflow: hidden;

  background-color: var(--cpf-color-dark);

}



.tft-metaballs-scene {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  /* Below the UI but above the background */

}



.tft-metaballs-scene canvas {

  width: 100% !important;

  height: 100% !important;

  display: block;

}



.tft-metaballs-ui {

  position: absolute;

  bottom: 5vh;

  left: 0;

  width: 100%;

  padding: 0 4vw;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: 10;

  pointer-events: none;

}



.tft-metaballs-nav-hint {

  font-family: var(--cpf-font-display);

  font-size: 1rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--cpf-color-light);

  opacity: 0.7;

}



.tft-metaballs-nav-buttons {

  display: flex;

  gap: 1rem;

  pointer-events: auto;

}



/* Ensure global header is always on top */

#site-header {

  z-index: 9999 !important;

}



/* ====== METABALLS SHOWCASE UI OVERLAY ====== */

.tft-mb-overlay {

  position: absolute;

  top: 50%;

  left: 5vw;

  transform: translateY(-50%);

  width: 90vw;

  z-index: 10;

  pointer-events: none;

}



.tft-mb-slide {

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

  transform: translateY(40px) scale(0.98);

  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: none;

  visibility: hidden;

}



.tft-mb-slide.is-active {

  position: relative;

  opacity: 1;

  transform: translateY(0) scale(1);

  pointer-events: auto;

  visibility: visible;

  transition-delay: 0.5s;

}



.tft-mb-slide.is-exiting {

  opacity: 0;

  transform: translateY(-40px) scale(0.98);

  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);

}



.tft-mb-category {

  font-family: var(--cpf-font-body);

  font-size: clamp(0.75rem, 1vw, 1rem);

  letter-spacing: 0.2em;

  color: var(--cpf-color-accent);

  margin-bottom: 1rem;

  font-weight: 600;

  text-transform: uppercase;

}



.tft-mb-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 10vw, 8rem);

  line-height: 0.9;

  text-transform: uppercase;

  color: var(--cpf-color-light);

  margin-bottom: 2rem;

  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  max-width: 1200px;

}



.tft-btn--mb {

  display: inline-block;

  padding: 1.25rem 2.5rem;

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--cpf-color-dark);

  background: var(--cpf-color-light);

  border-radius: 100px;

  text-decoration: none;

  transition: all 0.4s ease;

  pointer-events: auto;

}



.tft-btn--mb:hover {

  background: var(--cpf-color-accent);

  transform: scale(1.05);

}



/* Nav UI Improvements */

.tft-mb-progress {

  display: inline-block;

  margin-right: 2rem;

  font-family: var(--cpf-font-display);

  font-size: 1.25rem;

  color: var(--cpf-color-light);

}



.tft-mb-progress .current {

  color: var(--cpf-color-accent);

}



.tft-mb-nav-btn {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 50%;

  width: 60px;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--cpf-color-light);

  cursor: pointer;

  transition: all 0.3s ease;

  backdrop-filter: blur(10px);

}



.tft-mb-nav-btn:hover {

  background: var(--cpf-color-light);

  color: var(--cpf-color-dark);

  border-color: var(--cpf-color-light);

  transform: scale(1.1);

}



/* Hide dat.gui */

.dg.ac {

  display: none !important;

}





.tft-mb-grid {

  display: flex;

  align-items: center;

  gap: 4rem;

}



.tft-mb-index {

  font-family: var(--cpf-font-display);

  font-size: clamp(8rem, 20vw, 24rem);

  line-height: 0.8;

  color: transparent;

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);

  user-select: none;

}



.tft-mb-category {

  display: flex;

  align-items: center;

  gap: 1rem;

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  letter-spacing: 0.3em;

  color: var(--cpf-color-accent);

  margin-bottom: 2rem;

  font-weight: 600;

}



.tft-mb-category span {

  color: rgba(255, 255, 255, 0.2);

}



.tft-mb-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(3rem, 7vw, 7rem);

  line-height: 0.95;

  text-transform: uppercase;

  color: var(--cpf-color-light);

  margin-bottom: 3rem;

  letter-spacing: -0.02em;

}



.tft-mb-title i {

  font-family: 'Playfair Display', Georgia, serif;

  font-style: italic;

  font-weight: 400;

  color: transparent;

  -webkit-text-stroke: 1px var(--cpf-color-light);

}



.tft-btn--avant {

  display: inline-flex;

  align-items: center;

  gap: 1.5rem;

  padding: 1rem 2rem 1rem 1.5rem;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 100px;

  background: transparent;

  color: var(--cpf-color-light);

  font-family: var(--cpf-font-body);

  font-size: 0.75rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  text-decoration: none;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: auto;

  position: relative;

  overflow: hidden;

}



.tft-btn--avant::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--cpf-color-light);

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: 0;

}



.tft-btn--avant:hover::before {

  transform: scaleX(1);

  transform-origin: left;

}



.tft-btn--avant:hover {

  color: var(--cpf-color-dark);

  border-color: var(--cpf-color-light);

}



.tft-btn--avant .text,

.tft-btn--avant .icon {

  position: relative;

  z-index: 1;

}



.tft-btn--avant .icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.1);

  transition: all 0.4s ease;

}



.tft-btn--avant:hover .icon {

  background: var(--cpf-color-dark);

  color: var(--cpf-color-light);

}



/* Redesigned Progress Tracker */

.tft-mb-progress {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  margin-right: 2rem;

  font-family: var(--cpf-font-body);

  font-size: 0.85rem;

  letter-spacing: 0.2em;

  color: rgba(255, 255, 255, 0.5);

}



.tft-mb-progress .current {

  color: var(--cpf-color-light);

  font-family: var(--cpf-font-display);

  font-size: 1.5rem;

}



/* ==========================================================================

   METABALLS PREMIUM UI OVERLAY (NON-INTERFERING)

   ========================================================================== */



.tft-mb-ui-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  pointer-events: none;

  /* Crucial: Allows WebGL canvas to capture scroll/touch natively! */

  z-index: 10;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  /* Center horizontally */

  padding: 0 6%;

  /* Soft radial vignette */

  background: radial-gradient(circle at center, rgba(10, 10, 12, 0.1) 0%, rgba(10, 10, 12, 0.7) 100%);

}



.tft-mb-texts {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.tft-mb-text-slide {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -40%);

  text-align: center;

  width: 90vw;

  display: flex;

  flex-direction: column;

  align-items: center;

  opacity: 0;

  pointer-events: none;

  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

  visibility: hidden;

}



.tft-mb-text-slide.is-active {

  opacity: 1;

  transform: translate(-50%, -50%);

  visibility: visible;

  /* Removed pointer-events: auto so the 90vw wrapper doesn't block WebGL scrolling! */

}



.tft-mb-tag {

  font-family: var(--cpf-font-body);

  font-size: 0.75rem;

  letter-spacing: 0.5em;

  color: var(--cpf-color-light);

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  padding: 0.6rem 2rem;

  border-radius: 50px;

  margin-bottom: 3rem;

  font-weight: 500;

  text-transform: uppercase;

  display: inline-flex;

  align-items: center;

}



.tft-mb-tag::before {

  display: none;

}



.tft-mb-title {

  font-family: var(--cpf-font-display);

  font-size: clamp(4rem, 11vw, 12rem);

  line-height: 0.85;

  text-transform: uppercase;

  color: var(--cpf-color-light);

  margin-bottom: 3.5rem;

  letter-spacing: -0.04em;

  font-weight: 800;

}



.tft-mb-title span {

  font-family: inherit;

  font-style: normal;

  font-weight: 800;

  color: transparent;

  -webkit-text-stroke: 1.5px var(--cpf-color-light);

  text-shadow: none;

  padding-left: 0;

  display: block;

}



.tft-mb-link {

  display: inline-flex;

  align-items: center;

  font-family: var(--cpf-font-body);

  font-size: 0.8rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--cpf-color-light);

  text-decoration: none;

  position: relative;

  padding-bottom: 0.5rem;

  font-weight: 500;

  pointer-events: auto;

  /* Only the link catches the mouse! */

}



.tft-mb-link::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 1px;

  background: rgba(255, 255, 255, 0.4);

  transition: background 0.3s ease, transform 0.3s ease;

  transform-origin: right;

}



.tft-mb-link:hover::after {

  background: var(--cpf-color-accent);

  transform: scaleX(0.6);

  transform-origin: left;

}



/* Premium Navigation */

.tft-mb-nav-container {

  position: absolute;

  bottom: 4rem;

  left: 50%;

  transform: translateX(-50%);

  pointer-events: auto;

  /* Let buttons be clickable */

}



.tft-mb-nav-buttons {

  display: flex;

  gap: 1.5rem;

}



.tft-mb-arrow-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  padding: 1rem 2rem;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 100px;

  background: rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(15px);

  color: var(--cpf-color-light);

  font-family: var(--cpf-font-body);

  font-size: 0.8rem;

  letter-spacing: 0.15em;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.tft-mb-arrow-btn svg {

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.tft-mb-arrow-btn:hover {

  background: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

  border-color: var(--cpf-color-accent);

}



.tft-mb-arrow-btn#prev:hover svg {

  transform: translateX(-4px);

}



.tft-mb-arrow-btn#next:hover svg {

  transform: translateX(4px);

}



/* GUARANTEE BURGER CLICKS */

.cpf-header__burger,

#tfd-burger,

#nav-burger {

  pointer-events: auto !important;

  z-index: 100000 !important;

  cursor: pointer !important;

}





/* FIX SINGLE POST SIDEBAR TITLES */

h2.tft-sp__toc-label,

h3.tft-sp__toc-label {

  font-size: 0.62rem !important;

  line-height: 1.5 !important;

  letter-spacing: 0.28em !important;

}





/* FIX SINGLE POST HERO TEXT OVERLAP */









/* FIX ZYLYF BADGE POSITION */

.cpf-analytics__hero {

  overflow: visible !important;

}



.cpf-analytics__hero-img,

.cpf-analytics__img-wrap {

  border-radius: 40px !important;

  overflow: hidden;

}



.cpf-analytics__hero-data {

  bottom: 0 !important;

  left: 50% !important;

  transform: translate(-50%, 50%) !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

}





/* FIX CONTACT PAGE HERO TYPOGRAPHY REGRESSION */

.tft-contact-hero__title {

  font-size: clamp(2.5rem, 6vw, 5rem) !important;

}













/* REDUCE SINGLE POST EXCESSIVE GAPS */

.tft-sp__section {

  margin-block-end: clamp(1.5rem, 4vw, 3rem) !important;

}



.tft-sp__figure {

  margin-block: clamp(1.5rem, 3vw, 2.5rem) !important;

}



.tft-sp__blockquote {

  margin-block: 1.5rem !important;

}



/* REDUCE CAREERS H2 FONT SIZE */

.tft-careers-final__mission-left h2 {

  font-size: clamp(1.1rem, 2vw, 1.8rem) !important;

  line-height: 1.4 !important;

}





/* FIX ABOUT HERO IMAGES ASPECT RATIO */

.tft-about-hero__img-primary,

.tft-about-hero__img-secondary {

  height: auto !important;

}





/* FIX SINGLE POST HERO CUTOFF ON WIDE SCREENS */

.tft-sp__hero {

  block-size: auto !important;

  min-block-size: 100svh !important;

}



/* FIX CAREERS FINAL SECTION SIZES AND COLORS */

.tft-careers-final__values-title {

  font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important;

}



.tft-careers-final__cta-box h2 {

  font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important;

}



.tft-careers-final__cta-btn {

  background: var(--cpf-color-primary, var(--cpf-color-accent)) !important;

  color: var(--cpf-color-dark, #000) !important;

  border: none !important;

  font-weight: 600 !important;

}



.tft-careers-final__cta-btn:hover {

  background: #fff !important;

}



.tft-careers-final__role-row .badge {

  background: var(--cpf-color-primary, var(--cpf-color-accent)) !important;

  color: var(--cpf-color-dark, #000) !important;

  border: none !important;

  font-weight: 600 !important;

}



.tft-careers-final__role-row:hover .badge {

  background: #fff !important;

}



/* IMPROVE CAREERS VALUES UI */

.tft-careers-final__values-box {

  position: relative;

  background: radial-gradient(circle at top left, #1a1a1a 0%, #111 100%);

}



.tft-careers-final__values-box::before {

  content: '';

  position: absolute;

  top: -50%;

  left: -50%;

  width: 150%;

  height: 150%;

  background: url('../img/aurora-bg-1.png') no-repeat center center / cover;

  opacity: 0.08;

  mix-blend-mode: overlay;

  pointer-events: none;

}



.tft-careers-final__value-card {

  position: relative;

  overflow: hidden;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;

  border-left: 2px solid transparent;

}



.tft-careers-final__value-card:hover {

  transform: translateX(8px);

  border-left-color: var(--cpf-color-primary, var(--cpf-color-accent));

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

  background: #1e1e1e;

}



.tft-careers-final__value-card h3 {

  display: flex;

  align-items: center;

  gap: 0.8rem;

}



.tft-careers-final__value-card h3::before {

  content: '';

  display: block;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--cpf-color-primary, var(--cpf-color-accent));

  opacity: 0.3;

  transition: all 0.3s ease;

}



.tft-careers-final__value-card:hover h3::before {

  opacity: 1;

  transform: scale(1.5);

  box-shadow: 0 0 10px rgba(232, 185, 35, 0.5);

}



/* REVERT CAREERS TYPOGRAPHY DESTROYED BY GLOBAL FLUID PATCH */

.tft-careers-final__hero-title {

  font-size: clamp(3rem, 6vw, 5rem) !important;

  line-height: 1.1 !important;

}



.tft-careers-final__value-card h3 {

  font-size: 1.25rem !important;

}





.tft-careers-final__benefits-header h2 {

  font-size: clamp(2rem, 4vw, 3rem) !important;

}



.tft-careers-final__roles-title {

  font-size: clamp(2rem, 4vw, 3rem) !important;

}



.tft-careers-final__role-dept {

  font-size: 1.25rem !important;

}





/* ==========================================================================

   MOBILE LAYOUT REGRESSION FIXES (v1.4)

   ========================================================================== */

@media (max-width: 768px) {



  /* 1. index-4.html Slider Image Stretching Fix */

  .tft-aurora__bg img {

    height: 100% !important;

    width: 100% !important;

    object-fit: cover !important;

  }



  /* 2. about.html System Metrics (Trajectory) Overflow Fix */

  .tft-about-matrix__main-grid {

    grid-template-columns: 1fr !important;

    gap: 3rem !important;

  }



  /* 3. about.html Mission Stacking Fix */

  .tft-about-strat-refined__grid {

    grid-template-columns: 1fr !important;

    gap: 3rem !important;

  }



  .tft-about-strat-refined__img img {

    height: auto !important;

    max-height: 400px !important;

    object-fit: cover !important;

  }



  /* 4. about.html Strategy Team Overflow Fix */

  .tft-about-team__grid {

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;

    gap: 2rem !important;

  }

}



/* ==========================================================================

   WORK KINETIC MOBILE PATCH

   ========================================================================== */

.tft-work-kinetic__mobile-img {

  display: none;

}



@media (max-width: 768px) {

  .tft-work-kinetic__media-wrap {

    display: none !important;

  }



  .tft-work-kinetic__mobile-img {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    max-height: 400px;

    object-fit: cover;

    margin-top: 2rem !important;

    filter: grayscale(100%);

  }



  .tft-work-kinetic__link {

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    padding: 3rem 0 !important;

  }



  .tft-work-kinetic__tags {

    justify-content: center !important;

  }



  .tft-work-kinetic__index {

    margin-bottom: 1.5rem !important;

  }



  .tft-work-kinetic__name {

    margin-bottom: 1.5rem !important;

  }

}



/* ==========================================================================

   WORK-SINGLE MOBILE PATCH

   ========================================================================== */

@media (max-width: 768px) {

  .tft-pd-title-sup {

    margin-block-end: 0 !important;

    font-size: clamp(1.5rem, 8vw, 2.5rem) !important;

  }



  .tft-pd-title-main {

    line-height: 1 !important;

  }

}





/* ============================================================

   FIX: Portfolio card titles -- override global h2 clamp reset

   ============================================================ */

.tft-portfolio__card-title {

  font-size: clamp(0.875rem, 1.2vw, 1.125rem) !important;

  font-weight: 700 !important;

  line-height: 1.2 !important;

  letter-spacing: -0.01em !important;

}



.tft-portfolio__card-title .year {

  font-size: inherit !important;

  font-weight: 400 !important;

  opacity: 0.35 !important;

}





/* ============================================================

   FIX: Global Image Reset (W3C Validation Patch Support)

   Prevents explicit width/height attributes from breaking grids

   ============================================================ */





.avatar {

  width: 40px !important;

  height: 40px !important;

  border-radius: 50%;

  object-fit: cover;

}



/* FIX: Architects Mobile */

@media (max-width: 992px) {

  .cpf-architects__layout {

    grid-template-columns: 1fr;

    gap: 40px;

    padding-inline: 20px;

  }



  .cpf-architects__intel {

    position: relative;

    top: 0;

  }

}



@media (max-width: 768px) {

  .cpf-architects__collection {

    grid-template-columns: 1fr;

    gap: 24px;

  }



  .cpf-architects__card.secondary {

    margin-top: 0;

  }

}



/* FIX: Topbar Redesign */

.cpf-header__console {

  font-size: 10px !important;

  border-bottom: none !important;

}



.cpf-header__status,

.cpf-header__meta {

  background: rgba(255, 255, 255, 0.03);

  padding: 4px 16px;

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-left: 2px solid var(--cpf-color-accent, var(--cpf-color-accent));

  transform: skewX(-15deg);

  margin-inline: 10px;

}



.cpf-header__status>*,

.cpf-header__meta>* {

  transform: skewX(15deg);

  display: inline-block;

}



.cpf-header__label,

.cpf-header__clock {

  font-size: 10px !important;

  letter-spacing: 0.15em !important;

  color: rgba(255, 255, 255, 0.6) !important;

}



.cpf-header__label .val {

  color: #fff !important;

}



.cpf-header__sep {

  font-size: 0 !important;

  width: 4px;

  height: 14px;

  background: rgba(255, 255, 255, 0.1);

  margin-inline: 12px;

  transform: skewX(15deg) translateY(2px);

}





/* FIX: Dropdown Menu Wrap Jump on Hover */

.cpf-header__dropdown a {

  white-space: nowrap !important;

}



.cpf-header__dropdown a {

  gap: 20px !important;

}



/* FIX: Metaballs Next/Prev Icons Missing Size */

.tft-mb-arrow-btn svg {

  width: 24px !important;

  height: 24px !important;

  display: block !important;

}



/* FIX: Blog Typography Override (W3C Validation Patch Support) */

.cpf-insights__card-title {

  font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;

  line-height: 1.3 !important;

}



.cpf-insights__card-text {

  font-size: 0.85rem !important;

  line-height: 1.5 !important;

}



/* FIX: Micro-Typography Refinements for Blog Cards */

.cpf-insights__card-date {

  font-size: 0.6rem !important;

  letter-spacing: 0.25em !important;

}



.cpf-insights__card-category {

  font-size: 0.6rem !important;

  letter-spacing: 0.25em !important;

  padding: 0.4rem 1rem !important;

}



/* FIX: Double Bullet Glitch (Square + Arrow Overlap) on About Page */

.tft-about-strat-refined__list li::before,

.tft-about-core__list li::before {

  content: '\2192' !important;

  font-family: var(--cpf-font-mono, monospace) !important;

  background: transparent !important;

  box-shadow: none !important;

  width: auto !important;

  height: auto !important;

  display: inline-block !important;

  color: var(--cpf-color-accent) !important;

  margin-right: 12px !important;

}



/* FIX: Prevent WebGL Hover Effect Stretching on Founder Image */

.tft-about-founder__media-wrapper canvas {

  width: 100% !important;

  height: auto !important;

  aspect-ratio: 3/4 !important;

  object-fit: cover !important;

  border-radius: var(--cpf-radius-lg) !important;

  z-index: 1 !important;

  /* keep canvas behind text */

}



/* FIX: Keep Founder Quote visible above WebGL Canvas */

.tft-about-founder__quote {

  z-index: 10 !important;

}



/* FIX: Normalize oversized headings in About Me data columns */

.tft-about-me-v3__data-label {

  font-family: var(--cpf-font-mono, monospace) !important;

  font-size: 0.8rem !important;

  letter-spacing: 0.15em !important;

  font-weight: 400 !important;

  color: rgba(255, 255, 255, 0.4) !important;

  line-height: 1.4 !important;

  margin-bottom: 2rem !important;

}



/* FIX: Restore correct size for the Philosophy Eye Icon */

.tft-about-me-v3__phil-icon {

  width: 1.5rem !important;

  height: 1.5rem !important;

}



/* FIX: Remove nonsense Eye Icon and replace with brutalist yellow accent shape */

.tft-about-me-v3__phil-icon {

  display: none !important;

}



.tft-about-me-v3__phil-header {

  position: relative !important;

}



.tft-about-me-v3__phil-header::after {

  content: '' !important;

  position: absolute !important;

  right: 5vw !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  width: clamp(2rem, 4vw, 4rem) !important;

  aspect-ratio: 1/1 !important;

  background-color: var(--cpf-color-accent) !important;

}



/* FIX: Normalize oversized h3 headings in Services data blocks */

.tft-srv__data-title {

  font-size: 0.85rem !important;

  line-height: 1.4 !important;

}



/* FIX: Normalize oversized h3 headings in Single Post comments */

.tft-sp__comment-name {

  font-size: 1.1rem !important;

  line-height: 1.2 !important;

  margin-bottom: 0 !important;

}



/* FIX: Restore Contact Page Layouts from Global Overrides and W3C Patch */

.tft-contact-hero {

  padding-top: calc(140px + var(--cpf-space-xl)) !important;

}



.tft-contact-hero__title {

  font-size: clamp(2.5rem, 6vw, 5rem) !important;

  line-height: 1.2 !important;

}



h3.tft-contact-v2__label {

  font-size: 0.8rem !important;

  line-height: 1.2 !important;

  margin-bottom: 1.5rem !important;

  font-family: var(--cpf-font-mono) !important;

  letter-spacing: 0.1em !important;

}



/* Restore Contact V2 budget cards after W3C removed .card-inner */

.tft-contact-v2__budget-card {

  padding: 1.5rem !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  background: rgba(255, 255, 255, 0.02) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 0.5rem !important;

  cursor: pointer !important;

  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease !important;

}



.tft-contact-v2__budget-card:has(input:checked) {

  border-color: var(--cpf-color-accent) !important;

  background: rgba(232, 201, 122, 0.05) !important;

  transform: translateY(-4px) !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;

}



.tft-contact-v2__budget-card input {

  display: none !important;

}



/* FIX: Constrain massively oversized contact hero avatar */

.tft-contact-hero__avatar {

  width: 48px !important;

  height: 48px !important;

  object-fit: cover !important;

}



/* FIX: Hide contact meta text totally per user request */

.tft-contact-v2__meta {

  display: none !important;

}



/* FIX: Compact Side Menu Layout */

.cpf-drawer__item.has-dropdown {

  margin-block-end: 1rem !important;

}



.cpf-drawer__item.has-dropdown .cpf-drawer__link {

  font-size: clamp(1.5rem, 3vw, 2rem) !important;

  margin-block-end: 1rem !important;

}



.cpf-drawer__sublist {

  gap: 0.75rem !important;

  padding-inline-start: 2rem !important;

}



.cpf-drawer__sublink {

  font-size: 0.85rem !important;

}



.cpf-drawer__mid {

  padding-block-start: 2rem !important;

}



/* FIX: Normalize Contact Page Logos and Inject Title to Match About Page */

.tft-contact-partners::before {

  content: "TRUSTED BY GLOBAL LEADERS";

  display: block;

  font-size: 0.7rem !important;

  letter-spacing: 0.3em !important;

  color: rgba(255, 255, 255, 0.4) !important;

  text-align: center !important;

  margin-bottom: 4rem !important;

  font-family: var(--cpf-font-mono, monospace) !important;

  text-transform: uppercase !important;

}



.tft-contact-partners__logo {

  max-height: 35px !important;

  width: auto !important;

  opacity: 0.6 !important;

  filter: grayscale(1) invert(1) brightness(1.5) !important;

  transition: opacity 0.4s ease, transform 0.4s ease !important;

}



.tft-contact-partners__logo:hover {

  opacity: 1 !important;

  transform: scale(1.05) !important;

}



/* ==========================================

   EXTRACTED INLINE STYLES 

   ========================================== */



/* Extracted from index-3.html */



/* ============================================================

       FLASH MODAL — CINEMATIC PAGE INTRO

       ============================================================ */

#d3-flash-modal {

  position: fixed;

  inset: 0;

  z-index: 9999999999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: #080808;

  pointer-events: all;

  overflow: hidden;

}



#d3-flash-modal.is-gone {

  pointer-events: none;

}



.d3-flash__bar {

  position: absolute;

  inset: 0;

  background: var(--cpf-color-accent);

  transform: scaleY(0);

  transform-origin: bottom;

  animation: flashBarIn 0.35s cubic-bezier(0.76, 0, 0.24, 1) 0.1s forwards,

    flashBarOut 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.55s forwards;

}



@keyframes flashBarIn {

  to {

    transform: scaleY(1);

  }

}



@keyframes flashBarOut {

  from {

    transform: scaleY(1);

    transform-origin: top;

  }



  to {

    transform: scaleY(0);

    transform-origin: top;

  }

}



.d3-flash__logo {

  position: relative;

  z-index: 2;

  font-family: 'Bebas Neue', sans-serif;

  font-size: clamp(48px, 8vw, 120px);

  color: #fff;

  letter-spacing: 0.05em;

  opacity: 0;

  animation: flashLogoIn 0.5s ease 0.6s forwards, flashLogoOut 0.4s ease 1.3s forwards;

}



.d3-flash__logo span {

  color: var(--cpf-color-accent);

}



@keyframes flashLogoIn {

  to {

    opacity: 1;

    transform: translateY(0);

  }



  from {

    opacity: 0;

    transform: translateY(20px);

  }

}



@keyframes flashLogoOut {

  to {

    opacity: 0;

    transform: translateY(-20px);

  }

}



.d3-flash__cover {

  position: absolute;

  inset: 0;

  background: #080808;

  transform: scaleY(0);

  transform-origin: top;

  animation: coverSlide 0.55s cubic-bezier(0.76, 0, 0.24, 1) 1.6s forwards;

}



@keyframes coverSlide {

  to {

    transform: scaleY(1);

  }

}





/* Extracted from index-3.html */



body.tft-aetheris-body {

  background: #080808;

  height: 100vh;

  overflow: hidden;

  cursor: default;

}



body.tft-aetheris-body .cpf-header {

  z-index: 1000000000 !important;

  position: fixed !important;

  width: 100%;

  top: 0;

  pointer-events: none;

}



body.tft-aetheris-body .cpf-header>* {

  pointer-events: auto;

}



/* HERO TEXT BLEND MODE — cuts through images */

.d3-title__main,

.d3-title__eyebrow {

  mix-blend-mode: difference;

}



body.tft-aetheris-body .cpf-drawer {

  z-index: 1000000010 !important;

  pointer-events: auto !important;

}



body.tft-aetheris-body .cpf-nav__overlay {

  z-index: 1000000005 !important;

  pointer-events: none !important;

  opacity: 0;

  visibility: hidden;

}



body.tft-aetheris-body .cpf-nav__overlay.is-active {

  pointer-events: auto !important;

  opacity: 1;

  visibility: visible;

}



/* BG ELEMENTS */

.d3-bg-layer {

  position: fixed;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: 0.08;

  background-image: linear-gradient(rgba(232, 185, 35, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 185, 35, 0.15) 1px, transparent 1px);

  background-size: 100px 100px;

}



.d3-bg-noise {

  position: fixed;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: 0.04;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}



.d3-bg-text-outline {

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-family: 'Bebas Neue', sans-serif;

  font-size: 30vw;

  color: transparent;

  -webkit-text-stroke: 1px rgba(232, 185, 35, 0.03);

  white-space: nowrap;

  pointer-events: none;

  z-index: 3;

  line-height: 1;

}



/* DECORATIVE PATTERN ENGINE */

.d3-pattern-canvas {

  position: fixed;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: 0.3;

}



.d3-scanner {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--gold), transparent);

  z-index: 10;

  opacity: 0.3;

  animation: scan 8s linear infinite;

  pointer-events: none;

}



@keyframes scan {

  0% {

    top: -10%;

  }



  100% {

    top: 110%;

  }

}



.d3-deco-line {

  position: fixed;

  top: 0;

  left: 40px;

  width: 1px;

  height: 100vh;

  background: linear-gradient(to bottom, var(--gold) 0%, rgba(255, 255, 255, 0.05) 50%, var(--gold) 100%);

  z-index: 2;

  pointer-events: none;

}



.d3-deco-coord {

  position: fixed;

  top: 120px;

  left: 55px;

  font-family: var(--mono);

  font-size: 8px;

  color: var(--gold);

  z-index: 10;

  transform: rotate(90deg);

  transform-origin: left top;

  opacity: 0.6;

  pointer-events: none;

}



.d3-live-indicator {

  position: fixed;

  bottom: 40px;

  right: 40px;

  display: flex;

  align-items: center;

  gap: 10px;

  z-index: 101;

  font-family: var(--mono);

  font-size: 9px;

  color: #fff;

  text-transform: uppercase;

  pointer-events: none;

}



.d3-live-dot {

  width: 6px;

  height: 6px;

  background: var(--gold);

  border-radius: 50%;

  box-shadow: 0 0 10px var(--gold);

  animation: pulse 2s infinite;

}



@keyframes pulse {



  0%,

  100% {

    opacity: 1;

  }



  50% {

    opacity: 0.3;

  }

}



.d3-progress-wrap {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: rgba(255, 255, 255, 0.05);

  z-index: 1000;

  pointer-events: none;

}



.d3-progress-bar {

  height: 100%;

  background: var(--gold);

  width: 0%;

  box-shadow: 0 0 15px var(--gold);

}



.d3-scroll-hint {

  position: fixed;

  bottom: 30px;

  left: 40px;

  font-family: var(--mono);

  font-size: 9px;

  color: rgba(255, 255, 255, 0.3);

  text-transform: uppercase;

  z-index: 101;

  pointer-events: none;

  opacity: 0;

  animation: fadeInDelay 0.6s ease 2.5s forwards;

}



@keyframes fadeInDelay {

  to {

    opacity: 1;

  }

}



/* CANVAS */

.d3-canvas {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  pointer-events: none;

  z-index: 5;

}



/* HERO TEXT — PREMIUM EDITION */

.d3-title {

  position: absolute;

  top: 200px;

  left: 40px;

  z-index: 100;

  pointer-events: none;

  padding-left: 30px;

  opacity: 0;

  animation: titleReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;

}



@keyframes titleReveal {

  from {

    opacity: 0;

    transform: translateY(30px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.d3-title::before {

  content: '';

  position: absolute;

  left: 0;

  top: 10px;

  bottom: 10px;

  width: 2px;

  background: var(--gold);

}



.d3-title__eyebrow {

  font-family: var(--mono);

  font-size: 9px;

  color: var(--gold);

  text-transform: uppercase;

  letter-spacing: 0.25em;

  margin-block-end: 12px;

  display: flex;

  align-items: center;

  gap: 10px;

}



.d3-title__eyebrow::before {

  content: '';

  width: 20px;

  height: 1px;

  background: var(--gold);

}



.d3-title__main {

  font-family: 'Bebas Neue', sans-serif;

  font-size: clamp(72px, 11vw, 190px);

  line-height: 0.85;

  color: #fff;

  text-transform: uppercase;

}



.d3-title__main em {

  font-style: normal;

  color: var(--gold);

}



.d3-title__sub {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-block-start: 22px;

  font-family: var(--mono);

  font-size: clamp(8px, 0.65vw, 10px);

  text-transform: uppercase;

  letter-spacing: 0.18em;

  /* Yellow pill — fully readable over any image */

  background: var(--gold, var(--cpf-color-accent));

  color: #000 !important;

  mix-blend-mode: normal;

  padding: 7px 14px 6px;

  font-weight: 700;

  line-height: 1;

  /* Leading dot accent */

  position: relative;

}



.d3-title__sub::before {

  content: 'â—†';

  font-size: 5px;

  opacity: 0.6;

  flex-shrink: 0;

}



/* PROJECT ITEMS — FALL FROM TOP */

.d3-img {

  position: absolute;

  bottom: 0;

  will-change: transform, opacity;

  cursor: pointer;

  background: #000;

  pointer-events: auto;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  transition: filter 0.4s ease;

  /* Start offscreen above */

  --drop-offset: -120vh;

  transform: translate3d(var(--tx, 0px), var(--drop-offset), 0);

  opacity: 0;

}



.d3-img.is-landed {

  transition: filter 0.4s ease;

  opacity: 1;

}



/* HOVER */

.d3-img:hover {

  filter: brightness(1.12) contrast(1.1);

  z-index: 200 !important;

}



.d3-img::after {

  content: '';

  position: absolute;

  inset: 0;

  border: 1px solid var(--cpf-color-accent);

  opacity: 0;

  transition: opacity 0.35s ease;

  pointer-events: none;

  z-index: 60;

}



.d3-img:hover::after {

  opacity: 1;

}



.d3-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);

}



.d3-img:hover img {

  transform: scale(1.08);

  mix-blend-mode: exclusion;

}



.d3-img__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 55%);

  opacity: 0.7;

  transition: opacity 0.35s ease;

}



.d3-img:hover .d3-img__overlay {

  opacity: 0.2;

}



.d3-img__label {

  display: none !important;

}



.d3-img__idx {

  position: absolute;

  top: 14px;

  right: 14px;

  font-family: var(--mono);

  font-size: 9px;

  color: rgba(255, 255, 255, 0.18);

  z-index: 50;

}



/* HOVER TAG — SPLIT DESIGN */

.d3-hover-tag {

  position: fixed;

  top: 0;

  left: 0;

  pointer-events: none;

  z-index: 1000000000;

  opacity: 0;

  transition: opacity 0.22s ease, transform 0.07s linear;

  display: flex;

  flex-direction: column;

}



.d3-hover-tag.is-active {

  opacity: 1;

}



.d3-hover-tag__name-block {

  background: var(--cpf-color-accent);

  padding: 12px 22px 10px;

}



.d3-hover-tag__name {

  font-family: 'Bebas Neue', sans-serif;

  font-size: 28px;

  line-height: 1;

  text-transform: uppercase;

  color: #000 !important;

}



.d3-hover-tag__cat-block {

  background: rgba(10, 10, 10, 0.95);

  border-left: 2px solid var(--cpf-color-accent);

  border-bottom: 1px solid rgba(232, 185, 35, 0.25);

  border-right: 1px solid rgba(232, 185, 35, 0.25);

  padding: 7px 22px;

}



.d3-hover-tag__cat {

  font-family: var(--mono);

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.65) !important;

  letter-spacing: 0.15em;

}





/* Extracted from index-6.html */



body.tft-webgl-disp-body {

  margin: 0;

  padding: 0;

  overflow: hidden;

  background-color: #050505;

}



body.tft-webgl-disp-body .tft-particle-hero {

  cursor: grab;

}



body.tft-webgl-disp-body .tft-particle-hero:active {

  cursor: grabbing;

}



.tft-slider-instruction {

  position: absolute;

  bottom: 5vh;

  left: 50%;

  transform: translateX(-50%);

  color: rgba(255, 255, 255, 0.5);

  font-family: var(--cpf-font-mono, monospace);

  font-size: 0.8rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  pointer-events: none;

  z-index: 20;

  animation: pulse 2s infinite;

}



@keyframes pulse {



  0%,

  100% {

    opacity: 0.5;

  }



  50% {

    opacity: 1;

  }

}



/* UI/UX Readability Enhancements */

.tft-particle-overlay {

  position: absolute;

  inset: 0;

  /* Left gradient for the main Title and Meta text */

  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 70%);

  z-index: 5;

  pointer-events: none;

}



.tft-particle-overlay::after {

  content: '';

  position: absolute;

  inset: auto 0 0 0;

  height: 25vh;

  /* Bottom gradient for the Prev/Next controls */

  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);

}



.tft-particle-ui__title {

  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);

}





/* Extracted from tft-webgl-metaballs.css */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {

  -webkit-text-size-adjust: 100%;

  line-height: 1.15

}



body {

  margin: 0

}



main {

  display: block

}



h1 {

  font-size: 2em;

  margin: .67em 0

}



hr {

  box-sizing: content-box;

  height: 0;

  overflow: visible

}



pre {

  font-family: monospace, monospace;

  font-size: 1em

}



a {

  background-color: transparent

}



abbr[title] {

  border-bottom: none;

  text-decoration: underline;

  text-decoration: underline dotted

}



b,

strong {

  font-weight: bolder

}



code,

kbd,

samp {

  font-family: monospace, monospace;

  font-size: 1em

}



small {

  font-size: 80%

}



sub,

sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline

}



sub {

  bottom: -.25em

}



sup {

  top: -.5em

}



img {

  border-style: none

}



button,

input,

optgroup,

select,

textarea {

  font-family: inherit;

  font-size: 100%;

  line-height: 1.15;

  margin: 0

}



button,

input {

  overflow: visible

}



button,

select {

  text-transform: none

}



[type=button],

[type=reset],

[type=submit],

button {

  -webkit-appearance: button

}



[type=button]::-moz-focus-inner,

[type=reset]::-moz-focus-inner,

[type=submit]::-moz-focus-inner,

button::-moz-focus-inner {

  border-style: none;

  padding: 0

}



[type=button]:-moz-focusring,

[type=reset]:-moz-focusring,

[type=submit]:-moz-focusring,

button:-moz-focusring {

  outline: 1px dotted ButtonText

}



fieldset {

  padding: .35em .75em .625em

}



legend {

  box-sizing: border-box;

  color: inherit;

  display: table;

  max-width: 100%;

  padding: 0;

  white-space: normal

}



progress {

  vertical-align: baseline

}



textarea {

  overflow: auto

}



[type=checkbox],

[type=radio] {

  box-sizing: border-box;

  padding: 0

}



[type=number]::-webkit-inner-spin-button,

[type=number]::-webkit-outer-spin-button {

  height: auto

}



[type=search] {

  -webkit-appearance: textfield;

  outline-offset: -2px

}



[type=search]::-webkit-search-decoration {

  -webkit-appearance: none

}



::-webkit-file-upload-button {

  -webkit-appearance: button;

  font: inherit

}



details {

  display: block

}



summary {

  display: list-item

}



[hidden],

template {

  display: none

}



:root {

  --color-black: #000;

  --color-black--rgb: 0, 0, 0;

  --color-white: #fff;

  --color-white--rgb: 255, 255, 255

}



html {

  background-color: var(--color-black);

  color: var(--color-white)

}



*,

:after,

:before {

  box-sizing: border-box

}



button,

html,

input,

select,

textarea {

  font-family: Arial

}



.scene {

  overflow: hidden;

  position: fixed;

  z-index: -1

}



.scene,

.scene canvas {

  height: 100%;

  left: 0;

  top: 0;

  width: 100%

}



.scene canvas {

  position: absolute

}



.nav {

  font-size: 20px;

  left: 20px;

  text-transform: uppercase

}



.nav,

.nav-buttons {

  bottom: 20px;

  position: absolute

}



.nav-buttons {

  align-items: center;

  display: flex;

  flex-direction: row;

  gap: 10px;

  justify-content: center;

  right: 20px

}





/* --- AETHERIS SLIDER REFACTOR --- */

/* ============================================================

       FLASH MODAL — CINEMATIC PAGE INTRO

       ============================================================ */

#d3-flash-modal {

  position: fixed;

  inset: 0;

  z-index: 9999999999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: #080808;

  pointer-events: all;

  overflow: hidden;

}



#d3-flash-modal.is-gone {

  pointer-events: none;

}



.d3-flash__bar {

  position: absolute;

  inset: 0;

  background: var(--cpf-color-accent);

  transform: scaleY(0);

  transform-origin: bottom;

  animation: flashBarIn 0.35s cubic-bezier(0.76, 0, 0.24, 1) 0.1s forwards,

    flashBarOut 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.55s forwards;

}



@keyframes flashBarIn {

  to {

    transform: scaleY(1);

  }

}



@keyframes flashBarOut {

  from {

    transform: scaleY(1);

    transform-origin: top;

  }



  to {

    transform: scaleY(0);

    transform-origin: top;

  }

}



.d3-flash__logo {

  position: relative;

  z-index: 2;

  font-family: 'Bebas Neue', sans-serif;

  font-size: clamp(48px, 8vw, 120px);

  color: #fff;

  letter-spacing: 0.05em;

  opacity: 0;

  animation: flashLogoIn 0.5s ease 0.6s forwards, flashLogoOut 0.4s ease 1.3s forwards;

}



.d3-flash__logo span {

  color: var(--cpf-color-accent);

}



@keyframes flashLogoIn {

  to {

    opacity: 1;

    transform: translateY(0);

  }



  from {

    opacity: 0;

    transform: translateY(20px);

  }

}



@keyframes flashLogoOut {

  to {

    opacity: 0;

    transform: translateY(-20px);

  }

}



.d3-flash__cover {

  position: absolute;

  inset: 0;

  background: #080808;

  transform: scaleY(0);

  transform-origin: top;

  animation: coverSlide 0.55s cubic-bezier(0.76, 0, 0.24, 1) 1.6s forwards;

}



@keyframes coverSlide {

  to {

    transform: scaleY(1);

  }

}



body.tft-aetheris-body {

  background: #080808;

  height: 100vh;

  overflow: hidden;

  cursor: default;

}



.cpf-header {

  z-index: 1000000000 !important;

  position: fixed !important;

  width: 100%;

  top: 0;

  pointer-events: none;

}



.cpf-header>* {

  pointer-events: auto;

}



/* HERO TEXT BLEND MODE — cuts through images */

.d3-title__main,

.d3-title__eyebrow {

  mix-blend-mode: difference;

}



.cpf-drawer {

  z-index: 1000000010 !important;

  pointer-events: auto !important;

}



.cpf-nav__overlay {

  z-index: 1000000005 !important;

  pointer-events: none !important;

  opacity: 0;

  visibility: hidden;

}



.cpf-nav__overlay.is-active {

  pointer-events: auto !important;

  opacity: 1;

  visibility: visible;

}



/* BG ELEMENTS */

.d3-bg-layer {

  position: fixed;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: 0.08;

  background-image: linear-gradient(rgba(232, 185, 35, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 185, 35, 0.15) 1px, transparent 1px);

  background-size: 100px 100px;

}



.d3-bg-noise {

  position: fixed;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: 0.04;

  background: url('https://grainy-gradients.vercel.app/noise.svg');

}



.d3-bg-text-outline {

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-family: 'Bebas Neue', sans-serif;

  font-size: 30vw;

  color: transparent;

  -webkit-text-stroke: 1px rgba(232, 185, 35, 0.03);

  white-space: nowrap;

  pointer-events: none;

  z-index: 3;

  line-height: 1;

}



/* DECORATIVE PATTERN ENGINE */

.d3-pattern-canvas {

  position: fixed;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: 0.3;

}



.d3-scanner {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--gold), transparent);

  z-index: 10;

  opacity: 0.3;

  animation: scan 8s linear infinite;

  pointer-events: none;

}



@keyframes scan {

  0% {

    top: -10%;

  }



  100% {

    top: 110%;

  }

}



.d3-deco-line {

  position: fixed;

  top: 0;

  left: 40px;

  width: 1px;

  height: 100vh;

  background: linear-gradient(to bottom, var(--gold) 0%, rgba(255, 255, 255, 0.05) 50%, var(--gold) 100%);

  z-index: 2;

  pointer-events: none;

}



.d3-deco-coord {

  position: fixed;

  top: 120px;

  left: 55px;

  font-family: var(--mono);

  font-size: 8px;

  color: var(--gold);

  z-index: 10;

  transform: rotate(90deg);

  transform-origin: left top;

  opacity: 0.6;

  pointer-events: none;

}



.d3-live-indicator {

  position: fixed;

  bottom: 40px;

  right: 40px;

  display: flex;

  align-items: center;

  gap: 10px;

  z-index: 101;

  font-family: var(--mono);

  font-size: 9px;

  color: #fff;

  text-transform: uppercase;

  pointer-events: none;

}



.d3-live-dot {

  width: 6px;

  height: 6px;

  background: var(--gold);

  border-radius: 50%;

  box-shadow: 0 0 10px var(--gold);

  animation: pulse 2s infinite;

}



@keyframes pulse {



  0%,

  100% {

    opacity: 1;

  }



  50% {

    opacity: 0.3;

  }

}



.d3-progress-wrap {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: rgba(255, 255, 255, 0.05);

  z-index: 1000;

  pointer-events: none;

}



.d3-progress-bar {

  height: 100%;

  background: var(--gold);

  width: 0%;

  box-shadow: 0 0 15px var(--gold);

}



.d3-scroll-hint {

  position: fixed;

  bottom: 30px;

  left: 40px;

  font-family: var(--mono);

  font-size: 9px;

  color: rgba(255, 255, 255, 0.3);

  text-transform: uppercase;

  z-index: 101;

  pointer-events: none;

  opacity: 0;

  animation: fadeInDelay 0.6s ease 2.5s forwards;

}



@keyframes fadeInDelay {

  to {

    opacity: 1;

  }

}



/* CANVAS */

.d3-canvas {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  pointer-events: none;

  z-index: 5;

}



/* HERO TEXT — PREMIUM EDITION */

.d3-title {

  position: absolute;

  top: 200px;

  left: 40px;

  z-index: 100;

  pointer-events: none;

  padding-left: 30px;

  opacity: 0;

  animation: titleReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;

}



@keyframes titleReveal {

  from {

    opacity: 0;

    transform: translateY(30px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.d3-title::before {

  content: '';

  position: absolute;

  left: 0;

  top: 10px;

  bottom: 10px;

  width: 2px;

  background: var(--gold);

}



.d3-title__eyebrow {

  font-family: var(--mono);

  font-size: 9px;

  color: var(--gold);

  text-transform: uppercase;

  letter-spacing: 0.25em;

  margin-block-end: 12px;

  display: flex;

  align-items: center;

  gap: 10px;

}



.d3-title__eyebrow::before {

  content: '';

  width: 20px;

  height: 1px;

  background: var(--gold);

}



.d3-title__main {

  font-family: 'Bebas Neue', sans-serif;

  font-size: clamp(72px, 11vw, 190px);

  line-height: 0.85;

  color: #fff;

  text-transform: uppercase;

}



.d3-title__main em {

  font-style: normal;

  color: var(--gold);

}



.d3-title__sub {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-block-start: 22px;

  font-family: var(--mono);

  font-size: clamp(8px, 0.65vw, 10px);

  text-transform: uppercase;

  letter-spacing: 0.18em;

  /* Yellow pill — fully readable over any image */

  background: var(--gold, var(--cpf-color-accent));

  color: #000 !important;

  mix-blend-mode: normal;

  padding: 7px 14px 6px;

  font-weight: 700;

  line-height: 1;

  /* Leading dot accent */

  position: relative;

}



.d3-title__sub::before {

  content: 'â—†';

  font-size: 5px;

  opacity: 0.6;

  flex-shrink: 0;

}



/* PROJECT ITEMS — FALL FROM TOP */

.d3-card {

  position: absolute;

  bottom: 0;

  will-change: transform, opacity;

  cursor: pointer;

  background: #000;

  pointer-events: auto;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  transition: filter 0.4s ease;

  /* Start offscreen above */

  --drop-offset: -120vh;

  transform: translate3d(var(--tx, 0px), var(--drop-offset), 0);

  opacity: 0;

}



.d3-card.is-landed {

  transition: filter 0.4s ease;

  opacity: 1;

}



/* HOVER */

.d3-card:hover {

  filter: brightness(1.12) contrast(1.1);

  z-index: 200 !important;

}



.d3-card::after {

  content: '';

  position: absolute;

  inset: 0;

  border: 1px solid var(--cpf-color-accent);

  opacity: 0;

  transition: opacity 0.35s ease;

  pointer-events: none;

  z-index: 60;

}



.d3-card:hover::after {

  opacity: 1;

}



.d3-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);

}



.d3-card:hover img {

  transform: scale(1.08);

  mix-blend-mode: exclusion;

}



.d3-card__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 55%);

  opacity: 0.7;

  transition: opacity 0.35s ease;

}



.d3-card:hover .d3-card__overlay {

  opacity: 0.2;

}



.d3-card__label {

  display: none !important;

}



.d3-card__idx {

  position: absolute;

  top: 14px;

  right: 14px;

  font-family: var(--mono);

  font-size: 9px;

  color: rgba(255, 255, 255, 0.18);

  z-index: 50;

}



/* HOVER TAG — SPLIT DESIGN */

.d3-hover-tag {

  position: fixed;

  top: 0;

  left: 0;

  pointer-events: none;

  z-index: 1000000000;

  opacity: 0;

  transition: opacity 0.22s ease, transform 0.07s linear;

  display: flex;

  flex-direction: column;

}



.d3-hover-tag.is-active {

  opacity: 1;

}



.d3-hover-tag__name-block {

  background: var(--cpf-color-accent);

  padding: 12px 22px 10px;

}



.d3-hover-tag__name {

  font-family: 'Bebas Neue', sans-serif;

  font-size: 28px;

  line-height: 1;

  text-transform: uppercase;

  color: #000 !important;

}



.d3-hover-tag__cat-block {

  background: rgba(10, 10, 10, 0.95);

  border-left: 2px solid var(--cpf-color-accent);

  border-bottom: 1px solid rgba(232, 185, 35, 0.25);

  border-right: 1px solid rgba(232, 185, 35, 0.25);

  padding: 7px 22px;

}



.d3-hover-tag__cat {

  font-family: var(--mono);

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.65) !important;

  letter-spacing: 0.15em;

}



/* ==============================================

   INDEX-2 :: INTERACTIVE ARCHIVE — Canvas & UI

   Migrated from inline <style> block

   ============================================== */



/* Canvas backgrounds */

#d2-bg-canvas,

#d2-pattern-canvas {

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

}



#d2-bg-canvas {

  opacity: 0.95;

  background: var(--cpf-color-dark);

}



#d2-pattern-canvas {

  opacity: 0.4;

  z-index: 0;

}



/* Noise overlay */

.d2-noise {

  position: fixed;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: 0.04;

  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

}



/* Subtle gold-tinted grid overlay */

.d2-grid-overlay {

  position: fixed;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: 0.1;

  background-image:

    linear-gradient(rgba(235, 203, 52, 0.05) 1px, transparent 1px),

    linear-gradient(90deg, rgba(235, 203, 52, 0.05) 1px, transparent 1px);

  background-size: 60px 60px;

}



/* Floating corner decorations */

.d2-corner {

  position: fixed;

  font-family: var(--cpf-font-mono);

  font-size: 8px;

  color: rgba(235, 203, 52, 0.35);

  text-transform: uppercase;

  letter-spacing: 0.15em;

  pointer-events: none;

  z-index: 2;

}



.d2-corner--tl {

  inset-block-start: 120px;

  inset-inline-start: 20px;

}



.d2-corner--tr {

  inset-block-start: 120px;

  inset-inline-end: 20px;

  text-align: end;

}



.d2-corner--bl {

  inset-block-end: 20px;

  inset-inline-start: 20px;

}



.d2-corner--br {

  inset-block-end: 20px;

  inset-inline-end: 20px;

  text-align: end;

}



/* Scanner line */

.d2-scan {

  position: fixed;

  inset-inline: 0;

  block-size: 1px;

  background: linear-gradient(90deg, transparent, rgba(235, 203, 52, 0.4), transparent);

  z-index: 1;

  pointer-events: none;

  animation: d2-scan-move 10s linear infinite;

}



@keyframes d2-scan-move {

  0% {

    inset-block-start: -2%;

  }



  100% {

    inset-block-start: 102%;

  }

}



/* Ensure orbit content sits above canvas */

.tft-alt-hero {

  position: relative;

  z-index: 3;

}



/* Fix background — allow canvas to show through */

html.tft-body-alt,

body.tft-body-alt,

main#main-content,

.tft-alt-hero {

  background-color: transparent !important;

  background: transparent !important;

}



html {

  background-color: var(--cpf-color-dark) !important;

}



/* ---- Interactive Bottom Buttons ---- */

.d2-bottom-action {

  border: 1px solid rgba(235, 203, 52, 0.3);

  padding-block: 12px;

  padding-inline: 24px;

  border-radius: 100px;

  color: var(--cpf-color-white);

  text-decoration: none;

  font-family: var(--cpf-font-mono);

  font-size: 10px;

  letter-spacing: 0.2em;

  display: flex;

  align-items: center;

  gap: 12px;

  background: rgba(235, 203, 52, 0.05);

  transition: all 0.4s ease;

  cursor: pointer;

}



.d2-bottom-action:hover {

  background: rgba(235, 203, 52, 0.2);

  border-color: rgba(235, 203, 52, 0.8);

  transform: translateY(-3px);

}



.d2-bottom-action .dot {

  display: block;

  inline-size: 6px;

  block-size: 6px;

  background: var(--cpf-color-accent);

  border-radius: 50%;

  box-shadow: 0 0 10px var(--cpf-color-accent);

}



.d2-bottom-action--secondary {

  border-color: rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.02);

  color: rgba(255, 255, 255, 0.6);

}



.d2-bottom-action--secondary .dot {

  background: rgba(255, 255, 255, 0.3);

  box-shadow: none;

}



.d2-bottom-action--secondary:hover {

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.3);

  color: var(--cpf-color-white);

  transform: translateY(-3px);

}



/* ==============================================

   INDEX-7 :: METABALLS SHOWCASE — Nav & Arrow UI

   Aliases for HTML class names in index-7.html

   ============================================== */



.tft-mb-nav-container {

  position: absolute;

  inset-block-end: clamp(2rem, 5vh, 4rem);

  inset-inline: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  pointer-events: auto;

  z-index: 20;

}



.tft-mb-arrow-btn {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 50%;

  inline-size: 56px;

  block-size: 56px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  color: var(--cpf-color-light);

  font-family: var(--cpf-font-mono);

  font-size: clamp(0.6rem, 0.8vw, 0.75rem);

  letter-spacing: 0.15em;

  text-transform: uppercase;

  cursor: pointer;

  transition: all 0.3s ease;

  backdrop-filter: blur(10px);

  margin-inline: 0.5rem;

}



.tft-mb-arrow-btn svg {

  inline-size: 16px;

  block-size: 16px;

  flex-shrink: 0;

}



.tft-mb-arrow-btn:hover {

  background: var(--cpf-color-light);

  color: var(--cpf-color-dark);

  border-color: var(--cpf-color-light);

  transform: scale(1.1);

}



.tft-mb-tag {

  font-family: var(--cpf-font-mono);

  font-size: clamp(0.65rem, 1vw, 0.8rem);

  letter-spacing: 0.25em;

  color: var(--cpf-color-accent);

  text-transform: uppercase;

  margin-block-end: 1rem;

  opacity: 0.85;

}



.tft-mb-link {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  padding-block: 0.9rem;

  padding-inline: 2rem;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 100px;

  color: var(--cpf-color-light);

  font-family: var(--cpf-font-mono);

  font-size: clamp(0.65rem, 0.9vw, 0.78rem);

  letter-spacing: 0.2em;

  text-transform: uppercase;

  text-decoration: none;

  pointer-events: auto;

  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;

  backdrop-filter: blur(8px);

}



.tft-mb-link:hover {

  background: var(--cpf-color-accent);

  border-color: var(--cpf-color-accent);

  color: var(--cpf-color-dark);

}



/* ==========================================================================

   METABALLS SHOWCASE Z-INDEX OVERRIDE (Fixing CSS conflict from extraction)

   ========================================================================== */

.tft-metaballs-scene.scene {

  position: absolute !important;

  z-index: 1 !important;

}



.tft-metaballs-scene.scene canvas {

  position: absolute !important;

  z-index: 1 !important;

}



/* ==========================================================================

   METABALLS SHOWCASE NAVIGATION OVERRIDE (Restoring Backup Pill Shape)

   ========================================================================== */

.tft-mb-arrow-btn {

  border-radius: 100px !important;

  padding: 1rem 2rem !important;

  inline-size: auto !important;

  block-size: auto !important;

  background: rgba(0, 0, 0, 0.3) !important;

  font-size: 0.8rem !important;

  font-family: var(--cpf-font-body) !important;

  margin-inline: 0 !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  color: var(--cpf-color-light) !important;

  letter-spacing: 0.15em !important;

  font-weight: 600 !important;

  gap: 0.75rem !important;

}



.tft-mb-arrow-btn svg {

  inline-size: 24px !important;

  block-size: 24px !important;

  width: 24px !important;

  height: 24px !important;

}



.tft-mb-arrow-btn:hover {

  background: var(--cpf-color-accent) !important;

  color: var(--cpf-color-dark) !important;

  border-color: var(--cpf-color-accent) !important;

  transform: none !important;

}



.tft-mb-arrow-btn#prev:hover svg {

  transform: translateX(-4px) !important;

}



.tft-mb-arrow-btn#next:hover svg {

  transform: translateX(4px) !important;

}



/* ==========================================================================

   METABALLS SHOWCASE NAVIGATION CONTAINER OVERRIDE (Fixing off-screen shift)

   ========================================================================== */

.tft-mb-nav-container {

  left: 50% !important;

  right: auto !important;

  inset-inline: auto !important;

  transform: translateX(-50%) !important;

  width: auto !important;

}



/* ==========================================================================

   METABALLS SHOWCASE: LINK & NAV CENTERING FIXES

   ========================================================================== */

.tft-mb-nav-container {

  left: 0 !important;

  right: 0 !important;

  inset-inline: 0 !important;

  transform: none !important;

  width: 100% !important;

  display: flex !important;

  justify-content: center !important;

}



/* Remove glitchy underline from pill button */

.tft-mb-link::after {

  display: none !important;

  opacity: 0 !important;

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 14: STUDIO HUB (SIDE MENU REDESIGN)

   ========================================================================== */



.cpf-drawer__hub {

  display: flex !important;

  flex-direction: column !important;

  gap: 2.5rem !important;

  padding-block-end: 2rem !important;

  border-block-end: 1px solid rgba(255, 255, 255, 0.05) !important;

  margin-block-end: 2rem !important;

}



.cpf-drawer__hub .cpf-drawer__label {

  margin-block-end: 0 !important;

}



/* AVAILABILITY STATUS */

.tft-hub-status {

  display: flex !important;

  align-items: center !important;

  gap: 0.75rem !important;

  padding: 0.8rem 1.2rem !important;

  background: rgba(255, 255, 255, 0.03) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-radius: 4px !important;

  width: fit-content !important;

}



.tft-hub-status__dot {

  width: 6px !important;

  height: 6px !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-radius: 50% !important;

  box-shadow: 0 0 10px var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  animation: tftHubPulse 2s infinite !important;

}



@keyframes tftHubPulse {

  0% {

    opacity: 1;

    transform: scale(1);

  }



  50% {

    opacity: 0.4;

    transform: scale(0.8);

  }



  100% {

    opacity: 1;

    transform: scale(1);

  }

}



.tft-hub-status__text {

  font-family: var(--cpf-font-mono, monospace) !important;

  font-size: 0.65rem !important;

  color: #ffffff !important;

  text-transform: uppercase !important;

  letter-spacing: 0.15em !important;

}



/* STUDIO MANIFESTO */

.tft-hub-manifesto p {

  font-family: var(--cpf-font-body, sans-serif) !important;

  font-size: 1rem !important;

  line-height: 1.6 !important;

  color: rgba(255, 255, 255, 0.6) !important;

  margin: 0 !important;

}



/* NEWSLETTER */

.tft-hub-newsletter .cpf-drawer__tiny-label {

  margin-block-end: 1rem !important;

}



.tft-hub-form {

  display: flex !important;

  align-items: stretch !important;

  border-block-end: 1px solid rgba(255, 255, 255, 0.2) !important;

  transition: border-color 0.4s ease !important;

}



.tft-hub-form:focus-within {

  border-color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.tft-hub-form input {

  background: transparent !important;

  border: none !important;

  padding: 0.8rem 0 !important;

  font-family: var(--cpf-font-mono, monospace) !important;

  font-size: 0.85rem !important;

  color: #ffffff !important;

  width: 100% !important;

  outline: none !important;

  letter-spacing: 0.05em !important;

}



.tft-hub-form input::placeholder {

  color: rgba(255, 255, 255, 0.2) !important;

}



.tft-hub-form button {

  background: transparent !important;

  border: none !important;

  color: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  font-size: 1.2rem !important;

  cursor: pointer !important;

  padding: 0 0.5rem !important;

  transition: transform 0.4s ease !important;

}



.tft-hub-form button:hover {

  transform: translateX(5px) !important;

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 15: HEADER CONSOLE REDESIGN (MINIMALIST PILLS)

   ========================================================================== */



/* Remove slant and create pill shapes */

.cpf-header__status,

.cpf-header__meta {

  transform: none !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;

  /* Override yellow border */

  border-radius: 20px !important;

  /* Pill shape */

  background: rgba(255, 255, 255, 0.02) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

  padding: 6px 16px !important;

  margin-inline: 0 !important;

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

}



/* Remove internal slants */

.cpf-header__status>*,

.cpf-header__meta>* {

  transform: none !important;

  display: inline-flex !important;

  align-items: center !important;

}



/* Base Topbar */

.cpf-header__console {

  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

  /* Unified ultra-thin line */

  background: rgba(0, 0, 0, 0.8) !important;

}



/* Add glowing dot separators using pseudo-elements on all but the last item */

.cpf-header__status>*:not(:last-child)::after,

.cpf-header__meta>*:not(:last-child)::after {

  content: "" !important;

  display: inline-block !important;

  width: 3px !important;

  height: 3px !important;

  background: rgba(255, 255, 255, 0.3) !important;

  border-radius: 50% !important;

  margin-left: 12px !important;

}



/* The actual yellow dot remains */

.cpf-header__dot {

  width: 6px !important;

  height: 6px !important;

  background: var(--cpf-color-accent, var(--cpf-color-accent)) !important;

  border-radius: 50% !important;

  box-shadow: 0 0 10px var(--cpf-color-accent, var(--cpf-color-accent)) !important;

}



.cpf-header__dot::after {

  display: none !important;

  /* Do not add a separator dot after the yellow dot */

}



/* Refined Typography */

.cpf-header__label,

.cpf-header__clock {

  font-family: var(--cpf-font-mono, monospace) !important;

  font-size: 0.65rem !important;

  letter-spacing: 0.2em !important;

  color: rgba(255, 255, 255, 0.5) !important;

  text-transform: uppercase !important;

}



.cpf-header__label .val {

  color: #ffffff !important;

  font-weight: 500 !important;

  margin-left: 6px !important;

}



/* Hide leftover sep classes completely just in case */

.cpf-header__sep {

  display: none !important;

}



/* ==========================================================================

   SOVEREIGN ELITE PHASE 16: SERVICES HERO BACKGROUND IMAGE UPGRADE

   ========================================================================== */



.tft-srv__hero {

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)),

    url("../img/tft-proj-21.jpg") center/cover no-repeat !important;

}



/* Ensure the HUD and text pop against the background */

.tft-srv__hero-hud {

  border-block-end: 1px solid rgba(255, 255, 255, 0.2) !important;

}



.tft-srv__hero-title {

  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;

}



/* PHASE 17: Header Consolidation & Simplification */

/* Completely removing the top console bar to achieve a pure, minimal high-end aesthetic. */

.cpf-header__console {

  display: none !important;

}



/* PHASE 18: Responsive Swipeable Main Menu */

@media (max-width: 1024px) {



  /* 1. Show the main menu and make it swipeable */

  .cpf-header__menu {

    display: flex !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;

    flex-wrap: nowrap !important;

    gap: 30px !important;

    padding-inline: 20px !important;

    padding-bottom: 10px !important;

    width: 100%;

    scrollbar-width: none;

    justify-content: flex-start !important;

  }



  .cpf-header__menu::-webkit-scrollbar {

    display: none !important;

  }



  /* 2. Hide the side drawer hamburger and overlay completely */

  .cpf-header__burger,

  .cpf-drawer,

  .cpf-nav__overlay {

    display: none !important;

  }



  /* 3. Adjust link sizing for touch */

  .cpf-header__link {

    font-size: 13px !important;

    padding-inline: 0 !important;

    white-space: nowrap !important;

  }



  /* 4. Disable dropdowns on mobile to prevent clipping/hover issues */

  .cpf-header__dropdown {

    display: none !important;

  }



  /* 5. Adjust header container padding for the swipeable row */

  .cpf-header__nav-inner {

    flex-wrap: wrap !important;

    padding-inline: 0 !important;

    padding-top: 15px !important;

  }



  .cpf-header__logo {

    margin-inline: 20px !important;

    margin-bottom: 15px !important;

    width: 100% !important;

    /* Force logo to top row */

  }

}



/* PHASE 19: Full-Screen Custom Mobile Navigation Overlay */

@media (max-width: 1024px) {



  /* 1. Reactivate the Hamburger Burger (Override Phase 18) */

  .cpf-header__burger {

    display: flex !important;

    position: relative;

    z-index: 1000001 !important;

    /* Above the overlay */

  }



  /* 2. Burger Animation to X */

  .cpf-header__burger.is-active .line:nth-child(1) {

    transform: translateY(8px) rotate(45deg);

  }



  .cpf-header__burger.is-active .line:nth-child(2) {

    transform: translateY(-8px) rotate(-45deg);

    width: 32px !important;

  }



  /* 3. Transform main menu into full-screen overlay */

  .cpf-header__menu {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    background: rgba(0, 0, 0, 0.98) !important;

    backdrop-filter: blur(15px);

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

    flex-direction: column !important;

    flex-wrap: nowrap !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 20px !important;

    padding: 100px 20px !important;



    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition: opacity 0.5s ease, visibility 0.5s ease !important;

    z-index: 1000000 !important;

  }



  /* Show when active */

  .cpf-header__menu.is-active {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

  }



  /* 4. Style the parent links */

  .cpf-header__link {

    font-size: 32px !important;

    font-weight: 800 !important;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    padding: 10px !important;

    display: inline-block;

    white-space: normal !important;

  }



  /* 5. Mobile Accordion Dropdowns */

  .cpf-header__dropdown {

    display: none !important;

    position: static !important;

    background: transparent !important;

    border: none !important;

    padding: 15px 0 0 0 !important;

    margin: 0 !important;

    text-align: center;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    min-width: auto !important;

  }



  /* Expand when parent li gets .is-expanded */

  .has-dropdown.is-expanded .cpf-header__dropdown {

    display: block !important;

    animation: mobileDropdownFade 0.4s ease forwards;

  }



  /* 6. Style dropdown links */

  .cpf-header__dropdown a {

    font-size: 16px !important;

    color: rgba(255, 255, 255, 0.6) !important;

    padding: 8px !important;

    display: block;

    letter-spacing: 0.1em;

    text-transform: uppercase;

  }



  .cpf-header__dropdown a:hover {

    color: #fff !important;

  }



  /* 7. Dropdown arrow animation */

  .has-dropdown .arrow {

    display: inline-block;

    transition: transform 0.3s ease;

  }



  .has-dropdown.is-expanded .arrow {

    transform: rotate(90deg);

  }

}



@keyframes mobileDropdownFade {

  from {

    opacity: 0;

    transform: translateY(-10px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* PHASE 20: Restore Original Side Drawer Navigation */

@media (max-width: 1024px) {



  /* Hide the main menu on mobile, reverting Phase 18 and 19 */

  .cpf-header__menu {

    display: none !important;

    position: static !important;

    opacity: 1 !important;

    visibility: visible !important;

    height: auto !important;

    width: auto !important;

    background: transparent !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

  }



  /* Restore burger toggle to normal state */

  .cpf-header__burger {

    display: flex !important;

  }



  /* Reset burger animation state */

  .cpf-header__burger.is-active .line:nth-child(1) {

    transform: none !important;

  }



  .cpf-header__burger.is-active .line:nth-child(2) {

    transform: none !important;

    width: 20px !important;

  }



  /* Restore the drawer functionality */

  .cpf-drawer,

  .cpf-nav__overlay {

    display: block !important;

  }

}



/* PHASE 21: Mobile Layout Fixes (Header & Grids) */

@media (max-width: 1024px) {



  /* 1. Revert header layout so logo and burger sit inline */

  .cpf-header__nav-inner {

    flex-wrap: nowrap !important;

    padding-inline: 20px !important;

    padding-top: 0 !important;

    padding-block: 15px !important;

    align-items: center !important;

    justify-content: space-between !important;

  }



  .cpf-header__logo {

    margin: 0 !important;

    width: auto !important;

  }



  /* 2. Fix pricing grid overflow (Force 1 Column) */

  .cpf-investment__grid {

    grid-template-columns: 1fr !important;

    gap: 30px !important;

  }



  /* 3. Fix analytics bento grid overflow (Force 1 Column) */

  .cpf-analytics__bento {

    grid-template-columns: 1fr !important;

    gap: 20px !important;

  }



  /* Ensure the main analytics grid stacks vertically */

  .cpf-analytics__grid {

    grid-template-columns: 1fr !important;

  }

}



/* PHASE 22: Fix Drawer Slide-Out Animation */

.cpf-drawer {

  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),

    opacity 0.4s ease,

    visibility 0s linear 0.8s !important;

  opacity: 0;

  visibility: hidden;

}



.cpf-drawer.is-open {

  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),

    opacity 0.4s ease,

    visibility 0s linear 0s !important;

  opacity: 1 !important;

  visibility: visible !important;

  transform: translateX(0) !important;

}



.cpf-nav__overlay {

  transition: opacity 0.5s ease, visibility 0s linear 0.5s !important;

}



.cpf-nav__overlay.is-active,

.cpf-nav__overlay.is-open {

  transition: opacity 0.5s ease, visibility 0s linear 0s !important;

  opacity: 1 !important;

  visibility: visible !important;

}



/* Append-Only Rule: Ensure header links have cursor pointer */

.cpf-header__link {

  cursor: pointer;

}



.tft-sp__toc-link:hover,

.tft-sp__toc-link.is-active {

  border-color: transparent !important;

}



/* --- CSS extracted from enqueue.php (preloader) --- */

#d3-flash-modal {

  position: fixed;

  inset: 0;

  z-index: 99999;

  background: #000;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  transition: opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1),

    visibility 0.7s cubic-bezier(0.77, 0, 0.175, 1);

}



#d3-flash-modal.is-gone {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.d3-flash__bar {

  position: absolute;

  bottom: 0;

  left: 0;

  height: 2px;

  width: 0;

  background: #fff;

  animation: zylyf-preloader-bar 2s cubic-bezier(0.77, 0, 0.175, 1) forwards;

}



@keyframes zylyf-preloader-bar {

  to {

    width: 100%;

  }

}



.d3-flash__logo {

  position: relative;

  z-index: 2;

  color: #fff;

  font-size: clamp(2rem, 6vw, 5rem);

  font-weight: 700;

  letter-spacing: -0.02em;

  text-transform: uppercase;

  animation: zylyf-preloader-logo 2s cubic-bezier(0.77, 0, 0.175, 1) forwards;

}



.d3-flash__logo span {

  color: var(--cpf-accent, #ffb700);

}



@keyframes zylyf-preloader-logo {

  0% {

    opacity: 0;

    transform: translateY(20px);

  }



  30% {

    opacity: 1;

    transform: translateY(0);

  }



  80% {

    opacity: 1;

    transform: translateY(0);

  }



  100% {

    opacity: 0;

    transform: translateY(-10px);

  }

}



.d3-flash__cover {

  position: absolute;

  inset: 0;

  background: #000;

  animation: zylyf-preloader-cover 2s cubic-bezier(0.77, 0, 0.175, 1) forwards;

  transform-origin: top;

}



@keyframes zylyf-preloader-cover {

  0% {

    transform: scaleY(1);

  }



  80% {

    transform: scaleY(1);

  }



  100% {

    transform: scaleY(0);

  }

}







.e-con-inner {

  padding: 0 !important;

  max-width: 100% !important;

}



.e-con {

  padding: 0 !important;

  max-width: 100% !important;

}



/* -------------------------------------------------------

 * Diagonal Showcase Breakout Styles

 * ----------------------------------------------------- */

.elementor-widget-zylyf_diagonal_showcase,

.elementor-widget-zylyf_diagonal_showcase > .elementor-widget-container {

	width: 100% !important;

	max-width: 100% !important;

	padding: 0 !important;

	margin: 0 !important;

}



.tfd-showcase--diagonal {

	position: relative !important;

	width: 100% !important;

	height: 100dvh !important;

	overflow: hidden !important;

	display: block !important;

}



.tfd-showcase--diagonal .tfd-showcase__webgl-container {

	z-index: 2 !important;

}

.tfd-showcase--diagonal .tfd-showcase__fallback-grid {

	display: block !important;

	z-index: 0 !important;

}



.tfd-showcase--diagonal.tfd-showcase--webgl-failed .tfd-showcase__webgl-container {

	display: none !important;

}



.tfd-showcase--diagonal.tfd-showcase--webgl-failed .tfd-showcase__fallback-grid {

	z-index: 2 !important;

}



/* ==========================================================================

   DEFAULT WORDPRESS CORE WIDGET STYLING

   ========================================================================== */



/* Search Widget (Classic & Block) */

.widget_search,

.widget_block .wp-block-search {

	margin-block-end: 2rem;

}

.widget_search form,

.wp-block-search__button-inside .wp-block-search__inside-wrapper {

	display: flex;

	position: relative;

	width: 100%;

  flex-direction: column;

}

.widget_search label,

.wp-block-search__label {

	width: 100%;

}

.widget_search input.search-field,

.wp-block-search__input {

	width: 100%;

	padding: 15px 20px;

	background: var(--cpf-color-dark, #0a0a0a);

	border: 1px solid var(--cpf-color-border, rgba(255,255,255,0.1));

	color: #fff;

	border-radius: 4px;

	font-family: var(--cpf-font-body);

}

.widget_search input.search-submit,

.wp-block-search__button {

	position: absolute;

	right: 0;

	bottom: 0; /* Align to input if label is present */

	height: 52px; /* Fixed height to match input */

	padding: 0 20px;

	background: var(--tft-primary, #E8B923);

	color: #000;

	border: none;

	font-weight: 600;

	cursor: pointer;

	border-radius: 0 4px 4px 0;

	transition: background 0.3s ease;

}

.widget_search input.search-submit:hover,

.wp-block-search__button:hover {

	background: #fff;

}



/* Base Widget Structure */

.widget_archive,

.widget_categories,

.widget_pages,

.widget_meta,

.widget_recent_comments,

.widget_recent_entries,

.widget_nav_menu,

.widget_block {

	margin-block-end: 2.5rem;

	padding: 2rem;

	background: rgba(255,255,255,0.02);

	border: 1px solid rgba(255,255,255,0.05);

	border-radius: 8px;

}



/* Reset Global H2 inside Widgets */

.cpf-blog-sidebar .widget h2,

.cpf-blog-sidebar .widget_block h2,

.cpf-blog-sidebar .widget_block h3,

.cpf-blog-sidebar .wp-block-heading {

	font-size: 1.5rem !important;

	line-height: 1.3 !important;

	margin-block-end: 1.5rem !important;

	font-weight: 600 !important;

	letter-spacing: -0.02em !important;

}



.widget_archive ul,

.widget_categories ul,

.widget_pages ul,

.widget_meta ul,

.widget_recent_comments ul,

.widget_recent_entries ul,

.widget_nav_menu ul,

.wp-block-latest-posts,

.wp-block-latest-comments {

	list-style: none;

	padding: 0;

	margin: 0;

}



.widget_archive li,

.widget_categories li,

.widget_pages li,

.widget_meta li,

.widget_recent_comments li,

.widget_recent_entries li,

.widget_nav_menu li,

.wp-block-latest-posts li,

.wp-block-latest-comments li {

	padding-block: 0.75rem;

	border-bottom: 1px solid rgba(255,255,255,0.05);

	display: flex;

	justify-content: space-between;

	align-items: center;

}



.widget_archive li:last-child,

.widget_categories li:last-child,

.widget_pages li:last-child,

.widget_meta li:last-child,

.widget_recent_comments li:last-child,

.widget_recent_entries li:last-child,

.widget_nav_menu li:last-child,

.wp-block-latest-posts li:last-child,

.wp-block-latest-comments li:last-child {

	border-bottom: none;

	padding-block-end: 0;

}



.widget_archive a,

.widget_categories a,

.widget_pages a,

.widget_meta a,

.widget_recent_comments a,

.widget_recent_entries a,

.widget_nav_menu a,

.wp-block-latest-posts a,

.wp-block-latest-comments a {

	color: var(--cpf-color-text, rgba(255,255,255,0.7));

	text-decoration: none;

	transition: color 0.3s ease;

	font-family: var(--cpf-font-body);

}



.widget_archive a:hover,

.widget_categories a:hover,

.widget_pages a:hover,

.widget_meta a:hover,

.widget_recent_comments a:hover,

.widget_recent_entries a:hover,

.widget_nav_menu a:hover,

.wp-block-latest-posts a:hover,

.wp-block-latest-comments a:hover {

	color: var(--tft-primary, #E8B923);

}



/* Tag Cloud Widget */

.widget_tag_cloud .tagcloud {

	display: flex;

	flex-wrap: wrap;

	gap: 0.5rem;

}

.widget_tag_cloud a {

	display: inline-block;

	padding: 8px 16px;

	background: rgba(255,255,255,0.05);

	color: #fff;

	text-decoration: none;

	border-radius: 4px;

	font-size: 0.85rem !important; /* Overrides WP inline styles */

	border: 1px solid rgba(255,255,255,0.1);

	transition: all 0.3s ease;

}

.widget_tag_cloud a:hover {

	background: var(--tft-primary, #E8B923);

	color: #000;

	border-color: var(--tft-primary, #E8B923);

}



/* Calendar Widget */

.widget_calendar table {

	width: 100%;

	border-collapse: collapse;

	text-align: center;

}

.widget_calendar th {

	background: rgba(255,255,255,0.05);

	padding: 10px;

	font-weight: 600;

	color: #fff;

}

.widget_calendar td {

	padding: 10px;

	border: 1px solid rgba(255,255,255,0.05);

	color: rgba(255,255,255,0.7);

}

.widget_calendar td a {

	color: var(--tft-primary, #E8B923);

	font-weight: 700;

}