/*
Theme Name: Classic Boilerplate
Author: Xtrakewl
Author URI: https://xtrakewl.com/
Description: A lightweight, barebone WordPress theme optimized for the Classic Editor.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: classic-boilerplate
*/

/* 1. Import Fonts (Must remain at the very top) */
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');*/
/* Typography Component Imports */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');

/* ==========================================================================
   Basic Reset & Classic WP Elements
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
}

.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }
.wp-caption { background: #f0f0f0; padding: 5px; text-align: center; max-width: 100%; }
.wp-caption-text { font-size: 0.85em; color: #666; }

/* ==========================================================================
   Structural Layout Wrappers (1440px Max Width)
   ========================================================================== */
.header-container,
.footer-container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* ==========================================================================
   Header Navigation Styling
   ========================================================================== */
.site-header {
    width: 100%;
    background-color: #ffffff;
    padding: 20px 40px; 
    box-sizing: border-box;
}

/* Logo/Branding Styling */
.site-branding {
    max-width: 150px;
    max-height: 50px;
}

.site-branding img {
    display: block;
    width: 100%;
    height: auto;
}

/* Fallback if you use text instead of an image logo */
.site-title a {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    color: #000000;
    text-decoration: none;
    font-weight: 700;
}

/* Desktop Navigation Menu */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 40px; 
}

.main-navigation li {
    display: inline-block;
}

.main-navigation a {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* 5% letter-spacing */
    transition: all 0.2s ease-in-out;
    display: inline-block;
}

/* Active/Current Page Link State */
.main-navigation .current-menu-item > a {
    background-color: #000000;
    color: #ffffff;
    padding: 12px 28px;
}

/* Classic WordPress "Contact" Call-to-Action Button Style */
/*
.main-navigation ul > li:last-child > a {
    background-color: #000000;
    color: #ffffff;
    padding: 12px 28px;
}
*/

.main-navigation ul > li:last-child > a:hover {
    background-color: #333333;
}
/* ==========================================================================
   Classic WordPress Sub-Navigation (Dropdowns)
   ========================================================================== */

/* --- Desktop Layout Rules (Screens wider than smartphone break-point) --- */
@media screen and (min-width: 769px) {
    
    /* Position the parent menu item relatively so the child can anchor to it */
    .main-navigation ul li {
        position: relative;
    }

    /* Style the hidden dropdown menu wrapper */
    .main-navigation ul .sub-menu {
        position: absolute;
        top: 100%; /* Positions it directly below the parent link */
        left: 0;
        background-color: #ffffff;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
        padding: 15px 20px;
        min-width: 200px;
        flex-direction: column; /* Force items to stack vertically */
        gap: 12px;
        
        /* Smooth fade-in transition tricks */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        z-index: 999;
    }

    /* Adjust nested layout metrics so links don't inherit inline flex behaviors */
    .main-navigation ul .sub-menu li {
        display: block;
        width: 100%;
    }

    /* Customize the sub-navigation link typography scales */
    .main-navigation ul .sub-menu a {
        font-size: 14px;
        color: #555555;
        text-transform: none; /* Disables uppercase if you want title case dropdowns */
        letter-spacing: 0.02em;
        display: block;
        padding: 5px 0;
        width: 100%;
    }

    /* Hover effect for individual dropdown links */
    .main-navigation ul .sub-menu a:hover {
        color: #000000;
    }

    /* TRIGGER: When the user hovers over the parent <li>, show the child <ul> */
    .main-navigation ul li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

li.menu-item-has-children a{
    white-space: nowrap;
}   
li.menu-item-has-children .current-menu-item a{
    background-color: transparent;
    font-weight: 700;
    box-sizing: content-box;
}   

/* --- Mobile Mobile Screen Rules (Smartphone break-point sync) --- */
@media screen and (max-width: 768px) {

    .menu-item{
        box-sizing: content-box;
    }
    li.menu-item-has-children{
        margin-bottom: 18px !important;
    }   

    /* Make submenus visible natively inline on mobile devices */
    .main-navigation .sub-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px 0 0 0;
        width: 100%;
    }

    /* Style adjustment for links inside the stacked mobile menu */
    .main-navigation .sub-menu a {
        font-size: 16px;
        color: #666666;
        text-transform: none;
    }
}
/* ==========================================================================
   Footer Layout & Navigation Styling
   ========================================================================== */
.site-footer {
    width: 100%;
    background-color: #000000; /* Edge-to-edge dark background */
    padding: 40px 40px;
    box-sizing: border-box;
    margin-top: auto; 
}

.footer-title a {
    font-family: 'DM Serif Display', serif;
    color: #ffffff; /* White contrast logo text */
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
    line-height: 57.75px;
    letter-spacing: 3%;
}

.footer-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 40px;
}

.footer-navigation a {
    font-family: 'Inter', sans-serif;
    font-size: 15px; /* Formatted to 15px specification */
    font-weight: 400;
    color: #ffffff; /* White text links */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* 5% letter-spacing */
    transition: opacity 0.2s ease;
}

.footer-navigation a:hover {
    opacity: 0.7;
}

/* Footer Contact Button Override: Keeps design integrity clean on dark background */
/*
.footer-navigation ul > li:last-child > a {
    background-color: #ffffff;
    color: #000000;
    padding: 10px 24px;
    display: inline-block;
}
    */

/* ==========================================================================
   Responsive Mobile Navigation Layout
   ========================================================================== */

/* Hidden by default on desktop grids */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 9999;
}

.menu-toggle .burger-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #000000;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Smart phone screen constraints */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block; /* Show burger button */
    }

    /* Transform main nav container into a full screen sliding layout */
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden off-screen right */
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        padding-top: 100px; /* Leave space for branding/exit */
        transition: right 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
        z-index: 999;
        box-sizing: border-box;
    }

    /* Target open navigation state */
    .site-header.nav-open .main-navigation {
        right: 0; /* Slide into full view */
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: center;
        gap: 30px; /* Distinct vertical layout gap */
    }

    .main-navigation a {
        font-size: 20px; /* Slightly larger targets for tap accessibility */
    }

    /* Ensure button treatment matches on mobile screens */
    .main-navigation ul > li:last-child > a,
    .main-navigation .current-menu-item > a {
        display: block;
        text-align: center;
        width: 200px;
    }

    /* CSS transformation to morph burger icon into an 'X' close button */
    .site-header.nav-open .menu-toggle .burger-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .site-header.nav-open .menu-toggle .burger-bar:nth-child(2) {
        opacity: 0;
    }
    .site-header.nav-open .menu-toggle .burger-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Stack footer components vertically on small smartphone views */
    .footer-container {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-navigation ul {
        flex-direction: column;
        gap: 20px;
    }
}

/* ==========================================================================
   Home - Hero Text & Stats Section
   ========================================================================== */


.hero-stats-section {
    background-color: #126D9E; /* Deep off-black background from mock */
    color: #ffffff;
    padding: 100px 40px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.hero-stats-section:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/waves.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
}
.hero-stats-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

a.hh_link {
	font-family: Inter, sans-serif;
	color: #fff;
	text-decoration: none;
	margin-top: 50px;
	display: inline-block;
	background-color: var(--cci-navy);
	padding: 10px 27px;
}
a.hh_link svg{
    margin-left:15px;
    display: inline-block;
	transform: scale(0.9) translateY(3px);
}

/* --- Left Column Layout --- */
.hero-content-col {
    flex: 1;
    max-width: 650px;
}

.hero-subtitle-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.hero-subtitle-wrap .hero-line {
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #a3a19e;
}

.hero-subtitle-wrap .hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #cfcfcf;
    letter-spacing: 5%;
    text-transform: uppercase;
}

.hero-title {
    font-family: 'DM Serif Display', serif;
    font-size: 52px;
    line-height: 60px;
    font-weight: 400;
    margin: 0 0 40px 0;
    color: #ffffff;
    letter-spacing: 3%;
}
.hero-title em {
    color:#093660; /* Brand matching blue for emphasis */
    display: block;
    font-style: italic;
}
/* Target the rich text inner block wrapper if injected by WYSIWYG */
.hero-title p {
    margin: 0;
    display: inline;
}

.hero-title-italic, .hero-title-italic p {
	font-family: 'Inter', sans-serif;
	color: #fff;
	display: block;
	font-size: 21px;
	line-height: 28px;
	font-weight: 400;
	margin-top: 44px;
}

/* --- Right Column Layout --- */
.hero-stats-col {
    flex: 1;
    max-width: 500px;
    margin-top: 40px; /* Offset to balance alignment with header elements */
}

.stats-list {
    display: flex;
    flex-direction: column;
}

.stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 23px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Border closure logic for last element layout boundary */
.stat-row:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-number {
    font-family: 'Playfair', serif;
    font-size: 87px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1;
    margin-top: -15px !important;
    font-optical-sizing: none;
    /*font-variation-settings: "opsz" 5;*/
}

.stat-desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #ffffff;
    letter-spacing: 1px;
    text-align: right;
}

/* ==========================================================================
   Mobile Responsive Rules
   ========================================================================== */
@media screen and (max-width: 991px) {
    .hero-stats-container {
        flex-direction: column;
        gap: 50px;
    }
    
    .hero-content-col, 
    .hero-stats-col {
        max-width: 100%;
        width: 100%;
    }

    .hero-title {
        font-size: 42px;
    }

    .stat-number {
        min-width: 120px;
        font-size: 48px;
    }
}
/* ==========================================================================
   Home - Main Content Body Layout
   ========================================================================== */
.home-content-body {
    width: 100%;
    padding: 60px 40px;
    box-sizing: border-box;
    background-color: #ffffff; /* White background for page body below hero */
    color: #333333;
}

.home-content-container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* Base Layout Reset & Variables */
.cci-two-column-section {
    width: 100%;
    padding: 80px 20px; /* Responsive safe padding for mobile/tablet */
    box-sizing: border-box;
    background-color: #ffffff;
}

.cci-container {
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    /* Generous desktop side padding matching standard 1440px designs */
    padding-left: 80px; 
    padding-right: 80px;
}

/* Header Section Title Code (WHY CCI) */
.cci-row-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.cci-row-header::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #888888;
    margin-right: 12px;
}

.cci-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888888;
    font-weight: 500;
}

/* CSS Grid Structure */
.cci-grid-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 40px;
}

.cci-col-left {
    grid-column: span 5;
}

.cci-col-right {
    grid-column: span 7;
}

/* Typography & Content Layout Formatting */
.cci-wysiwyg-content p {
    margin-top: 0;
    margin-bottom: 24px;
}

.cci-wysiwyg-content p:last-child {
    margin-bottom: 0;
}

/* Left Column Styling */
.cci-wysiwyg-content.left-content {
    font-family: 'DM Serif Display', serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 50px;
    letter-spacing: 0.03em;
    color: #000000;
}

/* Handles the emphasized italic text style from your design screenshot */
.cci-wysiwyg-content.left-content em,
.cci-wysiwyg-content.left-content i {
    font-style: italic;
    color: #707070; /* Soft gray element for the italic layout segment */
}

/* Right Column Styling */
.cci-wysiwyg-content.right-content {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.03em;
    color: #000000;
    padding-top: 8px; /* Perfectly balances vertical alignment with large title text */
}

