/*
Theme Name: Neil Beckett
Theme URI: https://neilbeckett.com
Author: Neil Beckett
Author URI: https://neilbeckett.com
Description: Built on LeanPress, my custom WordPress theme framework for fast, sustainable websites that cut bloat, not trees.
Version: 1.0.0
*/

/*********************************************************
    RESET
*********************************************************/
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section{display: block;}
[tabindex="-1"]:focus{outline: 0 !important;}
input[type="radio"], input[type="checkbox"]{box-sizing: border-box; padding: 0;}
input, button, select, optgroup, textarea{margin: 0; font-family: inherit; font-size: inherit; line-height: inherit;}
table{border-collapse: collapse;}
fieldset{border: none; padding: 0;}
input[type="text"], input[type="password"], textarea, select {outline: none;}

/*********************************************************
    GLOBAL
*********************************************************/
html{font-family: sans-serif; text-size-adjust: 100%; margin: 0; padding: 0; width: 100%; min-height: 100%; height: 100%; scrollbar-gutter: stable; overflow-y: scroll; scroll-behavior: smooth;} /* Always show scrollbar to prevent layout shifts */
body{font-family: var(--body); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--text); text-align: left; background-color: var(--background); position: relative; text-rendering: optimizelegibility; font-feature-settings: "liga"; min-height: 100%; height: 100%; padding: 0; margin: 0;}

/*********************************************************
    LAYOUT
*********************************************************/
/* Container - fundamental layout element */
.container{width: 100%; max-width: 1250px; margin-inline: auto; padding-inline: 15px;}
.container-1000{max-width: 1060px; margin-inline: auto;}
.container-900{max-width: 900px; margin-inline: auto;}
.container-800{max-width: 800px; margin-inline: auto;}
.w-100{width: 100%;}
.h-100{height: 100%;}

/* Responsive container adjustments */
@media (max-width: 991.99px){
  .container{max-width: 100%;}
}

/*********************************************************
    UTILITIES
*********************************************************/
/* Visibility utilities */
.d-none{display: none !important;}
.d-md-block{display: none !important;}
.d-lg-block{display: none !important;}
/* Using hardcoded values for media queries for better browser compatibility */
@media (min-width: 768px){.d-md-block{display: block !important;}}
@media (min-width: 992px){.d-lg-block{display: block !important;}}

/* Skip link - visually hidden but accessible */
.skip-link{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; z-index: 1000;}
.skip-link:focus-visible{width: auto; height: auto; clip: auto; white-space: normal; background: #000; color: #fff; padding: 8px 12px; top: 0; left: 0; margin: 0; overflow: visible; text-decoration: none; font-weight: var(--font-weight-bold); outline: 3px solid var(--blue); outline-offset: 2px;}

/* Screen reader only - visible to screen readers but hidden visually */
.sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/* Gradient text utility */
.text-gradient{background-image:linear-gradient(108deg, #b16cea 8%, #ff5e69 40%, #ff8a56 77%, #ffa84b 91%); background-size:100% 100%; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color: transparent !important; -webkit-text-fill-color: transparent !important;}

.section-label{display:inline-block; font-family: var(--headline); font-weight: var(--font-weight-extrabold); font-size: var(--font-size-md); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; margin-bottom: var(--space-2);}
.section-heading{font-size: var(--font-size-xl); letter-spacing: var(--letter-spacing-tight); margin: 0;}
.page-description{font-size: var(--font-size-md); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-base); line-height: var(--line-height-medium); margin: 0;}

/*********************************************************
    IMAGES
*********************************************************/

/* Responsive Image - Universal class for all images */
.responsive-img{max-width: 100%; height: auto; display: block;}
.text-center .responsive-img{margin-inline: auto;}
.image-ticker{position: relative;}
.image-ticker__img{transition: opacity 0.22s ease-in-out; display: block;}
.image-ticker__img.is-fading{opacity: 0;}
.featured-image-wrapper{display: inline-block; max-width: 500px;}
.featured-image{width: 100%; max-width: 500px; height: auto; display: block;}

/*********************************************************
    ASSETS
*********************************************************/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{font-family: var(--headline); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-tight); margin-top: 0; margin-bottom: 0.5rem;}
h1, .h1{font-size: var(--font-size-xxl); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-sm);}
h2, .h2{font-size: var(--font-size-xl); letter-spacing: var(--letter-spacing-tight);}
h3, .h3{font-size: var(--font-size-lg); letter-spacing: var(--letter-spacing-normal);}
h4, .h4{font-size: var(--font-size-md); letter-spacing: var(--letter-spacing-normal);}
h5, .h5{font-size: var(--font-size-sm); letter-spacing: var(--letter-spacing-normal);}
h6, .h6{font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-normal);}
a{color: var(--link); font-weight: var(--font-weight-medium); outline: none; transition: 0.2s ease; text-decoration: none;}
.underline{text-decoration: underline !important;}
.no-underline{text-decoration: none !important;}
.small{font-size: var(--font-size-sm) !important; line-height: var(--line-height-base) !important;}
.medium{font-size: var(--font-size-md) !important; font-weight: var(--font-weight-extrabold); line-height: var(--line-height-base) !important;}
.large{font-size: var(--font-size-lg) !important; font-weight: var(--font-weight-extrabold); line-height: var(--line-height-base) !important;}
.circle{border-radius: var(--radius-full) !important;}
.border{border: 1px solid var(--dark-gray) !important;}
.bold{font-weight: var(--font-weight-bold) !important;}
.muted{opacity: 0.75;}
.shadow{box-shadow: var(--shadow-sm);}
.rounded{border-radius: var(--radius-sm) !important;}
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.text-center{text-align: center !important;}

