.elementor-kit-855{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#111111;--e-global-color-text:#FFFFFF;--e-global-color-accent:#C0006E;--e-global-color-de19a07:#0A0A0A;--e-global-color-459bce6:#111111;--e-global-color-92fe2f1:#161616;--e-global-color-8c5b0f8:#FFFFFF;--e-global-color-8a84304:#909090;--e-global-color-e564e38:#C0006E;--e-global-color-0b8f2b6:#E8007A;--e-global-color-7f0def2:#FFFFFF0F;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:800;--e-global-typography-primary-text-transform:lowercase;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-0.03em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-line-height:1.5em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:300;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:300;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0.12em;--e-global-typography-edaa78a-font-family:"Inter";--e-global-typography-edaa78a-font-weight:800;--e-global-typography-579a1d0-font-family:"Inter";--e-global-typography-579a1d0-font-weight:300;background-color:#00000000;}.elementor-kit-855 button,.elementor-kit-855 input[type="button"],.elementor-kit-855 input[type="submit"],.elementor-kit-855 .elementor-button{background-color:#0A0A0A;}.elementor-kit-855 e-page-transition{background-color:#FFBC7D;}.site-header{background-color:#00000000;padding-inline-end:0px;padding-inline-start:0px;}.site-footer{background-color:#02010100;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   WYLDESITES — SITE SETTINGS CUSTOM CSS
   v0.5 — 2026-04-06
   ============================================================ */


/* ----------------------------------------------------------
   1.1 — Header Button Background Fix
   ---------------------------------------------------------- */
.wylde-header .elementor-button {
  background-color: #0a0a0a !important;
}
.wylde-header .elementor-button:hover {
  background-color: rgba(192, 0, 110, 0.12) !important;
}


/* ----------------------------------------------------------
   1.2 — Header Mobile Layout Fix
   Overrides Elementor's default 100% column width on mobile.
   Logo shrinks to content. Nav takes remaining space.
   CTA hidden entirely on mobile.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .wylde-header > .elementor-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .wylde-header > .elementor-container > .elementor-column {
    width: auto !important;
    flex: 1 1 auto !important;
  }
  .wylde-header > .elementor-container > .elementor-column:first-child {
    flex: 0 0 auto !important;
  }
  .wylde-header .wylde-cta-col {
    display: none !important;
  }
}


/* ----------------------------------------------------------
   1.3 — Hero: Corner Bracket Accents
   Asymmetric corner brackets in muted magenta.
   Top-left + bottom-right only — editorial, not decorative.
   overflow: hidden prevents content from expanding beyond 60vh.
   Section padding must be 0 — flexbox handles vertical centering.
   ---------------------------------------------------------- */
.wylde-hero {
  position: relative;
  overflow: hidden;
}
.wylde-hero::before {
  content: '';
  position: absolute;
  top: clamp(24px, 3vw, 56px);
  left: clamp(24px, 3vw, 56px);
  width: clamp(20px, 2.5vw, 44px);
  height: clamp(20px, 2.5vw, 44px);
  border-top: 1px solid rgba(192, 0, 110, 0.45);
  border-left: 1px solid rgba(192, 0, 110, 0.45);
  pointer-events: none;
  z-index: 1;
}
.wylde-hero::after {
  content: '';
  position: absolute;
  bottom: clamp(24px, 3vw, 56px);
  right: clamp(24px, 3vw, 56px);
  width: clamp(20px, 2.5vw, 44px);
  height: clamp(20px, 2.5vw, 44px);
  border-bottom: 1px solid rgba(192, 0, 110, 0.45);
  border-right: 1px solid rgba(192, 0, 110, 0.45);
  pointer-events: none;
  z-index: 1;
}


/* ----------------------------------------------------------
   1.4 — Hero: Diagonal Grid
   45-degree 1px line grid at ~2.5% opacity.
   Applied via background-image — no pseudo-elements consumed.
   Grid cell size scales fluidly with viewport width.
   ---------------------------------------------------------- */
.wylde-hero {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent clamp(40px, 5vw, 80px)
  );
}


/* ----------------------------------------------------------
   1.5 — Hero: Ghost Wordmark
   "wylde" rendered enormous behind the headline content.
   Ultra-low opacity — atmosphere only, never readable.
   Uses column ::before so section pseudo-elements stay free.
   z-index: -1 keeps it behind all content widgets.
   isolation: isolate on the column contains the stacking context.
   ---------------------------------------------------------- */
.wylde-hero-col {
  position: relative;
  isolation: isolate;
}
.wylde-hero-col::before {
  content: 'wylde';
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(280px, 35vh, 700px);
  color: rgba(255, 255, 255, 0.03);
  letter-spacing: -0.05em;
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: -1;
  line-height: 1;
}


/* ----------------------------------------------------------
   1.6 — Hero: Gradient Rule
   Thin magenta-spectrum gradient line beneath the H1.
   Width scales fluidly. Height is always 2px — never scales.
   ---------------------------------------------------------- */