/* --- Media Queries (Mobile Responsive Breakpoints) --- */

@media (max-width: 1024px) {
    .cci-container {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .cci-col-left {
        grid-column: span 6;
    }
    
    .cci-col-right {
        grid-column: span 6;
    }
    
    .cci-wysiwyg-content.left-content {
        font-size: 34px;
        line-height: 44px;
    }
}

@media (max-width: 768px) {
    .cci-two-column-section {
        padding: 50px 0;
    }

    .cci-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .cci-grid-content {
        grid-template-columns: 1fr; /* Switch to single stack */
        gap: 32px;
    }

    .cci-col-left, 
    .cci-col-right {
        grid-column: span 1fr;
    }

    .cci-wysiwyg-content.left-content {
        font-size: 28px;
        line-height: 38px;
    }
    
    .cci-wysiwyg-content.right-content {
        font-size: 16px;
        line-height: 26px;
        padding-top: 0;
    }
}

/* Container and Layout Framing */
.cci-two-column-images {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
}

.cci-image-container {
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    /* Keeps structural inline alignment flush with the text container */
    padding-left: 80px;
    padding-right: 80px;
}

/* Flexbox Grid System */
.cci-image-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
}

.cci-image-col {
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
}

/* Image Presentation Structure */
.cci-image-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Aspect-ratio ensures proportional element blocks before image payload loads */
    aspect-ratio: 720 / 400; 
}

.cci-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- Media Queries (Mobile Responsive Breakpoints) --- */

@media (max-width: 1024px) {
    .cci-image-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 768px) {
    .cci-image-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .cci-image-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .cci-image-col:first-child {
        margin-bottom: 16px; /* Provides separation when stacked on smaller screens */
    }
}

/* Core Section Wrapping Settings */
.cci-four-col-section {
    width: 100%;
    background-color: #EDEDED; /* Edge-to-edge structural background stretch */
    padding: 100px 0;
    box-sizing: border-box;
}

.cci-four-col-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
}

/* Header Presentation Alignment */
.cci-four-col-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    margin-bottom: 70px;
    width: 100%;
}

.cci-title-wrapper {
    display: flex;
    align-items: center;
}

.cci-title-wrapper::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #808080;
    margin-right: 12px;
}

.cci-grid-section-title {
    color: #808080;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em;
    margin: 0;
    text-transform: uppercase;
}

.cci-quote-wrapper {
    display: flex;
    justify-content: center;
}

.cci-header-spacer {
    display: block;
}

/* Four Column Text Grid Setup */
.cci-four-col-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}

/* Structural Border Setup for Grid Components */
.cci-grid-item {
    box-sizing: border-box;
    border-right: 1px solid #C0C0C0; /* Internal line divider panels */
}

.cci-grid-item:last-child {
    border-right: none; /* Strip out final line panel border edge */
}

/* Inner Text Margins & Spacing Proportions */
.cci-grid-item-inner {
    padding-right: 35px;
    padding-left: 10px;
    box-sizing: border-box;
}

.cci-grid-item:first-child .cci-grid-item-inner {
    padding-left: 0; /* Keeps item flush left with global design boundaries */
}

/* Text Element Styling Rules */
.cci-item-subtitle {
    display: block;
    color: #808080;
    font-family: 'DM Serif Display', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: -0.05em;
    margin-bottom: 24px;
}

.cci-item-title {
    color: #000000;
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0.03em;
    margin-top: 0;
    margin-bottom: 20px;
    min-height: 68px; /* Standardize desktop alignment across differing line breaks */
}

.cci-item-body {
    color: #757575;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0.03em;
}

.cci-item-body p {
    margin-top: 0;
    margin-bottom: 16px;
}

.cci-item-body p:last-child {
    margin-bottom: 0;
}

/* --- Media Queries (Mobile Responsive Breakpoints) --- */

@media (max-width: 1200px) {
    .cci-four-col-container {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .cci-grid-item-inner {
        padding-right: 20px;
    }
    
    .cci-item-title {
        font-size: 24px;
        line-height: 30px;
        min-height: 60px;
    }
}

@media (max-width: 991px) {
    .cci-four-col-header {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }
    
    .cci-quote-wrapper {
        justify-content: flex-start;
        padding-left: 42px; /* Sync structural visual alignment to top-left text */
    }
    
    .cci-header-spacer {
        display: none;
    }

    /* Transition grid matrix from 4 columns to 2x2 grid */
    .cci-four-col-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 0px;
    }

    .cci-grid-item {
        border-right: 1px solid #C0C0C0;
    }

    .cci-grid-item:nth-child(2n) {
        border-right: none; /* Strip right border for right side elements in 2x2 loop */
    }
    
    .cci-grid-item-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .cci-grid-item:nth-child(2n+1) .cci-grid-item-inner {
        padding-left: 0; /* Keep left row items perfectly flush */
    }

    .cci-item-title {
        min-height: auto; /* Dissolve fixed desktop alignments safely */
    }
}

@media (max-width: 768px) {
    .cci-four-col-section {
        padding: 60px 0;
    }

    .cci-four-col-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Complete breakdown layout transformation to 1-column mobile standard stack */
    .cci-four-col-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .cci-grid-item {
        border-right: none; /* Strip structural panel borders */
        border-bottom: 1px solid #C0C0C0; /* Swap to clean bottom dividers */
        padding-bottom: 32px;
    }

    .cci-grid-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .cci-grid-item-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cci-item-subtitle {
        margin-bottom: 16px;
    }

    .cci-item-title {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 14px;
    }
    
    .cci-item-body {
        font-size: 16px;
        line-height: 24px;
    }
}
/* Core Layout Shell Structural Configuration */
.cci-testimonials-section {
    width: 100%;
    background-color: #ffffff;
    padding: 100px 0;
    box-sizing: border-box;
}

.cci-slider-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
}

/* Slider Section Header Bar */
.cci-slider-main-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 70px;
    width: 100%;
}

.cci-slider-main-header::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #757575;
    margin-right: 12px;
}

.cci-slider-section-label {
    color: #757575;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Carousel Outer Matrix Display */
.cci-carousel-outer-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Slick Track Core Target Block */
.cci-slick-slider-engine {
    width: 100%;
    max-width: 960px; /* Constrains line length for optimal readability and margins */
    margin: 0 auto;
}

/* Inner Component Styles */
.cci-slide-inner-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Slide Typography Definitions */
.cci-slide-title {
    color: #000000;
    font-family: 'DM Serif Display', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 27px;
    line-height: 36px; /* Increased slightly over the raw design spec to avoid cramped overlaps */
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 0;
    margin-bottom: 24px;
}

.cci-slide-body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: center;
    color: #07214F;
    margin-bottom: 40px;
}

.cci-slide-author-meta {
    margin-bottom: 40px;
}

.cci-slide-author-name {
    color: #808080;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 29px;
    letter-spacing: 0em;
    text-align: center;
    margin-bottom: 4px;
}

.cci-slide-company-name {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: center;
    color: #07214F;
}

/* Desktop Arrow Controllers Layout */
.cci-slider-nav-btn {
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.cci-slider-nav-btn:hover {
    transform: scale(1.15);
}

.cci-slider-nav-btn svg path {
    transition: stroke 0.2s ease;
}

.cci-slider-nav-btn:hover svg path {
    stroke: #07214F; /* Transitions to brand matching highlight blue on mouse hover */
}

/* Custom Slick Slider Navigation Dots Container Styles */
.cci-custom-slick-dots {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cci-custom-slick-dots li {
    margin: 0 6px;
    padding: 0;
}

.cci-custom-slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #D8D8D8; /* Inactive dot color placeholder */
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cci-custom-slick-dots li.slick-active button {
    background: #606060; /* Darker slate-grey active indicator slide dot matching layout view */
    transform: scale(1.2);
}

/* --- Media Queries (Mobile Responsive Breakpoints) --- */

@media (max-width: 1024px) {
    .cci-slider-container {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .cci-slide-body {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 768px) {
    .cci-testimonials-section {
        padding: 60px 0;
    }

    .cci-slider-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .cci-slider-main-header {
        margin-bottom: 40px;
    }

    .cci-slider-nav-btn {
        display: none !important; /* Hide structural layout buttons safely on standard phone screens */
    }

    .cci-slide-inner-content {
        padding: 0;
    }

    .cci-slide-title {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 16px;
    }

    .cci-slide-body {
        font-size: 17px;
        line-height: 25px;
        margin-bottom: 30px;
    }

    .cci-slide-author-name {
        font-size: 18px;
        line-height: 24px;
    }

    .cci-slide-company-name {
        font-size: 15px;
        line-height: 18px;
    }
}
/* Outer Section Edge-to-Edge Frame Settings */
.cci-callout-banner {
    width: 100%;
    background-color: #CFCFCF; /* Full-bleed background color fill */
    padding: 85px 0; /* Vertical structure spacing proportions matching mockup visual balance */
    box-sizing: border-box;
}

/* Centered Layout Wrapper Component */
.cci-callout-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
}

/* Structural Flex Layout Matrix Engine */
.cci-callout-flex-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 40px; /* Safeguards component spacing over edge case text container sizes */
}

/* Text Content Placement Flex Columns */
.cci-callout-text-col {
    flex: 1;
    max-width: 880px; /* Constrains column boundary to maximize line layout alignment */
}

/* Button CTA Placement Flex Columns */
.cci-callout-action-col {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

/* Left-Side Typography Core Settings Custom Rendering */
.cci-callout-wysiwyg {
    color: #000000;
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 42.34px;
    line-height: 51.8px;
    letter-spacing: 0.02em;
}

.cci-callout-wysiwyg p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Specific styling modifier for handling italic text tags inside the rich editor element */
.cci-callout-wysiwyg em, 
.cci-callout-wysiwyg i {
    font-style: italic;
    font-weight: 400;
}

/* Button Element Callout UI Custom Styles */
.cci-callout-btn {
    display: inline-block;
    background-color: #000000;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    
    /* Pixel perfect padding dimensions reproducing standard mockup visual weight aspect ratios */
    padding: 24px 44px; 
    border: 1px solid #000000;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

/* Interaction Hover States Transition Effects */
.cci-callout-btn:hover,
.cci-callout-btn:focus {
    background-color: transparent;
    color: #000000;
}

/* --- Media Queries (Mobile Responsive Breakpoints) --- */

@media (max-width: 1024px) {
    .cci-callout-container {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .cci-callout-wysiwyg {
        font-size: 34px;
        line-height: 44px;
    }
}

@media (max-width: 768px) {
    .cci-callout-banner {
        padding: 60px 0; /* Compresses top-to-bottom height footprint parameters on smaller nodes */
    }

    .cci-callout-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Transform structural tracking axis engine layout orientation to stack rows vertically */
    .cci-callout-flex-layout {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 32px;
    }

    .cci-callout-text-col {
        max-width: 100%;
    }

    .cci-callout-action-col {
        width: 100%;
        justify-content: flex-start;
    }

    .cci-callout-wysiwyg {
        font-size: 28px;
        line-height: 36px;
    }

    .cci-callout-btn {
        width: 100%; /* Scales action element buttons to stretch structural width on handset viewports */
        box-sizing: border-box;
        padding: 20px 32px;
    }
}
/* Full-bleed outer bounding wrapper frame */
.cci-about-section {
    width: 100%;
    background-color: #E7E7E7; /* Edge-to-edge background stretch */
    padding: 110px 0; /* Vertical breathing padding scale */
    box-sizing: border-box;
}

/* Centered content block layer tracking grid properties */
.cci-about-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
}

/* Base Flexible Split Core Layout */
.cci-about-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px; /* Space buffer separation between text block and image frame */
}

/* Structural flex calculation blocks */
.cci-about-text-column {
    flex: 1 1 50%;
    max-width: 610px; /* Limits visual length tracking line height rules accurately */
    box-sizing: border-box;
}

.cci-about-image-column {
    flex: 1 1 40%;
    max-width: 570px;
    box-sizing: border-box;
}

/* --- Subtitle Element Formatting --- */
.cci-about-subtitle-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.cci-about-subtitle-wrapper::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #808080;
    margin-right: 12px;
}

.cci-about-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em;
    color: #808080;
    text-transform: uppercase;
}

/* --- Text 1 Heading Element Formatting --- */
.cci-about-heading-wysiwyg {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 52px;
    line-height: 60px;
    letter-spacing: 0em;
    color: #000000;
    margin-bottom: 40px;
}

.cci-about-heading-wysiwyg p {
    margin: 0;
}

/* Target color control custom hex assignments over standard italic formatting elements */
.cci-about-heading-wysiwyg em,
.cci-about-heading-wysiwyg i {
    font-style: italic;
    color: #757575; 
}

/* --- Text 2 Body Content Element Formatting --- */
.cci-about-body-wysiwyg {
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 31px; /* Scaled slightly over 100% font-size line settings for professional paragraph spacing */
    letter-spacing: 0.01em;
}

.cci-about-body-wysiwyg p {
    margin-top: 0;
    margin-bottom: 20px;
}

.cci-about-body-wysiwyg p:last-child {
    margin-bottom: 0;
}

/* --- Right Column Layout Image Wrapper Frame --- */
.cci-about-image-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 570 / 440; /* Golden dimension locking matching visual weights */
}

