.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1280px;
}
body {font-family: 'Inter';}body {line-height: 1.4;font-size: 14px;font-weight: 400;color: #223e19;}.oxy-nav-menu-hamburger-line {background-color: #223e19;}h1, h2, h3, h4, h5, h6 {font-family: 'Inter';font-size: 38px;font-weight: 900;line-height: 1.1;color: #223e19;}h2, h3, h4, h5, h6{font-size: 28px;font-weight: 900;line-height: 1.15;color: #111318;}h3, h4, h5, h6{font-size: 18px;font-weight: 900;line-height: 1.3;color: #111318;}h4, h5, h6{font-size: 16px;font-weight: 600;line-height: 1.4;color: #111318;}h5, h6{font-size: 14px;font-weight: 600;line-height: 1.5;color: #111318;}h6{font-size: 16px;font-weight: 600;line-height: 1.35;color: #111318;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-right: 20px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.container {
}
.site-header {
}
.header-row {
}
.cluster {
 margin-bottom:0px;
 padding-bottom:0px;
}
.cluster:not(.ct-section):not(.oxy-easy-posts),
.cluster.oxy-easy-posts .oxy-posts,
.cluster.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
@media (max-width: 479px) {
.cluster {
}
.cluster:not(.ct-section):not(.oxy-easy-posts),
.cluster.oxy-easy-posts .oxy-posts,
.cluster.ct-section .ct-section-inner-wrap{
display:flex;
}
}

.brand {
}
.brand__mark {
}
.header-nav-desktop {
}
.nav {
}
.header-right {
}
.header-left {
}
.btn:hover{
}
.btn {
padding: 10px 16px;
}.btn {
}
.container--1280 {
}
.container-pad {
}
.container-pad:not(.ct-section):not(.oxy-easy-posts),
.container-pad.oxy-easy-posts .oxy-posts,
.container-pad.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.nav--desktop {
}
.site-footer {
}
.footer-grid {
}
.footer-col {
}
.stack-sm {
}
.footer-note {
}
.stack {
 padding-left:0px;
}
.stack:not(.ct-section):not(.oxy-easy-posts),
.stack.oxy-easy-posts .oxy-posts,
.stack.ct-section .ct-section-inner-wrap{
display:flex;
}
.footer-links {
 color:#d5e0ea;
}
.footer-bottom {
 padding-top:0px;
}
.section {
}
.section--py-xl {
transform:;}
.grid {
}
.grid--3 {
}
.container--960 {
}
.container--960:not(.ct-section):not(.oxy-easy-posts),
.container--960.oxy-easy-posts .oxy-posts,
.container--960.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 479px) {
.container--960 {
}
}

.container--4xl {
}
.container-pad--contact {
}
.measure--3xl {
}
.grid--3-md {
}
.X-Pill {
}
.btn-primary:hover{
}
.btn-primary {
padding: 10px 16px;
}.btn-primary {
}
.btn-primary:not(.ct-section):not(.oxy-easy-posts),
.btn-primary.oxy-easy-posts .oxy-posts,
.btn-primary.ct-section .ct-section-inner-wrap{
display:flex;
}
.btn-outline:hover{
}
.btn-outline {
background-color :#1e73be;
border: 1px solid #1e73be;
padding: 10px 16px;
}.btn-outline {
}
.card--emphasis {
}
.stack-md {
}
.card__stack {
}
.card__stack:not(.ct-section):not(.oxy-easy-posts),
.card__stack.oxy-easy-posts .oxy-posts,
.card__stack.ct-section .ct-section-inner-wrap{
align-items:center;
}
.btn--muted {
}
.intro--center {
}
.section--py-lg {
}
.selection--py-xl {
 background-color:#ffffff;
}
.w-full {
}
.btn_primary {
}
.stack--sx {
}
.visual-card__media {
}
.quote-card {
}
.quote-card__stack {
}
.quote-card__byline {
}
.stack--sm {
 flex-grow:0;
 flex-shrink:0;
}
.pill {
}
.btn--primary {
}
.site-nav {
}
.visual-card {
}
.card--media {
}
.stack--md {
}
.icon-lock {
}
.icon-box {
 background-color:#e4e8d5;
}
.card--clip {
}
.card--clips {
}
.bg-dot-pattern {
}
.ff-contact {
}
.section--py-md {
}
.grid--4 {
}
.orb__img {
}
.orbit__card {
}
.orbit_card--a {
}
.orbit_card-b {
}
.orbit_card--b {
}
.orbit_card--c {
}
.orbit {
}
.orbit--3 {
}
.orbit__img {
}
.grid--compare-3 {
}
.header-nav {
}
.header-nav .oxy-pro-menu-list > .menu-item{
margin-left:16px;
margin-right:16px;
}

