@layer ff-styling, base, utilities, tailwind, font-import, custom;
@layer font-import {
  /* Manrope Font Imports */
  @font-face {
    font-family: "Manrope";
    src: url("../../../uploads/fonts/Manrope-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Manrope";
    src: url("../../../uploads/fonts/Manrope-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Manrope";
    src: url("../../../uploads/fonts/Manrope-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Manrope";
    src: url("../../../uploads/fonts/Manrope-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Manrope";
    src: url("../../../uploads/fonts/Manrope-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Manrope";
    src: url("../../../uploads/fonts/Manrope-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Manrope";
    src: url("../../../uploads/fonts/Manrope-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
}
@layer base {
  :root {
    /*Base COLOURS*/
    --col-dark: hsla(35, 1%, 9%, 1); /*#171716*/
    --col-light: hsla(38, 52%, 96%, 1); /*#6DCFF6*/
    --col-orange: #F89E1F; 
    --col-grey: hsla(0, 0%, 77%, 1); /*#F89E1F*/

    --col-accent: var(--col-orange);
    /* Orange shades */
    --col-orange-100: #EBC68F;
    --col-orange-200: #F89E1F;
    --col-orange-300: #D57D00;

    /*Overlay Variables*/
    /* Grey */
    --col-grey-60: hsla(38, 52%, 96%, 0.6);
    /* Dark */
    --col-dark-10: hsla(35, 1%, 9%, 0.1);
    --col-dark-20: hsla(35, 1%, 9%, 0.2);
    --col-dark-30: hsla(35, 1%, 9%, 0.3);
    --col-dark-40: hsla(35, 1%, 9%, 0.4);
    --col-dark-50: hsla(35, 1%, 9%, 0.5);
    --col-dark-60: hsla(35, 1%, 9%, 0.6);
    --col-dark-70: hsla(35, 1%, 9%, 0.7);
    --col-dark-80: hsla(35, 1%, 9%, 0.8);
    --col-dark-90: hsla(35, 1%, 9%, 0.9);
    --col-dark-100: hsla(35, 1%, 9%, 1);

    --col-light-10: hsla(38, 52%, 96%, 0.1);
    --col-light-20: hsla(38, 52%, 96%, 0.2);
    --col-light-30: hsla(38, 52%, 96%, 0.3);
    --col-light-40: hsla(38, 52%, 96%, 0.4);
    --col-light-50: hsla(38, 52%, 96%, 0.5);
    --col-light-60: hsla(38, 52%, 96%, 0.6);
    --col-light-70: hsla(38, 52%, 96%, 0.7);
    --col-light-80: hsla(38, 52%, 96%, 0.8);
    --col-light-90: hsla(38, 52%, 96%, 0.9);
    --col-light-100: hsla(38, 52%, 96%, 1);

    /*SIZE VARIABLES*/

    /*Font Sizes*/
    --fs--1: clamp(0.85rem, 0.8rem + 0.2051vw, .95rem);
    --fs-1: clamp(0.95rem, 0.9273rem + 0.2564vw, 1.35rem);
    --fs-2: clamp(1.0938rem, 1.0216rem + 0.3205vw, 1.4063rem);
    --fs-3: clamp(1.3672rem, 1.277rem + 0.4006vw, 1.7578rem);
    --fs-4: clamp(1.709rem, 1.5963rem + 0.5008vw, 2.1973rem);
    --fs-5: clamp(2.1362rem, 1.9954rem + 0.626vw, 2.7466rem);
    --fs-6: clamp(2.6703rem, 2.4942rem + 0.7825vw, 3.4332rem);
    /*font styles*/
    --ff-display: Manrope, "Segoe UI", -apple-system, BlinkMacSystemFont,
      "Helvetica Neue", Arial, sans-serif;
    --ff-text: Manrope, "Segoe UI", -apple-system, BlinkMacSystemFont,
      "Helvetica Neue", Arial, sans-serif;
    /*Text overlay*/
    --txt-shadow--light: 0px 0px 10px var(--col-txt--light);
    --txt-shadow--dark: 0px 0px 10px var(--col-txt--dark);

    /*Spacing sizes*/
    --space-3xs: clamp(0.5rem, 0.48rem + 0.08vw, 0.625rem);
    --space-2xs: clamp(0.625rem, 0.61rem + 0.1vw, 0.75rem);
    --space-xs: clamp(0.75rem, 0.73rem + 0.12vw, 0.875rem);
    --space-s: clamp(0.875rem, 0.8424rem + 0.1327vw, 1rem);
    --space-m: clamp(1.3125rem, 1.2636rem + 0.1991vw, 1.5rem);
    --space-l: clamp(1.75rem, 1.6848rem + 0.2654vw, 2rem);
    --space-xl: clamp(2.625rem, 2.5272rem + 0.3981vw, 3rem);
    --space-2xl: clamp(3.5rem, 3.3696rem + 0.5309vw, 4rem);
    --space-3xl: clamp(5.25rem, 5.0544rem + 0.7963vw, 6rem);
    /* Add a test comment */

    /*Button variables*/
    --btn-border-: 2px solid var(--col-brand--black);
    --btn-radius: 0.25rem;
    --btn-padding: 0.77em 1.5em;
    --btn-padding--s: 0.5em 1em;

    /*Section sizes*/
    --section-pad--ver: var(--space-3xl);
    --section-pad--hor: var(--space-l);
    /*Grid styles*/
    --grid-3xl: repeat(auto-fit, minmax(min(45rem, 100%), 1fr));
    --grid-2xl: repeat(auto-fit, minmax(min(40rem, 100%), 1fr));
    --grid-xl: repeat(auto-fit, minmax(min(35rem, 100%), 1fr));
    --grid-l: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
    --grid-m: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
    --grid-s: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    --grid-xs: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));

    --grid-3--gap: var(--space-m);
  }
  /*UTILITY CLASSES START*/
  html {
    scroll-behavior: smooth;
    font-size: 100%;
  } /*reset brx CSS */

  /* Font Styles */
  body {
    color: var(--col-dark);
    background: var(--col-light);
    line-height: 1.3;
    font-size: var(--fs-0);
    font-family: var(--ff-text);
  }
  /* Link text style */
  a { color: var(--col-orange); text-decoration: underline;}
  a.btn,
  .contact a{
    color: inherit;
    text-decoration: inherit;
  }
  .bg-orange a{
    color: inherit;
  }
  .swapper--service-content:nth-of-type(2n -1) a{
    color: var(--col-light);
  }

  /*Header Styles*/
  section {
    padding: var(--section-pad--ver) var(--section-pad--hor);
  }
  footer,
  header {
    padding: var(--space-s) var(--section-pad--hor);
  }
  .px-section {
    padding-left: var(--section-pad--hor);
    padding-right: var(--section-pad--hor);
  }
  .py-section {
    padding-bottom: var(--section-pad--ver);
    padding-top: var(--section-pad--ver);
  }
  /*BRIX STYLES - overwriting brix default styles*/
  .brxe-container,
  .container {
    width: 100%;
  } /*default section container class Brix Builder*/

  /*Font sizes*/
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--ff-display);
  }

  /*Heading Styles*/
  h1 {
    font-size: var(--fs-6);
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -0.02em;
  }
  h2 {
    font-size: var(--fs-5);
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -0.02em;
  }
  h3 {
    font-size: var(--fs-4);
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -0.02em;
  }
  h4 {
    font-size: var(--fs-3);
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -0.02em;
  }
  h5 {
    font-size: var(--fs-2);
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -0.02em;
  }
  h6 {
    font-size: var(--fs-1);
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -0.02em;
  }

  /*Colour Themes*/
  .bg-dark {
    background: var(--col-dark);
  }
  .bg-dark-80 {
    background: var(--col-dark-80);
  }
  .bg-light {
    background: var(--col-light);
  }
  .bg-grey {
    background: var(--col-grey);
  }
  .bg-orange {
    background: var(--col-orange-300);
  }
  

  /*Text Colours*/
  .text-dark {
    color: var(--col-dark);
  }
  .text-light {
    color: var(--col-light);
  }
  .text-light-50{
    color: var(--col-light-50)
  }
  .text-grey {
    color: var(--col-grey);
  }
  .text-orange {
    color: var(--col-orange);
  }
}

@layer custom {
  /*Text styles*/
  @layer buttons {
    .caption {
      font-size: var(--fs--1);
      font-style: normal;
      font-weight: 700;
      line-height: 140%; /* 16.8px */
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    /* Button styles */

    .btn,
    .brxe-button,
    .bricks-button,
    .ff-btn {
      text-transform: uppercase;
      color: var(--col-light);
      font-size: var(--fs--1);
      font-weight: 800;
      letter-spacing: 0.00813rem;
      background: var(--col-dark);
      text-align: center;
      padding: 1em 3em;

      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      flex-grow: 1;
      transition: .4s;
    }
    .btn:hover,
    .ff-button:hover,
    .nav__btn:hover {
      transform: translate(-3px,-3px);
      box-shadow: 3px 3px  0 var(--col-orange);
    }
    .btn--orange {
      background: var(--col-orange-300);
      color: var(--col-light);
    }
    @media only screen and (min-width: 992px){
      .nav .btn {
        background: var(--col-orange-300);
        color: var(--col-light);
      }
    }
    

    /* CTAs */
    .cta {
      display: flex;
      align-items: center;
      gap: var(--gap);
      transition: var(--transition);
      color: var(--col-dark);
      text-decoration: none;
      /* Font Styles */
      text-transform: uppercase;
      line-height: 1;
      letter-spacing: .06em;
      font-size: var(--fs--1);
      font-weight: 800;
      /* CTA Variables */
      --icon-size: var(--fs-3);
      --gap: var(--space-3xs);
      --transition: 0.5s ease-in-out;
    }
    .cta--light{
      color: var(--col-light);
    }

    .cta__txt {
      padding-bottom: 2px;
    }
    .cta--orange .cta__icon{
      color: var(--col-orange-200);
    }
    .cta__icon {
      height: var(--icon-size);
      width: var(--icon-size);
      transform: rotate(45deg);
      transition: var(--transition);
    }
    /* Hover state */
    .cta:hover {
      gap: calc(var(--gap) / 2);
    }
    .cta:hover .cta__icon {
      transform: rotate(0deg);
    }

  }
  @layer header {
    /* Header styles */
    header {
      background: linear-gradient(to bottom, black, transparent);
      position: fixed;
      transition: 0.4s ease-in-out;
      z-index: 10;
    }
    /* Header Scrolling */
    body:is(.scrolling) header {
      background: linear-gradient(
        to bottom,
        var(--col-dark),
        var(--col-dark-40),
        transparent
      );
      backdrop-filter: blur(10px);
    }
    header.scrolling > * {
    }    
  }
      /*===========MENU STYLES================*/
@layer navigation{
.nav{
  --fs-top: var(--fs--1);
  --fs-sub: ;
  --fw-top:  700;
  --fw-sub: 400;
  --tt-top: uppercase;
  --tt-sub: none; 
  --bg-top: none;
  --line-height: 1.2;
  --bg-sub: var(--col-orange-300);
  --bg-sub--mob:var(--col-dark-20);
  --bg-canvas:var(--col-orange-300);
  --size-toggle: 1.5em;
  
  /* navigation colours */
  --col-toggle: var(--col-light);
  --col-top: var(--col-light);
  --col-sub: var(--col-light);


  font-size: var(--fs-top);
  font-weight: 700;
  text-transform: uppercase;
  /* text-decoration: ; */
  letter-spacing: .02em;
  color: var(--col-top);
}
   /* menu link styles */
  .nav a {
    color: inherit;
    text-decoration: none;
    line-height: var(--line-height);
  }
/* ======= Mobile Menu ========= */
  /* Mobil menu toggle */
        .nav .bricks-mobile-menu-toggle{
          color: var(--col-toggle);
        }
        /* Nav wrapper */
        .nav .bricks-mobile-menu-wrapper{
          background: var(--bg-canvas);
          width: 100vw;
        }
        .nav .bricks-mobile-menu-wrapper:before{
          background: var(--bg-canvas);
        }
          /* ul wrapper */
          .nav .bricks-mobile-menu{
            margin-top: 8vh;
            transition: .4s ease-in-out;
          } 
            /* li wrapper */
            .nav.brxe-nav-menu .bricks-mobile-menu .menu-item{
              padding: 1.5em 0;
            }
            .nav .bricks-mobile-menu .open .sub-menu{
              margin-top: 2em;
              border-top: 2px solid var(--col-light);
            }
            /* Mobile Menu Button */
            .bricks-mobile-menu-wrapper .nav__btn{
              background: var(--col-dark)
            }
                 
  /* ========= Desktop Menu =========== */
@media only screen and (min-width: 992px){
.nav__btn{
  background: var(--col-orange-300);
  padding: .9em 2em;
}
/*Top menu Li*/
.nav .bricks-nav-menu > li { 
  display: flex;
}
.nav .bricks-nav-menu > li.open { 
  border-bottom: none;
}
/*===========SUBMENU=========*/
.sub-menu .menu-item {
    /*submenu li*/
    text-transform: var(--tt-sub);
    font-size: var(--fs-sub);
    background: var(--bg-sub);
    padding: 1.5em 0;
  }
}
.nav--primary .bricks-mobile-menu-toggle{
  color: var(--col-toggle);
}
}
  @layer footer {
    footer {
      background: var(--col-dark);
      color: var(--col-light);
    }
    footer > * > * {
      flex-grow: 1; /* stretch child elements to full container width*/
    }
    /* Footer Navigation Styles */
    footer .nav {
      font-size: var(--fs--1);
    }
    footer div:has(> .nav) {
      gap: var(--space-s);
    }
    /* divs with footer Nav menu and caption in it */
    footer .nav .menu-item {
      display: flex;
      flex-direction: column;
      margin-top: var(--space-2xs);
    }
    /* Footer logo style */
    footer .logo--desktop {
      display: none;
    }
    /* Footer map */
    footer .map {
      display: block;
    }
    /* Socials Styles */
    footer #whatsapp {
      margin-left: var(--space-l);
    }
    /* Footer Desktop Styles */
    @media only screen and (min-width: 992px) {
      footer .socials {
        order: 6;
      }
      footer .map {
        display: none;
      }
      footer .logo:not(.logo--desktop) {
        display: none;
      }
      footer .logo--desktop {
        display: inline-block;
        margin-left: auto;
      }
    }
  }
  @layer form {
    /* Allow child button to flex-grow */
    .ff_submit_btn_wrapper {
      display: flex;
    }
    label {
      color: inherit;
      text-transform: uppercase;
      font-size: var(--fs--1);
      letter-spacing: 0.02em;
      max-width: 100%;
    }
    input,
    textarea {
      background: transparent;
      border-radius: 0;
      font-size: var(--fs--1);
      display: flex;
    }
    .bg-dark input:focus,
    .bg-orange input:focus,
    .bg-dark-80 input:focus,
    .bg-dark-80 textarea:focus,
    .bg-orange textarea:focus,
    .bg-dark textarea:focus {
      color: var(--col-light);
    }
    .bg-dark input:not(:placeholder-shown),
    .bg-orange input:not(:placeholder-shown),
    .bg-dark-80 input:not(:placeholder-shown),
    .bg-dark-80 textarea:not(:placeholder-shown),
    .bg-dark textarea:not(:placeholder-shown),
    .bg-orange textarea:not(:placeholder-shown)
    {
      color: var(--col-light);
    }

    /* placeholder style */
    .bg-dark input::placeholder,
    .bg-orange input::placeholder,
    .bg-dark-80 input::placeholder,
    .bg-dark-80 textarea::placeholder,
    .bg-orange textarea::placeholder,
    .bg-dark textarea::placeholder 
    {
      color: var(--col-light-60) !important;
    }
    /* placeholder style */
    input::placeholder,
    textarea::placeholder {
      color: var(--col-dark-60) !important;
    }
/* Message field */
    textarea {
      border-width: 0 0 1px 0;
    }
    /* Placeholder Message filed */
    textarea::placeholder {
      transform: translateY(3em);
    }
/* ======== UPLOAD FIELD =========== */
    .ff_upload_btn{
      text-transform: none;
      background: #C4C4C4;
      display: flex;
      flex-direction: column;
      border: 2px solid var(--col-light);
      border-radius: .5em;
      padding: 5em 2em;
    }
    /* upload buttton text */
    .ff_upload_btn::after {
      content: "5 mb max";
      font-size: 0.8em;
    }
    .ff_upload_btn::before {
      content: url('/wp-content/uploads/2025/11/cloud_download.webp');
    }
/* ============== CHECKBOXES =============*/
    .ff_t_c,
    .ff-el-form-check-label {
      text-transform: none;
      display: flex;
      gap: .4em;

      cursor: pointer;
    }
    /* wrapper TC checkbox */
    .ff_tc_checkbox{
      padding: 0 !important;
      margin: 0;
      display: flex ;
    }
      /* checkboxes */
      input[type="checkbox"],
      input[type="radio"] {
        accent-color: var(--col-orange);
        display: flex;
        padding: 0;
        margin: 0;
        top: 0;
      }
      /* Check boxes on orange background */
      .bg-orange input[type="checkbox"],
      .bg-orange input[type="radio"] {
        accent-color: var(--col-dark);
    }

/* ======== FORM BUTTONS =========== */
      /* Dark grey form */
    .bg-dark-80 .ff-btn-submit.ff-btn,
    .bg-dark .ff-btn-submit.ff-btn {
      background: var(--col-orange-200);
    }
/* ====== STEP BY STEP ELEMENTS ========== */
    /* Navigation wrapper */
    .ff-step-container, .fluentform-step{
      overflow: visible;
    }
      .step-nav{
        display: flex;
        align-items: end;
        justify-content: space-between;
      }
      .step-nav button{
        flex-grow: 0
      }
      
/* ========== Progress Bar =============== */
    /* Progress bar wrapper */
    .ff-el-progress{
      background: var(--col-orange-100);
    }
      /* Progress bar  */
      .ff-el-progress-bar{
        background: var(--col-orange-200)
      }
/* ============== IMAGE CHECKBOX ============ */
    .ff-el-input--content:has(.ff-el-image-holder){
      display: flex;
      justify-content: center;
      gap: 1em;
    }
      .ff_el_checkable_photo_holders:has(.ff-el-image-holder){
        display: flex;
        justify-content: center;
        gap: 1em;
      } 
        .ff-el-image-holder.ff_item_selected{
          border: 3px solid var(--col-orange);
          border-radius: .3em;
          color: var(--col-orange)
        }
        .ff-el-image-holder:hover{
          background: var(--col-orange-100);
        } 
          /* Both child labels */
          .ff-el-image-holder, .ff-el-image-holder span{
            background: transparent;
            font-size: var(--fs-2);
            font-weight: 700;
            color: inherit;
          }
  }    

@layer breadcrumbs{
  .breadcrumbs{
    font-size: .85em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .bg-orange .breadcrumbs a {
    text-decoration: none;
    color: var(--col-light);
  }
}
@layer contact-elements {
  .contact-list {
    font-size: var(--fs--1);
    text-decoration: underline;
    gap: var(--space-2xs);
    border: 1px solid var(--col-light);
    border-width: 2px 0 0 0;
    padding-top: var(--space-xs);
  }

  .contact__item {
    --icon-size: calc(var(--fs--1) * 1.1);
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    position: relative;
    /*contain link pseudo element*/
  }

  #whatsapp {
    gap: 3px;
  }

  .contact__icon {
    height: var(--icon-size);
    width: var(--icon-size);
    display: none;
  }

  #whatsapp-icon {
    display: unset;
  }

  /* Make whole list item clickable */
  .contact__text::before {
    content: "";
    inset: 0;
    position: absolute;
  }

  @media only screen and (min-width: 992px) {
    .contact__icon:not(#whatsapp-icon) {
      display: flex;
    }
  }

}
@layer sections {
  /* Page Hero elements */
  .hero__nic-wrap{
    position: absolute;
    bottom: var(--space-m);
    left: 0;
    right: var(--space-m);
  }
    .hero__nic-logo {
      width: 10rem;
    }
      .hero__excerpt{
        font-weight: 600;
        text-shadow: 0 0 5px var(--col-dark);
      }

  /* Reason Why Section */
  .icon-card {
    --icon-size: var(--fs-3);
    display: flex;
    align-items: start;
  }
    .icon-card__title{
      margin-top: -.2em;
    }
    .icon-card__icon {
      height: var(--icon-size);
      overflow: visible;
    }

  /* Review styles */
  .reviews{
    --icon-size: var(--fs--1);
  }
  .review__stars{
    gap: 2px;
  }
  .review__star {
    fill: var(--col-orange);
    height: auto;
    width: var(--icon-size);
  }
  .review__name{
    font-weight: bold;
  }
  /* Review box with Google & TP logos */
  .review-box__img{
    width: 2rem;
  }
  .review-box__number{
    font-weight: 800;
  }
  /* Project Card */
  .project {
    align-self: stretch;
  }
  .project:before {
    position: absolute;
    content: "";
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, var(--col-dark-70), transparent);
  }
  .project__content {
    border-bottom: 1px solid var(--col-light);
  }
  /* trust section */
  .trust{
    --icon-size: var(--fs-4);
  }
  .trust__icon{
    height: var(--icon-size);
    width: var(--icon-size);
  }
  @media only screen and (min-width: 992px){
    .trust h2{
      font-size: var(--fs-6);
    }
  }
}
@layer toc {
  /* ===== TOC Container ===== */
  .toc {
    position: fixed;
    bottom: 0;
    z-index: 5;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-xs);
    background: var(--col-light);
    box-shadow: 0 0 10px 0 var(--col-dark-50);
  }
  .toc a{ 
    color: var(--col-dark);
    text-decoration: none;
  }
  /* ===== TOC Buttons ===== */
  .toc button {
    background: transparent;
    display: flex;
    justify-content: space-between;
  }
  .toc.active .toc__icon{
    transform: rotate(90deg);
  }

  /* ===== List Reset ===== */
  .toc ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  /* ===== Main TOC List (Collapsed) ===== */
  .toc__ul {
    /* position: absolute; */
    max-height: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    list-style-type: none;
    transition: 0.4s ease-in-out;
  }

  /* Main TOC List (Expanded) */
  .toc.active .toc__ul {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-s) 0;
    max-height: 100vh;
    max-width: 100vh;
    opacity: 1;
  }

  /* ===== TOC Header Wrapper ===== */
  .toc__ul .toc__header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  /* ===== Nested Lists (H3 children) ===== */
  /* Nested List (Collapsed) */
  .toc li ul {
    /* position: absolute;  */
    overflow: hidden;
    max-height: 0;
    max-width: 0;
    margin-left: 0.7em;
    opacity: 0;
    transition: 0.4s ease-in-out;
    gap: .15em;
    display: flex;
    flex-direction: column;
    padding: .2em 0;
  }
  .toc li.view > a, .toc li.view .toc__header> a{
    color: var(--col-orange);
  }
  /* Nested List (Expanded) */
  .toc li.active ul, 
  .toc li.view ul,
  .toc li ul:has(li.view) {
    position: static;
    max-height: 100vh;
    max-width: 100vw;
    width: auto;
    opacity: 1;
  }

  /* ===== Toggle Button (Cross Icon) ===== */
  /* Button Container */
  .toc ul li button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1em;
    min-height: 1em;
    transition: 0.4s ease-in-out;
  }

  /* Button Rotation (Expanded) */
  .toc li.active button {
    transform: rotate(540deg);
  }

  /* Cross Bars */
  .toc ul li button div {
    position: absolute;
    width: 1em;
    height: 0.2em;
    background: var(--col-dark);
    transition: 0.4s ease-in-out;
  }

  /* Vertical Bar (Collapsed) */
  .toc ul li:not(.active) button div:last-of-type {
    transform: rotate(90deg);
  }
  /* toc desktop */
  @media only screen and (min-width: 992px){
    .toc{
      position: sticky;
      top: 8rem;
      display: flex;
      flex-direction: column-reverse;
    }
    .toc.active .toc__icon{
      transform: rotate(-90deg);
    }
  }
}
@layer blog{
  /* ======= BLOG & CLIENT ZONE STYLES =========== */
.single-post .hero__title{
  font-size: var(--fs-5);
}
.wp-content h2{font-size: 1.7em;}
.wp-content h3{font-size: 1.5em;}
.wp-content h4{font-size: 1.3em;}
.wp-content h5{font-size: 1.1em;}
.wp-content .wp-block-heading{
  margin: 1.5rem 0 .4em 0;
}
.wp-content p{
  line-height: 1.5;
  margin: 0 0 .5em 0;
}
.wp-content ul{
  margin: 1em 0;
  padding:  0 0 0 1.2em;
}
  .wp-content ul li{
    margin: .3em 0;
  }
  /* Default gutenberg styles */
  .wp-block-media-text{
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 1.5rem 0 .4em 0;
  }
    .wp-block-media-text > *{
      margin: 0;
    }
      .wp-block-media-text .wp-block-heading{
        margin: 0 0 .2em 0;
      }
    .wp-block-media-text__content{
      order: -1;
    }
  @media only screen and (min-width: 992px){
    .wp-block-media-text{
      display: flex;
      flex-direction: row;
      gap: var(--space-m);
    }
      .wp-block-media-text > *{
        width: 100%;
        margin: 1em 0
      }
      .wp-block-media-text__content{
        order: unset;
      }
        .wp-block-media-text .wp-block-heading{
          margin-top:0;
          font-size: var(--fs-4)
        }
  }
}
@layer services{
/*==================== SERVICES SINGLE CPT ================= */
  .swapper--service-content:nth-of-type(2n -1){
    background: var(--col-orange-300);
    color: #fff
  }
  .swapper--service-content h3{
    margin: 1em 0 .5em 0 ;
  }
  .swapper--service-content p{
    padding-bottom: .5em  ;
  }
  .swapper--service-content li{
    margin-bottom: .2em  ;
  }
@media only screen and (min-width : 992px){
  .swapper--service-content:nth-of-type(2n -1) .columns > *:first-child{
    
  }
}

}
@layer faq {
  .faq{
    /* margin: var(--space-m) 0; */
    padding: var(--space-m) 0;
    border-bottom: 1px solid var(--col-dark-40);
  }
  .faq.brx-open{
    padding: var(--space-m);
    background: var(--col-orange-300);
    color: var(--col-light);
  }
    .faq.brx-open a{
      color: var(--col-light);
      text-decoration: underline;
    }
}
@layer miscellaneous{
.hover-orange:hover{
  color: var(--col-light);
  background: var(--col-orange-300);
  box-shadow: 0 0 10px var(--col-dark-50);
  transform: translateY(-4px);
  padding: var(--space-m)
}
  .hover-orange:hover .cta,
  .hover-orange:hover .cta__icon{
    color: var(--col-light);
  }
.seperator{
  position: relative;
}
.seperator::after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background: var(--col-orange-200);
  height: 3px;
  width: 25%;
  transform: translateY(-.5em);
}
  /* Base table setup */
table {
    table-layout: auto; /* Change from fixed to allow flexibility */
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    border: 1px solid #ddd;
}

/* First column takes more space */
th:nth-child(1), 
td:nth-child(1) {
    width: 80%; /* Takes 70% of available space */
}

/* Second column takes less space */
th:nth-child(2), 
td:nth-child(2) {
    width: 20%;
    white-space: nowrap; /* Prevents price from wrapping */
}
.border-orange{
  border: 1px solid var(--col-orange)
}
.border-orange-300{
  border: 3px solid var(--col-orange-300);
}
.border-dark-30{
  border: 1px solid var(--col-dark-30);
}

}
@layer client-zone{
  .nav--client-zone ul{
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
  }
    .nav--client-zone li{
      padding: .5em 1em;
      border: 1px solid var(--col-light)
    }
  /* ============= Useful Contacts ================= */
  .useful-contacts__title{
    border-bottom: 1px solid var(--col-light);
  }
  .useful-contact{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: right;
  }
  @media only screen and (max-width: 550px){
    .useful-contact{
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      text-align: left;
    }
    .useful-contact > *{
      padding: 0
    }
  }
  /* Box frame */
  .box-frame{
    position: relative;
    overflow: visible;
  }
}
}