.cci-about-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Placeholder box container frame fallback style */
.cci-about-image-placeholder {
    width: 100%;
    height: 440px;
    background-color: #787878; /* Matches presentation render block palette */
}

/* --- Media Queries (Mobile Responsive Breakpoints) --- */

@media (max-width: 1200px) {
    .cci-about-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .cci-about-heading-wysiwyg {
        font-size: 42px;
        line-height: 50px;
    }
}

@media (max-width: 991px) {
    .cci-about-grid {
        gap: 40px;
    }

    .cci-about-heading-wysiwyg {
        font-size: 36px;
        line-height: 44px;
        margin-bottom: 30px;
    }

    .cci-about-body-wysiwyg {
        font-size: 19px;
        line-height: 28px;
    }
}

@media (max-width: 768px) {
    .cci-about-section {
        padding: 60px 0;
    }

    .cci-about-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Transform split rows layout architecture structure to a stacked profile configuration loop */
    .cci-about-text-column,
    .cci-about-image-column {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cci-about-image-column {
        order: 2; /* Image positions contextually down beneath paragraph stack blocks on small viewports */
    }

    .cci-about-text-column {
        order: 1;
    }

    .cci-about-heading-wysiwyg {
        font-size: 30px;
        line-height: 38px;
    }

    .cci-about-body-wysiwyg {
        font-size: 18px;
        line-height: 27px;
    }
    
    .cci-about-image-placeholder {
        height: 320px;
    }
}
/* Core Section Bounding Constraints */
.cci-divided-approach-section {
    width: 100%;
    background-color: #ffffff;
    padding: 100px 0; /* Clean vertical baseline tracking padding */
    box-sizing: border-box;
}

/* Centered global track content limit wrapper */
.cci-divided-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
}

/* Two Column CSS Grid Layout with Divider Setup */
.cci-divided-grid {
    display: grid;
    grid-template-columns: 3fr 1px 9fr; /* Left column, 1px divider track space, right column */
    align-items: flex-start;
    width: 100%;
}

/* Structural Column Sizing Properties */
.cci-divided-left-col {
    padding-right: 40px;
    box-sizing: border-box;
}

/* Explicit vertical line between grid columns */
.cci-divided-grid::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    width: 2px;
    height: 85px;
    background-color: var(--cci-blue-bright);
}

.cci-divided-right-col {
    grid-column: 3;
    padding-left: 60px;
    box-sizing: border-box;
}

/* --- Left Column Title Styles --- */
.cci-divided-title-wrapper {
    display: flex;
    align-items: center;
}

.cci-divided-title-wrapper::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #808080;
    margin-right: 12px;
}

.cci-divided-title {
    color: #808080;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

/* --- Right Column Text 1 (Emphasis Box) Styles --- */
.cci-divided-text1-wysiwyg {
    color: #000000;
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 30px;
    line-height: 38px; /* Balanced tracking line height */
    letter-spacing: 0.01em;
    margin-bottom: 30px;
}

.cci-divided-text1-wysiwyg p {
    margin: 0;
}

/* --- Right Column Text 2 (Body Copy) Styles --- */
.cci-divided-text2-wysiwyg {
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    line-height: 28px;
    letter-spacing: 0.01em;
    max-width: 820px; /* Safeguards horizontal line length readability */
}

.cci-divided-text2-wysiwyg p {
    margin-top: 0;
    margin-bottom: 20px;
}

.cci-divided-text2-wysiwyg p:last-child {
    margin-bottom: 0;
}

/* --- Media Queries (Mobile Responsive Breakpoints) --- */

@media (max-width: 1024px) {
    .cci-divided-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .cci-divided-grid {
        grid-template-columns: 3.5fr 1px 8.5fr;
    }
    
    .cci-divided-left-col {
        padding-right: 24px;
    }

    .cci-divided-right-col {
        padding-left: 32px;
    }

    .cci-divided-text1-wysiwyg {
        font-size: 26px;
        line-height: 34px;
    }
    
    .cci-divided-text2-wysiwyg {
        font-size: 19px;
        line-height: 26px;
    }
}

@media (max-width: 768px) {
    .cci-divided-approach-section {
        padding: 60px 0;
    }

    .cci-divided-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Transform structural grid into a 1-column layout stack */
    .cci-divided-grid {
        display: block;
        width: 100%;
    }

    /* Remove the vertical border divider line cleanly on mobile screens */
    .cci-divided-grid::before {
        display: none;
    }

    .cci-divided-left-col {
        width: 100%;
        padding-right: 0;
        margin-bottom: 32px;
    }

    .cci-divided-right-col {
        width: 100%;
        padding-left: 0;
    }

    .cci-divided-text1-wysiwyg {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .cci-divided-text2-wysiwyg {
        font-size: 17px;
        line-height: 25px;
    }
}

/* Core Section Wrapping Settings */
.cci-three-col-section {
    width: 100%;
    background-color: #ffffff;
    padding: 100px 0;
    box-sizing: border-box;
}

/* Centered content tracking limit layer container */
.cci-three-col-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
}

/* Header Presentation Alignment Block */
.cci-three-col-header {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    width: 100%;
}

.cci-three-col-header::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #757575;
    margin-right: 12px;
}

.cci-three-col-section-title {
    color: #757575;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

/* Main Grid Processing Engine Matrix */
.cci-three-col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

/* Structural Border Layout Properties */
.cci-three-col-item {
    box-sizing: border-box;
    border-right: 1px solid #757575; /* Exact layout internal border track custom hex */
}

/* Strip outer boundary line border segments */
.cci-three-col-item:last-child {
    border-right: none;
}

/* Inner Text Spacing and Padding Bounds proportions */
.cci-three-col-inner {
    padding-right: 45px;
    padding-left: 25px;
    box-sizing: border-box;
}

/* Keeps the outermost column components completely flush left with baseline constraints */
.cci-three-col-item:first-child .cci-three-col-inner {
    padding-left: 0;
}

/* Keeps the rightmost column components completely flush right with baseline constraints */
.cci-three-col-item:last-child .cci-three-col-inner {
    padding-right: 0;
}

/* Typography Element Configuration Style Blocks */
.cci-three-col-item-title {
    color: #000000;
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0.05em;
    margin-top: 0;
    margin-bottom: 24px;
}

.cci-three-col-item-body {
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0em;
}

.cci-three-col-item-body p {
    margin-top: 0;
    margin-bottom: 16px;
}

.cci-three-col-item-body p:last-child {
    margin-bottom: 0;
}

/* --- Media Queries (Mobile Responsive Breakpoints) --- */

@media (max-width: 1024px) {
    .cci-three-col-container {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .cci-three-col-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 768px) {
    .cci-three-col-section {
        padding: 60px 0;
    }

    .cci-three-col-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .cci-three-col-header {
        margin-bottom: 40px;
    }

    /* Transform the layout grid axis completely into a 1-column single block stack */
    .cci-three-col-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Swap column borders cleanly over to crisp vertical stacking line dividers instead */
    .cci-three-col-item {
        border-right: none;
        border-bottom: 1px solid #757575;
        padding-bottom: 40px;
    }

    .cci-three-col-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .cci-three-col-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cci-three-col-item-title {
        margin-bottom: 16px;
    }
}
/* ==========================================================================
   Global Banner Image Styles
   ========================================================================== */

.global-banner-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5; /* Fallback background color */
}

.global-banner-wrapper {
    width: 100%;
    /* Aspect ratio fallback to prevent Layout Shift (CLS) */
    aspect-ratio: 1440 / 744; 
    position: relative;
}

.global-banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ==========================================================================
   Programs - Hero Text Layout
   ========================================================================== */

/* Google Fonts Import (Include these if not already globally enqueued) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

/* Section Root - Edge-to-edge full width background */
.programs-hero-section {
    background-color: #e7e7e7;
    width: 100%;
    box-sizing: border-box;
    padding: 100px 24px; /* Generous top/bottom padding mimicking mockup layout */
}

/* Internal Container - Restricted layout width and center alignment */
.programs-hero-container {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Gives the larger title room to breath */
    column-gap: 80px;
    row-gap: 40px;
    align-items: flex-start;
}

/* --- Left Column Elements --- */
.programs-hero-col-left {
    display: flex;
    flex-direction: column;
}

/* pht_title styling */
.programs-hero-container .pht-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em; /* 5% */
    color: #757575;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    padding-left: 45px;
    margin-bottom: 40px;
}

/* Decorative horizontal line before text matching the mockup */
.programs-hero-container .pht-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 1px;
    background-color: #757575;
}

/* pht_text_1 styling */
.programs-hero-container .pht-text-1 p,
.programs-hero-container .pht-text-1 {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 52px;
    line-height: 60px;
    letter-spacing: 0.01em; /* 1% */
    color: #000000;
    margin: 0;
}

/* Em inside pht_text_1 styling override */
.programs-hero-container .pht-text-1 i {
    font-style: italic;
    color: #757575;
}

/* --- Right Column Elements --- */
.programs-hero-col-right {
    /* Aligns paragraph visually with the heading grid height */
    padding-top: 65px; 
}

/* pht_text_2 styling */
.programs-hero-container .pht-text-2 p,
.programs-hero-container .pht-text-2 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    line-height: 30px;
    letter-spacing: 0.01em; /* 1% */
    color: #000000;
    margin: 0;
}