@media (max-width: 1280px) {
.header-nav {
}
.header-nav .oxy-pro-menu-list > .menu-item{
margin-left:12px;
margin-right:12px;
}

}

@media (max-width: 1023px) {
.header-nav {
}
.header-nav .oxy-pro-menu-list > .menu-item{
margin-left:12px;
margin-right:12px;
}

}

.oxy-pro-menu-dropdown {
}
.header-dropdown-slot {
}
.header-inner {
}
/* =========================================================
   INCLUES / BREADCRUM — OXYGEN GLOBAL STYLESHEET (SITEWIDE)
   Target: Oxygen 4.9.3
   Goal: Match attached HTML look + prevent Oxygen default spacing drift

   Guidance:
   - Use classes for spacing/layout (NOT element default margins).
   - Colours are centralized in :root vars (you can edit later).
   - Typography is minimal here (prefer Oxygen UI), but safe defaults included.
   ========================================================= */

/* =========================
   0) RESET / NORMALIZE
   ========================= */
html, body { margin: 0; padding: 0; }
*,
*::before,
*::after { box-sizing: border-box; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* Remove default typography margins (Tailwind-like behavior) */
h1,h2,h3,h4,h5,h6,p,blockquote,figure,dl,dd { margin: 0; }

/* =========================
   1) TOKENS (EDIT HERE)
   ========================= */
:root {
  /* Spacing scale (4px base) */
  --space-2xs: 0.25rem; /* 4 */
  --space-xs:  0.5rem;  /* 8 */
  --space-sm:  0.75rem; /* 12 */
  --space-md:  1rem;    /* 16 */
  --space-lg:  1.5rem;  /* 24 */
  --space-xl:  2rem;    /* 32 */
  --space-2xl: 3rem;    /* 48 */
  --space-3xl: 4rem;    /* 64 */
  --space-4xl: 5rem;    /* 80 */

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;

  /* Widths */
  --w-960:  960px;
  --w-1200: 1200px;
  --w-1280: 1280px;

  /* Colours (defaults taken from your HTML set) */
  --c-primary: #135bec;
  --c-primary-hover: #0f4bc4;

  --c-bg: #f6f6f8;
  --c-surface: #ffffff;

  --c-text: #111318;
  --c-text-2: #1f2937;
  --c-muted: #6b7280; /* safe neutral (tailwind-ish) */

  --c-border: #e7ebf3;
  --c-border-2: rgba(0,0,0,0.12);

  --c-success: #16a34a;

  --container-max: 72rem;          /* ~1152px */
  --container-pad: 1.25rem;        /* 20px */
  --section-pad-y: 5rem;           /* 80px */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.12);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
  
  /* Header height used for overlay compensation */
  --header-h: 76px;
}

/* Typography baseline */
body{
  font-size: 1rem;       /* 16px */
  line-height: 1.65;
  color: var(--text);
}

/* Headings */
/*
.h1, h1{
  font-size: clamp(2.25rem, 3.2vw, 3.5rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.h2, h2{
  font-size: clamp(1.75rem, 2.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.h3, h3{
  font-size: 1.25rem;    
  line-height: 1.4
  font-weight: 700;
}

.lead{
  font-size: 1.125rem;  
  line-height: 1.6;
  color: var(--muted);
}
*/

