/*
    Theme Name:   Custom Theme
    Template:     astra
    Version:      1.0.0
    */

    /* ─── DESIGN TOKENS ─────────────────────────────────── */
    :root {

    /* Primary */
    --primary-500: #003F48;
    --primary-300: #009CB2;
    --primary-100: #EAFCFE;

    /* Secondary */
    --secondary-500: #FFBD77;
    --secondary-300: #FFEEDB;
    --secondary-100: #FFF6EE;

    /* Neutral */
    --neutral-900: #0A171D;
    --neutral-800: #2A2F32;
    --neutral-700: #57595A;   
    --neutral-600: #6F7E85;
    --neutral-500: #A6B0B5;
    --neutral-400: #DEE1E3;
    --neutral-300: #003F48;
    --neutral-200: #FBF4E9;
    --neutral-100: #F9F5EE;
    --white:        #F7F4F0;

    /* Success */
    --success-500: #0AC20A;
    --success-300: #82E382;
    --success-100: #DFECDF;

    /* Error */
    --error-500: #C70505;
    --error-300: #E67F7F;
    --error-100: #EDDEDE;

    /* Info */
    --info-500: #0FBDBD;
    --info-300: #009CB2;
    --info-100: #EAFCFE;

    /* Warning */
    --warning-500: #C79605;
    --warning-300: #E6CC7F;
    --warning-100: #EDE9DE;

    /* Semantic aliases */
    --color-bg:      var(--neutral-100);
    --color-text:    var(--neutral-900);
    --color-heading: var(--primary-500);
    --color-accent:  var(--secondary-500);
    --color-border:  var(--neutral-400);

    /* Typography */
    --font-sans: 'Space Grotesk', sans-serif;
    --font-mono: 'Space Mono', monospace;

    /* Heading scale */
    --h1-size:   61.04px;
    --h1-weight: 700;
    --h2-size:   48.83px;
    --h2-weight: 600;
    --h3-size:   39.06px;
    --h3-weight: 600;
    --h4-size:   31.25px;
    --h4-weight: 600;
    --h5-size:   25px;
    --h5-weight: 600;
    --heading-line-height: 1.25;

    /* Body scale */
    --p1-size: 16px;
    --p2-size: 14px;
    --p3-size: 12px;
    --body-line-height: 1.5;

    /* Weights */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold:  600;
    --weight-bold:    700;

    /* Label scale */
    --l1-size: 20px;
    --l2-size: 16px;
    --l3-size: 14px;
    --l4-size: 12px;
    --label-line-height: 1.25;

    /* Layout */
    --nav-h: 64px;
    }

    /* ─── RESET ──────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    
    html, body {
      background-color: #ffffff;
      /* This stays visible during the page transition gap */
    }

    html, body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    }

    /* ─── BASE TYPOGRAPHY ────────────────────────────────── */
    h1 { font-size: var(--h1-size) !important; font-weight: var(--h1-weight) !important; line-height: var(--heading-line-height); color: var(--color-heading); font-family: var(--font-sans); }
    h2 { font-size: var(--h2-size) !important; font-weight: var(--h2-weight) !important; line-height: var(--heading-line-height); color: var(--color-heading); font-family: var(--font-sans); }
    h3 { font-size: var(--h3-size) !important; font-weight: var(--h3-weight) !important; line-height: var(--heading-line-height); color: var(--color-heading); font-family: var(--font-sans); }
    h4 { font-size: var(--h4-size) !important; font-weight: var(--h4-weight) !important; line-height: var(--heading-line-height); color: var(--color-heading); font-family: var(--font-sans); }
    h5 { font-size: var(--h5-size) !important; font-weight: var(--h5-weight) !important; line-height: var(--heading-line-height); color: var(--color-heading); font-family: var(--font-sans); }

    p { font-size: var(--p1-size); font-weight: var(--weight-regular); line-height: var(--body-line-height); color: var(--color-text); }

    /* ─── HIDE ASTRA DEFAULT HEADER/FOOTER ───────────────── */
    body.page-template-front-page .site-header,
    body.page-template-front-page .site-footer,
    body.home .site-header,
    body.home .site-footer,
    body.front-page .site-header,
    body.front-page .site-footer {
    display: none !important;
    }

    body {
      overflow-x: hidden;
    }
    
    .main-container {
      overflow-x: hidden;
    }
    
    a:focus {
        color: var(--primary-500);
        outline-color: curentcolor;
        outline: thin solid;
        outline-offset: 8px;
    }

    /* ─── NAVBAR ─────────────────────────────────────────── */
    .logo-img {
    width: 200px;
    height: auto;
    }

    /* ─── NAV ITEMS ─────────────────────────────────────────── */
    .navbar-items a {
    color: var(--primary-500);
    font-size: var(--l1-size);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: color 0.2s ease;
    }

    .navbar-items a:hover {
    color: #9C6234;
    }

    .navbar-items a.current-menu-item {
    color: #9C6234;
    }
    
    .main-nav-desktop {
        order: -1;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    /* ─── HAMBURGER MENU ─────────────────────────────────── */
    .hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--primary-500);
    padding: 8px 16px;
    }

    .mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: auto; 
    min-height: 0;
    background: var(--neutral-100);
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 1.5rem;
    box-sizing: border-box; 
    padding: 6rem 2rem;
    transition: none !important;
    }

    .mobile-nav.open {
    right: 0;
    flex-direction: column-reverse;
    }

    .mobile-nav--header {
    order: -1; /* This forces the close button/logo to the TOP of the flex column */
    width: 100%;
    display: flex;
    flex-direction: column !important; /* Keep logo and X on same line */
    align-items: center;
    margin-top: 0;
    gap: 1.5rem;
    }

    .mobile-nav--identity {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0;
    }

    .mobile-nav--name {
    font-family: var(--font-sans);
    font-size: var(--h3-size) !important;
    font-weight: var(--weight-bold) !important;
    color: var(--primary-500);
    line-height: 1.1;
    }

    .mobile-nav--role {
    font-size: var(--p1-size);
    color: var(--neutral-600);
    line-height: 1.4;
    }

    .mobile-nav--close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--primary-500);
    padding: 4px;
    margin-top: 4px;
    }

    .mobile-nav--links {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 3rem;
    }

    .mobile-nav--links a {
    font-size: var(--h2-size) !important;
    font-weight: var(--weight-semibold);
    color: var(--primary-500);
    text-decoration: none;
    padding: 1rem 0;
    transition: color 0.2s ease;
    display: block;
    text-align: center;
    }

    .mobile-nav--links a:hover,
    .mobile-nav--links a.current-menu-item {
    color: var(--primary-300);
    }

    .mobile-logo-img {
    width: 200px;
    height: auto;
    }

    .mobile-nav--overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    }

    .mobile-nav--overlay.open {
    opacity: 1;
    pointer-events: all;
    }
    
    .mobile-nav--links a,
        #mobile-nav-close,
        .mobile-nav--identity {
          opacity: 0;
          pointer-events: none;
    }

    @media (max-width: 768px) {
    .hamburger-btn {
        display: block;
    }
    .navbar-items {
        display: none;
    }
    }

    /* ─── LAYOUT ─────────────────────────────────────────── */
    .page-shell {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .main {
        display: flex;
        flex: 1;
        background-color: var(--white);
    }
    
    .main > .main-container:only-child {
        width: 100%;
    }
    
    .main-container {
        display: flex;
        flex-direction: column;
    }
    
    .main-container{
        width: 66.666666%;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }
    
    
    .main-container::-webkit-scrollbar {
    width: 0px;
    }

    .sidebar::-webkit-scrollbar {
    width: 0px;
    }
    
   
    #page-work.main-container {
        width: 100% !important;
        max-width: 100%;
    }
    
    #page-work .project-filter{
        .project-filter--header-wrapper{
            display: none;
        }
        
        .project-filter--header{
            justify-content: flex-end;
        }
    }
    
    body.page-template-page-work .main {
        display: block;
    }
    
    body.page-template-page-work .main-container {
        width: 100% !important;
    }

    .sidebar {
        width: 33.333333%;
        height: 100vh;
        position: sticky;
        top: 0;
        min-height: 100vh;
        background-color: var(--secondary-500);
        overflow-y: auto;
    }

    /* ─── COMPONENTS ─────────────────────────────────────────── */
    /* ─── BUTTONS ─────────────────────────────────────────── */

    /* Base — shared styles all buttons get */
    .btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: var(--weight-bold);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    }

    /* Sizes */
    .btn-lg  { font-size: var(--l2-size); padding: 14px 28px; }
    .btn-reg { font-size: var(--l3-size); padding: 10px 20px; }
    .btn-reg-text{ font-size: var(--l3-size); padding: 10px 0px;}
    .btn-sm { font-size: var(--l3-size); padding: 8px 14px; }

    /* Variants */
    .btn-primary   { background: var(--primary-500);   color: var(--white);       border-color: var(--primary-500);   }
    .btn-secondary { background: var(--secondary-500); color: var(--primary-500); border-color: var(--secondary-500); }
    .btn-ghost     { background: transparent;          color: var(--primary-500); border-color: var(--primary-500);   }
    .btn-text      { background: transparent;          color: var(--primary-500); border-color: transparent;          }
    .btn-pill      { background: transparent;          color: var(--primary-500); border: 2px dashed var(--primary-500); padding: 0px 4px; cursor:none; pointer-events: none;}
    /* Hover states */
    .btn-primary:hover   { background: var(--primary-300);   border-color: var(--primary-300);  color: var(--primary-100); }
    .btn-secondary:hover { background: var(--secondary-300); border-color: var(--secondary-300); color: var(--primary-500) !important; }
    .btn-ghost:hover     { background: var(--primary-500);   color: var(--white); border-color: var(--primary-500) !important;                }
    .btn-text:hover      { color: var(--primary-300);                                            }
    .btn-pill:hover      { background-color: var(--primary-500) !important; color: var(--neutral-100); border-color: var(--primary-500); }

    /* ─── DIVIDER ─────────────────────────────────────────── */
    .divider-dashed {
    border: none;
    height: 2px;
    background-color: transparent;
    background-image: repeating-linear-gradient(
        to right,
        rgba(0,63,72,0.35) 0px,
        rgba(0,63,72,0.35) 8px,
        transparent 8px,
        transparent 16px
    );
    margin: 1.5rem 0;
    }

    /* ─── ICON BLOCK ─────────────────────────────────── */
    .icon-blocks-box{
        .icon{
            background-color: var(--primary-500);
            color: var(--white);
        }

        .text-container{
            display: flex;
            flex-direction: column;
            background-color: var(--primary-100);
            border-left: none;

            span.title{
                font-size: var(--l2-size);
                font-weight: 700;        
            }
            
            span:nth-child(2){
                font-size: var(--l3-size);
            }
        }
    }

    /* ─── BANNER - HOMEPAGE ─────────────────────────────────────────── */
    /* ─── BANNER ─────────────────────────────────────────── */
    .banner-bio {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .banner-stat__number {
        background: transparent;
        color: var(--primary-500);
        font-size: 24px;
        font-weight: var(--weight-bold);
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
        width: 64px;
        height: 64px;
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    }

    .banner-stat__label {
    font-size: var(--p2-size);
    color: var(--primary-500);
    font-weight: var(--weight-semibold);
    }
    
    /* ─── PROJECT FILTER ─────────────────────────────────── */
    .filter-separator {
    color: var(--neutral-800);
    letter-spacing: 2px;
    }

    .filter-select {
    border: 2px solid var(--primary-500);
    border-radius: 0px;
    padding: 10px 24px 10px 16px;
    height: 45px;
    font-size: var(--p2-size);
    font-weight: var(--weight-medium);
    color: var(--primary-500);
    background: var(--color-bg);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23003F48' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    }

    /* ─── PROJECT CARD ───────────────────────────────────── */
    .project-card--title {
    color: var(--primary-500);
    }

    .project-card--description {
    color: var(--neutral-900);
    }

    /* ─── LIST/GALLERY BUTTON ─────────────────────────────────────── */
    .project-card--image {
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.4s ease;
    max-height: 1000px;
    opacity: 1;
    position: relative;
    
        &::before{
            content: '';
            background-color: rgba(255, 246, 238, .5);
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: block;
            position: absolute;
            z-index: 1; 
            transition: background-color 0.3s ease; 
            pointer-events: none; /
        }
    }

    .project-card--image.hidden {
    max-height: 0;
    opacity: 0;
    }
    
    .project-card:not(:has(.project-card-status)):hover .project-card--image::before,
    .project-card--image:hover::before{
        background-color: rgba(255, 246, 238, 0);
    }
    
    
    .project-card:has(.project-card-status) .project-card--image a{
        pointer-events: none;
        cursor: none;
    }
    
    .project-card:has(.project-card-status) .project-card--image:hover::before {
        background-color: rgba(255, 246, 238, 0.5) !important;
        
    }
    /* ─── QUICK VIEW ─────────────────────────────────────── */
    .quickview-title {
    font-size: var(--h4-size) !important;
    color: var(--primary-500);
    }

    .quickview-description {
    font-size: var(--p2-size) !important;
    color: var(--primary-500);
    opacity: 0.75;
    }

    /* ─── SIDEBAR ─────────────────────────────────────────── */
    /* ─── SIDEBAR - HOMEPAGE CONTENT ────────────────────────────────── */
    .sidebar-header h2 {
    color: var(--primary-500);
    }

    .process-step__title {
    color: var(--primary-500);
    margin-bottom: 0.5rem;
    }

    .process-step__body {
    color: var(--neutral-900);
    }

    .sidebar-footer-text h5 {
    color: var(--primary-500);
    }

    /* ─── SIDEBAR - CONTACT CONTENT ────────────────────────────────── */
    .faq-items button.faq-btn{
        box-shadow: none;
        padding: 14px 10px;
        background-color: var(--white);
    }
    
    .faq-items button.faq-btn:hover,
    .faq-items button.faq-btn:focus,
    .faq-items button.faq-btn:active{
        color: var(--primary-500);
    }

    .faq-items .faq-content.grid-rows-\[1fr\] ~ button.faq-btn{
        border-bottom-right-radius: 1px solid var(--secondary-300);
    }

    .faq-items .faq-content.grid-rows-\[0fr\] > div{
       visibility: hidden;
    }

    .faq-items .faq-content.grid-rows-\[1fr\] > div{
        padding: 0px .875rem .875rem .875rem;
        background-color: var(--white);
        visibility: visible;
    }
    /* ─── FOOTER  ─────────────────────────────────────────── */
    /* ─── TESTIMONIAL CAROUSEL (SWIPER) ──────────────────── */

   .testimonial-swiper {
        position: relative;
        padding: 20px 0 3rem !important;
       
    }
    .testimonial-swiper-container {
        padding-left: 0; 
        overflow: hidden;
        position: relative;
    }

    .testimonial-swiper .swiper-wrapper {
        display: flex;
        margin-left: 6rem;
    }

    .testimonial-swiper .swiper-slide {
        height: auto;
        display: flex;
    }

    .testimonial-card {
        background-color: var(--primary-100);
        padding: 2.5rem;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.3s ease;
    }

    .testimonial-card i.fa-quote-left,
    .testimonial-card i.fa-quote-right {
        color: var(--primary-300);
        font-size: 1.5rem;
        opacity: 0.6;
    }

    .testimonial-card h3,
    .testimonial-author h3{
        font-size: var(--p1-size) !important;
        margin-bottom: 2px !important;
    }

    .testimonial-card .author-company {
        font-size: var(--p3-size);
        color: var(--neutral-600);
        font-family: var(--font-mono);
    }

   .swiper-button-prev,
    .swiper-button-next {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    width: 40px !important;
    height: 40px !important;
    background-color: var(--white) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    z-index: 100 !important;
    margin-top: 0 !important;
    }

   .swiper-button-prev {
    left: calc(6.33% - 20px) !important;
    }

    .swiper-button-next {
    right: calc(7.33% - 20px) !important;
    }

    .swiper-button-prev:after,
    .swiper-button-next:after {
    font-size: 14px !important;
    font-weight: 900;
    color: var(--primary-500);
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: var(--primary-300) !important;
        color: var(--neutral-100) !important;
    }

    .swiper-button-prev:hover::after,
    .swiper-button-next:hover::after{
        color: var(--neutral-100) !important;
    }

    .testimonial-swiper .swiper-pagination-bullet {
        background: var(--neutral-500) !important;
        opacity: 0.5;
        width: 8px;
        height: 8px;
        transition: all 0.3s ease;
    }

    .testimonial-swiper .swiper-pagination-bullet-active {
        background: var(--primary-300) !important;
        opacity: 1;
        width: 20px;
        border-radius: 4px;
    }

    @media (max-width: 768px) {
        .swiper-button-prev, 
        .swiper-button-next {
            display: none !important;
        }
    }
/* ─── PAGES ─────────────────────────────────── */

/* ─── PAGE - WORK ─────────────────────────────────── */
#page-work,
#project-single{

    .navbar.main-nav-desktop .navbar-wrapper .navbar-items{
        justify-content: flex-end;
        gap: 4rem;
    }
}    



#page-work{
    
    .quick-view-btn{
        display: none;
    }
    
    .project-card--header-wrapper{
        align-items: flex-end;
    }
}