/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Desktop layout scaling down */
@media (max-width: 1200px) {
    .programs-hero-container {
        column-gap: 40px;
    }
    .programs-hero-container .pht-text-1 p,
    .programs-hero-container .pht-text-1 {
        font-size: 44px;
        line-height: 52px;
    }
}

/* Tablets and landscape mobile views */
@media (max-width: 991px) {
    .programs-hero-section {
        padding: 60px 24px;
    }
    .programs-hero-container {
        grid-template-columns: 1fr; /* Switch to stack structure */
        row-gap: 30px;
    }
    .programs-hero-col-right {
        padding-top: 0; /* Clear desktop offsetting alignment space */
    }
}

/* Mobile Screens */
@media (max-width: 576px) {
    .programs-hero-section {
        padding: 48px 16px;
    }
    .programs-hero-container .pht-title {
        font-size: 16px;
        margin-bottom: 24px;
    }
    .programs-hero-container .pht-text-1 p,
    .programs-hero-container .pht-text-1 {
        font-size: 32px;
        line-height: 40px;
    }
    .programs-hero-container .pht-text-2 p,
    .programs-hero-container .pht-text-2 {
        font-size: 18px;
        line-height: 26px;
    }
}

/* Main Section Wrapper */
.programs-twi {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Centered Container matching design specs */
.programs-twi__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    box-sizing: border-box;
}

/* Left Content Column */
.programs-twi__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Field Styles matching specs */
.programs-twi__title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em; /* 5% */
    color: #757575;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

/* Simulated horizontal line from mockup preceding the title */
.programs-twi__title::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #757575;
    margin-right: 12px;
}

.programs-twi__heading {
    margin-bottom: 24px;
}

.programs-twi__heading p,
.programs-twi__heading h2 {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 45px;
    letter-spacing: 0.02em; /* 2% */
    color: #000000;
    margin: 0;
}

.programs-twi__body p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 30px;
    letter-spacing: 0.01em; /* 1% */
    color: #000000;
    margin: 0;
}

/* Right Image Column & Dynamic Aspect Ratio Handling */
.programs-twi__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 746 / 582;
    overflow: hidden;
}

.programs-twi__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback Gray Box Container placeholder */
.programs-twi__image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #707070;
}

/* Responsive Tablet & Desktop Layouts */
@media (min-width: 992px) {
    .programs-twi__container {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        padding: 100px 80px;
    }
    
    /* Ensuring perfectly tailored spacing matching mockup distribution */
    .programs-twi__content {
        padding-right: 20px;
    }
}

@media (min-width: 1200px) {
    .programs-twi__container {
        gap: 112px;
    }
}

/* ==========================================================================
   Programs - Text with Bullet List Component
   ========================================================================== */

/* Layout & Container setup */
.ptwbl-section {
    background-color: #2D281F;
    width: 100%;
    margin: 0;
    padding: 100px 24px; /* Default desktop outer padding */
    box-sizing: border-box;
}

.ptwbl-container {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* --- Left Column Typography Styles --- */

.ptwbl-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em; /* 5% */
    color: #CFCFCF;
    text-transform: uppercase;
    margin: 0 0 24px 0;
    position: relative;
    padding-left: 45px;
}

/* Left accent bar mimicking the mockup next to OUTCOMES */
.ptwbl-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 1px;
    background-color: #CFCFCF;
}

.ptwbl-text-1 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 51.34px;
    line-height: 57.75px;
    letter-spacing: 0.03em; /* 3% */
    color: #FFFFFF;
    margin: 0 0 28px 0;
}

/* Style for italicized/emphasized keywords within title */
.ptwbl-text-1 em,
.ptwbl-text-1 i {
    font-style: italic;
    color: #CFCFCF; 
}

.ptwbl-text-2 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 140%; /* Boosted readability from baseline 100% specification for layout body */
    letter-spacing: 0.03em; /* 3% */
    color: #D9D9D9;
    max-width: 440px; /* Constrains body paragraphs clean layout alignment */
    margin: 0;
}

/* --- Right Column Bullet List Styles --- */

.ptwbl-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ptwbl-bullet-list li {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
    line-height: 72px; /* Preserves specific asset vertical grid rhythm */
    letter-spacing: 0.03em; /* 3% */
    color: #CFCFCF;
    position: relative;
    padding-left: 28px;
}

/* Custom matching bullet markers */
.ptwbl-bullet-list li::before {
    content: "•";
    color: #CFCFCF;
    position: absolute;
    left: 0;
    font-size: 24px;
    line-height: 72px;
}

/* --- Responsive Layout Breakpoints --- */

@media (max-width: 1024px) {
    .ptwbl-container {
        gap: 40px;
    }
    .ptwbl-text-1 {
        font-size: 42px;
        line-height: 48px;
    }
    .ptwbl-bullet-list li {
        font-size: 20px;
        line-height: 60px;
    }
    .ptwbl-bullet-list li::before {
        line-height: 60px;
    }
}

@media (max-width: 768px) {
    .ptwbl-section {
        padding: 60px 20px;
    }
    .ptwbl-container {
        grid-template-columns: 1fr; /* Stack columns on tablets and mobile devices */
        gap: 48px;
    }
    .ptwbl-text-1 {
        font-size: 36px;
        line-height: 42px;
    }
    .ptwbl-bullet-list li {
        font-size: 18px;
        line-height: 48px;
    }
    .ptwbl-bullet-list li::before {
        line-height: 48px;
    }
}

/* Container & Layout */
.ptctg-section {
    background-color: transparent;
    width: 100%;
    padding: 80px 20px;
    box-sizing: border-box;
}

.ptctg-container {
    max-width: 1080px;
    margin: 0 auto;
}

/* Header */
.ptctg-header {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
    align-items: flex-end;
}

.ptctg-header-left, .ptctg-header-right {
    flex: 1;
    min-width: 300px;
}

.ptctg-title-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em;
    color: #757575;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    padding-left: 40px;
}

/* The dash before title */
.ptctg-title-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 25px;
    height: 1px;
    background-color: #757575;
}

.ptctg-text-1 {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 51px;
    letter-spacing: 0.02em;
    color: #000000;
}

.ptctg-text-2 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 35px;
    letter-spacing: 0.01em;
    color: #000000;
}

/* Grid */
.ptctg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.ptctg-grid-item {
    background-color: #e7e7e7;
    padding: 45px;
}

.ptctg-ti-title {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0.03em;
    color: #000000;
    margin-top: 0;
    margin-bottom: 15px;
}

.ptctg-ti-body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0.03em;
    color: #808080;
}

/* Footer */
.ptctg-footer {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.ptctg-footer-text-1 {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 29px;
    line-height: 27px;
    letter-spacing: 0.03em;
    color: #000000;
    margin-bottom: 10px;
}

.ptctg-footer-text-2 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0.03em;
    color: #000000;
    margin-top: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .ptctg-grid {
        grid-template-columns: 1fr;
    }
    .ptctg-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .ptctg-text-1 {
        font-size: 32px;
        line-height: 42px;
    }
    .ptctg-grid-item {
        padding: 30px;
    }
}
/* ========================================================================== 
   CCI 2026 FIGMA ALIGNMENT LAYER
   Reference: revised desktop Figma frames supplied August 2026.
   This section intentionally overrides the earlier component rules above.
   ========================================================================== */

:root {
    --cci-blue: #126d9e;
    --cci-blue-bright: #126D9E;
    --cci-navy: #093660;
    --cci-panel: #f1f1f1;
    --cci-offwhite: #f6f6f6;
    --cci-text: #111111;
    --cci-muted: #737373;
    --cci-line: #b9b9b9;
    --cci-white: #ffffff;
    --cci-content: 1260px;
    --cci-gutter: 90px;

    /*
     * Typography audit against the revised Figma snapshots:
     * - DM Serif Display: primary display/headline face
     * - Playfair Display: Team/detail and Contact editorial serif
     * - Playfair: large statistical numerals
     * - Inter: navigation, labels, body copy, controls
     */
    --cci-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --cci-editorial: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --cci-numeric: 'Playfair', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --cci-serif: var(--cci-display);
    --cci-sans: 'Inter', Arial, Helvetica, sans-serif;
}

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    color: var(--cci-text);
    background: var(--cci-white);
    font-family: var(--cci-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.site-main {
    width: 100%;
    overflow: hidden;
}

img {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Header / navigation — 80px desktop header used by all revised frames
   -------------------------------------------------------------------------- */
.site-header {
    height: 80px;
    padding: 0 var(--cci-gutter);
    display: flex;
    align-items: center;
    background: var(--cci-white);
}

.header-container,
.footer-container {
    width: 100%;
    max-width: var(--cci-content);
    margin: 0 auto;
}

.header-container {
    height: 100%;
}

.site-branding {
    width: 140px;
    max-width: 140px;
    max-height: 54px;
}

.site-branding .custom-logo-link,
.site-branding img {
    display: block;
    width: 100%;
    height: auto;
}

.main-navigation ul {
    gap: 48px;
}

.main-navigation a {
    font-family: var(--cci-sans);
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: .055em;
    color: var(--cci-text);
    text-transform: uppercase;
}

/*
 * The Figma frame uses Contact only as an example of the active state.
 * Reserve identical geometry for every top-level item so hover/current states
 * never cause neighboring menu items to jump.
 */
.main-navigation #primary-menu {
    gap: 0;
}

.main-navigation #primary-menu > li > a {
    padding: 13px 27px;
    color: var(--cci-text);
    background: transparent;
}

.main-navigation #primary-menu > li.current-menu-item > a,
.main-navigation #primary-menu > li.current_page_item > a,
.main-navigation #primary-menu > li.current-menu-ancestor > a,
.main-navigation #primary-menu > li.current_page_ancestor > a,
.main-navigation #primary-menu > li > a:hover,
.main-navigation #primary-menu > li > a:focus-visible,
.main-navigation #primary-menu > li > a:focus {
    color: var(--cci-white);
    background: var(--cci-navy);
}

/* --------------------------------------------------------------------------
   Shared wave treatment
   -------------------------------------------------------------------------- */
.hero-stats-section,
.cci-about-section,
.team-hero-section,
.ptwbl-section,
.cci-callout-banner,
.contact-gravity-section {
    isolation: isolate;
    position: relative;
    background-color: var(--cci-blue);
}

.hero-stats-section::before,
.cci-about-section::before,
.team-hero-section::before,
.ptwbl-section::before,
.cci-callout-banner::before,
.contact-gravity-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url('assets/waves.png') center center / cover no-repeat;
    opacity: .3;
}

.hero-stats-container,
.cci-about-container,
.programs-hero-container,
.ptwbl-container,
.cci-callout-container,
.contact-gravity-container {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   HOME — Hero
   -------------------------------------------------------------------------- */
.hero-stats-section {
    min-height: 752px;
    padding: 100px var(--cci-gutter) 118px;
    color: var(--cci-white);
}

.hero-stats-section::before {
    opacity: .30;
}

.hero-stats-container {
    max-width: var(--cci-content);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .82fr);
    gap: 104px;
    align-items: start;
}

.hero-content-col {
    max-width: 600px;
}

.hero-subtitle-wrap {
    gap: 14px;
    margin: 0 0 27px;
}