/* Optional: dark theme hook (only applies if you add .theme-dark on body) */
body.theme-dark {
  --c-bg: #101622;
  --c-surface: rgba(255,255,255,0.06);
  --c-text: #f3f4f6;
  --c-text-2: #e5e7eb;
  --c-muted: #cbd5e1;
  --c-border: rgba(255,255,255,0.12);
  --c-border-2: rgba(255,255,255,0.18);
}

/* =========================
   2) BASE BODY (minimal)
   Prefer setting fonts/sizes in Oxygen UI if desired
   ========================= */
body {
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
}


/* ======================================
   Centered section intro
   ====================================== */
/* ======================================
   Centered section intro (Oxygen-safe)
   ====================================== */
.intro--center{
  text-align: center;
  align-items: center; /* for flex-based stacks */
}

/* Force a block to span its parent width */
.w-full {
  width: 100%;
}


/* Measure blocks: constrain line length but center within parent */
.measure--3xl{
  max-width: 48rem;       /* Tailwind max-w-3xl */
  width: 100%;
  margin-inline: auto;    /* centers the block */
}

.measure--2xl{
  max-width: 42rem;       /* Tailwind max-w-2xl */
  width: 100%;
  margin-inline: auto;
}



/* =========================
   3) CONTAINERS
   ========================= */

.container--960,
.container--1200,
.container--1280 {
  margin-inline: auto;
  width: 100%;
}

/* ======================================
   Stack — vertical rhythm
   ====================================== */
.stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
}


.stack--md {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 16px */
}

.stack--sm {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px */
}

.stack--xs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
}

.card__stack{
  display:flex;
  flex-direction:column;
  gap: 1.25rem; /* 14px */
}

/* ======================================
   Visual card with centered overlay quote
   ====================================== */

/* Oxygen-safe visual + quote */
.visual-card{
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
}

/* Media layer */
.visual-card__media{
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  min-height: 380px;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.quote-card{
  grid-area: 1 / 1;
  position: relative;     /* not absolute */
  max-width: 420px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  padding: var(--space-lg);
}

.quote-card__stack{
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
}

.quote-card__byline{
  font-size: 0.9rem;
  color: var(--c-muted);
}


/* ======================================
   Cluster — horizontal alignment
   ====================================== */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem; /* 12px */
}

.cluster--lg {
  gap: 1.25rem; /* 20px */
}


.container--960  { max-width: var(--w-960); }
.container--1200 { max-width: var(--w-1200); }
.container--1280 { max-width: var(--w-1280); }

/* Tailwind-like horizontal padding: px-4 sm:px-6 lg:px-8 */
.container-pad { padding-inline: var(--space-md); }

@media (min-width: 640px) { .container-pad { padding-inline: var(--space-lg); } }
@media (min-width: 1024px) { .container-pad { padding-inline: var(--space-xl); } }

/* =========================
   4) SECTIONS / RHYTHM
   ========================= */
.section { position: relative; }

/* Vertical padding variants (map your HTML py-* usage) */
.section--py-sm { padding-block: var(--space-md); }   /* ~24 */
.section--py-md { padding-block: var(--space-lg); }   /* ~32 */
.section--py-lg { padding-block: var(--space-xl); }  /* ~48 */
.section--py-xl { padding-block: var(--space-2xl); }  /* ~64 */

@media (min-width: 1024px) {
  .section--py-lg { padding-block: var(--space-2xl); } /* ~64 */
  .section--py-xl { padding-block: var(--space-3xl); } /* ~80 */
}

/* Overlay-header helper: use on first section if page has overlay header */
.hero--with-header { padding-top: calc(var(--header-h) + var(--space-lg)); }
@media (min-width: 1024px) { .hero--with-header { padding-top: calc(var(--header-h) + var(--space-2xl)); } }

/* =========================
   5) LAYOUT PRIMITIVES
   ========================= */