#project-single{
    
    .product-image-item p,
    .image-row-section p{
        border-left: 4px solid var(--primary-500);
        padding-left: .25rem;
    }
    
    .deliverables ul{
        list-style: none !important;
    }
    
}

/* ─── PAGE - ABOUT─────────────────────────────────── */
#page-about .banner-title{
    font-size: var(--h3-size) !important;
    display: flex;
    align-items: flex-end;
}

@media screen and (max-width: 900px){
    #page-about .banner-content-header{
        flex-direction: column;
        gap: 1.5rem;
    }
    
    #page-about .banner-title{
        font-size: var(--h4-size) !important;
        width: 100%;
        align-items: center;
    }
}

/* ─── PAGE SINGLE───────────────────────────────────── */
.product-heading-title{
    font-size: var(--h3-size) !important;
}

/* ─── PAGE - CONTACT ─────────────────────────────────── */
/* ─── CONTACT FORM ───────────────────────────────────── */
#page-contact .banner{
    padding-bottom: 0;
}

.contact-title {
  font-size: var(--h2-size) !important;
  color: var(--primary-500);
}

.contact-subtitle {
  font-size: var(--p1-size);
  color: var(--neutral-700);
  line-height: 1.7;
}


.wpforms-field-container .wpforms-field {
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
}


