.elementor-kit-24888{--e-global-color-secondary:#54595F;--e-global-color-text:#8B8D8F;--e-global-color-accent:#D4C5B0;--e-global-color-primary:#6A1B9A;--e-global-color-6fb3d21:#2C5F5F;--e-global-color-68a01c4:#D4AF37;--e-global-color-a5572e0:#3A3A3A;--e-global-color-a2b1ec7:#6B6B6B;--e-global-color-de36dbe:#FAF8F5;--e-global-color-9d5a99e:#FFFFFF;--e-global-color-5a3379a:#9B8FAA;--e-global-color-b0b473d:#B8C5B0;--e-global-color-496e4ab:#FFD700;--e-global-color-4bca691:#E8EDE6;--e-global-color-6a721dc:#663399;--e-global-color-ff3566a:#6B6B6B;--e-global-color-ab1d6c7:#1A1A1A;--e-global-color-cfb8bbf:#666666;--e-global-color-656e073:#999999;--e-global-color-db192c9:#E07B67;--e-global-color-53d70ae:#B8C5B0;--e-global-color-b7209aa:#8FA682;--e-global-color-f8e1730:#2C5F5F;--e-global-color-1f9bcee:#C9A66B;--e-global-color-e21c64c:#1D4040;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-line-height:1.2px;--e-global-typography-primary-letter-spacing:-0.01px;--e-global-typography-secondary-font-family:"Lato";--e-global-typography-secondary-font-size:28px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.3px;--e-global-typography-secondary-letter-spacing:0.005px;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-font-style:normal;--e-global-typography-text-line-height:1.8px;--e-global-typography-accent-font-family:"Begin Body";--e-global-typography-accent-font-size:17px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-font-style:italic;--e-global-typography-accent-line-height:1.6px;--e-global-typography-accent-letter-spacing:0.01em;--e-global-typography-ed7b40e-font-family:"Things";--e-global-typography-ed7b40e-font-size:56px;--e-global-typography-ed7b40e-font-weight:500;--e-global-typography-ed7b40e-font-style:normal;--e-global-typography-ed7b40e-line-height:1.2px;--e-global-typography-ed7b40e-letter-spacing:-0.01px;--e-global-typography-c3d22f2-font-family:"Things";--e-global-typography-c3d22f2-font-size:16px;--e-global-typography-c3d22f2-font-weight:400;--e-global-typography-c3d22f2-line-height:1.8px;--e-global-typography-5b48337-font-family:"Things";--e-global-typography-5b48337-font-weight:400;--e-global-typography-5b48337-font-style:italic;background-color:#FAF8F5;}.elementor-kit-24888 button,.elementor-kit-24888 input[type="button"],.elementor-kit-24888 input[type="submit"],.elementor-kit-24888 .elementor-button{background-color:#FFFFFF26;font-family:"Atkinson Hyperlegible",  Fraunces;font-size:16px;font-weight:500;color:#3A3A3A;box-shadow:0px 8px 12px 0px rgba(0, 0, 0, 0.1);border-style:solid;border-width:5px 5px 5px 5px;border-color:#FFFFFF40;border-radius:16px 16px 16px 16px;padding:16px 32px 16px 32px;}.elementor-kit-24888 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1100px;}.e-con{--container-max-width:1100px;--container-default-padding-top:120px;--container-default-padding-right:0px;--container-default-padding-bottom:120px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:60px;}.elementor-element{--widgets-spacing:60px 60px;--widgets-spacing-row:60px;--widgets-spacing-column:60px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.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;--container-default-padding-top:80px;--container-default-padding-right:0px;--container-default-padding-bottom:80px;--container-default-padding-left:0px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:60px;--container-default-padding-right:0px;--container-default-padding-bottom:60px;--container-default-padding-left:0px;}}
/* Start custom CSS *//* ========================================
   CIPHER CORE - COMPLETE CUSTOM CSS
   All Features: Gradients + Filtered Reality + Mobile-First
   ======================================== */

/* ========================================
   1. LAYER CARDS WITH GRADIENTS
   ======================================== */

.surface-layer {
  background: linear-gradient(135deg, #B8C5B0 0%, #E8EFE5 100%) !important;
  border: 1px solid #B8C5B0 !important;
}

.armour-layer {
  background: linear-gradient(135deg, #2C5F5F 0%, #507C7C 100%) !important;
  border: 1px solid #2C5F5F !important;
}

.drivers-layer {
  background: linear-gradient(135deg, #D4AF37 0%, #E8D89F 100%) !important;
  border: 1px solid #D4AF37 !important;
}

.shroud-layer {
  background: linear-gradient(135deg, #9B8FAA 0%, #C4BCCE 100%) !important;
  border: 1px solid #9B8FAA !important;
}

.core-layer {
  background: linear-gradient(135deg, #FFD700 0%, #FFE54C 100%) !important;
  border: 1px solid #FFD700 !important;
}

.cta-section {
  background: linear-gradient(135deg, #663399 0%, #8B4FC1 100%) !important;
}

/* ========================================
   2. LIQUID GLASS BUTTON EFFECTS
   ======================================== */

.liquid-glass-button {
  background: rgba(102, 51, 153, 0.2) !important;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  transition: all 0.5s ease;
}

.liquid-glass-button:hover {
  background: rgba(102, 51, 153, 0.4) !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 24px rgba(102, 51, 153, 0.3);
}

.elementor-button {
  transition: all 0.4s ease;
}

/* ========================================
   3. FILTERED REALITY - IMAGE EFFECTS
   ======================================== */

.cipher-filtered-image {
  filter: blur(2px) saturate(115%) opacity(0.9);
  transition: all 0.8s smooth;
}

.cipher-filtered-image:hover {
  filter: blur(0px) saturate(100%) opacity(1);
  transform: scale(1.02);
}

/* ========================================
   4. PROGRESSIVE CLARITY STAGES
   ======================================== */

.filter-stage-1 {
  filter: blur(3px) saturate(85%) opacity(0.8);
  position: relative;
}

.filter-stage-2 {
  filter: blur(2px) saturate(95%) opacity(0.85);
  position: relative;
}

.filter-stage-3 {
  filter: blur(1px) saturate(105%) opacity(0.9);
  position: relative;
}

.filter-stage-4 {
  filter: blur(0.5px) saturate(110%) opacity(0.95);
  position: relative;
}

.filter-stage-5 {
  filter: blur(0px) saturate(115%) opacity(1);
  position: relative;
}

/* ========================================
   5. FROSTED GLASS BACKGROUNDS
   ======================================== */

.glass-text-bg {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
}

/* ========================================
   6. REALITY TUNNEL OVERLAY
   ======================================== */

.reality-tunnel {
  position: relative;
  overflow: hidden;
}

.reality-tunnel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ========================================
   7. INTERFERENCE PATTERN
   ======================================== */

.interference-pattern {
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.05) 2px,
      rgba(0, 0, 0, 0.05) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.05) 2px,
      rgba(0, 0, 0, 0.05) 4px
    ) !important;
}

/* ========================================
   8. LAYERED SHADOWS
   ======================================== */

.layered-shadow {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ========================================
   9. VEIL LIFT ANIMATION
   ======================================== */

.veil-lift {
  animation: veilLift 0.8s ease forwards;
}

@keyframes veilLift {
  from {
    filter: blur(2px) saturate(90%) opacity(0.7);
  }
  to {
    filter: blur(0px) saturate(115%) opacity(1);
  }
}

/* ========================================
   10. LAYER CARD BASE STYLING
   ======================================== */

.cipher-layer-card {
  position: relative;
  padding: 20px;
  border-radius: 8px;
  transition: all 0.4s ease;
}

.above-particles {
  position: relative;
  z-index: 2;
}

/* ========================================
   11. PARTICLE Z-INDEX FIX
   ======================================== */

.premium-particles {
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none;
}

.elementor-section-wrap {
  position: relative;
  z-index: 1;
}

.elementor-widget {
  position: relative;
  z-index: 1;
}

/* ========================================
   12. TOUCH TARGETS & BUTTONS
   ======================================== */

.elementor-button,
a[role="button"],
.layer-card {
  min-height: 48px;
  padding: 16px 24px;
}

@media (max-width: 480px) {
  .elementor-button {
    white-space: nowrap !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .elementor-button-text {
    word-break: keep-all;
  }
}

/* ========================================
   13. RESPONSIVE TEXT SIZING - MOBILE
   ======================================== */

@media (max-width: 480px) {
  html {
    font-size: 16px;
  }
  
  body {
    font-size: 14px;
    line-height: 1.6;
  }
  
  h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }
  
  h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
  
  h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  
  p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  
  .elementor-text-editor,
  .elementor-heading-title,
  a,
  button {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
}

/* ========================================
   14. RESPONSIVE TEXT SIZING - TABLET
   ======================================== */

@media (min-width: 481px) and (max-width: 768px) {
  h1 {
    font-size: 36px !important;
  }
  
  h2 {
    font-size: 28px !important;
  }
  
  h3 {
    font-size: 20px !important;
  }
  
  p {
    font-size: 16px !important;
  }
}

/* ========================================
   15. RESPONSIVE TEXT SIZING - DESKTOP
   ======================================== */

@media (min-width: 769px) {
  h1 {
    font-size: 48px !important;
  }
  
  h2 {
    font-size: 36px !important;
  }
  
  h3 {
    font-size: 24px !important;
  }
  
  p {
    font-size: 16px !important;
  }
}

/* ========================================
   16. SECTION & CONTAINER PADDING
   ======================================== */

@media (max-width: 480px) {
  .elementor-section {
    padding: 16px !important;
  }
  
  .elementor-container {
    padding: 16px !important;
    max-width: 100% !important;
  }
  
  .elementor-widget-wrap {
    padding: 8px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .elementor-section {
    padding: 24px !important;
  }
}

@media (min-width: 769px) {
  .elementor-section {
    padding: 32px !important;
  }
}

/* ========================================
   17. PARTICLE OPACITY BY DEVICE
   ======================================== */

@media (max-width: 480px) {
  .premium-particles {
    opacity: 0.05 !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .premium-particles {
    opacity: 0.1 !important;
  }
}

@media (min-width: 769px) {
  .premium-particles {
    opacity: 0.15 !important;
  }
}

/* ========================================
   18. CARD RESPONSIVE LAYOUT
   ======================================== */

@media (max-width: 480px) {
  [class*="layer-card"],
  .elementor-column {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    margin-bottom: 16px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .elementor-column {
    width: calc(50% - 8px) !important;
    margin: 8px !important;
  }
}

@media (min-width: 769px) {
  .elementor-column {
    width: calc(20% - 16px) !important;
    margin: 8px !important;
  }
}

/* ========================================
   19. LAYER CARD HOVER EFFECTS
   ======================================== */

@media (hover: hover) and (min-width: 768px) {
  .elementor-column {
    transition: all 0.4s ease;
  }
  
  .elementor-column:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }
}

@media (hover: none) and (max-width: 767px) {
  .elementor-column:active {
    transform: scale(0.98);
  }
}

/* ========================================
   20. SHAPE DIVIDERS
   ======================================== */

.elementor-shape-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ========================================
   21. NO HORIZONTAL SCROLL
   ======================================== */

html, body {
  overflow-x: hidden;
}

/* ========================================
   22. ACCESSIBILITY - REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* ========================================
   LAYER CARD HOVER EFFECTS
   ======================================== */

/* Desktop/Tablet hover effects only */
@media (hover: hover) and (min-width: 768px) {
  
  .elementor-column {
    transition: all 0.4s ease;
  }
  
  .elementor-column:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }
  
}

/* Mobile - no hover, just active state */
@media (hover: none) and (max-width: 767px) {
  
  .elementor-column:active {
    transform: scale(0.98);
.spinner-icon i {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* ================================================
   CIPHER LIQUID GLASS BUTTONS - SPLASH PAGE
   ================================================ */

.cipher-glass-btn-solid {
  position: relative;
  display: inline-block;
  padding: 18px 48px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #2C5F5F 0%, #3A7F7F 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 
    0 4px 24px rgba(44, 95, 95, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden;
  cursor: pointer !important;
  text-decoration: none !important;
}

.cipher-glass-btn-solid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.8) 0%,
    rgba(102, 51, 153, 0.8) 50%,
    rgba(255, 215, 0, 0.8) 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cipher-glass-btn-solid:hover {
  transform: translateY(-3px) !important;
  box-shadow: 
    0 8px 32px rgba(44, 95, 95, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.cipher-glass-btn-solid:hover::before {
  opacity: 1;
}

/* Light variant (if you want a subtle secondary button) */
.cipher-glass-btn-light {
  position: relative;
  display: inline-block;
  padding: 16px 40px !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  background: rgba(44, 95, 95, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  overflow: hidden;
  cursor: pointer !important;
  text-decoration: none !important;
  backdrop-filter: blur(10px);
}

.cipher-glass-btn-light:hover {
  transform: translateY(-2px) !important;
  background: rgba(44, 95, 95, 0.3) !important;
  box-shadow: 0 6px 20px rgba(44, 95, 95, 0.2) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .cipher-glass-btn-solid {
    padding: 16px 40px !important;
    font-size: 17px !important;
  }
  
  .cipher-glass-btn-light {
    padding: 14px 32px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .cipher-glass-btn-solid {
    padding: 14px 32px !important;
    font-size: 16px !important;
  }
  
  .cipher-glass-btn-light {
    padding: 12px 28px !important;
    font-size: 15px !important;
  }
}
/* ========================================
   CIPHER CORE - CUSTOM CSS
   Copy this entire code block into:
   Elementor > Page Settings > Advanced > Custom CSS
   ======================================== */

/* -----------------------------------------
   HERO SYMBOL ANIMATION
   Creates the fade-in + scale effect
   ----------------------------------------- */
@keyframes symbolReveal {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-symbol {
    animation: symbolReveal 0.8s ease-out forwards;
}

/* -----------------------------------------
   SYMBOL GLOW EFFECT
   Adds soft coloured glow behind symbol
   Replace the colour with your archetype's primary
   ----------------------------------------- */
.hero-symbol img {
    filter: drop-shadow(0 0 30px rgba(176, 136, 96, 0.4));
}

/* -----------------------------------------
   BACKGROUND WATERMARK
   Large faded symbol in background
   ----------------------------------------- */
.cipher-watermark {
    position: fixed;
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
    width: 70vw;
    max-width: 800px;
    opacity: 0.04;
    z-index: 0;
    pointer-events: none;
}

/* Hide watermark on mobile */
@media (max-width: 767px) {
    .cipher-watermark {
        display: none;
    }
}

/* -----------------------------------------
   ACCESSIBILITY - FOCUS STATES
   Required for WCAG 2.2 AA compliance
   ----------------------------------------- */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #D4AF37;
    outline-offset: 2px;
}

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1A1A1A;
    color: #FFFFFF;
    padding: 8px 16px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* -----------------------------------------
   RESPONSIVE ADJUSTMENTS
   ----------------------------------------- */
@media (max-width: 767px) {
    /* Reduce hero height on mobile */
    .cipher-hero {
        min-height: 60vh;
    }
    
    /* Smaller symbol on mobile */
    .hero-symbol img {
        width: 120px;
        height: 120px;
    }
    
    /* Smaller section padding on mobile */
    .cipher-section {
        padding: 48px 20px;
    }
}

/* -----------------------------------------
   BUTTON HOVER EFFECTS
   ----------------------------------------- */
.cipher-cta-button {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cipher-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* -----------------------------------------
   LAYER SCORE BARS
   Animated fill effect
   ----------------------------------------- */
@keyframes fillBar {
    from {
        width: 0;
    }
}

.score-bar-fill {
    animation: fillBar 1s ease-out forwards;
}

/* -----------------------------------------
   CARD HOVER EFFECTS
   For Gifts & Shadows cards
   ----------------------------------------- */
.cipher-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cipher-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Begin Body';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://cipher-training.co.uk/wp-content/uploads/2025/10/Begin.woff') format('woff'),
		url('https://cipher-training.co.uk/wp-content/uploads/2025/10/Begin.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Things';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://cipher-training.co.uk/wp-content/uploads/2025/12/Things-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Things';
	font-style: italic;
	font-weight: normal;
	font-display: auto;
	src: url('https://cipher-training.co.uk/wp-content/uploads/2025/12/Things-Italic.ttf') format('truetype');
}
/* End Custom Fonts CSS */