.wylde-hero-rule {
  width: clamp(60px, 8vw, 180px);
  height: 2px;
  background: linear-gradient(135deg, #c0006e 0%, #e8007a 50%, #ff4db2 100%);
  margin: 0 auto;
}


/* ----------------------------------------------------------
   1.7 — Hero: Fluid Typography Override
   Overrides Elementor's breakpoint-based sizing with true
   fluid type scaling via clamp(). Scales from mobile to 4K.
   ---------------------------------------------------------- */
.wylde-hero .wylde-hero-headline .elementor-heading-title {
  font-size: clamp(2.4rem, 6vw, 9rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}
.wylde-hero .wylde-hero-sub .elementor-heading-title {
  font-size: clamp(1rem, 1.4vw, 1.6rem) !important;
  max-width: clamp(320px, 55vw, 860px);
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.65 !important;
}


/* ----------------------------------------------------------
   1.8 — Hero: Button Override
   Background explicitly set to prevent grey inheritance.
   ---------------------------------------------------------- */
.wylde-hero .elementor-button {
  background-color: transparent !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.wylde-hero .elementor-button:hover {
  background-color: rgba(192, 0, 110, 0.12) !important;
  border-color: #e8007a !important;
}


/* ============================================================
   ANIMATED BACKGROUND GRADIENTS
   Blue: 18s cycle | Magenta: 13s cycle | Never in sync
   ============================================================ */

@keyframes wylde-bg-blue {
  0%   { --bg-blue-1: rgba(0, 68, 255, 0.70); --bg-blue-2: rgba(0, 34, 128, 0.40); }
  33%  { --bg-blue-1: rgba(0, 45, 220, 0.75); --bg-blue-2: rgba(0, 20, 110, 0.44); }
  66%  { --bg-blue-1: rgba(20, 80, 255, 0.65); --bg-blue-2: rgba(10, 40, 140, 0.37); }
  100% { --bg-blue-1: rgba(0, 68, 255, 0.70); --bg-blue-2: rgba(0, 34, 128, 0.40); }
}

@keyframes wylde-bg-magenta {
  0%   { --bg-mag-1: #d4006a; --bg-mag-2: #720038; }
  40%  { --bg-mag-1: #b8005c; --bg-mag-2: #600030; }
  75%  { --bg-mag-1: #e0006e; --bg-mag-2: #800040; }
  100% { --bg-mag-1: #d4006a; --bg-mag-2: #720038; }
}

html {
  background-color: #0a0a0a;
  background-image:
    radial-gradient(
      ellipse 80% 90% at 102% 38%,
      var(--bg-blue-1, rgba(0,68,255,0.70)) 0%,
      var(--bg-blue-2, rgba(0,34,128,0.40)) 26%,
      rgba(0, 17, 64, 0.15) 52%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 80% 90% at -2% 73%,
      var(--bg-mag-1, #d4006a) 0%,
      var(--bg-mag-2, #720038) 26%,
      #1c000e 52%,
      #0a0a0a 68%
    );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
  animation:
    wylde-bg-blue    18s ease-in-out infinite,
    wylde-bg-magenta 13s ease-in-out infinite;
}



body.elementor-kit-855 {
  background-color: transparent !important;
  background-image: none !important;
}


/* ----------------------------------------------------------
   1.10 — Hero: Background Color Override
   Elementor generates its own background-color from the section
   settings into post-2.css. Needs !important to override.
   background-image (diagonal grid) is unaffected — only
   background-color is being cleared here.
   ---------------------------------------------------------- */
.wylde-hero {
  background-color: transparent !important;
}


/* ----------------------------------------------------------
   1.11 — Body: Kit Background Override
   Elementor kit settings show body_background_background: classic
   meaning the kit has a background color set on body, sitting
   above the html gradient. Force transparent.
   ---------------------------------------------------------- */
body {
  background-color: transparent !important;
  background-image: none !important;
}


/* ----------------------------------------------------------
   1.12 — TEMP: Default Footer Fix
   Hello Elementor's footer-has-copyright outputs a white bg.
   This rule is temporary — remove once the Elementor footer
   template is built and assigned in Theme Builder.
   ---------------------------------------------------------- */
#site-footer,
.site-footer {
  background-color: transparent !important;
}
#site-footer *,
.site-footer * {
  color: rgba(255, 255, 255, 0.45) !important;
}


/* ============================================================
   FULL SITE SETTINGS CUSTOM CSS — v1.5 PASTE BLOCK
   ============================================================ */

/*
PASTE EVERYTHING BELOW THIS LINE INTO:
Site Settings → Custom CSS
Replace the entire existing contents each time you update.
*/

/* ============================================================
   WYLDESITES — SITE SETTINGS CUSTOM CSS
   v1.5 — 2026-04-06
   ============================================================ */


/* ----------------------------------------------------------
   1.1 — Header Button Background Fix
   ---------------------------------------------------------- */
.wylde-header {
  background-color: transparent !important;
}
.wylde-header .elementor-button {
  background-color: transparent !important;
}
.wylde-header .elementor-button:hover {
  background-color: rgba(192, 0, 110, 0.12) !important;
}


/* ----------------------------------------------------------
   1.2 — Header Mobile Layout Fix
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .wylde-header > .elementor-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .wylde-header > .elementor-container > .elementor-column {
    width: auto !important;
    flex: 1 1 auto !important;
  }
  .wylde-header > .elementor-container > .elementor-column:first-child {
    flex: 0 0 auto !important;
  }
  .wylde-header .wylde-cta-col {
    display: none !important;
  }
}


/* ----------------------------------------------------------
   1.3 — Hero: Corner Bracket Accents
   ---------------------------------------------------------- */
.wylde-hero {
  position: relative;
  overflow: hidden;
}
.wylde-hero::before {
  content: '';
  position: absolute;
  top: clamp(24px, 3vw, 56px);
  left: clamp(24px, 3vw, 56px);
  width: clamp(20px, 2.5vw, 44px);
  height: clamp(20px, 2.5vw, 44px);
  border-top: 1px solid rgba(192, 0, 110, 0.45);
  border-left: 1px solid rgba(192, 0, 110, 0.45);
  pointer-events: none;
  z-index: 1;
}
.wylde-hero::after {
  content: '';
  position: absolute;
  bottom: clamp(24px, 3vw, 56px);
  right: clamp(24px, 3vw, 56px);
  width: clamp(20px, 2.5vw, 44px);
  height: clamp(20px, 2.5vw, 44px);
  border-bottom: 1px solid rgba(192, 0, 110, 0.45);
  border-right: 1px solid rgba(192, 0, 110, 0.45);
  pointer-events: none;
  z-index: 1;
}


/* ----------------------------------------------------------
   1.4 — Hero: Diagonal Grid
   ---------------------------------------------------------- */
.wylde-hero {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent clamp(40px, 5vw, 80px)
  );
}


/* ----------------------------------------------------------
   1.5 — Hero: Ghost Wordmark
   ---------------------------------------------------------- */
.wylde-hero-col {
  position: relative;
  isolation: isolate;
}
.wylde-hero-col::before {
  content: 'wylde';
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(280px, 35vh, 700px);
  color: rgba(255, 255, 255, 0.03);
  letter-spacing: -0.05em;
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: -1;
  line-height: 1;
}


/* ----------------------------------------------------------
   1.6 — Hero: Gradient Rule
   ---------------------------------------------------------- */
.wylde-hero-rule {
  width: clamp(60px, 8vw, 180px);
  height: 2px;
  background: linear-gradient(135deg, #c0006e 0%, #e8007a 50%, #ff4db2 100%);
  margin: 0 auto;
}


/* ----------------------------------------------------------
   1.7 — Hero: Fluid Typography Override
   ---------------------------------------------------------- */
.wylde-hero .wylde-hero-headline .elementor-heading-title {
  font-size: clamp(2.4rem, 6vw, 9rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}
.wylde-hero .wylde-hero-sub .elementor-heading-title {
  font-size: clamp(1rem, 1.4vw, 1.6rem) !important;
  max-width: clamp(320px, 55vw, 860px);
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.65 !important;
}


/* ----------------------------------------------------------
   1.8 — Hero: Button Override
   ---------------------------------------------------------- */
.wylde-hero .elementor-button {
  background-color: transparent !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.wylde-hero .elementor-button:hover {
  background-color: rgba(192, 0, 110, 0.12) !important;
  border-color: #e8007a !important;
}



/* ----------------------------------------------------------
   1.10 — Hero: Background Color Override
   Elementor post CSS sets bg-color from section settings.
   !important required to override generated stylesheet.
   ---------------------------------------------------------- */
.wylde-hero {
  background-color: transparent !important;
}


/* ----------------------------------------------------------
   1.11 — Body: Kit Background Override
   Elementor kit sets background on body — overrides html gradient.
   ---------------------------------------------------------- */
body {
  background-color: transparent !important;
  background-image: none !important;
}


/* ----------------------------------------------------------
   1.12 — TEMP: Default Footer Fix
   Remove once Elementor footer template is built.
   ---------------------------------------------------------- */
#site-footer,
.site-footer {
  background-color: transparent !important;
}
#site-footer *,
.site-footer * {
  color: rgba(255, 255, 255, 0.45) !important;
}   

/* ----------------------------------------------------------
   2.0 — Trust Bar: Section Border + Background
   ---------------------------------------------------------- */
.wylde-trust-bar {
  border-top: 1px solid rgba(192, 0, 110, 0.3);
  position: relative;
}


/* ----------------------------------------------------------
   2.1 — Trust Bar: Marquee Wrapper
   ---------------------------------------------------------- */
.wylde-marquee-wrap {
  overflow: hidden;
  width: 100%;
  padding: clamp(20px, 3vw, 40px) 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}


/* ----------------------------------------------------------
   2.2 — Trust Bar: Marquee Track + Animation
   ---------------------------------------------------------- */
.wylde-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: wylde-marquee 64s linear infinite;
}

.wylde-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes wylde-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ----------------------------------------------------------
   2.3 — Trust Bar: Logo Image Styling
   ---------------------------------------------------------- */
.wylde-marquee-logo {
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(24px, 3vw, 56px);
  flex-shrink: 0;
}

.wylde-marquee-logo img {
  height: clamp(30px, 3vw, 54px);
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  display: block;
}

.wylde-marquee-track:hover .wylde-marquee-logo img {
  opacity: 0.75;
}

.wylde-marquee-sep {
  width: 1px;
  height: clamp(16px, 2vw, 28px);
  background: rgba(192, 0, 110, 0.3);
  flex-shrink: 0;
}


/* ----------------------------------------------------------
   3.0 — Expertise Section: Section Label (eyebrow)
   ---------------------------------------------------------- */
.wylde-section-label {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(0.65rem, 0.8vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c0006e;
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid;
  border-image: linear-gradient(135deg, #c0006e, #ff4db2) 1;
  display: inline-block;
}


/* ----------------------------------------------------------
   3.1 — Expertise Section: Heading fluid scale
   ---------------------------------------------------------- */
.wylde-expertise .wylde-expertise-heading .elementor-heading-title {
  font-size: clamp(1.4rem, 2.8vw, 3rem) !important;
  line-height: 1.15 !important;
}


/* ----------------------------------------------------------
   3.2 — Expertise Section: Card Column
   Card border, background, hover state.
   Near-square radius — avoids generic SaaS feel.
   ---------------------------------------------------------- */
.wylde-card-col {
  padding: clamp(24px, 2.5vw, 48px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  background: rgba(10, 10, 10, 0.4);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.wylde-card-col:hover {
  border-color: rgba(192, 0, 110, 0.4);
  background: rgba(192, 0, 110, 0.05);
}


/* ----------------------------------------------------------
   3.3 — Expertise Section: Card Row Gap
   Gap between the two rows of cards.
   ---------------------------------------------------------- */
.wylde-cards-row {
  gap: clamp(16px, 1.5vw, 28px) !important;
  margin-bottom: clamp(16px, 1.5vw, 28px);
}

.wylde-cards-row:last-child {
  margin-bottom: 0;
}


/* ----------------------------------------------------------
   3.4 — Expertise Section: UAE Info Box overrides
   Forces icon, title, and description to match design system.
   ---------------------------------------------------------- */
.wylde-card-col .uael-infobox-title {
  font-size: clamp(1rem, 1.3vw, 1.35rem) !important;
  font-weight: 800 !important;
  text-transform: lowercase !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
}

.wylde-card-col .uael-infobox-text {
  font-size: clamp(0.85rem, 0.95vw, 1rem) !important;
  font-weight: 400 !important;
  color: #909090 !important;
  line-height: 1.7 !important;
}
.wylde-card-col .uael-infobox-icon-wrap {
  margin-bottom: 20px !important;
}

.wylde-card-col .uael-infobox-icon {
  color: #c0006e !important;
  transition: color 0.3s ease !important;
}

.wylde-card-col:hover .uael-infobox-icon {
  color: #e8007a !important;
}


/* ----------------------------------------------------------
   3.5 — Expertise Section: Mobile stack
   Cards go single column on mobile.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .wylde-cards-row > .elementor-column {
    width: 100% !important;
    margin-bottom: clamp(12px, 3vw, 20px);
  }
}


/* ----------------------------------------------------------
   3.5 — Expertise Section: Mobile stack
   Cards go single column on mobile.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .wylde-cards-row > .elementor-column {
    width: 100% !important;
    margin-bottom: clamp(12px, 3vw, 20px);
  }
}

/* ============================================================
   4.0 — SINGLE PORTFOLIO ITEM
   Scoped to body.single-portfolio
   Template ID: elementor-1940
   ============================================================ */

/* Page-level background and containers */
body.single-portfolio .e-con:not(.wylde-post-nav) {
  background-color: transparent !important;
}

/* Featured image — full width, capped height */
body.single-portfolio .portfolio-featured-image img {
  width: 100% !important;
  max-height: 70vh !important;
  object-fit: cover !important;
  display: block !important;
}

/* H1 title */
body.single-portfolio .wylde-portfolio-content h1.elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  text-transform: lowercase !important;
}

/* Description / post content */
body.single-portfolio .wylde-portfolio-content .elementor-widget-theme-post-content p,
body.single-portfolio .wylde-portfolio-content .elementor-widget-text-editor p {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
}

body.single-portfolio .wylde-portfolio-sidebar {
  background-color: rgba(10, 10, 10, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 3px !important;
  padding: clamp(20px, 2.5vw, 40px) !important;
}

/* Sidebar label (CLIENT etc) */
body.single-portfolio .sidebar-label .elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #c0006e !important;
  margin-bottom: 6px !important;
}

/* Client name */
body.single-portfolio .portfolio-client-name,
body.single-portfolio .portfolio-client-name p {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  margin: 0 0 20px 0 !important;
}

/* Post info — date and time */
body.single-portfolio .elementor-widget-post-info .elementor-icon-list-text,
body.single-portfolio .elementor-widget-post-info .elementor-icon-list-icon svg {
  color: #909090 !important;
  fill: #909090 !important;
  font-size: 0.8rem !important;
  font-weight: 300 !important;
}

body.single-portfolio .elementor-widget-post-info a {
  color: #909090 !important;
  text-decoration: none !important;
}

/* Visit Live Site button */
body.single-portfolio .portfolio-live-url .elementor-button {
  background: transparent !important;
  border: 1px solid rgba(192, 0, 110, 0.5) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
  margin-top: 20px !important;
}

body.single-portfolio .portfolio-live-url .elementor-button:hover {
  background-color: rgba(192, 0, 110, 0.12) !important;
  border-color: #e8007a !important;
}

.elementor-element-67f7dcb6 {
  gap: clamp(24px, 3vw, 48px) !important;
  padding: clamp(40px, 5vw, 80px) !important;
}

body.single-portfolio .wylde-portfolio-quote-btn .elementor-button {
  background: linear-gradient(135deg, #c0006e, #e8007a) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body.single-portfolio .wylde-portfolio-quote-btn .elementor-button:hover {
  background: linear-gradient(135deg, #e8007a, #ff4db2) !important;
}

.elementor-element-05bcf76 .elementor-widget-button {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.elementor-element-05bcf76 .elementor-widget-button .elementor-widget-container {
  width: 100% !important;
}

.elementor-element-9cb226d { padding-top: 20px!important; }

body.single-portfolio .wylde-portfolio-content h1.elementor-heading-title {
  margin-bottom: 25px !important;
}

@media (max-width: 767px) {
  .wylde-post-nav .post-navigation__prev--title,
  .wylde-post-nav .post-navigation__next--title {
    display: none !important;
  }
}

body.single-portfolio .elementor-element-44634e55 {
  height: 70vh !important;
  overflow: hidden !important;
}

body.single-portfolio .elementor-element-44634e55 .elementor-widget-container,
body.single-portfolio .elementor-element-44634e55 a {
  display: block !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.single-portfolio .elementor-element-44634e55 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}


/* ============================================================
   5.0 — PORTFOLIO GRID SECTION (Homepage)
   ============================================================ */

.wylde-portfolio-section {
  padding: clamp(40px, 5vw, 80px) !important;
}

/* Section heading */
.elementor-element-e5e86af .elementor-heading-title {
  font-size: clamp(1.4rem, 2.8vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

/* Filter bar */
.wylde-portfolio-section .elementor-portfolio__filters {
  margin-bottom: clamp(24px, 3vw, 48px) !important;
  gap: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* Filter buttons */
.wylde-portfolio-section .elementor-portfolio__filter {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 3px !important;
  padding: 6px 16px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.wylde-portfolio-section .elementor-portfolio__filter:hover {
  color: #ffffff !important;
  border-color: rgba(192, 0, 110, 0.6) !important;
}

.wylde-portfolio-section .elementor-portfolio__filter.elementor-active {
  color: #ffffff !important;
  border-color: #c0006e !important;
  background: rgba(192, 0, 110, 0.15) !important;
}

/* Grid — zero gap, override Elementor custom properties */
.wylde-portfolio-section .elementor-portfolio {
  gap: 0 !important;
}

.elementor-element-4c500e8 .elementor-portfolio.elementor-grid {
  --grid-column-gap: 0px !important;
  --grid-row-gap: 0px !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* Card — all three layers locked to same height 
.wylde-portfolio-section .elementor-portfolio-item {
  overflow: hidden !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 260px !important;
}

.wylde-portfolio-section .elementor-portfolio-item__img {
  height: 260px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Card image — vertical-align: top critical to kill baseline gap 
.wylde-portfolio-section .elementor-portfolio-item img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  transition: none !important;
}
*/

/* Hover overlay */
.wylde-portfolio-section .elementor-portfolio-item__overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  ) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.wylde-portfolio-section .elementor-portfolio-item:hover .elementor-portfolio-item__overlay {
  opacity: 1 !important;
}

/* Overlay title */
.wylde-portfolio-section .elementor-portfolio-item__title {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(0.85rem, 1.1vw, 1.1rem) !important;
  font-weight: 800 !important;
  text-transform: lowercase !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

/* Portfolio section — Browse All button */
.browse-portfolio-btn .elementor-button {
  background: linear-gradient(135deg, #c0006e, #e8007a) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: background 0.3s ease !important;
}

.browse-portfolio-btn .elementor-button:hover {
  background: linear-gradient(135deg, #e8007a, #ff4db2) !important;
}



/* ============================================================
   6.0 — ABOUT / WHY US SECTION (Homepage)
   CSS class: wylde-about-section
   Counters: HFE Counter widget (hfe-counter)
   Paste into Site Settings → Custom CSS, appended after v2.9 block
   ============================================================ */

/* ----------------------------------------------------------
   6.1 — Section wrapper
   ---------------------------------------------------------- */
.wylde-about-section {
  border-top: 1px solid rgba(192, 0, 110, 0.2) !important;
}


/* ----------------------------------------------------------
   6.2 — Main heading
   ---------------------------------------------------------- */
.wylde-about-section .wylde-about-heading .elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1.4rem, 2.8vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: lowercase !important;
}


/* ----------------------------------------------------------
   6.3 — Stats row (HFE Counter widgets)
   ---------------------------------------------------------- */
.wylde-stats-row {
  margin-bottom: clamp(40px, 5vw, 72px) !important;
  padding-bottom: clamp(32px, 4vw, 56px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Counter number */
.wylde-about-section .hfe-counter-number {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(2.8rem, 5vw, 5rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #c0006e !important;
}

/* Counter prefix / suffix */
.wylde-about-section .hfe-counter-prefix,
.wylde-about-section .hfe-counter-suffix {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
  font-weight: 800 !important;
  color: #c0006e !important;
}

/* Counter title */
.wylde-about-section .hfe-counter-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #c0c0c0 !important;
  margin-top: 10px !important;
}


/* ----------------------------------------------------------
   6.4 — Body copy
   ---------------------------------------------------------- */
.wylde-about-body {
  margin-top: clamp(8px, 1.5vw, 16px) !important;
}

.wylde-about-body p {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-bottom: 1.4em !important;
  max-width: 860px !important;
}

.wylde-about-body p strong {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.wylde-about-body p:last-child {
  margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
   6.5 — Divider
   ---------------------------------------------------------- */
.wylde-about-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: clamp(40px, 5vw, 72px) 0;
}


/* ----------------------------------------------------------
   6.6 — Testimonial Carousel (Elementor Pro native widget)
   ---------------------------------------------------------- */
.wylde-testimonial-slider .elementor-testimonial__text {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.wylde-testimonial-slider .elementor-testimonial__name {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
}

.wylde-testimonial-slider .elementor-testimonial__title {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #c0006e !important;
}

.wylde-testimonial-slider .elementor-swiper-button-prev svg,
.wylde-testimonial-slider .elementor-swiper-button-next svg {
  fill: #c0006e !important;
  color: #c0006e !important;
}

.wylde-testimonial-slider .swiper-pagination-bullet {
  background: rgba(192, 0, 110, 0.4) !important;
  opacity: 1 !important;
}

.wylde-testimonial-slider .swiper-pagination-bullet-active {
  background: #c0006e !important;
}

/* ----------------------------------------------------------
   6.7 — Mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .wylde-stats-row > .elementor-column {
    width: 100% !important;
    margin-bottom: clamp(24px, 5vw, 32px) !important;
    padding-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: clamp(24px, 5vw, 32px) !important;
  }

  .wylde-stats-row > .elementor-column:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   7.0 — GLOBAL FOOTER
   Top row CSS class: wylde-footer-top
   Bottom row CSS class: wylde-footer-bottom
   ============================================================ */

/* ----------------------------------------------------------
   7.1 — Top row columns: left/center/right alignment
   ---------------------------------------------------------- */
.wylde-footer-col-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.wylde-footer-col-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wylde-footer-col-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.wylde-footer-email {
  text-align: right !important;
  width: 100% !important;
}

/* ----------------------------------------------------------
   7.2 — Logo (matches header wordmark)
   ---------------------------------------------------------- */
.wylde-footer-logo .elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: lowercase !important;
  color: #ffffff !important;
}

.wylde-footer-logo .elementor-heading-title a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ----------------------------------------------------------
   7.3 — Contact links (phone + email)
   ---------------------------------------------------------- */
.wylde-footer-contact {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

.wylde-footer-contact a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.wylde-footer-contact a:hover {
  color: #c0006e !important;
}

/* ----------------------------------------------------------
   7.4 — Copyright bar
   ---------------------------------------------------------- */
.wylde-footer-copyright {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

/* ----------------------------------------------------------
   7.5 — Mobile: center everything
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .wylde-footer-col-left,
  .wylde-footer-col-right {
    justify-content: center !important;
  }

  .wylde-footer-contact {
    text-align: center !important;
  }
}
    
    
    
    
/* ============================================================
   8.0 — WYLDESITES LOGO GLITCH EFFECT
   Applies to header + footer wordmark via .wylde-logo class.
   Add class 'wylde-logo' to both heading widgets in Elementor.
   JS interval: 6 seconds. Animation duration: ~1.2s.
   ============================================================ */

/* ----------------------------------------------------------
   8.1 — Logo size (2rem matches approved preview)
   ---------------------------------------------------------- */
.wylde-logo.elementor-heading-title,
.wylde-logo .elementor-heading-title {
  font-size: 2rem !important;
}

/* Also target the header logo by element ID as fallback */
.elementor-element-4c3231d2 .elementor-heading-title {
  font-size: 2rem !important;
}


/* ----------------------------------------------------------
   8.2 — Base logo element
   ---------------------------------------------------------- */
.wylde-logo-gfx {
  position: relative;
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  letter-spacing: -0.02em !important;
  color: #ffffff;
  text-transform: lowercase;
  cursor: default;
  line-height: 1.2;
}

.wylde-logo-gfx::before,
.wylde-logo-gfx::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}


/* ----------------------------------------------------------
   8.3 — Glitch keyframes: main text jitter
   ---------------------------------------------------------- */
@keyframes wylde-glitch-main {
  0%   { transform: translate(0,0);      color: #ffffff; }
  6%   { transform: translate(0,0);      color: #ffffff; }
  7%   { transform: translate(-4px,0);   color: #ffffff; }
  8%   { transform: translate(5px,0);    color: rgba(255,255,255,0.8); }
  9%   { transform: translate(-5px,1px); color: #ffffff; }
  10%  { transform: translate(0,0);      color: rgba(255,255,255,0.94); }
  14%  { transform: translate(0,0);      color: #ffffff; }
  15%  { transform: translate(4px,-1px); color: rgba(255,255,255,0.73); }
  16%  { transform: translate(-3px,0);   color: #ffffff; }
  17%  { transform: translate(0,0);      color: #ffffff; }
  22%  { transform: translate(0,0);      color: #ffffff; }
  23%  { transform: translate(-6px,0);   color: rgba(255,255,255,0.8); }
  24%  { transform: translate(0,0);      color: #ffffff; }
  100% { transform: translate(0,0);      color: #ffffff; }
}


/* ----------------------------------------------------------
   8.4 — Glitch keyframes: red channel
   ---------------------------------------------------------- */
@keyframes wylde-glitch-red {
  0%   { opacity:0; transform:translate(0,0);     clip-path:polygon(0 0,100% 0,100% 0,0 0); }
  6%   { opacity:0; }
  7%   { opacity:0.9;  transform:translate(-6px,0);   clip-path:polygon(0 15%,100% 15%,100% 40%,0 40%); }
  8%   { opacity:0.8;  transform:translate(7px,1px);  clip-path:polygon(0 50%,100% 50%,100% 70%,0 70%); }
  9%   { opacity:0.95; transform:translate(-5px,0);   clip-path:polygon(0 10%,100% 10%,100% 35%,0 35%); }
  10%  { opacity:0;    transform:translate(0,0);      clip-path:polygon(0 0,100% 0,100% 0,0 0); }
  14%  { opacity:0; }
  15%  { opacity:0.85; transform:translate(6px,0);    clip-path:polygon(0 60%,100% 60%,100% 85%,0 85%); }
  16%  { opacity:0;    transform:translate(0,0); }
  22%  { opacity:0; }
  23%  { opacity:0.9;  transform:translate(-8px,0);   clip-path:polygon(0 20%,100% 20%,100% 50%,0 50%); }
  24%  { opacity:0; }
  100% { opacity:0; }
}


/* ----------------------------------------------------------
   8.5 — Glitch keyframes: cyan channel
   ---------------------------------------------------------- */
@keyframes wylde-glitch-cyan {
  0%   { opacity:0; transform:translate(0,0);      clip-path:polygon(0 0,100% 0,100% 0,0 0); }
  6%   { opacity:0; }
  7%   { opacity:0.85; transform:translate(6px,0);     clip-path:polygon(0 40%,100% 40%,100% 65%,0 65%); }
  8%   { opacity:0.8;  transform:translate(-7px,-1px); clip-path:polygon(0 25%,100% 25%,100% 50%,0 50%); }
  9%   { opacity:0.9;  transform:translate(5px,0);     clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%); }
  10%  { opacity:0;    transform:translate(0,0); }
  14%  { opacity:0; }
  15%  { opacity:0.8;  transform:translate(-6px,0);    clip-path:polygon(0 10%,100% 10%,100% 40%,0 40%); }
  16%  { opacity:0;    transform:translate(0,0); }
  22%  { opacity:0; }
  23%  { opacity:0.85; transform:translate(8px,0);     clip-path:polygon(0 50%,100% 50%,100% 80%,0 80%); }
  24%  { opacity:0; }
  100% { opacity:0; }
}


/* ----------------------------------------------------------
   8.6 — Shimmer sweep
   ---------------------------------------------------------- */
@keyframes wylde-shimmer {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}


/* ----------------------------------------------------------
   8.7 — Active glitch state
   ---------------------------------------------------------- */
.wylde-logo-gfx.glitching {
  animation: wylde-glitch-main 1.2s steps(1) forwards,
             wylde-shimmer 0.9s ease forwards;
  background: linear-gradient(
    90deg,
    #ffffff 35%,
    #c0006e 48%,
    #ffffff 52%,
    #ffffff 65%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wylde-logo-gfx.glitching::before {
  animation: wylde-glitch-red 1.2s steps(1) forwards;
  color: #ff1744;
  -webkit-text-fill-color: #ff1744;
}

.wylde-logo-gfx.glitching::after {
  animation: wylde-glitch-cyan 1.2s steps(1) forwards;
  color: #00e5ff;
  -webkit-text-fill-color: #00e5ff;
}


/* ----------------------------------------------------------
   8.8 — Header / footer logo link colour reset
   ---------------------------------------------------------- */
.wylde-logo-gfx a,
.wylde-logo-gfx a:hover {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-fill-color: inherit;
}
   
   
    
    
/* ============================================================
   9.0 — HOMEPAGE CTA SECTION
   Section CSS class: wylde-cta-section
   ============================================================ */

/* ----------------------------------------------------------
   9.1 — Section layout
   ---------------------------------------------------------- */
/* REPLACE the existing 9.1 rule with this scoped version */

.wylde-cta-section {
  text-align: center !important;
}

.wylde-cta-section .wylde-cta-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: 0 clamp(24px, 8vw, 160px) !important;
}

/* ----------------------------------------------------------
   9.2 — Headline (~60% of hero size)
   ---------------------------------------------------------- */
.wylde-cta-headline .elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.5rem, 3.6vw, 5.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: lowercase !important;
}

/* ----------------------------------------------------------
   9.3 — Subheading
   ---------------------------------------------------------- */
.wylde-cta-sub .elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(1rem, 1.4vw, 1.6rem) !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

/* ----------------------------------------------------------
   9.4 — Button (matches hero CTA style)
   ---------------------------------------------------------- */
.wylde-cta-btn .elementor-button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  padding: 14px 36px !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

.wylde-cta-btn .elementor-button:hover {
  background: rgba(192, 0, 110, 0.15) !important;
  border-color: #c0006e !important;
}


/* ============================================================
   10.0 — WORKS PAGE
   ============================================================ */

/* ----------------------------------------------------------
   10.1 — Mini hero
   ---------------------------------------------------------- */
.wylde-works-hero {
  text-align: center !important;
}

.wylde-works-title .elementor-heading-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.4rem, 5.5vw, 7rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  text-transform: lowercase !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   10.2 — Dynamic copy swap block
   ---------------------------------------------------------- */
.wylde-copy-swap {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 4vw, 48px) !important;
  position: relative !important;
  min-height: 100px !important;
}

.wylde-copy-block {
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease !important;
  text-align: center !important;
}

.wylde-copy-block.active {
  display: block !important;
  opacity: 1 !important;
}

.wylde-copy-block.fade-out {
  opacity: 0 !important;
}

.wylde-copy-intro {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1rem, 1.4vw, 1.5rem) !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 0.75rem !important;
}

.wylde-copy-intro em {
  font-style: italic !important;
  color: #ffffff !important;
  font-weight: 400 !important;
}

.wylde-copy-body {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(0.85rem, 1vw, 1.05rem) !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ----------------------------------------------------------
   10.3 — Filter bar
   ---------------------------------------------------------- */
.wylde-works-portfolio .elementor-portfolio__filters {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 0 40px !important;
  margin: 0 !important;
  list-style: none !important;
}

.wylde-works-portfolio .elementor-portfolio__filter {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 7px 18px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.wylde-works-portfolio .elementor-portfolio__filter:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.wylde-works-portfolio .elementor-portfolio__filter--active,
.wylde-works-portfolio .elementor-portfolio__filter.elementor-active {
  color: #ffffff !important;
  border-color: #c0006e !important;
  background: rgba(192, 0, 110, 0.12) !important;
}

/* ----------------------------------------------------------
   10.4 — Grid
   ---------------------------------------------------------- */
.wylde-works-portfolio {
  --grid-column-gap: 0px !important;
  --grid-row-gap: 0px !important;
}

.wylde-works-portfolio .elementor-portfolio-item {
  height: 260px !important;
}

.wylde-works-portfolio .elementor-portfolio-item__img,
.wylde-works-portfolio .elementor-post__thumbnail {
  height: 260px !important;
}

.wylde-works-portfolio .elementor-portfolio-item__img img,
.wylde-works-portfolio .elementor-post__thumbnail img {
  height: 260px !important;
  width: 100% !important;
  object-fit: cover !important;
}


/* ----------------------------------------------------------
   10.5 — Hide 'All' filter tab
   Elementor renders All with data-filter="__all".
   Hidden via CSS so Elementor's JS still initialises normally.
   ---------------------------------------------------------- */
.wylde-works-portfolio .elementor-portfolio__filter[data-filter="__all"] {
  display: none !important;
}/* End custom CSS */