.hero-subtitle-wrap .hero-line {
    width: 34px;
    background: rgba(255, 255, 255, .62);
}

.hero-subtitle-wrap .hero-subtitle {
	font: 500 18px/1 var(--cci-sans);
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .9);
}

.hero-title {
    max-width: 590px;
    margin: 0;
    font-family: var(--cci-serif);
    font-size: 52px;
    line-height: 1.075;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cci-white);
    max-width: 526px;
}

.hero-title em,
.hero-title i {
    color: var(--cci-navy);
    font-style: italic;
}

.hero-title-italic,
.hero-title-italic p {
    display: block;
    max-width: 560px;
    margin: 42px 0 0;
    font-family: var(--cci-sans);
    font-size: 21px;
    line-height: 1.33;
    font-style: normal;
    letter-spacing: .012em;
    color: var(--cci-white);
}

.hero-title-italic a {
    display: table;
    margin-top: 42px;
    padding: 13px 24px;
    background: var(--cci-navy);
    color: var(--cci-white);
    font: 400 12px/1 var(--cci-sans);
    letter-spacing: .07em;
    text-decoration: none;
    text-transform: uppercase;
}

.hero-stats-col {
    width: 100%;
    max-width: none;
    margin-top: 65px;
}

.stat-row {
    min-height: 112px;
    padding: 18px 0;
    gap: 28px;
    border-color: rgba(255, 255, 255, .2);
}

.stat-number {
    min-width: 125px;
    margin: 0;
    font-family: var(--cci-numeric);
    font-optical-sizing: auto;
    font-size: 78px;
    line-height: .95;
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--cci-white);
}

.stat-desc {
    flex: 1;
    font: 400 16px/1.35 var(--cci-sans);
    letter-spacing: .02em;
    color: var(--cci-white);
}

/* The Classic Editor body is legacy content. If populated it remains available,
   but it must not create an empty spacer between the revised Figma sections. */
.home-content-body {
    padding: 0;
}

.home-content-container {
    max-width: var(--cci-content);
}

/* --------------------------------------------------------------------------
   HOME — Why CCI two-column section
   -------------------------------------------------------------------------- */
.cci-two-column-section {
    padding: 135px var(--cci-gutter) 135px;
    background: var(--cci-white);
}

.cci-container {
    max-width: var(--cci-content);
    padding: 0;
}

.cci-row-header {
    margin-bottom: 23px;
}

.cci-row-header::before,
.cci-title-wrapper::before,
.cci-slider-main-header::before,
.cci-three-col-header::before,
.programs-twi__title::before,
.ptctg-title-label::before,
.ctwgf-section-title::before,
.cci-about-subtitle-wrapper::before,
.cci-divided-title-wrapper::before {
    width: 34px;
    margin-right: 13px;
    background: var(--cci-blue-bright);
}

.cci-section-title,
.cci-grid-section-title,
.cci-slider-section-label,
.cci-three-col-section-title,
.programs-twi__title,
.ptctg-title-label,
.cci-about-subtitle,
.cci-divided-title,
.otpg-team-title {
    font-family: var(--cci-sans);
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .07em;
    color: var(--cci-blue-bright);
    text-transform: uppercase;
}

.cci-grid-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 100px;
}

.cci-col-left,
.cci-col-right {
    grid-column: auto;
}

.cci-wysiwyg-content.left-content {
    max-width: 520px;
    font-family: var(--cci-serif);
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: 0;
    color: var(--cci-text);
}

.cci-wysiwyg-content.left-content em,
.cci-wysiwyg-content.left-content i {
    color: #868686;
}

.cci-wysiwyg-content.right-content {
    max-width: 560px;
    padding-top: 4px;
    font-family: var(--cci-sans);
    font-size: 18px;
    line-height: 1.52;
    letter-spacing: 0;
    color: #2c2c2c;
}

.cci-wysiwyg-content p {
    margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   HOME — full-bleed two-image band
   -------------------------------------------------------------------------- */
.cci-two-column-images,
.cci-image-container {
    width: 100%;
    max-width: none;
    padding: 0;
}

.cci-image-grid {
    flex-wrap: nowrap;
}

.cci-image-col {
    flex: 0 0 50%;
    max-width: 50%;
}

.cci-image-wrapper {
    aspect-ratio: 720 / 414;
}

.cci-image-wrapper img {
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   HOME — Core differentiators
   -------------------------------------------------------------------------- */
.cci-four-col-section {
	/* min-height: 640px; */
	padding: 85px var(--cci-gutter) 135px;
	background: var(--cci-panel);
}

.cci-four-col-container {
    max-width: var(--cci-content);
    padding: 0;
}

.cci-four-col-header {
    display: block;
    margin-bottom: 76px;
}

.cci-four-col-header .cci-quote-wrapper,
.cci-four-col-header .cci-header-spacer {
    display: none;
}

.cci-four-col-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cci-grid-item {
    min-width: 0;
    border-right: 1px solid #a9a9a9;
}

.cci-grid-item-inner {
    padding: 0 33px;
}

.cci-grid-item:first-child .cci-grid-item-inner {
    padding-left: 35px;
}

.cci-grid-item:last-child .cci-grid-item-inner {
    padding-right: 18px;
}

.cci-item-subtitle {
    display: block;
    margin-bottom: 22px;
    font: italic 500 24px/1 var(--cci-editorial);
    color: var(--cci-blue-bright);
}

.cci-item-title {
    margin: 0 0 20px;
    font-family: var(--cci-serif);
    font-size: 30px;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cci-text);
}

.cci-item-body {
    font-family: var(--cci-sans);
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: 0;
    color: #757575;
}

/* --------------------------------------------------------------------------
   HOME — Testimonials
   -------------------------------------------------------------------------- */
.cci-testimonials-section {
    position: relative;
    min-height: 798px;
    padding: 112px var(--cci-gutter) 130px;
    background: var(--cci-white);
}
/*
.cci-testimonials-section::before {
    content: '\201C';
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, serif;
    font-size: 120px;
    line-height: 1;
    font-weight: 700;
    color: var(--cci-blue-bright);
}
*/
.cci-testimonials-section::before {
    content: '';
    position: absolute;
    top: 73px;
    left: 50%;
    transform: translateX(-50%);
    width: 99px;
    height: 67px;
    background: url('assets/quotes.png') center center / contain no-repeat;
}

.cci-slider-container {
    max-width: var(--cci-content);
    padding: 0;
}

.cci-slider-main-header {
    margin: 78px 0 60px;
}

.cci-slider-section-label {
    font-size: 22px;
    font-weight: 600;
}

.cci-carousel-outer-wrapper {
    align-items: center;
}

.cci-slick-slider-engine {
    max-width: 980px;
}

.cci-slide-inner-content {
    max-width: 910px;
}

.cci-slide-title {
    margin: 0 0 18px;
    font-family: var(--cci-editorial);
    font-size: 27px;
    line-height: 1.28;
    font-weight: 500;
    font-style: italic;
    letter-spacing: .01em;
    color: #000;
}

.cci-slide-body {
    margin-bottom: 43px;
    font-family: var(--cci-sans);
    font-size: 24px;
    line-height: 32px;
    font-weight: 300;
    color: #07214F;
}

.cci-slide-author-name {
    margin-bottom: 2px;
    font: 700 22px/1.25 var(--cci-sans);
    color: var(--cci-blue-bright);
}

.cci-slide-company-name {
    font: italic 400 18px/1.25 var(--cci-sans);
    color: #07214F;
}

.cci-slider-nav-btn svg path {
    stroke: var(--cci-blue-bright);
}

.cci-custom-slick-dots {
    bottom: -10px;
}

.cci-custom-slick-dots li {
    margin: 0 4px;
}

.cci-custom-slick-dots li button {
    width: 9px;
    height: 9px;
    background: #808080;
    opacity: 0.2;
}

.cci-custom-slick-dots li.slick-active button {
    background: #808080;
    transform: none;
    width: 15px;
    height: 15px;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Shared blue CTA band
   -------------------------------------------------------------------------- */
.cci-callout-banner {
    min-height: 264px;
    padding: 70px var(--cci-gutter);
    color: var(--cci-white);
}

.cci-callout-banner {
	min-height: 184px;
	padding: 29px var(--cci-gutter);
	color: var(--cci-white);
}

.cci-callout-banner::before {
    opacity: .30;
}

.cci-callout-container {
    max-width: var(--cci-content);
    padding: 0;
}

.cci-callout-flex-layout {
    min-height: 124px;
    gap: 70px;
}

.cci-callout-text-col {
    max-width: 760px;
}

.cci-callout-wysiwyg {
    font-family: var(--cci-serif);
    font-size: 45px;
    line-height: 1.06;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cci-white);
    max-width: 629px;
}
.page-id-21 .cci-callout-wysiwyg {
	max-width: 100%;
}
.cci-callout-wysiwyg em,
.cci-callout-wysiwyg i {
    color: var(--cci-white);
}

.cci-callout-btn {
    padding: 14px 26px;
    border: 1px solid var(--cci-navy);
    background: var(--cci-navy);
    color: var(--cci-white);
    font: 400 17px/1 var(--cci-sans);
    letter-spacing: .075em;
}

.cci-callout-btn:hover,
.cci-callout-btn:focus {
    border-color: var(--cci-white);
    background: transparent;
    color: var(--cci-white);
}

/* --------------------------------------------------------------------------
   ABOUT — blue text/image hero
   -------------------------------------------------------------------------- */
.cci-about-section {
    min-height: 749px;
    padding: 0;
    color: var(--cci-white);
}

.cci-about-section::before {
    opacity: .30;
}

.cci-about-container {
    max-width: 1440px;
    min-height: 749px;
    padding: 0;
}

.cci-about-grid {
    min-height: 749px;
    /*display: grid;
    grid-template-columns: 49% 51%;*/
    display:flex !important;
    gap: 0;
    align-items: center;
    justify-content: center;
    max-width: 1250px;
    margin: 0 auto;
}

.cci-about-text-column {
    max-width: none;
    /*padding: 0 64px 0 var(--cci-gutter);*/
    width: 50% !important;
}

.cci-about-image-column {
    max-width: none;
    width:50% !important;
    flex: none;
}
.page-id-19 #site-navigation{
    margin-right: -23px;   
}

@media screen and (max-width: 1256px){
    .page-id-19 #site-navigation{
        margin-right: 0px;   
    }
    .cci-about-grid {
        flex-direction: column-reverse !important;
    }
    
    .cci-about-text-column,
    .cci-about-image-column {
        width:93% !important;
        max-width: 600px;
        margin: 30px auto 80px !important;
        padding:0 !important;
   }
   .cci-about-image-column {
       margin: 80px auto 0 !important;
   }

}
.cci-about-subtitle-wrapper {
    margin-bottom: 30px;
}

.cci-about-subtitle-wrapper::before {
    background: rgba(255, 255, 255, .8);
}

.cci-about-subtitle {
    color: var(--cci-white);
}

.cci-about-heading-wysiwyg {
    max-width: 555px;
    margin-bottom: 28px;
    font-family: var(--cci-serif);
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--cci-navy);
}

.cci-about-heading-wysiwyg em,
.cci-about-heading-wysiwyg i {
    color: var(--cci-white);
}