.wpforms-field-label {
  font-size: var(--l3-size) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--primary-500) !important;
  margin-bottom: 0.5rem !important;
}


.wpforms-field-container input[type="text"],
.wpforms-field-container input[type="email"],
.wpforms-field-container input[type="tel"],
.wpforms-field-container textarea {
  width: 100% !important;
  border: 2px solid var(--neutral-400) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-size: var(--p2-size) !important;
  font-family: var(--font-sans) !important;
  color: var(--primary-500) !important;
  background: var(--white) !important;
  transition: border-color 0.2s ease !important;    
  outline: none !important;
}


.wpforms-field-container input:focus,
.wpforms-field-container textarea:focus {
  border-color: var(--primary-300) !important;
  box-shadow: none !important;
}


.wpforms-field-container textarea {
  min-height: 160px !important;
  resize: vertical !important;
}

/* Checkboxes */
.wpforms-field-checkbox label {
  font-size: var(--p2-size) !important;
  color: var(--neutral-800) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.wpforms-field-checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--primary-500) !important;
  cursor: pointer !important;
}


.wpforms-submit {
  background: var(--primary-500) !important;
  color: var(--white) !important;
  border: 2px solid var(--primary-500) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--l3-size) !important;
  font-weight: var(--weight-bold) !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
}