/* Responsive text alignment */
@media (max-width: 991.99px){
  .text-lg-center{text-align: center !important;}
}

@media (max-width: 767.98px){
  .text-md-center{text-align: center !important;}
}

/*********************************************************
    COLORS
*********************************************************/
:root{
    /* Color variables */
    --black: #000000;
    --white: #FFFFFF;
    --gray: #eeeeeecc;
    --dark-gray: #cfcece;
    --blue-rgb: 82, 158, 204;
    --purple: #7c25bc;
    --purple-light: #f4efffad;
    
    /* Shadow variables */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 15px 35px rgba(0, 0, 0, 0.3);
    
    --font-size-xs: 0.75rem;
    --font-size-xsm: clamp(0.95rem, 0.90rem + 0.15vw, 0.98rem);
    --font-size-sm: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
    --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); 
    --font-size-md: clamp(1.125rem, 1.0875rem + 0.1875vw, 1.25rem); 
    --font-size-mdlg: clamp(1.1875rem, 1.1rem + 0.5vw, 1.45rem);
    --font-size-lg: clamp(1.25rem, 1.15rem + 0.9vw, 1.75rem);       
    --font-size-xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);    
    --font-size-xxl: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem);    
    --font-size-xxxl: clamp(2.75rem, 1.75rem + 4.5vw, 4.25rem);
    
    /* Line heights */
    --line-height-sm: 1.1;
    --line-height-tight: 1.27;   
    --line-height-normal: 1.4;
    --line-height-medium: 1.6;
    --line-height-base: 1.75;       
    
    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --font-weight-extrabold: 800;
    
    /* Letter spacing */
    --letter-spacing-extra-tight: -0.04em;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    
    /* Spacing scale */
    --space-0: 0rem;
    --space-1: 0.25rem; 
    --space-2: 0.5rem;   
    --space-3: 1rem;     
    --space-4: 2rem;     
    --space-5: 3rem;
    --space-6: 5rem; 
    
    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-full: 50rem;
}

:is(.black, .black a){color: var(--black) !important;}
.black-bg{background-color: var(--black) !important;}

:is(.white, .white a){color: var(--white) !important;}
.white-bg{background-color: var(--white) !important;}

:is(.gray, .gray a){color: var(--gray) !important;}
.gray-bg{background-color: var(--gray) !important;}

:is(.dark-gray, .dark-gray a){color: var(--dark-gray) !important;}
.dark-gray-bg{background-color: var(--dark-gray) !important;}

:is(.purple, .purple a){color: var(--purple) !important;}
.purple-bg{background-color: var(--purple) !important;}

:is(.primary, .primary a){color: var(--primary) !important;}
.primary-bg{background-color: var(--primary) !important;}

:is(.purple-light, .purple-light a){color: var(--purple-light) !important;}
.purple-light-bg{background-color: var(--purple-light) !important;}

:is(.secondary, .secondary a){color: var(--secondary) !important;}
.secondary-bg{background-color: var(--secondary) !important;}

:is(.btn-text, .btn-text a){color: var(--button-text) !important;}
:is(.nav-text, .nav-text a){color: var(--nav-text);}
:is(.body-text, .body-text a){color: var(--text);}