.stack { display: flex; flex-direction: column; gap: var(--space-lg); }
.stack--sm { gap: var(--space-md); }
.stack--lg { gap: var(--space-xl); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.cluster--lg { gap: var(--space-lg); }

.grid { display: grid; gap: var(--space-xl); }

.grid--2{
  grid-template-columns: 1fr;
}

@media (min-width: 1024px){
  .grid--2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

grid--3 { grid-template-columns: 1fr; } 
@media (min-width: 1024px) { 
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } 


/* ========================================================= 
Grid variant: 3 columns from md (768px) 
========================================================= */

.grid--3-md { grid-template-columns: 1fr; } 
@media (min-width: 768px) { 
  .grid--3-md { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =========================================================
   Grid variant: Comparison / dense content
   1 col by default
   3 cols only on large desktop (1280+)
   ========================================================= */

.grid--compare-3 {
  grid-template-columns: 1fr;
}

/* Optional: adjust vertical rhythm for stacked cards */
.grid--compare-3 {
  gap: var(--space-xl);
}

@media (min-width: 1280px) {
  .grid--compare-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl); /* optional, keep if you use spacing tokens */
  }
}


/* Pricing grid: center card emphasis often used */
.grid--pricing { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .grid--pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =========================================================
   Tiny screens (≈360px) — force 3-col variants to 1 col
   ========================================================= */

@media (max-width: 768px){

  /* Force these grid variants to 1 column */
  .grid--3,
  .grid--3-md,
  .grid--compare-3{
    grid-template-columns: 1fr !important;
  }

  /* If you have other 3-col variants, add them here explicitly */
  /* .grid--3-xyz{ grid-template-columns: 1fr !important; } */

  /* Reduce spacing to prevent overflow */
  .grid--3,
  .grid--3-md,
  .grid--compare-3{
    gap: var(--space-md);
  }

  /* Prevent child min-content overflow (common at 360) */
  .grid--3 > *,
  .grid--3-md > *,
  .grid--compare-3 > *{
    min-width: 0;
  }
}

/* =========================================================
   Under 480px — force 3-col variants to 1 column (and row flow)
   ========================================================= */
@media (max-width: 768px){

  .grid.grid--3,
  .grid.grid--3-md,
  .grid.grid--compare-3{
    display: grid !important;
    grid-template-columns: 1fr !important;

    /* critical: prevent implicit columns layout */
    grid-auto-flow: row !important;
    grid-auto-columns: 1fr !important;

    gap: var(--space-md) !important;
  }

  .grid.grid--3 > *,
  .grid.grid--3-md > *,
  .grid.grid--compare-3 > *{
    min-width: 0;
    grid-column: auto !important; /* cancels any spanning rules */
  }
}


/* =========================
   6) COMPONENTS — CARD / PILL / BADGE
   ========================= */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}


.card--shadow { box-shadow: var(--shadow-md); }
.card--soft { border-color: var(--c-border); box-shadow: var(--shadow-sm); }
.card--emphasis {
  border-color: var(--c-border-2);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card--clips{
  padding: 0;
  overflow: hidden;              /* clips image to rounded corners */
}


.card--media{
  padding: 0;
  overflow: hidden;              /* clips image to rounded corners */
}

.card--media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,0.75);
  color: var(--c-text-2);
  font-size: 0.875rem;
}
body.theme-dark .pill { background: rgba(0,0,0,0.25); }

.icon-tick { color: var(--c-success); }

/* =========================
   7) BUTTONS
   ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r-sm);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 900;
  text-decoration: none;
  line-height: 1;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease,
    color 120ms ease;
  will-change: transform;
}

/* Hover / focus: elevation, not border */
.btn:hover,
.btn:focus-visible {
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Active (press) */
.btn:active {
  transform: translateY(1px);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.14);
}


.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(19, 91, 236, .22);
}
.btn--primary:hover { background: var(--c-primary-hover); }


/* ======================================
   Button — Muted (uses existing c-* tokens)
   ====================================== */

/* Default (light mode): subtle surface */
.btn--muted{
  background: var(--c-bg);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
}

/* Default (dark mode): subtle surface */
body.theme-dark .btn--muted{
  background: var(--c-surface);
  color: var(--c-muted);
  border-color: var(--c-border);
}

/* Hover / focus: “muted dark” surface + primary text */
.btn--muted:hover,
.btn--muted:focus-visible{
  background: var(--c-border-2);
  color: var(--c-text);
  border-color: var(--c-border-2);
}

/* Active (inherits the base .btn transform if you already have it) */
.btn--muted:active{
  transform: translateY(1px);
}

/* Disabled */
.btn--muted:disabled,
.btn--muted[aria-disabled="true"]{
  opacity: 0.6;
  cursor: not-allowed;
}
/*
.btn_ghost{
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}

.btn--outline {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.btn--outline:hover { border-color: rgba(0,0,0,0.22); }
*/

body.theme-dark .btn--outline {
  color: var(--c-text);
  border-color: var(--c-border);
}
body.theme-dark .btn--outline:hover {
  border-color: rgba(255,255,255,0.24);
}

.header-inner{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}



/* =========================
   10) FOOTER (Reusable Part)
   ========================= */

.site-footer {
  position: relative;
  z-index: 10;
  /* Reset the push-down */
  margin-top: 0 !important; 
  [cite_start]border-top: 1px solid rgba(0,0,0,0.06); [cite: 89]
  [cite_start]background: var(--c-bg); [cite: 89]
}

/* Ensure the content doesn't push the footer away unnecessarily */
.ct-inner-content {
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}

.footer-grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.footer-note { color: var(--c-muted); font-size: 0.95rem; }
.footer-links a { color: var(--c-text-2); }
.footer-links a:hover { color: var(--c-text); }

.footer-bottom {
  padding-block: var(--space-lg);
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: var(--space-2xl);
  justify-content: space-between;
}


.icon-box{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* make the icon element itself not behave like inline text */
.icon-lock{
  display: flex;              /* important */
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  line-height: 0;
  align-items: center;
  justify-content: center;
}

/* force any svg inside to be block + fill the box */
.icon-lock svg{
  display: block;
  width: 100%;
  height: 100%;
}

.bg-dot-pattern {
  background-color: #f8fafc; /* base background */
  background-image: radial-gradient(
    rgba(15, 23, 42, 0.08) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}

.dark .bg-dot-pattern {
  background-color: #0f172a;
  background-image: radial-gradient(
    rgba(148, 163, 184, 0.15) 1px,
    transparent 1px
  );
}

/* =========================
   CF7 
   Scope: this form only
   ========================= */
/* =====================================================
   CF7 Intent Radios → Card UI (one-line cards)
   Markup required:
   <div class="form-choice-grid">
     [radio intent default:1 "Free website check" "Targeted improvement" "Web starter package" "Other / Not sure yet"]
   </div>
   ===================================================== */

.wpcf7 .contact-form{
  --intent-grid-gap: 1rem;

  --intent-card-pad-y: 1rem;
  --intent-card-pad-x: 1.1rem;
  --intent-card-radius: 0.75rem;
  --intent-card-gap: 0.75rem; /* radio ↔ label */

  --intent-title-size: 0.95rem;
  --intent-title-lh: 1.2;

  --intent-border: var(--c-border, #e7ebf3);
  --intent-bg: var(--c-surface, #fff);
  --intent-muted: var(--c-muted, #6b7280);
  --intent-primary: var(--c-primary, #135bec);
  --intent-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.12));
}

/* Grid wrapper (your div) */
.wpcf7 .contact-form .form-choice-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--intent-grid-gap);
}
@media (max-width: 768px){
  .wpcf7 .contact-form .form-choice-grid{ grid-template-columns: 1fr; }
}

/* CF7 radio group should not add its own layout */
.wpcf7 .contact-form .form-choice-grid .wpcf7-form-control{
  margin: 0;
}
.wpcf7 .contact-form .form-choice-grid .wpcf7-radio{
  display: contents; /* make list-items become the grid children */
}

/* Each option becomes a “card” */
.wpcf7 .contact-form .form-choice-grid .wpcf7-list-item{
  margin: 0;
  padding: 0;
  display: block;
}

/* Style the label (CF7 wraps input+text with label if use_label_element is on;
   without it, span still exists; we handle both) */
.wpcf7 .contact-form .form-choice-grid .wpcf7-list-item > label,
.wpcf7 .contact-form .form-choice-grid .wpcf7-list-item{
  border: 1px solid var(--intent-border);
  border-radius: var(--intent-card-radius);
  background: var(--intent-bg);
  box-shadow: var(--intent-shadow);
  cursor: pointer;

  padding: var(--intent-card-pad-y) var(--intent-card-pad-x);
  display: flex;
  align-items: flex-start;
  gap: var(--intent-card-gap);

  transition: border-color 150ms ease, background-color 150ms ease;
}

/* Radio input */
.wpcf7 .contact-form .form-choice-grid input[type="radio"]{
  margin: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--intent-primary);
  flex: 0 0 auto;
}

/* Text label */
.wpcf7 .contact-form .form-choice-grid .wpcf7-list-item-label{
  display: block;
  margin: 0;
  font-size: var(--intent-title-size);
  line-height: var(--intent-title-lh);
  font-weight: 700;
  color: var(--c-text, #111318);
}

/* Hover / focus */
.wpcf7 .contact-form .form-choice-grid .wpcf7-list-item > label:hover,
.wpcf7 .contact-form .form-choice-grid .wpcf7-list-item:hover{
  border-color: color-mix(in srgb, var(--intent-primary) 35%, var(--intent-border));
}
.wpcf7 .contact-form .form-choice-grid .wpcf7-list-item > label:focus-within,
.wpcf7 .contact-form .form-choice-grid .wpcf7-list-item:focus-within{
  border-color: var(--intent-primary);
  background: color-mix(in srgb, var(--intent-primary) 6%, var(--intent-bg));
}

/* Selected state (no :has) — use focus-within + accent-color.
   If you want a true selected highlight without :has, we’ll add a tiny JS or a class hook. */

/* =========================
Fluent Form
========================= */

/* =====================================================
   Fluent Forms — Contact Form Styling (Option 1, no help text)
   Scope: Oxygen wrapper .ff-contact only
   ===================================================== */

/* =========================================================
   Fluent Forms (Free) — Contact Form Styling (Oxygen scope)
   Scope: ONLY inside .ff-contact wrapper
   Goals:
   - Radio intent as 2-col "card" options (1-col mobile)
   - Tooltip (i) stays inline with label
   - Clear subsection spacing (radio block vs details)
   - Force submit button to --c-primary
   ========================================================= */

/* =========================================================
   Small-screen hardening (prevents 360px overflow)
   ========================================================= */

/* 1) Make widths behave predictably */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Stop grid/flex children from forcing overflow */
.grid > *, [class*="grid--"] > * { min-width: 0; }

/* 3) Media never exceeds container */
img, video, svg { max-width: 100%; height: auto; }

/* 4) Long strings/URLs wrap instead of causing horizontal scroll */
p, li, a, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; word-break: break-word; }

/* 5) Background-image cards don’t overflow */
.card { max-width: 100%; }
.card[style*="background"] { background-size: cover; background-position: center; }

/* 6) Container padding reduction only on very small screens */
@media (max-width: 399px){
  .container-pad{
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }

  /* Reduce grid gaps if needed */
  .grid, [class*="grid--"]{
    gap: var(--space-md);
  }
}

/* 7) Emergency horizontal scroll guard (use on the specific section if needed) */
/* .no-x-scroll{ overflow-x: hidden; } */


/* =========================
   11) UTILITIES (use sparingly)
   ========================= */
.text-muted { color: var(--c-muted); }
.text-secondary { color: var(--c-text-2); }
.text-center { text-align: center; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }



/* Accessibility */
:focus-visible { outline: 2px solid rgba(19,91,236,0.6); outline-offset: 2px; }