.wpforms-submit:hover {
  background: var(--primary-300) !important;
  border-color: var(--primary-300) !important;
}


.wpforms-field-row,
.wpforms-container input.wpforms-field-medium{
  max-width: 100% !important;
}

.wpforms-form {
  overflow: visible !important;
}


div.wpforms-container-full .wpforms-confirmation-container-full,
div.wpforms-container-full .wpforms-confirmation-container-full p:last-child{
  opacity: 1 !important;
  visibility: visible !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full{
    background-color: var(--secondary-300) !important;
    border: 2px dashed var(--primary-500) !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full p:last-child{
    font-size: var(--l1-size);
}

/* ─── Additional Pages ───────────────────────────────────── */


/* ─── 404 PAGE ────────────────────────────────────────────── */

 
/* =============================================================
   TJ Digital — Additional Pages CSS
   Add this block to your style.css file
   ============================================================= */


/* ─── 404 PAGE ────────────────────────────────────────────── */

.error-hero {
  min-height: calc(100vh - var(--nav-h));
  background-color: var(--color-bg);
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.error-hero__inner {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  animation: error404FadeUp 0.55s ease both;
}

@keyframes error404FadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.error-hero__illustration {
  width: clamp(200px, 35vw, 400px);
  height: auto;
  display: block;
  margin: 0 auto 40px;
}

.error-hero__title {
  font-family: var(--font-sans);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  color: var(--color-heading);
  line-height: var(--heading-line-height);
  margin: 0 0 20px;
}

/* Amber underline accent on the highlighted word */
.error-hero__highlight {
  position: relative;
  display: inline-block;
}

.error-hero__highlight::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--color-accent);
  border-radius: 4px;
  z-index: -1;
}

.error-hero__text {
  font-family: var(--font-sans);
  font-size: var(--p1-size);
  color: var(--neutral-700);
  line-height: var(--body-line-height);
  margin: 0 0 40px;
}

.error-hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.error-hero__nav {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.error-hero__nav a {
  font-family: var(--font-sans);
  font-size: var(--p2-size);
  color: var(--neutral-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.error-hero__nav a:hover {
  color: var(--primary-500);
}


/* ─── LEGAL PAGES (Privacy Policy & Terms) ───────────────── */

.legal-body {
  background-color: var(--color-bg);
  padding: 64px 24px 96px;
}

.legal-container {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 768px) {
  .legal-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .legal-sidebar {
    position: static !important;
  }
}

/* ── Sticky sidebar TOC */
.legal-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.legal-toc__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--p3-size);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-600);
  margin-bottom: 12px;
}

.legal-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--color-border);
}