/*********************************************************
    HOVERS
*********************************************************/
.hover-mute:hover{opacity: 0.75;}
.hover-dip:hover{transform: translateY(5px);}
.hover-glow:hover{text-shadow: 0 0 10px #fff!important;}

/*********************************************************
    HELPERS
*********************************************************/
.min-height{min-height: 1000px;}

.p-0{padding: var(--space-0) !important;}
.p-1{padding: var(--space-1) !important;}
.p-2{padding: var(--space-2) !important;}
.p-3{padding: var(--space-3) !important;}
.p-4{padding: var(--space-4) !important;}
.p-5{padding: var(--space-5) !important;}

.px-0{padding-inline: var(--space-0) !important;}
.px-1{padding-inline: var(--space-1) !important;}
.px-2{padding-inline: var(--space-2) !important;}
.px-3{padding-inline: var(--space-3) !important;}
.px-4{padding-inline: var(--space-4) !important;}
.px-5{padding-inline: var(--space-5) !important;}

.py-0{padding-block: var(--space-0) !important;}
.py-1{padding-block: var(--space-1) !important;}
.py-2{padding-block: var(--space-2) !important;}
.py-3{padding-block: var(--space-3) !important;}
.py-4{padding-block: var(--space-4) !important;}
.py-5{padding-block: var(--space-5) !important;}
.py-6{padding-block: var(--space-6) !important;}

.pb-0{padding-block-end: var(--space-0) !important;}
.pb-1{padding-block-end: var(--space-1) !important;}
.pb-2{padding-block-end: var(--space-2) !important;}
.pb-3{padding-block-end: var(--space-3) !important;}
.pb-4{padding-block-end: var(--space-4) !important;}
.pb-5{padding-block-end: var(--space-5) !important;}
.pb-6{padding-block-end: var(--space-6) !important;}

.pt-0{padding-block-start: var(--space-0) !important;}
.pt-1{padding-block-start: var(--space-1) !important;}
.pt-2{padding-block-start: var(--space-2) !important;}
.pt-3{padding-block-start: var(--space-3) !important;}
.pt-4{padding-block-start: var(--space-4) !important;}
.pt-5{padding-block-start: var(--space-5) !important;}

.m-0{margin: var(--space-0) !important;}
.m-1{margin: var(--space-1) !important;}
.m-2{margin: var(--space-2) !important;}
.m-3{margin: var(--space-3) !important;}
.m-4{margin: var(--space-4) !important;}
.m-5{margin: var(--space-5) !important;}

.mx-0{margin-inline: var(--space-0) !important;}
.mx-1{margin-inline: var(--space-1) !important;}
.mx-2{margin-inline: var(--space-2) !important;}
.mx-3{margin-inline: var(--space-3) !important;}
.mx-4{margin-inline: var(--space-4) !important;}
.mx-5{margin-inline: var(--space-5) !important;}

.my-0{margin-block: var(--space-0) !important;}
.my-1{margin-block: var(--space-1) !important;}
.my-2{margin-block: var(--space-2) !important;}
.my-3{margin-block: var(--space-3) !important;}
.my-4{margin-block: var(--space-4) !important;}
.my-5{margin-block: var(--space-5) !important;}

.mb-0{margin-block-end: var(--space-0) !important;}
.mb-1{margin-block-end: var(--space-1) !important;}
.mb-2{margin-block-end: var(--space-2) !important;}
.mb-3{margin-block-end: var(--space-3) !important;}
.mb-4{margin-block-end: var(--space-4) !important;}
.mb-5{margin-block-end: var(--space-5) !important;}

.mt-0{margin-block-start: var(--space-0) !important;}
.mt-1{margin-block-start: var(--space-1) !important;}
.mt-2{margin-block-start: var(--space-2) !important;}
.mt-3{margin-block-start: var(--space-3) !important;}
.mt-4{margin-block-start: var(--space-4) !important;}
.mt-5{margin-block-start: var(--space-5) !important;}
.mt-6{margin-block-start: var(--space-6) !important;}

/*********************************************************
    FORMS
*********************************************************/
.btn-wrapper{position:relative; display:inline-block; margin:0 var(--space-2) var(--space-2) 0;}
.btn-wrapper::before{content:""; position:absolute; top:8px; left:8px; right:-8px; bottom:-8px; background:linear-gradient(108deg, #b16cea 8%, #ff5e69 40%, #ff8a56 77%, #ffa84b 91%); pointer-events:none;}
.btn{display:inline-block; position:relative; padding:12px 25px; background:#000; color:#fff; border:none; font-weight:var(--font-weight-bold); font-family:var(--headline); font-size:clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem); cursor:pointer; text-decoration:none; margin:0; transition:transform 0.25s ease;}
.btn--light{background:#fff; color:var(--black);}
.btn:hover{transform:translate(8px, 8px);}
.btn:focus-visible{outline:2px solid #fff; outline-offset:4px;}
.btn--light:focus-visible{outline:2px solid var(--black);}
.btn-sm{font-size: clamp(0.85rem, 0.83rem + 0.1vw, 0.9rem); padding: 0.5rem 1rem; margin: 0;}
.btn-md{font-size: clamp(0.95rem, 0.98rem + 0.2vw, 1.2rem); padding: 0.7rem 1.3rem; margin: 0;}
.btn-ghost{display:inline-block; padding:12px 25px; background:transparent; color:var(--black); border:none; font-weight:var(--font-weight-bold); font-family:var(--headline); font-size:clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem); cursor:pointer; text-decoration:none; margin:0; transition:color 0.25s ease;}
.btn-ghost:hover{color:var(--primary);}
.form-control{display: block; width: 100%; font-size: var(--font-size-xsm); padding: var(--space-2) var(--space-2); color: var(--text); background-color: var(--white); background-clip: padding-box; border: 1px solid var(--dark-gray); transition: border-color 0.2s ease, box-shadow 0.2s ease;}
.form-control:focus-visible{border-color: var(--dark-gray); box-shadow: var(--shadow-sm); outline: 2px solid var(--dark-gray); outline-offset: 2px;}
.form-group{margin-bottom: var(--space-3);}
.contact-alert{padding: var(--space-3); margin-bottom: var(--space-3); border-radius: var(--radius-sm); font-weight: var(--font-weight-medium);}
.contact-alert--success{background: rgba(204, 249, 183, 0.4); border: 1px solid var(--green);}
.contact-alert--error{background: rgba(255, 94, 105, 0.1); border: 1px solid #ff5e69;}
.offer__image{display: block; width: 100%; height: auto;}
.offer img{margin-bottom: 0;}
.offer-message{padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);}
.offer-message--success{background: rgba(204, 249, 183, 0.4); border: 1px solid var(--green); color: var(--text);}
.offer-message--error{background: rgba(255, 94, 105, 0.1); border: 1px solid #ff5e69; color: var(--text);}

@media (max-width: 767.98px) {
  .offer .btn-wrapper{display: block; width: 100%; margin-right: 0; padding-right: 8px;}
  .offer .btn{width: 100%;}
}

/*********************************************************
    HEADER & NAVIGATION
*********************************************************/
/* Base header styles */
.site-header{padding: var(--space-3) 0; background-color: var(--white); position: relative; width: 100%;}
.site-header .container{width: 100%; max-width: 1500px;}
.header-layout{display: flex; align-items: center; width: 100%;}

/* Logo */
.site-logo{display: block; max-width: 100px; border-radius: 50%; overflow: hidden; -webkit-tap-highlight-color: transparent; perspective: 800px;}
.site-logo__faces{display: block; position: relative; width: 100%; transform-style: preserve-3d;}
.site-logo__face{display: block; width: 100%; height: auto; backface-visibility: hidden;}
.site-logo__face--back{position: absolute; inset: 0; transform: rotateY(180deg);}
.site-logo--text{font-family: var(--headline); font-weight: var(--font-weight-extrabold); font-size: clamp(1.2rem, 1.2rem + 1vw, 1.5rem); letter-spacing: var(--letter-spacing-tight); color: var(--black); text-decoration: none; max-width: none;}
.site-logo__faces{transform-origin: 50% 50%;}
.site-logo:hover .site-logo__faces{animation: flipIconHover 0.8s ease-in-out forwards;}
.site-logo:not(:hover) .site-logo__faces{animation: none;}

@media (prefers-reduced-motion: reduce){
  .site-logo__faces{animation: none; transform: none;}
}

@media (max-width: 575.98px){
  .site-logo{max-width: 60px;}
}

/* Main navigation */
.site-navigation{margin-inline-start: auto; margin-inline-end: var(--space-3);}
.header-right{display: flex; align-items: center; gap: var(--space-2);}
.header-button .btn-wrapper::before{top:6px; left:6px; right:-6px; bottom:-6px;}
.header-button .btn:hover{transform:translate(6px, 6px);}
.nav-wrapper{display: none;} /* Navigation wrapper - for mobile only */
.primary-menu{display: flex; list-style: none; margin: 0; padding: 0;}
.primary-menu li{position: relative; margin: 0 var(--space-3);}
.primary-menu a{color: var(--nav-text); text-decoration: none; display: block; padding: var(--space-2) 0; font-family: var(--headline); font-weight: var(--font-weight-bold); font-size: var(--font-size-base);}
.primary-menu a:focus-visible{outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--radius-sm);}

/* Dropdown menu */
.primary-menu .sub-menu{background: var(--white); border: 1px solid var(--gray); box-shadow: var(--shadow-xs); display: none; list-style: none; margin: 0; min-width: 200px; padding: 0; position: absolute; top: 100%; left: 0; z-index: 100;}
.primary-menu .sub-menu li{margin: 0;}
.primary-menu .sub-menu a{color: var(--text); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--gray); font-size: calc(var(--font-size-base) * 0.95);}
.primary-menu .sub-menu li:last-child a{border-bottom: none;}
.primary-menu .menu-item-has-children > a:after{content: ''; display: inline-block; width: 0.5em; height: 0.5em; margin-inline-start: var(--space-2); margin-block-end: var(--space-1); vertical-align: middle; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg);}

/* Mobile menu toggle */
.mobile-menu-toggle{display: none; background: none; border: none; padding: var(--space-2); cursor: pointer;}
.menu-icon{display: block; width: 24px; height: 3px; background-color: var(--nav-text); position: relative; transition: background-color 0.2s;}
.menu-icon:before, .menu-icon:after{content: ''; display: block; width: 100%; height: 100%; background-color: var(--nav-text); position: absolute; transition: transform 0.2s;}
.menu-icon:before{top: -8px;}
.menu-icon:after{bottom: -8px;}

/* Mobile styles */
@media (max-width: 991px) {
    .header-layout{flex-wrap: wrap;}
    .site-navigation{display: none;} 
    .header-right{margin-inline-start: auto;}
    .mobile-menu-toggle{display: block; margin-left: var(--space-3);}
    
    /* Mobile navigation wrapper */
    .nav-wrapper{display: block; position: fixed; top: 0; right: 0; width: 300px; height: 100%; background-color: var(--white); box-shadow: calc(-1 * var(--shadow-xs)); padding: 0; overflow-y: auto; z-index: 1000; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), visibility 0s 0.3s; will-change: transform; visibility: hidden; pointer-events: none;} /* Hide until active, Prevent interaction when hidden */
    
    /* Mobile menu header */
    .mobile-menu-header{display: flex; align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--gray);}
    .mobile-menu-close{background: none; border: none; padding: var(--space-2); cursor: pointer; -webkit-tap-highlight-color: transparent;}
    .mobile-menu-close:focus{outline: none;}
    .close-icon{display: block; width: 20px; height: 20px; position: relative;}
    .close-icon:before, .close-icon:after{content: ''; position: absolute; width: 100%; height: 3px; background-color: var(--dark-gray); top: 50%; left: 0; transform: rotate(45deg);}
    .close-icon:after{transform: rotate(-45deg);}
    
    /* Active state for mobile menu wrapper */
    .mobile-menu-active .nav-wrapper{transform: translateX(0); visibility: visible; transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), visibility 0s 0s; pointer-events: auto;} /* Show when active, Allow interaction when visible */
    
    /* Mobile menu styling */
    .nav-wrapper .primary-menu{flex-direction: column; width: 100%; display: block !important; margin: 0; padding: 0 var(--space-3) var(--space-3) var(--space-3);} /* Ensure menu is always visible in mobile wrapper */
    .nav-wrapper .primary-menu li{margin: 0; border-bottom: 1px solid var(--gray); display: block; width: 100%;}
    /* Keep border on all parent items */
    .nav-wrapper .primary-menu a{padding: var(--space-2) 0; display: block; width: 100%; color: var(--text); font-size: var(--font-size-lg);}
    .nav-wrapper .sub-menu{position: static; box-shadow: none; border: none; padding: 0 0 0 var(--space-3); background: transparent; width: 100%;}
    .nav-wrapper .sub-menu li{border-bottom: none;}
    .nav-wrapper .sub-menu a{padding: var(--space-2) 0; border-bottom: none;}
    .nav-wrapper .menu-item-has-children > a:after{float: right; margin-top: var(--space-1);}
    
    /* Mobile menu overlay */
    .mobile-menu-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; pointer-events: none;}
    .mobile-menu-active .mobile-menu-overlay{opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s 0s; pointer-events: auto;} /* Active state for mobile menu overlay */
    
    /* Fixed positioning for body when menu is open to prevent jumping */
    html, body{overflow-x: hidden; width: 100%; position: relative; margin: 0; padding: 0;}
    body.mobile-menu-active{overflow: hidden; position: fixed; width: 100%; height: 100%;}
}

/*********************************************************
    BLOG & ARCHIVE
*********************************************************/
.post-card{position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-clip: border-box; transition: 0.2s ease;}
.post-card:hover{transform: translateY(5px); overflow: hidden;}
.post-card__image{position: relative; aspect-ratio: 16/9; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); border-bottom: 1px solid var(--dark-gray); overflow: hidden;}
.post-card__image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.post-card__title{font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-normal);}
.post-card__excerpt{font-size: var(--font-size-xsm); line-height: var(--line-height-normal);}

/*********************************************************
    ARTICLE
*********************************************************/
.article{--container: 780px; --measure: 735px; width: var(--container); max-width: 100%; margin-inline: auto; box-sizing: border-box;}
.article > :where(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6){width: var(--measure); max-width: 100%; margin-inline: auto; box-sizing: border-box;}
.article :where(figure, img){width: var(--container); max-width: 100%; margin-inline: auto; box-sizing: border-box;}
.article a{text-decoration: underline;}
.article p{margin-top: 0; margin-bottom: 2.5rem;}
.article ol,ul,dl{margin-top: 0; margin-bottom: 2rem;}
.article ol ol,ul ul,ol ul,ul ol{margin-bottom: 0;}
.article li{margin-bottom: 0.25rem;}
.article figure{margin-bottom: var(--space-5);}
.article :where(img, video){margin-bottom: var(--space-5); display: block;}
.article iframe{margin-bottom: var(--space-5); width: 100%; max-width: 100%; overflow: hidden;}
.article blockquote{font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: var(--line-height-medium); padding-left: 4rem; margin: 0; color: var(--body); position: relative;}
.article blockquote::before{content: ''; position: absolute; left: 0; top: 0; width: 45px; height: 45px; background-image: url('images/quote-icon-round.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; animation: flipIcon 8s ease-in-out infinite;}
@keyframes flipIcon{0%, 100%{transform: rotateY(0deg);} 50%{transform: rotateY(360deg);}}
@keyframes flipIconHover{0%{transform: rotateY(0deg);} 100%{transform: rotateY(360deg);}}
.article h2{margin: var(--space-5) auto var(--space-3); font-size: clamp(1.75rem, 1.4rem + 0.9vw, 2.5rem); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight);}
.article__featured{margin: 0 auto var(--space-5); max-width: var(--container-900, 900px); overflow: hidden;}
.article__featured-img{display: block; width: 100%; height: auto;}
.article .author-card{max-width: var(--measure); margin: 0 auto var(--space-5);}
.article .author-card img{margin-bottom: 0;}

/*********************************************************
    WORDPRESS
*********************************************************/

/* List utilities */
.list-spaced{padding-left: 1.5rem;}
.list-spaced li{padding-top: 0.75rem;}
.list-spaced li + li{margin-top: 0.25rem;}

/* Core alignment classes */
.alignnone, .aligncenter, .alignright, .alignleft, img.alignnone, img.aligncenter, img.alignright, img.alignleft{max-width: 100%; height: auto;}
.aligncenter, div.aligncenter{display: block; margin: var(--space-3) auto;}
.alignright{float: right; margin: 0 0 var(--space-3) var(--space-3);}
.alignleft{float: left; margin: 0 var(--space-3) var(--space-3) 0;}

/* Caption styles */
.wp-caption{max-width: 100%; margin-bottom: var(--space-4);}
.wp-caption img{width: 100%; height: auto; display: block;}
.wp-caption-text{font-size: var(--font-size-xs); margin-top: var(--space-1); color: var(--dark-gray);}

/* Code blocks */
pre,code{font-family:Consolas,Menlo,Monaco,"Andale Mono WT","Andale Mono","Lucida Console",monospace; font-size:var(--font-size-sm); line-height:var(--line-height-medium); color:var(--purple);}
code{background:var(--purple-light); padding:0.25em 0.4em;}
pre{background:var(--purple-light); border:1px solid rgb(94 54 202 / .3); padding:1rem; overflow-x:auto; margin:1.5rem 0 2.25rem;}
pre code{background:none; color:inherit; padding:var(--space-2);}

@media (max-width: 575.98px){pre code{padding: 0;}}

/*********************************************************
    SERVICES
*********************************************************/

/* Service Card (homepage/listing) */
.service-card{position: relative; padding: var(--space-3); height: 100%; background-color: var(--white); transition: transform 0.3s ease, box-shadow 0.3s ease;}
.service-card__image img{width: 100%; height: auto; display: block;}
.service-card__icon{font-size: 3rem; color: var(--primary); text-align: center; margin-bottom: var(--space-2);}
.service-card__title{font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold); margin-bottom: var(--space-2);}
.service-card__description{margin-bottom: var(--space-3);}
.service-card__icon-image{display: block;}
.service-card__icon-img{width: 70px; height: 70px; object-fit: contain;}
.service-card__list{list-style: disc; padding: 0 0 var(--space-1) var(--space-1); margin: 0 0 var(--space-3) var(--space-3); text-align: left;}
.service-card__list li{margin-bottom: var(--space-1); color: var(--text); font-size: var(--font-size-base);}
.service-card__link{position: relative; z-index: 2; display: inline-block; font-weight: var(--font-weight-extrabold); color: var(--text); text-decoration: none; transition: color 0.2s ease;}
.service-card__link:hover{color: var(--primary);}
.service-card__overlay-link{position: absolute; inset: 0; z-index: 1; border-radius: inherit;}