.cci-about-body-wysiwyg {
    max-width: 515px;
    font-family: var(--cci-sans);
    font-size: 21px;
    line-height: 1.32;
    letter-spacing: 0;
    color: var(--cci-white);
}

.cci-about-image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
}

.cci-about-image-wrapper img {
    object-fit: cover;
    object-position: center;
}

/* ABOUT — Mission */
.cci-divided-approach-section {
    /*min-height: 633px;*/
    padding: 150px var(--cci-gutter) 80px;
}

.cci-divided-container {
    max-width: var(--cci-content);
    padding: 0;
}

.cci-divided-grid {
    grid-template-columns: 220px 1px minmax(0, 1fr);
}

.cci-divided-left-col {
    padding-right: 36px;
}

.cci-divided-grid::before {
    background: var(--cci-blue-bright);
}

.cci-divided-right-col {
    padding-left: 32px;
}

.cci-divided-title-wrapper::before {
    display: none;
}

.cci-divided-title {
    font-size: 18px;
    color: var(--cci-blue-bright);
}

.cci-divided-text1-wysiwyg {
    max-width: 850px;
    margin-bottom: 23px;
    font-family: var(--cci-editorial);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0;
}

.cci-divided-text2-wysiwyg {
    max-width: 850px;
    font-family: var(--cci-sans);
    font-size: 21px;
    line-height: 1.4;
    letter-spacing: 0;
}

/* ABOUT — six value cards */
.cci-three-col-section {
    min-height: 687px;
    padding: 68px var(--cci-gutter) 116px;
}

.cci-three-col-container {
    max-width: var(--cci-content);
    padding: 0;
}

.cci-three-col-header {
    margin-bottom: 56px;
}

.cci-three-col-header::after {
    content: '';
    height: 1px;
    flex: 1;
    margin-left: 16px;
    background: var(--cci-blue-bright);
}

.cci-three-col-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.cci-three-col-item,
.cci-three-col-item:last-child {
    min-height: 230px;
    padding: 39px 36px 34px;
    border: 0;
    background: var(--cci-panel);
}

.cci-three-col-inner,
.cci-three-col-item:first-child .cci-three-col-inner,
.cci-three-col-item:last-child .cci-three-col-inner {
    padding: 0;
}

.cci-three-col-inner::before,
.ptctg-grid-item::before {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    margin-bottom: 26px;
    background: var(--cci-blue-bright);
}

.cci-three-col-item-title {
    margin: 0 0 13px;
    font-family: var(--cci-serif);
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: 0;
}

.cci-three-col-item-body {
    font-family: var(--cci-sans);
    font-size: 18px;
    line-height: 27px;
    color: #000000;
}

/* --------------------------------------------------------------------------
   Global image bands
   -------------------------------------------------------------------------- */
.global-banner-section,
.global-banner-wrapper {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    overflow: hidden;
}

.global-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-banner-section,
.about-banner-section .global-banner-wrapper {
    height: 780px;
}

.programs-banner-section,
.programs-banner-section .global-banner-wrapper {
    height: 808px;
}

.contact-banner-section,
.contact-banner-section .global-banner-wrapper {
    height: auto; /*965px;*/
}

/* --------------------------------------------------------------------------
   PROGRAMS — light hero
   -------------------------------------------------------------------------- */
.programs-hero-section {
    position: relative;
    isolation: isolate;
    min-height: 573px;
    padding: 95px var(--cci-gutter) 90px;
    /*background: #f5f5f5;*/
	background: var(--cci-blue);
}

.programs-hero-section:not(.team-hero-section)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url('assets/waves.png') center center / cover no-repeat;
    opacity: .30;
}

.programs-hero-container {
    max-width: var(--cci-content);
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: 95px;
}

.ctwgf-section-title,
.programs-hero-container .pht-title {
    margin: 0 0 34px;
    padding-left: 47px;
    font: 400 18px/1 var(--cci-sans);
    letter-spacing: .07em;
    color: var(--cci-blue-bright);
	color: #fff;
}

.ctwgf-section-title span:before,
.programs-hero-container .pht-title::before {
    width: 34px;
    background: var(--cci-blue-bright);
}
.programs-hero-container .pht-title::before {
    background: #fff;
}
.programs-hero-container .pht-text-1,
.programs-hero-container .pht-text-1 p {
    max-width: 670px;
    font-family: var(--cci-serif);
    font-size: 52px;
    line-height: 60px;
    letter-spacing: 0;
    color: var(--cci-navy);
}

.programs-hero-container .pht-text-1 em,
.programs-hero-container .pht-text-1 i {
    color: var(--cci-blue-bright);
	color: #fff;
    font-style: italic;
}

.programs-hero-col-right {
    padding-top: 88px;
}

.programs-hero-container .pht-text-2,
.programs-hero-container .pht-text-2 p {
    font-family: var(--cci-sans);
    font-size: 21px;
    line-height: 30px;
    letter-spacing: 0;
    color: #fff;
}

/* PROGRAMS — split text/image */
.programs-twi {
    min-height: 584px;
}

.programs-twi__container {
    width: 100%;
    max-width: 1440px;
    min-height: 584px;
    padding: 0;
    grid-template-columns: 50% 50%;
    gap: 0;
}

.programs-twi__content {
    padding: 80px 88px 80px 108px;
}

.programs-twi__title {
    margin-bottom: 25px;
    font-size: 18px;
    color: var(--cci-blue-bright);
}

.programs-twi__heading {
    margin-bottom: 22px;
}

.programs-twi__heading p,
.programs-twi__heading h2 {
    max-width: 520px;
    font-family: var(--cci-editorial);
    font-size: 38px;
    line-height: 45px;
    letter-spacing: 1px;
}

.programs-twi__body p,
.programs-twi__body {
    max-width: 530px;
    font-family: var(--cci-sans);
    font-size: 17px;
    line-height: 30px;
    letter-spacing: 1px;
}

.programs-twi__image-wrapper {
    height: 584px;
    aspect-ratio: auto;
}

/* PROGRAMS — Outcomes */
.ptwbl-section {
    min-height: 553px;
    padding: 86px var(--cci-gutter);
}

.ptwbl-section::before {
    opacity: .30;
}

.ptwbl-container {
    max-width: var(--cci-content);
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
}

.ptwbl-title {
    margin-bottom: 25px;
    padding-left: 47px;
    font: 400 18px/1 var(--cci-sans);
    letter-spacing: .07em;
    color: #fff; /*var(--cci-navy);*/
}

.ptwbl-title::before {
    width: 34px;
    background: #fff; /*var(--cci-navy);*/
}

.ptwbl-text-1 {
    max-width: 470px;
    margin-bottom: 16px;
    font-family: var(--cci-editorial);
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: 1px;
    color: var(--cci-white);
}

.ptwbl-text-1 em,
.ptwbl-text-1 i {
    color: var(--cci-white);
}

.ptwbl-text-2 {
    max-width: 430px;
    font-family: var(--cci-sans);
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #D9D9D9; /*rgba(255, 255, 255, .9);*/
}

.ptwbl-bullet-list li {
    min-height: 61px;
    padding-left: 24px;
    font-family: var(--cci-sans);
    font-size: 22px;
    line-height: 72px; /*1.35*/
    font-weight: 500;
    letter-spacing: .01em;
    color: #CFCFCF; /*rgba(255, 255, 255, .92);*/
    display: flex;
    align-items: center;
}

.ptwbl-bullet-list li::before {
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, .9);
}

/* PROGRAMS — typical day + 2x2 cards */
.ptctg-section {
    min-height: 1160px;
    padding: 88px var(--cci-gutter) 105px;
}

.ptctg-container {
    max-width: 1200px;
}

.ptctg-header {
    display: block;
    margin-bottom: 62px;
}

.ptctg-header-left,
.ptctg-header-right {
    min-width: 0;
    max-width: 880px;
}

.ptctg-header-right {
    margin-top: 14px;
}

.ptctg-title-label {
    margin-bottom: 25px;
    padding-left: 47px;
}

.ptctg-text-1,
.ptctg-text-1 p {
    margin: 0;
    font-family: var(--cci-editorial);
    font-size: 38px;
    line-height: 51px;
    letter-spacing: 1px;
    color: var(--cci-blue-bright);
}

.ptctg-text-1 em,
.ptctg-text-1 i {
    color: var(--cci-blue-bright);
}

.ptctg-text-2,
.ptctg-text-2 p {
    margin: 0;
    max-width: 840px;
    font-family: var(--cci-sans);
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0px;
}

.ptctg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 62px;
}

.ptctg-grid-item {
    position: relative;
    min-height: 280px;
    padding: 38px 40px;
    background: var(--cci-panel);
}

.ptctg-grid-item::before {
    margin-bottom: 24px;
}

.ptctg-ti-title {
    margin: 0 0 16px;
    font-family: var(--cci-serif);
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0;
}

.ptctg-ti-body,
.ptctg-ti-body p {
    margin: 0;
    font-family: var(--cci-sans);
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 1px;
    color: #000000;
}

.ptctg-footer {
    max-width: 800px;
}

.ptctg-footer-text-1 {
    margin: 0 0 7px;
    font-family: var(--cci-editorial);
    font-size: 29px;
    line-height: 27px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
}

.ptctg-footer-text-2 {
    margin: 0;
    font: 400 18px/32px var(--cci-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cci-blue-bright);
}

/* --------------------------------------------------------------------------
   OUR TEAM — blue hero reusing the Programs markup
   -------------------------------------------------------------------------- */
.team-hero-section {
    min-height: 572px;
    padding: 92px var(--cci-gutter) 86px;
    background: var(--cci-blue);
}

.team-hero-section::before {
    opacity: .30;
}

.team-hero-section .programs-hero-container {
    grid-template-columns: 1fr .9fr;
    gap: 95px;
}

.team-hero-section .pht-title {
    color: rgba(255, 255, 255, .95);
}

.team-hero-section .pht-title::before {
    background: rgba(255, 255, 255, .8);
}

.team-hero-section .pht-text-1,
.team-hero-section .pht-text-1 p {
    color: var(--cci-navy);
}

.team-hero-section .pht-text-1 em,
.team-hero-section .pht-text-1 i {
    color: var(--cci-white);
}

.team-hero-section .pht-text-2,
.team-hero-section .pht-text-2 p {
    color: var(--cci-white);
}

/* OUR TEAM — grid */
.team-grid-section {
    padding: 160px var(--cci-gutter) 235px;
    background: var(--cci-white);
}

.team-grid-container {
    max-width: var(--cci-content);
}

.team-grid-header {
    margin: 0 0 100px;
    padding: 0;
    gap: 50px;
    border: 0;
    align-items: flex-end;
}

.team-grid-titles {
    max-width: 620px;
}

.otpg-team-title {
    position: relative;
    padding-left: 47px;
    margin: 0 0 22px;
}

.otpg-team-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 1px;
    background: var(--cci-blue-bright);
}

.otpg-team-description {
    margin: 0;
    font-family: var(--cci-editorial);
    font-size: 37px;
    line-height: 1.08;
    font-weight: 400;
    color: var(--cci-text);
}

.team-grid-tabs {
    gap: 12px;
    flex-shrink: 0;
}

.team-tab {
    min-width: 214px;
    padding: 14px 22px;
    border: 1px solid #888;
    background: var(--cci-white);
    color: #1c1c1c;
    font: 400 17px/1 var(--cci-sans);
    letter-spacing: .045em;
    text-align: center;
}

.team-tab.is-active,
.team-tab[aria-current='page'] {
    border-color: var(--cci-navy);
    background: var(--cci-navy);
    color: var(--cci-white);
}

.team-members-grid {
    width: 100%;
    /*max-width: 1155px;*/
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 90px;
}

.member-card {
    min-width: 0;
}

.member-image-wrapper {
    margin-bottom: 18px;
    aspect-ratio: 1 / 1;
    background: var(--cci-panel);
}

.member-details-wrapper {
    position: relative;
    padding-top: 18px;
    border: 0;
}

.member-details-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 27px;
    height: 2px;
    background: var(--cci-blue-bright);
}

.otpg-member-name {
    margin: 0 0 7px;
    font-family: var(--cci-editorial);
    font-size: 19px;
    line-height: 1.1;
    font-weight: 400;
}

.otpg-member-title {
    margin: 0 0 15px;
    font-family: var(--cci-sans);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0;
    color:#808080;
}

.otpg-member-bio {
    font-family: var(--cci-sans);
    font-size: 14px;
    line-height: 21px;
    color: #000000;
}

/* Managing-director cards are capped at five visual lines by JS. */
.manager-member-card .otpg-member-bio {
    max-height: calc(1.45em * 5);
    overflow: hidden;
}

/* Supporting-staff cards intentionally show name + role only. */
.staff-member-card .otpg-member-bio {
    display: none !important;
}

/* Team lightbox keeps the same visual language as the cards. */
.otpg-modal-window {
    border-color: #bdbdbd;
}

.otpg-modal-name-target {
    font-family: var(--cci-editorial);
}

.otpg-modal-title-target,
.otpg-modal-bio-target {
    font-family: var(--cci-sans);
}

/* --------------------------------------------------------------------------
   CONTACT — blue form hero
   -------------------------------------------------------------------------- */
.contact-gravity-section {
    min-height: 850px;
    padding: 105px var(--cci-gutter) 118px;
    color: var(--cci-white);
}

.contact-gravity-section::before {
    opacity: .30;
}

.contact-gravity-container {
    max-width: var(--cci-content);
    grid-template-columns: minmax(0, 470px) minmax(0, 645px);
    gap: 105px;
    align-items: start;
}

.contact-text-column {
    padding-top: 118px;
}

.ctwgf-section-title {
    margin: 0 0 25px;
    padding-left: 47px;
    font: 400 14px/1 var(--cci-sans);
    letter-spacing: .07em;
    color: var(--cci-white);
}

.ctwgf-section-title::before {
    background: rgba(255,255,255,.8);
}

.ctwgf-heading-main {
    max-width: 420px;
    margin: 0 0 30px;
    /*font-family: var(--cci-editorial);*/
    font-family: var(--cci-serif);
    font-size: 52px;
    line-height: 1.04;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cci-navy);
}

.ctwgf-heading-main em,
.ctwgf-heading-main i {
    color: var(--cci-white);
}

.ctwgf-body-desc,
.ctwgf-body-desc p {
    max-width: 450px;
    margin: 0;
    font-family: var(--cci-sans);
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0;
    color: var(--cci-white);
}

.contact-form-column {
    width: 100%;
}

.contact-form-column .gform_wrapper,
.contact-form-column .gform_wrapper.gravity-theme,
.contact-form-column .gform_wrapper.gravity-theme form {
    width: 100%;
    max-width: none;
    margin: 0 !important;
}

.contact-form-column .gform_title {
    margin: 0 0 28px !important;
    font-family: var(--cci-editorial) !important;
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    font-style: italic !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    color: var(--cci-navy) !important;
}

.contact-form-column .gform_fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px 8px !important;
}

.contact-form-column .gfield {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
}

.contact-form-column .gfield.gfield--width-half,
.contact-form-column .gfield_left,
.contact-form-column .gfield_right {
    grid-column: span 1 !important;
}

.contact-form-column .gform_wrapper input[type='text'],
.contact-form-column .gform_wrapper input[type='email'],
.contact-form-column .gform_wrapper input[type='tel'],
.contact-form-column .gform_wrapper input[type='url'],
.contact-form-column .gform_wrapper select,
.contact-form-column .gform_wrapper textarea {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: var(--cci-white) !important;
    box-shadow: none !important;
    color: #707070 !important;
    font-family: var(--cci-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

.contact-form-column .gform_wrapper input[type='text'],
.contact-form-column .gform_wrapper input[type='email'],
.contact-form-column .gform_wrapper input[type='tel'],
.contact-form-column .gform_wrapper input[type='url'],
.contact-form-column .gform_wrapper select {
    min-height: 64px !important;
    padding: 0 15px !important;
    line-height: 64px !important;
}

.contact-form-column .gform_wrapper textarea {
    min-height: 182px !important;
    padding: 16px !important;
    line-height: 1.45 !important;
    resize: vertical;
}

.contact-form-column .gfield_label,
.contact-form-column .gfield_required,
.contact-form-column .gfield_description:not(.validation_message) {
    display: none !important;
}

.contact-form-column .gform_footer,
.contact-form-column .gform_page_footer {
    display: flex !important;
    justify-content: center !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
}

.contact-form-column .gform_button,
.contact-form-column input[type='submit'] {
    min-width: 132px !important;
    margin: 0 !important;
    padding: 13px 23px !important;
    border: 1px solid var(--cci-navy) !important;
    border-radius: 0 !important;
    background: var(--cci-navy) !important;
    color: var(--cci-white) !important;
    font-family: var(--cci-sans) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

/* Contact Figma frame goes directly from the photograph to the footer. */
.contact-banner-section + .cci-callout-banner {
    display: none;
}

/* --------------------------------------------------------------------------
   Footer — 110px navy band
   -------------------------------------------------------------------------- */
.site-footer {
    min-height: 110px;
    margin: 0;
    padding: 0 var(--cci-gutter);
    display: flex;
    align-items: center;
    background: var(--cci-navy);
}

.footer-container {
    min-height: 110px;
}

.footer-title {
    margin: 0;
}

.footer-title a {
    font-family: var(--cci-editorial);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--cci-white);
}

.footer-navigation ul {
    gap: 44px;
}

.footer-navigation a {
    font-family: var(--cci-sans);
    font-size: 15px;
    line-height: 1;
    letter-spacing: .06em;
    color: var(--cci-white);
}

/* --------------------------------------------------------------------------
   Large desktop refinement. Keep the Figma proportions bounded at 1440px.
   -------------------------------------------------------------------------- */
@media (min-width: 1441px) {
    .hero-stats-section,
    .programs-hero-section,
    .team-grid-section,
    .cci-two-column-section,
    .cci-four-col-section,
    .cci-testimonials-section,
    .cci-divided-approach-section,
    .cci-three-col-section,
    .ptwbl-section,
    .ptctg-section,
    .contact-gravity-section,
    .cci-callout-banner {
        padding-left: max(var(--cci-gutter), calc((100vw - 1440px) / 2 + var(--cci-gutter)));
        padding-right: max(var(--cci-gutter), calc((100vw - 1440px) / 2 + var(--cci-gutter)));
    }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    :root {
        --cci-gutter: 48px;
    }

    .site-header,
    .site-footer {
        padding-left: var(--cci-gutter);
        padding-right: var(--cci-gutter);
    }

    .main-navigation ul {
        gap: 28px;
    }

    .hero-stats-section,
    .cci-about-section,
    .programs-hero-section,
    .team-hero-section,
    .contact-gravity-section {
        min-height: auto;
    }

    .hero-stats-container {
        grid-template-columns: 1fr 420px;
        gap: 55px;
    }

    .hero-title {
        font-size: 44px;
    }

    .stat-number {
        font-size: 64px;
    }

    .cci-grid-content {
        gap: 55px;
    }

    .cci-four-col-section {
        min-height: auto;
    }

    .cci-item-title {
        font-size: 22px;
    }

    .cci-about-container,
    .cci-about-grid {
        min-height: 650px;
    }

    .cci-about-heading-wysiwyg {
        font-size: 42px;
    }

    .programs-hero-container,
    .team-hero-section .programs-hero-container {
        gap: 50px;
    }

    .programs-hero-container .pht-text-1,
    .programs-hero-container .pht-text-1 p {
        font-size: 42px;
    }

    .programs-twi__content {
        padding: 65px 48px;
    }

    .ptwbl-container {
        gap: 55px;
    }

    .team-tab {
        min-width: 180px;
    }

    .team-members-grid {
        max-width: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 30px;
    }

    .contact-gravity-container {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        gap: 55px;
    }

    .contact-text-column {
        padding-top: 90px;
    }
}

/* --------------------------------------------------------------------------
   Mobile / narrow tablet
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --cci-gutter: 24px;
    }

    .site-header {
        height: 72px;
        padding: 0 var(--cci-gutter);
    }

    .site-branding {
        width: 126px;
    }

    .menu-toggle {
        position: relative;
        z-index: 1001;
    }

    .menu-toggle .burger-bar {
        height: 2px;
        background: var(--cci-navy);
    }

    .main-navigation {
        z-index: 1000;
    }

    .main-navigation #primary-menu > li > a {
        width: auto;
        min-width: 220px;
        text-align: center;
    }

    .hero-stats-section,
    .programs-hero-section,
    .team-hero-section,
    .contact-gravity-section,
    .cci-callout-banner,
    .cci-two-column-section,
    .cci-four-col-section,
    .cci-testimonials-section,
    .cci-divided-approach-section,
    .cci-three-col-section,
    .ptwbl-section,
    .ptctg-section,
    .team-grid-section {
        min-height: 0;
        padding-left: var(--cci-gutter);
        padding-right: var(--cci-gutter);
    }

    .hero-stats-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .hero-stats-container,
    .programs-hero-container,
    .team-hero-section .programs-hero-container,
    .ptwbl-container,
    .contact-gravity-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-title,
    .programs-hero-container .pht-text-1,
    .programs-hero-container .pht-text-1 p,
    .ptwbl-text-1,
    .ctwgf-heading-main {
        font-size: 38px;
        line-height: 1.08;
    }

    .hero-title-italic,
    .hero-title-italic p {
        margin-top: 28px;
        font-size: 16px;
    }

    .hero-stats-col,
    .programs-hero-col-right {
        margin-top: 0;
        padding-top: 0;
    }

    .stat-number {
        min-width: 105px;
        font-size: 55px;
    }

    .cci-two-column-section {
        padding-top: 58px;
        padding-bottom: 65px;
    }

    .cci-grid-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cci-wysiwyg-content.left-content {
        font-size: 32px;
        line-height: 1.08;
    }

    .cci-image-grid {
        display: block;
    }

    .cci-image-col {
        max-width: 100%;
        width: 100%;
    }

    .cci-image-col:first-child {
        margin: 0;
    }

    .cci-image-wrapper {
        aspect-ratio: 16 / 10;
    }

    .cci-four-col-section {
        padding-top: 60px;
        padding-bottom: 65px;
    }

    .cci-four-col-header {
        margin-bottom: 42px;
    }

    .cci-four-col-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cci-grid-item {
        padding: 28px 0;
        border-right: 0;
        border-bottom: 1px solid #aaa;
    }

    .cci-grid-item:first-child {
        padding-top: 0;
    }

    .cci-grid-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .cci-grid-item-inner,
    .cci-grid-item:first-child .cci-grid-item-inner,
    .cci-grid-item:last-child .cci-grid-item-inner {
        padding: 0;
    }

    .cci-testimonials-section {
        padding-top: 92px;
        padding-bottom: 105px;
    }

    .cci-testimonials-section::before {
        top: 30px;
        font-size: 90px;
    }

    .cci-slider-main-header {
        margin: 40px 0 38px;
    }

    .cci-slide-title {
        font-size: 21px;
    }

    .cci-slide-body {
        font-size: 17px;
    }

    .cci-callout-banner {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .cci-callout-flex-layout {
        min-height: 0;
        gap: 28px;
    }

    .cci-callout-wysiwyg {
        font-size: 31px;
    }

    .cci-callout-action-col,
    .cci-callout-btn {
        width: auto;
    }

    /* About */
    .cci-about-container,
    .cci-about-grid {
        min-height: 0;
    }

    .cci-about-grid {
        display: block;
    }

    .cci-about-text-column {
        padding: 65px var(--cci-gutter) 50px;
    }

    .cci-about-heading-wysiwyg {
        font-size: 36px;
    }

    .cci-about-image-wrapper {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .cci-divided-approach-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .cci-divided-grid {
        display: block;
    }

    .cci-divided-grid::before {
        display: none;
    }

    .cci-divided-left-col {
        margin-bottom: 28px;
        padding: 0;
    }

    .cci-divided-right-col {
        padding: 0;
    }

    .cci-three-col-section {
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .cci-three-col-grid {
        grid-template-columns: 1fr;
    }

    .cci-three-col-item,
    .cci-three-col-item:last-child {
        min-height: 0;
        padding: 34px 30px;
        border-bottom: 0;
    }

    /* Programs */
    .programs-hero-section,
    .team-hero-section {
        padding-top: 65px;
        padding-bottom: 70px;
    }

    .programs-twi__container {
        display: block;
        min-height: 0;
    }

    .programs-twi__content {
        padding: 62px var(--cci-gutter);
    }

    .programs-twi__heading p,
    .programs-twi__heading h2 {
        font-size: 32px;
    }

    .programs-twi__image-wrapper {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .ptwbl-section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .ptwbl-bullet-list li {
        min-height: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .ptctg-section {
        padding-top: 65px;
        padding-bottom: 75px;
    }

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

    .ptctg-grid-item {
        min-height: 0;
        padding: 34px 30px;
    }

    .ptctg-text-1,
    .ptctg-text-1 p {
        font-size: 31px;
    }

    /* Team */
    .team-grid-section {
        padding-top: 65px;
        padding-bottom: 100px;
    }

    .team-grid-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 34px;
        margin-bottom: 55px;
    }

    .otpg-team-description {
        font-size: 32px;
    }

    .team-grid-tabs {
        width: 100%;
        flex-direction: row;
    }

    .team-tab {
        min-width: 0;
        flex: 1;
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
    }

    .team-members-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 55px 20px;
    }

    .otpg-member-name {
        font-size: 16px;
    }

    .otpg-member-bio {
        font-size: 11px;
    }

    /* Contact */
    .contact-gravity-section {
        padding-top: 65px;
        padding-bottom: 75px;
    }

    .contact-text-column {
        padding-top: 0;
    }

    .contact-form-column .gform_fields {
        grid-template-columns: 1fr !important;
    }

    .contact-form-column .gfield,
    .contact-form-column .gfield.gfield--width-half,
    .contact-form-column .gfield_left,
    .contact-form-column .gfield_right {
        grid-column: 1 !important;
    }

    .about-banner-section,
    .about-banner-section .global-banner-wrapper,
    .programs-banner-section,
    .programs-banner-section .global-banner-wrapper,
    .contact-banner-section,
    .contact-banner-section .global-banner-wrapper {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .site-footer,
    .footer-container {
        min-height: 0;
    }

    .site-footer {
        padding: 42px var(--cci-gutter);
    }

    .footer-container {
        gap: 30px;
    }

    .footer-navigation ul {
        gap: 17px;
    }
}

@media (max-width: 480px) {

    .cci-about-heading-wysiwyg {
        font-size: 32px;
    }
    
    .team-members-grid {
        grid-template-columns: 1fr;
    }

    .team-grid-tabs {
        flex-direction: column;
    }

    .hero-title,
    .programs-hero-container .pht-text-1,
    .programs-hero-container .pht-text-1 p,
    .ptwbl-text-1,
    .ctwgf-heading-main {
        font-size: 34px;
    }
}

/* ========================================================================== 
   CCI FIGMA ALIGNMENT HOTFIX v1.1.1
   Restores structural declarations that originally lived in inline <style>
   blocks in the Contact and Our Team templates. The v1.1.0 visual alignment
   layer intentionally moved styling to style.css, but several layout-only
   declarations were not carried over. These rules restore structure while
   preserving the revised Figma visual values above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OUR TEAM — structural foundation
   -------------------------------------------------------------------------- */
.team-grid-section {
    width: 100%;
    box-sizing: border-box;
}

.team-grid-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.team-grid-header {
    display: flex;
    justify-content: space-between;
}

.team-grid-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.team-grid-tabs {
    display: flex;
}

.team-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.team-members-grid {
    display: grid;
}

.member-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.member-image-wrapper {
    width: 100%;
    overflow: hidden;
}

.member-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-details-wrapper {
    width: 100%;
}

.otpg-hidden-full-bio {
    display: none !important;
}

/* Team bio modal — these declarations are functional, not cosmetic. */
.otpg-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .95);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.otpg-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.otpg-modal-window {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(780px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 60px 40px;
    box-sizing: border-box;
    background: #fff;
    text-align: center;
    border: 1px solid #000;
}

.otpg-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.otpg-modal-image-target {
    width: 280px;
    height: 280px;
    margin-bottom: 25px;
    overflow: hidden;
    flex: 0 0 auto;
    background: var(--cci-panel);
}

.otpg-modal-image-target img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.otpg-modal-name-target {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.15;
    font-weight: 400;
}

.otpg-modal-title-target {
    margin: 0 0 35px;
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #808080; /*var(--cci-muted);*/
}

.otpg-modal-bio-target {
    width: 100%;
    max-width: 620px;
    font-size: 14px;
    line-height: 30px;
    text-align: left;
    color: #000000; /*var(--cci-text);*/
}

body.modal-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   CONTACT — structural foundation
   -------------------------------------------------------------------------- */
.contact-gravity-section {
    width: 100%;
    box-sizing: border-box;
}

.contact-gravity-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    justify-content: space-between;
}

.contact-text-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.contact-form-column {
    min-width: 0;
}

.contact-form-column .gform_fields {
    width: 100%;
}

.contact-form-column ::placeholder {
    color: #757575 !important;
    opacity: 1;
}

/* Keep Gravity Forms half-width fields on the intended two-column grid. */
@media (min-width: 769px) {
    .contact-form-column .gfield.gfield--width-half,
    .contact-form-column .gfield_left,
    .contact-form-column .gfield_right {
        grid-column: span 1 !important;
    }
}

/* Modal sizing only; the main responsive page layout remains controlled by
   the Figma alignment media queries above. */
@media (max-width: 900px) {
    .otpg-modal-window {
        padding: 50px 24px;
    }
}

@media (max-width: 550px) {
    .otpg-modal-image-target {
        width: 220px;
        height: 220px;
    }

    .otpg-modal-bio-target {
        font-size: 15px;
        line-height: 1.7;
    }
}
/* ==========================================================================
   Sticky / shrinking site header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;

    /* Current desktop height */
    height: 80px;

    background: #fff;

    transition:
        height 0.25s ease,
        box-shadow 0.25s ease;
}

/* Logo starts at the current Figma size */
.site-branding {
    width: 140px;
    max-width: 140px;

    transition:
        width 0.25s ease,
        max-width 0.25s ease;
}

.site-branding .custom-logo-link,
.site-branding img {
    display: block;
    width: 100%;
    height: auto;
}

/* Apply after scrolling more than 1px */
.site-header.is-scrolled {
    height: 64px;

    /* Optional subtle separation from page content */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.site-header.is-scrolled .site-branding {
    width: 108px;
    max-width: 108px;
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    .site-header {
        height: 72px;
    }

    .site-branding {
        width: 126px;
        max-width: 126px;
    }

    .site-header.is-scrolled {
        height: 58px;
    }

    .site-header.is-scrolled .site-branding {
        width: 100px;
        max-width: 100px;
    }
}
/* ==========================================================================
   Programs — Outcomes bullet list
   Improved narrow-screen / stacked presentation
   ========================================================================== */

@media (max-width: 900px) {

    /*
     * Stack earlier than 768px.
     * The Outcomes section becomes cramped in two columns
     * before reaching phone width.
     */
    .ptwbl-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        align-items: start;
    }

    .ptwbl-content-col,
    .ptwbl-list-col {
        width: 100%;
        min-width: 0;
    }

    /*
     * Keep the list visually connected to the section
     * instead of looking like a second unrelated column.
     */
    .ptwbl-list-col {
        margin-top: 4px;
    }

    .ptwbl-bullet-list {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /*
     * Individual outcome.
     *
     * Grid is preferable to flex here because the bullet gets
     * its own fixed column and remains aligned to the first line
     * when the text wraps.
     */
    .ptwbl-bullet-list li {
        display: grid;
        grid-template-columns: 10px minmax(0, 1fr);
        column-gap: 13px;
        align-items: start;

        position: relative;

        min-height: 0;
        margin: 0;
        padding: 15px 0;

        font-family: var(--cci-sans);
        font-size: 17px;
        font-weight: 500;
        line-height: 1.45;
        letter-spacing: .01em;

        color: rgba(255, 255, 255, .94);

        border-top: 1px solid rgba(255, 255, 255, .18);
    }

    .ptwbl-bullet-list li:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    /*
     * Override the desktop absolutely-positioned marker.
     * It now occupies the first grid column.
     */
    .ptwbl-bullet-list li::before {
        content: "•";

        position: static;
        top: auto;
        left: auto;
        transform: none;

        display: block;

        margin: 0;
        padding: 0;

        font-size: 18px;
        line-height: 1.45;

        color: rgba(255, 255, 255, .82);
    }
}


/* Phone refinement */
@media (max-width: 600px) {

    .ptwbl-section {
        padding-top: 54px;
        padding-bottom: 54px;
    }

    .ptwbl-container {
        gap: 28px;
    }

    .ptwbl-bullet-list li {
        grid-template-columns: 8px minmax(0, 1fr);
        column-gap: 11px;

        padding: 13px 0;

        font-size: 16px;
        line-height: 1.45;
    }

    .ptwbl-bullet-list li::before {
        font-size: 16px;
        line-height: 1.45;
    }
}
article {
	max-width: 1280px;
	margin: 50px auto;
	padding: 0 20px;
}
article header{
	text-align: center;
}
article .entry-content{	
	max-width: 900px;
	margin: 0 auto 100px;
}