/*
Theme Name: Citizens
Theme URI: https://createdbyblack.com/work/citizens
Description: A theme for Citizens based on the Twenty Twenty-Five theme.
Author: Created by Black
Author URI: https://createdbyblack.com/
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: citizens
*/

/* Design Tokens */
:root {
	/* Primitive: typography */
	--font-family-base: 'Montserrat', sans-serif;
	--font-family-accent: 'Rock Salt', cursive;

	/* Primitive: brand colors */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-ink-900: #2f2f2f;
	--color-ink-500: #a2a2a2;
	--color-ink-100: #EDEDF0;
	--color-orange-500: #ff9b00;
	--color-orange-300: #ffc569;
	--color-orange-100: #ffebcb;
	--color-blue-500: #00b9ff;
	--color-blue-200: #7fdcff;
	--color-blue-100: #ccf1ff;
	--color-purple-500: #813680;
	--color-purple-100: #e1d1e1;

	/* Primitive: rgba surfaces from Figma */
	--color-orange-100-60: rgba(255, 235, 203, 0.6);
	--color-orange-300-70: rgba(255, 197, 105, 0.7);
	--color-ink-900-60: #2f2f2f99;

	--white-filter: invert(83%) sepia(100%) saturate(0%) hue-rotate(80deg) brightness(180%) contrast(135%);
	--purple-filter: invert(23%) sepia(70%) saturate(1137%) hue-rotate(265deg) brightness(50%) contrast(92%);
	--blue-filter: invert(45%) sepia(84%) saturate(1188%) hue-rotate(167deg) brightness(105%) contrast(107%);
  

	/* Primitive: type scale */
	--text-2xs: 12px;
	--text-xs: 14px;
	--text-sm: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-lg-plus: 1.375rem;
	--text-xl: 1.5rem;
	--text-2xl: 1.625rem;
	--text-3xl: 2rem;

	/* Primitive: radii */
	--radius-xs: 5px;
	--radius-sm: 12px;
	--radius-md: 20px;

	/* Primitive: spacing */
	--space-2xs: 6px;
	--space-xs: 8px;
	--space-sm: 10px;
	--space-md: 14px;
	--space-lg: 16px;
	--space-xl: 20px;
	--space-2xl: 24px;
	--space-3xl: 30px;

	/* Semantic: typography */
	--font-body: var(--font-family-base);
	--font-display: var(--font-family-accent);

	/* Semantic: text */
	--color-text-primary: var(--color-ink-900);
	--color-text-secondary: var(--color-ink-500);
	--color-text-inverse: var(--color-white);
	--color-text-brand-orange: var(--color-orange-500);
	--color-text-brand-blue: var(--color-blue-500);
	--color-text-brand-purple: var(--color-purple-500);

	/* Semantic: borders and surfaces */
	--color-border-accent-orange: var(--color-orange-500);
	--color-border-accent-blue: var(--color-blue-200);
	--color-border-subtle: var(--color-ink-100);
	--color-surface-page: var(--color-white);
	--color-surface-muted-orange: var(--color-orange-100-60);
	--color-surface-muted-blue: var(--color-blue-100);
	--color-surface-tag-orange: var(--color-orange-300-70);

	/* Semantic: interactive accents */
	--color-action-primary: var(--color-orange-500);
	--color-action-secondary: var(--color-blue-500);
	--color-action-tertiary: var(--color-purple-500);

	/* Shapes Clip Path */
	--card-hover-shape: polygon( 80.523% 0%,80.523% 0%,81.315% 0.087%,82.065% 0.34%,82.765% 0.744%,83.404% 1.286%,83.973% 1.953%,84.46% 2.729%,84.857% 3.603%,85.153% 4.559%,85.338% 5.585%,85.401% 6.667%,85.401% 13.333%,85.401% 13.333%,85.465% 14.415%,85.65% 15.441%,85.946% 16.397%,86.343% 17.271%,86.83% 18.047%,87.399% 18.714%,88.038% 19.256%,88.738% 19.66%,89.488% 19.913%,90.28% 20%,95.122% 20%,95.122% 20%,95.913% 20.087%,96.664% 20.34%,97.364% 20.744%,98.003% 21.286%,98.571% 21.953%,99.059% 22.729%,99.456% 23.603%,99.751% 24.559%,99.936% 25.585%,100% 26.667%,100% 93.333%,100% 93.333%,99.936% 94.415%,99.751% 95.441%,99.456% 96.397%,99.059% 97.271%,98.571% 98.047%,98.003% 98.714%,97.364% 99.256%,96.664% 99.66%,95.913% 99.913%,95.122% 100%,4.878% 100%,4.878% 100%,4.087% 99.913%,3.336% 99.66%,2.636% 99.256%,1.997% 98.714%,1.429% 98.047%,0.941% 97.271%,0.544% 96.397%,0.249% 95.441%,0.064% 94.415%,0% 93.333%,0% 6.667%,0% 6.667%,0.064% 5.585%,0.249% 4.559%,0.544% 3.603%,0.941% 2.729%,1.429% 1.953%,1.997% 1.286%,2.636% 0.744%,3.336% 0.34%,4.087% 0.087%,4.878% 0%,80.523% 0% );
	--card-default-shape: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

	--subpage-hero-shape: polygon( 39.229% 94.614%,39.225% 79.445%,39.225% 79.445%,39.205% 78.609%,39.146% 77.815%,39.051% 77.075%,38.924% 76.399%,38.769% 75.798%,38.587% 75.282%,38.383% 74.863%,38.159% 74.55%,37.919% 74.355%,37.666% 74.287%,1.563% 74.281%,1.563% 74.281%,1.31% 74.214%,1.07% 74.018%,0.846% 73.706%,0.642% 73.286%,0.46% 72.77%,0.304% 72.169%,0.178% 71.493%,0.083% 70.753%,0.024% 69.96%,0.004% 69.123%,0% 25.748%,0% 25.748%,0.019% 24.962%,0.076% 24.236%,0.165% 23.576%,0.284% 22.985%,0.43% 22.468%,0.599% 22.028%,0.788% 21.669%,0.993% 21.397%,1.212% 21.214%,1.44% 21.126%,27.115% 21.126%,27.115% 21.126%,27.312% 20.964%,27.498% 20.725%,27.67% 20.415%,27.828% 20.04%,27.967% 19.604%,28.087% 19.113%,28.184% 18.571%,28.257% 17.985%,28.302% 17.359%,28.318% 16.698%,28.328% 4.822%,28.328% 4.822%,28.344% 4.1%,28.392% 3.393%,28.47% 2.715%,28.575% 2.081%,28.707% 1.505%,28.863% 1.001%,29.043% 0.585%,29.243% 0.269%,29.464% 0.07%,29.703% 0%,98.792% 0%,98.792% 0%,98.989% 0.053%,99.176% 0.206%,99.35% 0.451%,99.508% 0.781%,99.648% 1.186%,99.768% 1.659%,99.866% 2.191%,99.938% 2.775%,99.984% 3.401%,99.999% 4.063%,99.999% 95.483%,99.999% 95.483%,99.984% 96.202%,99.938% 96.874%,99.864% 97.492%,99.763% 98.051%,99.638% 98.544%,99.491% 98.962%,99.324% 99.3%,99.137% 99.55%,98.935% 99.706%,98.717% 99.761%,40.791% 99.775%,40.791% 99.775%,40.538% 99.709%,40.298% 99.515%,40.074% 99.203%,39.869% 98.783%,39.687% 98.268%,39.531% 97.666%,39.404% 96.99%,39.309% 96.249%,39.25% 95.454%,39.23% 94.617%,39.229% 94.614% );
	/* --subpage-hero-mobile-shape: polygon( 62.429% 99.589%,48.531% 99.552%,48.531% 99.552%,48.396% 99.519%,46.902% 99.503%,44.362% 99.5%,41.087% 99.507%,37.386% 99.521%,33.572% 99.539%,29.955% 99.558%,26.846% 99.576%,24.557% 99.588%,23.398% 99.593%,2.736% 99.588%,2.736% 99.588%,2.293% 99.522%,1.873% 99.331%,1.482% 99.026%,1.124% 98.617%,0.806% 98.115%,0.533% 97.529%,0.311% 96.87%,0.145% 96.149%,0.042% 95.375%,0.006% 94.56%,0% 25.095%,0% 25.095%,0.034% 24.329%,0.132% 23.622%,0.289% 22.979%,0.498% 22.403%,0.753% 21.898%,1.049% 21.469%,1.38% 21.12%,1.739% 20.855%,2.122% 20.677%,2.521% 20.59%,75.012% 20.59%,75.012% 20.59%,75.356% 20.432%,75.681% 20.2%,75.983% 19.898%,76.259% 19.532%,76.503% 19.107%,76.713% 18.628%,76.883% 18.101%,77.01% 17.529%,77.089% 16.919%,77.118% 16.275%,77.134% 4.7%,77.134% 4.7%,77.164% 3.996%,77.247% 3.307%,77.383% 2.646%,77.568% 2.028%,77.798% 1.467%,78.072% 0.976%,78.386% 0.57%,78.738% 0.263%,79.124% 0.068%,79.542% 0%,97.885% 0%,97.885% 0%,98.231% 0.052%,98.558% 0.201%,98.862% 0.44%,99.138% 0.761%,99.384% 1.156%,99.594% 1.617%,99.765% 2.136%,99.892% 2.704%,99.971% 3.315%,99.998% 3.96%,99.998% 95.368%,99.998% 95.368%,99.971% 96.067%,99.891% 96.722%,99.761% 97.326%,99.585% 97.87%,99.367% 98.35%,99.109% 98.758%,98.816% 99.087%,98.49% 99.331%,98.134% 99.483%,97.753% 99.536%,93.952% 99.781%,93.952% 99.781%,93.384% 99.777%,92.619% 99.763%,91.703% 99.743%,90.681% 99.717%,89.602% 99.689%,88.51% 99.66%,87.454% 99.634%,86.479% 99.612%,85.632% 99.597%,84.959% 99.592%,62.429% 99.589% ); */
	--contact-hero-shape:  polygon( 36.37% 99.816%,32.792% 99.777%,32.792% 99.777%,33.083% 99.778%,32.989% 99.781%,32.587% 99.786%,31.955% 99.791%,31.169% 99.797%,30.306% 99.802%,29.443% 99.807%,28.658% 99.812%,28.027% 99.815%,27.627% 99.816%,1.44% 99.777%,1.44% 99.777%,1.191% 99.698%,0.96% 99.471%,0.75% 99.111%,0.562% 98.634%,0.399% 98.057%,0.261% 97.394%,0.151% 96.662%,0.07% 95.877%,0.02% 95.054%,0.004% 94.209%,0% 25.627%,0% 25.627%,0.019% 24.844%,0.076% 24.122%,0.165% 23.465%,0.284% 22.877%,0.43% 22.362%,0.599% 21.924%,0.788% 21.567%,0.993% 21.296%,1.212% 21.115%,1.44% 21.026%,27.115% 21.026%,27.115% 21.026%,27.312% 20.865%,27.498% 20.627%,27.67% 20.319%,27.828% 19.946%,27.967% 19.512%,28.087% 19.023%,28.184% 18.484%,28.257% 17.9%,28.302% 17.277%,28.318% 16.619%,28.328% 4.799%,28.328% 4.799%,28.344% 4.081%,28.392% 3.377%,28.47% 2.702%,28.575% 2.071%,28.707% 1.498%,28.863% 0.997%,29.043% 0.582%,29.243% 0.268%,29.464% 0.069%,29.703% 0%,98.792% 0%,98.792% 0%,98.989% 0.053%,99.176% 0.205%,99.35% 0.449%,99.508% 0.777%,99.648% 1.18%,99.768% 1.651%,99.866% 2.181%,99.938% 2.762%,99.984% 3.385%,99.999% 4.044%,99.999% 95.505%,99.999% 95.505%,99.984% 96.219%,99.938% 96.888%,99.864% 97.504%,99.763% 98.061%,99.638% 98.55%,99.491% 98.967%,99.324% 99.303%,99.137% 99.552%,98.935% 99.707%,98.717% 99.762%,40.815% 99.816%,40.815% 99.816%,40.542% 99.816%,40.246% 99.814%,39.932% 99.81%,39.61% 99.805%,39.286% 99.799%,38.966% 99.793%,38.659% 99.787%,38.372% 99.782%,38.111% 99.779%,37.884% 99.777%,36.37% 99.816% );
	--subpage-hero-mobile-shape:  polygon( 68.697% 87.491%,68.697% 98.395%,68.697% 98.395%,68.731% 98.655%,68.831% 98.902%,68.991% 99.132%,69.205% 99.343%,69.468% 99.53%,69.775% 99.69%,70.12% 99.821%,70.497% 99.918%,70.903% 99.979%,71.33% 100%,79.64% 100%,97.23% 100%,97.23% 100%,97.68% 99.978%,98.106% 99.914%,98.503% 99.811%,98.866% 99.674%,99.189% 99.505%,99.466% 99.308%,99.691% 99.087%,99.859% 98.845%,99.964% 98.585%,100% 98.311%,100% 4.075%,100% 1.689%,100% 1.689%,99.964% 1.415%,99.859% 1.155%,99.691% 0.913%,99.466% 0.691%,99.189% 0.495%,98.866% 0.326%,98.503% 0.188%,98.105% 0.086%,97.679% 0.022%,97.23% 0%,76.039% 0%,76.039% 0%,75.634% 0.02%,75.251% 0.078%,74.893% 0.17%,74.566% 0.293%,74.276% 0.445%,74.027% 0.622%,73.824% 0.822%,73.673% 1.04%,73.578% 1.274%,73.546% 1.52%,73.546% 7.855%,73.546% 7.855%,73.51% 8.129%,73.407% 8.389%,73.243% 8.631%,73.021% 8.852%,72.748% 9.049%,72.43% 9.218%,72.07% 9.355%,71.676% 9.458%,71.252% 9.522%,70.803% 9.544%,2.743% 9.544%,2.743% 9.544%,2.294% 9.566%,1.87% 9.63%,1.476% 9.732%,1.117% 9.87%,0.798% 10.039%,0.526% 10.235%,0.304% 10.457%,0.14% 10.699%,0.037% 10.959%,0.002% 11.233%,0.002% 13.062%,0.002% 13.062%,0.001% 13.265%,0% 13.459%,0% 13.653%,0% 13.852%,0% 14.065%,0.001% 14.298%,0.001% 14.559%,0.001% 14.854%,0.001% 15.191%,0.002% 15.577%,0.005% 70.809%,0.005% 84.282%,0.005% 84.282%,0.042% 84.557%,0.147% 84.817%,0.316% 85.06%,0.543% 85.281%,0.822% 85.477%,1.147% 85.645%,1.512% 85.782%,1.911% 85.883%,2.339% 85.946%,2.791% 85.966%,51.276% 85.802%,65.93% 85.802%,65.93% 85.802%,66.379% 85.824%,66.805% 85.888%,67.202% 85.99%,67.565% 86.127%,67.887% 86.296%,68.164% 86.493%,68.388% 86.714%,68.556% 86.957%,68.661% 87.217%,68.697% 87.491% );



}