/* Service Page Layout (single service pages) */
.service-content-section{position: relative; overflow: visible; padding-bottom: var(--space-5);}
.service-content-section .lp-grid{overflow: visible;}
.service-content-section h2{font-size: clamp(1.75rem, 1.4rem + 0.9vw, 2.5rem); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight);}

/* Service Highlights Sidebar (single service pages) */
.service-highlights{position: sticky; top: clamp(4rem, 10vh, 6rem); padding: var(--space-4); background: var(--white); border: 1px solid rgba(122, 122, 122, 0.2); border-radius: var(--radius-lg);}
.service-highlights__header{display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); margin-left: calc(var(--space-2) * -1.5);}
.service-highlights__icon{flex-shrink: 0;}
.service-highlights__icon img{width: 45px; height: 45px; object-fit: contain; animation: flipIcon 8s ease-in-out infinite;}
.service-highlights__title{font-size: var(--font-size-mdlg); margin-bottom: 0; font-weight: var(--font-weight-bold);}
.service-highlights__list{list-style: none; padding: 0; margin: 0 0 var(--space-4) 0;}
.service-highlights__item{position: relative; padding: var(--space-2) 0 var(--space-2) 1.75rem; border-bottom: 1px solid rgba(122, 122, 122, 0.15); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug);}
.service-highlights__item:last-child{border-bottom: none;}
.service-highlights__item::before{content: '\2713'; position: absolute; left: 0; top: var(--space-2); color: var(--primary); font-weight: var(--font-weight-bold);}
.service-highlights__cta{margin-top: var(--space-4);}

@media (max-width: 991.98px) {
  .service-highlights{position: static; margin-top: var(--space-5);}
}

/* Service FAQs */
.service-faqs .faq-item{padding: clamp(1.25rem, 1rem + 0.5vw, 1.75rem) 0;}

/*********************************************************
    TESTIMONIAL COMPONENTS
*********************************************************/
/* Testimonial Card */
.testimonial-card{padding: var(--space-3); height: 100%; background-color: var(--white); position: relative;}
.testimonial-card__quote{font-size: var(--font-size-sm);font-style: italic; position: relative;}
.testimonial-card__icon{width: 50px; height: auto; margin-bottom: var(--space-2);}
.testimonial-card__icon img{display: block; width: 100%; height: auto;}
.testimonial-card__quote blockquote{margin: 0; padding: 0; border-left: none;}
.testimonial-card__author{display: flex; align-items: center; margin-top: var(--space-3);}
.testimonial-card__author-image{margin-right: var(--space-2); flex-shrink: 0;}
.testimonial-card__author-image img{width: 60px; height: 60px; object-fit: cover; border-radius: 50%; border: 1px solid var(--primary);}
.testimonial-card__author-info{flex: 1; letter-spacing: var(--letter-spacing-tight);}
.testimonial-card__author-name{font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight);}

/*********************************************************
    PROCESS SECTION
*********************************************************/
.process-section{position: relative; overflow: visible;}
.process-section .lp-grid{overflow: visible;}
.process-section__intro{position: sticky; top: clamp(4rem, 10vh, 6rem);}
.process-section__intro-text{margin-bottom: 0; font-size: var(--font-size-base);}
.process-section__steps{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0;}
.process-section__step{opacity: 1; transform: none; padding: clamp(2.5rem, 2rem + 1vw, 4rem) 0;}
.process-section__step:first-child{padding-top: 0;}
.process-section__step:last-child{padding-bottom: 0;}
.process-section__step + .process-section__step{border-top: 1px solid rgba(122, 122, 122, 0.25);}
.process-section__step-label{display: inline-block; margin-bottom: var(--space-1); letter-spacing: var(--letter-spacing-base); font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold);}
.process-section__step-text{margin: 0; font-size: var(--font-size-base); line-height: var(--line-height-base);}

@media (max-width: 767.98px) {
  .process-section__intro{position: static; margin-bottom: var(--space-4);}
}

/*********************************************************
    WHY CLIENTS SECTION
*********************************************************/
.why-clients-section ul{list-style: none; padding: 0; margin: 0;}
.why-clients-section li{position: relative; padding-left: var(--space-4); font-size: var(--font-size-base); line-height: var(--line-height-base); margin-bottom: var(--space-2);}
.why-clients-section li::before{content: ''; position: absolute; top: 0.8em; left: 0; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--black); transform: translateY(-50%);}

/*********************************************************
    HERO SECTION
*********************************************************/
.hero-centered{text-align: center;}
.hero-centered__heading{font-size: var(--font-size-xxxl); letter-spacing: var(--letter-spacing-extra-tight);}
.hero-centered__text p{font-size: var(--font-size-mdlg); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-tight); margin-bottom: 0;}
.hero-centered__buttons{display: flex; justify-content: center; align-items: center; gap: var(--space-2); flex-wrap: wrap;}
.hero-centered__buttons .btn-ghost{margin-left: 0;}

@media (max-width: 767.98px) {
  .hero-centered__buttons{flex-direction: column; align-items: center;}
}

@media (max-width: 575.98px){
  .hero-centered.py-6{padding-block: var(--space-4) !important;}
  .hero-centered .container{padding-block: var(--space-1) !important;}
  .hero-centered .container.pt-4{padding-top: var(--space-2) !important;}
}

/*********************************************************
    SPLIT SECTIONS
*********************************************************/
/* Split Section Components */
.split-section{position: relative; overflow: hidden;}
.split-section__image{margin-bottom: var(--space-3);}
.split-section__image img{width: 100%; height: auto; display: block;}
.split-section__text p:last-child{margin-bottom: 0;}

@media (max-width: 767.98px) {
  .split-section .lp-grid{row-gap: var(--space-4);}
  .split-section__image{margin-bottom: var(--space-3);}
}

/*********************************************************
    SELECTED WORK
*********************************************************/
.selected-work-section__header{display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom: var(--space-2);}
.selected-work-section__heading{flex:1; min-width:260px; max-width: 640px;}
.selected-work-section__cta{flex-shrink:0; display:flex; align-items:center;}
.selected-work-section__cta .btn-wrapper{margin:0;}
.selected-work-section__description p:last-child{margin-bottom:0;}

@media (max-width: 767.98px) {
  .selected-work-section__header{flex-direction:column; align-items:flex-start;}
  .selected-work-section__cta{width:100%; margin-top: var(--space-2);}
  .selected-work-section__cta .btn{width:100%; text-align:center;}
}

/*********************************************************
    COOKIE BANNER
*********************************************************/

.cookie-banner{position:fixed; inset-inline:0; bottom:0; z-index:999; padding: var(--space-3); background: var(--white); color: var(--black); box-shadow: 0 -8px 30px rgba(0,0,0,0.12); transition: opacity 0.3s ease, transform 0.3s ease;}
.cookie-banner__inner{max-width: var(--container-width, 1250px); margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-3); justify-content:space-between;}
.cookie-banner__copy{margin:0; font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem); line-height: var(--line-height-snug);}
.cookie-banner__link{color: var(--black); text-decoration: underline; font-weight: var(--font-weight-bold);}
.cookie-banner__link:hover{color: var(--primary);} 
.cookie-banner .btn-wrapper::before{top:6px; left:6px; right:-6px; bottom:-6px;}
.cookie-banner .btn{font-size: clamp(0.9rem, 0.88rem + 0.15vw, 1.05rem); padding: 0.65rem 1.4rem;}
.cookie-banner .btn:hover{transform:translate(6px,6px);}
.cookie-banner--accepted{opacity:0; transform: translateY(100%); pointer-events:none;}

@media (max-width: 767.98px) {
  .cookie-banner__inner{flex-direction:column; align-items:center; text-align:center;}
}

/*********************************************************
    CTA COMPONENTS
*********************************************************/
/* Contact CTA */
.contact-cta{position: relative;}
.contact-cta__info{margin-top: var(--space-3);}
.contact-cta__info a{text-decoration: none;}
.contact-cta__info a:hover{text-decoration: underline;}
.social-links{display: flex; align-items: center; gap: var(--space-2);}

@media (max-width: 767.98px) {
  .contact-cta .btn{margin-top: var(--space-3);}
}

/*********************************************************
    FAQ SECTION
*********************************************************/
.faq-item{padding: clamp(2.5rem, 2rem + 1vw, 4rem) 0; border-bottom: 1px solid rgba(122, 122, 122, 0.25);} 
.faq-item:first-child{padding-top: 0;}
.faq-question{margin: 0; font-size: var(--font-size-md);} 
.faq-toggle{display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: none; text-align: left; cursor: pointer; font-weight: var(--font-weight-extrabold); font-family: var(--headline); transition: color 0.2s ease; padding: 0; color: var(--text);} 
.faq-toggle:focus{outline: none;} 
.faq-icon{position: relative; width: 16px; height: 16px; flex-shrink: 0; margin-left: var(--space-2);} 
.faq-icon:before,.faq-icon:after{content:""; position:absolute; background-color: var(--text); transition: transform 0.25s ease-out;} 
.faq-icon:before{top:50%; left:0; width:100%; height:2px; margin-top:-1px;}
.faq-icon:after{top:0; left:50%; width:2px; height:100%; margin-left:-1px;}
.faq-toggle[aria-expanded="true"] .faq-icon:after{transform: rotate(90deg);}
.faq-answer{margin-top: var(--space-2);}
.faq-answer-inner{padding: 0;}

/* Collapse animation */
.collapse{display: none;}
.collapse.show{display: block;}
.collapsing{position: relative; height: 0; overflow: hidden; transition: height 0.35s ease;}

/*********************************************************
    FOOTER
*********************************************************/
.footer-brand{display: flex; align-items: center; gap: var(--space-2);}
.footer-brand__logo{width: 48px; height: auto;}
.footer-brand__name{margin: 0; font-size: var(--font-size-base);}
.footer-social-list{list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 0.7rem;}
.footer-social-list li{margin: 0;}
.footer-social-list img{display: block; width: 30px; height: 30px;}
.footer-ecologi{display: flex; flex-direction: column; max-width: 500px; gap: var(--space-1);}
.footer-ecologi__copy{margin: 0; line-height: var(--line-height-medium);}
.footer-ecologi__badge{display: inline-block; max-width: 110px;}
.footer-ecologi__image{display: block; width: 100%; height: auto; box-shadow: var(--shadow-sm);}
.footer-links p + p{margin: var(--space-4) 0 var(--space-4) 0;}

@media (max-width: 767.98px) {
  .footer-links:not(:last-child) p:last-child{margin-bottom: 0;}
  .footer-links:last-child p:first-child{margin-top: 0;}
}