/*
 ==========================================================================
  Custom CSS Starter Template
 ==========================================================================
  Use this file alongside the FlexiGrid system to style your website.
  It provides sensible defaults for typography, forms, buttons, and more.
  Customize the CSS variables in the :root to easily change the theme.
*/
/* @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sora:wght@100..800&display=swap');

/*
 ==========================================================================
  FlexiGrid / Parent Theme Override
 ==========================================================================
  knick_base's block-editor content-width rule (.entry-content > *) caps
  EVERY direct child at 840px and centers it. FlexiGrid's own .container/
  .row rules already win back their width/margins on their own (same
  specificity, loaded later) — but a raw FlexiGrid <section>/<div> (not a
  real block, no .container/.row of its own at the top level — e.g. a
  Custom HTML block's <section class="no-pad-bot gray-bg">) has nothing in
  flexi-grid.css to contest the parent rule, so it stays clamped. Reset
  those directly, and handle .container-fluid explicitly since FlexiGrid
  never sets it a max-width to win back at all.

  IMPORTANT: excludes anything with a "wp-block-*" class (every real block
  gets one from get_block_wrapper_attributes(), core blocks included) so
  native blocks keep their own none/wide/full alignment behavior from
  theme.json instead of being forced to max-width:none unconditionally.
  Only non-block raw HTML should ever hit this override.
*/
.entry-content > *:not(.container):not(.container-fluid):not(.row):not([class*="wp-block-"]) {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.entry-content > .container-fluid {
    max-width: none;
}

/*
 ==========================================================================
  Testimonial Slider Block — match legacy .testimonial-carousel skin
 ==========================================================================
  knick-base/testimonial-slider already reproduces the old carousel's
  positioning mechanics (absolute slides, JS-driven `left` transition,
  JS-managed track height) in its own style-index.css — those properties
  are left alone here. This only restyles appearance to match the old
  hand-coded design it replaced. Colors below are copied verbatim from the
  legacy .testimonial-slide/.carousel-btn rules (not the --color-* theme
  variables) since a couple of them intentionally differ from the current
  brand tokens (e.g. muted gray citation text, not the green secondary
  color) and the goal here is visual parity with the original, not a
  restyle. Note: the old .panel (boxed) and .reverse (dark bg) section
  variants aren't ported — this only matches the default look.

  IMPORTANT: the block's own SCSS nests every rule under
  ".knick-base-testimonial-slider { ... }", so its compiled selectors are
  all two classes deep (e.g. ".knick-base-testimonial-slider
  .knick-base-testimonial-slider__nav-btn"). A flat single-class override
  here loses that specificity fight regardless of load order, so every
  selector below repeats the parent class to match/beat it.

  Nav buttons: rather than eyeball a vertical offset (which the previous
  version of this file did, and which centered against the WHOLE section
  including the heading instead of just the quote), .track and .nav are
  placed in the same CSS Grid cell so the nav is always vertically centered
  against the actual quote area regardless of its height per-slide.
*/
.knick-base-testimonial-slider {
    display: grid;
    grid-template-columns: 1fr;
    padding:2rem 0;
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__heading {
    grid-row: 1;
    font-size: 1.5rem;
    letter-spacing: 4px;
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__heading::after {
    content: "";
    display: block;
    margin: 30px auto 0;
    background-color: var(--color-primary);
    opacity: 0.4;
    height: 2px;
    width: 100px;
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__track {
    grid-row: 2;
    grid-column: 1;
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__slide {
    /* Reset the parent theme's generic `blockquote { border-left: ... }`
       pull-quote styling — these slides are <blockquote> tags too, but
       shouldn't inherit that treatment. */
    border: none;
    margin: 0;
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__quote {
    font-size: 1.5rem;
    line-height: 1.5;
    color: #343a40;
    margin: 0 0 1rem;
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__author cite {
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    font-style: normal;
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__author cite::before {
    content: "- ";
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__nav {
    grid-row: 2;
    grid-column: 1;
    align-self: stretch;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding: 0 20px;
    pointer-events: none;
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__nav-btn {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0.16rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.knick-base-testimonial-slider .knick-base-testimonial-slider__nav-btn:hover {
    background-color: var(--color-primary);
    border-color: #ffffff;
    color: #ffffff;
}
@media (max-width: 991px) {
    .knick-base-testimonial-slider .knick-base-testimonial-slider__nav {
        grid-row: 3;
        align-self: auto;
        height: auto;
        position: relative;
        margin-top: 40px;
        padding: 0;
        gap: 12px;
    }
}
@media (max-width: 600px) {
    .knick-base-testimonial-slider .knick-base-testimonial-slider__quote {
        font-size: 1.2rem;
    }
}
.white-panel {
	background-color:#ffffff;
	border-radius:16px;
    box-shadow: 1px 1px 30px 0px rgba(0, 0, 0, 0.10);
    padding:2rem;
    width:100%;
    display:block;
    margin:0 auto 3rem;
}
/*
 ==========================================================================
  1. CSS Custom Properties (Theme Variables)
 ==========================================================================
  Define your project's color palette and fonts here for easy customization.
*/
:root {
    /* Color Palette */
    --color-primary: #4D648D;      /* A nice, standard blue */
    --color-primary-hover: #3A506B; /* A slightly darker blue for hover states */
    --color-secondary: #6A994E;    /* Light Green */
    --color-secondary-light: #A7C957; /* Lighter Green */
    --color-success: #198754;     /* Dark Green */
    --color-danger: #dc3545;       /* Red for errors */
    --color-light: #f8f9fa;        /* Light gray for backgrounds */
    --color-dark: #283655;         /* Dark gray for primary text */
    --color-border: #dee2e6;      /* A light gray for borders */

    /* Typography */
	 --font-family: "Inter", sans-serif;
     --font-family-alt: "Sora", sans-serif;
	/* --font-family: "Raleway", sans-serif; */
    --font-size-base: 1.2rem;  /* Equivalent to 16px by default */
    --line-height-base: 1.6;

    /* Transitions */
    --transition-base: all 0.2s ease-in-out;
}
    

/*
 ==========================================================================
  2. Global & Body Styles
 ==========================================================================
  Sets up box-sizing and basic styles for the entire page.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    color: var(--color-dark);
    background-color: #F3F4F4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.dark {
    background-color:#283655;
    color:#ffffff;
}
section {padding:2rem 0}
section.no-pad-top {padding-top:0;}
section.no-pad-bot {padding-bottom:0;}
a:focus {color:#fff;}
@media (min-width: 991.98px) {
section {padding:4rem 0}
section.no-pad-top {padding-top:0;}
section.no-pad-bot {padding-bottom:0;}
}
section, div, a, img, span, p, h1, h2, h3, i {
    transition: var(--transition-base);
}
/* Center the column */
.row.centered-col {justify-content:center;}
/* Vertically center content */
.row.vert-center-col {align-items:center;}
/* Vertically stretch content */
.row.vert-stretch-col {align-items:stretch}
/* Full height row */
.full-height {height:100%}
.row-reverse-mobile {
  flex-direction: column-reverse;
}
@media (min-width: 768px) {
  .row-reverse-mobile {
    flex-direction: row;
  }
}
/******* ANIMATE *********/
.animate-down {
    opacity: 0;
    transform: translateY(-24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-up {
	opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-fade {
	opacity: 0;
    transition: opacity 0.6s ease-out;
}
.animate-down.is-visible, .animate-up.is-visible, .animate-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}
:is(.animate-up, .animate-down, .animate-fade).delay-1 { transition-delay: 0.1s; }
:is(.animate-up, .animate-down, .animate-fade).delay-2 { transition-delay: 0.2s; }
:is(.animate-up, .animate-down, .animate-fade).delay-3 { transition-delay: 0.3s; }
:is(.animate-up, .animate-down, .animate-fade).delay-4 { transition-delay: 0.4s; }
:is(.animate-up, .animate-down, .animate-fade).delay-5 { transition-delay: 0.5s; }
:is(.animate-up, .animate-down, .animate-fade).delay-6 { transition-delay: 0.6s; }
:is(.animate-up, .animate-down, .animate-fade).delay-7 { transition-delay: 0.7s; }
:is(.animate-up, .animate-down, .animate-fade).delay-8 { transition-delay: 0.8s; }
:is(.animate-up, .animate-down, .animate-fade).delay-9 { transition-delay: 0.9s; }
:is(.animate-up, .animate-down, .animate-fade).delay-10 { transition-delay: 1s; }
/*
 ==========================================================================
  3. Typography
 ==========================================================================
  Styles for headings, paragraphs, links, and lists.
*/
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
    font-family:var(--font-family-alt);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; }

p {
    margin-top: 0;
    margin-bottom: 1.4rem;
	font-size:1.1rem;
	line-height:1.9rem;
	letter-spacing:-0.02rem;
}
li {letter-spacing:-0.02rem;}
p.large {font-size:1.3rem;}
@media (min-width: 991.98px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
    h5 { font-size: 1.25rem; }
    h6 { font-size: 1rem; }
	p { font-size: 1.2rem; line-height:2.1rem;}
    p.large {font-size:1.4rem;}
}

a {
    color: var(--color-dark);
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

img, svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
	pointer-events: none;
}
.gray-bg {background-color:#F4F4F4;}
.blue-bg {background-color:#4D648D;}
.centered-text {text-align:center;}


/*
 ==========================================================================
  4. Buttons
 ==========================================================================
  A simple, reusable button system.
*/
.btn {
    font-family: var(--font-family-alt);
    display: inline-block;
    font-weight: 600;
    line-height: var(--line-height-base);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.6rem 1.8rem;
    font-size: var(--font-size-base);
    border-radius: 6px;
    transition: all 0.15s ease-in-out;
    text-decoration:none;
}
.btn.small {
	padding:0.4rem 1.4rem;
	font-size:1rem;
}

/* Button Style */
.btn-main {
	background-color:rgba(106,153,78,0.9);
    border: 1px solid rgba(106,153,78,0.9);
    color:#fff;
}
.btn-main:hover {
	background-color: #6A994E;
    border-color: #6A994E;
	color:#fff;
    text-decoration:none;
    transform: scale(1.02);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.btn-secondary {
    color:rgba(255,255,255,0.9);
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.9);
}
.btn-secondary:hover {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    text-decoration: none;
    transform: scale(1.02);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn.bigger {
    padding:1.2rem 4rem;
    font-size:1.4rem;
}
@media (min-width: 767px) {
	.btn-main {display:inline-block;}
}


/*
 ==========================================================================
  5. Forms
 ==========================================================================
  Basic styling for form elements to make them look clean and consistent.
*/
label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

input,
button,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    color: var(--color-dark);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    color: var(--color-dark);
    background-color: #fff;
    border-color: #86b7fe; /* Lighter version of primary color */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
}

/*
 ==========================================================================
  Header + Home Hero
 ==========================================================================
*/
#int-header {
	z-index:999;
	position:relative;
}
#int-header.dk-blue {background-color:var(--color-dark);}
#hp-header-hero {
	z-index:999;
	position:relative;
}
.knick-logo img {
    width:100%;
    max-width:236px;
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:1rem 0;
}
.home-hero {
    color:#ffffff;
    height:auto;
	padding:1.4rem 1rem 3rem;
}
.home-hero p {margin-bottom:1.8rem;}
.home-hero .hero-img {text-align:center;}
.home-hero .hero-img img {
	width:100%;
	position:relative;
	height:auto;
	max-width:280px;
	right:-6%;
	z-index:2;
}
/********/
.custom-shape-divider-bottom-1768607837 {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1768607837 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 120px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1768607837 .shape-fill {
    fill: #F3F4F4;
}

@media (min-width: 767px) {
	.home-hero .hero-img {text-align:right;}
	.home-hero .hero-img img {
	max-width:100%;
	bottom:-30px;
	left:auto;
}
}

@media (min-width: 991px) {
    .header-inner {
        padding:2rem 3rem;
    }
    .knick-logo img {
        max-width:300px;
    }
	.home-hero .hero-img {text-align:right;}
    .home-hero .hero-img img {
		max-width:100%;
		bottom:auto;
		margin-bottom:auto;
	}
	.home-hero {padding:0;}	
    .home-hero h1 {font-size:2.6rem; font-weight:600; margin-top:1rem;}
	.home-hero p {font-size:1.3rem;}
    .home-hero .row {height:100%; align-items:start;}
	.overlap-adjustment {margin-top:40px}
}
@media (min-width: 1200px) {
	.home-hero {padding:1.4rem 0 0;}
	.home-hero .hero-img img {
		position:relative;
		bottom:-160px;
		margin-top:-160px;
		max-width:610px;
	}
	.home-hero h1 {margin-top:2rem;}
	.overlap-adjustment {margin-top:80px}
/******/

}
/* Hamburger Menu Button */
.mobile-nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    padding: 0.5rem 0;
    cursor: pointer;
    z-index: 1001; /* Must be above the flyout menu */
}

.mobile-nav-toggle .icon-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-light);
    border-radius: 1px;
    transition: all 0.2s ease-in-out;
}

.mobile-nav-toggle .icon-bar + .icon-bar {
    margin-top: 5px;
}

/* Main Navigation Menu */
.main-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex; /* For desktop horizontal layout */
    align-items: center;
    gap: 2.2rem;
}
.main-navigation li {
    position: relative;
}
.main-navigation a {
    color: var(--color-light);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding-bottom: 0.25rem;
    display: block; /* Ensures padding and positioning work correctly */
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #A4C93C;
    transition: width 0.3s ease;
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item a::after {
    width: 100%;
}


/*
==========================================================================
 Dropdown Menu Styles (Desktop)
==========================================================================
*/
.main-navigation .sub-menu {
    display: none; /* Hide dropdowns by default */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-dark); /* Or a different background */
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    min-width: 200px;
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Show dropdown on hover */
.main-navigation li:hover > .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Style for dropdown links */
.main-navigation .sub-menu li {
    width: 100%;
}

.main-navigation .sub-menu a {
    color: var(--color-light);
    padding: 0.5rem 1rem;
    width: 100%;
    white-space: nowrap; /* Prevent links from wrapping */
}

.main-navigation .sub-menu a:hover {
    background-color: var(--color-primary);
}

/* Remove the underline effect from dropdown links */
.main-navigation .sub-menu a::after {
    display: none;
}

/* Add an indicator for items that have children */
.main-navigation .menu-item-has-children > a::after {
    content: ' \f078'; /* Font Awesome down arrow */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7em;
    margin-left: 0.5em;
    display: inline-block;
    vertical-align: middle;
    /* Reset the underline style */
    position: static;
    height: auto;
    width: auto;
    background-color: transparent;
    transition: none;
	color:#A4C93C;
}

/*
==========================================================================
 Header Button Styles
==========================================================================
*/

.main-navigation li.btn-header a::after {height:0;}
.main-navigation li.btn-header a:hover::after {width:0;}
.main-navigation li.btn-header a {
    background-color:transparent;
    font-weight: 600;
    line-height: var(--line-height-base);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid #ffffff;
    padding: 0.6rem 1.2rem;
    font-size: var(--font-size-base);
    border-radius: 2rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    text-decoration:none;
}
.main-navigation li.btn-header a:hover {
    background-color:#4D648D;
    border-color:#4D648D;
}

/*
==========================================================================
 Mobile Navigation Styles
==========================================================================
*/
@media (max-width: 991.98px) {
    /* Style mobile dropdowns to appear inside the panel */
    .main-navigation .sub-menu {
        display: block; /* Always show sub-menus on mobile */
        position: static; /* Remove absolute positioning */
        background-color: transparent;
        box-shadow: none;
        padding: 0 0 0 0.4rem; /* Indent the sub-menu */
        margin-top: 1.4rem; /* Space below the parent link */
        min-width: 100%;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    /* Adjust spacing for sub-menu items */
    .main-navigation .sub-menu li {
        margin-bottom: 0.8rem;
    }
    .main-navigation .sub-menu a {padding: 0rem 0.4rem;}
    .main-navigation .sub-menu li:last-child {
        margin-bottom: 0;
    }
    .main-navigation .sub-menu a:hover {
    background-color: transparent;
}
    
    /* Remove underline effect from ALL links on mobile */
    .main-navigation a::after {
        display: none;
    }

    /* The parent theme (knick_base/style.css) styles its own generic
       ".main-navigation ul li" for ITS OWN toggle system (".menu-toggle" /
       ".toggled") — a completely separate mechanism from this site's
       "#mobile-nav-toggle" / ".is-active" panel. Because the selector still
       matches this menu, its "border-bottom:1px solid #eee" leaks through
       as a stray light-mode line under every item. Reset it here (this
       file loads after the parent's, so it wins at equal specificity) —
       the deliberate divider below replaces it. */
    .main-navigation ul li {
        border-bottom: 0;
    }

    .mobile-nav-toggle {
        display: block;
		position: relative;
        z-index: 1001;
    }

    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%; /* Start off-screen */
        width: 300px;
        max-width: 80%;
        height: 100vh;
        padding: 6rem 2rem 2rem;
        background-color: var(--color-dark);
        border-top: 3px solid var(--color-secondary);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        z-index: 1000;
        transition: right 0.35s cubic-bezier(0.23, 1, 0.32, 1);
        overflow-y: auto;
    }

    .main-navigation.is-active {
        right: 0; /* Slide in */
    }

    .main-navigation > ul {
        flex-direction: column; /* Stack links vertically */
        align-items: stretch;
        gap: 0;
        counter-reset: kn-nav-item;
    }

    /* Numbered destinations — same light-weight/negative-tracking numeral
       treatment as .cs-beats/.stat-number elsewhere on the site, so the
       panel ties into the existing design language instead of introducing
       a new pattern. A plain rgba divider (not the parent's accidental
       #eee) gives the list rhythm; color shifts to the lime accent on
       hover/tap as the only feedback state, replacing the underline-slide
       effect that's already disabled on mobile. Scoped to ">" direct
       children throughout so it never touches a nested .sub-menu. */
    .main-navigation > ul > li {
        counter-increment: kn-nav-item;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .main-navigation > ul > li:last-child {
        border-bottom: 0;
    }
    .main-navigation > ul > li > a {
        display: flex;
        align-items: center;
        padding: 1.1rem 0;
        font-size: 1.05rem;
    }
    .main-navigation > ul > li > a::before {
        content: counter(kn-nav-item, decimal-leading-zero);
        font-family: var(--font-family-alt);
        font-weight: 400;
        letter-spacing: -1px;
        font-size: 1.1rem;
        color: var(--color-secondary-light);
        margin-right: 0.85rem;
    }
    .main-navigation > ul > li > a:hover,
    .main-navigation > ul > li > a:focus {
        color: var(--color-secondary-light);
    }

    /* "Back to Home" (interior pages only) — a utility link back out of
       the panel, not a peer destination, so it skips the numbering and
       sits visually smaller/quieter above the real list. */
    .main-navigation > ul > li.kn-back-home {
        counter-increment: none;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .main-navigation > ul > li.kn-back-home > a {
        padding: 0.4rem 0;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
    }
    .main-navigation > ul > li.kn-back-home > a::before {
        content: none;
    }
    .main-navigation > ul > li.kn-back-home > a:hover,
    .main-navigation > ul > li.kn-back-home > a:focus {
        color: var(--color-secondary-light);
    }

    .mobile-nav-toggle.is-active .icon-bar {
        background-color: var(--color-light);
    }
    /* Animate hamburger to an 'X' */
    .mobile-nav-toggle.is-active .icon-bar:nth-child(2) {
        transform: translateY(7px) rotate(45deg);
    }
    .mobile-nav-toggle.is-active .icon-bar:nth-child(3) {
        opacity: 0;
    }
    .mobile-nav-toggle.is-active .icon-bar:nth-child(4) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Page Overlay 
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
        z-index: 999;
    } */
}

/*
 ==========================================================================
  Interior Hero
 ==========================================================================
*/
.int-hero {padding:0}
.int-hero .container-fluid {padding:0}
.int-hero .container-fluid .row {margin:0}
.int-hero .hero-img.left,
.int-hero .hero-txt.left {
    border-radius:0 0 50px 0;
}
.int-hero .hero-img.right,
.int-hero .hero-txt.right {
    border-radius:0 0 0 50px;
}
.int-hero .hero-img {
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center center;
}
.int-hero .hero-txt {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:1.8rem 2rem;
    color:#ffffff;
    min-height:auto;
}
.int-hero .hero-txt h1,
.int-hero .hero-txt p {
    max-width:600px
}
.int-hero.title-only .hero-txt h1 {margin:0; font-size:2.8rem; font-weight:500 }
.int-hero .hero-serv-blocks {
	padding:0 2rem;
	text-align:center;
}
.int-hero .hero-serv-blocks img {
	width:100%;
	height:auto;
	position:relative;
	max-width:400px;
	bottom:-48px;
	margin-top:-52px;
}
.int-overlap-adjustment {margin-top:30px}
@media (min-width: 767px) {
	.int-hero .hero-serv-blocks {
		padding:2rem 3rem 0 0;
		text-align:right;
	}
	.int-hero .hero-serv-blocks img {
		bottom:0;
		margin-top:0;
	}
}
@media (min-width: 991px) {
    .int-hero .hero-txt {padding:4rem; min-height:400px;}
    .int-hero.title-only .hero-txt h1 {font-size:3.6rem;}
    .int-hero.title-only .hero-txt {padding:3rem 1rem 3rem 3rem; min-height:0;}
	.int-overlap-adjustment {margin-top:0}
	
}
@media (min-width: 1200px) {
	.int-hero .hero-serv-blocks {
		padding:0 3rem 0 0;
	}
	.int-hero .hero-serv-blocks img {
		bottom:-120px;
		margin-top:-80px;
		max-width:620px;
	}
	.int-overlap-adjustment {margin-top:30px}
}

/*
 ==========================================================================
  Landing Hero
 ==========================================================================
*/
.landing-img-bg {
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center center;
    padding:2rem 0;
}
.landing-left h1 {
    color:#ffffff;
    font-size:3rem;
    line-height:3rem;
    font-weight:800;
    text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.30);
}
.landing-left ul {
    list-style:none;
    color:#ffffff;
    margin:0 0.4rem 2rem; padding:0;
}
.landing-left ul li {
    font-size:1.2rem;
    font-weight:500;
    padding-left:1.8rem;
    position:relative;
    margin-bottom:0.2rem;
}
.landing-left ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
}
.landing-right .lp-form-box {
    padding:1.4rem; 
	background-color:rgba(40, 54, 85, 0.95);
    border-radius:12px;
    box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.30);
}
.landing-right .lp-form-box h2 {
    color:#ffffff;
    font-weight:500;
	margin:0 0 2rem;
}
@media (min-width: 991px) {
.landing-img-bg {padding:4rem 0;}
.landing-left h1 {
    font-size:4.8rem;
    line-height:4.6rem;
}
.landing-left ul li {
    font-size:1.4rem; margin-bottom:0.4rem;
}
.landing-right .lp-form-box {padding:2rem;}

}

/*
==========================================================================
 Portfolio
==========================================================================
*/
.kn-port.hero {
    height:auto;
    min-height:600px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center center;
    padding:3rem 0 0;
    position:relative; top:-68px; margin-bottom:-68px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}
.kn-port.hero .container {margin-top:60px;}
.hello {
    display:inline-block;
    background:#4D648D;
    padding:10px 20px;
    border-radius:20px 20px 20px 0;
    font-size:1rem; line-height:1rem;
    font-weight:600;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.30);
    margin:0 0 1rem;
}
.kn-port.hero h1 {
    font-size:3rem;
    line-height:auto;
    font-weight:400;
    margin:0;
    text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.30);
    letter-spacing:-2px;
}
.kn-port.hero h2 {
    font-size:1.4rem;
    line-height:1.4rem;
    font-weight:600;
    color:#c7c7c7;
    /* margin:0 0 2rem; */
    text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.30);
}
.kn-port.hero p {margin:2rem 0 2.4rem }
.kn-port.hero .profile-pic {text-align:center;}
.kn-port.hero .profile-pic img {border-radius:100%; border:6px solid #4D648D; max-width:200px;position:relative; bottom:-60px; margin:auto;}
ul.meta-nav {list-style:none;margin:0; padding:0; display:block;}
ul.meta-nav li a {margin:0 16px 12px 0;transition: var(--transition-base);}
ul.meta-nav li a.btn {display:block; margin:0 0 12px}
/* PORT STATS — 4 big-number/small-label callouts in a row, 2x2 on mobile.
   --grid-gutter-y supplies the vertical gap when the row wraps to 2x2:
   margin-bottom on a stretched height:100% flex child (like .stat-block)
   doesn't reliably create a gap (browser doesn't grow the flex line for
   it — see the same issue/fix on .case-studies-grid above), so the gutter
   var (applied to the actual .col-6 flex item, not the stretched child
   inside it) is used instead. */
.kn-port.stats-strip {padding:0 0 3rem; position:relative; z-index:5;}
.kn-port.stats-strip .stats-panel {
    background-color:#283655;
    border-radius:20px;
    border-top:3px solid var(--color-secondary);
    box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 10px 25px rgba(0, 0, 0, 0.15);
    padding:2.5rem 1.5rem;
    margin-top:120px;
}
.kn-port.stats-strip .stats-grid {--grid-gutter-y: 1.5rem;}
.kn-port.stats-strip .stat-block {
    text-align:center;
    padding:0 1rem;
}
.kn-port.stats-strip .stat-number {
    display:block;
    font-family:var(--font-family-alt);
    font-weight:400;
    letter-spacing:-2px;
    font-size:2.5rem;
    line-height:1.1;
    color:#ffffff;
    margin-bottom:0.5rem;
}
.kn-port.stats-strip .stat-label {
    display:block;
    font-size:0.9rem;
    line-height:1.4;
    color:rgba(255, 255, 255, 0.65);
    max-width:220px;
    margin:0 auto;
}
/* Dividers: horizontal between the two stacked rows on mobile (2x2),
   vertical between columns on desktop. Border lives directly on the
   .col-* flex item (not the stretched .stat-block inside it) so it
   spans the item's full stretched height without the stretch/margin
   quirk noted above. */
@media (max-width: 767px) {
    .kn-port.stats-strip .stats-grid > div:nth-child(-n+2) {
        border-bottom:1px solid rgba(255, 255, 255, 0.12);
        padding-bottom:1.5rem;
    }
}
@media (min-width: 768px) {
    .kn-port.stats-strip {padding:0 0 4rem;}
    .kn-port.stats-strip .stats-panel {margin-top:-160px; margin-bottom:-60px;}
    .kn-port.stats-strip .stat-number {font-size:3rem;}
    .kn-port.stats-strip .stats-grid > div:not(:last-child) {
        border-right:1px solid rgba(255, 255, 255, 0.12);
    }
    ul.meta-nav {display:flex;}
    ul.meta-nav li a.btn {margin:0 12px 12px 0}
}
/* PORT SHARED — small bits reused across multiple portfolio-page sections
   (Case Studies, What I Do). Kept unscoped to .kn-port so any section can
   use them rather than duplicating per-section copies. */
.kn-port .eyebrow {
    display:block;
    color:var(--color-secondary-light);
    font-weight:700;
    font-size:0.85rem;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:0.75rem;
}
.kn-port .metric-pill {
    display:inline-block;
    background-color:rgba(106, 153, 78, 0.12);
    color:var(--color-secondary);
    font-weight:700;
    font-size:0.8rem;
    padding:0.3rem 0.8rem;
    border-radius:20px;
}
/* PORT CASE STUDIES — structural framework borrowed from the "Selected
   work" concept (eyebrow + heading + intro, CTA at top-right, 3-card grid
   with thumbnail/metric-pill/heading/description), restyled to the site's
   existing conventions (white .white-panel-style cards, --color-secondary
   green accents, .btn-secondary) rather than the concept's dark navy/green
   theme. Placeholder copy uses the same 3 real projects already referenced
   in the hero's proof strip; thumbnails are placeholder gradients until
   real screenshots exist. */
.kn-port.case-studies {padding:3rem 0}
.kn-port.case-studies h2 {margin:0 0 1rem;}
.kn-port.case-studies .row.vert-center-col > p,
.kn-port.case-studies p {margin:0; color:rgba(255,255,255,0.7)}
.kn-port.case-studies .case-studies-cta {text-align:left;}
.kn-port.case-studies .case-studies-grid {
    margin-top:3rem;
    --grid-gutter-x: 1.6rem; /* ~25% wider than the sitewide 1rem gutter */
    justify-content:center; /* centers a trailing partial row instead of left-aligning it; no visible effect on full rows */
}
.kn-port.case-studies .case-study-card {
    background-color:#ffffff;
    border-radius:14px;
    box-shadow:1px 1px 30px 0px rgba(0, 0, 0, 0.10);
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:transform 0.2s ease;
}
.kn-port.case-studies .case-study-card:hover {transform:translateY(-4px);}
.kn-port.case-studies .case-study-thumb {
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255, 255, 255, 0.65);
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
}
.kn-port.case-studies .case-study-thumb img {max-width:100.5%;}
.kn-port.case-studies .case-study-thumb--a {background:linear-gradient(150deg, var(--color-primary), var(--color-dark));}
.kn-port.case-studies .case-study-thumb--b {background:linear-gradient(150deg, var(--color-secondary), #3d5a24);}
.kn-port.case-studies .case-study-thumb--c {background:linear-gradient(150deg, #6988bf, var(--color-dark));}
.kn-port.case-studies .case-study-thumb--d {background:linear-gradient(150deg, #4a7c59, var(--color-dark));}
.kn-port.case-studies .case-study-body {
    padding:1.5rem;
    flex:1;
    display:flex;
    flex-direction:column;
}
.kn-port.case-studies .metric-pill {
    align-self:flex-start;
    margin-bottom:0.9rem;
}
.kn-port.case-studies .case-study-card h3 {font-size:1.2rem; margin:0 0 0.7rem; color:var(--color-dark, #23324b);}
.kn-port.case-studies .case-study-card p {font-size:0.9rem; line-height:1.5rem; color:#6c757d; margin:0;}
@media (min-width: 768px) {
    .kn-port.case-studies .case-studies-cta {text-align:right;}
    .kn-port.case-studies {padding:6rem 0}
    .kn-port.case-studies .case-studies-grid {--grid-gutter-y: 2rem;}
}
@media (max-width: 767px) {
    .kn-port.case-studies .case-studies-cta {margin-top:1.5rem;}
    /* margin-bottom on .case-study-card itself doesn't create a gap here —
       it's stretched to height:100% by the row's align-items:stretch, so
       the browser doesn't grow the flex line to include that margin. Use
       FlexiGrid's own vertical-gutter var instead: it applies margin-top
       directly to the .col-12 flex item (not the stretched child), which
       reliably creates space between wrapped/stacked columns. */
    .kn-port.case-studies .case-studies-grid {--grid-gutter-y: 1.5rem;}
    .kn-port.case-studies .case-studies-grid {margin-top:0;}
}

.kn-port.aboutme {padding:6rem 0 0}
.kn-port.aboutme h2 {margin:0 0 1.6rem;}
.kn-port.aboutme p {margin:0 0 2rem;}
.kn-port.aboutme img {display:none;}
/* PORT WHAT I DO / HOW I WORK — structural framework borrowed from the
   wireframe's "What I do + how I work" section (heading + tag line + intro,
   a 5-step process strip, then one detail row per step with a lead line,
   description, and a tool-tag list), restyled to existing conventions:
   .eyebrow/.metric-pill reused from Case Studies (now shared, see above),
   .stat-number's light-weight/tight-tracking numeral treatment reused for
   the step numbers, and the divider-line convention from the Stats panel
   reused between service rows. Tool tags use an outlined-pill treatment
   (same visual family as .btn-secondary) rather than a new one-off style. */
.kn-port.how-i-work {padding:3rem 0 6rem; background:#222E49; border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1)}
.kn-port.how-i-work h2 {margin:0 0 1.25rem;}
.how-i-work-tags {margin:0 0 1.5rem; display:flex; flex-wrap:wrap; gap:0.5rem;}
.kn-port.how-i-work > .container > .row p:last-child {
    color:rgba(255, 255, 255, 0.7);
    margin:0;
}
/* Phase Tabs Carousel — a row of panel-like buttons (.phase-tab, dark,
   on-brand) drives a single crossfading content panel (.phase-panels/
   .phase-panel), following the same absolute-stack/opacity-fade convention
   as .simple-fade-carousel elsewhere in this file (see the "Simple
   Auto-Fade Carousel" section) so the two carousels on this site behave
   consistently. JS lives in custom.js under "Phase Tabs Carousel". The
   .phase-tab-timer pie's CSS animation duration (6s) must stay in sync
   with the `phaseInterval` constant in that JS.

   2026-07 contrast pass: the panel moved from a dark, low-contrast surface
   to a near-white one (#F7F8FA) so it reads as a clear anchor and rhymes
   with the white .case-study-card surfaces in Selected Work above — same
   box-shadow/radius values as that section, reused deliberately rather
   than inventing a new elevation style. Each panel also gained a
   copy/image split (.phase-panel-inner) so the panel has a real job for
   its width instead of holding a few short lines in a wide box; the image
   side is a placeholder gradient (same visual language as
   .case-study-thumb) until real per-phase artifacts (heatmap, wireframe,
   UI shot, dashboard, test results) replace them — swap each
   .phase-panel-img div for a real <img> when those exist. Tabs: inactive
   state was pushed further down in contrast (and active pushed up to a
   solid lime fill) specifically so the active tab reads unambiguously
   against its neighbors — see the "Fix contrast first" note this was
   built against. */
.phase-carousel {margin-top:2.5rem;}
.phase-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:0.6rem;
    padding:0;
    margin:0;
    list-style:none;
}
.phase-tab {
    position:relative;
    flex:1 1 auto;
    min-width:130px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.2rem;
    padding:0.9rem 1.1rem 1rem;
    background-color:#283655;
    border:1px solid rgba(255, 255, 255, 0.08);
    border-radius:12px;
    cursor:pointer;
    text-align:left;
    font-family:inherit;
    transition:background-color 0.2s ease, border-color 0.2s ease;
}
.phase-tab:hover {
    background-color:rgba(255, 255, 255, 0.06);
    border-color:rgba(255, 255, 255, 0.18);
}
.phase-tab:focus-visible {
    outline:1px solid #A4C93C;
    outline-offset:2px;
}
.phase-tab-num {
    font-family:var(--font-family-alt);
    font-weight:400;
    letter-spacing:-1px;
    font-size:1.4rem;
    color:rgba(255, 255, 255, 0.28);
    transition:color 0.2s ease;

}
.phase-tab-name {
    font-family:var(--font-family-alt);
    font-weight:700;
    font-size:1rem;
    color:rgba(255, 255, 255, 0.55);
    transition:color 0.2s ease;
}
.phase-tab:hover .phase-tab-name {color:rgba(255, 255, 255, 0.8);}
/* Small circular "pie" timer, top-right of each tab, in place of the old
   bottom bar — shades of blue (not the brand lime) so it reads as a quiet
   utility indicator rather than another accent competing for attention.
   conic-gradient wedge animated via a registered custom property so the
   browser can smoothly tween it like any other animatable value; browsers
   without @property support (very old Firefox) just won't animate the
   wedge smoothly and will jump straight to full — a harmless degradation,
   not a broken state, since the JS-driven timing itself is unaffected. */
@property --phase-pie-progress {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}
.phase-tab-timer {
    position:absolute;
    top:0.6rem;
    right:0.6rem;
    width:14px;
    height:14px;
    border-radius:50%;
    background:conic-gradient(#6988bf var(--phase-pie-progress), rgba(105, 136, 191, 0.18) 0);
    --phase-pie-progress:0%;
}
.phase-tab-timer.is-running {
    animation:phaseTabPie 6s linear forwards;
}
@keyframes phaseTabPie {
    from {--phase-pie-progress:0%;}
    to {--phase-pie-progress:100%;}
}
/* Active tab: no longer a solid green fill (read as too heavy/disconnected
   from the rest of the section) — instead a white border + white name on
   the same dark surface as the inactive tabs, so the highlight echoes the
   white panel below instead of competing with it. The lime progress bar
   is the one deliberate hit of brand color left on the tab itself. */
.phase-tab.is-active {
    background-color:#283655;
    border:1px solid #ffffff;
    padding:calc(0.9rem - 1px) 1.1rem calc(1rem - 1px);
}
.phase-tab.is-active .phase-tab-num {color:var(--color-secondary-light);}
.phase-tab.is-active .phase-tab-name {color:#ffffff;}
.phase-panels {
    position:relative;
    margin-top:1.5rem;
    transition:height 0.25s ease-in-out;
}
.phase-panel {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background-color:#F7F8FA;
    border-radius:16px;
    box-shadow:1px 1px 30px 0px rgba(0, 0, 0, 0.10);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s ease-in-out;
}
.phase-panel.is-active {
    opacity:1;
    position:relative;
    pointer-events:auto;
}
.phase-panel:focus-visible {
    outline:2px solid #A4C93C;
    outline-offset:-2px;
}
.phase-panel-inner {
    display:flex;
    align-items:stretch;
    gap:1.75rem;
    padding:1.75rem;
}
.phase-panel-copy {
    /* Grow-ratio (11:9 ≈ 55:45) rather than percentage flex-basis: with a
       gap on the flex container, 55%+45% basis leaves no room for that
       gap and overflows the padded edge — grow ratios let flexbox account
       for the gap correctly when dividing the remaining space. */
    flex:11 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.phase-panel-media {flex:9 1 0; min-width:0;}
.phase-panel-media img {
    border-radius:10px;
    border:1px solid #e1e4e9;
}
.phase-panel-img {
    height:100%;
    min-height:160px;
    border-radius:10px;
    border:1px solid #e1e4e9;
    background:linear-gradient(150deg, var(--color-primary), var(--color-dark));
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
    text-align:center;
    color:rgba(255, 255, 255, 0.7);
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
}
.phase-panel-img img {width:100%;}
.phase-panel-img--strategize {background:linear-gradient(150deg, var(--color-secondary), #3d5a24);}
.phase-panel-img--build {background:linear-gradient(150deg, #6988bf, var(--color-dark));}
.phase-panel-img--measure {background:linear-gradient(150deg, #4d648d, #23324b);}
.phase-panel-img--optimize {background:linear-gradient(150deg, #A4C93C, #5c7a2c);}
.phase-panel .service-lead {
    font-family:var(--font-family-alt);
    font-weight:600;
    font-size:1.25rem;
    color:var(--color-dark);
    margin:0 0 0.6rem;
}
.phase-panel-copy > p:not(.service-lead) {color:#6c757d; margin:0 0 1.1rem; font-size:1rem; line-height:1.6rem;}
.tool-row {display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem 0.4rem;}
.tool-label {
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#9aa3b2;
    display:flex;
    align-items:center;
    width:100%;
    margin:0.6rem 0 1.1rem;
}
.tool-label:after {
    content:'';
    flex:1;
    display:block;
    height:2px;
    margin-left:8px;
    background:#e1e4e9;
}
.tool-tag {
    font-size:0.75rem;
    padding:0.25rem 0.75rem;
    border-radius:20px;
    background-color:rgba(77,100,141,0.2);
    border:1px solid rgba(77,100,141,0.21);
    color:var(--color-dark);
}
@media (max-width: 767px) {
    .phase-panel-inner {flex-direction:column;}
    .phase-panel-copy, .phase-panel-media {flex:1 1 auto; max-width:100%;}
    .phase-panel-img {min-height:140px;}
}
@media (min-width: 768px) {
    .kn-port.how-i-work {padding:6rem 0}
}

/*
 ==========================================================================
 Case Study Template (single-project pages, e.g. case-study-property-mgmt.php)
 ==========================================================================
 Reuses existing components wherever the shape matches exactly rather than
 introducing parallel ones: .eyebrow, .btn/.btn-main, .stats-strip's whole
 stat-band (panel/grid/number/label), and .phase-panel-img placeholders.
 Net-new rules below are only for shapes nothing else on the site already
 covers (the hero header/meta row, the numbered "beats" list, the insight
 callout, and the light "result" panel) — each modeled on an existing
 convention (numeral treatment from .stat-number/.phase-tab-num,
 left-accent card from .quote-card, white elevated panel from .phase-panel).

 Page flow (2026-07 simplified pass): hero → stats → problem → what I did
 → before/after → result → takeaway. Earlier zones (hero screenshot, "at a
 glance", client quote, "what's next", closing nav/CTA row) were cut for a
 tighter read; their markup/CSS was removed rather than left dead, so if
 those come back later they'll need rebuilding, not just uncommenting.
*/
/* Full-width band wrapping the hero + stats so ONE background image spans
   both sections continuously and bleeds UP into the header. Same mechanism
   as the homepage hero (.kn-port.hero): pull the band up by ~the header's
   height with position:relative + top, cancel the flow gap that leaves with
   a matching negative margin-bottom, then add an equal padding-top back so
   the hero text still clears the header. #int-header is transparent (its
   bg-color is commented out) + z-index:999, so the band's image shows
   through behind the logo/nav. isolation:isolate keeps the scrim/section
   z-indexing below self-contained so it never fights the header. Swap the
   inline background-image url per case study; a dark scrim (::after) keeps
   white hero text legible over any image. */
.cs-topband {
    position:relative;
    isolation:isolate;
    top:-68px;
    margin-bottom:-68px;
    padding-top:68px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    background-color:var(--color-dark);
}
 .cs-topband::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
      circle 620px at 50% -40%,
      rgba(105,136,191,0.5),  transparent
    );
    /*  background:linear-gradient(180deg, rgba(40,54,85,1.72) 0%, rgba(40,54,85,0.88) 100%); */
    pointer-events:none;
    z-index:0;
} 
.cs-topband > section {position:relative; z-index:1;}
@media (min-width: 768px) {
    .cs-topband {top:-110px; margin-bottom:-110px; padding-top:110px;}
}
.kn-port.cs-hero {padding:3rem 0 0;}
.kn-port.cs-hero h1 {
    font-family:var(--font-family-alt);
    font-weight:600;
    letter-spacing:-0.5px;
    font-size:2.25rem;
    line-height:1.15;
    color:#ffffff;
    max-width:26ch;
    margin:0 0 1.6rem;
}
/* Meta row — was a single unlabeled "Client · Role · Stack" line, easy to
   misread as one run-on fact. Small caption labels over each value make
   the three (or four, with Duration) fields legible at a glance without
   needing to parse the middots. Divider between items mirrors the
   stats-strip's own desktop vertical-divider convention. */
.cs-meta-row {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap:1.75rem;
    margin-top:1.25rem;
}
.cs-meta-item {
    display:flex;
    flex-direction:column;
    gap:0.3rem;
    min-width:0;
}
.cs-meta-item:not(:first-child) {
    padding-left:1.75rem;
    border-left:1px solid rgba(255, 255, 255, 0.12);
}
.cs-meta-label {
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:rgba(255, 255, 255, 0.4);
}
.cs-meta-value {
    font-size:0.9rem;
    color:rgba(255, 255, 255, 0.85);
}
@media (max-width: 575px) {

    .cs-meta-row {grid-template-columns:1fr; gap:0.85rem;}
    .cs-meta-item:not(:first-child) {padding-left:0; border-left:none;}
}
/* Reuses .kn-port.stats-strip's whole stat-band (panel/grid/number/label)
   as-is — only the panel's homepage-specific overlap margin (meant to
   ride up over the hero IMAGE on portfolio.php) is reset here, since this
   page's hero is plain text with nothing for it to overlap into. Number
   size is also dialed back from the homepage's 2.5rem/3rem: inside the
   narrower .container-narrow, four columns at that size wrapped/crowded,
   especially for word-length values like "WooCommerce". */
.kn-port.cs-stats .stats-panel {margin-top:2.5rem;}
.kn-port.cs-stats .stat-number {font-size:1.2rem; font-weight:600; letter-spacing:-0.5px;}
@media (min-width: 768px) {
    .kn-port.cs-hero {padding:5rem 0 0;}
    .kn-port.cs-stats .stats-panel {margin-top:2.5rem; margin-bottom:0;}
    .kn-port.cs-stats .stat-number {font-size:1.6rem;}
}
/* Below the stat band, the page switches to a white "document" surface —
   the case study itself read as a report/print piece rather than another
   dark marketing section. Accent color switches from this site's dark-bg
   lime (#A4C93C, used on .quote-card/.phase-tab elsewhere) to the deeper
   --color-secondary green already used for accents on light surfaces
   (.case-study-card's metric-pill): lime reads correctly on navy, but is
   too low-contrast to use as body-adjacent accent color on white. Note
   .quote-card and .phase-panel-img are shared with dark sections
   elsewhere (Testimonials, How I Do It) — their light-surface overrides
   here are scoped under .case-study-body so those other sections are
   untouched. */
.kn-port.case-study-body {background-color:#ffffff; padding:3rem 0 5rem;}
.kn-port.case-study-body > .container-narrow > * {margin-top:3rem;}
.kn-port.case-study-body > .container-narrow > *:first-child {margin-top:0;}
.kn-port.case-study-body .cs-block h2 {color:var(--color-dark); margin:0 0 1.2rem; font-size:1.6rem;; letter-spacing:-0.5px;}
.kn-port.case-study-body .cs-body {color:#495667; line-height:1.7; margin:0;}
.kn-port.case-study-body p {font-size:1.1rem; line-height:1.6;}
/* Floated placeholder image alongside the prose blocks. Lives inside the
   first .cs-block (before "The Problem" h2) so its top aligns with that
   heading; floated right, the block text wraps to its left and — because
   .cs-block isn't a BFC — following blocks (What I Did) wrap past it too,
   until it clears. Square 400x400 (aspect-ratio keeps it square if it has
   to shrink on narrower widths). Gradient + label match the .phase-panel-img
   placeholder convention; drop in a real <img> and it covers via object-fit.
   .cs-before-after clears the float so the flex before/after row always
   starts on its own full-width line. On mobile the float drops and the
   image goes full-width, stacking above "The Problem". */
.cs-float-img {
    float:right;
    width:400px;
    height:auto;
    max-width:100%;
    margin:0 0 2rem 2.4rem;
    border-radius:12px;
    border:1px solid #e1e4e9;
    overflow:hidden;
    box-shadow: 0 24px 48px -20px rgba(23, 31, 51, 0.35);
}
.cs-float-img img {width:100%; height:100%; object-fit:cover; display:block;}
.kn-port.case-study-body .cs-before-after {clear:both;}
@media (max-width: 767px) {
    .cs-float-img {float:none; width:100%; max-width:none; margin:0 0 1.5rem;}
}
/* Numbered "beats" list — same light-weight/negative-tracking numeral
   treatment as .stat-number/.phase-tab-num, so "01/02/03" here reads as
   the same family as the rest of the site's numerals rather than a
   one-off counter style. */
.cs-beats {list-style:none; counter-reset:beat; margin:0; padding:0;}
.kn-port.case-study-body .cs-beats li {
    counter-increment:beat;
    position:relative;
    padding-left:3rem;
    margin-bottom:1.25rem;
    color:#495667;
    line-height:1.6;
    font-size:1.1rem;
}
.cs-beats li:last-child {margin-bottom:0;}
.kn-port.case-study-body .cs-beats li::before {
    content:counter(beat, decimal-leading-zero);
    position:absolute;
    left:0;
    top:-0.05em;
    font-family:var(--font-family-alt);
    font-weight:400;
    letter-spacing:-1px;
    font-size:1.5rem;
    color:var(--color-secondary);
}
.kn-port.case-study-body .cs-beats li b {color:var(--color-dark);}
.cs-before-after {--grid-gutter-y: 1.5rem;--grid-gutter-x: 3rem;}
.cs-before-after .phase-panel-img {min-height:100px;}
/* A "before" shot with no "after" counterpart in the same row (the after
   is a wide multi-page composite that needs its own full-width row below
   instead) — centers the lone half-width column instead of it sitting
   flush left with an empty gap beside it. */
.cs-before-after.cs-before-solo {justify-content:center;}
/* Plain, uncropped image at the container's own width (still inside
   .container-narrow, no breakout) for a composite/mockup image (e.g.
   several site pages fanned out) that isn't a single-page screenshot —
   the .cs-shot browser chrome would misrepresent it as "one webpage", and
   a card-style border/shadow would read as floating on top of the page
   rather than sitting directly on it. No card chrome at all. */
.cs-plain-shot {margin:0;}
.cs-plain-shot img {width:100%; height:auto; display:block;}
/* "Browser window" frame — for genuine webpage/UI screenshots (before/
   after shots, product UI, the floated feature image when it IS a site
   screenshot like the Ibotta homepage). A fake toolbar (traffic-light dots
   + a URL pill, pure CSS, no mockup image asset) makes the placeholder
   read as "this is a webpage" at a glance instead of a plain rounded
   rectangle. Reserve this for actual screenshots — a real photo (e.g. the
   property-management case study's floated house photo) should keep the plain rounded/
   shadow .cs-float-img treatment instead, since a browser frame on a photo
   reads as a mistake, not a design choice.
   Caption lives in a figcaption OUTSIDE the framed window (not layered
   over the image like the old in-image <span> was) so it never fights the
   screenshot for contrast, and sits centered flush under the window at
   the same width. */
.cs-shot {margin:0;}
.cs-shot-window {
    border-radius:10px;
    border:1px solid #e1e4e9;
    box-shadow:0 24px 48px -20px rgba(23, 31, 51, 0.35);
    overflow:hidden;
    background-color:#ffffff;
}
.cs-shot-toolbar {
    display:flex;
    align-items:center;
    gap:5px;
    padding:0.7rem 0.85rem;
    background-color:#EDEEF1;
    border-bottom:1px solid #e1e4e9;
}
.cs-shot-dot {width:8px; height:8px; border-radius:50%; background-color:#d5d8dd; flex:0 0 auto;}
.cs-shot-url {flex:1; height:14px; margin-left:8px; border-radius:20px; background-color:#ffffff; border:1px solid #e1e4e9;}
.cs-shot-body {display:flex; align-items:center; justify-content:center; min-height:200px;}
.cs-shot-body.phase-panel-img {border-radius:0; border:0; padding:0;}
.cs-shot-caption {
    margin-top:0.85rem;
    text-align:center;
    color:#8891a0;
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}
/* Same frame, applied to the floated feature image when it's a screenshot
   (adds "cs-shot-frame" alongside .cs-float-img). Overrides the plain
   gradient/centered-label layout with a toolbar-on-top flex column; the
   image fills the remaining space at the fixed aspect-ratio via flex:1. */
.cs-float-img.cs-shot-frame {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    background:none;
}
.cs-float-img.cs-shot-frame .cs-shot-body {flex:1; min-height:0;}
.kn-port.case-study-body .cs-insight {
    background:linear-gradient(90deg, rgba(106, 153, 78, 0.10), rgba(106, 153, 78, 0));
    border-left:3px solid var(--color-secondary);
    border-radius:0 14px 14px 0;
    padding:1.5rem 1.75rem;
}
.kn-port.case-study-body .cs-insight p {margin:0; color:var(--color-dark); font-weight:600; font-size:1.15rem; line-height:1.5; max-width:52ch;}
.kn-port.case-study-body .cs-insight span {
    display:block;
    margin-top:0.6rem;
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#6c757d;
}
/* Elevated panel for "the result" — the page's proof moment. Still a
   white card per the site's established white-panel-on-dark convention
   elsewhere, but now needs its own border to read as a distinct card
   rather than disappearing into the equally-white page background. */
.cs-result {
    background-color:#F7F8FA;
    border:1px solid #e1e4e9;
    border-radius:16px;
    box-shadow:1px 1px 30px 0px rgba(0, 0, 0, 0.10);
    padding:1.75rem 2rem;
}
.cs-result h2 {color:var(--color-dark); margin:0 0 0.75rem;}
.cs-result p {color:#495667; margin:0; line-height:1.7;}
.cs-result strong {color:var(--color-dark);}
@media (max-width: 767px) {
    .kn-port.cs-hero h1 {font-size:1.85rem;}
}

/*
 ==========================================================================
 Contact Template (contact.php)
 ==========================================================================
 Reuses .eyebrow, .container-narrow, and .row.centered-col/.centered-text
 (the same centered-intro pattern the prefooter CTA already uses elsewhere)
 for the header. The form card borrows the subtle-elevation surface from
 .phase-tab/.quote-card (rgba white fill + hairline border) rather than
 the white "document" panel from the case study template — a form still
 reads as part of a dark marketing page, not a report. The form itself is
 the existing wpcf7-form.vDark styling (see the "Contact Form 7" section
 further down) — already built for exactly this dark-background case.
*/
.kn-port.contact-hero {padding:6rem 0 0;}
.kn-port.contact-hero h1 {
    font-family:var(--font-family-alt);
    font-weight:600;
    letter-spacing:-0.5px;
    font-size:2.5rem;
    line-height:1.15;
    color:#ffffff;
    margin:0 0 1rem;
}
.kn-port.contact-hero p {
    color:rgba(255, 255, 255, 0.7);
    font-size:1.05rem;
    line-height:1.6;
    max-width:60ch;
    margin:0 auto;
}
.kn-port.contact-form-section {padding:3rem 0 8rem;}
.contact-form-card {
    background-color:rgba(255, 255, 255, 0.04);
    border:1px solid rgba(255, 255, 255, 0.10);
    border-radius:16px;
    padding:2.5rem;
}
@media (max-width: 575px) {
    .kn-port.contact-hero h1 {font-size:1.85rem;}
    .contact-form-card {padding:1.75rem;}
}

/*
 ==========================================================================
 Blog Archive (home.php)
 ==========================================================================
 .blog-card is modeled directly on .case-study-card (thumb + pill-like
 date + heading + excerpt, same white/shadow/radius treatment) so blog
 cards read as the same family as the Selected Work cards, just with a
 date instead of a metric-pill.
*/
.kn-port.blog-hero {padding:6rem 0 3rem;}
.kn-port.blog-hero h1 {
    font-family:var(--font-family-alt);
    font-weight:600;
    letter-spacing:-0.5px;
    font-size:2.5rem;
    line-height:1.15;
    color:#ffffff;
    max-width:20ch;
    margin:0 0 1rem;
}
.kn-port.blog-hero p {color:rgba(255, 255, 255, 0.7); font-size:1.05rem; line-height:1.6; max-width:60ch; margin:0;}
.kn-port.blog-archive {padding:0 0 6rem;}
/* Vertical gutter between wrapped rows — margin-bottom on the stretched
   height:100% .blog-card doesn't create a gap here (same stretch/margin
   quirk noted on .case-studies-grid/.stats-grid above), so this uses
   FlexiGrid's vertical-gutter var instead, applied to the actual .col-*
   flex item. Needed at EVERY width once there's more than one row of
   cards, not just on mobile — this was previously mobile-only, which is
   why rows 1 and 2 had no gap between them on desktop. Horizontal gutter
   also widened to match .case-studies-grid's convention (1.6rem vs. the
   sitewide 1rem default). */
.blog-grid {
    margin-top:1rem;
    --grid-gutter-x: 1.6rem;
    --grid-gutter-y: 1.6rem;
}
.blog-card {
    background-color:#ffffff;
    border-radius:16px;
    box-shadow:1px 1px 30px 0px rgba(0, 0, 0, 0.10);
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:transform 0.2s ease;
}
.blog-card:hover {transform:translateY(-4px); text-decoration:none;}
/* The whole card is one <a>; the global a:hover underline (specificity
   0,1,1) otherwise beats .blog-card's text-decoration:none — restated here
   and on the inner text so nothing underlines on hover. */
.blog-card:hover h3, .blog-card:hover p, .blog-card:hover .blog-card-date {text-decoration:none;}
.blog-card-thumb {
    height:180px;
    background:linear-gradient(150deg, var(--color-primary), var(--color-dark));
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.blog-card-thumb img {width:100%; height:100%; object-fit:cover;}
.blog-card-thumb span {
    color:rgba(255, 255, 255, 0.65);
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
}
.blog-card-body {padding:1.5rem; flex:1; display:flex; flex-direction:column;}
.blog-card-date {
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--color-secondary);
    margin-bottom:0.6rem;
}
.blog-card h3 {font-size:1.15rem; margin:0 0 0.6rem; color:var(--color-dark);}
.blog-card p {font-size:0.9rem; line-height:1.6; color:#6c757d; margin:0;}
.blog-pagination {margin-top:3rem;}
.blog-pagination .nav-links {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
}
.blog-pagination a {color:#ffffff; text-decoration:none; font-weight:600; font-size:0.9rem;}
.blog-pagination a:hover {color:var(--color-secondary-light);}
@media (max-width: 767px) {
    .kn-port.blog-hero h1 {font-size:1.85rem;}
}

/*
 ==========================================================================
 Single Post (single.php)
 ==========================================================================
 Same dark-page → white-"document"-panel treatment as the case study
 template (.case-study-body): the article itself is real block-editor
 content via the_content(), so this is a typography pass over core block
 output rather than hand-built zones. .beautiful-box (an existing custom
 block style already used inside these posts) gets a hairline border so
 it still reads as a distinct card now that the surrounding page is white
 instead of its original light-grey background.
*/
/* No separate post-hero section — the white document panel sits directly
   under the header in normal flow. */
.kn-port.post-body {background-color:#ffffff; padding:3rem 0 5rem;}
.kn-port.post-body .entry-content {color:#333; font-size:1.05rem; line-height:1.75;}
.kn-port.post-body .entry-content > *:first-child {margin-top:0;}
.kn-port.post-body .entry-content h1,
.kn-port.post-body .entry-content h2,
.kn-port.post-body .entry-content h3,
.kn-port.post-body .entry-content h4 {color:var(--color-dark); margin:2rem 0 1rem;}
.kn-port.post-body .entry-content h1 {
    font-family:var(--font-family-alt);
    font-weight:600;
    letter-spacing:-0.5px;
    font-size:2.25rem;
    line-height:1.2;
}
.kn-port.post-body .entry-content p {margin:0 0 1.5rem;}
.kn-port.post-body .entry-content a {color:var(--color-secondary); text-decoration:underline;}
.kn-port.post-body .entry-content ul,
.kn-port.post-body .entry-content ol {margin:0 0 1.5rem; padding-left:1.5rem;}
.kn-port.post-body .entry-content li {margin-bottom:0.5rem;}
.kn-port.post-body .entry-content img,
.kn-port.post-body .entry-content figure {border-radius:12px; max-width:100%; height:auto;}
.kn-port.post-body .entry-content blockquote {
    border-left:3px solid var(--color-secondary);
    margin:1.75rem 0;
    padding:0.25rem 0 0.25rem 1.5rem;
    font-style:italic;
    color:#495667;
}
.kn-port.post-body .entry-content .wp-block-post-date {
    display:block;
    font-size:0.85rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#9aa3b2;
    margin:0 0 0.5rem;
}
.kn-port.post-body .entry-content .wp-block-post-featured-image {margin:0 0 2rem;}
.kn-port.post-body .entry-content .wp-block-post-featured-image img {width:100%; height:auto;}
.kn-port.post-body .entry-content .beautiful-box {
    border:1px solid #e1e4e9;
    box-shadow:1px 1px 20px 0px rgba(0, 0, 0, 0.06);
}
@media (max-width: 767px) {
    .kn-port.post-body .entry-content h1 {font-size:1.85rem;}
}

.kn-port.port {
    padding:8rem 0;
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
.simple-fade-carousel {
    position: relative;
    transition: height 0.25s ease-in-out;
}
.simple-fade-carousel > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; 
}

.simple-fade-carousel > *.is-active {
    opacity: 1;
    position: relative;
}

.kn-port.contact {
    padding:0 0 12rem;
}
@media (min-width: 767px) {
    .kn-port.hero {padding:3rem 0; position:relative; top:-116px; margin-bottom:-116px;}
    .kn-port.hero .container {margin-top:100px;}
    .kn-port.hero .profile-pic img {bottom:auto;}
    .kn-port.aboutme img {display:block; width:100%; height:auto; max-width:500px;}
    .kn-port.aboutme {padding:8rem 0 0}
}
@media (min-width: 991px) {
    .kn-port.hero {height:960px; padding:2rem 0;}
    .kn-port.hero .container {margin-top:0;}
    .kn-port.hero h1 {font-size:4rem;}
    .kn-port.hero h2 {font-size:1.7rem;}
    .kn-port.hero .profile-pic img {max-width:248px;}
}

/*
 ==========================================================================
  Branding Strip
 ==========================================================================
*/
.branding-strip {
    padding:1.6rem 0; 
    background-color:#283655;
    color:#ffffff;
}
.branding-strip .tagline {
    text-align:left;
    margin:0.6rem 0 0 0;
}
@media (min-width: 991px) {
.branding-strip .tagline {
    text-align:right;
    margin:0;
}
}

/*
 ==========================================================================
  Centered Text
 ==========================================================================
*/
.centered-text {text-align:center;}
.centered-text h2 {
    font-size:2rem;
}
.centered-text .narrow {margin:0 auto; max-width:600px}
.centered-text .icon {
    display:block;
    margin:0 auto 1rem;
    max-width:90px;
}
.blue-bg .centered-text h1,
.blue-bg .centered-text h2,
.blue-bg .centered-text p {color:#ffffff;}
@media (min-width: 991px) {
    .centered-text h2 {
        font-size:2.5rem;
    }
    .centered-text p {
        font-size:1.4rem;
    }
}

/*
 ==========================================================================
  Services Section
 ==========================================================================
*/
.hp-srv-item {
	margin-bottom:2.5rem; 
	text-align:center;
}
.hp-srv-item a {text-decoration:none;}
.hp-srv-item h3 {
    text-align:center;
    margin-bottom:1.4rem;
    padding:0;
    text-decoration:none;
}
.hp-srv-item h3 span {
       display:none; 
}
.srv-icon {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100px; height:100px;
    margin:0 auto 1rem;
    border-radius:10rem;
}
.srv-icon.website-management {background-color:#bdbdbd}
.srv-icon.graphic-design {background-color:#6988BF}
.srv-icon.web-development {background-color:#4D648D}
.srv-icon.marketing-strategy {background-color:#A7C957}

.hp-srv-item ul {
    margin:0 0 1rem; 
    display:none; 
    text-align:left; 
    /*border-top:1px solid #D9D9D9;*/
	background-color:#ffffff;
	font-size:1rem;
	border-radius:12px;
	padding:1.4rem 1rem;
	line-height:1.5rem;
	flex-grow:1;
}
.hp-srv-item li {
    list-style:none;
    padding:0; margin:0 0 0.7rem;
	position:relative;
}
.hp-srv-item li.checkbox {
	padding-left:1.4rem;
}
.hp-srv-item li.checkbox::before {
	content:'\f058';
	font-family:FontAwesome;
	color:#a7c957;
	position:absolute;
	left:0;
	top:0;
}
.hp-srv-item li strong {display:block; font-weight:600;}
.hp-srv-item li a {font-weight:700; text-decoration:underline;}
.hp-srv-item li a i {font-size:12px; margin-left:4px;}
.hp-srv-item .btn {display:inline-block; margin:0 auto;}

.fine-print p {padding:1rem 0 0; font-size:1rem;}

 

@media (min-width: 991px) {
    .hp-srv-item {
        margin:0 0.6rem;
		display:flex;
		flex-direction:column;
		height:100%;
    }
    .hp-srv-item h3 span {
       display:block; 
    }
    .hp-srv-item ul {display:block;}
    .hp-srv-item .btn {display:none;}
    .fine-print p {padding:1rem 10rem 0;}
}

/*
 ==========================================================================
  Offerings
 ==========================================================================
*/
#offerings .col-12 {padding-bottom:2rem;} 
.int-serv-item {
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.10);
    padding-bottom:1.6rem;
	height:100%;
}
.int-serv-item h3 {
    border-radius: 16px 16px 0px 0px;
    background: #4D648D;
    color:#ffffff;
    text-align:center;
    padding:16px;
    font-size:1.4rem;
    margin:0;
}
.int-serv-item h3 span {
    display:block; font-size:0.6rem;
}
.int-serv-item p,
.int-serv-item ul {
    margin-left:1.6rem; margin-right:1.6rem;
    padding:0;
}
.int-serv-item ul {
    margin-bottom:1rem;
}
.int-serv-item li {
    list-style: none;
    padding:0; 
	margin:0 0 0.7rem;
	line-height:1.7rem;
}
.int-serv-item li strong {display:block;}
.int-serv-item .pricing {
    text-align:center;
    font-size:1.2rem;
    margin-top:1rem;
    margin-bottom:1.2rem;
    padding-bottom:1rem;
    border-bottom:1px solid #D9D9D9;
}
.int-serv-item .pricing strong {font-weight:700; color:#4D648D;}
.int-serv-item .hours {text-align:center; margin-bottom:1.2rem;}
.int-serv-item li.checkbox {
	position:relative;
	padding-left:1.7rem;
}
.int-serv-item li.checkbox::before {
	content:'\f058';
	font-family:FontAwesome;
	color:#a7c957;
	position:absolute;
	left:0;
	top:0;
}
@media (min-width: 991px) {
.int-serv-item {
    margin:0 1rem;
}
}

/*
 ==========================================================================
  About (Wooden) Section
 ==========================================================================
*/

.hp-about {
    background-attachment: fixed; /* Fallback for simple parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* For positioning content inside */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:0;
    color:#ffffff;
}
.hp-about .container {height:100%;}
.hp-about .row {
    height:100%;
    align-items:flex-end;
}
.hp-about h2 {font-size:2.5rem}
.hp-about p {font-weight:500;}
.hp-about a {color:#ffffff; text-decoration:underline;}
.hp-about-txt {padding:2rem 2rem 0;}
.hp-about-txt .panel {
    border-radius:12px;
    padding:1.4rem;
    background-color:rgba(0,0,0,0.6);
}
.hp-about-img {padding:2rem; text-align:center;}
.hp-about-img img {border-radius:12px; width:100%; height:auto;}

@media (min-width: 576px) {
    .hp-about-txt {padding:2rem;}
    .hp-about {border-radius:16px}
}
/*
 ==========================================================================
  About (long copy)
 ==========================================================================
*/
.long-copy img {display:none;}
.long-copy h1 {
    color:#4D648D;
    font-size:2.2em;
    letter-spacing:-0.5px;
    font-weight:500;
}
.long-copy p, .long-copy ul li {
    font-size:1.1rem;
    font-weight:500;
}
.long-copy p.large {font-size:1.2rem;}
.long-copy ul {margin:0 0 1.4rem; padding:0 2rem;}
.long-copy ul li {margin:0 0 0.4rem;}

@media (min-width: 991px) {
    .long-copy h1 {font-size:3rem;}
    .long-copy p.large {font-size:1.4rem;}
    .long-copy img {
        display:block;
        width:100%;
        height:auto;
    }
}

/*
 ==========================================================================
  Panel Content
 ==========================================================================
*/
.panel-stack {width:100%;}
.panel-stack .panel {
    background-color:#ffffff;
    border-radius:16px;
    box-shadow: 1px 1px 30px 0px rgba(0, 0, 0, 0.10);
    padding:2rem;
    width:100%;
    display:block;
    margin:0 auto 3rem;
}
.panel-stack .panel p {margin:0 0 1rem;}
.panel-stack .panel ul {padding:0 1rem 0; margin:0;}
.panel-stack .challenges img {
    max-width:180px; 
    margin:0 auto 16px;
    width:100%; 
    height:auto;
}
.panel-stack .challenges .ln-item {
    padding:0 0 1.2rem;
    margin:0 0 1.2rem;
    border-bottom:1px solid #D9D9D9;
}
.panel-stack .challenges .ln-item.tbl-header {background-color:#F4F4F4}
.panel-stack .challenges h2 {margin:0 0 2rem;}
.panel-stack .challenges .ln-item:last-child {border-bottom:none;}
.panel-stack .challenges .row.reverse {flex-direction:column-reverse;}
@media (min-width: 767px) { 
    .panel-stack .panel {width:80%;}
    .panel-stack .panel.full {width:100%;}
    .panel-stack .challenges .row.reverse {flex-direction:row;}
    .panel-stack .challenges img {
        max-width:220px; width:100%; height:auto;
    }
}
/*
 ==========================================================================
  Contact button
 ==========================================================================
*/

.scroll-to-contact-btn {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 998;
    background-color: rgba(106,153,78,0.9);
    color: white;
    height:60px; width:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration: none;
    font-size:1.4rem;
    font-weight: 500;
    border-radius:100px;
    /* Initially hidden */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}
.scroll-to-contact-btn:hover {
    color:#ffffff;
    background-color: rgba(106,153,78,1);
    text-decoration:none;
    transform: translateY(-50%) scale(1.02);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.scroll-to-contact-btn.is-visible {
    opacity: 1;
    visibility: visible;
}

/*
 ==========================================================================
 Testimonial
 ==========================================================================
 Static 3-card grid (replaces the old sliding carousel). Cards borrow the
 dark, subtly-elevated surface + lime left-accent treatment established by
 the How I Do It phase tabs, rather than the white .case-study-card look —
 these are quotes, not proof-metric cards, and this page's default surface
 is already dark (body.dark), so the cards read as "slightly raised off
 the page" the same way the phase tabs do.
*/
.kn-port.testimonials {padding:3rem 0 6rem;}
.kn-port.testimonials h2 {margin:0;}
.testimonials-grid {margin-top:2.5rem; --grid-gutter-x:2rem}

.quote-card {
    height:100%;
    display:flex;
    flex-direction:column;
    background-color:rgba(255, 255, 255, 0.04);
    border:1px solid rgba(255, 255, 255, 0.10);
    border-left:3px solid #A4C93C;
    border-radius:0 14px 14px 0;
    padding:1.75rem;
}
.quote-card p {
    flex:1;
    font-style:italic;
    font-size:1rem;
    line-height:1.6;
    color:rgba(255, 255, 255, 0.75);
    margin:0 0 1rem;
}
.quote-card cite {
    font-family:var(--font-family-alt);
    font-weight:600;
    font-style:normal;
    font-size:0.95rem;
    color:#ffffff;
}
@media (min-width: 768px) {
    .kn-port.testimonials {padding:6rem 0;}
}
@media (max-width: 767px) {
    /* margin-bottom on a stretched height:100% flex child (.quote-card)
       doesn't reliably create a gap — see the same issue/fix on
       .case-studies-grid above. Use FlexiGrid's vertical-gutter var
       instead, applied to the actual .col-* flex item. */
    .testimonials-grid {--grid-gutter-y: 1.5rem;}
}
/* Unscoped/shared — not testimonial-specific despite living in this
   section historically. Kept for the dormant .thumbnail-carousel-window
   component (currently unused anywhere in this theme, but its JS in
   custom.js still expects these base button styles if it's ever wired
   up again); .carousel-btn.thumbs further down overrides positioning. */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(77, 100, 141, 0);
    color: #4D648D;
    border: 2px solid #4D648D;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1rem; /* Adjusted for icon */
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 10;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.carousel-btn:hover {
    background-color: #4D648D;
    border-color:#ffffff;
    color:#ffffff;
}
.carousel-btn.prev {
    left: 0px;
}
.carousel-btn.next {
    right: 0px;
}
@media (max-width: 991px) {
    .carousel-btn {
    position:relative;
    top:100%;
    bottom:0;
    display:inline-block;
    margin:40px 6px 0;
    text-align:center;
   }
    .carousel-btn.prev { left:0; }
    .carousel-btn.next { right:0; }
}
/*
 ==========================================================================
 Forms
 ==========================================================================
*/
#footer-form {
    background-color:#F4F4F4
}
#footer-form.blue {
    background-color:#4D648D;
    color:#ffffff;
}
#footer-form.dkblue {
    background-color:#38486C;
    color:#ffffff;
    padding-top:4rem;
}
@media (min-width: 767px) {
    #footer-form.dkblue {padding-top:8rem;}
}
.hs-error-msgs label {color: #FF0000 !important;}

/*
 ==========================================================================
  Contact Form 7 — "Contact form 1"
 ==========================================================================
  Styled to match the site's former HubSpot embed look (light/dark
  variants driven by the same #footer-form / #footer-form.blue /
  #footer-form.dkblue context classes used elsewhere, not a separate
  form-level class — the form markup itself doesn't need to know which
  background it's sitting on).

  Base input/label styling already comes from knick_base's generic
  input[type=...] rules — this only adds what those don't cover: the
  required-field asterisk, the two-column name row gap, the privacy note,
  the green submit button (the site's generic button rule uses primary
  blue; the HubSpot form this replaces used green, so this form gets its
  own override to match it specifically), and CF7's own validation/
  response messaging.
*/
.wpcf7-form .req-star {
    color: var(--color-danger);
    margin-left: 2px;
}

.wpcf7-form input[type="submit"] {
    background-color: var(--color-secondary);
}
.wpcf7-form input[type="submit"]:hover {
    background-color: var(--color-secondary);
    filter: brightness(0.9);
}
.wpcf7-form label {
    font-size:1.1rem;
    width:100%;
    margin-bottom:0;
}
.wpcf7-form.vDark label {color: rgba(255, 255, 255, 0.9);}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    padding:0.5rem 0.75rem;
    width:100%;
    margin:0.3rem 0 1.2rem;
}

.wpcf7-form .row {
    row-gap: 0;
}

.wpcf7-form .form-privacy-note {
    margin-bottom: 1.3rem;
    font-size: 0.85rem;
    line-height:1.4;
    display:flex;
}
.wpcf7-form .form-privacy-note i {
    margin: 0.1rem 0.6em 0 0;
    display:inline-block;
}

.wpcf7-form.vDark .form-privacy-note {
    color: rgba(255, 255, 255, 0.9);
}

.wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: -0.75rem;
    margin-bottom: 1rem;
    color: var(--color-danger);
    font-size: 0.85rem;
}
.wpcf7-form.vDark .wpcf7-not-valid-tip,
.wpcf7-form.vDark .wpcf7-not-valid-tip {
    color: #ffd7d7;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
    border-color: var(--color-danger);
}

.wpcf7-form .wpcf7-response-output {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
}
.wpcf7-form.sent .wpcf7-response-output {
    border: 1px solid var(--color-success);
    color: var(--color-success);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}
.wpcf7-form.vDark.sent .wpcf7-response-output,
.wpcf7-form.vDark.sent .wpcf7-response-output {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.wpcf7-form.vDark.invalid .wpcf7-response-output,
.wpcf7-form.vDark.invalid .wpcf7-response-output {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffd7d7;
}

.wpcf7-form .wpcf7-spinner {
    margin-left: 0.5rem;
}

/*
==========================================================================
 Blog
==========================================================================
*/
.entry-content.blog-post {
	max-width:900px;
	margin:0 auto;
}
.beautiful-box {
	padding:2.6rem 2.4rem;
}
.beautiful-list {margin:0;}
.beautiful-list li {margin:0 0 1.8rem 0;}
.beautiful-list li:last-child {margin-bottom:0;}
.no-bullet {list-style-type: none;}
ol.beautiful-list {
	list-style: none;
    counter-reset: my-counter;
    padding: 0;
    margin: 0;
}
ol.beautiful-list li, .beautiful-item {
	counter-increment: my-counter;
	position: relative;
	padding-left: 2.8rem;
	min-height: 32px;
	display: flex;
	flex-direction:column;
}
ol.beautiful-list li::before, .beautiful-item::before {
	content: counter(my-counter); /* Display the current count */
	position: absolute;
	left: 0;
	width: 32px;
	height: 32px;
	background-color: #4B648D;
	color: #fff;
	border-radius: 50%;
	font-size: 1.2rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family:Arial,sans-serif;
}

.beautiful-item.one::before   { content: '1'; }
.beautiful-item.two::before   { content: '2'; }
.beautiful-item.three::before { content: '3'; }
.beautiful-item.four::before  { content: '4'; }
.beautiful-item.five::before  { content: '5'; }

.float-right, .float-left {float:none; width:100%; height:auto; margin:0 0 1rem;}
.float-right img, .float-left img {width:100%; height:auto;}
ul.wp-block-post-template {margin:0;}
.addtoany_shortcode {margin-top:0.6rem;}
.white-list-items li {background-color:#ffffff;border-radius:12px;}
@media (min-width: 767px) {
.float-right {float:right; margin:0 0 1rem 1rem; width:auto;}
.float-left {float:left; margin:0 1rem 1rem 0; width:auto;}
	
}

/*
 ==========================================================================
 PreFooter
 ==========================================================================
*/

.prefooter {
    padding:6rem 0;
    border-top:1px solid rgba(255, 255, 255, 0.10);
    background: radial-gradient(
      circle 620px at 50% -50%,
      rgba(105,136,191,0.5),  transparent
    )
}

/*
 ==========================================================================
 Footer
 ==========================================================================
*/
#main-footer {
    padding:2rem 1rem;
    color:#A2B5BB;
    background-color:#283655;
    border-top:1px solid rgba(255, 255, 255, 0.10);
}
#main-footer a {color:#A2B5BB;}
#main-footer a:hover {color:#ffffff;}
.mf-left img {
    display:block;
    width:100%;
    max-width:240px;
    height:auto;
}
.mf-left p {
    font-size:0.85rem;
    margin:0 0 0.2rem;
    font-weight:600;
}
.mf-left span {display:none;}
.mf-left a {display:block;}
.mf-right {
    text-align:left;
    padding-top:1rem
}
.mf-right p {margin:0; font-size:0.85rem;}

@media (min-width: 767px) {
    #main-footer {padding:2rem 2rem;}
    .mf-left span {display:inline;}
    .mf-left a {display:inline;}
    .mf-right {
        text-align:right;
        padding-top:0;
    }
   .mf-right li {margin:0 0 0 16px;}
   .mf-left img {max-width:240px;}

}

/* --- Carousel Styles --- */
.thumbnail-carousel-container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding:0 1rem;
	max-width: 1000px;
}

.thumbnail-carousel-window {
	overflow: hidden; /* This is the magic part that clips the track */
	width: 100%;
}

.thumbnail-carousel-track {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth sliding effect */
}

.thumbnail-slide {
	flex: 0 0 100%; /* Mobile: 1 slide visible */
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
}

.thumbnail-slide img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	border:1px solid #D9D9D9;
	transition: transform 0.3s ease;
}

/*.thumbnail-slide:hover img {
	transform: scale(1.05);
}*/

/* Responsive Breakpoints for Visible Slides */
@media (min-width: 768px) { /* Tablet */
	.thumbnail-slide {
		flex: 0 0 33.333%; /* 3 slides visible */
		padding: 0 16px;
	}
}
@media (min-width: 1360px) { /* Desktop */
	.thumbnail-carousel-container {padding:0; max-width: 1220px;}
	.thumbnail-slide {
		flex: 0 0 25%; /* 4 slides visible */
	}
}


/* Carousel Navigation */
.carousel-btn.thumbs {display:none;}
.carousel-btn.thumbs.prev {left:-60px;}
.carousel-btn.thumbs.next {right:-60px;}
.carousel-dots {
	text-align: center;
	padding-top: 1.5rem;
}
.carousel-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 5px;
	background-color: #ccc;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.carousel-dot.is-active {
	background-color: #333;
}
@media (min-width: 992px) {
	.carousel-btn.thumbs {top:42%; display:inline;}
	.carousel-btn.thumbs.prev {left:-36px;}
	.carousel-btn.thumbs.next {right:-36px;}
}
@media (min-width: 1360px) {
	.carousel-btn.thumbs.prev {left:-60px;}
	.carousel-btn.thumbs.next {right:-60px;}
}

/* --- Lightbox Styles --- */
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	display: none; /* Hidden by default */
	justify-content: center;
	align-items: center;
	z-index: 1000;
	padding: 20px;
	box-sizing: border-box;
}
.lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
}
.lightbox-content img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: 12px;
}
.lightbox-close {
	position: absolute;
	top: -32px;
	right: -0px;
	font-size: 4rem;
	color: white;
	cursor: pointer;
	background: none;
	border: none;
}

/*
==========================================================================
 HubSpot Form Loader Styles
==========================================================================
*/

.form-loader-container {
    position: relative;
    /* IMPORTANT: Adjust this height! 
     This should be the approximate height of your fully loaded form.
     You can find this by inspecting the form with your browser's dev tools.
    */
    min-height: 450px; 
    background-color: #f8f9fa; /* A light background color */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* When the HubSpot iframe loads, it will be the only direct child.
 This rule will then make the container's background transparent.
*/
.form-loader-container:has(iframe) {
    background-color: transparent;
    /* THE FIX: Revert to a standard block container so it doesn't interfere
       with the form's internal layout. */
    display: block;
}

/* Hides the loading spinner once the iframe is loaded.
*/
.form-loader-container:has(iframe)::before {
    display: none;
}


/* Pure CSS Loading Spinner */
.form-loader-container::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #4D648D; /* Use your primary color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/*
==========================================================================
 Typing Container
==========================================================================
*/
.typing-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    }

    .typing-container h2 {
        padding-right: 0.2rem; /* Space for the cursor */
        margin:0;
        letter-spacing:-0.5px;
    }
    .typing-cursor {
        width: 1px;
        height: 1.7rem; /* Match the h2 line-height */
        background-color: #ffffff;
        animation: blink 0.9s infinite;
    }

    /* Blinking animation */
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
    @media (max-width: 768px) {
        .typing-container h2 {
            font-size: 2rem;
        }
        .typing-cursor {
            height: 2.2rem;
        }
    }
    @media (max-width: 480px) {
        .typing-container h2 {
            font-size: 1.5rem;
        }
        .typing-cursor {
            height: 1.7rem;
        }
    }