/* Box Sizing
--------------------------------------------- */
html {
	box-sizing: border-box;
}

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

/* Base Layout */
html.lenis, html.lenis body { height: auto; margin: 0!important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text-primary);
	background-color: var(--color-surface-page);
	font-weight: normal;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

/* body.lenis-active { overflow: hidden; } */

@media (prefers-reduced-motion: reduce) {
	body.lenis-active { overflow: visible; }

	/* Curriculum tabs: kill the cross-fade entirely so users
	   who opt out of motion get the same instant swap as
	   before. The panel stack (position:absolute) and the
	   container's min-height are kept so layout is identical
	   to the animated path. */
	.curriculum-tab-container .tab-content,
	.curriculum-tab-container .tab-content.active{
		transition: none;
		transform: none;
	}
}

a,button{ outline: none!important; }

p{ line-height: 1.5; }
h1, h2, h3, h4, h5, h6 {
	line-height: 1.4;
}

h1{ font-weight: 600; }
h1, h2{
	font-size: var(--text-3xl);
}

h2{ font-weight: 500; }

h3{
	font-size: var(--text-2xl);
	font-weight: 600;
}

h4{
	font-size: var(--text-xl);
	font-weight: 500;
}

/* Typography Helpers */
.rock-salt mark, .rock-salt span, .rock-salt a, .counter-box h2.rock-salt, .mix-font span, .rock-salt-all {
	font-family: var(--font-display);
	font-weight: normal;
	text-transform: lowercase;
}

.body-font{ font-family: var(--font-body)!important; font-weight: normal; text-transform: none!important; }

/* Accent Color Helpers */
.orange span {
	color: var(--color-text-brand-orange);
}

.blue span {
	color: var(--color-text-brand-blue);
}

.purple span {
	color: var(--color-text-brand-purple);
}

.fs-24{ font-size: var(--text-xl); }
.fs-22{ font-size: var(--text-lg-plus);}
.fs-20{ font-size: var(--text-lg); }
.fs-18{ font-size: var(--text-md); }
.fs-14{ font-size: var(--text-xs); }
.fs-12{ font-size: var(--text-2xs); }

img, video{ max-width: 100%;  }

/* Common classes
-------------------------------------------------------------------------*/
.row-container{
	padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}
.not-ready{ display: none!important; }
.max-500{ max-width: 500px; }
.max-700{ max-width: 700px; }
.max-750{ max-width: 750px; }
.max-800{ max-width: 800px; }
.card-link, .modal-link-a{
	position: absolute;
	inset: 0;
	z-index: 2;
	font-size: 0!important;
}

.my-100{ margin-top: 100px!important; margin-bottom: 100px!important; }
.my-80{ margin-top: 80px!important; margin-bottom: 80px!important; }

.py-100{ padding-top: 100px; padding-bottom: 100px;}


.mt-0{ margin-top: 0px; }
.mt-5{ margin-top: 5px; }
.mt-10{ margin-top: 10px; }
.mt-15{ margin-top: 15px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-80{ margin-top: 80px;}

.mb-0{ margin-bottom: 0px; }
.mb-5{ margin-bottom: 5px; }
.mb-10{ margin-bottom: 10px;}
.mb-20{ margin-bottom: 20px;}
.mb-30{ margin-bottom: 30px;}
.mb-40{ margin-bottom: 40px;}
.mb-50{ margin-bottom: 50px;}
.mb-80{ margin-bottom: 80px;}

.pt-150{ padding-top: 150px; }
.pt-100{ padding-top: 100px; }
.pt-80{ padding-top: 80px; }
.pt-70{ padding-top: 70px; }
.pt-60{ padding-top: 60px; }
.pt-50{ padding-top: 50px; }
.pt-40{ padding-top: 40px; }
.pt-30{ padding-top: 30px; }
.pt-20{ padding-top:-20px; }

.pb-150{ padding-bottom: 150px; }
.pb-100{ padding-bottom: 100px; }
.pb-80{ padding-bottom: 80px; }
.pb-70{ padding-bottom: 70px; }
.pb-60{ padding-bottom: 60px; }
.pb-50{ padding-bottom: 50px; }
.pb-40{ padding-bottom: 40px; }
.pb-30{ padding-bottom: 30px; }


.align-center{
	display: flex;
	align-items: center;
}

.dir-column{
	display: flex;
	flex-direction: column;
}

.between{ justify-content: space-between; }
.h-full{ height: 100%; }
.h-half{ height: calc(100% / 2 - 7px);}
.gap-10{ gap: 10px; }
.relative{ position: relative;}
.text-center{ text-align: center;}
.radius-md{ border-radius: var(--radius-md);}

.w-full{ width: 100%; }
.w-half{ width: calc(100% / 2); }


/* hide scrollbars with overflow auto */
.overflow-group::-webkit-scrollbar-track,
.overflow_scroll::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
  background-color: transparent;
}

.overflow-group::-webkit-scrollbar,
.overflow_scroll::-webkit-scrollbar{
  width: 0px;
  background-color: transparent;
}

.overflow-group::-webkit-scrollbar-thumb,
.overflow_scroll::-webkit-scrollbar-thumb{
  background-color: transparent;
}

.admin-bar main{ 
	margin-top: 32px!important;
}


/* Home Hero  
-------------------------------------------------------------------------*/
.hero-group-container{ 
	margin: 0 -30px!important;
}

.hero-group-container h1{ padding-bottom: 10px;}
.hero-group-container video{
	clip-path: polygon( 41.373% 97.385%,41.37% 71.026%,41.37% 71.026%,41.349% 70.602%,41.29% 70.2%,41.196% 69.825%,41.069% 69.483%,40.913% 69.178%,40.731% 68.917%,40.527% 68.704%,40.303% 68.546%,40.063% 68.447%,39.811% 68.413%,1.563% 68.41%,1.563% 68.41%,1.31% 68.376%,1.07% 68.277%,0.846% 68.118%,0.642% 67.906%,0.46% 67.644%,0.304% 67.34%,0.178% 66.998%,0.083% 66.623%,0.024% 66.22%,0.004% 65.797%,0% 13.044%,0% 13.044%,0.019% 12.645%,0.076% 12.278%,0.165% 11.943%,0.284% 11.644%,0.43% 11.382%,0.599% 11.159%,0.788% 10.977%,0.993% 10.839%,1.212% 10.747%,1.44% 10.702%,25.686% 10.702%,25.686% 10.702%,25.882% 10.62%,26.068% 10.499%,26.241% 10.342%,26.398% 10.152%,26.538% 9.931%,26.657% 9.682%,26.754% 9.408%,26.827% 9.111%,26.872% 8.794%,26.888% 8.459%,26.898% 2.443%,26.898% 2.443%,26.915% 2.077%,26.963% 1.719%,27.04% 1.375%,27.145% 1.054%,27.277% 0.762%,27.434% 0.507%,27.613% 0.296%,27.814% 0.137%,28.035% 0.035%,28.273% 0%,98.792% 0%,98.792% 0%,98.989% 0.027%,99.176% 0.104%,99.35% 0.229%,99.508% 0.396%,99.648% 0.601%,99.768% 0.84%,99.866% 1.11%,99.938% 1.406%,99.984% 1.723%,99.999% 2.058%,99.999% 97.826%,99.999% 97.826%,99.984% 98.19%,99.938% 98.53%,99.864% 98.844%,99.763% 99.127%,99.638% 99.376%,99.491% 99.588%,99.324% 99.759%,99.137% 99.886%,98.935% 99.965%,98.717% 99.993%,42.936% 100%,42.936% 100%,42.683% 99.967%,42.442% 99.868%,42.218% 99.71%,42.014% 99.497%,41.832% 99.236%,41.676% 98.932%,41.549% 98.589%,41.454% 98.214%,41.395% 97.811%,41.374% 97.387%,41.373% 97.385% );
	max-height: 830px!important;
}


/* Principal Message
-------------------------------------------------------------------------*/
.sec-principal-message{
	clip-path: polygon( 87.321% 15.378%,99.964% 15.738%,99.964% 92.824%,99.964% 95.51%,99.964% 97.71%,99.964% 98.648%,99.964% 99.263%,99.964% 99.263%,99.964% 99.047%,99.964% 98.921%,99.964% 98.875%,99.964% 98.894%,99.964% 98.967%,99.965% 99.081%,99.965% 99.225%,99.965% 99.384%,99.966% 99.547%,99.966% 99.702%,99.967% 99.702%,99.967% 99.702%,99.967% 99.826%,99.967% 99.913%,99.967% 99.969%,99.967% 99.995%,99.967% 99.994%,99.967% 99.97%,99.966% 99.926%,99.966% 99.865%,99.966% 99.789%,99.966% 99.702%,15.993% 99.702%,15.993% 99.702%,15.757% 99.668%,15.533% 99.569%,15.324% 99.411%,15.133% 99.199%,14.964% 98.939%,14.819% 98.635%,14.7% 98.293%,14.612% 97.919%,14.557% 97.518%,14.538% 97.095%,14.538% 92.855%,14.538% 92.855%,14.519% 92.432%,14.464% 92.031%,14.376% 91.657%,14.257% 91.315%,14.112% 91.011%,13.942% 90.751%,13.752% 90.539%,13.543% 90.381%,13.319% 90.282%,13.083% 90.248%,1.119% 89.784%,1.119% 89.784%,0.893% 89.75%,0.695% 89.651%,0.523% 89.493%,0.378% 89.281%,0.258% 89.02%,0.163% 88.717%,0.09% 88.375%,0.039% 88.001%,0.01% 87.6%,0% 87.177%,0% 5.385%,0% 3.309%,0% 3.364%,0% 3.364%,0% 3.068%,0% 2.927%,0% 2.9%,0% 2.948%,0% 3.031%,0% 3.109%,0% 3.143%,0% 3.094%,0% 2.92%,0% 2.583%,0% 2.383%,0% 2.383%,0% 2.051%,0% 1.882%,0% 1.825%,0% 1.831%,0% 1.847%,0% 1.822%,0% 1.705%,0% 1.445%,0% 0.99%,0% 0.291%,84.33% 0%,84.33% 0%,84.566% 0.034%,84.79% 0.133%,84.999% 0.291%,85.189% 0.503%,85.359% 0.764%,85.504% 1.067%,85.623% 1.409%,85.711% 1.783%,85.766% 2.184%,85.785% 2.607%,85.866% 12.771%,85.866% 12.771%,85.885% 13.194%,85.94% 13.595%,86.028% 13.969%,86.147% 14.311%,86.292% 14.615%,86.462% 14.875%,86.652% 15.087%,86.861% 15.245%,87.085% 15.344%,87.321% 15.378% );
}


/* Learning Stages
-------------------------------------------------------------------------*/
.sec-learning-stages{
	/* background-position: 50% -30%!important; */
	position: relative;
}

.sec-learning-stages::before{ 
	content: '';
    position: absolute;
    background: url(/wp-content/uploads/2026/06/bg-accent-02.svg) no-repeat;
    inset: 0;
    background-position: 0% -40%;
    background-size: 100%;
    z-index: 2;
}

.stages-group-container .is-layout-grid, 
.stages-group-container .relative{ position: relative; z-index: 2; }
.stages-group-container::before{
	content: '';
    position: absolute;
    inset: 0;
    background: var(--color-orange-100-60);
    z-index: 1;
    max-width: calc(100% - 40px);
    margin: auto;
    border-radius: var(--radius-md);
	/* margin-top: 70px; */
}
.stage-card h3 + p{ margin-top: 10px; }


/*Snap Slider (Generic)
-------------------------------------------------------------------------*/
body .c-snap-slider-wrap{
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

body .c-snap-slider{
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	width: 100vw;
	margin: 0 !important;
	padding: 20px var(--snap-gutter, 20px) !important;
	/* Tell the native snap engine that "start" means the gutter
	   edge, not the literal edge of the scroll container. This
	   is what keeps card #1 aligned with --snap-gutter on every
	   resize and after every drag/scroll, with no JS math needed. */
	scroll-padding-left: var(--snap-gutter, 20px);
	scroll-padding-right: var(--snap-gutter, 20px);
	gap: var(--space-2xl);
	container-type: normal !important;
}
body .c-snap-slider::-webkit-scrollbar{ display: none; }
body .c-snap-slider > *{
	scroll-snap-align: start;
	flex-shrink: 0;
}
body .c-snap-slider.is-dragging{
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

/*Curriculum Cards Slider (Snap Slider)
-------------------------------------------------------------------------*/
body .pin-spacer{ margin-top: 0!important;}
/* Edge-to-edge overflow
   ------------------------------------------------------------
   The snap-slider track needs to overflow to the viewport edges
   so the first card sits flush left and subsequent cards peek
   from the right. The parent theme's .is-layout-constrained
   rule caps this section at ~990px; we override it here so the
   section spans the full viewport width. The 50% - 50vw
   negative-margin pattern is what WordPress's own .alignfull
   class uses internally to escape a constrained container.
   Targeting the class directly (not :has()) guarantees the
   rule matches regardless of the parent theme's CSS order. */
.sec-curriculum-pillars{
	overflow: hidden!important;
	position: relative;
	z-index: 5;
}

.curriculum-card{
	position: relative;
	isolation: isolate;
	flex: 0 0 400px;
	width: 400px;
	max-width: 80vw;
	height: 300px;
	min-height: auto!important;
	padding: 30px!important;
	background: var(--color-surface-muted-blue);
	border-radius: var(--radius-md);
	cursor: pointer;
}

/* Responsive stroked border that follows the card size via
   preserveAspectRatio="none" + getTotalLength() (mirrors the
   rock-salt button pattern). The SVG is injected by JS into
   both .curriculum-card and .citizens-card .card-hover; the
   path is hidden by default and "draws on" on hover. Per-card
   differences (z-index, stroke color) are set as overrides
   below. */
.curriculum-card > .citizens-card-border,
.citizens-card .card-hover > .citizens-card-border{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	margin: 0;
	transition: opacity 200ms ease;
	transition-delay: 0ms;
}
.curriculum-card:hover > .citizens-card-border,
.citizens-card:hover .card-hover > .citizens-card-border{ opacity: 1; transition-delay: .1s; }

.curriculum-card > .citizens-card-border__path,
.citizens-card .card-hover > .citizens-card-border__path{
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray:  var(--border-len, 1500);
	stroke-dashoffset: var(--border-len, 1500);
	transition: stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.curriculum-card:hover > .citizens-card-border__path,
.citizens-card:hover .card-hover > .citizens-card-border__path{ stroke-dashoffset: 0; }

/* Card-specific overrides: z-index (where the border sits in the
   card's stacking order) and stroke color. Everything else is
   inherited from the shared block above. */
.curriculum-card > .citizens-card-border{ z-index: 6; }
.citizens-card .card-hover > .citizens-card-border{ z-index: 6; }

.curriculum-card .citizens-card-border__path{ fill: var(--color-blue-500); }
.citizens-card .card-hover .citizens-card-border__path{ fill: var(--color-purple-500); }

.curriculum-card .wp-block-cover__image-background{
	opacity: 0;
    transform: scale(1);
    transform-origin: center center;
    transition: opacity 500ms ease, transform 700ms cubic-bezier(0, 0.094, 0.205, 0.983), clip-path 500ms cubic-bezier(0, 0.094, 0.205, 0.983);
    will-change: transform, clip-path, opacity;
    border-radius: 20px;
}

.curriculum-card .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.curriculum-card .wp-block-cover__inner-container .icon-img{ margin-top: 0!important; margin-bottom: 10px!important; }

/*  Hover */
.curriculum-card *{ transition: all .5s ease;}
.curriculum-card:hover { overflow: hidden!important; border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md);}
.curriculum-card:hover h3{ color: var(--color-text-inverse)!important;}
.curriculum-card:hover .icon-img{ opacity: 0; }
.curriculum-card:hover .wp-block-cover__image-background {
	transform: scale(1.04);
	opacity: 1;
}
.curriculum-card:hover .wp-block-cover__image-background{ opacity: 1; }

.curriculum-card .card-arrow{  right: -20px; top: -17px; margin: 0; }
.curriculum-card .card-arrow img{ width: 32px;}



/* Snap Slider arrow buttons
-------------------------------------------------------------------------*/
/* The .c-snap-slider-wrap is auto-injected by the JS init to
   anchor the absolutely-positioned arrows to the track. It
   also breaks the track out of the constrained parent
   (is-layout-constrained caps the section at ~1280px) so the
   cards can go edge-to-edge. The -100vw/2 + 100%/2 pattern
   (equivalent to 50% - 50vw) pulls the wrapper to full
   viewport width on both sides. max-width: 100vw prevents
   the wrapper from exceeding the viewport on ultra-wide
   screens. */
/* .c-snap-slider-wrap{
	position: relative;
	margin-left: calc(-100vw / 2 + 100% / 2) !important;
	margin-right: calc(-100vw / 2 + 100% / 2) !important;
	max-width: 100vw;
	padding: 0 30px;
} */
.c-snap-slider__arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border: none;
	background: var(--color-white);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-primary);
	/* Temporarily hidden — opacity 0 + pointer-events none keeps
	   the buttons in the DOM and the JS edge-detection logic
	   working, so when they're re-enabled later the only change
	   needed is removing these two lines.
	   !important is needed because the .is-disabled state below
	   sets opacity:0.35, which would otherwise override this and
	   make the disabled arrows faintly visible. */
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
}
.c-snap-slider__arrow:hover{ background: var(--color-orange-100); }
.c-snap-slider__arrow:focus-visible{
	outline: 2px solid var(--color-action-primary);
	outline-offset: 2px;
}
.c-snap-slider__arrow--prev{ left: 8px; }
.c-snap-slider__arrow--next{ right: 8px; }
.c-snap-slider__arrow.is-disabled{
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}
.c-snap-slider__arrow::before{
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}
.c-snap-slider__arrow--prev::before{ transform: rotate(-135deg); margin-left: 3px; }
.c-snap-slider__arrow--next::before{ transform: rotate(45deg);   margin-right: 3px; }
/* Hide arrows on mobile where native touch scroll is enough
   and screen real estate is tight. */


@media (max-width: 767px) {

	/* Curriculum Cards Slider + Pillars Slider on mobile.
	   The .c-snap-slider CSS handles the free-scrolling carousel
	   on small viewports natively (overflow-x: auto + snap). We
	   just shrink the card width so 1.2 cards peek at a time
	   (a common "there's more here" affordance). No horizontal
	   margin/padding — same edge-to-edge behavior as desktop. */
	.c-snap-slider{
		margin: 0 !important;
		padding: 10px 0 !important;
		gap: var(--space-lg);
	}
	.c-snap-slider > .curriculum-card,
	.c-snap-slider > .lesson-card{
		flex-basis: 85vw;
		width: 85vw;
	}
	.c-snap-slider .citizens-card-slider,
	body .curriculum-cards-slider{
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		width: max-content !important;
		max-width: none !important;
	}
	.curriculum-card{
		flex: 0 0 85vw !important;
		width: 85vw !important;
		max-width: 85vw !important;
	}
	.lesson-card{
		flex: 0 0 85vw !important;
		width: 85vw !important;
		max-width: 85vw !important;
	}
}

/*News Cards 
-------------------------------------------------------------------------*/

.news-card p{  font-weight: 500; }
.news-card h4 + .wp-block-group{ margin-top: 5px; }


/* Cards Hover Effect
-------------------------------------------------------------------------*/
.citizens-card .ftrd-img{
	margin: 0px!important;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	transform: scale(1);
	transition: transform 500ms cubic-bezier(0, 0.094, 0.205, 0.983);
	will-change: transform;
}
.citizens-card .ftrd-img img{ height: 250px!important; object-fit: cover; transition: transform 500ms cubic-bezier(0, 0.094, 0.205, 0.983), filter 500ms ease; will-change: transform, filter; }
.card-arrow{
	position: absolute;
    right: 0px;
    top: -5px;
    opacity: 0;
    transform: translate3d(10px, -10px, 0);
    transition: opacity 300ms ease, transform 300ms cubic-bezier(0, 0.094, 0.205, 0.983);
    z-index: 5;
}

/* .citizens-card .card-arrow{ transition-delay: 100ms; } */
.citizens-card .card-link{
	position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    padding: 0 22px 0 18px;
    font-size: var(--text-sm) !important;
    font-family: var(--font-display);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-inverse);
    background: transparent;
    transform: translate3d(0, 14px, 0);
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms cubic-bezier(0, 0.094, 0.205, 0.983);
    z-index: 4;
    white-space: nowrap;
    top: 0;
    justify-content: center;
}

.citizens-card{ position: relative; isolation: isolate; }
/* .card-hover is the citizens-card's image wrapper. The border
   rules for it live in the shared block above (curriculum-card +
   citizens-card .card-hover), alongside the curriculum-card rules. */
.citizens-card .card-hover{
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.citizens-card:hover::after{ opacity: 1; transition-delay: .2s; } */
.citizens-card .card-hover{
	position: relative;
	border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md);
	overflow: hidden;
	transition: box-shadow 300ms ease;
}
.citizens-card .card-hover .wp-block-group{ margin: 0!important; }
.citizens-card .card-hover > .citizens-card-shape,
.curriculum-card .citizens-card-shape{
	position: absolute;
    right: -2px;
    top: -4px;
    width: calc(80px + 10px);
    height: calc(80px + 15px);
    color: var(--color-white);
    /* opacity: 0; */
    transform: scale(0.80) translate(65px, -65px);
    transform-origin: center center;
    transition: transform 300ms cubic-bezier(0, 0.094, 0.205, 0.983);
    transition-delay: .1s;
    z-index: 0;
    pointer-events: none;
    z-index: 5;
}
.citizens-card .card-hover > .citizens-card-shape{
	right: 0px;
    top: -2px;
    width: calc(75px + 5px);
    height: calc(75px + 5px);
}
.citizens-card .card-hover::after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: var(--color-ink-900);
	opacity: 0;
	transition: opacity 300ms ease;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	height: 300px;
}

.citizens-card:hover .ftrd-img{ transform: scale(1.04); }
.citizens-card:hover .ftrd-img img{ filter: brightness(0.85); }

.citizens-card:hover .card-hover > .citizens-card-shape,
.curriculum-card:hover > .citizens-card-shape{
	/* opacity: 1; */
	transform: scale(1) translate(3px, 0px)
}

.citizens-card:hover .card-hover > .citizens-card-shape{ transition-delay: 0s; }
.citizens-card:hover .card-hover::after{ opacity: 0.4; }
.citizens-card:hover .card-link{ opacity: 1; transform: translate3d(0, 0, 0); }
.citizens-card:hover .card-arrow, .curriculum-card:hover .card-arrow{
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition-delay: 0ms;
}

.citizens-card:hover .card-arrow img, .curriculum-card:hover .card-arrow img{ transform: scale(1);}

@media (prefers-reduced-motion: reduce) {
	.citizens-card:hover .ftrd-img,
	.citizens-card:hover .ftrd-img img,
	.citizens-card:hover .card-hover > .citizens-card-shape,
	.citizens-card:hover .card-hover::after,
	.citizens-card:hover .card-link,
	.citizens-card:hover .card-arrow,
	.curriculum-card:hover > .citizens-card-shape { transform: none; opacity: 1; filter: none; }
}
.citizens-card-slider{ grid-auto-flow: column;}
.overflow-group + .wp-block-group{ position: relative; z-index: 2; }


/* Panel list box components
-------------------------------------------------------------------------*/
.panel-list-box { margin-top: -100px!important;}
.panel-list-box li{ font-size: var(--text-xs); }
.panel-list-box ol{ margin-top: 0px; }
.panel-list-box li strong{ font-weight: 500; font-size: var(--text-sm); }


/* Media Text components
-------------------------------------------------------------------------*/
.media-text-panel .wp-block-buttons{ padding-top: 15px; }
.media-text-panel video, .media-text-panel img{ width: 100%; height: 540px; object-fit: cover; border-radius: var(--radius-md); }
.media-text-panel .h-auto img{  height:auto; object-fit: contain; }


/* CTA Panel components
-------------------------------------------------------------------------*/
.cta-panel.offset-top{ margin-top: -70px!important; position: relative;z-index: 2;}
.row-faq .wp-block-buttons{ margin-top: var(--space-sm); }


/* Lesson Cards components
-------------------------------------------------------------------------*/
.lesson-grid{ grid-auto-flow: column;}
.lesson-grid .slick-track{ display: flex; gap: var(--space-2xl);  }
.lesson-grid .slick-track:before,
.lesson-grid .slick-track:after{ display: none; }
.slick-slide{ outline: none; }
.lesson-grid .slick-list{ overflow: visible!important; }

.lesson-card h3{ border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 12px 5px; font-size: var(--text-xl);}
.lesson-card .ftrd-img{ margin-top: 0!important; height: 268px;}
.lesson-card .ftrd-img img{ height:270px!important; width: 100%; object-fit: cover; }


/* Quote Component
-------------------------------------------------------------------------*/
.wp-block-quote{ 
	font-size: var(--text-xl);
	border-left-width: 4px;
	position: relative;
	padding: 10px 20px 20px 60px;
}
.wp-block-quote::before{
	content:'“';
	position: absolute;
	top: -17px;
	left: 20px;
	font-weight: 700;
	font-size: 56px;
}
.wp-block-quote p{ color: var(--color-text-primary); }
.wp-block-quote.quote-orange{
	color: var(--color-text-brand-orange);
}

.wp-block-quote.quote-purple{
	color: var(--color-text-brand-purple);
}


.box-growing figure{ position: absolute; bottom: 20px; right: 20px;}


/* Curriculum Tabs
-------------------------------------------------------------------------*/
.curriculum-tab-container{
	max-width: 1320px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	/* Reserve space for the tab row (150px) + active panel
	   (360px) so absolutely-positioned panels have a stage to
	   fill and the layout below doesn't shift during the
	   cross-fade. Matches the existing fixed sizes. */
	min-height: calc(150px + 360px);
	background: #e1d1e1;
    border-radius: var(--radius-md);
}

.curriculum-tab-container .curriculum-tab-row{
	align-items: flex-start;
	gap: 0 !important;
	padding: 0 45px;
	border-radius: 20px 20px 0 0;
	background: var(--color-purple-100);
	overflow: hidden;
}

.curriculum-tab-container .content-tab{
	flex: 1 1 0;
	min-width: 0;
	/* display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 18px; */
	padding: 40px 14px 40px !important;
	background: transparent !important;
	border-radius: 0 0 20px 20px;
	cursor: pointer;
	/* transition: .5s ease; */
	position: relative;
	height: 150px;
	text-align: center;
}

.curriculum-tab-container .content-tab::before,
.curriculum-tab-container .content-tab::after{
	content: "";
	opacity: 0;
	transition: opacity .5s ease;
}

.curriculum-tab-container .content-tab.active::before{
	position: absolute;
    content: "";
    top: 0;
    left: -1.188rem;
    background: transparent;
    width: 20px;
    height: 20px;
    border-bottom-right-radius: 2rem;
    box-shadow: 3px 3px 0px 3px var(--color-white);
    transform: rotate(-90deg);
    opacity: 1;
}

.curriculum-tab-container .content-tab.active::after{
	position: absolute;
    content: "";
    top: 0px;
    right: -20px;
    background: transparent;
    width: 20px;
    height: 21px;
    border-bottom-right-radius: 1rem;
    box-shadow: 3px 3px 0px 3px var(--color-white);
    transform: rotate(-180deg);
    opacity: 1;
}

.curriculum-tab-container .content-tab.active{
	position: relative;
	z-index: 2;
	background: var(--color-white) !important;
}

.curriculum-tab-container .content-tab p{
	margin: 0 !important;
	font-size: var(--text-md) !important;
	font-weight: 600 !important;
	text-align: center;
	white-space: nowrap;
	color: var(--color-ink-900) !important;
}

.curriculum-tab-container .content-tab.active p{
	color: var(--color-purple-500) !important;
}

.curriculum-tab-container .content-tab.active .icon-initial,
.curriculum-tab-container .content-tab .icon-active{
	opacity: 0;
	transition: .5s;
}

.curriculum-tab-container .content-tab .icon-initial,
.curriculum-tab-container .content-tab.active .icon-active{
	opacity: 1;
	transition: .5s;
}

.curriculum-tab-container .content-tab .icon-active{
	position: absolute;
    bottom: 30px;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
}
.curriculum-tab-container .content-tab img{
	display: block;
	width: 35px;
	height: 35px;
	object-fit: contain;
	margin: auto;
}

.curriculum-tab-container .content-tab .icon-initial img{ width: 24px;}
/* Smooth cross-fade + subtle slide-up between tabs.
   All panels stay in the DOM (good for SEO/a11y) and are
   stacked via position: absolute, with the container's
   min-height (set above) holding the layout open. The
   default state is opacity:0 + visibility:hidden + 8px down
   + pointer-events:none so the panel is fully inert; the
   .active state fades it in and restores interactivity.

   The asymmetric visibility delay (350ms on the way out,
   0s on the way in) lets the fade-out finish before the
   element becomes visibility:hidden, which would otherwise
   cut the animation short. */
.curriculum-tab-container .tab-content{
	position: absolute;
	inset: 150px 0 0 0;       /* leave room for the 150px tab row */
	margin-top: 0;
	padding: 40px 50px 120px !important;
	background: var(--color-purple-100) !important;
	border-radius: 0 0 20px 20px;
	height: 360px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0px);
	pointer-events: none;
	transition:
		opacity .5s cubic-bezier(0, 0.094, 0.205, 0.983),
		transform .5s cubic-bezier(0, 0.094, 0.205, 0.983),
		visibility 0s linear .5s;
}

.curriculum-tab-container .tab-content.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition:
		opacity .5s cubic-bezier(0, 0.094, 0.205, 0.983),
		transform .5s cubic-bezier(0, 0.094, 0.205, 0.983),
		visibility 0s linear 0s;
}
/* .curriculum-tab-container .tab-content h2,
.curriculum-tab-container .tab-content .wp-block-columns{
	transform: translateY(8px);
	transition: transform .5s cubic-bezier(0, 0.094, 0.205, 0.983);
}
.curriculum-tab-container .tab-content.active h2,
.curriculum-tab-container .tab-content.active .wp-block-columns{
	transform: translateY(0);
} */
.curriculum-tab-container .tab-content h2{ margin: 10px 0 35px !important; }
.curriculum-tab-container .tab-content h2 span{
	color: var(--color-purple-500) !important;
	font-weight: 600;
}
.curriculum-tab-container .tab-content > .wp-block-columns{ gap: 30px; margin-bottom: 0; }
.curriculum-tab-container .tab-content > .wp-block-columns > .wp-block-column{ padding-right: 18px;}
.curriculum-tab-container .tab-content > .wp-block-columns p:first-child{
	margin: 0 0 15px !important;
	font-size: var(--text-md);
	font-weight: 600 !important;
	line-height: 1.3;
	color: var(--color-ink-900) !important;
}

.curriculum-tab-container .tab-content > .wp-block-columns p + p{
	margin-top: 0 !important;
	font-size: var(--text-sm);
	color: var(--color-ink-900) !important;
}


/* Subpage Hero Component
-------------------------------------------------------------------------*/
.subpage-hero-group{
	position: relative;
	margin: 0 -30px !important;
	height: 420px;
	display: flex;
    align-items: flex-end;
	padding-left: 0;
	padding-right: 0;
}
.subpage-hero-group .wp-block-columns{
	/* margin-top: 318px; */
	align-items: center!important;
	height: 110px;
}
.subpage-hero-bg + .wp-block-group{
	margin-bottom: -10px;
	width: 100%;
}
.subpage-hero-bg{
	position: absolute;
	width: 100%;
}
.subpage-hero-bg img{
	clip-path: var(--subpage-hero-shape);
	height: 420px;
	width: 100%;
    object-fit: cover;
	object-position: 100% 45%;
}


/* Stats Grid Component
-------------------------------------------------------------------------*/
.stats-grid-col{ height: 380px; }


/* Values Card Component
-------------------------------------------------------------------------*/
.sticky-scroll .stick-col{ position: sticky; height: 100%;top: 120px;}
.sticky-scroll .card-col{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.sticky-scroll .values-card{
	position: sticky;
	top: 60px;
	margin-top: 0px;
	/* min-height: 80vh; */
	z-index: 1;
	overflow: hidden;
	box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.04)!important;
	border: 1px solid var(--color-border-subtle);
	transform: translate3d(0, 16px, 0) scale(0.985);
	opacity: 0;
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 700ms ease;
}
.sticky-scroll .values-card:first-of-type{ margin-top: 0; }
.values-card .wp-block-group{ margin: 0!important; position: relative; }
.values-card .wp-block-group h3{ font-size: var(--text-xl);  }
.values-card .wp-block-group::before{
	content: '';
    height: 50%;
    width: 100%;
    background: linear-gradient(180deg, rgba(7, 7, 7, 0.00) 0%, #000 94.78%);
    position: absolute;
    bottom: 0;
    z-index: -1;
    left: 0;
}
.values-card p{ margin-top: 5px!important; max-width: 380px; }
.values-card::before{
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-ink-900);
	border-radius: inherit;
	opacity: 1;
	pointer-events: none;
	transition: opacity 800ms ease;
	z-index: 2;
}
.values-card.is-visible{
	transform: translate3d(0, 0, 0) scale(1);
	opacity: 1;
	z-index: 2;
}
.values-card.is-visible::before{
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.sticky-scroll .values-card{ position: static; margin-top: 20px; min-height: 0; transform: none; opacity: 1; transition: none; }
	.values-card::before{ display: none; }
}

/* Future Framework Skill Cards
------------------------------------------------------------------------- */
.skill-card { cursor: pointer; padding: 10px 20px 20px 20px!important; overflow: hidden; isolation: isolate;}
.skill-card .wp-block-video{ 
	margin-bottom: -45px;
}

.skill-card h3, .skill-card p{ position: relative; z-index: 2; margin: 0!important; }


/* Pillars Card Component (Snap Slider)
-------------------------------------------------------------------------*/
/* Make the parent section (any .wp-block-group that directly
   contains the slider) a snap container. :has() is supported in
   Chrome 105+, Firefox 121+, Safari 15.4+ — fine for our targets.
   The .c-snap-slider class on the track itself handles the
   overflow + scroll-snap behavior; this rule just clips the
   parent so the bleed-out cards don't escape the section. */
.wp-block-group:has(> .c-snap-slider){
	overflow: hidden !important;
	position: relative;
}

.lesson-card{
	flex: 0 0 425px;
	width: 425px;
	max-width: 80vw;
}


/* Vertical Toggles
-------------------------------------------------------------------------*/
.vertical-toggle { border: 2px solid var(--color-border-accent-orange); overflow: hidden; border-radius: var(--radius-md); }
.vertical-toggle .level-card-col{ 
	width: 20%;
    flex-basis: auto !important;
    transition: all .5s ease !important;
	border-right: 2px solid var(--color-border-accent-orange);
	position: relative;
	cursor: pointer;
}
.vertical-toggle .level-card{ padding: 40px 24px!important;height: 400px; }
.vertical-toggle .level-card-col:last-child{ border-right: none; }
.vertical-toggle .level-card::before{
	content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 27.81%, rgba(0, 0, 0, 0.61) 67.56%);
    z-index: 1;
    height: 65%;
    bottom: 0;
    top: auto;
}
.level-card .gb-container-image{ opacity: 1!important;}
.bg-position-x-30 .gb-container-image { object-position: 30% 50%; }
.level-card .gb-container-inside{ height: 100%; }
.level-card .wp-block-cover__inner-container, .level-card .gb-container-content{ 
	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
	align-items: center;
	z-index: 2;
}
.vertical-toggle .level-card  h2{ 
	transform: rotate(90deg) translate(-80px, 0px);
    text-align: right;
    width: 250px;
	transition: all .3s ease !important;
}
.vertical-toggle .level-card p{ margin-top: 5px; font-weight: 500; font-size: var(--text-md);}
.vertical-toggle .level-card-col:hover{  transition: all .5s ease !important; width: 45%; }
.vertical-toggle .level-card .hover-content{ 
	opacity: 0; 
	position: absolute; 
	bottom: 0px; 
	width: 410px; 
	transition: all .8s ease; 
	transform: translateY(10%);
}

.vertical-toggle .level-card-col .icon-img { transform: translate(0px, 0px); }
.vertical-toggle .level-card-col:hover .icon-img{ transform: translate(0px, -10px); }
.vertical-toggle .level-card-col:hover h2{ transform: rotate(90deg) translate(-85px, 0px); }

.vertical-toggle .level-card-col .icon-img, .vertical-toggle .level-card-col h2{ transition: all .5s ease; }
.vertical-toggle .level-card-col:hover .icon-img, .vertical-toggle .level-card-col:hover h2{ opacity: 0; }
.vertical-toggle .level-card-col:hover .hover-content,
.vertical-toggle .level-card-col:hover .hover-content *{ opacity: 1!important; transform: translate(0px, 0px); transition-delay: .3s;}
.vertical-toggle .level-card-col .hover-content h2{ transform: rotate(0deg) translate(0px, 0px); text-align: left;}


/* Future Famework card
-------------------------------------------------------------------------*/
.ff-card p, .ff-card figure img{ transition: color .3s ease, filter .5s ease;}
.ff-card:hover p{ color: var(--color-ink-900)!important;}
.ff-card:hover figure img{
    filter: invert(29%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(40%) contrast(92%);
    transition-delay: 0s, .3s;
}


/* Tuition Fees
---------------------------------------------------------------------------- */
.gap-80{ gap:80px; }
.gap-50{ gap:50px; }
.credit_box{border-radius:var(--radius-md); padding:45px!important; margin-top:40px;  }
.credit_box p{
	margin: 0px;
	line-height: 2;
	font-family: AmericanTypewriter;
	font-size: var(--text-md);
}

.two_col_layout h3{ padding-top: 10px; }

.two_col_layout p a{
	color: var(--color-blue-500);
	font-weight: 600;
}

.two_col_layout p a:hover{ text-decoration: underline!important; }


/* Community Card Component
---------------------------------------------------------------------------- */
.community-col-wrap{ padding-top: 50px;}
.community-card{
	border-radius: var(--radius-md);
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
  background-color: var(--color-white);
  padding: 10px!important;
  overflow: hidden;
  isolation: isolate;
  min-height: 410px;
  /* height: 100%; */
}

.community-card figure{ overflow:hidden;isolation: isolate; border-radius:var(--radius-md); margin-bottom: 0; }
.community-card figure img{ 
	border-radius: var(--radius-md);  
	min-height: 285px;
	height: 285px;
	width: 100%;
	object-fit: cover;
	transition: .5s;
	transform: scale(1);
}

.community-card:hover figure img{
	transition: .5s;
	transform: scale(1.1);
}

.community-card h4{ margin: 0px 0 15px 0; font-size:20px!important; }
.community-card p{ margin-bottom:0px; font-size: 16px;}
.community-card .desc{ padding: 15px 30px; }

.community-card .safe-svg-cover{ 
	position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    margin: auto;
}
.community-card .safe-svg-cover svg path[data-name="Path 57"] {
    fill: rgb(255 255 255 / 50%)!important;
}

/* About - Programme
---------------------------------------------------------------------------- */
.about-programme .gb-container-image-wrap::before{
	content: '';
    position: absolute;
    bottom: 110px;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(7, 7, 7, 0.00) 0%, #ffffff 94.78%);
    z-index: 1;
}
.about-programme .gb-container-image-wrap img{
	width: auto;
	position: absolute;
}
.about-programme .gb-container-image-wrap img {
    height: 990px;
    right: 0;
    margin-top: 100px;
}
.about-programme .col2{ gap:15px;padding-top: 20px; }
.about-programme .col2 .wp-block-column:nth-child(2){ margin-top:190px; }
.about-programme .col2 .wp-block-column:nth-child(3){ margin-top: 380px; }
.about-programme .title-arrow{
	margin-top: 145px;
	margin-bottom: -165px;
	margin-left: 15vw;
}

/* Legal Container
---------------------------------------------------------------------------- */
.legal_container h1{ margin-bottom:40px; }
.legal_container h2{ margin-bottom: 15px; padding-top: 10px; font-size: 22px; }
.legal_container h3{ font-size: 18px; font-weight:500;}

/* Policies
---------------------------------------------------------------------------- */
.privacy-li li {
	line-height: 1.5;
	margin-bottom: 5px;
}

.policy_content .group-content {
	display: none;
}
.policy_content .group-content.active {
	display: block;
}

.policy_content .wp-block-spacer{ height:0!important;  }
.policy_content h2{ margin-bottom:10px; }
.policy_content h3{  
	font-weight: normal;
	margin-bottom: 15px;
	font-size: 22px;
}
.policy_content h4{  
	margin-bottom: 10px;
}
.policy_content ul,
.policy_content ol{
	padding-left: 17px;
}
.policy_content li{
	margin-bottom: 10px;
}

.wp-block-table td, 
.wp-block-table th{
	word-break: initial!important;
	font-size: 16px;
	line-height: 1.5;
}

.calendar_sidenav{  
	list-style-type: none;
	position: sticky;
	top: 200px;
}
.calendar_sidenav p{  
	display: block;
	border-radius: 25px;
	border: solid 1px var(--color-purple-500);
	background-color: var(--color-purple-100);
	font-weight: 500;
	margin-bottom: 20px;
	max-width: 390px;
	padding: 0!important;
}

.calendar_sidenav p img { transform: scale(1); transition: .3s;}
.calendar_sidenav p:hover img{ transform: scale(1.1);}

.calendar_sidenav p a{
	display: flex;
	padding: 15px 20px 15px 30px;
	position: relative;
	align-items: center;
	justify-content: space-between;
	text-decoration: none!important;
}

.calendar_sidenav p[style="background-color:#ccf1ff"]{
	border: solid 1px var(--color-blue-500);
}

.calendar_sidenav p[style="background-color:#ffebcb"]{
	border: solid 1px var(--color-orange-500);
}


/* Responsive
-------------------------------------------------------------------------*/
@media (min-width: 1640px) {
	.hero-group-container video{ clip-path: polygon( 44.947% 97.385%,44.944% 71.026%,44.944% 71.026%,44.923% 70.602%,44.864% 70.2%,44.77% 69.825%,44.643% 69.483%,44.487% 69.178%,44.305% 68.917%,44.101% 68.704%,43.877% 68.546%,43.637% 68.447%,43.384% 68.413%,1.563% 68.41%,1.563% 68.41%,1.31% 68.376%,1.07% 68.277%,0.846% 68.118%,0.642% 67.906%,0.46% 67.644%,0.304% 67.34%,0.178% 66.998%,0.083% 66.623%,0.024% 66.22%,0.004% 65.797%,0% 13.044%,0% 13.044%,0.019% 12.645%,0.076% 12.278%,0.165% 11.943%,0.284% 11.644%,0.43% 11.382%,0.599% 11.159%,0.788% 10.977%,0.993% 10.839%,1.212% 10.747%,1.44% 10.702%,30.689% 10.702%,30.689% 10.702%,30.886% 10.62%,31.072% 10.499%,31.244% 10.342%,31.402% 10.152%,31.541% 9.931%,31.661% 9.682%,31.758% 9.408%,31.831% 9.111%,31.876% 8.794%,31.892% 8.459%,31.902% 2.443%,31.902% 2.443%,31.918% 2.077%,31.966% 1.719%,32.044% 1.375%,32.149% 1.054%,32.281% 0.762%,32.437% 0.507%,32.617% 0.296%,32.817% 0.137%,33.038% 0.035%,33.277% 0%,98.792% 0%,98.792% 0%,98.989% 0.027%,99.176% 0.104%,99.35% 0.229%,99.508% 0.396%,99.648% 0.601%,99.768% 0.84%,99.866% 1.11%,99.938% 1.406%,99.984% 1.723%,99.999% 2.058%,99.999% 97.826%,99.999% 97.826%,99.984% 98.19%,99.938% 98.53%,99.864% 98.844%,99.763% 99.127%,99.638% 99.376%,99.491% 99.588%,99.324% 99.759%,99.137% 99.886%,98.935% 99.965%,98.717% 99.993%,46.51% 100%,46.51% 100%,46.257% 99.967%,46.016% 99.868%,45.792% 99.71%,45.588% 99.497%,45.406% 99.236%,45.25% 98.932%,45.122% 98.589%,45.028% 98.214%,44.968% 97.811%,44.948% 97.387%,44.947% 97.385% );}

	.subpage-hero-bg img{
	clip-path: polygon( 40.658% 94.614%,40.655% 79.445%,40.655% 79.445%,40.634% 78.609%,40.575% 77.815%,40.481% 77.075%,40.354% 76.399%,40.198% 75.798%,40.017% 75.282%,39.812% 74.863%,39.589% 74.55%,39.349% 74.355%,39.096% 74.287%,1.563% 74.281%,1.563% 74.281%,1.31% 74.214%,1.07% 74.018%,0.846% 73.706%,0.642% 73.286%,0.46% 72.77%,0.304% 72.169%,0.178% 71.493%,0.083% 70.753%,0.024% 69.96%,0.004% 69.123%,0% 25.748%,0% 25.748%,0.019% 24.962%,0.076% 24.236%,0.165% 23.576%,0.284% 22.985%,0.43% 22.468%,0.599% 22.028%,0.788% 21.669%,0.993% 21.397%,1.212% 21.214%,1.44% 21.126%,29.974% 21.126%,29.974% 21.126%,30.171% 20.964%,30.357% 20.725%,30.529% 20.415%,30.687% 20.04%,30.826% 19.604%,30.946% 19.113%,31.043% 18.571%,31.116% 17.985%,31.161% 17.359%,31.177% 16.698%,31.187% 4.822%,31.187% 4.822%,31.203% 4.1%,31.251% 3.393%,31.329% 2.715%,31.434% 2.081%,31.566% 1.505%,31.722% 1.001%,31.902% 0.585%,32.103% 0.269%,32.323% 0.07%,32.562% 0%,98.792% 0%,98.792% 0%,98.989% 0.053%,99.176% 0.206%,99.35% 0.451%,99.508% 0.781%,99.648% 1.186%,99.768% 1.659%,99.866% 2.191%,99.938% 2.775%,99.984% 3.401%,99.999% 4.063%,99.999% 95.483%,99.999% 95.483%,99.984% 96.202%,99.938% 96.874%,99.864% 97.492%,99.763% 98.051%,99.638% 98.544%,99.491% 98.962%,99.324% 99.3%,99.137% 99.55%,98.935% 99.706%,98.717% 99.761%,42.221% 99.775%,42.221% 99.775%,41.968% 99.709%,41.728% 99.515%,41.504% 99.203%,41.299% 98.783%,41.117% 98.268%,40.961% 97.666%,40.834% 96.99%,40.739% 96.249%,40.68% 95.454%,40.659% 94.617%,40.658% 94.614% ); }

}


@media (max-width: 1480px) {
	/* Vertical toggles */
	.vertical-toggle .level-card .hover-content{  width: 340px; left: 10px;}
}

@media (max-width: 1280px) {
	/* Curriculum Cards Slider
	------------------------------------*/
	.curriculum-card{ flex-basis: 360px; width: 360px; }
	/* Pillars Card Slider */
	.lesson-card{ flex-basis: 360px; width: 360px; }
	.row-faq .wp-block-buttons a{ font-size: 16px; }

	.curriculum-card .citizens-card-shape{ width: calc(70px + 14px);height: calc(80px + 14px);}

	/* Vertical toggles */
	.vertical-toggle .level-card .hover-content{  width: 300px; }

	
}

@media (max-width: 1180px) { 
	
	/* Common Classes
	-----------------------------------*/
	.md-block{ padding-right: 0!important; }
	.md-pt-30{ padding-top: 30px!important; }
	.md-mb-30{ margin-bottom: 30px!important; }
	
	/* Home Hero
	-----------------------------------*/
	.hero-group-container{ min-height: auto!important;  }
	.hero-group-container video{ height: 700px!important; clip-path: polygon( 47.092% 97.385%,47.088% 71.026%,47.088% 71.026%,47.068% 70.602%,47.009% 70.2%,46.914% 69.825%,46.787% 69.483%,46.631% 69.178%,46.45% 68.917%,46.245% 68.704%,46.022% 68.546%,45.782% 68.447%,45.529% 68.413%,1.563% 68.41%,1.563% 68.41%,1.31% 68.376%,1.07% 68.277%,0.846% 68.118%,0.642% 67.906%,0.46% 67.644%,0.304% 67.34%,0.178% 66.998%,0.083% 66.623%,0.024% 66.22%,0.004% 65.797%,0% 13.044%,0% 13.044%,0.019% 12.645%,0.076% 12.278%,0.165% 11.943%,0.284% 11.644%,0.43% 11.382%,0.599% 11.159%,0.788% 10.977%,0.993% 10.839%,1.212% 10.747%,1.44% 10.702%,29.974% 10.702%,29.974% 10.702%,30.171% 10.62%,30.357% 10.499%,30.529% 10.342%,30.687% 10.152%,30.826% 9.931%,30.946% 9.682%,31.043% 9.408%,31.116% 9.111%,31.161% 8.794%,31.177% 8.459%,31.187% 2.443%,31.187% 2.443%,31.203% 2.077%,31.251% 1.719%,31.329% 1.375%,31.434% 1.054%,31.566% 0.762%,31.722% 0.507%,31.902% 0.296%,32.103% 0.137%,32.323% 0.035%,32.562% 0%,98.792% 0%,98.792% 0%,98.989% 0.027%,99.176% 0.104%,99.35% 0.229%,99.508% 0.396%,99.648% 0.601%,99.768% 0.84%,99.866% 1.11%,99.938% 1.406%,99.984% 1.723%,99.999% 2.058%,99.999% 97.826%,99.999% 97.826%,99.984% 98.19%,99.938% 98.53%,99.864% 98.844%,99.763% 99.127%,99.638% 99.376%,99.491% 99.588%,99.324% 99.759%,99.137% 99.886%,98.935% 99.965%,98.717% 99.993%,48.654% 100%,48.654% 100%,48.401% 99.967%,48.161% 99.868%,47.937% 99.71%,47.732% 99.497%,47.55% 99.236%,47.394% 98.932%,47.267% 98.589%,47.172% 98.214%,47.113% 97.811%,47.092% 97.387%,47.092% 97.385% );

}
	.hero-group-container h1{ max-width: 420px; }
	.hero-group-container .wp-block-cover__inner-container .wp-block-group{ padding-top: 500px!important;  }

	/* Vertical toggles
	-----------------------------------*/
	.vertical-toggle .level-card .hover-content{ width: 240px; }
	

	/* Curriculum intro
	-----------------------------------*/
	.curriculum-intro{ gap: 20px; }
	.media-text-panel{ gap: 30px; }


	/* FAQ 
	-----------------------------------*/
	.row-faq .wp-block-buttons{ flex-wrap: nowrap; }
	.row-faq .wp-block-buttons > .wp-block-button a{ font-size: 16px;  }


	/* Citizens Cards 
	-----------------------------------*/
	.stages-group-container, .sec-community-highlights{ overflow: hidden;}
	.overflow-group{ overflow-x: auto; padding: 20px 10%; margin: 0 -10%!important;}
	.overflow-group .citizens-card-slider{ width: 150%;}


	/* Curriculum page 
	-----------------------------------*/
	.md-block{ display: block!important; padding-right: 10%; }
	.row-faq .wp-block-column:nth-child(2){ padding-top: 30px; }
	.row-faq .wp-block-buttons{ justify-content: space-between; }
	.row-faq .wp-block-buttons .wp-block-button{ width: 100%; }

	
	/* media text panel component
	-----------------------------------*/
	.media-text-panel.img-right .wp-block-column .wp-block-group{ padding-left: 30px!important; }
	
	
	/* Leaning stages component
	-----------------------------------*/
	.stages-group-container::before{ max-width: 100%; border-radius: 0; }

}

@media (max-width: 991px) {
	
	/* common classes
	-----------------------------------*/
	.row-container{ padding-left: 20px!important; padding-right: 20px!important; }
	.md-block{ padding-right: 0; }
	.my-100{ margin-top: 50px!important; margin-bottom: 50px!important; }
	.mt-80{ margin-top: 40px!important;}
	.pt-100{ padding-top: 50px; }
	.md-pt-0{ padding-top: 0!important; }
	.md-pb-30{ padding-bottom: 30px; }
	.md-pb-20{ padding-bottom: 20px; }
	
	.sm-block{ display: block!important; }
	

	/*Curriculum intro
	-----------------------------------*/
	.curriculum-intro{ flex-direction: column; }


	/* media text panel
	-----------------------------------*/
	.media-text-panel{ flex-direction: column; }
	.media-text-panel.img-right{ flex-direction: column-reverse; }
	.media-text-panel.img-right .wp-block-column .wp-block-group{ padding-left: 0px !important; }


	/* Curriculum Cards Slider
	-----------------------------------*/
	.curriculum-card{ flex-basis: 300px; width: 300px; }


	/* Pillars Card Slider */
	.lesson-card{ flex-basis: 300px; width: 300px; }


	/* Home hero
	-----------------------------------*/
	.hero-group-container{ padding: 0!important; display: block; }
	.hero-group-container video{ position: initial!important; height: 700px!important; clip-path: var(--subpage-hero-mobile-shape);}
	.hero-group-container .wp-block-cover__inner-container .wp-block-group{ padding-top: 30px!important; max-width: 65%; margin-left: 0px!important; margin-top: -105px!important; }
	.hero-group-container h1{ max-width: 100%; }
	
	
	/* Subpage hero
	-----------------------------------*/
	.subpage-hero-group{ margin: inherit !important; display: block; height:auto; }
	.subpage-hero-bg + .wp-block-group{ padding-left: 0!important; }
	.subpage-hero-bg{ position: initial; }
	.subpage-hero-bg img{ height: 350px; clip-path: var(--subpage-hero-mobile-shape); }
	
	
	/* Learning stages component
	-----------------------------------*/
	.sec-learning-stages::before{ background-position: 0% 0%;}
	.sec-learning-stages  { padding-left: 0!important; padding-right: 0!important; }
	.stages-group-container, .sec-community-highlights{  padding-left: 20px !important;  padding-right: 20px !important;}
	
	
	/*Curriculum Cards Slider
	-------------------------------------------------------------------------*/
	.curriculum-card{ flex-basis: 260px; width: 260px; }
	/* Pillars Card Slider */
	.lesson-card{ flex-basis: 260px; width: 260px; }

	.sec-community-highlights .bt-view a{ justify-content: flex-end; }

}

@media (max-width: 860px) {
	
	/* Common Classes
	----------------------------------*/
	.md-mx--10{ margin-left: -10px!important; margin-right: -10px!important;}
	.fs-20{ font-size: var(--text-md); }
	.fs-18{ font-size: var(--text-sm); }
	h1, h2{ font-size: var(--text-2xl); }
	h3, h4{ font-size: var(--text-lg);}


	/* Vertical toggles
	-----------------------------------*/
	.vertical-toggle{ display: block!important; }
	.vertical-toggle .level-card-col{ width: 100%!important;  border-right:none;   border-bottom: 2px solid var(--color-border-accent-orange);}
	.vertical-toggle .level-card{transition: all .5s ease !important; height: 200px;}
	.vertical-toggle .level-card h2{ width: 100%;  transform: rotate(0deg) translate(0px, 0px);}
	.vertical-toggle .level-card-col:hover h2{     transform: rotate(0deg) translate(0px, -10px);}
	.vertical-toggle .level-card-col:hover .level-card{ height:350px;}
	.vertical-toggle .level-card .hover-content{ width: 500px; }
	

	/* Lesson Cards component
	-----------------------------------*/
	.lesson-grid{ width: 185%; }
	
	
	/* Cards component
	-----------------------------------*/
	.overflow-group .citizens-card-slider{  width: 220%;}
	

	/* Curriculum Tabs  Component
	-----------------------------------*/
	.curriculum-tab-container .curriculum-tab-row{
		padding: 0 18px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.curriculum-tab-container .curriculum-tab-row::-webkit-scrollbar{ display: none;}
	.curriculum-tab-container .content-tab{ flex: 0 0 100px;}
	.curriculum-tab-container .tab-content{ padding: 32px 24px 50px !important;}
	.curriculum-tab-container .tab-content > .wp-block-columns{ gap: 20px; flex-direction: column; }
	.curriculum-tab-container .tab-content > .wp-block-columns > .wp-block-column{ padding-right: 0; }
	
	
	/* CTA Panel Component
	-----------------------------------*/
	.md-pl-0{ padding-left: 0!important; }
	.cta-panel.offset-top {  margin-top: 0px !important;  max-width: 100%;}
	
	
	/* Media Text Component
	-----------------------------------*/
	.media-text-panel figure{ margin: -10px!important;}
	
	
	/* Curriculum intro Component
	-----------------------------------*/
	.curriculum-intro p + p{ margin-top: 20px!important;}
	
	
	/* Principals message
	-----------------------------------*/
	.sec-principal-message{margin: 0; clip-path: none;flex-direction: column-reverse; padding: 0 !important; }
	.sec-principal-message .wp-block-columns{ gap: 0;   flex-direction: column; padding: 15px !important; }
	.sec-principal-message .wp-block-columns .wp-block-column:nth-child(1){ order: 1; }
	.sec-principal-message .wp-block-columns .wp-block-column:nth-child(2){ order: 3; }
	.sec-principal-message .wp-block-columns .wp-block-column:nth-child(3){ order: 2; }
	/* .sec-principal-message .wp-block-cover__image-background{ position: initial!important;margin-top: -100px;z-index: 1; } */

	.sec-principal-message .sm-border-0{ border-radius: 0!important;  padding: 10px !important;}
	.sec-principal-message .img-wrapper{ display: inline-block; border-radius: 10px 10px 0 0!important; overflow: hidden;}
	.sec-principal-message .img-wrapper figure{ margin-left: 0!important;  }
	.sec-principal-message .stats-wrapper{ border-radius: 0px 10px 0 0!important; margin-top: -250px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 0px!important; }
	.sec-principal-message .stats-wrapper .wp-block-group{ 
		width: 50%;
        height: 140px;
        padding: 20px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
		margin: 0;
	}
	.sec-principal-message .text-wrapper{ margin-top: -65px; margin-bottom: 100px;  border-radius: 0 0 10px 10px!important; padding-bottom: 30px !important; }
	
	
	/* Curriculum pillars
	-----------------------------------*/
	.sec-learning-stages{ padding-bottom: 0!important; }
	.sec-curriculum-pillars{ padding-top: 40px!important; padding-bottom: 0px!important;  }
}

@media (max-width: 680px) {

	h1, h2{font-size: var(--text-lg-plus);}
	
	/* Common classes
	-----------------------------------*/
	.row-container{ padding-left: 15px!important; padding-right: 15px!important; }
	.mobile-mb-30{ margin-bottom: 30px!important; }
	.mobile-mb-20{ margin-bottom: 20px!important; }
	.mobile-mb-10{ margin-bottom: 10px!important; }
	.mobile-mb-0{ margin-bottom: 0px!important; }
	.mobile-fs-18{ font-size: var(--text-md); }
	.mobile-pb-0{ padding-bottom: 0px!important; }

	.mobile-pt-0{ padding-top: 0px!important; }
	.mobile-pt-30{ padding-top: 30px!important; }
	.mobile-pt-40{ padding-top: 40px!important; }

	.mobile-pb-40{ padding-bottom: 40px!important;}
	.mobile-pb-50{ padding-bottom: 50px!important;}
	.mobile-pb-60{ padding-bottom: 60px!important;}

	.mobile-py-0{ padding-top: 0!important; padding-bottom: 0!important;}

	.mobile-gap-15{ gap: 15px; }

	
	/* Button component
	-----------------------------------*/
	.wp-block-button.rock-salt{ width: 100%; }
	.wp-block-button.rock-salt .rock-salt-button__label{ width: calc(100% - 47px)!important;}
	.wp-block-button.rock-salt .rock-salt-button__label::before, .wp-block-button.rock-salt .rock-salt-button__icon::after{ opacity: 0!important; }
	
	
	/* Lesson Cards component
	-----------------------------------*/
	.lesson-grid{ width: 300%; }

	/* Pillars Card Slider: the 767px mobile fallback already sets
	   width:100% with !important, which beats this .lesson-grid
	   rule. No extra override needed. */


	
	/* Cards component
	-----------------------------------*/
	.overflow-group{ padding:0; margin: 0!important;}
	.overflow-group .citizens-card-slider{  width: 100%; display: block; }
	
	
	/* media text panel Component
	-----------------------------------*/
	.media-text-panel video, .media-text-panel img{ height: 350px;}
	.media-text-panel.img-right .wp-block-column .wp-block-group{ padding: 10px 0 !important; }
	.media-text-panel.img-right .wp-block-column .wp-block-group.img-contain{ height: 200px; }
	
	/* Panel boxes Component
	-----------------------------------*/
	.staggered-paragraph p{ margin-left: 0!important; }
	.row-faq{ gap:0;}
	.row-faq .wp-block-buttons > .wp-block-button a{  padding: 10px 5px !important; }
	
	
	/* Quote Component
	-----------------------------------*/
	.wp-block-quote{ font-size: var(--text-lg); border-left-width: 3px;}
	
	
	/* Subpage hero
	-----------------------------------*/
	.subpage-hero-group{ padding-top: 15px; padding-left: 10px !important; padding-right: 10px !important;}
	.subpage-hero-group .wp-block-columns{ margin-top: -65px; padding-right: 108px; }
	.subpage-hero-bg img{ height: 420px;}
	.subpage-hero-bg + .wp-block-group{ padding: 0 10px !important;}
	
	/* Home hero
	-----------------------------------*/
	.hero-group-container{  padding-left: 10px !important; padding-right: 10px !important;}
	.hero-group-container video{ height: 590px!important; }
	.hero-group-container .wp-block-cover__inner-container .wp-block-group{ padding: 15px 10px 0 10px !important;margin-top: -90px !important;}
	.hero-group-container h1{ font-size: var(--text-lg);  }
	.hero-group-container .wp-block-buttons{
		margin-right: calc(-100vw / 2 + 100% / 2) !important;
		max-width: 100vw;
		width: 90vw;
	}
	
	
	/* Principals message
	-----------------------------------*/
	.sec-principal-message .wp-block-columns{ padding: 0px!important;  }
	.sec-principal-message .img-wrapper figure img{  width: 180px; }
	.sec-principal-message .stats-wrapper .wp-block-group{ width: 40%;  height: 100px; padding: 10px !important; }
	.sec-principal-message .stats-wrapper h2{ font-size: var(--text-md)!important; }
	.sec-principal-message .stats-wrapper p{ font-size: 12px!important; margin-top: 5px; }
	.sec-principal-message .stats-wrapper{ margin-top: -150px; gap: 10px; }
	.sec-principal-message .text-wrapper h2{ font-size: var(--text-md); }

	
	/* News Component
	-----------------------------------*/
	.sec-community-highlights{ padding-top: 40px!important; padding-bottom: 40px!important;}
	.sec-community-highlights .title-wrap h2{ font-size: var(--text-xs); }
	.sec-community-highlights .title-wrap h2 span{ display: block; font-size: var(--text-md); }
	.news-card h4{ font-size: var(--text-md); }
	.news-card h4 + .wp-block-group{ font-size: var(--text-xs); }

	
	/* Learning stages
	-----------------------------------*/
	.sec-learning-stages{ padding-top: 50px!important; padding-left: 0 !important; padding-right: 0 !important; }
	.sec-learning-stages::before{ opacity: 0;}
	.overflow-group + .wp-block-group .wp-block-buttons{ gap: 10px; }
	.overflow-group + .wp-block-group .wp-block-buttons a{ padding: 10px!important;}

	.btn-group-diff .wp-block-button{ min-width: 48%; }
	.btn-group-diff .wp-block-button:nth-child(3){ width: 100%; }
	.btn-group-diff .wp-block-button a{ padding: 10px 5px!important; }


	/* vertical toggles
	-----------------------------------*/
	.vertical-toggle-container{ margin-top: 0px!important; }
	.vertical-toggle .level-card .hover-content{ left: 0; width: 300px; }
	.vertical-toggle .level-card{ height: 150px; }
	.vertical-toggle .level-card-col:hover .level-card{ height: 300px; }
	.vertical-toggle .level-card-col:last-child{ border-bottom: none; }


	/* Curriculum Cards Slider
	-----------------------------------*/
	body .c-snap-slider{ padding: 20px  15px 30px 15px !important; }
	.c-snap-slider-wrap .c-snap-slider{ display: block!important;   width: 100% !important;}
	.c-snap-slider .curriculum-card{height: 250px; margin-bottom: 15px!important;width: 100% !important; max-width: 100% !important; }
	
	.curriculum-card .citizens-card-shape{ transform: scale(1) translate(3px, 0px); width: calc(60px + 14px); height: calc(70px + 14px);}
	.curriculum-card .wp-block-cover__image-background,
	.curriculum-card > .citizens-card-border{ opacity: 1;}
	.curriculum-card .card-arrow{ opacity: 1;  transform: translate3d(0, 0, 0);}
	.curriculum-card .icon-img{ opacity: 0; }
	.curriculum-card h3{ color: var(--color-text-inverse) !important;}
	.curriculum-card .card-arrow img{ width: 28px;  }


	/* Curriculum Intro
	-----------------------------------*/
	.curriculum-intro{ padding-top: 0!important;  }
	

	/* Curriculum Stats Grid
	-----------------------------------*/
	.stats-grid-col .wp-block-group{background-size: cover!important; background-position: 50% 20%!important; height: auto;  }
	.stats-grid-col, .stats-grid-col .wp-block-columns{ height: auto; gap: 15px; }
	

	/* sticky scroll
	-----------------------------------*/
	.sticky-scroll .stick-col{ position: initial; }
	.values-card .wp-block-group{ min-height: 250px !important; padding: 15px !important;}
	.sticky-scroll .values-card{ position: initial; margin-bottom: 15px!important;  border-radius: 15px !important;}
	.values-card .wp-block-group h3{ font-size: var(--text-lg); }

	
	/* Life at citizens
	-----------------------------------*/
	.img-grid{ display: grid!important; grid-template-columns: 1fr 1fr;}
	.img-grid figure.h-full, .img-grid figure.h-full img{ height: 100%;}


	/* Team card
	-----------------------------------*/
	.team-card { border-radius: var(--radius-sm)!important;}
	.team-card figure img{ width: 100%; border-radius: var(--radius-sm)!important;}
	.team-card p{ margin-top: 10px!important;}

	/* Subpages Intro
	-----------------------------------*/
	.sec_intro_text { padding-top: 0!important; padding-bottom: 40px!important;}

}