.legal-toc li {
  margin: 0;
}

.legal-toc a {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--p2-size);
  color: var(--neutral-700);
  text-decoration: none;
  padding: 5px 0 5px 16px;
  border-left: 2px solid transparent;
  margin-left: -2px;
  line-height: 1.4;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.legal-toc a:hover,
.legal-toc a.is-active {
  color: var(--primary-500);
  border-color: var(--primary-300);
}

/* ── Content area */
.legal-content h2 {
  font-family: var(--font-sans);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  color: var(--color-heading);
  line-height: var(--heading-line-height);
  margin: 56px 0 16px;
  padding-top: 56px;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.legal-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-content h3 {
  font-family: var(--font-sans);
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  color: var(--color-heading);
  margin: 28px 0 10px;
}

.legal-content p,
.legal-content li {
  font-family: var(--font-sans);
  font-size: var(--p1-size);
  color: var(--neutral-800);
  line-height: var(--body-line-height);
  margin: 0 0 16px;
}

.legal-content ul {
  padding-left: 24px;
  margin: 0 0 16px;
}

.legal-content ul li {
  margin-bottom: 8px;
}

.legal-content a {
  color: var(--primary-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.legal-content a:hover {
  color: var(--primary-500);
}

/* ── Info callout */
.legal-callout {
  background: var(--primary-100);
  border-left: 4px solid var(--primary-300);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 0 0 32px;
}

.legal-callout p {
  margin: 0;
  font-size: var(--p2-size);
  color: var(--primary-500);
}

/* ── Contact info card */
.legal-contact-card {
  background: var(--neutral-100);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 12px;
  margin-bottom: 24px;
}

.legal-contact-card p {
  margin: 4px 0;
}

.legal-contact-card strong {
  color: var(--color-heading);
}

/* ── Last updated line */
.legal-updated {
  font-family: var(--font-mono);
  font-size: var(--p3-size);
  color: var(--neutral-600);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

/* ─── Responsive───────────────────────────────────── */

@media (max-width: 768px) {
  .wpforms-field-container .wpforms-field {
    width: 100% !important;
    float: none !important;
  }

  .wpforms-field-container input[type="text"],
  .wpforms-field-container input[type="email"],
  .wpforms-field-container input[type="tel"],
  .wpforms-field-container textarea {
    width: 100% !important;
  }

  /* WPForms uses inline half-width classes — override them */
  .wpforms-field.wpforms-one-half,
  .wpforms-field.wpforms-one-half.wpforms-first {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  .wpforms-submit-container {
    text-align: center;
  }

  .wpforms-submit {
    width: 100% !important;
  }

  /* Fix scrolling on WPForms fields */
  .wpforms-field-container,
  .wpforms-field,
  .wpforms-form {
    overflow: visible !important;
  }

  /* Fix any horizontal scroll on the form wrapper */
  .contact-form--wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
  }

}
/* ─── RESPONSIVE 1024px - 1440px ────────────────────── */
@media (max-width: 1440px) {

  /* Sidebar headings scale down */
  .process-title {
    font-size: var(--h2-size) !important;
  }

  .process-step__title {
    font-size: var(--l1-size) !important;
  }

  /* Sidebar content padding */
  .sidebar-content--wrapper {
    padding: 1.5rem 4rem;
  }

  /* Nav links scale */
  .navbar-items a {
    font-size: var(--l2-size);
  }

  .logo-img {
    width: 160px;
  }
  
  .icon-blocks-box.grid-cols-2{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 1025px){
    .project-banner{
        .brief-section p{
            width: calc(100% - 10%);
        }
    }
}

/* ─── RESPONSIVE 1024px ──────────────────────────────── */
@media (max-width: 1024px) {

  .main {
    flex-direction: column;
  }

  .main-container {
    width: 100%;
    height: auto;
    position: relative;
    overflow-y: visible;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    min-height: unset;
    overflow-y: visible;

    .sidebar-content--wrapper {
        padding: 1.5rem 4rem;
    }
  }

  .sidebar-content--wrapper .sidebar-body {
    flex-direction: row;
  }
  
  #page-about .sidebar-body{
      flex-direction: column;
  }

  .project-card--header-wrapper .quick-view-btn{
    display: none;
  }

  .testimonial-swiper .swiper-wrapper {
    margin-left: 0;
  }

  .swiper-button-prev {
    left: 0px !important;
  }

  .swiper-button-next {
    right: 6rem !important;
  }
  
  .project-banner{
        .banner-content{
            flex-direction: column !important;
            align-items: flex-start;
        }
        
        .details-section,
        .brief-section{
            max-width: unset;
        }
        
        .details-section{
            width: 100%;
        }
   }
   
   .product-description-content{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

@media (min-width: 769px) {
  .mobile-nav {
    display: none;
  }
  
  /* Show when opened by JS */
  .mobile-nav[style*="right: 0"] {
    display: flex !important;
  }
}


/* ─── RESPONSIVE 768px ───────────────────────────────── */
@media (max-width: 768px) {
    .mobile-nav{
        padding-top: 3rem !important;
    }    
    
  .main-container header {
    padding: 1rem !important;
  }

  .logo-img {
    width: 130px;
  }

  .navbar-items {
    display: none;
  }
  
  .banner-right-colunn{
      display: none !important;
  }

  .sidebar-content--wrapper .sidebar-body {
    flex-direction: column;
  }
  
  .icon-blocks-box.grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .banner.px-16,
  .project-filter--wrapper.px-16,
  .project-section.px-16,
  .project-banner.px-16,
  .product-description-section.px-16,
  .sidebar-content--wrapper.px-8,
  .footer, 
  .contact-section.px-16{
    padding-left: 2rem;
    padding-right: 2rem;
  }


  .project-card--header-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .project-filter--header.gap-32{
    flex-direction: column;
    gap: 0;

    .action-buttons{
        width: 100%;
    }
  }

  .project-filter--header-wrapper{
    width: 100%;
  }
  
  .project-card--description.max-w-lg{
    max-width: unset;
  }

  .project-card--action-buttons {
    flex-direction: row !important;
    align-items: center !important;
  }
  
  .project-banner{
      
         h1{
            font-size: var(--h2-size) !important;
         }
      
        
        .details-section{
            width: 100%;
            flex-direction: column;
        }
        
        .role-section{
            margin-bottom: 3rem;
        }
    }
    
   .process-title,
   .sidebar-header h2{
        font-size: var(--h3-size) !important;
    }
  
  .process-step h3,
  .sidebar-block-wrapper h3,
  .faq-category h3{
     font-size: var(--h4-size) !important;
  }
  
  .testimonial-card-footer {
      flex-direction: column;
      align-items: flex-start !important;
      gap: .75rem;
  }

  .footer {
    padding: 2rem 1rem !important;
  }

  .footer-banner {
    padding: 2rem 1rem !important;

    h2{
        font-size: 24px !important;
    }

    h3{
        font-size: 20px !important;
    }
  }

  .footer-wrapper {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start !important;

    .footer-social-links,
    .copyright-text{
        width: 100%;
    }

    .footer-social-links{
        justify-content: center;
    }

    .copyright-text{
        text-align: center;
        color: var(--neutral-900);
    }
  }
}

@media screen and (max-width: 500px) {
    .banner-stat{
        flex-direction: column;
        align-items: flex-start !important;
    }

    .banner-stat__number.mr-6{
        margin-right: 0;
    }
    
    .banner-stat__label br{
        display: none;
    }
    
}

@media screen and (max-width: 375px){
    .icon-blocks-box.grid-cols-2{
         grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/*Accessability*/
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }