/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Lifeon - Life and Business Coach HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Our Expertise css
08. Why Choose Us css
09. Our Case Study css
10. How It work css
11. Our Pricing css
12. Our Testimonials css
13. Our FAQs css
14. Our Book Appintment css
15. Our Blog css
16. Footer css
17. About Us Page css
18. Services Page css
19. Service Single css
20. Blog Archive css
21. Blog Single css
22. Case Study Page css
23. Case Study Single css
24. Team Page css
25. Team Single css
26. Pricing Page css
27. Testimonials Page css
28. Image Gallery css
29. Video Gallery css
30. FAQ's Page css
31. Contact Us Page css
32.	Book Appointment css
33. 404 Error Page css
34. Responsive css
35. Home - Version 2 css
36. Home - Version 3 css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
	--primary-color				: #222222;
	--secondary-color			: #FCFFEF;
	--bg-color					: #F7F3F1;
	--text-color				: #666666;
	--accent-color				: #274543;
	--accent-secondary-color	: #ADB295;
	--white-color				: #FFFFFF;
	--divider-color				: #2222221A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "DM Sans", sans-serif;
	--accent-font				: "Mona Sans", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

html,
body{
	width: 100%;
	overflow-x: clip;
}

body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--text-color);
	background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
}

::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar{
	width: 7px;
	background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb{
	background: var(--accent-secondary-color);
}

::selection{
	color: var(--white-color);
	background-color: var(--accent-secondary-color);
	filter: invert(1);
}

p{
	line-height: 1.6em;
	margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: var(--accent-font);
	font-weight: 600;
	line-height: 1.2em;
	color: var(--primary-color);
	margin: 0;
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	position: relative;
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 5px;
	padding: 17px 55px 17px 24px;
	border: none;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default::before{
	content: '';
	position: absolute;
    top: 50%;
    right: 5px;
    width: 40px;
    height: 40px;
	background-color: var(--accent-secondary-color);
    background-image: url('../images/arrow-white.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px auto;
	border-radius: 5px;
    transform: translateY(-50%);
	transition: all 0.4s ease-in-out;
}

.btn-default:hover::before{
	background-color: var(--accent-color);
}

.btn-default::after{ 
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: var(--accent-secondary-color);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.btn-default:hover::after{
	right: auto;
	left: 0;
    width: 100%;
}

.btn-default.btn-highlighted{
	background: var(--white-color);
	color: var(--primary-color);
}

.btn-default.btn-highlighted:hover{
	color: var(--white-color);
}

.readmore-btn{
	position: relative;
	display: inline-block;
	font-family: var(--accent-font);
	font-weight: 600;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--white-color);
	padding-right: 22px;
}

.readmore-btn::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	width: 12px;
	height: 12px;
	transform: translateY(-50%);
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px auto;
    transition: all 0.4s ease-in-out;
}

.readmore-btn:hover::before{
	transform: translateY(-50%) rotate(45deg);
}

.cb-cursor:before{
	background: var(--accent-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.bg-section{
	width: 100%;
	max-width: 1820px;
	background-color: var(--white-color);
	border-radius: 20px;
	margin: 0 auto;
}

.bg-section .container-fluid{
	padding: 0;
}

.dark-section{
	background-color: var(--accent-color);
	background-image: url('../images/dark-section-bg-image.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

.section-row{
	margin-bottom: 80px;
}

.section-row .section-title{
	margin-bottom: 0; 
}

.section-row .section-title.section-title-center{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.section-btn{
	text-align: right;
}

.section-content-btn .section-btn{
	margin-top: 30px;
	text-align: left;
}

.section-title-content p{
	margin-bottom: 20px;
}

.section-title-content p:last-child{
	margin-bottom: 0;	
}

.section-title{
	margin-bottom: 40px;
}

.section-sub-heading,
.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	text-transform: capitalize;
	line-height: 1em;
	color: var(--primary-color);
	background: var(--white-color);
	border-radius: 100px;
	padding: 10px 16px 10px 32px;
    margin-bottom: 15px;
}

.section-sub-heading::before,
.section-title .section-sub-title::before{
	content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-secondary-color);
	border-radius: 50%;
    width: 6px;
    height: 6px;
}

.section-title h1{
	font-size: 60px;
	line-height: 1.1em;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 48px;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}

.dark-section .section-sub-heading,
.bg-section .section-title .section-sub-title{
	background: var(--bg-color);
}

.dark-section .section-sub-heading,
.dark-section .section-title .section-sub-title{
	background: var(--dark-divider-color);
	backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
	color: var(--white-color);
}

.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p,
.dark-section .section-title-content p{
	color: var(--white-color);
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

/************************************/
/*** 	    03. Header css		  ***/
/************************************/

header.main-header{
	position: absolute;
	top: 15px;
    left: 15px;
    right: 15px;
	z-index: 100;
}

header.main-header .header-sticky{
    position: relative;
	top: 0px;
    border-bottom: 1px solid var(--dark-divider-color);
	z-index: 100;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
}

header.main-header .header-sticky.active{
	position: fixed;
    top: 0;
    left: 15px;
    right: 15px;
    transform: translateY(0);
    background: var(--primary-color);
    border: 1px solid var(--dark-divider-color);
	border-top: none;
    border-radius: 0 0 20px 20px;
}

.navbar{
	padding: 30px 0px;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
	margin: 0 1.042vw;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	margin: 0 10px;
	position: relative;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25em;
	padding: 12px 10px !important;
	color: var(--white-color);
	background: transparent;
	border-radius: 0px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-secondary-color);
}

.main-menu ul ul{
	position: absolute;
	left: 0;
	top: 100%;
	transform: scale(1,0.8);
	transform-origin: top;
	width: 235px;
	background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
	border-radius: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu:first-child ul{
    width: 235px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scale(1,1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--primary-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--accent-secondary-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu{
    display: none;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	position: relative;
	top: 0;
}

.slicknav_btn{
	background: var(--accent-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 6px;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
	border-bottom: 1px solid var(--divider-color);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	padding: 7px 20px;
	color: var(--primary-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--accent-secondary-color);
}

.slicknav_menu ul ul li a{
    padding: 7px 20px 7px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	position: absolute;
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--primary-color);
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: translateY(-50%) rotate(-180deg);
	color: var(--accent-secondary-color);
}

/************************************/
/*** 	    04. Hero css	      ***/
/************************************/

.hero{
    position: relative;
    align-content: end;
	background-image: url('../images/hero-bg-image.jpg');
    border-radius: 20px;
	height: 100vh;
	min-height: 850px;
    align-content: end;
    padding: 230px 0 120px;
    margin: 15px 15px 0 15px;
    overflow: hidden;
}

.hero::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(34, 34, 34, 0.70) 12%, transparent 40.63%), linear-gradient(180deg, transparent 29.87%, rgba(34, 34, 34, 0.80) 81.81%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero .container{
	position: relative;
	z-index: 1;
}

.hero-content-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
}

.hero-client-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.satisfy-client-images{
	display: flex;
	align-items: center;
}

.satisfy-client-image{
	position: relative;
    display: inline-block;
    margin-left: -14px;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

.satisfy-client-image:first-child{
	margin: 0;
}

.satisfy-client-image figure{
	display: block;
}

.satisfy-client-image figure img{
	width: 100%;
    max-width: 40px;
    border-radius: 50%;
}

.satisfy-client-image.add-more{
	width: 42px;
	height: 42px;
	background-color: var(--accent-color);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease-in-out;
}

.satisfy-client-image.add-more i{
	font-size: 20px;
	color: var(--white-color);
}

.satisfy-client-image.add-more h2{
	font-size: 14px;
	line-height: 1em;
	color: var(--white-color);
}

.satisfy-client-image.add-more img{
	width: 100%;
	max-width: 16px;
}

.hero-client-content h2{
	font-size: 20px;
	color: var(--white-color);
}

.hero-client-content p{
	color: var(--white-color);
	line-height: normal;
	margin: 5px 0 0;
}

.hero-info-box{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	border: 1px solid var(--dark-divider-color);
	background: var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	min-height: 320px;
	max-width: 330px;
	margin-left: auto;
	padding: 30px;
}

.hero-info-box-header p{
	color: var(--white-color);
	font-weight: 500;
	margin: 0;
}

.hero-info-client-review-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.hero-info-client-review-box .satisfy-client-image figure img{
	max-width: 28px;
}

.hero-info-client-review-box .satisfy-client-image.add-more{
	height: 30px;
	width: 30px;
}

.hero-info-client-review-box .satisfy-client-image.add-more i{
	font-size: 16px;
}

.hero-info-client-review-box .satisfy-client-content{
	width: calc(100% - 98px);
}

.hero-info-client-review-box .satisfy-client-content p{
	color: var(--white-color);
	margin: 0;
	line-height: normal;
}

.hero-info-box-rating{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.hero-info-box-rating h2{
	color: var(--white-color);
	font-size: 20px;
}

.hero-info-rating-star i{
	color: var(--accent-secondary-color);
	font-size: 16px;
}

/************************************/
/*** 	  05.  About Us css 	  ***/
/************************************/

.about-us{
	padding: 120px 0;
}

.about-us-image-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-right: 15px;
}

.about-us-image-box-1{
	width: calc(44% - 15px);
	display: flex;
	flex-direction: column;
}

.about-us-image-box-2{
	width: calc(56% - 15px);
}

.happy-customer-review-box{
	position: relative;
	background: var(--secondary-color);
    padding: 0 30px 30px 0;
    border-radius: 20px 0 20px 0;
	margin-right: -100px;
	z-index: 2;
}

.happy-customer-review-box::before,
.happy-customer-review-box::after{
	content: '';
	position: absolute;
	width: 20px;
    height: 20px;
	mask: url('../images/image-corner-bg-shape.svg');
	-webkit-mask: url('../images/image-corner-bg-shape.svg');
	background-color: var(--secondary-color);
	mask-repeat: no-repeat;
	mask-size: cover;
	z-index: 1;
}

.happy-customer-review-box::before{
	right: -20px;
	left: auto;
}

.happy-customer-review-box::after{
	left: auto;
	right: 50px;
	bottom: -20px;
}

.happy-customer-review-item{
	background-color: var(--accent-color);
	border-radius: 20px;
	padding: 30px;
}

.happy-customer-review-item .hero-info-rating-star i{
	font-size: 20px;
}

.happy-customer-review-content{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

.happy-customer-review-content p{
	color: var(--white-color);
	margin: 0;
}

.happy-customer-review-item .satisfy-client-images{
	margin-top: 20px;
}

.happy-customer-review-item .satisfy-client-image{
	border-color: var(--primary-color);
}

.happy-customer-review-item .satisfy-client-image.add-more{
	background-color: var(--accent-secondary-color);
}

.happy-customer-review-item .satisfy-client-image.add-more i{
	color: var(--white-color);
}

.about-us-image{
	height: 100%;
}

.about-us-image figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.about-us-image img{
	width: 100%;
	height: 100%;
	border-radius: 20px;
	object-fit: cover;
}

.about-us-image-box-1 .about-us-image img{
	aspect-ratio: 1 / 1.515;
}

.about-us-image-box-2 .about-us-image img{
	aspect-ratio: 1 / 1.971;
}

.about-us-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.about-us-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.about-us-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.about-us-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-us-item:hover .icon-box::before{
    transform: scale(1);
}

.about-us-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
}

.about-us-item-content{
	width: calc(100% - 65px);
}

.about-us-item-content h3{
	font-size: 20px;
}

.about-us-item-content p{
	margin: 10px 0 0;
}

.about-us-body{
	margin-top: 40px;
}

.about-us-body-item{
	background-color: var(--white-color);
	border-left: 4px solid var(--accent-color);
	border-radius: 20px;
	margin-bottom: 30px;
	padding: 30px;
}

.about-us-body-item:last-child{
	margin-bottom: 0;
}

.about-us-body-item h3{
	font-size: 16px;
	line-height: 1.6em;
}

.about-us-btn{
	margin-top: 40px;
}

/************************************/
/*** 	 06.  Our Services css 	  ***/
/************************************/

.our-services{
	background-image: url('../images/our-services-bg-image.png');
	background-position: bottom center;
	background-size: auto;
	padding: 120px 0;
}

.service-item{
	background: var(--dark-divider-color);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
	min-height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	transition: all 0.4s ease-in-out;
}

.service-item:hover{
	transform: translateY(-5px);
}

.service-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.service-item-header .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.service-item-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item:hover .service-item-header .icon-box::before{
    transform: scale(1);
}

.service-item-header .icon-box img{
	position: relative;
    width: 100%;
    max-width: 28px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.service-item:hover .service-item-header .icon-box img{
	filter: brightness(0) invert(0);
}

.service-item-title{
	width: calc(100% - 75px);
}

.service-item-title h2{
	font-size: 20px;
	line-height: 1.3em;
	color: var(--white-color);
}

.service-item-title h2 a{
	color: inherit;
}

.service-item-content p{
	color: var(--white-color);
	margin: 0;
}

.service-item-btn{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.section-footer-text{
	margin-top: 30px;
	text-align: center;
}

.section-footer-text p{
	color: var(--primary-color);
	margin-bottom: 0;
}

.section-footer-text p span{
	display: inline-block;
	font-size: 14px;
	color: var(--white-color);
	background: var(--accent-secondary-color);
	line-height: 1em;
	padding: 4px 10px;
	border-radius: 20px;
	margin-right: 10px;
}

.section-footer-text p a{
	color: var(--accent-secondary-color);
	font-weight: 600;
	text-transform: capitalize;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: all 0.3s ease-in-out;
}

.section-footer-text p a:hover{
	color: var(--primary-color);
}

.section-footer-text ul{
	width: 100%;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

.section-footer-text ul li{
	display: inline-block;
	font-family: var(--accent-font);
	font-weight: 600;
	line-height: normal;
	color: var(--primary-color);
	margin-right: 10px;
}

.section-footer-text ul li:last-child{
	margin: 0;
}

.section-footer-text ul li i{
	color: var(--accent-secondary-color);
}

.section-footer-text.section-footer-contact{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
}

.section-footer-text.section-footer-contact span{
	width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
	align-items: center;
    margin-right: 10px;
}

.section-footer-text.section-footer-contact span img{
	width: 100%;
	max-width: 16px;
}

.section-footer-text.section-satisfy-img{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image figure img{
	max-width: 30px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more{
	width: 32px;
	height: 32px;
    margin-left: -10px;
	background: var(--accent-secondary-color);
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more img{
	max-width: 18px;
}

.section-footer-text.section-satisfy-img ul{
	margin: 5px 0 0;
}

.dark-section .section-footer-text.section-satisfy-img .satisfy-client-image{
    border-color: var(--white-color);
}

.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li{
	color: var(--white-color);
}

.dark-section .section-footer-text p a:hover{
	color: var(--white-color);
}

/************************************/
/*** 	 07. Our Expertise css 	  ***/
/************************************/

.our-expertise{
	padding: 120px 0;
}

.expertise-body{
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
}

.skills-progress-bar{
	margin-bottom: 30px;
}

.skills-progress-bar:last-child{
	margin-bottom: 0;
}

.skillbar .skill-data{
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.skill-data .skill-title,
.skill-data .skill-no{
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color);
}

.skill-progress{
	position: relative;
	background: var(--white-color);
	border-radius: 10px;
	width: 100%;
	height: 6px;
}

.skill-progress .count-bar{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: var(--accent-secondary-color);
	border-radius: 10px;
}

.expertise-btn{
	margin-top: 40px;
}

.expertise-image-box{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	margin-left: 15px;
}

.expertise-image-box-1{
	width: 40%;
	padding-bottom: 100px;
}

.expertise-image-box-2{
	position: relative;
	width: 60%;
	z-index: 2;
}

.expertise-image figure{
	display: block;
	border-radius: 20px;
}

.expertise-image img{
	width: 100%;
	border-radius: 20px;
	object-fit: cover;
}

.expertise-image-box-1 figure{
	margin-right: -250px;
}

.expertise-image-box-1 .expertise-image img{
	aspect-ratio: 1 / 1.045;
}

.expertise-image-box-2 .expertise-image img{
	aspect-ratio: 1 / 0.91;
}

.experience-circle{
	position: relative;
	transform: translate(-65px, 65px);
	z-index: 2;
}

.experience-circle img{
	width: 100%;
	max-width: 130px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	animation: infiniterotate 20s infinite linear;
}

@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
    }
    to{
		transform: rotate(360deg);
    }
}

/************************************/
/***     08. Why Choose Us css    ***/
/************************************/

.why-choose-us{
	padding: 120px 0;
}

.why-choose-item{
	position: relative;
	border-radius: 20px;
	align-content: end;
	min-height: 450px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 25px;
	overflow: hidden;
}

.why-choose-item-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.why-choose-item-image figure{
	display: block;
	width: 100%;
	height: 100%;
}

.why-choose-item-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.why-choose-item-content{
	position: relative;
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 30px;
	z-index: 1;
}

.why-choose-item-content h3{
	font-size: 18px;
	margin-bottom: 20px;
}

.why-choose-content-image img{
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1 / 0.57;
    object-fit: cover;
	border-radius: 10px;
}

.why-choose-image{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.why-choose-image figure{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

.why-choose-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.116;
	object-fit: cover;
	border-radius: 20px;
}

.why-choose-cta-item{
	position: relative;
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	overflow: hidden;
}

.why-choose-cta-item-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.why-choose-cta-item-image figure{
	position: relative;
	display: block;
	height: 100%;
}

.why-choose-cta-item-image figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	opacity: 60%;
	width: 100%;
	height: 100%;
}

.why-choose-cta-item-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.why-choose-cta-body{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	gap: 40px;
	height: 100%;
	z-index: 1;
}

.why-choose-cta-body .icon-box img{
	width: 100%;
	max-width: 60px;
}

.why-choose-cta-content p{
	font-size: 14px;
	font-weight: 600;
	color: var(--white-color);
	margin: 0 0 10px;
}

.why-choose-cta-content h2{
	font-size: 24px;
	color: var(--white-color);
}

.why-choose-cta-btn{
	margin-top: 40px;
}

.why-choose-slider-box{
    margin-top: 30px;
}

.why-choose-slider-content{
    display: flex;
    align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 40px;
	text-align: center;
}

.why-choose-slider-content hr{
    height: 2px;
	flex-grow: 1;
    color: var(--divider-color);
    opacity: 1;
    margin: 0;
}

.why-choose-slider-content p{
	font-family: var(--accent-font);
	color: var(--primary-color);
    margin-bottom: 0;
}

.why-choose-logo-slider{
	max-width: 750px;
	margin: 0 auto;
}

.why-choose-logo{
	text-align: center;
}

.why-choose-logo img{
	width: 100%;
	max-width: 162px;
	height: 40px;
}

/************************************/
/***    09. Our Case Study css    ***/
/************************************/

.our-case-study{
	padding: 120px 0;
}

.case-study-item{
	position: relative;
	min-height: 500px;
	border-radius: 20px;
	align-content: end;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	overflow: hidden;
}

.case-study-item-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.case-study-item-image a{
	display: block;
	height: 100%;
	cursor: none;
}

.case-study-item-image a figure{
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
}

.case-study-item-image a figure::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, transparent 50%, rgba(34, 34, 34, 0.90) 86.7%);
	z-index: 1;
}

.case-study-item-image a figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s ease-in-out;
}

.case-study-item:hover .case-study-item-image a figure img{
	transform: scale(1.06);
}

.case-study-item-contant{
	position: relative;
	z-index: 1;
}

.case-study-item-contant ul{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 15px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.case-study-item-contant ul li a{
	display: block;
	color: var(--white-color);
	background-color: var(--dark-divider-color);
	border-radius: 100px;
	padding: 9px 16px;
	transition: all 0.4s ease-in-out;
}

.case-study-item-contant ul li a:hover{
	background-color: var(--accent-secondary-color);
}

.case-study-item-contant h2{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

.case-study-item-contant h2 a{
	color: inherit;
}

/************************************/
/***      10. How It work css     ***/
/************************************/

.how-it-work{
	padding: 120px 0;
}

.how-it-work-image{
	height: 100%;
	margin-left: 15px;
}

.how-it-work-image figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.how-it-work-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.526;
	object-fit: cover;
	border-radius: 20px;
}

.how-work-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 40px 60px;
	margin-top: 120px;
}

.how-work-item{
	position: relative;
	width: calc(33.33% - 40px);
}

.how-work-item:before{
	content: '';
	position: absolute;
	top: 0;
	right: -30px;
	bottom: 0;
	width: 1px;
	height: 100%;
	background-color: var(--dark-divider-color);
}

.how-work-item:nth-child(3n + 3):before,
.how-work-item:last-child:before{
	display: none;
}

.how-work-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.how-work-item-header .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.how-work-item-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.how-work-item:hover .how-work-item-header .icon-box::before{
    transform: scale(1);
}

.how-work-item-header .icon-box img{
	position: relative;
    width: 100%;
    max-width: 28px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.how-work-item:hover .how-work-item-header .icon-box img{
	filter: brightness(0) invert(0);
}

.how-work-item-title{
	width: calc(100% - 75px);
}

.how-work-item-title p{
	color: var(--white-color);
	font-weight: 500;
	text-transform: uppercase;
	line-height: normal;
	margin-bottom: 10px;
}

.how-work-item-title h3{
	font-size: 20px;
	color: var(--white-color);
}

.how-work-item-body{
	margin-top: 40px;
}

.how-work-item-body p{
	color: var(--white-color);
	margin: 0;
}

/************************************/
/***     11. Our pricing css      ***/
/************************************/

.our-pricing{
	padding: 120px 0;
}

.pricing-item{
	background-color: var(--white-color);
	border-radius: 14px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 10px;
}

.pricing-item-content{
	padding: 30px;
	margin-bottom: 10px;
}

.pricing-item-content h2{
	font-size: 20px;
}

.pricing-item-content p{
	margin: 10px 0 0;
}

.pricing-item-body{
	background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
	border-radius: 14px;
	text-align: center;
	padding: 40px;
}

.pricing-item-price h2{
	font-size: 40px;
}

.pricing-item-price p{
	margin: 10px 0 0;
}

.pricing-item-btn{
	margin-top: 30px;
}

.pricing-item-btn .btn-default{
	width: 100%;
	padding: 17px 24px;
}

.pricing-item-btn .btn-default:before{
	display: none;
}

.pricing-item-list{
	margin-top: 10px;
	padding: 30px;
}

.pricing-item-list h3{
	font-size: 16px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.pricing-item-list ul{
	list-style: none;
    margin: 0;
    padding: 0;
}

.pricing-item-list ul li{
    position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 15px;
}

.pricing-item-list ul li:last-child{
	margin-bottom: 0;
}

.pricing-item-list ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.pricing-benefit-list{
	margin-top: 30px;
}

.pricing-benefit-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	gap: 20px 50px;
}

.pricing-benefit-list ul li{
	color: var(--primary-color);
    display: inline-flex;
    align-items: center;
}

.pricing-benefit-list ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 15px;
}

/************************************/
/***   12. Our Testimonials css   ***/
/************************************/

.our-testimonials{
	padding: 120px 0;
}

.testimonials-image-box{
	position: relative;
	height: 100%;
}

.testimonials-image{
	height: 100%;
}

.testimonials-image figure{
	display: block;
	height: 100%;
	border-radius: 14px;
}

.testimonials-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.905;
	object-fit: cover;
	border-radius: 14px;
}

.testimonials-review-box{
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: 100%;
	max-width: 280px;
	background-color: var(--white-color);
	border-radius: 14px;
	padding: 15px;
	z-index: 1;
}

.testimonials-review-box-header{
	display: flex;
	align-items: center;
	gap: 15px;
}

.testimonials-review-box-header .icon-box img{
	width: 100%;
	max-width: 40px;
}

.testimonials-review-header-content{
	width: calc(100% - 55px);
	display: flex;
	align-items: center;
}

.testimonials-review-header-content h2{
	font-size: 26px;
	min-width: 70px;
	line-height: 1em;
}

.google-rating-star{
	line-height: normal;
}

.google-rating-star i{
	font-size: 18px;
	color: var(--accent-secondary-color);
}

.testimonials-review-body{
	margin-top: 15px;
}

.testimonials-review-body p{
	margin: 0;
}

.testimonial-slider,
.testimonial-slider .swiper,
.testimonial-item{
	height: 100%;
}

.testimonial-slider .swiper-wrapper{
	cursor: none;
}

.testimonial-item{
	min-height: 375px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
	border-radius: 14px;
	padding: 40px;
}

.testimonial-item-rating i{
	color: var(--accent-secondary-color);
	font-size: 16px;
}

.testimonial-item-content{
	margin-top: 20px;
}

.testimonial-item-content p{
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--primary-color);
	margin: 0;
}

.testimonial-item-author{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.testimonial-item-author-image figure{
	display: block;
	border-radius: 50%;
}

.testimonial-item-author-image figure img{
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
}

.testimonial-item-author-content{
	width: calc(100% - 65px);
}

.testimonial-item-author-content h2{
	font-size: 20px;
}

.testimonial-item-author-content p{
	line-height: normal;
	margin: 5px 0 0;
}

.our-testimonials .section-footer-text{
	margin-top: 60px;
}

/************************************/
/***   		13. Our Faqs css      ***/
/************************************/

.our-faqs{
	padding: 120px 0;
}

.faqs-content{
	position: sticky;
	top: 30px;
	margin-right: 15px;
}

.faqs-content-list ul{
	list-style: none;
    margin: 0;
    padding: 0;
}

.faqs-content-list ul li{
    position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 15px;
}

.faqs-content-list ul li:last-child{
	margin-bottom: 0;
}

.faqs-content-list ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.faqs-content-btn{
	margin-top: 40px;
}

.faq-accordion .accordion-item{
    position: relative;
    background: var(--white-color);
    border-radius: 14px;
    margin-bottom: 25px;
    overflow: hidden;
}

.faq-accordion .accordion-item:last-child{
    margin-bottom: 0;
}

.faq-accordion .accordion-header .accordion-button{
	font-size: 18px;
    font-weight: 600;
    line-height: 1.333em;
    background: transparent;
    color: var(--primary-color);
    padding: 24px 50px 24px 24px;
    transition: all 0.4s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button::after, 
.faq-accordion .accordion-item .accordion-button.collapsed::after{
   	content: '\f078';
    font-family: 'FontAwesome';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--accent-color);
	line-height: normal;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
	transform: translateY(-50%) rotate(180deg);
}

.faq-accordion .accordion-item .accordion-body{  
	border-top: 1px solid var(--divider-color);
    padding: 24px;
}

.faq-accordion .accordion-item .accordion-body p:last-child{
    margin: 0;
}

/************************************/
/*** 14. Our Book Appintment css  ***/
/************************************/

.our-book-appointment{
	position: relative;
	padding: 120px 0;
	overflow: hidden;
}

.book-appointment-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.book-appointment-image figure{
	position: relative;
	display: block;
	height: 100%;
}

.book-appointment-image figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(270deg, var(--primary-color) 0%, transparent 68.93%);
	height: 100%;
	width: 100%;
}

.book-appointment-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.book-appointment-form-box{
	position: relative;
	width: 100%;
	max-width: 640px;
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
	border-radius: 20px;
	padding: 50px;
	margin-left: auto;
	z-index: 1;
}

.book-appointment-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--white-color);
	background-color: var(--dark-divider-color);
	border: none;
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: none;
	outline: none;
}

.book-appointment-form .form-control::placeholder{
	color: var(--white-color);
	opacity: 100%;
}

.book-appointment-form select.form-control{
	padding: 18px 30px 18px 20px;
}

.book-appointment-form select option{
	color: var(--text-color);
}

.appointment-form-btn{
	margin-top: 20px;
}

.appointment-form-btn .btn-default{
	width: 100%;
	text-align: center;
	padding: 17px 24px;
}

.appointment-form-btn .btn-default:before{
	display: none;
}

/************************************/
/***       15. Our Blog css       ***/
/************************************/

.our-blog{
	padding: 120px 0 90px;
}

.post-item{
	position: relative;
	min-height: 430px;
	border-radius: 20px;
	align-content: end;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	overflow: hidden;
}

.post-item .post-featured-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.post-item .post-featured-image a, 
.post-item .post-featured-image figure{
	position: relative;
    display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
    cursor: none;
}

.post-item .post-featured-image figure::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(34, 34, 34, 0.90) 100%);
    height: 100%;
    width: 100%;
    z-index: 1;
}

.post-item .post-featured-image figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.6s ease-in-out;
}

.post-item:hover .post-featured-image img{
	transform: scale(1.06);
}

.post-item .post-item-body{
	position: relative;
	z-index: 1;
}

.post-item .post-item-content h2{
	font-size: 20px;
	color: var(--white-color);
	line-height: 1.4em;
}

.post-item .post-item-content h2 a{
	color: inherit;
}

.post-item .post-item-btn{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 30px;
	margin-top: 30px;
}

/************************************/
/***        16. Footer css        ***/
/************************************/

.main-footer{
	padding: 120px 0 0;
	margin-bottom: 15px;
}

.footer-header{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 80px;
	padding-bottom: 80px;
}

.footer-header .section-title{
	margin-bottom: 0;
}

.footer-newsletter-form{
	width: 100%;
	max-width: 415px;
}

.footer-newsletter-form .form-group{
	display: flex;
	background-color: var(--dark-divider-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
	border-radius: 10px;
	padding: 10px;
}

.footer-newsletter-form .form-group .form-control{
	width: calc(100% - 40px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 5px 10px;
}

.footer-newsletter-form .form-group .form-control::placeholder{
	color: var(--white-color);
}

.footer-newsletter-form .form-group .newsletter-btn{
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-secondary-color);
	border: none;
	border-radius: 5px;
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover{
	background-color: var(--white-color);
}

.footer-newsletter-form .form-group .newsletter-btn img{
	width: 100%;
	max-width: 12px;
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover img{
	transform: rotate(45deg);
	filter: brightness(0) invert(0);
}

.about-footer{
	background: var(--dark-divider-color);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 10px;
	padding: 40px;
}

.footer-logo img{
	width: 100%;
	max-width: 147px;
}

.about-footer-content{
	margin-top: 30px;
}

.about-footer-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-social-links{
	margin-top: 30px;
}

.footer-social-links ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-social-links ul li a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	color: var(--white-color);
	transition: all 0.3s ease-in-out;
}

.footer-social-links ul li:hover a{
	background: var(--accent-secondary-color);
	color: var(--primary-color);
}

.footer-social-links ul li i{
	font-size: 18px;
	color: inherit;
}

.footer-links-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
	margin-left: 4.167vw;
}

.footer-links{
	max-width: 38%;
}

.footer-links h2{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 25px;
}

.footer-links ul{
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
}

.footer-links ul li{
	text-transform: capitalize;
	color: var(--white-color);
	line-height: 1.5em;
	margin-bottom: 15px;
}

.footer-links ul li:last-child{
	margin-bottom: 0;
}

.footer-links ul li::marker{
	color: var(--accent-secondary-color);
}

.footer-links ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-links ul li a:hover{
	color: var(--accent-secondary-color);
}

.footer-copyright-text{
	border-top: 1px solid var(--dark-divider-color);
	text-align: center;
	padding: 60px 0;
	margin-top: 80px;
}

.footer-copyright-text p{
	color: var(--white-color);
	margin-bottom: 0;
}

/************************************/
/***    17. About Us Page css     ***/
/************************************/

.page-header{
	position: relative;
	background-image: url('../images/page-header-bg.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 20px;
	padding: 280px 0 170px;
	margin: 15px 15px 0;
	overflow: hidden;
}

.page-header:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(34, 34, 34, 0.70) 0%, transparent 19.63%), linear-gradient(270deg, transparent 0%, rgba(34, 34, 34, 0.80) 85.74%);
	height: 100%;
	width: 100%;
	z-index: 1;
}

.page-header-box{
	position: relative;
	z-index: 2;
}

.page-header-box h1{
	display: inline-block;
	font-size: 60px;
	letter-spacing: -0.02em;
	color: var(--white-color);
	margin-bottom: 10px;
	cursor: none;
}

.page-header-box ol{
	margin: 0;
	padding: 0;
}

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	line-height: 1.6em;
    text-transform: capitalize;
	color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--white-color);
}

.our-approach{
	padding: 120px 0 0;
	margin-bottom: 250px;
}

.approach-content-box{
	position: relative;
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: end;
	gap: 30px;
	padding: 50px;
	margin-bottom: -250px;
	overflow: hidden;
}

.approach-image{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.approach-image figure{
	display: block;
	border-radius: 20px;
	height: 100%;
}

.approach-image img{
	height: 100%;
	width: 100%;
	border-radius: 20px;
	object-fit: cover;
}

.approach-item-list{
	width: 100%;
	max-width: 500px;
	position: relative;
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 40px;
}

.approach-item{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.approach-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.approach-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.approach-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.approach-item:hover .icon-box::before{
    transform: scale(1);
}

.approach-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
}

.approach-item-content{
	width: calc(100% - 65px);
}

.approach-item-content h3{
	font-size: 20px;
}

.approach-item-content p{
	margin: 10px 0 0;
}

.our-benefit{
	padding: 120px 0;
}

.benefits-item{
	min-height: 460px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	background-color: var(--white-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.benefits-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
	overflow: hidden;
}

.benefits-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.benefits-item:hover .icon-box::before{
    transform: scale(1);
}

.benefits-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
}

.benefit-item-content h2{
	font-size: 20px;
}

.benefit-item-content p{
	margin: 10px 0 0;
}

.benefit-item-list{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.benefit-item-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.benefit-item-list ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 15px;
}

.benefit-item-list ul li:last-child{
	margin: 0;
}

.benefit-item-list ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.intro-video{
	position: relative;
	background-image: url('../images/intro-video-bg-image.jpg');
	background-position: center center;
	overflow: hidden;
}

.intro-video:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--primary-color);
	opacity: 50%;
}

.intro-video .container{
	position: relative;
	z-index: 1;
}

.intro-video-body{
	max-width: 700px;
	text-align: center;
	margin: 0 auto;
	padding: 180px 0;
}

.video-play-button a{
	position: relative;
	width: 80px;
	height: 80px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	transition: all 0.4s ease-in-out;
}

.video-play-button a.bg-effect:before,
.video-play-button a.bg-effect:after{
	content: '';
	position: absolute;
    width: 160%;
    height: 160%;
	border: 24px solid var(--white-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button a.bg-effect:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button a:hover{
	background: var(--white-color);
}

.video-play-button a i{
	position: relative;
	font-size: 30px;
	color: var(--white-color);
	margin-left: 2px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.video-play-button a:hover i{
	color: var(--primary-color);
}

.intro-video-content{
	margin-top: 70px;
}

.intro-video-contact-box{
	background-color: var(--divider-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	padding: 25px 0;
}

.intro-video-contact-content-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.intro-video-contact-title{
	max-width: 49%;
}

.intro-video-contact-title h2{
	color: var(--white-color);
	font-size: 30px;
}

.intro-video-contact-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px 60px;
	max-width: 49%;
	overflow: hidden;
}

.intro-video-contact-item{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.intro-video-contact-item::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -30px;
	background: var(--dark-divider-color);
	width: 1px;
	height: 100%;
}

.intro-video-contact-item:last-child:before{
	display: none;
}

.intro-video-contact-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.intro-video-contact-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.intro-video-contact-item:hover .icon-box::before{
    transform: scale(1);
}

.intro-video-contact-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.intro-video-contact-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.intro-video-contact-content{
	width: calc(100% - 65px);
}

.intro-video-contact-content p{
	color: var(--white-color);
	line-height: normal;
	margin-bottom: 5px;
}

.intro-video-contact-content h3{
	color: var(--white-color);
	font-size: 20px;
}

.intro-video-contact-content h3 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.intro-video-contact-content h3 a:hover{
	color: var(--accent-secondary-color);
}

.our-team{
	padding: 120px 0;
}

.team-item{
    position: relative;
    border-radius: 20px;
	align-content: end;
	min-height: 480px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
	padding: 30px;
    overflow: hidden;
}

.team-item-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.team-item-image figure,
.team-item-image a{
	position: relative;
	height: 100%;
    display: block;
    cursor: none;
}

.team-item-image figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 20px;
	background: linear-gradient(180deg, transparent 61.46%, rgba(34, 34, 34, 0.80) 100%);
	z-index: 1;
}

.team-item-image img{
    width: 100%;
	height: 100%;
    object-fit: cover;
	transition: all 0.6s ease-in-out;
}

.team-item:hover .team-item-image img{
	transform: scale(1.06);
}

.team-item-body{
	position: relative;
    text-align: center;
    z-index: 1;
}

.team-item-content h2{
    font-size: 20px;
    color: var(--white-color);
}

.team-item-content h2 a{
    color: inherit;
}

.team-item-content p{
    color: var(--white-color);
	margin: 10px 0 0;
}

.team-social-list{
    height: 0;
    opacity: 0;
    visibility: hidden;
	transform: scaleY(0);
	transform-origin: top;
    transition: all 0.4s ease-in-out;
}

.team-item:hover .team-social-list{
	height: 36px;
    opacity: 1;
    visibility: visible;
	transform: scaleY(1);
	margin-bottom: 30px;
}

.team-social-list ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-social-list ul li a{
    width: 36px;
    height: 36px;
	color: var(--primary-color);
    background-color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.team-social-list ul li a:hover{
    background: var(--accent-color);
	color: var(--white-color);
}

.team-social-list ul li a i{
    font-size: 18px;
	color: inherit;
}

/************************************/
/***    18. Services Page css     ***/
/************************************/

.page-services{
	padding: 120px 0 90px;
}

.page-services .service-item{
	background-color: var(--white-color);
}

.page-services .service-item-header .icon-box::before{
	background: var(--primary-color);
}

.page-services .service-item:hover .service-item-header .icon-box img{
	filter: none;
}

.page-services .service-item-title h2,
.page-services .readmore-btn{
	color: var(--primary-color);
}

.page-services .service-item-content p{
	color: var(--text-color);
}

.page-services .service-item-btn{
	border-color: var(--divider-color);
}

.page-services .service-item-btn .readmore-btn::before{
	background-image: url('../images/arrow-primary.svg');
}

/************************************/
/***    19. Service Single css    ***/
/************************************/

.page-service-single{
	padding: 120px 0;
}

.page-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 15px;
}

.page-category-list{
	background: var(--white-color);
	border-radius: 20px;
    margin-bottom: 60px;
	overflow: hidden;
}

.page-category-list .page-category-list-title{
	font-size: 20px;
	line-height: normal;
	color: var(--white-color);
	background: var(--accent-secondary-color);
	padding: 16px 30px;
}

.page-category-list ul{
	list-style: none;
    margin: 0;
	padding: 30px;
}

.page-category-list ul li{
	line-height: 1.5em;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.page-category-list ul li:last-child{
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.page-category-list ul li a{
    position: relative;
    display: block;
    text-transform: capitalize;
	color: inherit;
    padding-right: 25px;
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover{
    color: var(--primary-color);
}

.page-category-list ul li a::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	background: url('../images/arrow-primary.svg') no-repeat;
	background-position: center center;
	background-size: cover;
    width: 12px;
    height: 12px;
	transform: translateY(-50%);
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover::before{
	transform: translateY(-50%) rotate(45deg);
}

.sidebar-cta-box{
	position: relative;
	border-radius: 20px;
	min-height: 460px;
	align-content: end;
	padding: 10px;
	overflow: hidden;
}

.sidebar-cta-box-image{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.sidebar-cta-box-image figure{
	display: block;
	height: 100%;
}

.sidebar-cta-box-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sidebar-cta-contact-item-list{
	position: relative;
	background: var(--divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 10px;
	padding: 20px;
	z-index: 2;
}

.sidebar-cta-contact-item{
	display: flex;
    flex-wrap: wrap;
	align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 25px;
    padding-bottom: 25px;
}

.sidebar-cta-contact-item:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding: 0;
}

.sidebar-cta-contact-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background-color: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar-cta-contact-item .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--white-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.sidebar-cta-contact-item:hover .icon-box:before{
	transform: scale(1);
}

.sidebar-cta-contact-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.sidebar-cta-contact-item:hover .icon-box img{
	filter: brightness(1) invert(1);
}

.sidebar-cta-contact-item-content{
    width: calc(100% - 65px);
}

.sidebar-cta-contact-item-content p{
	color: var(--white-color);
	margin: 0;
}

.sidebar-cta-contact-item-content h2{
	font-size: 20px;
	color: var(--white-color);
	margin: 5px 0 0;
}

.sidebar-cta-contact-item-content h2 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.sidebar-cta-contact-item-content h2 a:hover{
	color: var(--accent-secondary-color);
}

.page-single-image{
    margin-bottom: 40px;
}

.page-single-image figure{
    display: block;
    border-radius: 20px;
}

.page-single-image img{
    width: 100%;
    aspect-ratio: 1 / 0.6;
    object-fit: cover;
    border-radius: 20px;
}

.service-entry{
    margin-bottom: 60px;
}

.service-entry p{
    margin-bottom: 20px;
}

.service-entry h2{
	font-size: 48px;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.service-entry h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.service-entry p:last-child,
.service-entry h2:last-child,
.service-entry h3:last-child{
	margin: 0;
}

.service-entry ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px 20px;
	list-style: none;
	padding: 0;
	margin: 40px 0 0;
}

.service-entry ul li{
	position: relative;
	width: calc(50% - 10px);
	line-height: 1.5em;
	padding-left: 25px;
}

.service-entry ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.service-entry-info-box,
.service-focus-box,
.service-process-box{
	margin-top: 60px;
}

.service-benefit-box{
	margin-top: 40px;
}

.service-benefit-box h3{
	font-size: 30px;
}

.service-focus-item-list{
	margin-top: 40px;
}

.service-focus-item{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 30px;
}

.service-focus-item:last-child{
	margin-bottom: 0;
}

.service-focus-image{
	width: calc(39% - 15px);
}

.service-focus-image figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.service-focus-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.68;
	object-fit: cover;
	border-radius: 20px;
}

.service-focus-content-box{
	width: calc(61% - 15px);
	background: var(--white-color);
	align-content: center;
	border-radius: 20px;
	padding: 2.083vw;
}

.service-focus-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 30px;
}

.service-focus-item-header .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-focus-item-header .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.service-focus-content-box:hover .service-focus-item-header .icon-box:before{
	transform: scale(1);
}

.service-focus-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.service-focus-item-title{
    width: calc(100% - 65px);
}

.service-process-body-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 50px;
	margin-top: 40px;
}

.service-process-item-list{
	width: calc(51% - 25px);
	align-content: center;
}

.service-process-item{
	display: flex;
	flex-wrap: wrap;
	gap: 15px 20px;
	margin-bottom: 40px;
}

.service-process-item:last-child{
	margin-bottom: 0;
}

.service-process-item-no{
	position: relative;
	width: 60px;
	height: 60px;
	background-color: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-process-item-no::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.service-process-item:hover .service-process-item-no:before{
	transform: scale(1);
}

.service-process-item-no span{
	position: relative;
	font-family: var(--accent-font);
	font-size: 24px;
	font-weight: 600;
	color: var(--white-color);
	z-index: 1;
}

.service-process-item-content{
    width: calc(100% - 80px);
}

.service-process-video-image{
	position: relative;
	width: calc(49% - 25px);
	border-radius: 20px;
	overflow: hidden;
}

.service-process-video-image figure{
	display: block;
	height: 100%;
}

.service-process-video-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--primary-color);
	opacity: 30%;
	width: 100%;
	height: 100%;
}

.service-process-video-image figure img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.925;
	object-fit: cover;
}

.service-process-video-image .video-play-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.service-process-video-image .video-play-button a{
	width: 55px;
	height: 55px;
}

.service-process-video-image .video-play-button a i{
	font-size: 18px;
}

/************************************/
/***     20. Blog Archive css     ***/
/************************************/

.page-blog{
	padding: 120px 0;
}

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--white-color);
    color: var(--primary-color);
	border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
	font-family: var(--accent-font);
    font-weight: 600;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--accent-color);
	color: var(--white-color);
}

/************************************/
/***      21. Blog Single css     ***/
/************************************/

.page-single-post{
	padding: 120px 0;
}

.post-single-meta ol li{
	font-size: 18px;
	color: var(--white-color);
	margin-right: 15px;
}

.post-single-meta ol li:last-child{
	margin-right: 0;
}

.post-single-meta ol li i{
    font-size: 18px;
    color: var(--white-color);
    margin-right: 5px;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;	
	border-radius: 20px;
	overflow: hidden;
}

.post-image img{
	width: 100%;
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 20px;
}

.post-content{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-family: var(--accent-font);
	font-weight: 600;
	line-height: 1.2em;
	margin: 0 0 0.42em;
}

.post-entry h1{
	font-size: 60px;
}

.post-entry h2{
	font-size: 48px;
}

.post-entry h3{
	font-size: 40px;
}

.post-entry h4{
	font-size: 30px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 20px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}

.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ol li,
.post-entry ul li{
    position: relative;
	font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 15px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
	background: var(--accent-color) url('../images/icon-blockquote.svg');
	background-repeat: no-repeat;
	background-position: 30px 30px;
    background-size: 45px;
	border-radius: 20px;
    padding: 30px 30px 30px 90px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--white-color);
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
	font-family: var(--accent-font);
    font-size: 20px;
	font-weight: 600;
    text-transform: capitalize;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.post-tags .tag-links a{
    display: inline-block;
	font-family: var(--accent-font);
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1em;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 5px;
    padding: 12px 20px;
	transition: all 0.4s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--accent-secondary-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 5px;
    width: 40px;
    height: 40px;
    transition: all 0.4s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background: var(--accent-secondary-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}

/************************************/
/***   22. Case Study Page css    ***/
/************************************/

.page-case-study{
	padding: 120px 0 90px;
}

/************************************/
/***  23. Case Study Single css   ***/
/************************************/

.page-case-study-single{
	padding: 120px 0;
}

.case-study-category-list ul li{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

.case-study-entry{
    margin-bottom: 60px;
}

.case-study-entry p{
    margin-bottom: 20px;
}

.case-study-entry h2{
	font-size: 48px;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.case-study-entry h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.case-study-entry p:last-child,
.case-study-entry h2:last-child,
.case-study-entry h3:last-child{
	margin: 0;
}

.case-study-entry ul{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.case-study-entry ul li{
	position: relative;
	width: calc(50% - 15px);
	line-height: 1.5em;
	padding-left: 25px;
}

.case-study-entry ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.case-study-approach-box,
.case-study-results-box,
.case-study-challenge-box{
	margin-top: 60px;
}

.case-study-approach-list{
	margin-top: 40px;
}

.case-study-approach-list ul li{
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 15px 15px 15px 45px;
}

.case-study-approach-list ul li::before{
	left: 15px;
	top: 15px;
}

.case-study-results-body{
	background: var(--white-color);
	border-radius: 20px;
	margin-top: 40px;
	padding: 40px;
}

.case-study-result-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.case-study-result-item{
	width: calc(33.33% - 20px);
}

.case-study-result-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
}

.case-study-result-item .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.case-study-result-item:hover .icon-box:before{
	transform: scale(1);
}

.case-study-result-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.case-study-result-list{
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.case-study-result-list ul{
	gap: 20px;
}

.case-study-result-list ul li{
	width: calc(33.33% - 13.33px);
}

.case-study-challenge-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.case-study-challenge-item{
	position: relative;
	width: calc(50% - 15px);
	min-height: 325px;
	align-content: end;
	border-radius: 20px;
	padding: 30px;
	overflow: hidden;
}

.case-study-challenge-image{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.case-study-challenge-image::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, transparent 48.45%, rgba(34, 34, 34, 0.80) 100%);
	width: 100%;
	height: 100%;
}

.case-study-challenge-image figure{
	display: block;
	height: 100%;
}

.case-study-challenge-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-study-challenge-item-content{
	position: relative;
	z-index: 1;
}

.case-study-challenge-item-content h3,
.case-study-challenge-item-content p{
	color: var(--white-color);
}

/************************************/
/***      24. Team Page css       ***/
/************************************/

.page-team{
	padding: 120px 0 90px;
}

/************************************/
/***     25. Team Single css      ***/
/************************************/

.page-team-single{
	padding: 120px 0;
}

.page-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 15px;
}

.team-single-image{
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 60px;
}

.team-single-image figure{
	position: relative;
	display: block;
}

.team-single-image img{
	width: 100%;
	aspect-ratio: 1 / 1.2;
	object-fit: cover;
}

.member-social-list{
	position: absolute;
	bottom: 30px;
	left: 30px;
	right: 30px;
	z-index: 1;
}

.member-social-list ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.member-social-list ul li a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background: var(--white-color);
	border-radius: 50%;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.member-social-list ul li:hover a{
	background: var(--accent-secondary-color);
	color: var(--white-color);
}

.member-social-list ul li i{
	font-size: 18px;
	color: inherit;
}

.team-member-about,
.team-member-expertise,
.team-member-experience{
	margin-bottom: 60px;
}

.team-contact-list-box{
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 50px;
}

.team-contact-list-box-title{
	margin-bottom: 40px;
}

.team-contact-list-box-title h3{
	font-size: 30px;
}

.team-contact-list-item{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.team-contact-list-item:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.team-contact-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.team-contact-item .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--accent-color);
    border-radius: 100px;
    overflow: hidden;
}

.team-contact-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-secondary-color);
	border-radius: 100px;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.team-contact-item:hover .icon-box::before{
	transform: scale(1);
}

.team-contact-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.team-contact-item-content{
	width: calc(100% - 65px);
}

.team-contact-item-content h3{
	font-size: 20px;
}

.team-contact-item-content p{
	margin: 5px 0 0;
}

.member-skill-list .skill-data .skill-title,
.member-skill-list .skill-data .skill-no{
	font-size: 18px;
}

.member-skill-list .skill-progress{
	height: 14px;
}

.member-skill-list .skill-progress .count-bar{
	background-color: var(--accent-color);
}

.member-experience-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.member-experience-item{
	width: calc(50% - 15px);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 30px;
}

.member-experience-item h3{
	font-size: 20px;
}

.member-experience-item p{
	margin: 10px 0 0;
}

/************************************/
/***     26. Pricing Page css     ***/
/************************************/

.page-pricing{
	padding: 120px 0;
}

/************************************/
/***   27. Testimonials Page css  ***/
/************************************/

.page-testimonials{
	padding: 120px 0 90px;
}

.page-testimonials .testimonial-item{
	background: var(--white-color);
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

/************************************/
/***     28. Image Gallery css    ***/
/************************************/

.page-gallery{
	padding: 120px 0 90px;
}

.page-gallery-box .photo-gallery{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
	cursor: none;
}

.page-gallery-box .photo-gallery figure{
	display: block;
	border-radius: 20px;
}

.page-gallery-box .photo-gallery img{
	width: 100%;
	aspect-ratio: 1 / 0.87;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***    29. Video Gallery css     ***/
/************************************/

.page-video-gallery{
	padding: 120px 0 90px;
}

.video-gallery-image{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.video-gallery-image a{
	position: relative;
	display: block;
	cursor: none;
}

.video-gallery-image a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
	border-radius: 20px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before{
    opacity: 50%;
    visibility: visible;
    transform: scale(1);
}

.video-gallery-image a::after{
    content: '\f04b';
	font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
	font-size: 20px;
	background: var(--accent-secondary-color);
	color: var(--white-color);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    cursor: none;
	display: flex;
	align-items: center;
	justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.video-gallery-image:hover a::after{
    opacity: 1;
    visibility: visible;
}

.video-gallery-image img{
	width: 100%;
	aspect-ratio: 1 / 0.87;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***      30. FAQ's Page css      ***/
/************************************/

.page-faqs{
	padding: 120px 0;
}

.page-faqs .page-single-faqs{
    margin-bottom: 60px;
}

.page-faqs .page-single-faqs:last-child{
    margin-bottom: 0px;
}

/************************************/
/***   31. Contact Us Page css    ***/
/************************************/

.page-contact-us{
	padding: 120px 0 60px;
}

.contact-us-content{
	margin-right: 15px;
}

.contact-info-list-title{
	margin-bottom: 50px;
}

.contact-info-list-title h3{
	font-size: 30px;
}

.contact-info-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.contact-info-item:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.contact-info-item .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.contact-info-item .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.contact-info-item:hover .icon-box::before{
	transform: scale(1);
}

.contact-info-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.contact-info-item-content{
	width: calc(100% - 65px);
}

.contact-info-item-content h3{
	font-size: 20px;
}

.contact-info-item-content p{
	line-height: normal;
	margin: 5px 0 0;
}

.contact-info-item-content p a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.contact-info-item-content p a:hover{
	color: var(--primary-color);
}

.contact-us-form{
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 50px;
}

.contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--primary-color);
	background: var(--bg-color);
	border: none;
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: none;
	outline: none;
}

.contact-form .form-control::placeholder{
	color: var(--text-color);
}

.google-map{
	padding: 60px 0 120px;
}

.google-map-iframe{
	width: 100%;
    height: 600px;
}

.google-map-iframe iframe{
	width: 100%;
    height: 100%;
	filter: grayscale(100%);
    border-radius: 20px;
	transition: all 0.4s ease-in-out;
}

.google-map-iframe iframe:hover{
	filter: grayscale(0%);
}

/************************************/
/***   32. Book Appointment css   ***/
/************************************/

.page-book-appointment{
	padding: 120px 0;
}

.book-appointment-content{
	margin-right: 15px;
}

.working-hour-box{
	max-width: 550px;
}

.working-hour-box h3{
	font-size: 30px;
	margin-bottom: 50px;
}

.working-hour-box ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.working-hour-box ul li{
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	line-height: 1.5em;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 25px;
	padding-bottom: 25px;
}

.working-hour-box ul li:last-child{
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.working-hour-box ul li span{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
}

.page-book-appointment .book-appointment-form-box{
	background-color: var(--white-color);
	max-width: 100%;
}

.book-appointment-form-content{
	margin-bottom: 40px;
}

.book-appointment-form-content p{
	margin: 0;
}

.page-book-appointment .book-appointment-form .form-control{
	background-color: var(--bg-color);
	color: var(--primary-color);
}

.page-book-appointment .book-appointment-form .form-control::placeholder{
	color: var(--text-color);
}

/************************************/
/***    33. 404 Error Page css    ***/
/************************************/

.error-page{
	padding: 120px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 660px;
}

.error-page-content{
	text-align: center;
}

.error-page-content .section-title{
	margin-bottom: 15px;
}

/************************************/
/***      34. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1850px){
	
	.bg-section{
		width: calc(100% - 30px);
	}
}

@media only screen and (max-width: 1024px){

	.main-menu ul li{
		margin: 0;
	}

	.section-content-btn .section-btn{
		margin-top: 20px;
	}
	
	.section-title-content{
        margin-top: 10px;
    }

	.section-btn{
        text-align: left;
        margin-top: 15px;
	}

	.hero{
        height: auto;
    }

	.hero-content{
		margin-bottom: 30px;
	}

	.hero-info-box{
		margin-left: 0;
		min-height: auto;
		padding: 20px;
	}

	.about-us-image-box{
		max-width: 740px;
		margin: 0 auto 30px;
	}

	.about-us-image-box-2 .about-us-image img{
		aspect-ratio: 1 / 1.8;
	}

	.service-item{
		gap: 30px;
		padding: 30px;
		min-height: 350px;
	}

	.service-item-btn{
		margin-top: 30px;
		padding-top: 30px;
	}

	.expertise-content{
		margin-bottom: 30px;
	}

	.expertise-image-box{
		max-width: 740px;
		margin: 0 auto;
	}

	.why-choose-cta-item{
		padding: 30px;
	}

	.why-choose-cta-body{
		gap: 30px;
	}

	.why-choose-cta-btn{
		margin-top: 30px;
	}

	.why-choose-slider-box{
		margin-top: 10px;
	}

	.why-choose-slider-content{
		margin-bottom: 30px;
	}

	.case-study-item{
		min-height: 420px;
		padding: 30px;
	}

	.how-work-content{
		margin-bottom: 30px;
	}

	.how-it-work-image{
		margin: 0;
		height: auto;
	}

	.how-it-work-image figure,
	.how-it-work-image img{
		height: auto;
	}

	.how-work-item-list{
		gap: 40px;
		margin-top: 60px;
	}

	.how-work-item{
		width: calc(50% - 20px);
	}

	.how-work-item:before{
		right: -20px;
	}

	.how-work-item:nth-child(3n + 3):before{
		display: block;
	}

	.how-work-item:nth-child(2n + 2):before,
	.how-work-item:last-child:before{
		display: none;
	}

	.how-work-item-body{
		margin-top: 20px;
	}

	.pricing-item-content,
	.pricing-item-list{
		padding: 20px;
	}

	.pricing-item-body{
		padding: 30px;
	}

	.pricing-item-list h3{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.testimonial-item{
		padding: 30px;
	}

	.faqs-content{
		position: initial;
		margin: 0 0 30px;
	}

	.faqs-content-btn{
		margin-top: 30px;
	}

	.book-appointment-form-box{
		padding: 30px;
	}

	.post-item{
		padding: 30px;
	}

	.footer-header{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.about-footer{
		padding: 30px;
		margin-bottom: 30px;
	}

	.about-footer-content{
		margin-top: 15px;
	}

	.footer-social-links{
		margin-top: 20px;
	}

	.footer-links-box{
		margin: 0;
	}

	.footer-copyright-text{
		margin-top: 30px;
		padding: 30px 0;
	}

	.approach-content-box,
	.approach-item-list{
		padding: 30px;
	}

	.approach-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.benefits-item{
		padding: 30px;
		min-height: auto;
	}

	.benefits-item .icon-box{
		margin-bottom: 30px;
	}

	.intro-video-body{
		padding: 120px 0;
	}

	.intro-video-content{
		margin-top: 50px;
	}

	.intro-video-contact-title{
		max-width: 34%;
	}

	.intro-video-contact-list{
		max-width: 63%;
	}

	.page-single-sidebar{
		margin: 0;
	}

	.page-category-list .page-category-list-title{
		padding: 15px 20px;
	}

	.page-category-list ul{
		padding: 20px;
	}

	.page-category-list ul li{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.sidebar-cta-contact-item-list{
		padding: 15px;
	}

	.sidebar-cta-contact-item{
		gap: 10px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.sidebar-cta-contact-item .icon-box{
		width: 40px;
		height: 40px;
	}

	.sidebar-cta-contact-item .icon-box img{
		max-width: 20px;
	}
	
	.sidebar-cta-contact-item-content{
		width: calc(100% - 50px);
	}

	.sidebar-cta-contact-item-content h2{
		font-size: 18px;
	}

	.page-single-image{
		margin-bottom: 30px;
	}

	.service-entry{
		margin-bottom: 40px;
	}

	.service-entry ul{
		margin-top: 30px;
	}

	.service-entry-info-box,
	.service-focus-box,
	.service-process-box{
		margin-top: 40px;
	}

	.service-benefit-box{
		margin-top: 30px;
	}

	.service-focus-item-list{
		margin-top: 30px;
	}

	.service-process-body-box{
		gap: 30px;
		margin-top: 30px;
	}

	.service-process-item-list{
		width: calc(54% - 15px);
	}

	.service-process-item{
		margin-bottom: 30px;
	}

	.service-process-video-image{
		width: calc(46% - 15px);
	}

	.case-study-approach-box,
	.case-study-results-box,
	.case-study-challenge-box{
		margin-top: 40px;
	}

	.case-study-approach-list{
		margin-top: 30px;
	}
	
	.case-study-entry ul{
		gap: 15px;
	}

	.case-study-approach-list ul li{
		width: calc(50% - 7.5px);
		padding: 10px 10px 10px 33px;
	}
	
	.case-study-approach-list ul li::before{
		left: 10px;
		top: 10px;
	}
	
	.case-study-results-body{
		margin-top: 30px;
		padding: 30px;
	}

	.case-study-result-item-content h3{
		font-size: 18px;
	}
	
	.case-study-result-list{
		margin-top: 30px;
		padding-top: 30px;
	}

	.case-study-result-list ul li{
		width: calc(50% - 7.5px);
	}

	.case-study-challenge-item-list{
		margin-top: 30px;
	}

	.team-member-about,
	.team-member-expertise,
	.team-member-experience{
		margin-bottom: 40px;
	}

	.team-contact-list-box{
		padding: 30px;
	}

	.team-contact-list-box-title{
		margin-bottom: 30px;
	}

	.team-contact-list-box-title h3{
		font-size: 26px;
	}

	.team-contact-list-item{
		gap: 30px 20px;
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.team-contact-item{
		width: calc(50% - 10px);
	}

	.member-experience-item-list{
		gap: 20px;
	}

	.member-experience-item{
		width: calc(50% - 10px);
		padding: 20px;
	}

	.contact-us-content{
		margin: 0 0 30px;
	}

	.contact-info-list-title{
		margin-bottom: 30px;
	}

	.contact-us-form{
		padding: 30px;
	}

	.book-appointment-content{
		margin: 0 0 30px;
	}

	.working-hour-box h3{
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 991px){

	.bg-section{
		border-radius: 0;
	}

	.btn-default{
        padding: 15px 50px 15px 15px;
    }

	.btn-default::before{
		width: 36px;
		height: 36px;
		background-size: 12px auto;
	}

	header.main-header{
		top: 0px;
		right: 0px;
		left: 0px;
	}

	header.main-header .header-sticky{
		width: 100%;
		border-radius: 0;
	}

	header.main-header .header-sticky.active{
        width: 100%;
        top: 0;
		left: 0;
		right: 0;
		border-right: none;
		border-left: none;
		border-radius: 0;
	}

	.navbar{
		padding: 20px 0;
	}

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.header-btn{
		display: none;
	}

	.bg-section{
		width: 100%;
		border-radius: 0;
		margin: 0;
	}

	.bg-section .container-fluid{
		padding: 0 15px;
	}

	.section-row{
		margin-bottom: 40px;
	}
	
	.section-title{
		margin-bottom: 30px;
	}

	.section-title .section-sub-title{
		padding: 7px 12px 7px 27px;
		margin-bottom: 10px;
	}

	.section-title .section-sub-title::before{
		left: 12px;
	}

	.section-title h1{
		font-size: 44px;
	}

	.section-title h2{
		font-size: 38px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.hero{
		padding: 150px 0 60px;
		margin: 0;
		border-radius: 0;
	}

	.hero-content-body{
		gap: 20px;
	}

	.hero-client-content h2{
		font-size: 18px;
	}

	.about-us{
		padding: 60px 0;
	}

	.about-us-body,
	.about-us-btn{
		margin-top: 30px;
	}

	.about-us-body-item{
		padding: 20px;
	}

	.our-services{
		padding: 60px 0;
		background-size: 100% auto;
	}

	.service-item-header .icon-box{
		height: 50px;
		width: 50px;
	}

	.service-item-header .icon-box img{
		max-width: 24px;
	}

	.service-item-title{
		width: calc(100% - 65px);
	}

	.section-footer-text{
		margin-top: 10px;
	}

	.our-expertise{
		padding: 60px 0;
	}

	.expertise-body{
		padding-top: 30px;
	}

	.skillbar .skill-data{
		margin-bottom: 15px;
	}

	.expertise-btn{
		margin-top: 30px;
	}

	.experience-circle{
		transform: translate(-55px, 55px);
	}

	.experience-circle img{
		max-width: 110px;
	}

	.why-choose-us{
		padding: 60px 0;
	}

	.why-choose-item{
		min-height: 350px;
		padding: 15px;
	}

	.why-choose-item-content{
		padding: 20px;
	}

	.why-choose-content-image img{
		max-width: 200px;
	}

	.why-choose-cta-body .icon-box img{
		max-width: 50px;
	}

	.why-choose-cta-content h2{
		font-size: 22px;
	}

	.our-case-study{
		padding: 60px 0;
	}

	.how-it-work{
		padding: 60px 0;
	}

	.how-work-item-header .icon-box{
		width: 50px;
		height: 50px;
	}

	.how-work-item-header .icon-box img{
		max-width: 24px;
	}

	.how-work-item-title{
		width: calc(100% - 65px);
	}

	.how-work-item-title p{
		margin-bottom: 5px;
	}

	.our-pricing{
		padding: 60px 0;
	}

	.pricing-item-price h2{
		font-size: 34px;
	}

	.pricing-item-btn .btn-default{
		padding: 15px;
	}

	.pricing-item-list ul li{
		margin-bottom: 10px;
	}

	.pricing-item-list ul li::before{
		font-size: 16px;
	}

	.pricing-benefit-list{
		margin-top: 10px;
	}

	.pricing-benefit-list ul{
		gap: 15px 30px;
	}

	.pricing-benefit-list ul li img{
		max-width: 18px;
	}

	.our-testimonials{
		padding: 60px 0;
	}

	.testimonials-review-header-content h2{
		font-size: 22px;
    	min-width: 60px;
	}

	.google-rating-star i{
		font-size: 16px;
	}

	.our-testimonials .section-footer-text{
		margin-top: 40px;
	}

	.our-faqs{
		padding: 60px 0;
	}

	.faqs-content-list ul li{
		margin-bottom: 10px;
	}

	.faqs-content-list ul li:before{
		font-size: 16px;
	}

	.faq-accordion .accordion-item{
		margin-bottom: 20px;
	}

	.faq-accordion .accordion-header .accordion-button{
		padding: 18px 44px 18px 20px;
	}
	
	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		right: 20px;
		font-size: 18px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 18px 20px;
	}

	.our-book-appointment{
		padding: 60px 0;
	}

	.book-appointment-image{
		position: initial;
		height: auto;
		margin-bottom: 30px;
	}

	.book-appointment-image figure,
	.book-appointment-image img{
		height: auto;
	}

	.book-appointment-image img{
		aspect-ratio: 1 / 0.667;
	}

	.book-appointment-form-box{
		max-width: 100%;
	}

	.book-appointment-form .form-control{
		padding: 13px 15px;
	}

	.book-appointment-form select.form-control{
		padding: 13px 30px 13px 15px;
	}

	.appointment-form-btn{
		margin-top: 0;
	}

	.appointment-form-btn .btn-default{
		padding: 15px;
	}

	.our-blog{
		padding: 60px 0 30px;
	}

	.post-item{
		min-height: 380px;
	}

	.post-item .post-item-btn{
		margin-top: 20px;
		padding-top: 20px;
	}

	.main-footer{
		padding: 60px 0 0;
	}

	.footer-newsletter-form{
		max-width: 100%;
	}

	.footer-newsletter-form .form-group{
		padding: 5px;
	}

	.footer-links h2{
		margin-bottom: 20px;
	}

	.footer-links ul li{
		margin-bottom: 10px;
	}

	.page-header{
		border-radius: 0;
		padding: 170px 0 80px;
		margin: 0;
    }

    .page-header-box h1{
		font-size: 44px;
	}

	.our-approach{
    	padding: 60px 0 0;
		margin-bottom: 150px;
	}

	.approach-content-box{
		padding: 0;
	}

	.approach-image{
		position: initial;
		height: auto;
	}

	.approach-image figure,
	.approach-image img{
		height: auto;
	}

	.approach-image img{
		aspect-ratio: 1 / 0.43;
	}

	.approach-item-list{
		max-width: 100%;
	}

	.approach-content-box{
		margin-bottom: -150px;
	}

	.our-benefit{
		padding: 60px 0;
	}

	.benefit-item-list ul li{
		margin-bottom: 10px;
	}

	.benefit-item-list ul li:before{
		font-size: 16px;
	}

	.video-play-button a{
		height: 65px;
		width: 65px;
	}

	.video-play-button a i{
		font-size: 24px;
	}

	.intro-video-contact-box{
		padding: 20px 0;
	}

	.intro-video-contact-list,
	.intro-video-contact-title{
		max-width: 100%;
	}

	.intro-video-contact-title h2{
		font-size: 26px;
	}

	.our-team{
		padding: 60px 0;
	}

	.team-item{
		min-height: 440px;
	}

	.page-services{
		padding: 60px 0 30px;
	}

	.page-service-single{
		padding: 60px 0;
	}

	.page-single-sidebar{
		position: initial;
		margin-bottom: 30px;
	}

	.page-category-list{
		margin-bottom: 30px;
	}

	.service-entry p{
		margin-bottom: 15px;
	}

	.service-entry h2{
		font-size: 38px;
		margin-bottom: 15px;
	}

	.service-entry ul li::before{
		font-size: 16px;
	}

	.service-benefit-box h3{
		font-size: 26px;
	}
	
	.service-focus-content-box{
		padding: 20px;
	}

	.service-focus-item-header{
		margin-bottom: 20px;
	}

	.service-process-item{
		gap: 15px;
	}

	.service-process-item-no{
		width: 50px;
		height: 50px;
	}

	.service-process-item-no span{
		font-size: 20px;
	}

	.service-process-item-content{
		width: calc(100% - 65px);
	}

	.page-blog{
		padding: 60px 0;
	}

	.page-pagination{
		margin-top: 10px;
	}

	.page-single-post{
        padding: 60px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }
    
    .post-entry h2{
        font-size: 38px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }
    
    .post-entry ol li,
    .post-entry ul li{
		font-size: 16px;
        margin-bottom: 10px;
    }
    
    .post-entry blockquote{
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 20px;
    }
    
    .post-entry blockquote p{
        font-size: 18px;
    }
    
    .post-tags{
        margin-bottom: 20px;
    }
    
    .post-tags .tag-links a{
        padding: 12px 15px;
    }
    
    .post-social-sharing ul{
        text-align: left;
    }

	.page-case-study{
		padding: 60px 0 30px;
	}

	.page-case-study-single{
		padding: 60px 0;
	}

	.case-study-entry p{
		margin-bottom: 15px;
	}

	.case-study-entry h2{
		font-size: 38px;
		margin-bottom: 15px;
	}

	.case-study-entry ul li::before{
		font-size: 16px;
	}

	.case-study-challenge-item{
		padding: 20px;
	}

	.case-study-result-item .icon-box{
		margin-bottom: 20px;
	}

	.page-team{
		padding: 60px 0 30px;
	}

	.page-team-single{
		padding: 60px 0;
	}

	.team-single-image img{
		aspect-ratio: 1 / 0.8;
	}

	.page-pricing{
		padding: 60px 0;
	}

	.page-testimonials{
		padding: 60px 0 30px;
	}

	.page-gallery{
		padding: 60px 0 30px;
	}

	.page-video-gallery{
		padding: 60px 0 30px;
	}

	.page-faqs{
		padding: 60px 0;
	}

	.page-faqs .page-single-faqs{
		margin-bottom: 40px;
	}

	.page-contact-us{
		padding: 60px 0 30px;
	}

	.contact-info-list-title h3{
		font-size: 26px;
	}

	.contact-form .form-control{
		padding: 13px 15px;
	}

	.google-map{
		padding: 30px 0 60px;
	}

	.google-map-iframe{
		height: 450px;
	}

	.page-book-appointment{
		padding: 60px 0;
	}

	.working-hour-box h3{
		font-size: 26px;
	}

	.working-hour-box ul li{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.working-hour-box ul li span{
        font-size: 18px;
    }

	.error-page{
		padding: 60px 0px;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 767px){

	.section-row{
		margin-bottom: 30px;
	}

	.section-title h1{
		font-size: 28px;
	}

	.section-title h2{
		font-size: 26px;
	}

	.hero-client-content h2{
		font-size: 16px;
	}

	.hero-info-box{
		max-width: 100%;
		gap: 20px;
	}

	.hero-info-box-rating{
		margin-top: 20px;
		padding-top: 20px;
	}

	.hero-info-box-rating h2{
		font-size: 18px;
	}

	.about-us-image-box{
		gap: 15px;
	}

	.about-us-image-box-1{
		width: calc(44% - 7.5px);
	}

	.happy-customer-review-box{
		padding: 0 15px 15px 0;
		margin-right: -55px;
	}

	.happy-customer-review-box::after{
		right: 20px;
		bottom: -20px;
	}
	
	.happy-customer-review-item{
		padding: 15px;
	}

	.happy-customer-review-item .hero-info-rating-star i{
		font-size: 16px;
	}

	.happy-customer-review-content{
		margin-top: 10px;
		padding-top: 10px;
	}

	.happy-customer-review-content p{
		font-size: 14px;
	}

	.happy-customer-review-item .satisfy-client-images{
		margin-top: 10px;
	}

	.about-us-image-box-2{
		width: calc(56% - 7.5px);
	}

	.about-us-item-list{
		gap: 20px;
	}

	.about-us-item{
		width: 100%;
	}

	.about-us-item-content h3{
		font-size: 18px;
	}

	.about-us-body-item{
		padding: 15px;
	}
	
	.service-item{
        gap: 20px;
        padding: 20px;
        min-height: auto;
    }

	.service-item-title h2{
		font-size: 18px;
	}

	.service-item-btn{
        margin-top: 20px;
        padding-top: 20px;
    }

	.skillbar .skill-data{
        margin-bottom: 10px;
    }

	.expertise-image-box-1{
		padding-bottom: 50px;
	}

	.expertise-image-box-1 figure{
		margin-right: -150px;
	}

	.experience-circle{
        transform: translate(-45px, 45px);
    }

	.experience-circle img{
        max-width: 90px;
    }

	.why-choose-item-content{
		padding: 15px;
	}

	.why-choose-image img{
		aspect-ratio: 1 / 0.9;
	}
	
	.why-choose-cta-item{
		padding: 20px;
	}

	.why-choose-cta-content h2{
        font-size: 20px;
    }

	.why-choose-slider-content{
		gap: 10px;
		margin-bottom: 20px;
	}

	.why-choose-logo img{
		max-width: 145px;
		height: 35px;
	}

	.case-study-item{
        min-height: 360px;
        padding: 20px;
    }

	.case-study-item-contant ul{
		margin-bottom: 10px;
	}

	.case-study-item-contant ul li a{
		padding: 6px 12px;
	}

	.case-study-item-contant h2{
		font-size: 18px;
	}
	
	.how-work-item-list{
        margin-top: 30px;
    }

	.how-work-item{
		width: 100%;
	}

	.how-work-item:before{
		top: auto;
		bottom: -20px;
		left: 0;
		right: 0;
		height: 1px;
		width: 100%;
	}

	.how-work-item:nth-child(2n + 2):before{
		display: block;
	}

	.how-work-item:last-child:before{
		display: none;
	}

	.how-work-item-title h3{
		font-size: 18px;
	}

	.pricing-item-content,
	.pricing-item-list{
        padding: 10px;
    }

	.pricing-item-content h2{
		font-size: 18px;
	}

	.pricing-item-body{
        padding: 20px;
    }

	.pricing-item-price h2{
        font-size: 28px;
    }

	.pricing-item-price p{
		margin-top: 5px;
	}

	.pricing-item-btn{
		margin-top: 20px;
	}

	.pricing-item-list h3{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.pricing-benefit-list{
		margin-top: 5px;
	}

	.pricing-benefit-list ul{
		gap: 10px 20px;
	}

	.pricing-benefit-list ul li{
		font-size: 14px;
	}

	.pricing-benefit-list ul li img{
		max-width: 16px;
		margin-right: 5px;
	}

	.testimonials-image-box{
		margin-bottom: 30px;
	}

	.testimonials-image-box,
	.testimonials-image,
	.testimonials-image figure{
		height: auto;
	}

	.testimonials-image img{
		height: auto;
        aspect-ratio: 1 / 1.05;
    }

	.testimonials-review-box{
		max-width: 235px;
	}

	.testimonials-review-box-header .icon-box img{
		max-width: 30px;
	}

	.testimonials-review-header-content h2{
        font-size: 18px;
        min-width: 50px;
    }

	.testimonials-review-body{
		margin-top: 10px;
	}

	.testimonial-item{
		height: auto;
        min-height: auto;
		gap: 20px;
        padding: 20px;
    }

	.testimonial-item-author{
		padding-top: 20px;
	}

	.testimonial-item-author-content h2{
		font-size: 18px;
	}

	.faq-accordion .accordion-header .accordion-button{
        padding: 12px 35px 12px 15px;
		font-size: 16px;
    }

	.faq-accordion .accordion-item .accordion-body{
        padding: 12px 15px;
    }

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		font-size: 16px;
        right: 15px;
    }
	
	.book-appointment-form-box{
        padding: 30px 20px;
    }

	.post-item{
		padding: 20px;
	}
	 
	.post-item .post-item-btn{
        margin-top: 15px;
        padding-top: 15px;
    }

	.post-item .post-item-content h2{
		font-size: 18px;
	}

	.about-footer{
		padding: 20px;
	}

	.footer-links{
		max-width: 100%;
	}

	.footer-service-links{
		order: 3;
	}

	.footer-support-links{
		order: 2;
	}

	.footer-links h2{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.footer-copyright-text{
		padding: 15px 0;
	}

	.page-header-box h1{
		font-size: 28px;
	}

	.approach-image img{
        aspect-ratio: 1 / 0.6;
    }

	.approach-item-list{
		padding: 20px;
	}

	.approach-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.approach-item-content{
		width: 100%;
	}

	.approach-item-content h3{
		font-size: 18px;
	}

	.benefits-item{
		gap: 20px;
        padding: 20px;
    }

	.benefits-item .icon-box{
        margin-bottom: 20px;
    }

	.benefit-item-content h2{
		font-size: 18px;
	}

	.benefit-item-list{
		padding-top: 20px;
	}

	.intro-video-body{
		padding: 80px 0 60px;
    }

	.intro-video-content{
        margin-top: 30px;
    }

	.intro-video-contact-list{
		gap: 20px;
	}

	.intro-video-contact-title h2{
        font-size: 22px;
    }

	.intro-video-contact-item{
		width: 100%;
	}

	.intro-video-contact-item::before{
		display: none;
	}

	.intro-video-contact-content h3{
		font-size: 18px;
	}

	.team-item{
        min-height: 390px;
        padding: 20px;
    }

	.team-item-content h2{
		font-size: 18px;
	}

	.team-item:hover .team-social-list{
		margin-bottom: 20px;
	}

	.page-category-list .page-category-list-title{
		font-size: 18px;
	}

	.sidebar-cta-box{
		min-height: 380px;
	}

	.sidebar-cta-contact-item{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.sidebar-cta-contact-item-content h2{
        font-size: 16px;
    }

	.page-single-image img{
        aspect-ratio: 1 / 0.68;
    }

	.page-single-image{
        margin-bottom: 20px;
    }

	.service-entry h2{
		font-size: 26px;
	}

	.service-entry h3{
		font-size: 18px;
	}

	.service-entry ul{
		gap: 10px;
		margin-top: 20px;
	}

	.service-entry ul li{
		width: 100%;
	}

	.service-benefit-box h3{
        font-size: 22px;
    }

	.service-focus-item{
		gap: 20px;
	}

	.service-focus-image,
	.service-focus-content-box{
		width: 100%;
	}

	.service-process-item-list,
	.service-process-video-image{
		width: 100%;
	}

	.service-process-item{
		margin-bottom: 20px;
	}

	.service-process-video-image figure,
	.service-process-video-image figure img{
		height: auto;
	}

	.post-single-meta ol li,
	.post-single-meta ol li i{
		font-size: 16px;
	}

	.post-image img{
		aspect-ratio: 1 / 0.7;
	}

	.post-entry blockquote{
		padding: 65px 20px 20px 20px;
	}

	.post-entry blockquote p{
		font-size: 16px;
	}

	.post-entry h2{
		font-size: 26px;
	}
	
	.tag-links{
		font-size: 18px;
	}

	.case-study-entry h2{
        font-size: 26px;
    }

	.case-study-entry h3{
		font-size: 18px;
	}

	.case-study-entry ul{
		gap: 10px;
	}

	.case-study-entry ul li{
		width: 100%;
	}

	.case-study-approach-list ul{
		gap: 15px;
	}

	.case-study-results-body{
		padding: 20px;
	}

	.case-study-result-item{
		width: 100%;
	}

	.case-study-result-list{
        margin-top: 20px;
        padding-top: 20px;
    }

	.case-study-challenge-item{
		width: 100%;
	}

	.team-single-image img{
        aspect-ratio: 1 / 1.1;
    }

	.team-contact-list-box{
        padding: 20px;
    }

	.team-contact-list-box-title{
		margin-bottom: 20px;
	}

	.team-contact-list-box-title h3{
        font-size: 22px;
    }

	.team-contact-list-item{
		gap: 20px;
	}

	.team-contact-item{
		width: 100%;
	}

	.team-contact-item-content h3{
		font-size: 18px;
	}

	.member-skill-list .skill-progress{
		height: 10px;
	}

	.member-experience-item{
        width: 100%;
		padding: 15px;
    }

	.member-experience-item h3{
		font-size: 18px;
	}

	.contact-info-list-title{
        margin-bottom: 20px;
    }

	.contact-info-list-title h3{
        font-size: 22px;
    }

	.contact-info-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.contact-info-item-content h3{
		font-size: 18px;
	}

	.contact-us-form{
        padding: 20px;
    }

	.google-map-iframe{
		height: 350px;
	}

	.working-hour-box h3{
        font-size: 22px;
        margin-bottom: 20px;
    }

	.working-hour-box ul li{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.working-hour-box ul li span{
		font-size: 16px;
	}
}

/************************************/
/***   35. Home - Version 2 css   ***/
/************************************/

header.main-header.main-header-gold .header-sticky{
	border-bottom: none;
}

header.main-header.main-header-gold .main-menu .nav-menu-wrapper > ul{
	background: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
	border-radius: 5px;
	padding: 0px 15px;
}

header.main-header.main-header-gold .main-menu .nav-menu-wrapper > ul > li > a{
	padding: 20px 10px !important;
}

header.main-header.main-header-gold .main-menu ul ul{
	border-radius: 0 0 20px 20px;
}

.hero-gold{
    position: relative;
    align-content: center;
	border-radius: 20px;
	margin: 15px 15px 0;
    overflow: hidden;
}

.hero-gold::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(270deg, transparent 26.4%, rgba(39, 69, 67, 0.85) 62.54%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-gold.hero-video-gold .hero-bg-video-gold{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero-gold.hero-video-gold .hero-bg-video-gold video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-gold .container{
    position: relative;
    z-index: 2;
}

.hero-box-gold{
	min-height: 910px;
 	align-content: center;    
	padding: 240px 0 120px;
}

.hero-info-box-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.hero-item-list-gold{
	width: calc(50% - 15px);
}

.hero-item-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.hero-item-gold:last-child{
	margin-bottom: 0;
}

.hero-item-gold .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.hero-item-gold .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.hero-item-gold:hover .icon-box::before{
    transform: scale(1);
}

.hero-item-gold .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.hero-item-gold:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.hero-item-content-gold{
	width: calc(100% - 65px);
}

.hero-item-content-gold h2{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

.hero-info-list-gold{
	width: calc(50% - 15px);
	border-left: 1px solid var(--dark-divider-color);
	padding-left: 30px;
}

.hero-info-list-gold ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.hero-info-list-gold ul li{
	position: relative;
	color: var(--white-color);
	font-weight: 500;
    line-height: 1.5em;
    margin-bottom: 15px;
    padding-left: 25px;
}

.hero-info-list-gold ul li:last-child{
	margin-bottom: 0;
}

.hero-info-list-gold ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-secondary-color);
    top: 0;
    left: 0;
}

.hero-btn-gold{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.our-scrolling-ticker-gold{
	position: relative;
	background: var(--divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 30px 0;
	z-index: 1;
}

.scrolling-ticker-box-gold{
	--gap: 30px;
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
}

.scrolling-content-gold{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 80s linear infinite;
}

.scrolling-content-gold span{
	display: inline-flex;
	align-items: center;
	gap: var(--gap);
	font-family: var(--accent-font);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1em;
	color: var(--white-color);
	text-transform: capitalize;
}

.scrolling-content-gold span img{
	width: 100%;
	max-width: 30px;
	animation: infiniterotate 30s infinite linear;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.about-us-gold{
	padding: 120px 0;
}

.about-us-image-box-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	margin-right: 15px;
	
}

.about-us-image-box-1-gold{
	position: relative;
    width: 65%;
	padding: 80px 0 30px 0;
	background-image: url('../images/about-us-bg-image-gold.png');
    background-position: top left 70px;
    background-repeat: no-repeat;
    background-size: auto;
}

.about-us-image-1-gold{
	position: relative;
	padding: 6px 6px 0 0;
    background: var(--secondary-color);
    clip-path: polygon(0 0, 75% 0, 100% 20%, 100% 100%, 0 100%);
    border-radius: 20px;
    margin-left: auto;
	z-index: 2;
}

.about-us-image-1-gold figure{
	display: block;
	clip-path: polygon(0 0, 75% 0, 100% 20%, 100% 100%, 0 100%);
}

.about-us-image-1-gold figure img{
	width: 100%;
	aspect-ratio: 1 / 1.121;
    object-fit: cover;
    border-radius: 10px;
}

.about-us-image-box-2-gold{
	width: 35%;
}

.about-us-image-2-gold{
	margin-left: -230px;
}

.about-us-image-2-gold figure{
	display: block;
	border-radius: 20px;
}

.about-us-image-2-gold figure img{
	width: 100%;
	aspect-ratio: 1 / 1.246;
	object-fit: cover;
    border-radius: 20px;
}

.about-us-counter-box-gold{
	background: var(--accent-color);
    border-radius: 20px;
    margin: 20px 0 0 10px;
    padding: 80px 20px 20px;
}

.about-us-counter-box-gold h2{
	font-size: 34px;
	color: var(--white-color);
}

.about-us-counter-box-gold p{
	font-size: 20px;
    font-weight: 600;
    color: var(--white-color);
    margin: 5px 0 0;
}

.about-us-body-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.about-us-item-gold{
	width: calc(68% - 15px);
	background: var(--white-color);
    border-radius: 20px;
    padding: 30px;
}

.about-us-item-header-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.about-us-item-header-gold .icon-box{
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-us-item-header-gold .icon-box img{
    width: 100%;
    max-width: 24px;
}

.about-us-item-title-gold{
	width: calc(100% - 65px);
}

.about-us-item-title-gold h3{
	font-size: 20px;
}

.about-us-item-content-gold p{
	margin: 0;
}

.about-us-item-content-gold ul{
	list-style: none;
	border-top: 1px solid var(--divider-color);
    margin: 30px 0 0 0;
	padding: 30px 0 0 0;
}	

.about-us-item-content-gold ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 15px;	
}

.about-us-item-content-gold ul li:last-child{
	margin-bottom: 0;
}

.about-us-item-content-gold ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    top: 0;
    left: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}

.experience-circle-gold img{
	width: 100%;
    max-width: 130px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    animation: infiniterotate-gold 20s infinite linear;
}

@keyframes infiniterotate-gold{
	from{
		transform: rotate(0deg);
    }
    to{
		transform: rotate(360deg);
    }
}

.about-us-body-gold .experience-circle-gold{
	width: calc(32% - 15px);
	text-align: center;
}

.about-us-footer-gold{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
    border-top: 1px solid var(--divider-color);
    padding-top: 40px;
    margin-top: 40px;
}

.about-client-box-gold{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.about-client-box-gold .satisfy-client-image.add-more{
	background-color: var(--accent-secondary-color);
}

.about-client-content-gold{
	max-width: 175px;
}

.about-client-content-gold p{
	margin: 0;
}

.our-services-gold{
	background-image: url(../images/our-services-bg-image.png);
    background-position: bottom center;
    background-size: auto;
	padding: 120px 0;
}

.service-item-gold{
	position: relative;
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 20px;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    transition: all 0.5s ease-in-out;
}

.service-item-gold:hover{
	transform: translateY(-5px);
}

.service-item-header-gold .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	margin-bottom: 30px;
}

.service-item-header-gold .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item-gold:hover .service-item-header-gold .icon-box::before{
	transform: scale(1);
}

.service-item-header-gold .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;	
}

.service-item-gold:hover .service-item-header-gold .icon-box img{
	filter: brightness(0) invert(0);
}

.service-item-content-gold h2{
	color: var(--white-color);
	font-size: 20px;
}

.service-item-content-gold h2 a{
	color: inherit;
}

.service-item-content-gold p{
	color: var(--white-color);
	margin: 10px 0 0 0;
}

.service-item-btn-gold{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 30px;
}

.why-choose-us-gold{
	padding: 120px 0;
}

.why-choose-image-box-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	margin-right: 15px;
}

.why-choose-image-box-1-gold{
	position: relative;
    width: 73%;
	padding-bottom: 150px;
}

.why-choose-image-gold figure{
	display: block;
    border-radius: 20px;
}

.why-choose-image-gold figure img{
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.why-choose-image-box-1-gold .why-choose-image-gold figure img{
	aspect-ratio: 1 / 1.36;
}

.why-choose-image-box-gold .experience-circle-gold{
	position: absolute;
    top: 80px;
    right: 0;
    transform: translateX(50%);
	border: 6px solid var(--secondary-color);
	border-radius: 50%;
    z-index: 1;
}

.why-choose-image-box-2-gold{
	width: 27%;
	z-index: 1;
}

.why-choose-image-box-2-gold .why-choose-image-gold{
	margin-left: -220px;
}

.why-choose-image-box-2-gold .why-choose-image-gold figure{
	border: 6px solid var(--secondary-color);
}

.why-choose-image-box-2-gold .why-choose-image-gold figure img{
	aspect-ratio: 1 / 1.08;
	border-radius: 10px;
}

.why-choose-content-box-gold{
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 40px;
}

.why-choose-body-content-gold{
	width: calc(51% - 15px);
	align-content: center;
}

.why-choose-item-gold{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 30px;
}

.why-choose-item-gold:last-child{
	margin-bottom: 0;
}

.why-choose-item-gold .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.why-choose-item-gold .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.why-choose-item-gold:hover .icon-box::before{
	transform: scale(1);
}

.why-choose-item-gold .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;	
}

.why-choose-item-content-gold{
	width: calc(100% - 65px);
}

.why-choose-item-content-gold h3{
	font-size: 20px;
}

.why-choose-item-content-gold p{
	margin: 10px 0 0 0;
}

.why-choose-body-gold{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	margin-top: 30px;
}

.why-choose-skills-bar-gold .skill-progress{
	background-color: var(--bg-color);
}

.google-rating-box-gold{
	border-top: 1px solid var(--divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.google-rating-header-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.google-rating-header-gold .icon-box img{
	width: 100%;
	max-width: 40px;
}

.google-rating-info-gold{
	width: calc(100% - 55px);
}

.google-rating-info-gold h3{
	font-size: 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.google-review-star-gold{
	display: flex;
	margin-left: 10px;
}

.google-review-star-gold i{
	font-size: 20px;
	color: var(--accent-secondary-color);
}

.google-rating-content-gold p{
	margin: 0;
}

.why-choose-body-image-gold{
	width: calc(49% - 15px);
}

.why-choose-body-image-gold figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.why-choose-body-image-gold figure img{
	width: 100%;
	height: 100%;
    aspect-ratio: 1 / 1.06;
    object-fit: cover;
	border-radius: 20px;
}

.interactive-process-layout-gold{
	overflow: hidden;
}

.interactive-process-layout-gold .interactive-process-item-gold{
    position: relative;
	width: 25%;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
	border-right: 1px solid var(--dark-divider-color);
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    overflow: hidden;
	z-index: 1;
}

.interactive-process-layout-gold .interactive-inner-process-gold{
    position: relative;
	height: 100%;
	padding: 585px 0 0;
	transition: all 0.4s ease-in-out;
    z-index: 3;
}

.interactive-process-layout-gold .interactive-process-item-gold:nth-child(4n + 4) .interactive-inner-process-gold{
	border-right: none;
}

.process-content-wap-gold{
	position: relative;
	-ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.interactive-process-item-wap-gold{
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);	
	transform: translateY(65px);
	padding: 40px;
	transition: all 0.4s ease-in-out;
}

.interactive-process-layout-gold .interactive-inner-process-gold.activate .interactive-process-item-wap-gold,
.interactive-process-layout-gold .interactive-process-item-gold:hover .interactive-process-item-wap-gold{
	transform: translateY(0px);
}

.interactive-process-item-wap-gold .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	overflow: hidden;
}

.interactive-process-item-wap-gold .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--white-color);
	border-radius: 50%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.interactive-inner-process-gold.activate .interactive-process-item-wap-gold .icon-box::before{
	transform: scale(1);
}

.interactive-process-item-wap-gold .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.interactive-inner-process-gold.activate .interactive-process-item-wap-gold .icon-box img{
	filter: brightness(0) invert(0);
}

.interactive-process-item-content-wap-gold h3{
	font-size: 20px;
	color: var(--white-color);
	line-height: 1.4em
}

.interactive-process-item-content-wap-gold h3 a{
	color: inherit;
}

.interactive-process-item-btn-gold{
	opacity: 0;
	visibility: hidden;
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 25px;
	margin-top: 25px;
	transition: all 0.4s ease-in-out;
}

.interactive-process-item-btn-gold .readmore-btn{
	color: var(--white-color);
}

.interactive-process-item-btn-gold .readmore-btn::before{
	filter: brightness(0) invert(1);
}

.interactive-process-layout-gold .interactive-inner-process-gold.activate .interactive-process-item-btn-gold,
.interactive-process-layout-gold .interactive-process-item-gold:hover .interactive-process-item-btn-gold{
	opacity: 1;
	visibility: visible;
}

.interactive-process-layout-gold .interactive-con{
    position: relative;
    padding-bottom: 0!important;
    z-index: 1;
}

.interactive-process-layout-gold .interactive-con-inner{
    position: relative;
    display: flex;
	flex-wrap: wrap;
    z-index: 2;
}

.interactive-process-layout-gold .interactive-con-inner:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, var(--primary-color) 100%);
    z-index: 1;
}

.interactive-process-layout-gold .interactive-process-list-image-gold{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

.interactive-process-layout-gold .interactive-process-list-image-gold .interactive-process-image-gold{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    z-index: -1;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -webkit-transition: all .7s ease;
    transition: all .7s ease
}

.interactive-process-layout-gold .interactive-process-list-image-gold .interactive-process-image-gold:first-child{
    z-index: 1
}

.interactive-process-layout-gold .interactive-process-list-image-gold .interactive-process-image-gold.show{
    opacity: 1;
    z-index: 2;
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.our-features-gold{
	padding: 120px 0;
}

.our-features-gold .section-row .section-title.section-title-center{
	max-width: 855px;
}

.core-feature-title-image-gold img{
	width: 100px;
    height: 44px;
    border-radius: 100px;
}

.feature-item-gold{
	background: var(--white-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
}

.feature-item-content-gold h3{
	font-size: 20px;
	line-height: 1.4em;
}

.feature-item-counter-content-gold h2{
	font-size: 48px;
}

.feature-item-counter-content-gold p{
	margin: 10px 0 0;
}

.feature-box-image-gold{
	border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.feature-box-image-gold figure{
	display: block;
	height: 100%;
}

.feature-box-image-gold figure img{
	width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.116;
    object-fit: cover;
}

.feature-item-header-gold .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 30px;
}

.feature-item-header-gold .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.feature-item-gold:hover .feature-item-header-gold .icon-box::before{
	transform: scale(1);
}

.feature-item-header-gold .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;	
}

.feature-item-content-gold h3{
	font-size: 20px;
}

.feature-item-content-gold p{
	border-top: 1px solid var(--divider-color);
	padding-top: 20px;
	margin: 20px 0 0;
}

.feature-item-list-gold{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.feature-item-list-gold ul{
	list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.feature-item-list-gold ul li{
	display: inline-block;
    border: 1px solid var(--divider-color);
	font-size: 14px;
	font-weight: 600;
    color: var(--primary-color);
    border-radius: 100px;
    line-height: normal;
    padding: 7px 15px;
    transition: all 0.4s ease-in-out;
}

.feature-footer-box-gold{
	margin-top: 30px;
}

.feature-benefit-list-gold ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px 30px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.feature-benefit-list-gold ul li{
	position: relative;
	font-weight: 500;
	background: var(--white-color);
    color: var(--primary-color);
    padding: 12px 16px 12px 32px;
    border-radius: 100px;
	transition: all 0.4s ease-in-out;
}

.feature-benefit-list-gold ul li:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.feature-benefit-list-gold ul li::before{
	content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-secondary-color);
    border-radius: 50%;
    width: 6px;
    height: 6px;
}

.how-we-work-gold{
	padding: 120px 0;
}

.how-work-item-list-gold{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.how-work-item-gold{
	width: calc(33.33% - 20px);
	transition: all 0.5s ease-in-out;
}

.how-work-item-gold:hover{
	transform: translateY(-5px);
}

.how-work-item-no-gold{
	position: relative;
    text-align: center;
    margin-bottom: 65px;
}

.how-work-item-no-gold h2{
	position: relative;
    font-size: 16px;
    line-height: normal;
    display: inline-block;
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 8px 30px;
    z-index: 1;
    transition: all 0.4s ease-in-out;
}

.how-work-item-no-gold h2:before{
	content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    background: var(--divider-color);
    width: 1px;
    height: 100%;
    transform: translate(-50%, 100%);
}

.how-work-item-content-box-gold{
	position: relative;
    background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 50%, var(--bg-color) 100%);
	background-size: 200% auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 25px;
    padding: 40px;
    min-height: 420px;
    transition: all 0.4s ease-in-out;
}

.how-work-item-gold:hover .how-work-item-content-box-gold{
    background-position: right center;
}

.how-work-item-content-box-gold:before{
	content: '';
    position: absolute;
	background-color: var(--accent-secondary-color);
	border: 18px solid var(--white-color);
	border-radius: 50%;
	height: 50px;
	width: 50px;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.how-work-item-header-gold .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--accent-secondary-color);
	border-radius: 50%;
	margin-bottom: 30px;
	z-index: 1;
}

.how-work-item-header-gold .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.how-work-item-content-box-gold:hover .icon-box::before{
	transform: scale(1);
}

.how-work-item-header-gold .icon-box img{	
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.how-work-item-content-gold h2{
	font-size: 20px;
}

.how-work-item-content-gold p{
	margin: 10px 0 0;
}

.how-work-item-content-list-gold{
	border-top: 1px solid var(--divider-color);
	padding-top: 25px;
}

.how-work-item-content-list-gold ul{
	list-style: none;
    margin: 0;
    padding: 0;
}

.how-work-item-content-list-gold ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 15px;
}

.how-work-item-content-list-gold ul li:last-child{
	margin-bottom: 0;
}

.how-work-item-content-list-gold ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.how-we-work-gold .section-footer-text{
	margin-top: 60px;
}

.our-benefits-gold{
	padding: 120px 0;
}

.benefit-content-gold{
	margin-right: 15px;
}

.benefit-image-gold figure{
	display: block;
	border-radius: 20px;
}

.benefit-image-gold img{
	width: 100%;
	aspect-ratio: 1 / 0.497;
	object-fit: cover;
	border-radius: 20px;
}

.benefit-body-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.benefit-body-gold h2{
	font-size: 48px;
	width: 140px;
}

.benefit-body-gold p{
	width: calc(100% - 160px);
	margin: 0;
}

.benefit-satisfaction-box-gold{
	position: relative;
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 60px;
	overflow: hidden;
}

.benefit-satisfaction-box-gold:before{
	content: '';
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 300px;
	background: linear-gradient(180deg, transparent 0%, var(--white-color) 43.86%);
	border-radius: 20px;
	z-index: 1;
}

.benefit-satisfaction-body-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: start;
}

.benefit-satisfaction-content-gold{
	width: 48%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 265px;
}

.benefit-satisfaction-title-gold h3{
	font-size: 20px;
}

.benefit-satisfaction-counter-gold h2{
	font-size: 52px;
}

.benefit-satisfaction-counter-gold p{
	margin: 10px 0 0;
}

.benefit-satisfaction-image-gold{
	width: 52%;
}

.benefit-satisfaction-image-gold figure{
	display: block;
	text-align: right;
	border-radius: 20px;
	margin: 0px -60px -60px 0px;
}

.benefit-satisfaction-image-gold img{
	width: 100%;
	max-width: 320px;
    aspect-ratio: 1 / 1.3;
    object-fit: cover;
    border-radius: 20px;
}

.benefit-scrolling-ticker-box-gold{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
	z-index: 1;
}

.benefit-scrolling-ticker-item-gold{
	--gap: 25px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
	width: calc(100% + 120px);
	left: -60px;
	transition: all 0.4s ease-in-out;
}

.benefit-scrolling-ticker-content-gold{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 60s linear infinite;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.benefit-scrolling-ticker-item-gold.scroll-reverse .benefit-scrolling-ticker-content-gold{
	animation-direction: reverse;
}

.benefit-scrolling-ticker-content-gold span{
	position: relative;
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5em;
	text-transform: capitalize;
	color: var(--primary-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 8px 16px 8px 32px;
	transition: all 0.4s ease-in-out;
}

.benefit-scrolling-ticker-content-gold span:before{
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 16px;
	background-color: var(--accent-secondary-color);
	border-radius: 50%;
	height: 6px;
	width: 6px;
}

.benefit-scrolling-ticker-content-gold span:hover{
	background-color: var(--primary-color);
	color: var(--white-color);
}

.benefit-scrolling-ticker-item-gold:hover .benefit-scrolling-ticker-content-gold{
	animation-play-state: paused;
}

.our-testimonials-gold{
	padding: 120px 0;	
}

.testimonial-slider-gold{
	height: 100%;
}

.testimonial-slider-gold .swiper{
	padding-bottom: 60px;
	height: 100%;
}

.testimonial-slider-gold .swiper-wrapper{
	height: 100%;
	cursor: none;
}

.testimonial-slider-gold .swiper-wrapper .swiper-slide .testimonial-item-gold{
	transform: scale(0.95);
	transition: all 0.6s ease-in-out;
}

.testimonial-slider-gold .swiper-wrapper .swiper-slide.swiper-slide-next .testimonial-item-gold{
	transform: scale(1);
}

.testimonial-item-gold{
	position: relative;
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
	border-radius: 20px;
	min-height: 490px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 40px;
	height: 100%;
}

.testimonial-quote-gold{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.testimonial-quote-gold img{
	width: 100%;
	max-width: 100px;
}

.testimonial-item-rating-gold{
	margin-bottom: 20px;
}

.testimonial-item-rating-gold i{
	color: var(--accent-secondary-color);
}

.testimonial-item-content-gold p{
	color: var(--white-color);
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

.testimonial-author-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 40px;
}

.testimonial-author-image-gold figure{
	display: block;
	border-radius: 50%;
}

.testimonial-author-image-gold figure img{
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
}

.testimonial-author-content-gold{
	width: calc(100% - 65px);
}

.testimonial-author-content-gold h2{
	color: var(--white-color);
	font-size: 20px;
}

.testimonial-author-content-gold p{
	color: var(--white-color);
	line-height: normal;
	margin: 5px 0 0;
}

.testimonial-slider-gold .testimonials-pagination-gold{
	position: absolute;
	bottom: 0px;
	text-align: center;
}

.testimonial-slider-gold .testimonials-pagination-gold .swiper-pagination-bullet{
    position: relative;
    height: 10px;
    width: 10px;
    background: var(--dark-divider-color);
    margin: 0 4px;
	opacity: 1;
	transition: all 0.3s ease-in-out;
}

.testimonial-slider-gold .testimonials-pagination-gold .swiper-pagination-bullet-active{
	background: var(--accent-secondary-color);
    width: 34px;
    border-radius: 100px;
}

.our-testimonials-gold .section-footer-text{
	margin-top: 40px;
}

.our-pricing-gold{
	padding: 120px 0;
}

.our-pricing-swich-gold{
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
	padding: 0;
}

.our-pricing-swich-gold .form-check-label{
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
}

.our-pricing-swich-gold.form-switch .form-check-input{
	width: 80px;
    height: 40px;
    --bs-form-check-bg: var(--accent-secondary-color);
	--bs-form-switch-bg: url('../images/pricing-swich-circle.svg');
	background-size: 28px auto;
	background-position: left 5px center;
	border-radius: 100px;
	border: none;
	outline: none;
	box-shadow: none;
	cursor: pointer;
    margin: 0;
	transition: all 0.3s ease-in-out;
}

.form-switch .form-check-input:checked{
	background-color: var(--accent-color);
	background-position: right 5px center;
}

.pricing-item-gold{
	background-color: var(--white-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 10px;
}

.pricing-item-header-gold{
	background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
	border-radius: 14px;
	padding: 30px;
}

.pricing-item-content-gold h2{
	display: inline-block;
	font-size: 16px;
	line-height: normal;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 6px 20px;
	margin-bottom: 15px;
}

.pricing-item-content-gold p{
	margin: 0;
}

.pricing-item-price-gold{
	border-top: 1px solid var(--divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.pricing-item-price-gold h2{
	font-size: 34px;
}

.pricing-item-price-gold sub{
	font-size: 16px;
	bottom: 0;
}

.pricing-item-body-gold{
	padding: 30px;
}

.pricing-item-list-gold h3{
	font-size: 16px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}


.pricing-item-list-gold ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.pricing-item-list-gold ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 15px;
}

.pricing-item-list-gold ul li:last-child{
	margin-bottom: 0;
}

.pricing-item-list-gold ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    top: 0;
    left: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}

.pricing-item-btn-gold{
	margin-top: 30px;
}

.pricing-benefit-list-gold{
	margin-top: 30px;
}

.pricing-benefit-list-gold ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	gap: 20px 40px;
}

.pricing-benefit-list-gold ul li{
    display: inline-flex;
    align-items: center;
	color: var(--primary-color);
}

.pricing-benefit-list-gold ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 15px;
}

.our-faqs-gold{
	position: relative;
	background-image: url('../images/faqs-bg-image-gold.png');
	background-color: var(--primary-color);
	padding: 120px 0;
}

.our-faqs-gold:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url('../images/faqs-bg-image-1-gold.png');
	background-repeat: no-repeat;
	background-position: center center;
	width: 720px;
	height: 370px;
	background-size: cover;
}

.our-faqs-gold .container{
	position: relative;
	z-index: 1;
}

.faqs-content-gold{
	position: sticky;
	top: 30px;
}

.faq-accordion-gold{
	background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 20px;
	padding: 20px;
}

.faq-accordion-gold .accordion-item{
    position: relative;
    background: var(--dark-divider-color);
    border-radius: 14px;
    margin-bottom: 25px;
    overflow: hidden;
}

.faq-accordion-gold .accordion-item:last-child{
    margin-bottom: 0;
}

.faq-accordion-gold .accordion-header .accordion-button{
	font-size: 18px;
    font-weight: 500;
    line-height: 1.333em;
    background: transparent;
    color: var(--white-color);
    padding: 24px 55px 24px 24px;
    transition: all 0.4s ease-in-out;
}

.faq-accordion-gold .accordion-item .accordion-button::after, 
.faq-accordion-gold .accordion-item .accordion-button.collapsed::after{
   	content: '\f078';
    font-family: 'FontAwesome';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--white-color);
	line-height: normal;
    transition: all 0.3s ease-in-out;
}

.faq-accordion-gold .accordion-button:not(.collapsed)::after{
	transform: translateY(-50%) rotate(180deg);
}

.faq-accordion-gold .accordion-item .accordion-body{  
	border-top: 1px solid var(--dark-divider-color);
    padding: 24px;
}

.faq-accordion-gold .accordion-item .accordion-body p{
	color: var(--white-color);
	margin-bottom: 15px;
}

.faq-accordion-gold .accordion-item .accordion-body p:last-child{
    margin: 0;
}

.main-footer-gold{
	padding: 120px 0 0;
	margin-bottom: 15px;
}

.footer-logo-gold img{
	width: 100%;
	max-width: 147px;
}

.about-footer-content-gold{
	margin-top: 20px;
}

.about-footer-content-gold p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-working-hour-box-gold{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.footer-working-hour-box-gold h2{
	color: var(--white-color);
	font-size: 20px;
	margin-bottom: 30px;
}

.footer-working-hour-box-gold ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-working-hour-box-gold ul li{
	color: var(--white-color);
	line-height: 1.4em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 20px;
}

.footer-working-hour-box-gold ul li:last-child{
	margin-bottom: 0;
}

.footer-working-hour-box-gold ul li span{
	font-weight: 600;
}

.footer-links-box-gold{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-left: 40px;
}

.footer-links-gold{
    max-width: 38%;
}

.footer-links-gold h2{
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-links-gold ul{
	margin: 0;
	padding: 0 0 0 20px;
	list-style: disc;
}

.footer-links-gold ul li{
	color: var(--white-color);
	text-transform: capitalize;
	line-height: 1.5em;
	margin-bottom: 15px;
}

.footer-links-gold ul li::marker{
	color: var(--accent-secondary-color);
}

.footer-links-gold ul li:last-child{
	margin-bottom: 0;
}

.footer-links-gold ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-links-gold ul li a:hover{
	color: var(--accent-secondary-color);
}

.footer-links-gold.footer-contact-list-gold ul{
	list-style: none;
	padding: 0;
}

.footer-links-gold.footer-contact-list-gold ul li{
	display: flex;
	align-items: center;
	gap: 5px 10px;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.footer-links-gold.footer-contact-list-gold ul li:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.footer-links-gold.footer-contact-list-gold ul li img{
	width: 100%;
	max-width: 24px;
}

.footer-copyright-gold{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--dark-divider-color);
	padding: 60px 0;
	margin-top: 80px;
}

.footer-copyright-text p{
	color: var(--white-color);
	margin: 0;
}

.footer-copyright-text-gold p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-social-links-gold{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.footer-social-links-gold h2{
    font-size: 16px;
    color: var(--white-color);
}

.footer-social-links-gold ul{
	display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-social-links-gold ul li a{
	display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--white-color);
    background: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 5px;
    padding: 10px 16px;
    transition: all 0.4s ease-in-out;
}

.footer-social-links-gold ul li a:hover{
    background: var(--accent-secondary-color);
}

.footer-social-links-gold ul li a i{
    font-size: 20px;
    line-height: normal;
    color: inherit;
}

@media only screen and (max-width: 1366px){

	.interactive-process-layout-gold .interactive-inner-process-gold{
		padding: 485px 0 0;
	}
}

@media only screen and (max-width: 1024px){

	.hero-box-gold{
		min-height: 750px;
	}

	.hero-btn-gold{
		margin-top: 30px;
		padding-top: 30px;
	}

	.about-us-image-box-gold{
		max-width: 615px;
		margin: 0 auto 30px;
	}

	.service-item-gold{
		min-height: auto;
		padding: 30px;
	}

	.why-choose-image-box-gold{
		max-width: 615px;
		margin: 0 auto 30px;
	}

	.why-choose-body-content-gold{
		width: calc(60% - 15px);
	}

	.why-choose-body-image-gold{
		width: calc(40% - 15px);
	}

	.interactive-process-layout-gold .interactive-process-item-gold{
		border-bottom: 1px solid var(--dark-divider-color);
		width: 50%;
	}

	.interactive-process-layout-gold .interactive-inner-process-gold{
		padding: 200px 0 0;
		height: auto;
	}

	.interactive-process-item-wap-gold{
		padding: 30px;
	}

	.interactive-process-item-wap-gold .icon-box{
		margin-bottom: 20px;
	}

	.interactive-process-item-btn-gold{
		margin-top: 20px;
		padding-top: 20px;
	}

	.interactive-process-layout-gold .interactive-con-inner-gold:before{
		background-color: var(--primary-color);
		opacity: 50%;
	}

	.feature-box-image-gold figure img{
		aspect-ratio: 1 / 0.8;
	}

	.feature-footer-box-gold{
		margin-top: 10px;
	}

	.how-work-item-gold{
		width: calc(50% - 15px);
	}

	.how-work-item-content-box-gold::before{
		border-width: 15px;
		height: 40px;
		width: 40px;
	}

	.benefit-content-gold{
		margin: 0 0 30px;
	}

	.benefit-body-gold{
		margin-top: 30px;
		padding-top: 30px;
	}

	.benefit-satisfaction-box-gold{
		padding: 30px;
	}

	.benefit-satisfaction-image-gold figure{
		margin: 0px -30px -30px 0px;
	}

	.benefit-scrolling-ticker-box-gold{
		gap: 20px;
	}

	.testimonial-slider-gold .swiper-wrapper .swiper-slide .testimonial-item-gold{
		transform: scale(1);
	}

	.testimonial-item-gold{
		padding: 30px;
		gap: 30px;
		min-height: 390px;
	}

	.testimonial-author-gold{
		padding-top: 30px;
	}	

	.faqs-content-gold{
		position: initial;
		margin-bottom: 30px;
	}

	.about-footer-gold{
		margin-bottom: 30px;
	}

	.footer-links-box-gold{
		margin: 0;
	}

	.footer-copyright-gold{
		flex-direction: column-reverse;
		justify-content: center;
		margin-top: 30px;
		padding: 30px 0;
	}
}

@media only screen and (max-width: 991px){

	.hero-gold{
		margin: 0;
		border-radius: 0;
	}

	.hero-box-gold{
		padding: 150px 0 60px;
	}

	.hero-info-list-gold ul li::before{
		font-size: 16px;
	}

	.our-scrolling-ticker-gold{
		padding: 20px 0;
	}

	.scrolling-ticker-box-gold{
		--gap: 20px;
	}

	.scrolling-content-gold span img{
		max-width: 25px;
	}

	.scrolling-content-gold span{
		font-size: 26px;
	}

	.about-us-gold{
		padding: 60px 0;
	}

	.about-us-item-gold{
		padding: 20px;
	}

	.about-us-counter-box-gold h2{
		font-size: 30px;
	}

	.about-us-item-content-gold ul{
		margin: 20px 0 0 0;
    	padding: 20px 0 0 0;
	}

	.about-us-item-content-gold ul li::before{
		font-size: 16px;
	}

	.experience-circle-gold img{
		max-width: 110px;
	}

	.about-us-footer-gold{
		padding-top: 30px;
		margin-top: 30px;
	}

	.our-services-gold{
		padding: 60px 0;
		background-size: 100% auto;
	}

	.why-choose-us-gold{
		padding: 60px 0;
	}

	.why-choose-content-box-gold{
		padding: 30px;
	}

	.google-rating-info-gold h3{
		font-size: 22px;
	}

	.google-review-star-gold i{
		font-size: 18px;
	}

	.our-features-gold{
		padding: 60px 0;
	}

	.core-feature-title-image-gold img{
		width: 88px;
		height: 36px;
	}

	.feature-item-gold{
		padding: 30px;
	}

	.feature-item-counter-content-gold h2{
		font-size: 38px;
	}

	.feature-benefit-list-gold ul{
		gap: 15px;
	}

	.feature-benefit-list-gold ul li{
		font-size: 14px;
		padding: 10px 12px 10px 26px;
	}

	.feature-benefit-list-gold ul li::before{
		left: 12px;
	}

	.our-features-gold .section-footer-text{
		margin-top: 20px;
	}

	.how-we-work-gold{
		padding: 60px 0;
	}

	.how-work-item-no-gold{
		margin-bottom: 35px;
	}

	.how-work-item-no-gold h2{
		font-size: 14px;
		padding: 5px 20px;
	}

	.how-work-item-content-box-gold{
		min-height: auto;
		padding: 30px;
	}

	.how-work-item-content-list-gold ul li::before{
		font-size: 16px;
	}

	.how-we-work-gold .section-footer-text{
		margin-top: 40px;
	}

	.our-benefits-gold{
		padding: 60px 0;
	}

	.benefit-body-gold h2{
		font-size: 38px;
		width: 110px;
	}

	.benefit-body-gold p{
		width: calc(100% - 130px);
	}

	.benefit-satisfaction-counter-gold h2{
		font-size: 40px;
	}

	.benefit-scrolling-ticker-content-gold span{
		padding: 6px 12px 6px 28px;
	}

	.benefit-scrolling-ticker-content-gold span:before{
		left: 12px;
	}

	.our-testimonials-gold{
		padding: 60px 0;
	}

	.testimonial-slider-gold .swiper{
		padding-bottom: 40px;
	}

	.testimonial-item-content-gold p{
		font-size: 18px;
	}

	.our-testimonials-gold .section-footer-text{
		margin-top: 30px;
	}

	.our-pricing-gold{
		padding: 60px 0;
	}

	.our-pricing-swich-gold{
		margin-bottom: 30px;
	}

	.our-pricing-swich-gold.form-switch .form-check-input{
		width: 60px;
		height: 32px;
		background-size: 22px auto;
	}

	.pricing-item-header-gold,
	.pricing-item-body-gold{
		padding: 20px;
	}

	.pricing-item-price-gold{
    	margin-top: 20px;
		padding-top: 20px;
	}

	.pricing-item-price-gold h2{
		font-size: 30px;
	}

	.pricing-item-list-gold ul li{
		margin-bottom: 10px;
	}

	.pricing-item-list-gold ul li:before{
		font-size: 16px;
	}

	.pricing-benefit-list-gold{
		margin-top: 10px;
	}

	.pricing-benefit-list-gold ul{
		gap: 20px 30px;
	}

	.pricing-benefit-list-gold ul li img{
		max-width: 18px;
		margin-right: 10px;
	}

	.our-faqs-gold{
		padding: 60px 0;
	}

	.our-faqs-gold:before{
		right: 0;
		width: 620px;
	    height: 270px;
		margin: 0 auto;
	}

	.faq-accordion-gold .accordion-item{
		margin-bottom: 20px;
	}

	.faq-accordion-gold .accordion-header .accordion-button{
		padding: 18px 44px 18px 20px;
	}
	
	.faq-accordion-gold .accordion-item .accordion-button::after,
	.faq-accordion-gold .accordion-item .accordion-button.collapsed::after{
		right: 20px;
		font-size: 18px;
	}

	.faq-accordion-gold .accordion-item .accordion-body{
		padding: 18px 20px;
	}

	.main-footer-gold{
		padding: 60px 0 0;
		margin: 0;
	}

	.about-footer-content-gold{
		margin-top: 15px;
	}

	.footer-working-hour-box-gold h2,
	.footer-links-gold h2{
		margin-bottom: 20px;
	}

	.footer-social-links-gold ul li a{
		gap: 5px;
		padding: 10px;
	}

	.footer-links-gold ul li{
		margin-bottom: 10px;
	}

	.footer-working-hour-box-gold ul li{
		margin-bottom: 15px;
	}

	.footer-links-gold.footer-contact-list-gold ul li{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}
}

@media only screen and (max-width: 767px){
	
	.hero-item-list-gold,
	.hero-item-gold{
		width: 100%;
	}

	.hero-item-content-gold h2{
		font-size: 18px;
	}

	.hero-info-list-gold{
		width: 100%;
		padding: 30px 0 0;
		border-top: 1px solid var(--dark-divider-color);
		border-left: none;
	}

	.our-scrolling-ticker-gold{
		padding: 15px 0;
	}

	.scrolling-ticker-box-gold{
		--gap: 15px;
	}

	.scrolling-content-gold span img{
		max-width: 20px;
	}
	
	.scrolling-content-gold span{
		font-size: 22px;
	}

	.about-us-image-box-1-gold{
		width: 60%;
		background-position: top 0px left 45px;
		background-size: 40% auto;
		padding: 50px 0 20px 0;
	}

	.about-us-image-box-2-gold{
		width: 40%;
	}

	.about-us-image-1-gold{
		padding: 3px 3px 0 0;
	}

	.about-us-image-2-gold{
		margin-left: -100px;
	}

	.about-us-counter-box-gold{
		border-radius: 14px;
		margin: 10px 0 0 7px;
		padding: 10px;
	}

	.about-us-counter-box-gold h2{
		font-size: 26px;
	}

	.about-us-counter-box-gold p{
		font-size: 16px;
	}

	.about-us-item-gold{
		width: 100%;
	}

	.about-us-item-title-gold h3{
		font-size: 18px;
	}

	.about-us-body-gold .experience-circle-gold{
		display: none;
	}

	.experience-circle-gold img{
		max-width: 90px;
	}

	.service-item-gold{
		padding: 20px;
		gap: 20px;
	}

	.service-item-header-gold .icon-box{
		margin-bottom: 20px;
	}
	
	.service-item-content-gold h2{
		font-size: 18px;
	}

	.service-item-btn-gold{
		padding-top: 20px;
	}

	.why-choose-image-box-1-gold{
		padding-bottom: 75px;
	}

	.why-choose-image-box-gold .experience-circle-gold{
		top: 30px;
		border-width: 3px;
	}

	.why-choose-image-box-2-gold .why-choose-image-gold{
		margin-left: -130px;
	}

	.why-choose-content-box-gold{
		padding: 20px;
	}

	.why-choose-item-content-gold{
		width: 100%;
	}

	.why-choose-item-content-gold h3{
		font-size: 18px;
	}

	.why-choose-body-gold{
		padding-top: 20px;
    	margin-top: 20px;
	}

	.why-choose-body-content-gold{
		width: 100%;
	}

	.google-rating-box-gold{
		margin-top: 20px;
    	padding-top: 20px
	}

	.google-rating-header-gold{
		margin-bottom: 10px;
	}

	.google-rating-header-gold .icon-box img{
		max-width: 32px;
	}

	.google-rating-info-gold{
		width: calc(100% - 47px);
	}

	.google-rating-info-gold h3{
		font-size: 18px;
	}

	.google-review-star-gold i{
		font-size: 16px;
	}

	.why-choose-body-image-gold{
		width: 100%;
	}

	.why-choose-body-image-gold figure,
	.why-choose-body-image-gold figure img{
		height: auto;
	}

	.interactive-process-layout-gold .interactive-process-item-gold{
		width: 100%;
	}

	.interactive-process-layout-gold .interactive-inner-process-gold{
        padding: 100px 0 0;
    }

	.interactive-process-item-wap-gold{
		padding: 20px;
		transform: translateY(60px);
		background-color: transparent;
		backdrop-filter: initial;
		-webkit-backdrop-filter: initial;
	}

	.interactive-process-item-content-wap-gold h3{
		font-size: 18px;
	}

	.core-feature-title-image-gold img{
		width: 78px;
		height: 30px;
	}
	
	.feature-item-gold{
		padding: 20px;
		gap: 20px;
	}

	.feature-item-content-gold h3{
		font-size: 18px;
	}

	.feature-item-counter-content-gold h2{
		font-size: 26px;
	}

	.feature-item-header-gold .icon-box{
		margin-bottom: 20px;
	}

	.feature-item-content-gold h3{
		font-size: 18px;
	}

	.feature-item-list-gold{
		padding-top: 20px;
	}

	.feature-benefit-list-gold ul{
		gap: 10px;
	}

	.feature-benefit-list-gold ul li{
		padding: 8px 10px 8px 24px;
	}

	.feature-benefit-list-gold ul li::before{
		left: 10px;
	}

	.how-work-item-gold{
		width: 100%;
	}

	.how-work-item-content-box-gold{
		padding: 20px;
	}

	.how-work-item-header-gold .icon-box{
		margin-bottom: 20px;
	}

	.how-work-item-content-gold h2{
		font-size: 18px;
	}

	.benefit-body-gold{
		gap: 10px;
	}

	.benefit-body-gold h2{
        font-size: 28px;
        width: 100%;
    }

	.benefit-body-gold p{
        width: 100%;
    }

	.benefit-satisfaction-box-gold{
        padding: 20px;
    }

	.benefit-satisfaction-content-gold{
		min-height: auto;		
	}

	.benefit-satisfaction-content-gold,
	.benefit-satisfaction-image-gold{
		width: 100%;
	}

	.benefit-satisfaction-content-gold{
		gap: 20px;
		margin-bottom: 30px;
	}

	.benefit-satisfaction-title-gold h2{
		font-size: 18px;
	}

	.benefit-satisfaction-counter-gold h2{
        font-size: 28px;
    }

	.benefit-satisfaction-box-gold:before{
		background: linear-gradient(180deg, transparent 0%, var(--white-color) 61.86%);
	}

	.benefit-satisfaction-image-gold figure{
		max-width: 280px;
        margin: 0 auto;
        text-align: center;
    }

	.benefit-scrolling-ticker-item-gold{
		--gap: 15px;
	}

	.benefit-scrolling-ticker-content-gold span{
        padding: 4px 8px 4px 26px;
    }

	.benefit-scrolling-ticker-content-gold span:before{
        left: 10px;
    }

	.testimonial-item-gold{
        min-height: auto;
        gap: 20px;
        padding: 20px;
    }

	.testimonial-quote-gold img{
		max-width: 70px;
	}

	.testimonial-item-rating-gold{
		margin-bottom: 15px;
	}

	.testimonial-item-content-gold p{
        font-size: 16px;
    }

	.testimonial-author-gold{
        padding-top: 20px;
    }

	.testimonial-author-content-gold h2{
		font-size: 18px;
	}

	.our-pricing-swich-gold .form-check-label{
		font-size: 18px;
	}

	.pricing-item-content-gold h2{
		font-size: 14px;
		padding: 4px 15px;
	}

	.pricing-item-price-gold h2{
        font-size: 26px;
    }

	.pricing-item-price-gold sub{
		font-size: 14px;
	}

	.pricing-item-list-gold h3{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.pricing-benefit-list-gold{
		margin-top: 5px;
	}

	.pricing-benefit-list-gold ul{
		gap: 10px;
	}

	.pricing-benefit-list-gold ul li{
		font-size: 14px;
	}

	.pricing-benefit-list-gold ul li img{
		max-width: 16px;
		margin-right: 5px;
	}

	.our-faqs-gold:before{
        width: 450px;
        height: 100px;
    }

	.faq-accordion-gold{
		padding: 15px;
	}

	.faq-accordion-gold .accordion-header .accordion-button{
        padding: 12px 40px 12px 15px;
		font-size: 16px;
    }

	.faq-accordion-gold .accordion-item .accordion-body{
        padding: 12px 15px;
    }

	.faq-accordion-gold .accordion-item .accordion-button::after,
	.faq-accordion-gold .accordion-item .accordion-button.collapsed::after{
		font-size: 16px;
        right: 15px;
    }

	.footer-working-hour-box-gold h2,
	.footer-links-gold h2{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.footer-links-gold{
		max-width: 100%;
	}

	.footer-working-hour-box-gold ul li{
        margin-bottom: 10px;
    }

	.footer-copyright-gold{
		padding: 15px 0;
	}

	.footer-social-links-gold ul{
		gap: 10px;
	}

	.footer-social-links-gold ul li a{
		font-size: 14px;
	}

	.footer-social-links-gold ul li a i{
		font-size: 18px;
	}
}

/************************************/
/***   36. Home - Version 3 css   ***/
/************************************/

.hero-silver{
    position: relative;
    align-content: end;
	background-image: url('../images/hero-bg-image-silver.jpg');
    border-radius: 20px;
	height: auto;
	min-height: 100vh;
    align-content: center;
    padding: 230px 0 120px;
    margin: 15px 15px 0 15px;
    overflow: hidden;
}

.hero-silver::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--primary-color);
	opacity: 50%;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-silver .container{
	position: relative;
	z-index: 1;
}

.hero-content-silver{
	margin-right: 4.688vw;
}

.hero-content-body-silver{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
}

.video-play-button-silver{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 20px;
	z-index: 1;
}

.video-play-button-silver a{
	position: relative;
	height: 50px;
	width: 50px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	color: var(--white-color);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	transition: all 0.3s ease-in-out;
}

.video-play-button-silver a:hover{
	background: var(--white-color);
	color: var(--primary-color);
}


.video-play-button-silver a.bg-effect:before,
.video-play-button-silver a.bg-effect:after{
	content: '';
	position: absolute;
    width: 160%;
    height: 160%;
	border: 35px solid var(--white-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button-silver a.bg-effect:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button-silver a i{
    font-size: 20px;
    color: inherit;
    margin-left: 2px;
}

.video-play-button-silver p{
	font-family: var(--accent-font);
	font-weight: 500;
    color: var(--white-color);
    margin: 0;
}

.hero-content-footer-silver{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 40px;
	padding-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.hero-footer-item-list-silver{
	width: calc(50% - 15px);
}

.hero-footer-item-silver{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.hero-footer-item-silver:last-child{
	margin-bottom: 0;
}

.hero-footer-item-silver .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.hero-footer-item-silver .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--white-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.hero-footer-item-silver:hover .icon-box::before{
    transform: scale(1);
}

.hero-footer-item-silver .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.hero-footer-item-silver:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.hero-footer-item-content-silver{
	width: calc(100% - 65px);
}

.hero-footer-item-content-silver h2{
	color: var(--white-color);
	font-size: 20px;
}

.google-review-box-silver{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-left: 1px solid var(--dark-divider-color);
	padding-left: 30px;
}

.google-review-box-silver .icon-box img{
	width: 100%;
	max-width: 50px;
}

.google-review-box-body-silver{
	width: calc(100% - 65px);
}

.google-review-box-header-silver{
	width: calc(100% - 55px);
	display: flex;
	align-items: center;
}

.google-review-box-header-silver h2{
	color: var(--white-color);
	font-size: 26px;
	min-width: 70px;
	line-height: 1em;
}

.google-rating-star-silver{
	display: flex;
	line-height: normal;
}

.google-rating-star-silver i{
	font-size: 18px;
	color: var(--accent-secondary-color);
}

.google-review-box-content-silver p{
	color: var(--white-color);
	margin: 5px 0 0;
}

.hero-experience-circle-silver{
	text-align: center;
}

.hero-experience-circle-silver img{
	width: 100%;
	max-width: 130px;
	background-color: var(--divider-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	animation: infiniterotate 20s infinite linear;
}

.about-us-silver{
	padding: 120px 0;
}

.about-us-item-silver{
	background-color: var(--accent-color);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	padding: 30px;
	min-height: 445px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.about-us-item-silver.box-1{
	background-image: url('../images/about-us-item-bg-silver.png');
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: auto;
}

.about-us-header-silver{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.about-us-header-title-silver p{
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--white-color);
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border-radius: 100px;
	padding: 8px 20px;
	margin: 0;
}

.about-us-body-content-silver h3{
	font-size: 20px;
	line-height: 1.6em;
	color: var(--white-color);
}

.about-us-body-list-silver{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.about-us-body-list-silver ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-us-body-list-silver li{
	position: relative;
	color: var(--white-color);
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 15px;
}

.about-us-body-list-silver ul li:last-child{
	margin-bottom: 0;
}

.about-us-body-list-silver ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    top: 0;
    left: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-secondary-color);
}

.about-us-image-silver{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.about-us-image-silver figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.about-us-image-silver img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.1;
	object-fit: cover;
	border-radius: 20px;
}

.about-us-item-silver.box-2{
	background-color: var(--white-color);
}

.about-counter-item-silver{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.about-counter-item-silver .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.about-counter-item-silver .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-us-item-silver:hover .about-counter-item-silver .icon-box::before{
    transform: scale(1);
}

.about-counter-item-silver .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
}

.about-counter-item-content-silver{
	width: calc(100% - 65px);
}

.about-counter-item-content-silver h2{
	font-size: 48px;
	line-height: 1em;
}

.about-counter-item-content-silver p{
	margin: 10px 0 0;
}

.about-us-header-content-silver{
	border-top: 1px solid var(--divider-color);
	padding-top: 20px;
}

.about-us-header-content-silver p{
	margin: 0;
}

.about-us-body-silver .skill-progress{
	background-color: var(--divider-color);
}

.about-us-footer-silver{
	margin-top: 30px;
}

.about-us-footer-list-silver ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	max-width: 900px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.about-us-footer-list-silver ul li{
	position: relative;
	background: transparent;
    background-color: var(--white-color);
    font-size: 16px;
    color: var(--primary-color);
    padding: 13px 20px 13px 36px;
    border-radius: 100px;
	transition: all 0.4s ease-in-out;
}

.about-us-footer-list-silver ul li::before{
	content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-secondary-color);
    border-radius: 50%;
    width: 6px;
    height: 6px;
}

.about-us-footer-list-silver ul li:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.benefits-footer .section-footer-text{
	margin-top: 30px;
}

.our-services-silver{
	padding: 120px 0;
}

.service-item-silver{
	position: relative;
	min-height: 480px;
	align-content: end;
	border-radius: 20px;
	padding: 10px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.service-item-image-silver{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.service-item-image-silver figure,
.service-item-image-silver figure a{
	display: block;
	height: 100%;
	cursor: none;
}

.service-item-image-silver img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s ease-in-out;
}

.service-item-silver:hover .service-item-image-silver img{
	transform: scale(1.06);
}

.service-item-body-silver{
	position: relative;
	background: var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 30px;
	z-index: 1;
}

.service-item-content-silver h2{
	color: var(--white-color);
	font-size: 20px;
}

.service-item-content-silver h2 a{
	color: inherit;
}

.service-item-content-silver p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.service-item-btn-silver{
	height: 0;
	border-top: 1px solid var(--dark-divider-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.service-item-silver:hover .service-item-btn-silver{
	height: 37px;
	margin-top: 20px;
	padding-top: 20px;
    opacity: 1;
    visibility: visible;
}

.why-choose-us-silver{
	padding: 120px 0;
}

.why-choose-image-box-silver{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
}

.why-choose-image-box-1-silver{
	width: 58%;
	padding-left: 80px;
	padding-bottom: 120px;
}

.why-choose-author-box-silver{
	position: absolute;
	max-width: 280px;
	top: 70px;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 30px;
	animation: Movestylesilver 2s infinite alternate linear;
	z-index: 1;
}

@keyframes Movestylesilver{
	50%{
		transform: translateX(20px);
	}
}

.why-choose-author-image-silver figure{
	display: block;
	border-radius: 50%;
}

.why-choose-author-image-silver img{
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.why-choose-author-content-silver{
	width: calc(100% - 65px);
}

.why-choose-author-content-silver h2{
	font-size: 20px;
}

.why-choose-author-content-silver p{
	margin: 5px 0 0;
}

.why-choose-image-silver figure{
	margin-right: -150px;
	display: block;
	border-radius: 20px;
}

.why-choose-image-silver img{
	width: 100%;
    aspect-ratio: 1 / 1.231;
    object-fit: cover;
    border-radius: 20px;
}

.why-choose-expert-box-silver{
	width: 42%;
	position: relative;
	background-color: var(--accent-color);
	border: 6px solid var(--bg-color);
	border-radius: 20px;
	padding: 30px 30px 0;
	overflow: hidden;
}

.why-choose-expert-box-silver:before{
	content: '';
	position: absolute;
	right: 0;
	bottom: -100px;
	left: -30px;
	height: 300px;
	width: calc(100% + 60px);
	background-color: var(--dark-divider-color);
	border-radius: 50%;
}

.why-choose-expert-content-silver{
	text-align: center;
	margin-bottom: 20px;
}

.why-choose-expert-content-silver h2{
	color: var(--white-color);
	font-size: 30px;
}

.why-choose-expert-content-silver p{
	color: var(--white-color);
	margin: 5px 0 0;
}

.why-choose-expert-image-silver{
	position: relative;
	z-index: 1;
}

.why-choose-expert-image-silver figure{
	display: block;
	border-radius: 14px 14px 0 0;
}

.why-choose-expert-image-silver img{
	width: 100%;
    aspect-ratio: 1 / 1.31;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
}

.why-choose-content-silver{
	margin-left: 15px;
}

.why-choose-items-list-silver{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.why-choose-item-silver{
	width: calc(50% - 15px);
	display: flex;
	align-items: center;
	gap: 15px;
}

.why-choose-item-silver .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.why-choose-item-silver .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.why-choose-item-silver:hover .icon-box::before{
	transform: scale(1);
}

.why-choose-item-silver .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
}

.why-choose-item-content-silver{
	width: calc(100% - 65px);
}

.why-choose-item-content-silver h3{
	font-size: 20px;
	line-height: 1.4em;
}

.why-choose-body-list-silver{
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.why-choose-body-list-silver ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.why-choose-body-list-silver ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 15px;
}

.why-choose-body-list-silver ul li:last-child{
	margin-bottom: 0;
}

.why-choose-body-list-silver ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    top: 0;
    left: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-secondary-color);
}

.why-chooose-btn-silver{
	margin-top: 40px;
}

.our-benefit-silver{
	padding: 120px 0;
}

.benefit-image-box-silver{
	position: relative;
	background-image: url('../images/benefit-image-box-bg-silver.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}

.benefit-image-box-silver:before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, transparent 0%, var(--accent-color) 88.75%);
	height: 180px;
	width: 100%;
}

.benefit-image-silver{
	text-align: center;
}

.benefit-image-silver figure{
	display: block;
	max-width: 370px; 
	margin: 0 auto;
	border-radius: 20px;
}

.benefit-image-silver img{
	width: 100%;
	aspect-ratio: 1 / 1.7;
	object-fit: cover;
	border-radius: 20px;
}

.benefit-satisfaction-box-silver{
	position: absolute;
	bottom: 70px;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 20px;
	animation: benefitboxmove 3s infinite linear alternate;

}

@keyframes benefitboxmove{
	50%{
		transform: translateX(20px);
	}
}

.benefit-satisfaction-box-silver .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.benefit-satisfaction-box-silver .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.benefit-satisfaction-box-silver:hover .icon-box::before{
	transform: scale(1);
}

.benefit-satisfaction-box-silver .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
}

.benefit-satisfaction-content-silver{
	width: calc(100% - 65px);
}

.benefit-satisfaction-content-silver h2{
	font-size: 40px;
	line-height: 1em;
}

.benefit-satisfaction-content-silver p{
	margin: 5px 0 0;
}

.benefit-content-silver{
	margin-left: 15px;
}

.benefit-item-list-silver{
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
	border-radius: 20px;
	padding: 40px;
}

.benefit-item-silver{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.benefit-item-silver:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.benefit-item-silver .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.benefit-item-silver .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.benefit-item-silver:hover .icon-box::before{
	transform: scale(1);
}

.benefit-item-silver .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.benefit-item-silver:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.benefit-item-content-silver{
	width: calc(100% - 65px);
}

.benefit-item-content-silver h2{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

.benefit-item-content-silver p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.benefit-btn-silver{
	margin-top: 40px;
}

.our-core-features-silver{
	padding: 120px 0;
}

.core-features-image-box-silver{
	display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-right: 15px;
}

.core-features-image-box-1-silver{
	width: 35%;
	padding-bottom: 160px;
}

.core-features-image-silver{
    position: relative;
    z-index: 0;
}

.core-features-image-silver figure{
	border-radius: 20px;
    overflow: hidden;
}

.core-features-image-silver figure img{
	width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.core-features-image-box-1-silver .core-features-image-silver{
	position: relative;
	margin-right: -260px;
	z-index: 1;
}

.core-features-image-box-1-silver .core-features-image-silver figure img{
    aspect-ratio: 1 / 1.32;
}

.core-features-image-box-2-silver{
	position: relative;
	width: 65%;
	text-align: right;
	z-index: 2;
}

.core-features-image-box-2-silver .core-features-image-silver figure{
	border: 6px solid var(--secondary-color);
}

.core-features-image-box-2-silver .core-features-image-silver figure img{
	aspect-ratio: 1 / 1.272;
	border-radius: 14px;
}

.experience-circle-silver{
	position: relative;
	display: inline-block;
    border-radius: 50%;
    border: 6px solid var(--secondary-color);
	text-align: right;
	margin-bottom: -71px;
	margin-right: 60px;
	z-index: 2;
}

.experience-circle-silver img{
	width: 100%;
	max-width: 130px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
    border-radius: 50%;
    animation: infiniterotate 20s infinite linear;
}

.core-features-content-silver{
	margin-left: 15px;
}

.core-features-item-list-silver{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.core-features-item-silver{
	width: calc(50% - 15px);
	background-color: var(--white-color);
	border-radius: 20px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	padding: 30px;
}

.core-features-item-silver .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.core-features-item-silver .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.core-features-item-silver:hover .icon-box::before{
	transform: scale(1);
}

.core-features-item-silver .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.core-features-item-content-silver h2{
	font-size: 20px;
}

.core-features-item-content-silver p{
	border-top: 1px solid var(--divider-color);
	padding-top: 20px;
	margin: 20px 0 0;
}

.core-features-skill-list-silver{
	border-top: 1px solid var(--divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.core-features-btn-silver{
	margin-top: 40px;
}

.our-team-silver{
	padding: 120px 0;
}

.team-item-silver{
    position: relative;
    border-radius: 20px;
	align-content: end;
	min-height: 480px;
	padding: 40px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.team-item-image-silver{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.team-item-image-silver figure,
.team-item-image-silver a{
	position: relative;
    display: block;
	height: 100%;
    cursor: none;
}

.team-item-image-silver figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(180deg, transparent 50%, rgba(34, 34, 34, 0.90) 90%);
	z-index: 1;
}

.team-item-image-silver img{
    width: 100%;
	height: 100%;
    object-fit: cover;
	transition: all 0.6s ease-in-out;
}

.team-item-silver:hover .team-item-image-silver img{
	transform: scale(1.06);
}

.team-item-body-silver{
	position: relative;
    transform: translateY(60%);
	text-align: center;
    transition: all 0.4s ease-in-out;
    z-index: 2;
}

.team-item-silver:hover .team-item-body-silver{
	transform: translateY(0%);
}

.team-item-content-silver h2{
    font-size: 20px;
    color: var(--white-color);
}

.team-item-content-silver h2 a{
    color: inherit;
}

.team-item-content-silver p{
    color: var(--white-color);
	margin: 10px 0 0;
}

.team-social-list-silver{
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--dark-divider-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.team-item-silver:hover .team-social-list-silver{
	opacity: 1;
	visibility: visible;
}

.team-social-list-silver ul{
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.team-social-list-silver ul li a{
	color: var(--white-color);
    width: 40px;
    height: 40px;
    background: transparent;
	border: 1px solid var(--dark-divider-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.team-social-list-silver ul li a:hover{
    background: var(--accent-secondary-color);
}

.team-social-list-silver ul li a i{
    font-size: 18px;
	color: inherit;
}

.our-pricing-silver{
	padding: 120px 0;
}

.pricing-item-silver{
	background-color: var(--white-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 10px;
}

.pricing-item-header-silver{
	padding: 30px;
}

.pricing-item-header-silver .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 25px;
}

.pricing-item-header-silver .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.pricing-item-silver:hover .pricing-item-header-silver .icon-box::before{
    transform: scale(1);
}

.pricing-item-header-silver .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
}

.pricing-item-content-silver .pricing-item-title-silver{
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
    color: var(--primary-color);
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.pricing-item-content-silver p{
	margin-bottom: 30px;
}

.pricing-item-content-silver h2{
	font-size: 34px;
}

.pricing-item-content-silver h2 sub{
    font-size: 16px;
    bottom: 0;
}

.pricing-item-body-silver{
	background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
	border-radius: 14px;
	padding: 30px;
}

.pricing-item-list-silver h3{
	font-size: 16px;
}

.pricing-item-list-silver ul{
	list-style: none;
	border-top: 1px solid var(--divider-color);
	margin: 20px 0 0;
	padding: 20px 0 0;
}

.pricing-item-list-silver ul li{
	position: relative;
	color: var(--primary-color);
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 15px;
}

.pricing-item-list-silver ul li:last-child{
	margin-bottom: 0;
}

.pricing-item-list-silver ul li:before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--primary-color);
    top: 0;
    left: 0;
}

.pricing-item-btn-silver{
	margin-top: 30px;
}

.pricing-benefit-list-silver{
	margin-top: 30px;
}

.pricing-benefit-list-silver ul{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 20px 40px;
}

.pricing-benefit-list-silver ul li{
    display: inline-flex;
    align-items: center;
	color: var(--primary-color);
}

.pricing-benefit-list-silver ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 10px;
}

.how-it-work-silver{
	padding: 120px 0;
}

.how-work-item-list-silver{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.how-work-item-silver{
	width: calc(33.33% - 20px);
	text-align: center;
}

.how-work-item-no-silver{
	position: relative;
	margin-bottom: 176px;
}

.how-work-item-no-silver::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: calc(100% + 30px);
	height: 1px;
	transform: translateY(-50%);
	background: var(--dark-divider-color);
}

.how-work-item-silver:nth-child(3n + 3) .how-work-item-no-silver::before,
.how-work-item-silver:last-child .how-work-item-no-silver::before{
	width: 100%;
}

.how-work-item-no-silver::after{
	content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 100%);
    background: url('../images/how-work-item-arrow-silver.svg') no-repeat;
	background-position: center center;
    background-size: cover;
    width: 12px;
    height: 52px;
	transition: all 0.3s ease-in-out;
}

.how-work-item-silver:hover .how-work-item-no-silver::after{
	transform: translate(-50%, 110%);
}

.how-work-item-no-silver span{
	display: inline-block;
	color: var(--white-color);
	font-weight: 600;
	line-height: 1.25em;
	background: var(--dark-divider-color);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 100px;
	padding: 10px 30px;
	transition: all 0.4s ease-in-out;
}

.how-work-item-silver:hover .how-work-item-no-silver span{
	background: var(--white-color);
	color: var(--primary-color);
}

.how-work-item-content-box-silver{
	position: relative;
	background: var(--dark-divider-color);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 0 40px 40px;
	transition: all 0.4s ease-in-out;
}

.how-work-item-silver:hover .how-work-item-content-box-silver{
	background: var(--accent-secondary-color);
}

.how-work-item-image-silver figure{
	display: inline-block;
	max-width: 172px;
	border: 6px solid var(--accent-color);
	border-radius: 50%;
	margin: -86px auto 0;
}

.how-work-item-image-silver img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.how-work-item-content-silver{
	margin-top: 30px;
}

.how-work-item-content-silver h3{
	font-size: 20px;
	color: var(--white-color);
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.how-work-item-content-silver p{
	color: var(--white-color);
	margin-bottom: 10px;
}

.how-work-item-content-silver p:last-child{
	margin: 0;
}

.our-testimonials-silver{
	padding: 120px 0;
}

.testimonial-slider-silver{
	height: 100%;
}

.testimonial-slider-silver .swiper{
	padding-bottom: 60px;
	height: 100%;
}

.testimonial-slider-silver .swiper-wrapper{
	height: 100%;
	cursor: none;
}

.testimonial-item-silver{
	background: var(--white-color) url('../images/testimonial-quote-silver.svg') no-repeat;
	background-position: center center;
	background-size: 80px auto;
	min-height: 480px;
	border-radius: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 40px;
}

.testimonial-item-rating-silver i{
	font-size: 20px;
	color: var(--accent-secondary-color);
}

.testimonial-item-content-silver p{
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
}

.testimonial-item-content-silver p:last-child{
	margin-bottom: 0;
}

.testimonial-author-box-silver{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.testimonial-author-image-silver figure{
	display: block;
	border-radius: 50%;
}

.testimonial-author-image-silver img{
	width: 100%;
	max-width: 50px;
	object-fit: cover;
	border-radius: 50%;
}

.testimonial-author-content-silver{
	width: calc(100% - 65px);
}

.testimonial-author-content-silver h2{
	font-size: 20px;
}

.testimonial-author-content-silver p{
	line-height: normal;
	margin: 5px 0 0;
}

.testimonial-slider-silver .testimonials-pagination-silver{
	position: absolute;
	bottom: 0px;
	display: flex;
	text-align: center;
}

.testimonial-slider-silver .testimonials-pagination-silver .swiper-pagination-bullet{
	position: relative;
    height: 2px;
    width: 100%;
    background: var(--divider-color);
	border-radius: 0;
	opacity: 1;
    margin: 0;
	transition: all 0.3s ease-in-out;
}

.testimonial-slider-silver .testimonials-pagination-silver .swiper-pagination-bullet:before{
	content: '';
    display: block;
    position: absolute;
    top: 0px;
	left: auto;
	right: 0;
    background: var(--accent-secondary-color);
	border-radius: 0;
	width: 0;
	height: 4px;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider-silver .testimonials-pagination-silver .swiper-pagination-bullet.swiper-pagination-bullet-active:before{
	width: 100%;
	right: auto;
	left: 0;
}

.testimonial-cta-box-silver{
	background: var(--white-color);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: calc(100% - 60px);
	margin-bottom: 60px;
	padding: 10px;
}

.testimonial-cta-image-silver{
	height: 100%;
}

.testimonial-cta-image-silver figure{
	display: block;
	height: 100%;
	border-radius: 14px;
}

.testimonial-cta-image-silver img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.67;
	object-fit: cover;
	border-radius: 14px;
}

.testimonial-cta-client-box-silver{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding: 20px;
}

.testimonial-cta-client-box-silver .satisfy-client-images{
	width: calc(52% - 10px);
}

.testimonial-cta-client-box-silver .satisfy-client-image figure img{
	max-width: 50px;
}

.testimonial-cta-client-content-silver{
	width: calc(48% - 10px);
	border-left: 1px solid var(--divider-color);
	padding-left: 20px;
}

.testimonial-cta-client-content-silver h2{
	font-size: 40px;
	line-height: 1.1em;
	display: flex;
	align-items: center;
}

.testimonial-cta-client-content-silver h2 span{
	min-width: 65px;
}

.testimonial-cta-client-content-silver h2 i{
	font-size: 24px;
	color: var(--accent-secondary-color);
}

.testimonial-cta-client-content-silver p{
	margin: 5px 0 0;
}

.testimonial-cta-client-content-silver p span{
	color: var(--primary-color);
	font-weight: 600;
}

.our-testimonials-silver .section-footer-text{
	margin-top: 60px;
}

.our-faqs-silver{
	padding: 120px 0;
}

.faqs-image-box-silver{
	position: relative;
	height: 100%;
	margin-right: 15px;
}

.faqs-image-silver{
	height: 100%;
}

.faqs-image-silver figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.faqs-image-silver img{
	width: 100%;
	aspect-ratio: 1 / 1.24;
	object-fit: cover;
	border-radius: 20px;
}

.faqs-cta-box-silver{
	position: absolute;
	bottom: 30px;
	left: 30px;
	right: 30px;
	max-width: 325px;
	background: var(--divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 30px;
	z-index: 2;
}

.faqs-cta-box-silver .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--accent-secondary-color);
	border-radius: 50%;
	margin-bottom: 25px;
	z-index: 1;
}

.faqs-cta-box-silver .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.faqs-image-box-silver:hover .faqs-cta-box-silver .icon-box::before{
	transform: scale(1);
}

.faqs-cta-box-silver .icon-box img{	
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.faqs-image-box-silver:hover .faqs-cta-box-silver .icon-box img{
	filter: brightness(0) invert(0);
}

.faqs-cta-content-silver h2{
	font-size: 20px;
	color: var(--white-color);
}

.faqs-cta-content-silver p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.faqs-content-silver{
	height: 100%;
	align-content: center;
}

.faq-accordion-silver .accordion-item{
    position: relative;
    background: var(--bg-color);
    border-radius: 14px;
    margin-bottom: 25px;
    overflow: hidden;
}

.faq-accordion-silver .accordion-item:last-child{
    margin-bottom: 0;
}

.faq-accordion-silver .accordion-header .accordion-button{
	font-size: 18px;
    font-weight: 500;
    line-height: 1.333em;
    background: transparent;
    color: var(--primary-color);
    padding: 22px 55px 22px 24px;
    transition: all 0.4s ease-in-out;
}

.faq-accordion-silver .accordion-item .accordion-button::after, 
.faq-accordion-silver .accordion-item .accordion-button.collapsed::after{
   	content: '\f078';
    font-family: 'FontAwesome';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--accent-secondary-color);
	line-height: normal;
    transition: all 0.3s ease-in-out;
}

.faq-accordion-silver .accordion-button:not(.collapsed)::after{
	color: var(--primary-color);
	transform: translateY(-50%) rotate(180deg);
}

.faq-accordion-silver .accordion-item .accordion-body{  
	border-top: 1px solid var(--divider-color);
    padding: 22px 24px;
}

.faq-accordion-silver .accordion-item .accordion-body p:last-child{
    margin: 0;
}

.main-footer-silver{
	position: relative;
	padding: 120px 0 60px;
	margin-bottom: 15px;
	overflow: hidden;
}

.main-footer-silver::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url('../images/footer-bg-image-silver.png') no-repeat;
	background-position: center center;
	background-size: cover;
	width: 360px;
	height: 325px;
	z-index: 0;
}

.main-footer-silver .container{
	position: relative;
	z-index: 1;
}

.footer-logo-silver img{
	width: 100%;
	max-width: 147px;
}

.footer-newsletter-box-silver{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
}

.footer-newsletter-box-title-silver{
	width: calc(54% - 15px);
}

.footer-newsletter-box-title-silver h2{
	font-size: 40px;
	letter-spacing: -0.02em;
	color: var(--white-color);
}

.footer-newsletter-form-silver{
	width: calc(46% - 15px);
}

.footer-newsletter-form-silver .form-group{
	display: flex;
	background: var(--dark-divider-color);
	border-radius: 10px;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	padding: 8px;
}

.footer-newsletter-form-silver .form-group .form-control{
	width: calc(100% - 44px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2em;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 6px 16px;
}

.footer-newsletter-form-silver .form-group .form-control::placeholder{
	color: var(--white-color);
	opacity: 50%;
}

.footer-newsletter-form-silver .form-group .newsletter-btn-silver{
	width: 44px;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-secondary-color);
	border: none;
	border-radius: 6px;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form-silver .form-group .newsletter-btn-silver:hover{
	background-color: var(--white-color);
}

.footer-newsletter-form-silver .form-group .newsletter-btn-silver img{
	width: 100%;
	max-width: 14px;
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-form-silver .form-group .newsletter-btn-silver:hover img{
	transform: rotate(45deg);
	filter: brightness(0) invert(0);
}

.footer-links-box-silver,
.footer-copyright-silver{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 60px;
	padding-top: 60px;
}

.footer-links-box-silver{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 4.167vw;
}

.footer-links-silver{
	position: relative;
	width: calc(33.33% - 2.778vw);
}

.footer-links-silver::before{
	content: '';
	position: absolute;
	top: 50%;
	right: -2.083vw;
	transform: translateY(-50%);
	background: var(--dark-divider-color);
	width: 1px;
	height: 80%;
}

.footer-links-silver:nth-child(3n + 3)::before,
.footer-links-silver:last-child::before{
	display: none;
}

.footer-links-silver h2{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 30px;
}

.footer-links-silver ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links-silver ul li{
	line-height: 1.5em;
	color: var(--white-color);
	margin-bottom: 10px;
}

.footer-links-silver ul li:last-child{
	margin-bottom: 0;
}

.footer-links-silver ul li a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.footer-links-silver ul li a:hover{
	color: var(--accent-secondary-color);
}

.footer-service-links-silver ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.footer-links-silver.footer-service-links-silver ul li{
	margin: 0;
}

.footer-service-links-silver ul li a{
	width: 40px;
	height: 40px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.footer-service-links-silver ul li a:hover{
	background-color: var(--accent-secondary-color);
	color: var(--white-color);
}

.footer-service-links-silver ul li a i{
	font-size: 18px;
	color: inherit;
}

.footer-copyright-silver{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-copyright-text-silver p{
    color: var(--white-color);
    margin: 0;
}

.footer-menu-silver ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-menu-silver ul li{
    position: relative;
}

.footer-menu-silver ul li::before{
    content: '';
	position: absolute;
	top: 50%;
	right: -18px;
    background: var(--accent-secondary-color);
	border-radius: 100px;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
}

.footer-menu-silver ul li:last-child:before{
    display: none;
}

.footer-menu-silver ul li a{
	text-transform: capitalize;
    color: var(--white-color);
    transition: all 0.4s ease-in-out;
}

.footer-menu-silver ul li a:hover{
    color: var(--accent-secondary-color);
}

@media only screen and (max-width: 1024px){

	.hero-silver{
		height: auto;
	}

	.hero-content-silver{
		margin: 0;
	}

	.hero-content-footer-silver{
		margin-top: 30px;
		padding-top: 30px;
	}

	.hero-experience-circle-silver{
		display: none;
	}

	.about-us-image-silver img{
		aspect-ratio: 1 / 0.8;
	}

	.why-choose-image-box-silver{
		max-width: 650px;
		margin: 0 auto 30px;
	}

	.why-choose-content-silver{
		margin: 0;
	}

	.why-choose-body-list-silver{
		margin-top: 30px;
		padding-top: 30px;
	}

	.why-chooose-btn-silver{
		margin-top: 30px;
	}

	.benefit-image-box-silver{
		max-width: 620px;
		margin: 0 auto 30px;
	}

	.benefit-content-silver{
		margin: 0;
	}

	.benefit-item-list-silver{
		padding: 30px;
	}

	.core-features-image-box-silver{
		max-width: 610px;
		margin: 0 auto 30px;
	}

	.core-features-image-box-1-silver{
		padding-bottom: 110px;
	}

	.core-features-image-box-1-silver .core-features-image-silver figure img{
		aspect-ratio: 1 / 1.2;
	}

	.core-features-image-box-2-silver .core-features-image-silver figure img{
		aspect-ratio: 1 / 1.1;
	}

	.core-features-content-silver{
		margin: 0;
	}

	.core-features-btn-silver{
		margin-top: 30px;
	}

	.team-item-silver{
		padding: 30px;
	}

	.how-work-item-content-box-silver{
		padding: 0 30px 30px;
	}

	.faqs-image-box-silver{
		max-width: 740px;
		height: auto;
		margin: 0 auto 30px;
	}

	.faqs-image-silver,
	.faqs-image-silver figure,
	.faqs-image-silver img,
	.faqs-content-silver{
		height: auto;
	}

	.faqs-image-silver img{
		aspect-ratio: 1 / 1.1;
	}

	.main-footer-silver{
		padding-bottom: 30px;
	}

	.main-footer-silver::before{
		width: 240px;
        height: 215px;
		opacity: 55%;
	}

	.footer-logo-silver{
		margin-bottom: 20px;
	}

	.footer-links-box-silver,
	.footer-copyright-silver{
		margin-top: 30px;
		padding-top: 30px;
	}
}

@media only screen and (max-width: 991px){

	.hero-silver{
		padding: 150px 0 60px;
		margin: 0;
		border-radius: 0;
	}

	.google-review-box-header-silver h2{
		font-size: 22px;
    	min-width: 60px;
	}

	.about-us-silver{
		padding: 60px 0;
	}

	.about-us-item-silver{
		min-height: auto;
		padding: 20px;
	}

	.about-us-body-content-silver h3{
		font-size: 18px;
	}

	.about-us-body-list-silver li{
		margin-bottom: 10px;
	}

	.about-us-body-list-silver li:before{
		font-size: 16px;
	}

	.about-counter-item-content-silver h2{
		font-size: 38px;
	}

	.about-us-footer-silver{
		margin-top: 10px;
	}

	.about-us-footer-list-silver ul{
		gap: 15px;
	}

	.about-us-footer-list-silver ul li{
		padding: 10px 10px 10px 26px;
	}

	.about-us-footer-list-silver ul li::before{
		left: 10px;
	}

	.our-services-silver{
		padding: 60px 0;
	}

	.service-item-silver{
		min-height: 400px;
	}

	.service-item-body-silver{
		padding: 20px;
	}

	.why-choose-us-silver{
		padding: 60px 0;
	}

	.why-choose-image-box-1-silver{
		padding-bottom: 80px;
	}

	.why-choose-author-box-silver{
		padding: 20px;
	}

	.why-choose-expert-content-silver h2{
		font-size: 28px;
	}

	.why-choose-body-list-silver ul li{
		margin-bottom: 10px;
	}

	.why-choose-body-list-silver ul li::before{
		font-size: 16px;
	}

	.our-benefit-silver{
		padding: 60px 0;
	}

	.benefit-satisfaction-content-silver h2{
		font-size: 34px;
	}

	.benefit-btn-silver{
		margin-top: 30px;
	}

	.our-core-features-silver{
		padding: 60px 0;
	}

	.experience-circle-silver{
		margin-bottom: -61px;
		margin-right: 70px;
	}

	.experience-circle-silver img{
		max-width: 110px;
	}

	.our-team-silver{
		padding: 60px 0;
	}

	.team-item-silver{
		min-height: 400px;
	}

	.our-pricing-silver{
        padding: 60px 0;
    }

    .pricing-item-header-silver{
        padding: 20px 20px 30px;
    }

	.pricing-item-content-silver .pricing-item-title-silver{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.pricing-item-content-silver p{
		margin-bottom: 15px;
	}

    .pricing-item-body-silver{
        padding: 20px;
    }

    .pricing-item-content-silver h2{
        font-size: 30px;
    }

    .pricing-item-list-silver ul{
		margin: 15px 0 0;
		padding: 15px 0 0;
    }

    .pricing-item-list-silver ul li{
        margin-bottom: 10px;
    }

    .pricing-item-list-silver ul li:before{
        font-size: 16px;
    }

    .pricing-benefit-list-silver{
		margin-top: 10px;
	}

	.pricing-benefit-list-silver ul{
		gap: 15px 30px;
	}

	.how-it-work-silver{
		padding: 60px 0;
	}

	.how-work-item-silver{
		width: calc(50% - 15px);
	}

	.how-work-item-silver:nth-child(3n + 3) .how-work-item-no-silver::before{
		width: calc(100% + 30px);
	}

	.how-work-item-silver:nth-child(2n + 2) .how-work-item-no-silver::before,
	.how-work-item-silver:last-child .how-work-item-no-silver::before{
		width: 100%;
	}

	.how-work-item-no-silver span{
		padding: 8px 20px;
	}

	.how-work-item-no-silver{
		margin-bottom: 146px;
	}

	.how-work-item-no-silver::after{
		bottom: -10px;
		width: 9px;
		height: 38px;
	}

	.our-testimonials-silver{
		padding: 60px 0;
	}

	.testimonial-slider-silver .swiper{
		padding-bottom: 30px;
	}

	.testimonial-item-silver{
		padding: 30px;
		gap: 30px;
		min-height: 390px;
	}

	.testimonial-item-content-silver p,
	.testimonial-item-rating-silver i{
		font-size: 18px;
	}

	.testimonial-author-box-silver{
		margin-top: 30px;
		padding-top: 30px;
	}

	.testimonial-cta-box-silver{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.testimonial-cta-client-box-silver{
		padding: 10px;
	}

	.testimonial-cta-client-box-silver .satisfy-client-images{
		width: calc(46% - 10px);
	}

	.testimonial-cta-client-box-silver .satisfy-client-image figure img{
		max-width: 40px;
	}

	.testimonial-cta-client-content-silver{
		width: calc(54% - 10px);
	}

	.testimonial-cta-client-content-silver h2{
		font-size: 34px;
	}

	.testimonial-cta-client-content-silver h2 span{
		min-width: 55px;
	}

	.testimonial-cta-client-content-silver h2 i{
		font-size: 18px;
	}

	.our-testimonials-silver .section-footer-text{
		margin-top: 30px;
	}

	.our-faqs-silver{
		padding: 60px 0;
	}

	.faqs-cta-box-silver{
		bottom: 20px;
		left: 20px;
		right: 20px;
	}

	.faq-accordion-silver .accordion-item{
		margin-bottom: 20px;
	}

	.faq-accordion-silver .accordion-header .accordion-button{
		padding: 18px 44px 18px 20px;
	}
	
	.faq-accordion-silver .accordion-item .accordion-button::after,
	.faq-accordion-silver .accordion-item .accordion-button.collapsed::after{
		right: 20px;
		font-size: 18px;
	}

	.faq-accordion-silver .accordion-item .accordion-body{
		padding: 18px 20px;
	}

	.main-footer-silver{
		padding: 60px 0 30px;
		margin-bottom: 0;
	}

	.footer-newsletter-box-title-silver h2{
		font-size: 34px;
	}

	.footer-newsletter-form-silver .form-group{
		padding: 5px;
	}

	.footer-newsletter-form-silver .form-group .form-control{
		width: calc(100% - 36px);
	}

	.footer-newsletter-form-silver .form-group .newsletter-btn-silver{
		width: 36px;
		height: 36px;
	}
	
	.footer-newsletter-form-silver .form-group .newsletter-btn-silver img{
		max-width: 12px;
	}

	.footer-links-silver h2{
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 767px){

	.hero-content-body-silver{
		gap: 30px 20px;
	}

	.hero-content-body-silver .video-play-button-silver{
		margin-left: 10px;
	}

	.hero-footer-item-list-silver{
		width: 100%;
	}

	.hero-footer-item-content-silver h2{
		font-size: 18px;
	}

	.google-review-box-silver{
		width: 100%;
		border-left: none;
		border-top: 1px solid var(--dark-divider-color);
		padding: 30px 0 0;
	}

	.google-review-box-silver .icon-box img{
		max-width: 40px;
	}

	.google-review-box-body-silver{
		width: calc(100% - 55px);
	}

	.google-review-box-header-silver h2{
        font-size: 18px;
        min-width: 50px;
    }

	.google-rating-star-silver i{
		font-size: 16px;
	}

	.about-us-item-silver{
		padding: 20px;
		gap: 20px;
		min-height: auto;
	}

	.about-us-body-content-silver h3{
        font-size: 16px;
    }

	.about-us-body-list-silver{
		margin-top: 20px;
		padding-top: 20px;
	}

	.about-us-image-silver figure,
	.about-us-image-silver img{
		height: auto;
	}

	.about-counter-item-content-silver h2{
        font-size: 26px;
    }

	.about-counter-item-content-silver p{
		margin: 5px 0 0;
	}

	.about-us-footer-list-silver ul li{
		font-size: 14px;
		padding: 8px 10px 8px 26px;
	}

	.service-item-content-silver h2{
		font-size: 18px;
	}

	.service-item-silver:hover .service-item-btn-silver{
		height: 32px;
		margin-top: 15px;
		padding-top: 15px;
	}

	.why-choose-image-box-silver{
		padding-left: 20px;
	}

	.why-choose-image-box-1-silver{
		width: 48%;
		padding: 0 0 80px;
	}

	.why-choose-author-box-silver{
		border-radius: 10px;
        top: 20px;
		gap: 10px;
        padding: 12px;
    }

	.why-choose-author-image-silver img{
		max-width: 44px;
	}

	.why-choose-author-content-silver{
		width: calc(100% - 54px);
	}

	.why-choose-author-content-silver h2{
		font-size: 16px;
	}

	.why-choose-image-silver figure{
		margin-right: -80px;
	}

	.why-choose-expert-box-silver{
		width: 52%;
		border-width: 3px;
		padding: 15px 15px 0;
	}

	.why-choose-expert-box-silver:before{
		height: 200px;
	}

	.why-choose-expert-content-silver{
		margin-bottom: 10px;
	}

	.why-choose-expert-content-silver h2{
		font-size: 26px;
	}

	.why-choose-expert-content-silver p{
		font-size: 14px;
	}

	.why-choose-expert-image-silver figure{
		max-width: 110px;
		margin: 0 auto;
	}

	.why-choose-items-list-silver{
		gap: 20px;
	}

	.why-choose-item-silver{
		width: 100%;
	}

	.why-choose-item-content-silver h3{
		font-size: 18px;
	}

	.benefit-image-silver figure{
		max-width: 280px;
	}

	.benefit-satisfaction-box-silver{
		padding: 15px;
		bottom: 30px;
	}

	.benefit-satisfaction-content-silver h2{
        font-size: 28px;
    }

	.benefit-satisfaction-content-silver p{
		font-size: 14px;
	}

	.benefit-item-list-silver{
        padding: 20px;
    }

	.benefit-item-silver{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.benefit-item-content-silver h2{
		font-size: 18px;
	}

	.core-features-image-box-1-silver{
		padding-bottom: 100px;
	}

	.core-features-image-box-1-silver .core-features-image-silver{
		margin-right: -120px;
	}

	.experience-circle-silver{
        margin-bottom: -51px;
        margin-right: 55px;
    }

	.experience-circle-silver img{
        max-width: 90px;
    }

	.core-features-item-silver{
		width: 100%;
		padding: 20px;
		gap: 20px;
		min-height: auto;
	}

	.core-features-item-content-silver h2{
		font-size: 18px;
	}

	.core-features-item-content-silver p{
		margin-top: 15px;
		padding-top: 15px;
	}

	.team-item-silver{
        min-height: 360px;
        padding: 20px;
    }

	.team-item-content-silver h2{
		font-size: 18px;
	}

	.team-social-list-silver{
		margin-top: 20px;
		padding-top: 20px;
	}

	.pricing-item-header-silver{
        padding: 15px 15px 20px;
    }

	.pricing-item-content-silver .pricing-item-title-silver{
		font-size: 18px;
	}

	.pricing-item-content-silver h2{
        font-size: 26px;
    }

	.pricing-item-content-silver h2 sub{
		font-size: 14px;
	}

	.pricing-benefit-list-silver{
		margin-top: 5px;
	}

	.pricing-benefit-list-silver ul{
		gap: 10px;
	}

	.pricing-benefit-list-silver ul li{
		font-size: 14px;
	}

	.pricing-benefit-list-silver ul li img{
		max-width: 16px;
		margin-right: 5px;
	}

	.how-work-item-silver{
		width: 100%;
	}

	.how-work-item-silver:nth-child(3n + 3) .how-work-item-no-silver::before{
		width: 100%;
	}

	.how-work-item-no-silver span{
		font-size: 14px;
		padding: 6px 16px;
	}
	
	.how-work-item-content-box-silver{
		padding: 0 20px 20px;
    }

	.how-work-item-content-silver{
		margin-top: 20px;
	}

	.how-work-item-content-silver h3{
		font-size: 18px;
	}

	.testimonial-slider-silver,
	.testimonial-slider-silver .swiper,
	.testimonial-slider-silver .swiper-wrapper{
		height: auto;
	}

	.testimonial-slider-silver .swiper{
		padding-bottom: 30px;
	}

	.testimonial-item-silver{
		gap: 20px;
		min-height: auto;
		padding: 20px;
	}

	.testimonial-item-content-silver p{
		font-size: 16px;
	}

	.testimonial-author-box-silver{
        margin-top: 20px;
        padding-top: 20px;
    }

	.testimonial-author-content-silver h2{
		font-size: 18px;
	}

	.testimonial-cta-box-silver{
		height: auto;
		margin: 30px 0 0 0;
	}

	.testimonial-cta-client-content-silver h2{
		font-size: 28px;
	}

	.testimonial-cta-client-content-silver h2 span{
		min-width: 45px;
	}

	.faqs-cta-box-silver{
		bottom: 10px;
        left: 10px;
        right: 10px;
        padding: 15px;
	}

	.faqs-cta-box-silver .icon-box{
		margin-bottom: 15px;
	}

	.faqs-cta-content-silver h2{
		font-size: 18px;
	}

	.faq-accordion-silver .accordion-header .accordion-button{
		font-size: 16px;
        padding: 12px 40px 12px 15px;
    }

	.faq-accordion-silver .accordion-item .accordion-button::after,
	.faq-accordion-silver .accordion-item .accordion-button.collapsed::after{
		font-size: 16px;
        right: 15px;
    }

	.faq-accordion-silver .accordion-item .accordion-body{
        padding: 12px 15px;
    }

	.main-footer-silver{
		padding-bottom: 15px;
	}

	.footer-newsletter-box-title-silver,
	.footer-newsletter-form-silver{
		width: 100%;
	}

	.footer-newsletter-box-title-silver h2{
        font-size: 28px;
    }

	.footer-links-silver{
		width: 100%;
	}

	.footer-links-silver::before{
		display: none;
	}

	.footer-links-silver h2{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.footer-copyright-silver{
		flex-direction: column-reverse;
		gap: 15px;
		padding-top: 15px;
	}

	.footer-menu-silver ul{
		gap: 10px 20px;
	}
	
	.footer-menu-silver ul li{
		font-size: 14px;
	}

	.footer-menu-silver ul li::before{
		right: -12px;
	}
}

/* ============================================ */
/* APPLE-STYLE NAVIGATION — POLISHED            */
/* ============================================ */

/* Header: fixed, full-width, dark translucent */
header.main-header.apple-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	z-index: 9999;
	background: rgba(13, 38, 36, 0.86);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

header.main-header.apple-nav .header-sticky {
	position: relative;
	top: 0;
	border-bottom: none;
	background: transparent;
}

header.main-header.apple-nav .header-sticky.active {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	transform: none;
}

header.main-header.apple-nav .header-sticky.hide {
	transform: none;
}

/* Navbar container */
header.main-header.apple-nav .navbar {
	padding: 0;
	height: 52px;
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
}

header.main-header.apple-nav .container-fluid,
header.main-header.apple-nav .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

/* Logo — BIGGER */
header.main-header.apple-nav .navbar-brand {
	padding: 0;
	margin: 0;
	margin-right: 32px;
	flex-shrink: 0;
}

header.main-header.apple-nav .navbar-brand img {
	height: 40px;
	width: auto;
	opacity: 1;
}

/* Nav menu wrapper */
header.main-header.apple-nav .main-menu .nav-menu-wrapper {
	flex: 1;
	text-align: center;
	margin: 0;
}

header.main-header.apple-nav .main-menu .nav-menu-wrapper > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

/* Nav items — position static so dropdown spans full width */
header.main-header.apple-nav .main-menu ul li {
	margin: 0;
	position: static;
}

/* Nav links — BIGGER text, better spacing */
header.main-header.apple-nav .main-menu ul li > a.nav-link {
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
	padding: 0 18px !important;
	line-height: 52px;
	text-transform: none;
	letter-spacing: -0.01em;
	transition: color 0.3s ease;
	background: transparent;
	border-radius: 0;
	white-space: nowrap;
}
/* Explicit font-family on every nav + dropdown element so header
 * typography always matches the CLAPP body stack (DM Sans). */
header.main-header.apple-nav .main-menu,
header.main-header.apple-nav .nav-dropdown,
header.main-header.apple-nav .nav-dropdown-inner,
header.main-header.apple-nav .nav-dd-col-header,
header.main-header.apple-nav .nav-dd-label,
header.main-header.apple-nav .nav-dd-small-links a,
header.main-header.apple-nav .nav-dd-links a,
header.main-header.apple-nav .header-btn,
header.main-header.apple-nav .header-btn a {
	font-family: var(--default-font) !important;
	letter-spacing: -0.005em;
}
header.main-header.apple-nav .nav-dd-big-link {
	font-family: var(--accent-font) !important;
	letter-spacing: -0.02em !important;
}

header.main-header.apple-nav .main-menu ul li > a.nav-link:hover,
header.main-header.apple-nav .main-menu ul li > a.nav-link:focus {
	color: #fff;
}

/* Remove ALL submenu carets/chevrons */
header.main-header.apple-nav .main-menu ul li.submenu > a:after,
header.main-header.apple-nav .main-menu ul li.has-dropdown > a:after {
	display: none !important;
	content: none !important;
}

/* CTA button in header */
header.main-header.apple-nav .header-btn {
	display: flex !important;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

header.main-header.apple-nav .btn-nav-cta {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	background: var(--accent-color, #274543);
	color: #fff !important;
	border-radius: 980px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
	white-space: nowrap;
	line-height: 1.4;
	border: none;
}

header.main-header.apple-nav .btn-nav-cta::before,
header.main-header.apple-nav .btn-nav-cta::after {
	display: none !important;
}

header.main-header.apple-nav .btn-nav-cta:hover {
	background: #2f5553;
	color: #fff !important;
}

/* ---- Full-width dropdown panels (Apple-style) ----
 * Apple's trick: a shared 320ms fade on a "curtain" (header-level
 * backdrop) when the nav opens/closes. Individual panel switches
 * INSIDE the active nav are instant (no transition). This is why
 * moving between nav items feels seamless on apple.com.
 *
 * The JS controller (clapp-applenav.js) adds:
 *   - .apple-nav-active on header when any panel should be visible
 *   - .is-open on the specific nav-item whose panel should show
 *
 * CSS:
 *   - Default nav-dropdown: hidden (opacity 0, visibility hidden)
 *   - .is-open nav-dropdown: visible
 *   - Transitions are SLOW only when the header transitions in/out of
 *     .apple-nav-active. While active, panel switches are instant. */
header.main-header.apple-nav .nav-dropdown {
	position: absolute;
	top: 52px;
	left: 0;
	right: 0;
	width: 100%;
	background: #fbfbfd;
	padding: 44px 0 52px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 9998;
	border-bottom: 1px solid #d2d2d7;
	transition: opacity 0s, visibility 0s;
}

/* While nav is active, ALL panels stay "visible" (but only the open
 * one has opacity 1). This lets adjacent panels crossfade smoothly
 * when you move between nav items, like Apple does. */
header.main-header.apple-nav.apple-nav-active .nav-dropdown {
	visibility: visible;
	transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0.24, 1);
}

header.main-header.apple-nav .nav-item.has-dropdown.is-open > .nav-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Apple-style content crossfade when switching between panels.
 * The inner content fades + gently drifts upward. Softer curve +
 * longer duration than the outer panel fade so the text feels like
 * it's settling rather than snapping. */
header.main-header.apple-nav .nav-dropdown .nav-dropdown-inner {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0.24, 1),
				transform 0.35s cubic-bezier(0.32, 0.72, 0.24, 1);
}
header.main-header.apple-nav .nav-item.has-dropdown.is-open > .nav-dropdown .nav-dropdown-inner {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0.24, 1) 0.05s,
				transform 0.4s cubic-bezier(0.32, 0.72, 0.24, 1) 0.05s;
}

/* Fade in: when the header is becoming active (first open) */
header.main-header.apple-nav.apple-nav-opening .nav-item.has-dropdown.is-open > .nav-dropdown {
	transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
				visibility 0s linear 0s;
}

/* Fade out: when the header is leaving active state */
header.main-header.apple-nav.apple-nav-closing .nav-item.has-dropdown > .nav-dropdown {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
				visibility 0s linear 0.32s;
}

/* Curtain: full-viewport dim + blur behind the nav while it's open.
 * Real DOM element (.apple-nav-curtain) appended to body by the JS
 * controller — avoids pseudo-element backdrop-filter quirks and
 * keeps the stacking context predictable. Matches Apple's
 * .globalnav-curtain fade timing. */
.apple-nav-curtain {
	position: fixed;
	inset: 52px 0 0 0;
	background: transparent;
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 9997;
	transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
				visibility 0s linear 0.32s;
}
.apple-nav-curtain.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
				visibility 0s linear 0s;
}
/* No transitions on fallback for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
	header.main-header.apple-nav .nav-dropdown,
	.apple-nav-curtain {
		transition: none !important;
	}
}
/* Keyboard users: focus-within still works without JS */
header.main-header.apple-nav:not(.apple-nav-active) .nav-item.has-dropdown:focus-within > .nav-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.32s ease,
				visibility 0s linear 0s;
}

header.main-header.apple-nav .nav-dropdown-inner {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 44px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 0 48px;
	text-align: left;
}

header.main-header.apple-nav .nav-dropdown-inner.cols-2 {
	grid-template-columns: 1.4fr 1fr;
}

/* First column: BIG bold links (Apple "Explore" column) */
header.main-header.apple-nav .nav-dd-col-explore {
	padding-right: 40px;
	border-right: 1px solid #e0e0e5;
	text-align: left;
}

header.main-header.apple-nav .nav-dd-col-header {
	font-size: 12px;
	font-weight: 400;
	color: #6e6e73;
	margin-bottom: 14px;
	display: block;
	text-align: left;
}

header.main-header.apple-nav .nav-dd-big-link {
	display: block;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #1d1d1f !important;
	line-height: 1.4 !important;
	padding: 4px 0 !important;
	margin: 0 !important;
	text-decoration: none;
	transition: color 0.2s ease;
	background: transparent !important;
	letter-spacing: -0.015em;
	white-space: nowrap;
	text-align: left;
}

header.main-header.apple-nav .nav-dd-big-link:hover {
	color: var(--accent-color, #274543) !important;
	padding: 4px 0 !important;
	background: transparent !important;
}

/* Smaller links below big links */
header.main-header.apple-nav .nav-dd-small-links {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
}

header.main-header.apple-nav .nav-dd-small-links a {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #424245 !important;
	padding: 0 !important;
	text-decoration: none;
	transition: color 0.2s ease;
	background: transparent !important;
	text-align: left;
}

header.main-header.apple-nav .nav-dd-small-links a:hover {
	color: var(--accent-color, #274543) !important;
	background: transparent !important;
}

/* Secondary columns: normal-sized links with gray headers */
header.main-header.apple-nav .nav-dd-col-links {
	padding: 0;
	text-align: left;
}

header.main-header.apple-nav .nav-dd-label {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #6e6e73;
	margin-bottom: 12px;
	text-align: left;
}

header.main-header.apple-nav .nav-dd-links {
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: left;
}

header.main-header.apple-nav .nav-dd-links a {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #424245 !important;
	padding: 0 !important;
	text-decoration: none;
	transition: color 0.2s ease;
	line-height: 2.4 !important;
	background: transparent !important;
	text-align: left;
	white-space: nowrap;
}

header.main-header.apple-nav .nav-dd-links a:hover {
	color: var(--accent-color, #274543) !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Legacy classes kept for backward compat */
header.main-header.apple-nav .nav-dd-main-link {
	display: block;
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #1d1d1f !important;
	line-height: 1.14 !important;
	padding: 4px 0 !important;
	text-decoration: none;
	transition: color 0.2s ease;
	background: transparent !important;
}
header.main-header.apple-nav .nav-dd-main-link:hover {
	color: var(--accent-color, #274543) !important;
	background: transparent !important;
}
header.main-header.apple-nav .nav-dd-desc {
	font-size: 12px;
	font-weight: 400;
	color: #6e6e73;
	margin: 4px 0 0;
	line-height: 1.4;
}
header.main-header.apple-nav .nav-dd-stats {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
header.main-header.apple-nav .nav-dd-stats span {
	font-size: 12px;
	font-weight: 400;
	color: #1d1d1f;
	line-height: 1.4;
}
header.main-header.apple-nav .nav-dd-urgent .nav-dd-main-link {
	color: #143425 !important;
}
header.main-header.apple-nav .nav-dd-urgent .nav-dd-main-link:before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #143425;
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
	animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}
/* Grid overrides for old markup */
header.main-header.apple-nav .nav-dropdown-grid {
	display: grid;
	gap: 20px 56px;
}
header.main-header.apple-nav .nav-dropdown-grid.cols-3 {
	grid-template-columns: 1.2fr 1fr 1fr;
}
header.main-header.apple-nav .nav-dropdown-grid.cols-2 {
	grid-template-columns: 1.2fr 1fr;
}
header.main-header.apple-nav .nav-dd-section-border {
	grid-column: 1 / -1;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e5;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 56px;
}

/* Page offset for fixed header */
body {
	padding-top: 0;
}

.apple-nav ~ .hero,
.apple-nav ~ .page-header {
	margin-top: 0;
}

/* Hide old elements */
header.main-header.apple-nav .nav-urgent-btn,
header.main-header.apple-nav .highlighted-menu {
	display: none !important;
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
	header.main-header.apple-nav {
		position: fixed;
		height: auto;
	}
	header.main-header.apple-nav .navbar {
		height: 48px;
		max-width: 100%;
	}
	header.main-header.apple-nav .container-fluid,
	header.main-header.apple-nav .container {
		max-width: 100%;
		padding: 0 16px;
	}
	header.main-header.apple-nav .navbar-brand img {
		height: 32px;
	}
	header.main-header.apple-nav .nav-dropdown {
		position: static;
		width: 100%;
		max-height: none;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		padding: 16px 0;
		background: #fbfbfd;
		border-top: 1px solid #d2d2d7;
		overflow: visible;
		transition: none;
	}
	header.main-header.apple-nav .nav-dropdown-inner {
		grid-template-columns: 1fr !important;
	}
	header.main-header.apple-nav .nav-dropdown-grid {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}
	header.main-header.apple-nav .nav-dd-big-link,
	header.main-header.apple-nav .nav-dd-main-link {
		font-size: 20px !important;
	}
	header.main-header.apple-nav .nav-dd-col-explore {
		border-right: none;
		padding-right: 0;
		border-bottom: 1px solid #e0e0e5;
		padding-bottom: 16px;
		margin-bottom: 8px;
	}
	header.main-header.apple-nav .nav-dd-section-border {
		grid-template-columns: 1fr !important;
		margin-top: 12px;
		padding-top: 12px;
	}
	header.main-header.apple-nav .header-btn {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	header.main-header.apple-nav .header-btn {
		display: flex !important;
		align-items: center;
		gap: 12px;
	}
}

/* ================================================================
   APPLE-STYLE FOOTER
   ================================================================ */
.footer-apple {
	background-color: var(--accent-color, #274543) !important;
	color: #fff;
	padding: 0;
	margin: 0;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	border-top: none;
}
.footer-apple * {
	box-sizing: border-box;
}
.footer-apple-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 32px 20px;
}
.footer-apple-disclaimer {
	font-size: 11px;
	color: rgba(255,255,255,0.6);
	line-height: 1.5;
	margin: 0 0 32px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-apple-disclaimer p {
	font-size: 11px;
	color: rgba(255,255,255,0.6);
	line-height: 1.5;
	margin: 0 0 10px 0;
}
.footer-apple-disclaimer p:last-child {
	margin-bottom: 0;
}
.footer-apple-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px;
	margin-bottom: 32px;
}
.footer-apple-col h4 {
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 8px 0;
	padding: 0;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	font-family: inherit;
}
.footer-apple-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-apple-col ul li {
	margin: 0;
	padding: 0;
	line-height: 1.8;
}
.footer-apple-col a,
.footer-apple-col ul li a {
	font-size: 12px;
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	line-height: 1.8;
	font-weight: 400;
	transition: color 0.3s ease;
	font-family: inherit;
	background: none;
	padding: 0;
	display: inline;
}
.footer-apple-col a:hover,
.footer-apple-col ul li a:hover {
	text-decoration: none;
	color: var(--accent-secondary-color, #ADB295);
}
.footer-apple-divider {
	border: none;
	border-top: 1px solid rgba(255,255,255,0.1);
	margin: 0 0 16px 0;
	padding: 0;
	height: 0;
}
.footer-apple-logo {
	margin-bottom: 28px;
}
.footer-apple-logo img {
	height: 36px;
	width: auto;
}
.footer-apple-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}
.footer-apple-bottom-left {
	font-size: 11px;
	color: rgba(255,255,255,0.5);
	margin: 0;
}
.footer-apple-bottom-left p {
	font-size: 11px;
	color: rgba(255,255,255,0.5);
	margin: 0;
}
.footer-apple-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	font-size: 11px;
}
.footer-apple-legal a {
	font-size: 11px;
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	padding: 0 10px;
	border-right: 1px solid rgba(255,255,255,0.15);
	line-height: 1;
	transition: color 0.3s ease;
}
.footer-apple-legal a:last-child {
	border-right: none;
	padding-right: 0;
}
.footer-apple-legal a:first-child {
	padding-left: 0;
}
.footer-apple-legal a:hover {
	text-decoration: none;
	color: var(--accent-secondary-color, #ADB295);
}
.footer-apple-compliance {
	font-size: 11px;
	color: rgba(255,255,255,0.4);
	line-height: 1.5;
	margin: 16px 0 0 0;
	padding: 16px 0 0 0;
	border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-apple-compliance p {
	font-size: 11px;
	color: rgba(255,255,255,0.4);
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 991px) {
	.footer-apple-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}
@media (max-width: 767px) {
	.footer-apple-container {
		padding: 32px 20px 16px;
	}
	.footer-apple-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.footer-apple-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.footer-apple-legal {
		flex-wrap: wrap;
	}
}
@media (max-width: 479px) {
	.footer-apple-grid {
		grid-template-columns: 1fr;
	}
}
}
/* ==========================================================================
   Licensing Service Pages — Additional Sections
   ========================================================================== */

.service-deliverables-box,
.service-reg-framework-box,
.service-timeline-box,
.service-jurisdictions-box {
	margin-top: 64px;
}

.reg-framework-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 24px;
}

.reg-framework-col {
	background: rgba(20, 52, 37, 0.04);
	border: 1px solid rgba(20, 52, 37, 0.08);
	border-radius: 14px;
	padding: 24px;
}

.reg-framework-col h3 {
	font-size: 16px;
	font-weight: 700;
	color: #143425;
	margin-bottom: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.reg-framework-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.reg-framework-col ul li {
	font-size: 14px;
	line-height: 1.55;
	color: #4a5a52;
	padding: 8px 0;
	border-bottom: 1px dashed rgba(20, 52, 37, 0.1);
}

.reg-framework-col ul li:last-child {
	border-bottom: 0;
}

.reg-framework-col ul li strong {
	color: #143425;
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
}

@media (max-width: 991px) {
	.reg-framework-grid { grid-template-columns: 1fr; }
}

.service-timeline-list {
	margin-top: 24px;
	border-top: 1px solid rgba(20, 52, 37, 0.08);
}

.timeline-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 28px;
	padding: 22px 0;
	border-bottom: 1px solid rgba(20, 52, 37, 0.08);
}

.timeline-duration strong {
	color: #143425;
	font-size: 15px;
	letter-spacing: 0.02em;
}

.timeline-body h4 {
	margin: 0 0 6px 0;
	font-size: 18px;
	font-weight: 600;
	color: #143425;
}

.timeline-body p {
	margin: 0;
	color: #4a5a52;
	line-height: 1.55;
}

@media (max-width: 767px) {
	.timeline-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

.service-jurisdictions-box .service-benefit-box + .service-benefit-box {
	margin-top: 24px;
}

/* === GSG APPLE MODAL & BENTO SYSTEM START === */

/* ------------------------------------------------------------------
 * Apple Education-Initiative style Modal
 * Full-viewport editorial card with narrow text column, large whitespace
 * ------------------------------------------------------------------ */
.gsg-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.gsg-modal.gsg-modal-open {
  opacity: 1;
  visibility: visible;
}

.gsg-modal-content {
  position: relative;
  background: #fff;
  border-radius: 28px;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2),
              opacity 0.35s ease;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.gsg-modal.gsg-modal-open .gsg-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Close button — FIXED to viewport top-right, stays there regardless of
 * user scroll within the modal. Requires modals.js to NOT use
 * position:fixed on body for scroll lock (use overflow:hidden instead).
 * The max() calc keeps it aligned with the 1200px modal card edge. */
.gsg-modal-close {
  position: fixed;
  top: 40px;
  right: max(40px, calc((100vw - 1200px) / 2 + 40px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: none;
  color: #1d1d1f;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 10001;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gsg-modal.gsg-modal-open ~ .gsg-modal-close,
.gsg-modal.gsg-modal-open .gsg-modal-close {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gsg-modal-close:hover {
  background: #fff;
  transform: scale(1.08);
}

/* Reserve space at top of the hero for the close button */
.gsg-modal-hero { padding-top: 96px; }

@media (max-width: 768px) {
  .gsg-modal-close { top: 20px; right: 20px; width: 40px; height: 40px; }
}

/* ---- Editorial inner layout ---- */

/* 1. Hero block — large visual header, narrow text below */
.gsg-modal-hero {
  background: linear-gradient(160deg, #1d1d1f 0%, #274543 100%);
  color: #fff;
  padding: 96px 24px 64px;
  text-align: center;
  position: relative;
}

.gsg-modal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 70% 30%, rgba(173, 178, 149, 0.25) 0%, transparent 55%),
                    radial-gradient(circle at 20% 80%, rgba(39, 69, 67, 0.35) 0%, transparent 50%);
  pointer-events: none;
}

.gsg-modal-hero > * { position: relative; z-index: 1; }

.gsg-modal-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #ADB295;
  text-transform: uppercase;
  margin: 0 0 18px 0;
}

.gsg-modal-hero h1,
.gsg-modal-hero h2 {
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.05;
  margin: 0 auto 24px;
  max-width: 900px;
}

.gsg-modal-lead {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  max-width: 720px;
  margin: 0 auto;
}

.gsg-modal-stat {
  display: inline-block;
  padding: 12px 28px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-top: 32px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* 2. Body — narrow centered reading column */
.gsg-modal-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 80px 24px 120px;
}

.gsg-modal-body > h3 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  line-height: 1.1;
  margin: 64px 0 20px 0;
}

.gsg-modal-body > h3:first-child { margin-top: 0; }

.gsg-modal-body > p {
  font-size: 19px;
  line-height: 1.55;
  color: #424245;
  margin: 0 0 20px 0;
  font-weight: 400;
}

/* Pull quote */
.gsg-modal-body blockquote,
.gsg-modal-body .gsg-modal-pull {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #1d1d1f;
  border-left: 4px solid #274543;
  padding: 8px 0 8px 24px;
  margin: 48px 0;
}

/* 3. Section band — wider, colored background for mid-modal emphasis */
.gsg-modal-band {
  background: #f5f5f7;
  padding: 80px 24px;
  text-align: center;
}

.gsg-modal-band-inner {
  max-width: 880px;
  margin: 0 auto;
}

.gsg-modal-band h3 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #1d1d1f;
}

.gsg-modal-band p {
  font-size: 17px;
  color: #424245;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 680px;
}

/* 4. Item grid inside band — 2-col or 3-col */
.gsg-modal-tiles {
  display: grid;
  gap: 18px;
  margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  text-align: left;
}

.gsg-modal-tile {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
}

.gsg-modal-tile h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #1d1d1f;
  margin: 0 0 8px;
  line-height: 1.25;
}

.gsg-modal-tile p {
  font-size: 14px;
  color: #424245;
  line-height: 1.5;
  margin: 0;
}

.gsg-modal-tile .gsg-modal-tile-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #274543;
  margin-bottom: 8px;
  display: block;
}

/* 5. Big number row (Apple-style stat bar) */
.gsg-modal-bignums {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  text-align: center;
  padding: 80px 24px;
  max-width: 980px;
  margin: 0 auto;
}

.gsg-modal-bignum .gsg-modal-bignum-val {
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #1d1d1f;
  margin-bottom: 10px;
}

.gsg-modal-bignum .gsg-modal-bignum-label {
  font-size: 15px;
  color: #6e6e73;
  letter-spacing: 0.01em;
}

/* 6. List (reading) */
.gsg-modal-body ul,
.gsg-modal-body ol {
  padding-left: 0;
  list-style: none;
  margin: 20px 0 32px 0;
}

.gsg-modal-body li {
  padding: 14px 0 14px 36px;
  position: relative;
  font-size: 17px;
  line-height: 1.55;
  color: #424245;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.gsg-modal-body li:last-child { border-bottom: none; }

.gsg-modal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #274543;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='white'%20d='M6.5%2010.9%203.6%208l-1%201L6.5%2013l7-7-1-1z'/%3E%3C/svg%3E") center/16px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='white'%20d='M6.5%2010.9%203.6%208l-1%201L6.5%2013l7-7-1-1z'/%3E%3C/svg%3E") center/16px no-repeat;
}

.gsg-modal-body li strong { color: #1d1d1f; font-weight: 600; }

/* 7. CTA footer */
.gsg-modal-footer-cta {
  background: #1d1d1f;
  color: #fff;
  padding: 72px 24px;
  text-align: center;
}

.gsg-modal-footer-cta h3 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 16px;
}

.gsg-modal-footer-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.5;
}

.gsg-modal-cta {
  display: inline-block;
  padding: 14px 32px;
  background: #fff;
  color: #1d1d1f !important;
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: transform 0.2s ease, background 0.2s ease;
}

.gsg-modal-cta:hover {
  transform: translateY(-1px);
  background: #ADB295;
  color: #1d1d1f !important;
}

@media (max-width: 768px) {
  .gsg-modal { padding: 16px 10px; }
  .gsg-modal-content { border-radius: 20px; }
  .gsg-modal-hero { padding: 64px 20px 40px; }
  .gsg-modal-body { padding: 56px 20px 80px; }
  .gsg-modal-band { padding: 56px 20px; }
  .gsg-modal-bignums { padding: 56px 20px; gap: 28px; }
  .gsg-modal-footer-cta { padding: 56px 20px; }
}

/* ------------------------------------------------------------------
 * Bento Grid Card System
 * ------------------------------------------------------------------ */
.gsg-bento {
  display: grid;
  gap: 18px;
  margin: 40px 0;
}

.gsg-bento-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gsg-bento-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gsg-bento-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Asymmetric: 1 big + 4 small */
.gsg-bento-hero {
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: minmax(200px, auto);
}
.gsg-bento-hero > :first-child {
  grid-row: 1 / span 2;
}

/* Feature wall: 3x3 with variations */
.gsg-bento-feature {
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: dense;
}
.gsg-bento-feature .gsg-card-wide { grid-column: span 2; }
.gsg-bento-feature .gsg-card-tall { grid-row: span 2; }

@media (max-width: 991px) {
  .gsg-bento-3, .gsg-bento-4, .gsg-bento-hero, .gsg-bento-feature {
    grid-template-columns: repeat(2, 1fr);
  }
  .gsg-bento-feature .gsg-card-wide { grid-column: span 2; }
  .gsg-bento-feature .gsg-card-tall { grid-row: span 1; }
  .gsg-bento-hero > :first-child { grid-row: span 1; }
}

@media (max-width: 600px) {
  .gsg-bento-2, .gsg-bento-3, .gsg-bento-4, .gsg-bento-hero, .gsg-bento-feature {
    grid-template-columns: 1fr;
  }
  .gsg-bento-feature .gsg-card-wide { grid-column: span 1; }
}

/* Card (bento cell) */
.gsg-card {
  background: #f5f5f7;
  border-radius: 22px;
  padding: 32px;
  color: #1d1d1f;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  cursor: default;
}

.gsg-card[data-modal-trigger] {
  cursor: pointer;
}

.gsg-card[data-modal-trigger]:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.gsg-card-dark {
  background: #1d1d1f;
  color: #f5f5f7;
}
.gsg-card-dark h3, .gsg-card-dark h4 { color: #fff; }
.gsg-card-dark p { color: rgba(255, 255, 255, 0.7); }

.gsg-card-accent {
  background: #274543;
  color: #fff;
}
.gsg-card-accent h3, .gsg-card-accent h4 { color: #fff; }
.gsg-card-accent p { color: rgba(255, 255, 255, 0.85); }

.gsg-card-sage {
  background: #ADB295;
  color: #1d1d1f;
}

.gsg-card-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 10px;
}

.gsg-card h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 10px 0;
}

.gsg-card h4 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 8px 0;
}

.gsg-card p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 8px 0;
  color: #424245;
}

.gsg-card-more {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #274543;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gsg-card-dark .gsg-card-more,
.gsg-card-accent .gsg-card-more {
  color: #ADB295;
}

.gsg-card-more::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  font-weight: 600;
  font-size: 16px;
  transition: background 0.2s ease;
}

.gsg-card-dark .gsg-card-more::after,
.gsg-card-accent .gsg-card-more::after {
  background: rgba(255, 255, 255, 0.12);
}

.gsg-card[data-modal-trigger]:hover .gsg-card-more::after {
  background: #274543;
  color: #fff;
}

.gsg-card-big-number {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 10px;
  color: #274543;
}

.gsg-card-dark .gsg-card-big-number,
.gsg-card-accent .gsg-card-big-number {
  color: #ADB295;
}

/* Section header for bento area */
.gsg-section {
  padding: 80px 0;
}

.gsg-section-eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: #274543;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.gsg-section-heading {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  line-height: 1.05;
  margin: 0 0 16px 0;
  max-width: 880px;
}

.gsg-section-sub {
  font-size: 20px;
  font-weight: 400;
  color: #424245;
  line-height: 1.5;
  max-width: 760px;
  margin: 0 0 40px 0;
}

@media (max-width: 768px) {
  .gsg-section-heading { font-size: 32px; }
  .gsg-section-sub { font-size: 17px; }
  .gsg-card { padding: 24px; min-height: 160px; }
  .gsg-card h3 { font-size: 22px; }
  .gsg-card-big-number { font-size: 42px; }
}

/* === GSG APPLE MODAL & BENTO SYSTEM END === */


/* === CLAPP DESIGN SYSTEM v1 === */
/* ==========================================================================
 * CLAPP — Conversion-first editorial pattern for flagship service pages.
 *
 * Principles (audit these on any change):
 *   1. One focal point per section (one headline + one action).
 *   2. Body max-width ~62–64ch; display max-width ~22ch.
 *   3. clamp() typographic scale + clamp() section padding for rhythm.
 *   4. Hover + focus-visible + prefers-reduced-motion respected everywhere.
 *   5. Semantic HTML (button for modal triggers, nav for breadcrumbs, h1/h2).
 * ========================================================================== */

.clapp-hero, .clapp-proof, .clapp-section { box-sizing: border-box; }
.clapp-hero *, .clapp-proof *, .clapp-section *,
.clapp-plus-cta *, .clapp-cta-primary * { box-sizing: border-box; }

/* ---------- HERO ---------- */
.clapp-hero {
  position: relative;
  background: linear-gradient(135deg, #0d2624 0%, #143425 55%, #274543 100%);
  color: #fff;
  padding: clamp(120px, 18vh, 200px) 0 clamp(80px, 12vh, 140px);
  overflow: hidden;
  margin-top: 0;
}
.clapp-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(173,178,149,0.18) 0%, transparent 55%),
    radial-gradient(circle at 82% 72%, rgba(173,178,149,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.clapp-hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.clapp-crumbs {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 44px;
}
.clapp-crumbs a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.clapp-crumbs a:hover { color: rgba(255,255,255,0.9); }
.clapp-crumbs [aria-current="page"] { color: rgba(255,255,255,0.92); }

.clapp-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ADB295; margin-bottom: 20px;
}
.clapp-eyebrow-dark { color: #274543; }
.clapp-eyebrow-sage { color: #ADB295; }
.clapp-eyebrow-deep { color: #0d2624; }

.clapp-hero h1 {
  font-size: clamp(44px, 6.8vw, 92px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 20ch;
  margin: 0 0 28px;
  color: #fff;
}
.clapp-hero h1 em {
  font-style: normal;
  color: #ADB295;
}
.clapp-lead {
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 1.45;
  max-width: 58ch;
  margin: 0 0 44px;
}

/* ---------- CTA BUTTONS ---------- */
.clapp-cta-row {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
}
.clapp-cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #0d2624;
  padding: 17px 28px;
  border-radius: 999px;
  font-size: 16px; font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.clapp-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  background: #fafafa; color: #0d2624;
}
.clapp-cta-primary:focus-visible { outline: 3px solid #ADB295; outline-offset: 3px; }
.clapp-cta-primary-dark { background: #143425; color: #fff; }
.clapp-cta-primary-dark:hover { background: #274543; color: #fff; box-shadow: 0 12px 32px rgba(13,38,36,0.24); }
/* Emergency CTA — any clapp-cta-primary that points to a tel: link gets the
   rust crisis treatment per CLAPP palette discipline. Maximum contrast on
   any hero background, signals urgency, matches the closing-CTA pattern
   already used on enforcement page footers. */
.clapp-cta-primary[href^="tel:"] {
  background: #D97757;
  color: #0a0b0a;
  box-shadow: 0 8px 24px rgba(217, 119, 87, 0.32);
}
.clapp-cta-primary[href^="tel:"]:hover {
  background: #c46441;
  color: #0a0b0a;
  box-shadow: 0 14px 36px rgba(217, 119, 87, 0.42);
}
.clapp-cta-primary[href^="tel:"]:focus-visible {
  outline: 3px solid #D97757;
  outline-offset: 3px;
}
.clapp-cta-phone {
  color: rgba(255,255,255,0.82); font-size: 16px; font-weight: 500;
  text-decoration: none; padding: 17px 4px;
  transition: color 0.15s ease;
}
.clapp-cta-phone:hover { color: #fff; }
.clapp-cta-phone-dark { color: #274543; }
.clapp-cta-phone-dark:hover { color: #0d2624; }

/* ---------- PROOF STRIP ---------- */
.clapp-proof {
  background: #f5f5f7;
  padding: clamp(56px, 8vh, 100px) 0;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.clapp-proof-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.clapp-stat-num {
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 700; letter-spacing: -0.03em;
  color: #143425; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.clapp-stat-num span { font-size: 0.55em; color: #274543; margin-left: 2px; font-weight: 600; }
.clapp-stat-lab {
  font-size: 14px; color: #6e6e73; margin-top: 10px;
  letter-spacing: 0.01em;
}

/* ---------- SECTION SHELL ---------- */
.clapp-section { padding: clamp(80px, 13vh, 180px) 0; }
.clapp-section-light   { background: #fff;     color: #1d1d1f; }
.clapp-section-gray    { background: #f5f5f7;  color: #1d1d1f; }
.clapp-section-sage    { background: #ADB295;  color: #0d2624; }
.clapp-section-dark    { background: #0d2624;  color: #fff; }
.clapp-section-closing { background: #e8ebe2;  color: #1d1d1f; }

.clapp-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.clapp-wrap-narrow {
  max-width: 900px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

.clapp-h2 {
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 32px;
  max-width: 22ch;
  color: inherit;
}
.clapp-body {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: #424245;
  max-width: 62ch;
  margin: 0 0 44px;
}
.clapp-body-max { max-width: 64ch; }
.clapp-section-dark .clapp-body { color: rgba(255,255,255,0.78); }

/* ---------- PLUS CTA ---------- */
.clapp-plus-cta {
  display: inline-flex; align-items: center; gap: 14px;
  background: #143425; color: #fff; border: 0;
  padding: 14px 18px 14px 24px;
  border-radius: 999px;
  font-size: 15.5px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.clapp-plus-cta:hover {
  background: #274543;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(13,38,36,0.18);
}
.clapp-plus-cta:focus-visible { outline: 3px solid #ADB295; outline-offset: 3px; }
.clapp-plus-cta .clapp-plus-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  font-size: 19px; font-weight: 400; line-height: 1;
  transition: background 0.2s ease, transform 0.35s cubic-bezier(0.2,0.9,0.3,1);
}
.clapp-plus-cta:hover .clapp-plus-icon {
  background: rgba(255,255,255,0.32);
  transform: rotate(90deg);
}
.clapp-section-sage .clapp-plus-cta { background: #0d2624; }
.clapp-section-sage .clapp-plus-cta:hover { background: #143425; }

/* ---------- MILESTONES — HomePod accent-list v4 ---------- */
/* Reference: apple.com/homepod-2nd-generation "Built-in intelligence that
   speaks for itself" — dark block, numbered badge + accent keyword +
   continuation text on a single line. Works with existing HTML
   (<div class="clapp-ms-week"> + <div class="clapp-ms-title">) via flex.
   No horizontal scroll, no arrow buttons needed.
*/
.clapp-milestones {
  list-style: none;
  margin: 0 0 32px;
  background: #f5f5f7;
  border-radius: 28px;
  padding: 32px 44px;
  counter-reset: m;
  display: block;
  overflow: visible;
  max-width: 1060px;
}
.clapp-milestones li {
  counter-increment: m;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
.clapp-milestones li:last-child { border-bottom: none; }
.clapp-milestones li::before {
  content: counter(m, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 10px;
  color: #5a5f63;
  font-family: "Mona Sans", sans-serif;
  font-weight: 620;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
}
.clapp-milestones li .clapp-ms-week,
.clapp-milestones li .clapp-ms-title {
  font-family: "Mona Sans", sans-serif;
  font-weight: 620;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
  padding: 0;
  text-transform: none;
}
.clapp-milestones li .clapp-ms-week {
  color: #143425;
  flex: 0 0 auto;
}
.clapp-milestones li .clapp-ms-week::after {
  content: ',';
  color: #143425;
}
.clapp-milestones li .clapp-ms-title {
  color: #17191b;
  flex: 1 1 auto;
}
/* Any legacy JS-injected wrapper/controls: keep hidden (see clapp-bento.js v4 removes them). */
.clapp-milestones-wrap { position: relative; }
.clapp-milestones-controls { display: none !important; }
.clapp-milestones-prev,
.clapp-milestones-next { display: none !important; }

@media (max-width: 640px) {
  .clapp-milestones { padding: 24px 22px; border-radius: 22px; }
  .clapp-milestones li { gap: 14px; flex-wrap: wrap; padding: 12px 0; }
  .clapp-milestones li::before { width: 36px; height: 36px; font-size: 12px; }
}

/* ---------- COST BIG NUMBER ---------- */
.clapp-hero-num {
  font-size: clamp(72px, 13vw, 180px);
  font-weight: 700; letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff; margin: 0 0 28px;
  font-variant-numeric: tabular-nums;
}
.clapp-dark-lead {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500; line-height: 1.35;
  color: rgba(255,255,255,0.92);
  max-width: 32ch;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.clapp-dark-sub {
  font-size: 16px; color: rgba(255,255,255,0.6);
  max-width: 52ch; margin: 0;
}

/* ---------- DELIVERABLES ---------- */
.clapp-deliv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 44px;
}
.clapp-deliv-card {
  background: #f5f5f7;
  border-radius: 22px;
  padding: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.clapp-deliv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(13,38,36,0.06);
}
.clapp-deliv-num {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #274543;
  margin-bottom: 14px;
}
.clapp-deliv-title {
  font-size: 18px; font-weight: 600;
  line-height: 1.4; color: #1d1d1f; letter-spacing: -0.01em;
}

/* ---------- OUTCOMES ---------- */
.clapp-outcome-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-bottom: 44px;
}
.clapp-outcome-big {
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 700; letter-spacing: -0.025em;
  color: #0d2624; line-height: 1;
  margin-bottom: 12px;
}
.clapp-outcome-body {
  font-size: 16px; line-height: 1.55;
  color: #143425;
  max-width: 34ch;
}

/* ---------- LEGAL CITES PILLS ---------- */
.clapp-cites {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 40px;
}
.clapp-cites span {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  background: rgba(20, 52, 37, 0.06);
  color: #143425;
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(20, 52, 37, 0.1);
}
/* Dark-bg override: when .clapp-cites sits inside a .is-blur parallax
 * section, flip the chip pills + the plus-CTA to white-on-glass so
 * they read against the dark scrim. */
.clapp-section-local-bg.is-blur .clapp-cites span {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.clapp-section-local-bg.is-blur .clapp-plus-cta {
  background: rgba(255, 255, 255, 0.92);
  color: #143425;
}
.clapp-section-local-bg.is-blur .clapp-plus-cta:hover {
  background: #fff;
}

/* ---------- FAQ TEASE ---------- */
.clapp-faq-tease {
  display: grid; gap: 18px;
  margin: 0 0 44px;
  max-width: 780px;
}
.clapp-faq-item {
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  border: 1px solid rgba(20, 52, 37, 0.08);
}
.clapp-faq-q {
  font-size: 18px; font-weight: 600;
  color: #1d1d1f; margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.clapp-faq-a {
  font-size: 16px; line-height: 1.55;
  color: #424245;
}

/* ---------- CLOSING ---------- */
.clapp-closing-inner { text-align: left; }
.clapp-closing-h2 { max-width: 26ch; }
.clapp-closing-body { margin-bottom: 36px; }
.clapp-closing-ctas { gap: 12px 24px; }

/* ---------- MOBILE ---------- */
@media (max-width: 640px) {
  .clapp-hero { padding: 100px 0 72px; }
  .clapp-section { padding: 72px 0; }
  .clapp-crumbs { margin-bottom: 32px; }
  .clapp-hero h1 { max-width: none; }
  .clapp-h2 { max-width: none; }
  .clapp-cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .clapp-hero .clapp-cta-primary { justify-content: center; }
  .clapp-deliv-card { padding: 26px 24px; }
  .clapp-faq-item { padding: 22px 24px; }
}

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .clapp-cta-primary,
  .clapp-plus-cta,
  .clapp-plus-cta .clapp-plus-icon,
  .clapp-milestones li,
  .clapp-deliv-card {
    transition: none !important;
    transform: none !important;
  }
}

/* === END CLAPP DESIGN SYSTEM v1 === */




/* === CLAPP PARALLAX v1 === */
/* Apple-style full-bleed editorial break — image moves ~30% of scroll speed.
 * Height responsive: stays impactful on desktop, doesn't dominate mobile. */

.clapp-editorial-break {
  position: relative;
  height: clamp(540px, 90vh, 860px);
  overflow: hidden;
  background: #0d2624;           /* fallback while image loads */
  isolation: isolate;
  margin: clamp(40px, 6vh, 80px) 0;
}
/* Tight-fit variant — opt in by adding .is-tight to .clapp-editorial-break
 * when the bg image is a fully-composed photo (e.g. handshake, portrait)
 * that the default 220%-height parallax zoom crops awkwardly. Keeps a
 * gentle parallax (range tightened in JS to ±60px) but with a much
 * smaller oversize so the composition reads at near-natural framing. */
.clapp-editorial-break.is-tight {
  height: clamp(420px, 64vh, 680px);
}
.clapp-editorial-break.is-tight .clapp-parallax-img {
  top: -25% !important;
  height: 150% !important;
  /* transform left undefined so JS parallax can still apply its translate */
}
.clapp-parallax-img {
  position: absolute;
  top: -60%;
  left: 0;
  width: 100%;
  height: 220%;                  /* extra 120% so ±250px parallax has plenty of headroom */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.clapp-parallax-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 38, 36, 0.10) 0%,
    rgba(13, 38, 36, 0.22) 100%
  );
  pointer-events: none;
}
.clapp-editorial-caption {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(48px, 7vh, 96px);
  max-width: 48ch;
  color: #fff;
  z-index: 2;
}
.clapp-editorial-caption .clapp-eyebrow {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 18px;
}
.clapp-editorial-caption h3 {
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  color: #fff;
}

/* Don't apply parallax on iOS where it's janky; just pin the image. */
@supports (-webkit-touch-callout: none) {
  .clapp-parallax-img { top: 0; height: 100%; transform: none !important; }
}

/* Motion: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .clapp-parallax-img { transform: none !important; top: 0; height: 100%; }
}

/* === END CLAPP PARALLAX v1 === */



/* === CLAPP ANIMATE v1 === */
/* Apple-style scroll-triggered entrance.
 * Sections + their grid children animate on enter; captions on parallax breaks
 * slide up with a delay so the image lands first. Hero is never animated so
 * above-the-fold content stays instant.
 *
 * No-JS friendly: these styles only engage once html.clapp-js is set.
 */

/* ---- SECTION ENTRANCE ---- */
.clapp-js .clapp-section,
.clapp-js .clapp-editorial-break {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.clapp-js .clapp-section.is-visible,
.clapp-js .clapp-editorial-break.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- GRID ITEM CASCADE ---- */
.clapp-js .clapp-milestones li,
.clapp-js .clapp-deliv-card,
.clapp-js .clapp-outcome,
.clapp-js .clapp-faq-item,
.clapp-js .clapp-cites span {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Reveal when parent section is visible, with stagger */
.clapp-js .clapp-section.is-visible .clapp-milestones li,
.clapp-js .clapp-section.is-visible .clapp-deliv-card,
.clapp-js .clapp-section.is-visible .clapp-outcome,
.clapp-js .clapp-section.is-visible .clapp-faq-item,
.clapp-js .clapp-section.is-visible .clapp-cites span {
  opacity: 1;
  transform: none;
}

/* Stagger (up to 6 children — any beyond that get the final delay) */
.clapp-js .clapp-section.is-visible .clapp-milestones li:nth-child(1),
.clapp-js .clapp-section.is-visible .clapp-deliv-card:nth-child(1),
.clapp-js .clapp-section.is-visible .clapp-outcome:nth-child(1),
.clapp-js .clapp-section.is-visible .clapp-faq-item:nth-child(1),
.clapp-js .clapp-section.is-visible .clapp-cites span:nth-child(1) { transition-delay: 220ms; }

.clapp-js .clapp-section.is-visible .clapp-milestones li:nth-child(2),
.clapp-js .clapp-section.is-visible .clapp-deliv-card:nth-child(2),
.clapp-js .clapp-section.is-visible .clapp-outcome:nth-child(2),
.clapp-js .clapp-section.is-visible .clapp-faq-item:nth-child(2),
.clapp-js .clapp-section.is-visible .clapp-cites span:nth-child(2) { transition-delay: 330ms; }

.clapp-js .clapp-section.is-visible .clapp-milestones li:nth-child(3),
.clapp-js .clapp-section.is-visible .clapp-deliv-card:nth-child(3),
.clapp-js .clapp-section.is-visible .clapp-outcome:nth-child(3),
.clapp-js .clapp-section.is-visible .clapp-cites span:nth-child(3) { transition-delay: 440ms; }

.clapp-js .clapp-section.is-visible .clapp-milestones li:nth-child(4),
.clapp-js .clapp-section.is-visible .clapp-cites span:nth-child(4) { transition-delay: 550ms; }

.clapp-js .clapp-section.is-visible .clapp-milestones li:nth-child(5),
.clapp-js .clapp-section.is-visible .clapp-cites span:nth-child(5) { transition-delay: 660ms; }

.clapp-js .clapp-section.is-visible .clapp-milestones li:nth-child(6),
.clapp-js .clapp-section.is-visible .clapp-cites span:nth-child(6) { transition-delay: 770ms; }

.clapp-js .clapp-section.is-visible .clapp-cites span:nth-child(n+7) { transition-delay: 880ms; }

/* ---- EDITORIAL BREAK: CAPTION SLIDE-UP (image has parallax already) ---- */
.clapp-js .clapp-editorial-break .clapp-editorial-caption {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 350ms,
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 350ms;
}
.clapp-js .clapp-editorial-break.is-visible .clapp-editorial-caption {
  opacity: 1;
  transform: none;
}

/* ---- REDUCED MOTION — nullify everything ---- */
@media (prefers-reduced-motion: reduce) {
  .clapp-js .clapp-section,
  .clapp-js .clapp-section.is-visible,
  .clapp-js .clapp-editorial-break,
  .clapp-js .clapp-editorial-break.is-visible,
  .clapp-js .clapp-milestones li,
  .clapp-js .clapp-deliv-card,
  .clapp-js .clapp-outcome,
  .clapp-js .clapp-faq-item,
  .clapp-js .clapp-cites span,
  .clapp-js .clapp-editorial-caption {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* === END CLAPP ANIMATE v1 === */


/* === CLAPP MODAL UPGRADES v1 === */
/* Banner image sitting above .gsg-modal-hero.
 * Height tracks the modal's hero vibe; gradient fade into hero bg below. */
.gsg-modal-banner {
  /* Banner image hidden sitewide — modals open straight to .gsg-modal-hero. */
  display: none;
}

/* When a banner precedes the hero, soften the hero's top padding. */
.gsg-modal-banner + .gsg-modal-hero {
  padding-top: clamp(56px, 8vh, 96px);
}

/* ---- CAP MODAL GRIDS AT 2 COLUMNS ---- */
.gsg-modal-tiles {
  grid-template-columns: repeat(2, 1fr) !important;
}
.gsg-modal-bignums {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Collapse to single column on narrow screens */
@media (max-width: 720px) {
  .gsg-modal-tiles,
  .gsg-modal-bignums {
    grid-template-columns: 1fr !important;
  }
}

/* Banner scales slightly on modal open — subtle, only in reduced-motion-off */
@media (prefers-reduced-motion: no-preference) {
  .gsg-modal-banner {
    transform: scale(1.04);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
  }
  .gsg-modal.gsg-modal-open .gsg-modal-banner {
    transform: scale(1);
  }
}

/* === END CLAPP MODAL UPGRADES v1 === */


/* === CLAPP HERO PARALLAX v1 === */
/* Hero gets a parallax image at the back; the dark green linear-gradient
 * becomes a semi-transparent overlay so the image shows through. */

.clapp-hero {
  /* solid fallback while image loads; original linear-gradient moves to .clapp-hero-tint */
  background: #0d2624 !important;
}

.clapp-hero-image {
  position: absolute;
  top: -70%;
  left: -4%;
  width: 108%;
  height: 240%;                   /* slightly oversized so edges don't show during parallax */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(10px) brightness(1.12);   /* brightness lift normalizes darker AI aerials to match desert-bright baseline */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  z-index: 0;
}

/* Tint + radial ornaments disabled — hero image shows unfiltered */
.clapp-hero-tint,
.clapp-hero-bg {
  display: none;
}
/* Subtle readability scrim — much lighter so the AI hero photo shows through.
 * Bottom-weighted gradient so text area at lower-middle stays legible,
 * while the top 40% of the image is barely touched. */
.clapp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(13, 38, 36, 0.05) 0%,
      rgba(13, 38, 36, 0.14) 45%,
      rgba(13, 38, 36, 0.28) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Darker overlay variant — opt in by adding .is-darker to .clapp-hero
 * when the bg image is busy/bright (e.g. interior greenhouse) and the
 * default scrim isn't enough for H1 contrast. */
.clapp-hero.is-darker::after {
  background:
    linear-gradient(180deg,
      rgba(13, 38, 36, 0.22) 0%,
      rgba(13, 38, 36, 0.38) 50%,
      rgba(13, 38, 36, 0.58) 100%);
}
/* === CLAPP HERO VIDEO v1 ===
 * .has-video on .clapp-hero swaps the static parallax image for an
 * HTML5 <video class="clapp-hero-video"> that autoplays/loops/muted.
 * The video fills the hero at cover fit and sits behind the ::after
 * scrim so H1 text stays readable. Poster frame displays while the
 * video loads and as a fallback on devices that block autoplay. */
.clapp-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;               /* pinned tight to hero \u2014 no parallax */
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
/* Respect the user's motion preference — pause autoplay and fall back
 * to the poster image on systems that request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .clapp-hero-video { display: none; }
  .clapp-hero.has-video {
    background-image: var(--hero-poster, none);
    background-size: cover;
    background-position: center;
  }
}
/* === END CLAPP HERO VIDEO === */
.clapp-hero-inner {
  position: relative;
  z-index: 3;
}

/* iOS / reduced-motion: pin the hero image (same pattern as editorial breaks) */
@supports (-webkit-touch-callout: none) {
  .clapp-hero-image { top: 0; height: 100%; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .clapp-hero-image { transform: none !important; top: 0; height: 100%; }
}

/* === END CLAPP HERO PARALLAX v1 === */


/* === CLAPP BENTO SCROLL v1 === */
/* Full-bleed horizontal-scroll bento carousel.
 * Apple compare-style: first card aligns to container left, rightmost cards
 * bleed off-screen so users feel the affordance. Scroll-snap for tidy landing,
 * thin/subtle scrollbar, touch-friendly on mobile.
 */

.clapp-bento-scroll-wrap {
  position: relative;
  margin: 40px 0 44px;
}

.clapp-bento-scroll {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 16px 0 64px;
  /* First-card alignment: match the .clapp-wrap centering */
  padding-left: max(clamp(20px, 4vw, 40px), calc((100% - 1200px) / 2 + clamp(20px, 4vw, 40px)));
  padding-right: clamp(20px, 8vw, 140px);
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 52, 37, 0.25) transparent;
}
.clapp-bento-scroll::-webkit-scrollbar { height: 6px; }
.clapp-bento-scroll::-webkit-scrollbar-track { background: transparent; }
.clapp-bento-scroll::-webkit-scrollbar-thumb {
  background: rgba(20, 52, 37, 0.2);
  border-radius: 3px;
}
.clapp-bento-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 52, 37, 0.42);
}

/* Bento-card v2 — kicker killed, Apple-card treatment */
/* User direction (previous + this session): "01 · Kicker / Title / Blurb"
   format is weak. Hide the numeric kicker, punch up the title, add a
   subtle '+' affordance in the bottom-right of each card. */
.clapp-bento-card {
  flex: 0 0 clamp(280px, 28vw, 360px);
  scroll-snap-align: start;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 0.35s ease;
}
.clapp-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(13, 38, 36, 0.10);
}

.clapp-bento-card-img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #eceef0;
  position: relative;
  overflow: hidden;
}
.clapp-bento-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(13, 38, 36, 0.18) 100%);
  pointer-events: none;
}

.clapp-bento-card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
}
/* KILL the kicker ("01 · Type") — user flagged this repeatedly */
.clapp-bento-card-num {
  display: none !important;
}
.clapp-bento-card-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #143425;
  margin: 0;
  padding-right: 44px; /* leave room for '+' affordance */
}
.clapp-bento-card-blurb {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #424245;
  margin: 0;
  padding-right: 44px;
}
/* Apple-style '+' affordance in bottom-right */
.clapp-bento-card-body::after {
  content: '+';
  position: absolute;
  bottom: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #17191b;
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  transition: background 0.25s ease, transform 0.25s ease;
}
.clapp-bento-card:hover .clapp-bento-card-body::after {
  background: #143425;
  transform: scale(1.08);
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .clapp-bento-card { flex-basis: 78vw; border-radius: 20px; }
  .clapp-bento-scroll { padding-right: 40px; }
}

/* ---- CASCADE REVEAL for bento cards (hooks into .clapp-js / is-visible) ---- */
.clapp-js .clapp-bento-card {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.45s ease;
}
.clapp-js .clapp-section.is-visible .clapp-bento-card {
  opacity: 1;
  transform: none;
}
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(1) { transition-delay:  180ms; }
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(2) { transition-delay:  290ms; }
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(3) { transition-delay:  400ms; }
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(4) { transition-delay:  510ms; }
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(5) { transition-delay:  620ms; }
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(6) { transition-delay:  730ms; }
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(7) { transition-delay:  840ms; }
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(8) { transition-delay:  950ms; }
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(9) { transition-delay: 1060ms; }
.clapp-js .clapp-section.is-visible .clapp-bento-card:nth-child(10) { transition-delay: 1170ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .clapp-bento-card,
  .clapp-bento-card:hover,
  .clapp-bento-card-img,
  .clapp-js .clapp-bento-card,
  .clapp-js .clapp-section.is-visible .clapp-bento-card {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* === END CLAPP BENTO SCROLL v1 === */


/* === CLAPP HERO ANIM v1 === */
/* Hero H1 word cascade — JS splits words into .clapp-hero-word spans,
 * then adds .is-revealed to trigger the staggered reveal (delay set inline). */

.clapp-hero h1 .clapp-hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.clapp-hero h1.is-revealed .clapp-hero-word {
  opacity: 1;
  transform: none;
}

/* Count-up number gets tabular figures so width doesn't jitter as digits change */
.clapp-hero-num {
  font-variant-numeric: tabular-nums;
}

/* Reduced motion: reveal immediately */
@media (prefers-reduced-motion: reduce) {
  .clapp-hero h1 .clapp-hero-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* === END CLAPP HERO ANIM v1 === */

/* === CLAPP BENTO ARROWS v1 === */
/* Prev/next arrow buttons for horizontal bento carousels.
 * Circular, minimal, no shadow. Disabled state when at scroll edge.
 * Hidden on touch-primary devices (swipe is natural).
 */
.clapp-bento-scroll-wrap {
  position: relative;
}

.clapp-bento-prev,
.clapp-bento-next {
  position: absolute;
  top: calc(50% - 14px);              /* visually center against image area */
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(20, 52, 37, 0.14);
  color: #143425;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    opacity 0.25s ease,
    border-color 0.2s ease;
}
.clapp-bento-prev { left: clamp(6px, 1.4vw, 20px); }
.clapp-bento-next { right: clamp(6px, 1.4vw, 20px); }

.clapp-bento-prev:hover,
.clapp-bento-next:hover {
  background: #143425;
  color: #ffffff;
  border-color: #143425;
  transform: translateY(-50%) scale(1.06);
}
.clapp-bento-prev:focus-visible,
.clapp-bento-next:focus-visible {
  outline: 3px solid #ADB295;
  outline-offset: 3px;
}
.clapp-bento-prev[disabled],
.clapp-bento-next[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* Hide arrows on touch-primary devices — swipe is natural there */
@media (hover: none), (max-width: 640px) {
  .clapp-bento-prev,
  .clapp-bento-next { display: none; }
}

/* Reduced motion — kill button movement */
@media (prefers-reduced-motion: reduce) {
  .clapp-bento-prev,
  .clapp-bento-next,
  .clapp-bento-prev:hover,
  .clapp-bento-next:hover {
    transition: none !important;
    transform: translateY(-50%) !important;
  }
}

/* === END CLAPP BENTO ARROWS v1 === */


/* === CLAPP APPLE FAQ v1 === */
/* Apple-style FAQ accordion.
 * Full-width rows, thin divider lines, + icon on the right that rotates to ×.
 * Smooth max-height expand. Multiple rows may be open at once.
 */

.clapp-faq-section {
  background: #ffffff;
  padding: clamp(80px, 13vh, 180px) 0;
}
.clapp-faq-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.clapp-faq-section .clapp-h2 { margin-bottom: 36px; }
.clapp-faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(20, 52, 37, 0.14);
}
.clapp-faq-row {
  border-bottom: 1px solid rgba(20, 52, 37, 0.14);
}

.clapp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  padding: 16px 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: #1d1d1f;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}
.clapp-faq-q:hover { color: #143425; }
.clapp-faq-q:focus-visible {
  outline: 3px solid #ADB295;
  outline-offset: 3px;
  border-radius: 6px;
}

.clapp-faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(20, 52, 37, 0.2);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: #143425;
  background: transparent;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
.clapp-faq-q:hover .clapp-faq-icon {
  background: #143425;
  color: #ffffff;
  border-color: #143425;
}
.clapp-faq-row.is-open .clapp-faq-icon {
  transform: rotate(45deg);
}

/* Grid-template-rows trick — smooth open AND close.
 * Padding is zeroed when closed so nothing bleeds past the 0fr row. */
.clapp-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.clapp-faq-row.is-open .clapp-faq-a {
  grid-template-rows: 1fr;
}
.clapp-faq-a-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0;
  max-width: 72ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: #424245;
}
.clapp-faq-row.is-open .clapp-faq-a-inner { padding: 4px 0 20px; }
.clapp-faq-a-inner p { margin: 0 0 14px; }
.clapp-faq-a-inner p:last-child { margin-bottom: 0; }
.clapp-faq-a-inner strong { color: #1d1d1f; font-weight: 600; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .clapp-faq-icon,
  .clapp-faq-a {
    transition: none !important;
  }
}

/* === END CLAPP APPLE FAQ v1 === */


/* === CLAPP ARCHETYPE B v1 === */
/* ARCHETYPE B — Ongoing Service.
 * Split hero + cadence grid. Light/calm tonality vs Archetype A's dark-gradient full-bleed. */

.clapp-hero-split {
  position: relative;
  background: #f2f1ea;
  color: #1d1d1f;
  padding: clamp(100px, 16vh, 180px) 0 clamp(80px, 12vh, 140px);
  overflow: hidden;
}
.clapp-hero-split-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.clapp-hero-split-text .clapp-crumbs {
  color: rgba(13, 38, 36, 0.55);
  margin-bottom: 32px;
}
.clapp-hero-split-text .clapp-crumbs a { color: inherit; }
.clapp-hero-split-text .clapp-crumbs a:hover { color: rgba(13, 38, 36, 0.88); }
.clapp-hero-split-text .clapp-crumbs [aria-current="page"] { color: rgba(13, 38, 36, 0.9); }
.clapp-hero-split-text .clapp-eyebrow { color: #274543; }

.clapp-hero-split-text h1 {
  font-size: clamp(40px, 5.8vw, 82px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  max-width: 18ch;
  margin: 0 0 24px;
  color: #0d2624;
}
.clapp-hero-split-text h1 em {
  font-style: normal;
  color: #274543;
}
.clapp-hero-split-text .clapp-lead {
  color: #424245;
  max-width: 46ch;
  margin-bottom: 38px;
}
.clapp-hero-split-text .clapp-cta-primary {
  background: #143425;
  color: #ffffff;
}
.clapp-hero-split-text .clapp-cta-primary:hover {
  background: #274543;
  color: #ffffff;
}
.clapp-hero-split-text .clapp-cta-phone {
  color: #274543;
}
.clapp-hero-split-text .clapp-cta-phone:hover {
  color: #0d2624;
}

.clapp-hero-split-image {
  aspect-ratio: 4 / 5;
  max-width: 520px;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 30px 60px rgba(13, 38, 36, 0.14);
  justify-self: end;
}

@media (max-width: 900px) {
  .clapp-hero-split-inner { grid-template-columns: 1fr; }
  .clapp-hero-split-image { aspect-ratio: 4 / 3; max-width: none; justify-self: stretch; }
}

/* QUARTERLY CADENCE GRID */
.clapp-cadence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin: 40px 0 48px;
}
@media (max-width: 900px) { .clapp-cadence-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .clapp-cadence-grid { grid-template-columns: 1fr; } }

.clapp-cadence-card {
  background: #ffffff;
  border-radius: 22px;
  padding: clamp(22px, 2vw, 30px);
  position: relative;
  border: 1px solid rgba(20, 52, 37, 0.08);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.35s ease;
}
.clapp-cadence-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(13, 38, 36, 0.1);
}
.clapp-cadence-quarter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #143425;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.clapp-cadence-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #1d1d1f;
  line-height: 1.3;
  margin: 0;
}
.clapp-cadence-body {
  font-size: 14px;
  line-height: 1.55;
  color: #4a5a52;
  margin: 0;
}

/* === END CLAPP ARCHETYPE B v1 === */


/* === CLAPP ARCHETYPE C v1 === */
/* ARCHETYPE C — Crisis Response.
 * Near-black, serious, urgent but not panic. Rust accent used sparingly.
 */

.clapp-hero-urgent {
  position: relative;
  background: #0a0b0a;
  color: #ffffff;
  padding: clamp(120px, 18vh, 200px) 0 clamp(80px, 12vh, 140px);
  overflow: hidden;
  isolation: isolate;
}
.clapp-hero-urgent-image {
  position: absolute;
  top: -60%;
  left: -4%;
  width: 108%;
  height: 220%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(10px) brightness(0.85);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  z-index: 0;
}
.clapp-hero-urgent-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.clapp-hero-urgent .clapp-crumbs { color: rgba(255,255,255,0.45); }
.clapp-hero-urgent .clapp-crumbs a:hover { color: rgba(255,255,255,0.88); }
.clapp-hero-urgent .clapp-eyebrow { color: #143425; }      /* rust accent */
.clapp-hero-urgent h1 {
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 20ch;
  margin: 0 0 24px;
  color: #ffffff;
}
.clapp-hero-urgent h1 em {
  font-style: normal;
  color: #143425;
}
.clapp-hero-urgent .clapp-lead {
  color: rgba(255,255,255,0.82);
  max-width: 56ch;
  margin-bottom: 40px;
}
.clapp-hero-urgent .clapp-cta-primary {
  background: #143425;
  color: #0a0b0a;
}
.clapp-hero-urgent .clapp-cta-primary:hover {
  background: #c85f40;
  color: #0a0b0a;
  box-shadow: 0 12px 32px rgba(20, 52, 37, 0.32);
}
.clapp-hero-urgent .clapp-cta-phone { color: rgba(255,255,255,0.8); }
.clapp-hero-urgent .clapp-cta-phone:hover { color: #ffffff; }

/* URGENCY STRIP — pills + availability badge */
.clapp-urgency-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.clapp-urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}
.clapp-urgency-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #143425;
  box-shadow: 0 0 0 4px rgba(20, 52, 37, 0.25);
  animation: clapp-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}
@keyframes clapp-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(20, 52, 37, 0.25); }
  50%      { box-shadow: 0 0 0 10px rgba(20, 52, 37, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .clapp-urgency-dot { animation: none; }
}
.clapp-urgency-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.clapp-urgency-pills span {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* 72-HOUR RESPONSE TIMELINE */
.clapp-timeline-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 44px 0 56px;
  padding: 24px 0 0;
}
.clapp-timeline-strip::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 4%;
  right: 4%;
  height: 2px;
  background: linear-gradient(to right, #143425, rgba(20, 52, 37, 0.15));
}
.clapp-timeline-node {
  position: relative;
  padding-top: 36px;
}
.clapp-timeline-node::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0a0b0a;
  border: 3px solid #143425;
  z-index: 1;
}
.clapp-timeline-hour {
  display: none;
}
.clapp-timeline-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #1d1d1f;
  text-align: center;
  letter-spacing: -0.005em;
}
@media (max-width: 900px) {
  .clapp-timeline-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .clapp-timeline-strip { grid-template-columns: repeat(2, 1fr); }
  .clapp-timeline-strip::before { display: none; }
  .clapp-timeline-node::before { display: none; }
  .clapp-timeline-node { padding-top: 0; }
  .clapp-timeline-hour { text-align: left; }
  .clapp-timeline-title { text-align: left; }
}

/* === END CLAPP ARCHETYPE C v1 === */


/* === CLAPP ARCHETYPE D v1 === */
/* ARCHETYPE D — Specialized Technical.
 * Charcoal palette, monospace accents, schematic grid overlay.
 * The vibe: spec sheet, not consumer marketing. */

.clapp-hero-spec {
  position: relative;
  background:
    linear-gradient(135deg, #1a1c1c 0%, #202424 50%, #2a2f2f 100%);
  color: #ffffff;
  padding: clamp(120px, 18vh, 200px) 0 clamp(80px, 12vh, 140px);
  overflow: hidden;
  isolation: isolate;
}
.clapp-hero-spec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85), transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85), transparent 80%);
}
.clapp-hero-spec-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.clapp-hero-spec .clapp-crumbs { color: rgba(255,255,255,0.45); }
.clapp-hero-spec .clapp-crumbs a:hover { color: rgba(255,255,255,0.88); }
.clapp-hero-spec .clapp-eyebrow {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  color: #93b89a;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.clapp-hero-spec h1 {
  font-size: clamp(42px, 6.5vw, 88px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.02;
  max-width: 22ch;
  margin: 0 0 24px;
  color: #ffffff;
}
.clapp-hero-spec h1 em {
  font-style: normal;
  color: #93b89a;
}
.clapp-hero-spec .clapp-lead {
  color: rgba(255,255,255,0.8);
  max-width: 58ch;
  margin-bottom: 38px;
}
.clapp-hero-spec .clapp-cta-primary {
  background: #ffffff;
  color: #1a1c1c;
}
.clapp-hero-spec .clapp-cta-primary:hover {
  background: #e8ebe2;
  color: #0d2624;
}
.clapp-hero-spec .clapp-cta-phone { color: rgba(255,255,255,0.78); }
.clapp-hero-spec .clapp-cta-phone:hover { color: #ffffff; }

/* SPEC STRIP — monospace compliance-qualification pills */
.clapp-spec-strip {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
}
.clapp-spec-strip-label {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-right: 16px;
}
.clapp-spec-strip-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.clapp-spec-strip-pills span {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.88);
  padding: 7px 14px;
  border: 1px solid rgba(147, 184, 154, 0.35);
  border-radius: 6px;                    /* squarer than pill — technical */
  letter-spacing: 0.04em;
}

/* SOP ANATOMY BLOCK */
.clapp-anatomy-wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin: 40px 0 48px;
}
@media (max-width: 900px) { .clapp-anatomy-wrap { grid-template-columns: 1fr; } }
.clapp-anatomy-doc {
  background: #fdfdfb;
  border: 1px solid rgba(20, 52, 37, 0.14);
  border-radius: 18px;
  padding: 32px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #424245;
  position: relative;
}
.clapp-anatomy-doc h4 {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #143425;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(20, 52, 37, 0.12);
}
.clapp-anatomy-doc p { margin: 0 0 10px; }
.clapp-anatomy-doc mark {
  background: rgba(147, 184, 154, 0.35);
  color: #143425;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}
.clapp-anatomy-notes {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.clapp-anatomy-note {
  display: flex;
  gap: 18px;
}
.clapp-anatomy-note-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #143425;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.clapp-anatomy-note-body h5 {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 6px 0 6px;
  letter-spacing: -0.01em;
}
.clapp-anatomy-note-body p {
  font-size: 14.5px;
  line-height: 1.55;
  color: #424245;
  margin: 0;
}

/* === END CLAPP ARCHETYPE D v1 === */


/* === CLAPP ARCHETYPE E v1 === */
/* ARCHETYPE E — Strategic Advisory.
 * Warm cream palette, bronze accent, editorial/magazine pacing.
 * Less grid, more reading; fewer buttons, more narrative weight. */

.clapp-hero-editorial {
  position: relative;
  background: #f2eee2;
  color: #1d1d1f;
  padding: clamp(100px, 16vh, 180px) 0 clamp(120px, 16vh, 180px);
  overflow: visible;                 /* allow pull-quote card to overlap */
}
.clapp-hero-editorial-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.clapp-hero-editorial .clapp-crumbs {
  color: rgba(13, 38, 36, 0.55);
  margin-bottom: 32px;
}
.clapp-hero-editorial .clapp-crumbs a:hover { color: rgba(13, 38, 36, 0.88); }
.clapp-hero-editorial .clapp-crumbs [aria-current="page"] { color: rgba(13, 38, 36, 0.9); }
.clapp-hero-editorial .clapp-eyebrow { color: #8a6a2f; }   /* bronze */
.clapp-hero-editorial h1 {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 18ch;
  margin: 0 0 24px;
  color: #0d2624;
}
.clapp-hero-editorial h1 em {
  font-style: normal;
  color: #8a6a2f;
}
.clapp-hero-editorial .clapp-lead {
  color: #424245;
  max-width: 46ch;
  margin-bottom: 38px;
}
.clapp-hero-editorial .clapp-cta-primary {
  background: #0d2624;
  color: #ffffff;
}
.clapp-hero-editorial .clapp-cta-primary:hover {
  background: #143425;
  color: #ffffff;
}
.clapp-hero-editorial .clapp-cta-phone { color: #0d2624; }
.clapp-hero-editorial .clapp-cta-phone:hover { color: #000; }
.clapp-hero-editorial-image {
  aspect-ratio: 3 / 4;
  max-width: 480px;
  width: 100%;
  border-radius: 8px;                /* more editorial — less soft than default 28px */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  justify-self: end;
  box-shadow:
    0 40px 80px rgba(13, 38, 36, 0.18),
    0 12px 24px rgba(13, 38, 36, 0.08);
}
@media (max-width: 900px) {
  .clapp-hero-editorial-inner { grid-template-columns: 1fr; }
  .clapp-hero-editorial-image { aspect-ratio: 3/2; max-width: none; justify-self: stretch; }
}

/* OVERLAPPING PULL-QUOTE CARD */
.clapp-pullquote-wrap {
  position: relative;
  max-width: 1100px;
  margin: clamp(-80px, -8vh, -40px) auto 0;
  padding: 0 clamp(20px, 4vw, 40px);
  z-index: 3;
}
.clapp-pullquote-card {
  background: #ffffff;
  border-radius: 22px;
  padding: clamp(36px, 5vw, 64px) clamp(32px, 5vw, 56px);
  box-shadow: 0 30px 60px rgba(13, 38, 36, 0.14);
  position: relative;
}
.clapp-pullquote-card::before {
  content: '“';
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  left: clamp(24px, 4vw, 48px);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(80px, 10vw, 140px);
  line-height: 1;
  color: #8a6a2f;
  opacity: 0.25;
  pointer-events: none;
}
.clapp-pullquote-text {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #0d2624;
  margin: 0 0 28px;
  max-width: 42ch;
  position: relative;
  z-index: 1;
}
.clapp-pullquote-attrib {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #4a5a52;
}
.clapp-pullquote-attrib-name {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
}
.clapp-pullquote-attrib-role {
  font-size: 14px;
  color: #6e6e73;
}

/* FEATURED CASE BLOCK */
.clapp-featured-case {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  background: #ffffff;
  border-radius: 24px;
  padding: clamp(36px, 5vw, 72px);
  border: 1px solid rgba(13, 38, 36, 0.08);
  margin: 48px 0;
}
@media (max-width: 900px) {
  .clapp-featured-case { grid-template-columns: 1fr; padding: 36px 28px; }
}
.clapp-featured-case-image {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
}
.clapp-featured-case-content .clapp-eyebrow { color: #8a6a2f; margin-bottom: 14px; }
.clapp-featured-case-content h3 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 20px;
  color: #0d2624;
}
.clapp-featured-case-content p {
  font-size: 17px;
  line-height: 1.55;
  color: #424245;
  margin: 0 0 24px;
  max-width: 52ch;
}
.clapp-featured-case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(13, 38, 36, 0.08);
}
.clapp-featured-case-stat-val {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0d2624;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.clapp-featured-case-stat-lab {
  font-size: 13px;
  color: #6e6e73;
  margin-top: 6px;
}
@media (max-width: 560px) {
  .clapp-featured-case-stats { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* === END CLAPP ARCHETYPE E v1 === */


/* === CLAPP ARCHETYPE F v1 === */
/* ARCHETYPE F — License Type Explainer.
 * License "spec card" hero, eligibility checklist, subtype comparison.
 * CSS variables allow per-license accent color override. */

:root {
  --clapp-f-accent: #143425;  /* retail = warm amber */
  --clapp-f-accent-light: rgba(20, 52, 37, 0.14);
}

.clapp-hero-license {
  position: relative;
  background: #f7f4ed;
  color: #1d1d1f;
  padding: clamp(100px, 16vh, 180px) 0 clamp(80px, 12vh, 140px);
  overflow: hidden;
}
.clapp-hero-license-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .clapp-hero-license-inner { grid-template-columns: 1fr; } }

.clapp-hero-license .clapp-crumbs { color: rgba(13, 38, 36, 0.55); margin-bottom: 32px; }
.clapp-hero-license .clapp-crumbs a:hover { color: rgba(13, 38, 36, 0.88); }
.clapp-hero-license .clapp-eyebrow { color: var(--clapp-f-accent); }
.clapp-hero-license h1 {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 18ch;
  margin: 0 0 24px;
  color: #0d2624;
}
.clapp-hero-license h1 em { font-style: normal; color: var(--clapp-f-accent); }
.clapp-hero-license .clapp-lead { color: #424245; max-width: 46ch; margin-bottom: 32px; }

/* Flip text palette to white when the hero bg is a video/image (dark scrim).
 * Default hero-license assumes a light cream bg — has-video inverts that. */
.clapp-hero-license.has-video .clapp-hero-license-inner { position: relative; z-index: 2; }
.clapp-hero-license.has-video .clapp-hero-backdrop { display: none; }
.clapp-hero-license.has-video .clapp-hero-image { opacity: 0; }
/* Tighter top padding when video is in play — dark bg doesn't need the
 * same breathing room as the cream static hero. */
.clapp-hero-license.has-video {
  padding: clamp(72px, 11vh, 128px) 0 clamp(64px, 10vh, 120px);
}
.clapp-hero-license.has-video::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 38, 36, 0.28) 0%, rgba(13, 38, 36, 0.44) 100%);
  pointer-events: none;
  z-index: 1;
}
/* White spec-card with dark text, semi-transparent over video */
.clapp-hero-license.has-video .clapp-license-card {
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}
.clapp-hero-license.has-video .clapp-license-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.28);
}
.clapp-hero-license.has-video .clapp-license-card-type { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); opacity: 0.8; }
.clapp-hero-license.has-video .clapp-license-card-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  opacity: 0.6;
}
.clapp-hero-license.has-video .clapp-license-card-spec {
  opacity: 0.6;
}
.clapp-hero-license.has-video .clapp-license-card-spec dt { color: rgba(255, 255, 255, 0.82); }
.clapp-hero-license.has-video .clapp-license-card-spec dd { color: #fff; }
.clapp-hero-license.has-video .clapp-crumbs { color: rgba(255, 255, 255, 0.72); }
.clapp-hero-license.has-video .clapp-crumbs a { color: rgba(255, 255, 255, 0.82); }
.clapp-hero-license.has-video .clapp-crumbs a:hover { color: #fff; }
.clapp-hero-license.has-video .clapp-crumbs [aria-current="page"] { color: #fff; }
.clapp-hero-license.has-video .clapp-eyebrow { color: rgba(255, 255, 255, 0.88); }
.clapp-hero-license.has-video h1 { color: #fff; }
.clapp-hero-license.has-video h1 em { color: #d7ecd9; }
.clapp-hero-license.has-video .clapp-lead { color: rgba(255, 255, 255, 0.9); }

/* The license spec-card */
.clapp-license-card {
  background: #ffffff;
  border-radius: 20px;
  padding: clamp(28px, 2.6vw, 40px);
  border: 1px solid rgba(13, 38, 36, 0.1);
  box-shadow: 0 20px 40px rgba(13, 38, 36, 0.08);
  display: grid;
  gap: 20px;
}
.clapp-license-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(13, 38, 36, 0.1);
}
.clapp-license-card-type {
  font-size: clamp(38px, 4.8vw, 62px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #0d2624;
  font-variant-numeric: tabular-nums;
}
.clapp-license-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--clapp-f-accent-light);
  color: var(--clapp-f-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.clapp-license-card-spec {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px 20px;
  font-size: 14.5px;
  align-items: baseline;
}
.clapp-license-card-spec dt {
  font-weight: 600;
  color: #274543;
  letter-spacing: 0.02em;
}
.clapp-license-card-spec dd {
  color: #424245;
  margin: 0;
  line-height: 1.4;
}

/* ELIGIBILITY CHECKLIST — AirPods hearing-health feature-list v2 */
/* Reference: apple.com/airpods-pro/hearing-health/ "More intelligent ways to listen."
   Bigger asterisk-style icons, bolder typography, larger line height.
   Reads as feature list, not bullet list. No HTML changes needed.
*/
.clapp-eligibility-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 48px;
  max-width: 1100px;
}
@media (max-width: 900px) { .clapp-eligibility-list { grid-template-columns: 1fr; gap: 0; } }
.clapp-eligibility-item {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 620;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #143425;
  padding: 24px 0;
  border-bottom: 1px solid rgba(13, 38, 36, 0.09);
}
.clapp-eligibility-item > div {
  flex: 1;
  padding-top: 6px;
}
.clapp-eligibility-check {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #143425;
  color: #d7ecd9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin-top: 0;
  line-height: 1;
}

/* SUBTYPE COMPARISON */
.clapp-subtype-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin: 40px 0 48px;
}
@media (max-width: 760px) { .clapp-subtype-grid { grid-template-columns: 1fr; } }
.clapp-subtype-card {
  background: #ffffff;
  border-radius: 24px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid rgba(13, 38, 36, 0.1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.clapp-subtype-card.is-featured {
  background: #0d2624;
  color: #ffffff;
  border-color: #0d2624;
}
.clapp-subtype-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clapp-f-accent);
}
.clapp-subtype-card.is-featured .clapp-subtype-kicker { color: var(--clapp-f-accent); }
.clapp-subtype-card h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: inherit;
}
.clapp-subtype-card ul {
  list-style: none; padding: 0; margin: 0;
}
.clapp-subtype-card li {
  font-size: 15px;
  line-height: 1.55;
  padding: 8px 0 8px 22px;
  position: relative;
  color: inherit;
  opacity: 0.92;
  border-bottom: 1px solid rgba(13, 38, 36, 0.08);
}
.clapp-subtype-card.is-featured li { border-color: rgba(255, 255, 255, 0.14); }
.clapp-subtype-card li::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--clapp-f-accent);
}
.clapp-subtype-card li:last-child { border-bottom: 0; }

/* COST BREAKDOWN */
.clapp-cost-table {
  margin: 36px 0 40px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(13, 38, 36, 0.1);
  overflow: hidden;
}
.clapp-cost-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  padding: 18px clamp(20px, 3vw, 32px);
  border-bottom: 1px solid rgba(13, 38, 36, 0.08);
  align-items: center;
  font-size: 15.5px;
  gap: 16px;
}
.clapp-cost-row:last-child { border-bottom: 0; }
.clapp-cost-row-label { color: #1d1d1f; }
.clapp-cost-row-label small { display: block; font-size: 12.5px; color: #6e6e73; margin-top: 4px; font-weight: 400; }
.clapp-cost-row-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0d2624;
  text-align: right;
}
.clapp-cost-row-total {
  background: #0d2624;
  color: #ffffff;
}
.clapp-cost-row-total .clapp-cost-row-label,
.clapp-cost-row-total .clapp-cost-row-value { color: #ffffff; font-size: 18px; font-weight: 700; }
.clapp-cost-row-total .clapp-cost-row-label small { color: rgba(255,255,255,0.6); }

/* === END CLAPP ARCHETYPE F v1 === */


/* === CLAPP HERO BACKDROP v1 === */
/* Unified blurred hero backdrop — used by archetypes B, D, E, F so the
 * hero banner reads consistently across the flagship family. Each
 * archetype sets --clapp-backdrop-opacity to balance against its palette.
 */

.clapp-hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.clapp-hero-backdrop-img {
  position: absolute;
  top: -60%;
  left: -4%;
  width: 108%;
  height: 220%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(22px);
  opacity: var(--clapp-backdrop-opacity, 0.25);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Every archetype uses the blurred image as its REAL background at
 * full opacity. Solid hero fills are transparent so the photo shows. */
.clapp-hero-split,
.clapp-hero-spec,
.clapp-hero-editorial,
.clapp-hero-license {
  background: transparent !important;
}
.clapp-hero-split      { --clapp-backdrop-opacity: 1; }
.clapp-hero-spec       { --clapp-backdrop-opacity: 1; }
.clapp-hero-editorial  { --clapp-backdrop-opacity: 1; }
.clapp-hero-license    { --clapp-backdrop-opacity: 1; }

/* Palette-tinted wash overlay so text and inset cards stay legible. */
.clapp-hero-backdrop::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--clapp-backdrop-wash, rgba(242, 241, 234, 0.62));
  pointer-events: none;
}
.clapp-hero-split     { --clapp-backdrop-wash: rgba(242, 241, 234, 0.62); }
.clapp-hero-spec      { --clapp-backdrop-wash: rgba(26, 28, 28, 0.58); }
.clapp-hero-editorial { --clapp-backdrop-wash: rgba(242, 238, 226, 0.58); }
.clapp-hero-license   { --clapp-backdrop-wash: rgba(247, 244, 237, 0.55); }

/* Make sure existing foreground hero elements sit above the backdrop. */
.clapp-hero-split-inner,
.clapp-hero-editorial-inner,
.clapp-hero-license-inner {
  position: relative;
  z-index: 2;
}

/* Closing CTA block — centered at bottom of page on every archetype */
.clapp-closing-inner {
  text-align: center;
}
.clapp-closing-inner .clapp-eyebrow,
.clapp-closing-inner .clapp-h2,
.clapp-closing-inner .clapp-body {
  margin-left: auto;
  margin-right: auto;
}
.clapp-closing-inner .clapp-h2 {
  max-width: 22ch;
}
.clapp-closing-inner .clapp-body {
  max-width: 58ch;
}
.clapp-closing-ctas {
  justify-content: center;
}
/* Closing CTA block: hide the secondary "or call/email" link — the
 * final CTA on each page should be a single centered primary button. */
.clapp-closing-ctas .clapp-cta-phone,
.clapp-closing-ctas .clapp-cta-phone-dark {
  display: none;
}

/* === END CLAPP HERO BACKDROP v1 === */


/* === CLAPP HERO ASIDE v1 === */
/* Heroes on A/C/D/Homepage are now background-blur-only (no foreground
 * aside). Keep the HTML intact so we don't break the page; just hide
 * the aside element and collapse the grid to a single column. */

.clapp-hero-has-aside .clapp-hero-inner,
.clapp-hero-has-aside .clapp-hero-urgent-inner,
.clapp-hero-has-aside .clapp-hero-spec-inner {
  display: block;                    /* was grid — single column full-width */
}
.clapp-hero-text {
  position: relative;
  z-index: 2;
}
.clapp-hero-aside {
  display: none;                     /* foreground aside hidden */
}

/* Also hide the split-hero / editorial-hero foreground portraits.
 * The blurred backdrop + text is the hero. No extra photo on the side. */
.clapp-hero-split-image,
.clapp-hero-editorial-image {
  display: none !important;
}
.clapp-hero-split-inner,
.clapp-hero-editorial-inner {
  grid-template-columns: 1fr !important;   /* collapse the 2-col grid */
}

/* === END CLAPP HERO ASIDE v1 === */


/* === CLAPP MODAL SPLIT ROWS v1 === */
/* Text paragraph left + image right pattern for modal body sections.
 * Replaces the tight tile grid that didn't use the full modal width.
 * Alternate sides for visual rhythm with .is-reversed. */

.gsg-modal-split-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
  margin: 32px 0 40px;
}
.gsg-modal-split-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.gsg-modal-split-row.is-reversed { grid-template-columns: 1fr 1.1fr; }
.gsg-modal-split-row.is-reversed .gsg-modal-split-text { order: 2; }
.gsg-modal-split-row.is-reversed .gsg-modal-split-img  { order: 1; }

.gsg-modal-split-text h4 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #0d2624;
  margin: 0 0 14px;
}
.gsg-modal-split-text p {
  font-size: 15.5px;
  line-height: 1.6;
  color: #424245;
  margin: 0;
}
.gsg-modal-split-text p + p { margin-top: 12px; }

.gsg-modal-split-img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 18px;
  min-height: 220px;
  box-shadow: 0 16px 32px rgba(13, 38, 36, 0.10);
}

@media (max-width: 760px) {
  .gsg-modal-split-row,
  .gsg-modal-split-row.is-reversed {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .gsg-modal-split-row.is-reversed .gsg-modal-split-text,
  .gsg-modal-split-row.is-reversed .gsg-modal-split-img { order: unset; }
}

/* === END CLAPP MODAL SPLIT ROWS v1 === */


/* === CLAPP ARCHETYPE G (Homepage Stack) v1 === */
/* ARCHETYPE G — Homepage stack.
 * Four stacked full-viewport category heroes, alternating image placement.
 * Each category has a distinctive accent color matching its archetype family. */

.clapp-cat-hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  background: #f5f5f7;
}
.clapp-cat-hero.is-reversed { grid-template-columns: 1fr 1fr; }
.clapp-cat-hero.is-reversed .clapp-cat-hero-text { order: 2; }
.clapp-cat-hero.is-reversed .clapp-cat-hero-image { order: 1; }

.clapp-cat-hero-text {
  position: relative;
  z-index: 2;
  padding: clamp(60px, 10vh, 120px) clamp(24px, 6vw, 96px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.clapp-cat-hero-image {
  position: relative;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.clapp-cat-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,38,36,0) 60%, rgba(13,38,36,0.06) 100%);
  pointer-events: none;
}
.clapp-cat-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cat-accent, #274543);
  margin-bottom: 18px;
}
.clapp-cat-hero-kicker::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--cat-accent, #274543);
}
.clapp-cat-hero h2 {
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0 0 22px;
  color: #0d2624;
  max-width: 18ch;
}
.clapp-cat-hero-body {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: #424245;
  max-width: 52ch;
  margin: 0 0 32px;
}
.clapp-cat-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
}
.clapp-cat-link-primary {
  font-size: 17px;
  font-weight: 600;
  color: var(--cat-accent, #274543);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s ease;
}
.clapp-cat-link-primary::after {
  content: '→';
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.clapp-cat-link-primary:hover { gap: 12px; color: var(--cat-accent, #274543); }
.clapp-cat-link-primary:hover::after { transform: translateX(4px); }
.clapp-cat-link-secondary {
  font-size: 17px;
  color: #424245;
  text-decoration: none;
  transition: color 0.2s ease;
}
.clapp-cat-link-secondary:hover { color: #0d2624; }

/* Per-category accents */
.clapp-cat-licensing   { --cat-accent: #143425; }
.clapp-cat-compliance  { --cat-accent: #274543; background: #f2f1ea; }
.clapp-cat-enforcement { --cat-accent: #143425; background: #1a1c1c; color: #fff; }
.clapp-cat-enforcement h2 { color: #fff; }
.clapp-cat-enforcement .clapp-cat-hero-body { color: rgba(255,255,255,0.8); }
.clapp-cat-enforcement .clapp-cat-link-secondary { color: rgba(255,255,255,0.78); }
.clapp-cat-enforcement .clapp-cat-link-secondary:hover { color: #fff; }
.clapp-cat-strategic   { --cat-accent: #8a6a2f; background: #f2eee2; }

@media (max-width: 900px) {
  .clapp-cat-hero,
  .clapp-cat-hero.is-reversed { grid-template-columns: 1fr; min-height: auto; }
  .clapp-cat-hero.is-reversed .clapp-cat-hero-text { order: 2; }
  .clapp-cat-hero.is-reversed .clapp-cat-hero-image { order: 1; }
  .clapp-cat-hero-text { padding: 72px 24px; }
  .clapp-cat-hero-image { min-height: 320px; }
}

/* By-the-numbers band */
.clapp-numbers-band {
  background: #0d2624;
  color: #fff;
  padding: clamp(80px, 12vh, 140px) 0;
}
.clapp-numbers-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 40px);
}
.clapp-numbers-band .clapp-eyebrow { color: #ADB295; }
.clapp-numbers-band .clapp-h2 { color: #fff; }
.clapp-numbers-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
@media (max-width: 760px) { .clapp-numbers-row { grid-template-columns: repeat(2, 1fr); } }
.clapp-number-val {
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.clapp-number-lab {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  margin-top: 10px;
}

/* Jurisdiction strip */
.clapp-juris-strip {
  background: #f5f5f7;
  padding: clamp(80px, 12vh, 140px) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.clapp-juris-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 40px);
  position: relative;
  z-index: 2;
}

/* === CLAPP JURIS SLIDER v1 ===
 * Auto-rotating county-image slideshow behind the text. Slides cross-
 * fade every ~5s. Only the .is-active slide is visible; others sit at
 * opacity 0. The .clapp-juris-scrim sits on top of the slides and below
 * the content to keep the text readable. */
.clapp-juris-strip.has-slider {
  background: #0d2624;
  color: #fff;
}
.clapp-juris-slider {
  position: absolute;
  top: -60%;
  left: -4%;
  width: 108%;
  height: 220%;                 /* oversized for \u00b1250px parallax headroom */
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* iOS / reduced-motion: pin the slider (no parallax translate). */
@supports (-webkit-touch-callout: none) {
  .clapp-juris-slider { top: 0; height: 100%; width: 100%; left: 0; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .clapp-juris-slider { top: 0; height: 100%; width: 100%; left: 0; transform: none !important; }
}
.clapp-juris-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.clapp-juris-slide.is-active {
  opacity: 1;
}
.clapp-juris-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(13, 38, 36, 0.64) 0%,
    rgba(13, 38, 36, 0.72) 55%,
    rgba(13, 38, 36, 0.82) 100%);
  pointer-events: none;
}
/* Text-color overrides when slider is active */
.clapp-juris-strip.has-slider .clapp-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}
.clapp-juris-strip.has-slider .clapp-h2,
.clapp-juris-strip.has-slider .clapp-h2 em {
  color: #fff;
}
.clapp-juris-strip.has-slider .clapp-body {
  color: rgba(255, 255, 255, 0.85);
}
.clapp-juris-strip.has-slider .clapp-plus-cta {
  background: #fff;
  color: #143425;
}
.clapp-juris-strip.has-slider .clapp-plus-cta:hover {
  background: #eef1ed;
}
@media (prefers-reduced-motion: reduce) {
  .clapp-juris-slide { transition: none; }
}
/* === END CLAPP JURIS SLIDER === */
.clapp-juris-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 36px 0 28px;
}
.clapp-juris-cities a {
  font-size: 14px;
  color: #143425;
  padding: 8px 16px;
  border: 1px solid rgba(20, 52, 37, 0.14);
  border-radius: 999px;
  text-decoration: none;
  background: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.clapp-juris-cities a:hover {
  background: #143425;
  color: #fff;
  border-color: #143425;
}

/* === END CLAPP ARCHETYPE G v1 === */


/* === CLAPP ARCHETYPES H / I / J v1 === */
/* ---------- ARCHETYPE H — Services Hub (category grid) ---------- */
.clapp-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2vw, 28px);
  margin: 40px 0;
}
@media (max-width: 760px) { .clapp-cat-grid { grid-template-columns: 1fr; } }

.clapp-cat-tile {
  position: relative;
  display: block;
  background: #f5f5f7;
  border-radius: 26px;
  overflow: hidden;
  text-decoration: none;
  color: #1d1d1f;
  min-height: 420px;
  padding: clamp(32px, 4vw, 48px);
  transition: transform 0.45s cubic-bezier(0.22,0.61,0.36,1);
}
.clapp-cat-tile:hover { transform: translateY(-4px); }
.clapp-cat-tile-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  z-index: 0;
}
.clapp-cat-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.92) 100%);
  z-index: 1;
  pointer-events: none;
}
.clapp-cat-tile-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  justify-content: flex-end;
  min-height: 356px;
}
.clapp-cat-tile-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #274543;
}
.clapp-cat-tile h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: #0d2624;
  max-width: 22ch;
}
.clapp-cat-tile p {
  font-size: 15.5px;
  line-height: 1.5;
  color: #424245;
  margin: 0;
  max-width: 44ch;
}
.clapp-cat-tile-link {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #143425;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.clapp-cat-tile-link::after {
  content: '→';
  transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1);
}
.clapp-cat-tile:hover .clapp-cat-tile-link::after {
  transform: translateX(4px);
}
/* Light-variant featured tile — user direction: kill dark objects sitewide */
.clapp-cat-tile.is-dark { background: #fafaf7; color: #143425; border: 2px solid #143425; }
.clapp-cat-tile.is-dark::after {
  background: linear-gradient(180deg, rgba(250,250,247,0) 30%, rgba(250,250,247,0.78) 100%);
}
.clapp-cat-tile.is-dark h3 { color: #143425; }
.clapp-cat-tile.is-dark p { color: #424245; }
.clapp-cat-tile.is-dark .clapp-cat-tile-kicker { color: #5a7566; }
.clapp-cat-tile.is-dark .clapp-cat-tile-link { color: #143425; }

/* ---------- ARCHETYPE I — Narrative / About ---------- */
.clapp-pull {
  position: relative;
  padding: clamp(60px, 8vh, 100px) 0;
  text-align: center;
  border-top: 1px solid rgba(20,52,37,0.12);
  border-bottom: 1px solid rgba(20,52,37,0.12);
  margin: clamp(40px, 6vh, 80px) 0;
}
.clapp-pull blockquote {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: #0d2624;
  max-width: 28ch;
  margin: 0 auto 18px;
}
.clapp-pull cite {
  font-size: 14px;
  font-style: normal;
  color: #6e6e73;
  letter-spacing: 0.02em;
}
.clapp-timeline {
  display: grid;
  gap: 32px;
  margin: 40px 0;
}
.clapp-timeline-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding: 24px 0;
  border-bottom: 1px solid rgba(20,52,37,0.1);
}
.clapp-timeline-year {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  color: #143425;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.clapp-timeline-body h4 {
  font-size: 19px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.clapp-timeline-body p {
  font-size: 15.5px;
  line-height: 1.55;
  color: #424245;
  margin: 0;
  max-width: 52ch;
}
@media (max-width: 620px) {
  .clapp-timeline-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- ARCHETYPE J — Conversion / Direct ---------- */
.clapp-conv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 32px 0 44px;
}
@media (max-width: 760px) { .clapp-conv-grid { grid-template-columns: 1fr; } }
.clapp-conv-card {
  background: #fff;
  border: 1px solid rgba(20,52,37,0.10);
  border-radius: 22px;
  padding: 32px 28px 30px;
  transition: border-color 0.25s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.clapp-conv-card:hover {
  border-color: rgba(20,52,37,0.22);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(13,38,36,0.08);
}
/* KILL the "Licensing / Local / Compliance" kicker — user flagged this pattern */
.clapp-conv-card-kicker {
  display: none !important;
}
.clapp-conv-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #143425;
  margin: 0;
  padding-right: 44px;
}
.clapp-conv-card p {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #424245;
  margin: 0;
  padding-right: 44px;
}
.clapp-conv-card-link {
  margin-top: auto;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #143425;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.clapp-conv-card-link::after {
  content: '→';
  transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1);
}
.clapp-conv-card:hover .clapp-conv-card-link::after { transform: translateX(4px); }

/* Pricing table */
.clapp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0 44px;
}
@media (max-width: 900px) { .clapp-pricing-grid { grid-template-columns: 1fr; } }
.clapp-pricing-card {
  background: #fff;
  border: 1px solid rgba(20,52,37,0.12);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.clapp-pricing-card.is-featured {
  background: #0d2624;
  color: #fff;
  border-color: #0d2624;
}
.clapp-pricing-tier {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #274543;
}
.clapp-pricing-card.is-featured .clapp-pricing-tier { color: #ADB295; }
.clapp-pricing-card h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: inherit;
}
.clapp-pricing-range {
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0d2624;
  font-variant-numeric: tabular-nums;
}
.clapp-pricing-card.is-featured .clapp-pricing-range { color: #fff; }
.clapp-pricing-card ul { list-style: none; padding: 0; margin: 0; }
.clapp-pricing-card li {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 8px 0 8px 22px;
  position: relative;
  border-bottom: 1px solid rgba(20,52,37,0.08);
}
.clapp-pricing-card.is-featured li { border-color: rgba(255,255,255,0.14); }
.clapp-pricing-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  color: #8a9478;
  font-weight: 700;
}
.clapp-pricing-card.is-featured li::before { color: #ADB295; }
.clapp-pricing-card li:last-child { border: 0; }

/* === END CLAPP ARCHETYPES H / I / J v1 === */


/* === CLAPP ARCHETYPES K / L / M / N v1 === */
/* ---------- ARCHETYPE K — Jurisdiction / Location grid ---------- */
.clapp-loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 12px;
  margin: 32px 0 44px;
}
.clapp-loc-card {
  background: #fff;
  border: 1px solid rgba(20,52,37,0.1);
  border-radius: 14px;
  padding: 16px 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 0.2s ease, transform 0.25s cubic-bezier(0.22,0.61,0.36,1);
  font-size: 15px;
  color: #1d1d1f;
  font-weight: 500;
}
.clapp-loc-card:hover {
  border-color: #143425;
  transform: translateX(3px);
}
.clapp-loc-card::after {
  content: '→';
  font-size: 16px;
  color: #6e6e73;
  transition: color 0.2s ease, transform 0.25s ease;
}
.clapp-loc-card:hover::after {
  color: #143425;
  transform: translateX(2px);
}

/* ---------- ARCHETYPE L — Article / Post grid ---------- */
.clapp-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 40px 0 48px;
}
.clapp-article-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 24px rgba(13,38,36,0.06);
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.clapp-article-card:hover { transform: translateY(-3px); }
.clapp-article-card-image {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}
.clapp-article-card-body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.clapp-article-card-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #274543;
}
.clapp-article-card h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: #1d1d1f;
  margin: 0;
}
.clapp-article-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: #4a5a52;
  margin: 0;
}
.clapp-article-card time {
  font-size: 12.5px;
  color: #6e6e73;
  margin-top: auto;
  padding-top: 6px;
}

/* Single-article reading layout */
.clapp-article-reading {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  color: #1d1d1f;
}
.clapp-article-reading h2 {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #0d2624;
  margin: 40px 0 18px;
}
.clapp-article-reading h3 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  color: #143425;
  margin: 32px 0 12px;
}
.clapp-article-reading p { margin: 0 0 18px; color: #33383f; }
.clapp-article-reading strong { color: #0d2624; font-weight: 600; }
.clapp-article-reading blockquote {
  border-left: 3px solid #ADB295;
  padding: 6px 0 6px 28px;
  margin: 32px 0;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  color: #0d2624;
  line-height: 1.4;
}
.clapp-article-reading ul { padding-left: 22px; margin: 0 0 24px; }
.clapp-article-reading li { margin-bottom: 8px; }

/* ---------- ARCHETYPE M — People grid ---------- */
.clapp-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  margin: 40px 0 48px;
}
.clapp-person {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}
.clapp-person-photo {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1);
}
.clapp-person:hover .clapp-person-photo { transform: translateY(-3px); }
.clapp-person-name {
  font-size: 20px;
  font-weight: 600;
  color: #0d2624;
  letter-spacing: -0.015em;
  margin: 0;
}
.clapp-person-role {
  font-size: 14.5px;
  color: #6e6e73;
  margin-top: -10px;
}
.clapp-person-bio {
  font-size: 14.5px;
  line-height: 1.55;
  color: #4a5a52;
  margin: 0;
}

/* ---------- ARCHETYPE N — Document / Legal ---------- */
.clapp-doc-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 120px) clamp(20px, 4vw, 40px);
  font-size: 17px;
  line-height: 1.7;
  color: #1d1d1f;
}
.clapp-doc-wrap h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0d2624;
  margin: 0 0 8px;
  line-height: 1.1;
}
.clapp-doc-wrap .clapp-doc-meta {
  font-size: 13px;
  color: #6e6e73;
  letter-spacing: 0.02em;
  margin-bottom: 32px;
  display: block;
}
.clapp-doc-wrap h2 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  color: #143425;
  margin: 36px 0 12px;
  letter-spacing: -0.01em;
}
.clapp-doc-wrap h3 {
  font-size: 18px;
  font-weight: 600;
  color: #274543;
  margin: 24px 0 10px;
}
.clapp-doc-wrap p { margin: 0 0 16px; color: #33383f; }
.clapp-doc-wrap ul, .clapp-doc-wrap ol { padding-left: 22px; margin: 0 0 18px; }
.clapp-doc-wrap li { margin-bottom: 6px; }

/* Sitemap columns */
.clapp-sitemap-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
  margin: 32px 0;
}
.clapp-sitemap-col h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #143425;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(20,52,37,0.1);
}
.clapp-sitemap-col ul { list-style: none; padding: 0; margin: 0; }
.clapp-sitemap-col li { margin-bottom: 8px; }
.clapp-sitemap-col a {
  font-size: 14.5px;
  color: #424245;
  text-decoration: none;
  transition: color 0.15s ease;
}
.clapp-sitemap-col a:hover { color: #0d2624; }

/* 404 center */
.clapp-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(80px, 14vh, 160px) 24px;
}
.clapp-404 .clapp-hero-num { font-size: clamp(100px, 18vw, 260px); color: #0d2624; margin-bottom: 12px; }
.clapp-404-body { max-width: 48ch; margin: 0 auto; }

/* === END CLAPP ARCHETYPES K / L / M / N v1 === */


/* === CLAPP NEWSROOM v1 === */
/* Apple Newsroom-inspired blog layout, tuned to GreenState palette. */

.clapp-news-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(20,52,37,0.12);
}
.clapp-news-chips a {
  font-size: 13px;
  font-weight: 500;
  color: #274543;
  padding: 8px 18px;
  border: 1px solid rgba(20,52,37,0.16);
  border-radius: 999px;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  letter-spacing: 0.01em;
}
.clapp-news-chips a:hover,
.clapp-news-chips a.is-active {
  background: #143425;
  color: #fff;
  border-color: #143425;
}

.clapp-news-featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  background: #ffffff;
  border-radius: 26px;
  overflow: hidden;
  margin: 0 0 56px;
  border: 1px solid rgba(20,52,37,0.08);
}
@media (max-width: 900px) { .clapp-news-featured { grid-template-columns: 1fr; } }
.clapp-news-featured-image {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  min-height: 320px;
}
.clapp-news-featured-body {
  padding: clamp(32px, 4vw, 56px);
}
.clapp-news-featured-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #274543;
  margin-bottom: 18px;
}
.clapp-news-featured h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: #0d2624;
  margin: 0 0 18px;
  max-width: 20ch;
}
.clapp-news-featured p {
  font-size: 17px;
  line-height: 1.55;
  color: #424245;
  margin: 0 0 22px;
  max-width: 52ch;
}
.clapp-news-featured a.clapp-news-read-link {
  font-size: 15px;
  font-weight: 600;
  color: #143425;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.clapp-news-featured a.clapp-news-read-link::after {
  content: '→';
  transition: transform 0.2s ease;
}
.clapp-news-featured a.clapp-news-read-link:hover::after { transform: translateX(4px); }
.clapp-news-date {
  font-size: 13px;
  color: #6e6e73;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

/* Newsroom-style article hero: centered on a clean bg, big display type */
.clapp-article-hero {
  padding: clamp(80px, 12vh, 140px) 0 clamp(40px, 6vh, 60px);
  background: #fafaf7;
  text-align: center;
}
.clapp-article-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.clapp-article-hero .clapp-news-featured-kicker {
  margin-bottom: 24px;
  color: #274543;
}
.clapp-article-hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
  color: #0d2624;
  margin: 0 0 24px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.clapp-article-hero-lead {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: #424245;
  max-width: 56ch;
  margin: 0 auto 28px;
}
.clapp-article-byline {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6e6e73;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.clapp-article-byline::before,
.clapp-article-byline::after {
  content: '';
  display: inline-block;
  width: 44px;
  height: 1px;
  background: rgba(20,52,37,0.2);
}

/* Feature image below hero */
.clapp-article-feature-img {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.clapp-article-feature-img-inner {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-radius: 22px;
}

/* === END CLAPP NEWSROOM v1 === */


/* === CLAPP STICKY + APPLE-NEWS MODULES v1 === */
/* ============ Sticky footer CTA (Apple One pattern) ============ */
.clapp-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: #0a0b0a;
  color: #fff;
  padding: 14px 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.2);
  font-family: var(--default-font);
}
.clapp-sticky-cta.is-visible { transform: translateY(0); }
.clapp-sticky-cta.is-dismissed { display: none; }

.clapp-sticky-cta-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  box-sizing: border-box;
}
.clapp-sticky-cta-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}
.clapp-sticky-cta-logo-img {
  height: 22px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.clapp-sticky-cta-msg {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  flex: 1;
  max-width: 64ch;
}
.clapp-sticky-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  background: #ADB295;
  border: 1px solid #ADB295;
  border-radius: 999px;
  color: #0d2624;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 2px 10px rgba(173, 178, 149, 0.35);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.clapp-sticky-cta-btn:hover {
  background: #fff;
  border-color: #fff;
  color: #0d2624;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.clapp-sticky-cta-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  transition: color 0.2s ease;
  flex-shrink: 0;
}
.clapp-sticky-cta-close:hover { color: #fff; }

body.clapp-has-sticky-cta { padding-bottom: 80px; }

@media (max-width: 720px) {
  .clapp-sticky-cta-msg { font-size: 13px; max-width: none; }
  .clapp-sticky-cta-close { display: none; }
  .clapp-sticky-cta-inner { gap: 12px; padding: 0 16px; }
  .clapp-sticky-cta-btn { padding: 10px 18px; font-size: 13px; }
  .clapp-sticky-cta-logo-img { height: 18px; }
  body.clapp-has-sticky-cta { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .clapp-sticky-cta { transition: none; }
}

/* ============ Apple News-style comparison table ============ */
.clapp-compare-head {
  text-align: center;
  margin-bottom: 24px;
}
.clapp-compare-head .clapp-eyebrow { justify-content: center; }
.clapp-compare-head h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.clapp-compare-head p {
  font-size: clamp(15px, 1.2vw, 18px);
  color: #6e6e73;
  margin: 10px auto 0;
  max-width: 50ch;
}
.clapp-compare-cta-row {
  display: flex;
  justify-content: center;
  margin: 28px 0 40px;
}

.clapp-compare-table {
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(13, 38, 36, 0.1);
}
.clapp-compare-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 16px;
  padding: 20px clamp(20px, 3vw, 40px);
  border-bottom: 1px solid rgba(13, 38, 36, 0.1);
  align-items: center;
  font-size: 15.5px;
  color: #1d1d1f;
}
.clapp-compare-row.is-header {
  padding-top: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(13, 38, 36, 0.16);
}
.clapp-compare-row.is-header .clapp-compare-label { font-size: 0; }
.clapp-compare-col-header {
  text-align: center;
}
.clapp-compare-col-header-name {
  font-size: 20px;
  font-weight: 600;
  color: #0d2624;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.clapp-compare-col-header-price {
  font-size: 14px;
  color: #274543;
  letter-spacing: 0.01em;
}
.clapp-compare-col-header.is-featured .clapp-compare-col-header-name { color: #143425; }

.clapp-compare-label { font-weight: 500; color: #1d1d1f; }
.clapp-compare-cell {
  text-align: center;
  font-size: 14px;
  color: #4a5a52;
}
.clapp-compare-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(147, 184, 154, 0.25);
  color: #143425;
  font-weight: 700;
  font-size: 14px;
}
.clapp-compare-check::before { content: '✓'; }
.clapp-compare-x {
  display: inline-block;
  color: rgba(13, 38, 36, 0.3);
  font-size: 22px;
  line-height: 1;
}
.clapp-compare-x::before { content: '—'; }

@media (max-width: 760px) {
  .clapp-compare-row {
    grid-template-columns: 1.4fr 1fr 1fr;
    font-size: 13.5px;
    gap: 10px;
  }
  .clapp-compare-col-header-name { font-size: 16px; }
}

/* ============ Apple News-style device/icon strip ============ */
.clapp-iconstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 40px 0;
  text-align: center;
}
.clapp-iconstrip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 12px;
  border-radius: 16px;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.clapp-iconstrip-item:hover {
  transform: translateY(-3px);
  background: rgba(20, 52, 37, 0.04);
}
.clapp-iconstrip-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #143425 0%, #274543 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: var(--accent-font);
}
.clapp-iconstrip-label {
  font-size: 14.5px;
  font-weight: 600;
  color: #0d2624;
  letter-spacing: -0.01em;
}
.clapp-iconstrip-sub {
  font-size: 12.5px;
  color: #6e6e73;
  margin-top: -6px;
}

/* === END CLAPP STICKY + APPLE-NEWS MODULES v1 === */

/* === CLAPP JURISDICTION IDENTITY + CITIES GRID v1 === */
/* Used on /jurisdictions/counties/*.html and /jurisdictions/cities/*.html
   - .clapp-identity-shape: SVG badge in hero eyebrow row, unique per place
   - .clapp-cities-grid: grid of city tiles inside a county page (Cities in X County)
*/
.clapp-identity-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.clapp-identity-shape {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.clapp-identity-shape svg {
  width: 40px;
  height: 40px;
  display: block;
}
.clapp-identity-shape svg path,
.clapp-identity-shape svg line,
.clapp-identity-shape svg polyline,
.clapp-identity-shape svg circle,
.clapp-identity-shape svg rect,
.clapp-identity-shape svg polygon {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clapp-identity-shape svg .fill {
  fill: #fff;
  stroke: none;
}
.clapp-identity-shape.is-dark {
  background: rgba(13, 38, 36, 0.06);
  border: 1px solid rgba(13, 38, 36, 0.12);
}
.clapp-identity-shape.is-dark svg path,
.clapp-identity-shape.is-dark svg line,
.clapp-identity-shape.is-dark svg polyline,
.clapp-identity-shape.is-dark svg circle,
.clapp-identity-shape.is-dark svg rect,
.clapp-identity-shape.is-dark svg polygon {
  stroke: #143425;
}
.clapp-identity-shape.is-dark svg .fill {
  fill: #143425;
}

.clapp-cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.clapp-city-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(13, 38, 36, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.3s ease;
}
.clapp-city-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(13, 38, 36, 0.08);
  border-color: rgba(20, 52, 37, 0.22);
  text-decoration: none;
  color: inherit;
}
.clapp-city-tile-shape {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f5f5f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.clapp-city-tile-shape svg {
  width: 26px;
  height: 26px;
}
.clapp-city-tile-shape svg path,
.clapp-city-tile-shape svg line,
.clapp-city-tile-shape svg polyline,
.clapp-city-tile-shape svg circle,
.clapp-city-tile-shape svg rect,
.clapp-city-tile-shape svg polygon {
  fill: none;
  stroke: #143425;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clapp-city-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.clapp-city-tile-name {
  font-family: var(--accent-font, 'Mona Sans'), sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #0d2624;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.clapp-city-tile-meta {
  font-size: 12.5px;
  color: #6e6e73;
  line-height: 1.35;
}
.clapp-city-tile-arrow {
  margin-left: auto;
  color: #143425;
  font-weight: 600;
  font-size: 16px;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.clapp-city-tile:hover .clapp-city-tile-arrow {
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .clapp-identity-shape { width: 52px; height: 52px; }
  .clapp-identity-shape svg { width: 32px; height: 32px; }
  .clapp-cities-grid { grid-template-columns: 1fr; }
}
/* === END CLAPP JURISDICTION IDENTITY + CITIES GRID v1 === */

/* === CLAPP CITIES LIST v1 === */
.clapp-cities-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 24px;
  margin-top: 24px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
}
.clapp-cities-list a, .clapp-cities-list span {
  color: #143425;
  text-decoration: none;
  padding: 6px 0;
  display: block;
}
.clapp-cities-list a {
  color: #143425;
  font-weight: 600;
  border-bottom: 1px solid rgba(20,52,37,0.25);
  transition: border-color 0.2s ease, color 0.2s ease;
  display: inline-block;
  padding-bottom: 2px;
}
.clapp-cities-list a:hover {
  border-bottom-color: #143425;
  color: #0d2624;
}
.clapp-cities-list span { color: #8a8d90; font-style: italic; }

/* --- Bento GRID wrapper — reuses .clapp-bento-card styling but lays them out as a responsive grid instead of horizontal scroll --- */
.clapp-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 32px 0 12px;
}
.clapp-bento-grid .clapp-bento-card {
  flex: none;
  width: 100%;
  scroll-snap-align: none;
}
@media (max-width: 1000px) { .clapp-bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .clapp-bento-grid { grid-template-columns: 1fr; gap: 18px; } }

/* --- Bento image grid v2 — large image tile + stats block beneath each --- */
.clapp-cities-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 32px 0 12px;
}
.clapp-cities-bento-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.clapp-cities-bento-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(13,38,36,0.14);
}
.clapp-cities-bento-tile-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #eceef0;
}
.clapp-cities-bento-tile-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,38,36,0) 55%, rgba(13,38,36,0.75) 100%);
  pointer-events: none;
}
.clapp-cities-bento-tile-name {
  position: absolute;
  bottom: 14px;
  left: 18px;
  right: 18px;
  z-index: 2;
  color: #fff;
  font-family: "Mona Sans", sans-serif;
  font-weight: 620;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}
.clapp-cities-bento-tile-info {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.clapp-cities-bento-tile-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(20,52,37,0.08);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
.clapp-cities-bento-tile-stat:last-child { border-bottom: none; }
.clapp-cities-bento-tile-stat-label {
  color: #5a7566;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  flex-shrink: 0;
}
.clapp-cities-bento-tile-stat-value {
  color: #143425;
  font-weight: 620;
  font-family: "Mona Sans", sans-serif;
  font-size: 14px;
  text-align: right;
  letter-spacing: -0.01em;
}
/* Non-linked (city without a page yet) */
.clapp-cities-bento-tile.is-unlinked {
  pointer-events: none;
  opacity: 0.7;
}
.clapp-cities-bento-tile.is-unlinked .clapp-cities-bento-tile-img {
  filter: saturate(0.35) brightness(0.82);
}
@media (max-width: 1000px) { .clapp-cities-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .clapp-cities-bento { grid-template-columns: 1fr; gap: 18px; } }

/* === CLAPP COUNTY DATA SECTIONS v1 === */

/* --- 4-up "By the numbers" stat snapshot --- */
.clapp-county-stats {
  padding: 120px 0;
  background: #fafaf7;
}
.clapp-county-stats-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}
.clapp-county-stats-header {
  max-width: 700px;
  margin: 0 auto 56px;
  text-align: center;
}
.clapp-county-stats-header .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 16px;
  display: inline-block;
}
.clapp-county-stats-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 620;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #143425;
  margin: 0 0 16px;
}
.clapp-county-stats-header h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-county-stats-header p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #424245;
}
.clapp-county-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* default for 4 or 8 cards */
  gap: 24px;
}
/* Adapt grid columns to actual child count so the row never lands lopsided.
   3 or 6 children → 3 columns (1×3 or 2×3).
   2 children → 2 columns. 4 or 8 fall through to the 4-col default. */
.clapp-county-stats-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.clapp-county-stats-grid:has(> :nth-child(3):last-child),
.clapp-county-stats-grid:has(> :nth-child(6):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
.clapp-county-stat-card {
  background: #fff;
  border-radius: 22px;
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.clapp-county-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(13,38,36,0.08);
}
.clapp-county-stat-figure {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 680;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #143425;
  margin-bottom: 12px;
}
.clapp-county-stat-label {
  font-family: "Mona Sans", sans-serif;
  font-size: 17px;
  font-weight: 620;
  color: #143425;
  line-height: 1.2;
  margin-bottom: 4px;
}
.clapp-county-stat-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #5a7566;
}
@media (max-width: 1000px) { .clapp-county-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .clapp-county-stats-grid { grid-template-columns: 1fr; } }

/* === CLAPP COUNTY STATS WITH LOCAL BG v1 === */
/* Opt-in: apply .has-local-bg to .clapp-county-stats + include a
   .clapp-local-bg-image child. Same visual language as the
   Services section (.clapp-section-local-bg.is-blur): dark blurred
   county aerial behind frosted-glass stat cards. */
.clapp-county-stats.has-local-bg {
  position: relative;
  overflow: hidden;
  background: #0d2624;
}
.clapp-county-stats.has-local-bg .clapp-local-bg-image {
  position: absolute;
  top: -280px;
  bottom: -280px;
  left: -20px;
  right: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(1.18);
  will-change: transform;
}
.clapp-county-stats.has-local-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 38, 36, 0.36) 0%,
    rgba(13, 38, 36, 0.32) 45%,
    rgba(13, 38, 36, 0.44) 100%);
  z-index: 1;
}
.clapp-county-stats.has-local-bg .clapp-county-stats-inner {
  position: relative;
  z-index: 2;
}
.clapp-county-stats.has-local-bg .clapp-county-stats-header .clapp-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}
.clapp-county-stats.has-local-bg .clapp-county-stats-header h2,
.clapp-county-stats.has-local-bg .clapp-county-stats-header h2 em {
  color: #fff;
}
.clapp-county-stats.has-local-bg .clapp-county-stats-header p {
  color: rgba(255, 255, 255, 0.8);
}
.clapp-county-stats.has-local-bg .clapp-county-stats-header p a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.clapp-county-stats.has-local-bg .clapp-county-stats-header p a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.6);
}
/* Frosted-glass stat cards */
.clapp-county-stats.has-local-bg .clapp-county-stat-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: 0 10px 30px rgba(13, 38, 36, 0.22);
}
.clapp-county-stats.has-local-bg .clapp-county-stat-card:hover {
  box-shadow: 0 16px 36px rgba(13, 38, 36, 0.28);
}
/* === END CLAPP COUNTY STATS WITH LOCAL BG === */

/* --- Horizontal program timeline --- */
.clapp-county-timeline {
  padding: 120px 0;
  background: #fff;
}
.clapp-county-timeline-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-county-timeline-header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.clapp-county-timeline-header .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 16px;
  display: inline-block;
}
.clapp-county-timeline-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 620;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #143425;
  margin: 0 0 16px;
}
.clapp-county-timeline-header h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-county-timeline-header p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #424245;
  max-width: 560px;
  margin: 0 auto;
}
.clapp-county-timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* default for 4 or 8 children */
  column-gap: 28px;
  row-gap: 64px;
  /* Dots + connector lines removed sitewide — years flow inline above
   * each node and wrap cleanly with multi-row grids. */
}
.clapp-county-timeline-node {
  position: relative;
  z-index: 1;
}
.clapp-county-timeline-year {
  display: block;
  margin-bottom: 8px;
  font-family: "Mona Sans", sans-serif;
  font-size: 22px;
  font-weight: 680;
  color: #143425;
  letter-spacing: -0.025em;
}
.clapp-county-timeline-node h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 16px;
  font-weight: 620;
  line-height: 1.2;
  color: #143425;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.clapp-county-timeline-node p {
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5a7566;
  margin: 0;
}
/* Adapt column count to actual child count so the grid lands evenly.
   3 or 6 children → 3 columns (1×3 or 2×3).
   5 children → 3 columns (a 3+2 row beats a 4+1 row).
   7 children → 4 columns (a 4+3 row beats a 4+3 with a hanging cell).
   2 children → 2 columns. 4 or 8 children fall through to the 4-col default. */
.clapp-county-timeline-track:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.clapp-county-timeline-track:has(> :nth-child(3):last-child),
.clapp-county-timeline-track:has(> :nth-child(5):last-child),
.clapp-county-timeline-track:has(> :nth-child(6):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .clapp-county-timeline-track,
  .clapp-county-timeline-track:has(> :nth-child(3):last-child),
  .clapp-county-timeline-track:has(> :nth-child(5):last-child),
  .clapp-county-timeline-track:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
  .clapp-county-timeline-track:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .clapp-county-timeline-track,
  .clapp-county-timeline-track:has(> :nth-child(2):last-child),
  .clapp-county-timeline-track:has(> :nth-child(3):last-child),
  .clapp-county-timeline-track:has(> :nth-child(5):last-child),
  .clapp-county-timeline-track:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Notable operators / brands grid --- */
.clapp-county-notables {
  padding: 120px 0;
  background: #eef1ed;
}
.clapp-county-notables-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-county-notables-header {
  max-width: 700px;
  margin: 0 auto 56px;
  text-align: center;
}
.clapp-county-notables-header .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 16px;
  display: inline-block;
}
.clapp-county-notables-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 620;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #143425;
  margin: 0 0 16px;
}
.clapp-county-notables-header h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-county-notables-header p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #424245;
}
.clapp-county-notables-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.clapp-county-notable-card {
  background: #fff;
  border-radius: 22px;
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.clapp-county-notable-kicker {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5a7566;
}
.clapp-county-notable-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 22px;
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #143425;
  margin: 0;
}
.clapp-county-notable-card p {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #424245;
  margin: 0;
}
@media (max-width: 1000px) { .clapp-county-notables-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .clapp-county-notables-grid { grid-template-columns: 1fr; } }

/* --- License-type breakdown bar --- */
.clapp-county-breakdown {
  padding: 96px 0;
  background: #fff;
}
.clapp-county-breakdown-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-county-breakdown .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 16px;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.clapp-county-breakdown h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #143425;
  margin: 0 0 8px;
  text-align: center;
}
.clapp-county-breakdown-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #5a7566;
  text-align: center;
  margin: 0 auto 40px;
  max-width: 620px;
}
.clapp-county-breakdown-bar {
  display: flex;
  width: 100%;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(13,38,36,0.06);
  margin-bottom: 28px;
}
.clapp-county-breakdown-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
}
.clapp-county-breakdown-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.clapp-county-breakdown-legend li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #143425;
  line-height: 1.4;
}
.clapp-county-breakdown-swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-top: 3px;
}
.clapp-county-breakdown-legend strong {
  font-weight: 620;
  color: #143425;
}
.clapp-county-breakdown-legend span {
  color: #5a7566;
}
@media (max-width: 820px) { .clapp-county-breakdown-legend { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .clapp-county-breakdown-legend { grid-template-columns: 1fr; } }

/* === CLAPP COUNTY BREAKDOWN WITH LOCAL BG v1 === */
/* Same opt-in pattern as .clapp-county-stats.has-local-bg — blurred
   county aerial + dark overlay. Breakdown bar sits on top; legend
   gets frosted-glass wrapper; headline/sub go white. */
.clapp-county-breakdown.has-local-bg {
  position: relative;
  overflow: hidden;
  background: #0d2624;
}
.clapp-county-breakdown.has-local-bg .clapp-local-bg-image {
  position: absolute;
  top: -280px;
  bottom: -280px;
  left: -20px;
  right: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(1.18);
  will-change: transform;
}
.clapp-county-breakdown.has-local-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 38, 36, 0.36) 0%,
    rgba(13, 38, 36, 0.32) 45%,
    rgba(13, 38, 36, 0.44) 100%);
  z-index: 1;
}
.clapp-county-breakdown.has-local-bg .clapp-county-breakdown-inner {
  position: relative;
  z-index: 2;
}
.clapp-county-breakdown.has-local-bg .clapp-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}
.clapp-county-breakdown.has-local-bg h2 {
  color: #fff;
}
.clapp-county-breakdown.has-local-bg .clapp-county-breakdown-sub {
  color: rgba(255, 255, 255, 0.8);
}
.clapp-county-breakdown.has-local-bg .clapp-county-breakdown-sub a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* Bar keeps full-color segments, add stronger shadow for contrast on dark bg */
.clapp-county-breakdown.has-local-bg .clapp-county-breakdown-bar {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
/* Legend: white text overrides */
.clapp-county-breakdown.has-local-bg .clapp-county-breakdown-legend li {
  color: rgba(255, 255, 255, 0.88);
}
.clapp-county-breakdown.has-local-bg .clapp-county-breakdown-legend strong {
  color: #fff;
}
.clapp-county-breakdown.has-local-bg .clapp-county-breakdown-legend span {
  color: rgba(255, 255, 255, 0.68);
}
/* === END CLAPP COUNTY BREAKDOWN WITH LOCAL BG === */

/* === END CLAPP COUNTY DATA SECTIONS v1 === */

/* === CLAPP COUNTY BENTO GRID v1 (jurisdictions/index.html) === */
/* Large image-tile per county + name + meta + difficulty dots + R/C/M/D/T pills. */
.clapp-county-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 28px 0;
}
.clapp-county-bento-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.clapp-county-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(13,38,36,0.14);
}
.clapp-county-bento-card-img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #eceef0;
}
.clapp-county-bento-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.clapp-county-bento-card-name {
  font-family: "Mona Sans", sans-serif;
  font-weight: 620;
  font-size: 22px;
  line-height: 1.1;
  color: #143425;
  margin: 0;
  letter-spacing: -0.015em;
}
.clapp-county-bento-card-meta {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #5a7566;
  margin: 0;
}
.clapp-county-bento-card .clapp-loc-card-specs {
  margin-top: 6px;
}
@media (max-width: 1000px) { .clapp-county-bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .clapp-county-bento-grid { grid-template-columns: 1fr; gap: 16px; } }
/* === END CLAPP COUNTY BENTO GRID v1 === */

/* === CLAPP COUNTY DATA v2 (revenue chart + processing stats + state comparison) === */

/* --- Annual tax-revenue bar chart --- */
.clapp-county-chart {
  padding: 120px 0;
  background: #fafaf7;
}
.clapp-county-chart-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-county-chart-header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.clapp-county-chart-header .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 16px;
  display: inline-block;
}
.clapp-county-chart-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #143425;
  margin: 0 0 14px;
}
.clapp-county-chart-header h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-county-chart-header p {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #424245;
}
.clapp-county-chart-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 14px;
  padding: 28px 24px 20px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(20,52,37,0.08);
  align-items: end;
  min-height: 340px;
}
.clapp-county-chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  justify-content: flex-end;
}
.clapp-county-chart-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #274543 0%, #143425 100%);
  border-radius: 8px 8px 2px 2px;
  position: relative;
  transition: background 0.25s ease;
}
.clapp-county-chart-bar:hover .clapp-county-chart-bar-fill {
  background: linear-gradient(180deg, #3a5c58 0%, #1e4935 100%);
}
.clapp-county-chart-bar-value {
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Mona Sans", sans-serif;
  font-weight: 620;
  font-size: 13px;
  color: #143425;
  letter-spacing: -0.01em;
}
.clapp-county-chart-bar-label {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #5a7566;
  letter-spacing: 0.02em;
}
.clapp-county-chart-footnote {
  margin-top: 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: #5a7566;
  text-align: center;
  font-style: italic;
}

/* --- Processing stats (4-up stat cards, more compact than county-stats) --- */
.clapp-county-processing {
  padding: 96px 0;
  background: #fff;
}
.clapp-county-processing-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-county-processing-header {
  max-width: 700px;
  margin: 0 auto 48px;
  text-align: center;
}
.clapp-county-processing-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #143425;
  margin: 0 0 14px;
}
.clapp-county-processing-header h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-county-processing-header .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 16px;
  display: inline-block;
}
.clapp-county-processing-header p {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #424245;
}
.clapp-county-processing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.clapp-county-processing-card {
  background: #fafaf7;
  border-radius: 20px;
  padding: 28px 24px 26px;
  border: 1px solid rgba(20,52,37,0.08);
}
.clapp-county-processing-figure {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 680;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #143425;
  margin-bottom: 10px;
}
.clapp-county-processing-label {
  font-family: "Mona Sans", sans-serif;
  font-size: 15px;
  font-weight: 620;
  line-height: 1.2;
  color: #143425;
  margin-bottom: 4px;
}
.clapp-county-processing-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #5a7566;
}
@media (max-width: 900px) { .clapp-county-processing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .clapp-county-processing-grid { grid-template-columns: 1fr; } }

/* === CLAPP COUNTY PROCESSING WITH LOCAL BG v1 === */
/* Same opt-in pattern as .clapp-county-stats.has-local-bg — blurred
   county aerial + dark overlay + frosted-glass cards. */
.clapp-county-processing.has-local-bg {
  position: relative;
  overflow: hidden;
  background: #0d2624;
}
.clapp-county-processing.has-local-bg .clapp-local-bg-image {
  position: absolute;
  top: -280px;
  bottom: -280px;
  left: -20px;
  right: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(1.18);
  will-change: transform;
}
.clapp-county-processing.has-local-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 38, 36, 0.36) 0%,
    rgba(13, 38, 36, 0.32) 45%,
    rgba(13, 38, 36, 0.44) 100%);
  z-index: 1;
}
.clapp-county-processing.has-local-bg .clapp-county-processing-inner {
  position: relative;
  z-index: 2;
}
.clapp-county-processing.has-local-bg .clapp-county-processing-header .clapp-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}
.clapp-county-processing.has-local-bg .clapp-county-processing-header h2,
.clapp-county-processing.has-local-bg .clapp-county-processing-header h2 em {
  color: #fff;
}
.clapp-county-processing.has-local-bg .clapp-county-processing-header p {
  color: rgba(255, 255, 255, 0.8);
}
.clapp-county-processing.has-local-bg .clapp-county-processing-header p a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* Frosted-glass cards */
.clapp-county-processing.has-local-bg .clapp-county-processing-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: 0 10px 30px rgba(13, 38, 36, 0.22);
}
.clapp-county-processing.has-local-bg .clapp-county-processing-card a {
  color: #143425;
  font-weight: 600;
}
/* === END CLAPP COUNTY PROCESSING WITH LOCAL BG === */

/* --- Humboldt vs California state average comparison bars --- */
.clapp-county-compare {
  padding: 96px 0;
  background: #eef1ed;
}
.clapp-county-compare-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-county-compare-header {
  text-align: center;
  margin-bottom: 48px;
}
.clapp-county-compare-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #143425;
  margin: 0 0 12px;
}
.clapp-county-compare-header h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-county-compare-header .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 14px;
  display: inline-block;
}
.clapp-county-compare-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: #143425;
}
.clapp-county-compare-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.clapp-county-compare-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.clapp-county-compare-row {
  display: grid;
  grid-template-columns: 200px 1fr 80px;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20,52,37,0.08);
}
.clapp-county-compare-row:last-child { border-bottom: none; }
.clapp-county-compare-label {
  font-family: "Mona Sans", sans-serif;
  font-weight: 620;
  font-size: 15px;
  color: #143425;
  letter-spacing: -0.01em;
}
.clapp-county-compare-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clapp-county-compare-bar {
  position: relative;
  height: 14px;
  background: rgba(20,52,37,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.clapp-county-compare-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.clapp-county-compare-bar-fill.is-county { background: #143425; }
.clapp-county-compare-bar-fill.is-state  { background: #a8b5ad; }
.clapp-county-compare-values {
  font-family: "Mona Sans", sans-serif;
  font-size: 13px;
  color: #143425;
  font-weight: 620;
  text-align: right;
  line-height: 1.3;
}
.clapp-county-compare-values span {
  display: block;
  font-weight: 400;
  color: #5a7566;
  font-size: 12px;
}
@media (max-width: 700px) {
  .clapp-county-compare-row { grid-template-columns: 1fr; gap: 8px; }
  .clapp-county-compare-values { text-align: left; }
}

/* === CLAPP COUNTY COMPARE WITH LOCAL BG v1 === */
/* Same opt-in pattern — blurred county aerial + dark overlay. Bar fills
   stay in their brand colors (deep green + muted sage) but text/labels
   all flip to white for contrast. */
.clapp-county-compare.has-local-bg {
  position: relative;
  overflow: hidden;
  background: #0d2624;
}
.clapp-county-compare.has-local-bg .clapp-local-bg-image {
  position: absolute;
  top: -280px;
  bottom: -280px;
  left: -20px;
  right: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(1.18);
  will-change: transform;
}
.clapp-county-compare.has-local-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 38, 36, 0.36) 0%,
    rgba(13, 38, 36, 0.32) 45%,
    rgba(13, 38, 36, 0.44) 100%);
  z-index: 1;
}
.clapp-county-compare.has-local-bg .clapp-county-compare-inner {
  position: relative;
  z-index: 2;
}
.clapp-county-compare.has-local-bg .clapp-county-compare-header .clapp-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}
.clapp-county-compare.has-local-bg .clapp-county-compare-header h2,
.clapp-county-compare.has-local-bg .clapp-county-compare-header h2 em {
  color: #fff;
}
.clapp-county-compare.has-local-bg .clapp-county-compare-legend-item {
  color: rgba(255, 255, 255, 0.85);
}
/* Row dividers, labels, values → white */
.clapp-county-compare.has-local-bg .clapp-county-compare-row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.clapp-county-compare.has-local-bg .clapp-county-compare-label,
.clapp-county-compare.has-local-bg .clapp-county-compare-values {
  color: #fff;
}
.clapp-county-compare.has-local-bg .clapp-county-compare-values span {
  color: rgba(255, 255, 255, 0.62);
}
/* Bar tracks: lighten the empty track so the fills read cleanly */
.clapp-county-compare.has-local-bg .clapp-county-compare-bar {
  background: rgba(255, 255, 255, 0.12);
}
/* Humboldt fill flips to a brighter green so it reads on dark */
.clapp-county-compare.has-local-bg .clapp-county-compare-bar-fill.is-county {
  background: #7fd4a7;
}
.clapp-county-compare.has-local-bg .clapp-county-compare-bar-fill.is-state {
  background: rgba(255, 255, 255, 0.55);
}
/* Footnote text + links */
.clapp-county-compare.has-local-bg .clapp-county-compare-footnote {
  color: rgba(255, 255, 255, 0.68) !important;
}
.clapp-county-compare.has-local-bg .clapp-county-compare-footnote a {
  color: #fff !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* === END CLAPP COUNTY COMPARE WITH LOCAL BG === */

/* === CLAPP COUNTY LOCAL-BG GROUP v1 === */
/* Wrap adjacent .has-local-bg sections in .clapp-county-local-bg-group to
   share a single continuous parallax image + single gradient overlay.
   Each child section that sits inside the group takes .in-group, which
   suppresses its own bg image/overlay but keeps the white-text styling. */
.clapp-county-local-bg-group {
  position: relative;
  overflow: hidden;
  background: #0d2624;
}
.clapp-county-local-bg-group > .clapp-local-bg-image {
  position: absolute;
  top: -280px;
  bottom: -280px;
  left: -20px;
  right: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(1.18);
  will-change: transform;
}
.clapp-county-local-bg-group::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 38, 36, 0.36) 0%,
    rgba(13, 38, 36, 0.32) 45%,
    rgba(13, 38, 36, 0.44) 100%);
  z-index: 1;
  pointer-events: none;
}
.clapp-county-local-bg-group > section {
  position: relative;
  z-index: 2;
}
/* Suppress each child section's own bg + overlay when grouped */
.clapp-county-local-bg-group .has-local-bg.in-group {
  background: transparent !important;
  overflow: visible;
}
.clapp-county-local-bg-group .has-local-bg.in-group::before {
  display: none !important;
}
.clapp-county-local-bg-group .has-local-bg.in-group > .clapp-local-bg-image {
  display: none;
}
/* Tighten the seam so two 120px paddings don't stack */
.clapp-county-local-bg-group > section:not(:first-of-type) {
  padding-top: 0;
}
.clapp-county-local-bg-group > section:not(:last-of-type) {
  padding-bottom: 60px;
}
/* === END CLAPP COUNTY LOCAL-BG GROUP === */
/* === END CLAPP COUNTY DATA v2 === */
@media (max-width: 900px) { .clapp-cities-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .clapp-cities-list { grid-template-columns: 1fr; } }
/* === END CLAPP CITIES LIST v1 === */

/* === CLAPP APPLE-STYLE HOMEPAGE v1 === */
/* Modeled on apple.com/airpods-max. Restraint, whitespace, 2-5 word subheads,
   tab toggles, fade-in-on-scroll. No parallax video, no scroll-scrub.
*/

/* Hero override — single centered still, drops the aside-split */
.clapp-hero.clapp-apl-hero .clapp-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  padding-top: 14vh;
  padding-bottom: 10vh;
  text-align: center;
  display: block;
}
.clapp-hero.clapp-apl-hero .clapp-eyebrow {
  justify-content: center;
  display: inline-flex;
  margin: 0 auto 22px;
}
.clapp-hero.clapp-apl-hero h1 {
  font-family: "Mona Sans", "DM Sans", sans-serif;
  font-weight: 680;
  font-size: clamp(52px, 8vw, 124px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: none;
  margin: 0 auto 18px;
}
.clapp-hero.clapp-apl-hero h1 em {
  font-style: normal;
  display: block;
  color: #d7ecd9;
  font-weight: 340;
}
.clapp-hero.clapp-apl-hero .clapp-lead {
  max-width: 620px;
  margin: 24px auto 36px;
  font-size: 19px;
  line-height: 1.55;
}
.clapp-hero.clapp-apl-hero .clapp-cta-row {
  justify-content: center;
}

/* 2. HIGHLIGHTS CAROUSEL */
.clapp-apl-highlights {
  padding: 120px 0 100px;
  background: #f5f5f7;
}
.clapp-apl-highlights-header {
  max-width: 1240px;
  margin: 0 auto 44px;
  padding: 0 32px;
}
.clapp-apl-highlights-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #143425;
  margin: 0;
}
.clapp-apl-scroller-wrap {
  position: relative;
  padding: 0 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.clapp-apl-scroller {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.clapp-apl-scroller::-webkit-scrollbar { display: none; }
.clapp-apl-card {
  flex: 0 0 clamp(300px, 32vw, 420px);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.clapp-apl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.clapp-apl-card-img {
  flex: 1;
  background-size: cover;
  background-position: center;
}
.clapp-apl-card-body {
  padding: 28px 28px 32px;
  background: #fff;
}
.clapp-apl-card-kicker {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-bottom: 8px;
  display: block;
}
.clapp-apl-card-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 24px;
  font-weight: 620;
  line-height: 1.1;
  color: #143425;
  margin: 0 0 6px;
}
.clapp-apl-card-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #424245;
  margin: 0;
}

/* 3. SERVICE SELECTOR */
.clapp-apl-selector {
  padding: 140px 0 120px;
  background: #fff;
}
.clapp-apl-selector-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-apl-selector-header {
  text-align: center;
  margin-bottom: 40px;
}
.clapp-apl-selector-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #143425;
  margin: 0 0 12px;
}
.clapp-apl-selector-header p {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #424245;
  max-width: 620px;
  margin: 0 auto;
}
.clapp-apl-selector-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.clapp-apl-selector-tab {
  font-family: "DM Sans", sans-serif;
  background: #f5f5f7;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #143425;
  cursor: pointer;
  transition: all 0.25s ease;
}
.clapp-apl-selector-tab:hover {
  background: #eceef0;
}
.clapp-apl-selector-tab.is-active {
  background: #143425;
  color: #fff;
  border-color: #143425;
}
.clapp-apl-selector-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 360px);
  gap: 18px;
  transition: opacity 0.35s ease;
}
.clapp-apl-selector-grid.is-swapping {
  opacity: 0;
}
.clapp-apl-selector-cell {
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-color: #eceef0;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.clapp-apl-selector-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,52,37,0) 40%, rgba(13,38,36,0.82) 100%);
  pointer-events: none;
}
.clapp-apl-selector-cell-main {
  grid-row: span 2;
}
.clapp-apl-selector-cell h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 26px;
  font-weight: 620;
  line-height: 1.1;
  margin: 0 0 6px;
  position: relative;
  z-index: 2;
  color: #fff;
}
.clapp-apl-selector-cell p {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  opacity: 0.92;
  position: relative;
  z-index: 2;
  max-width: 380px;
  color: #fff;
}

/* 4. DETAIL TABS */
.clapp-apl-detail {
  padding: 140px 0 120px;
  background: #f5f5f7;
}
.clapp-apl-detail-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-apl-detail-header {
  text-align: center;
  margin-bottom: 40px;
}
.clapp-apl-detail-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #143425;
  margin: 0 0 12px;
}
.clapp-apl-detail-header p {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #424245;
  max-width: 620px;
  margin: 0 auto;
}
.clapp-apl-detail-tabs {
  display: flex;
  border-bottom: 1px solid #d2d2d7;
  gap: 0;
  justify-content: center;
  margin-bottom: 48px;
}
.clapp-apl-detail-tab {
  font-family: "DM Sans", sans-serif;
  background: transparent;
  border: none;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 500;
  color: #6e6e73;
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease;
}
.clapp-apl-detail-tab:hover {
  color: #143425;
}
.clapp-apl-detail-tab.is-active {
  color: #143425;
}
.clapp-apl-detail-tab.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: #143425;
}
.clapp-apl-detail-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.clapp-apl-detail-panel.is-active {
  display: grid;
  animation: clappAplFadeIn 0.5s ease;
}
@keyframes clappAplFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.clapp-apl-detail-img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  background-color: #eceef0;
}
.clapp-apl-detail-text h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #143425;
  margin: 0 0 18px;
}
.clapp-apl-detail-text p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #424245;
  margin: 0 0 16px;
}

/* 5. FULL-BLEED LIFESTYLE — light variant (user: no dark objects sitewide) */
.clapp-apl-fullbleed {
  position: relative;
  min-height: 520px;
  background-color: #fafaf7;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.clapp-apl-fullbleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250,250,247,0.96);
  pointer-events: none;
}
.clapp-apl-fullbleed-inner {
  padding: 100px 32px;
  padding-left: max(32px, calc((100vw - 1240px) / 2));
  position: relative;
  z-index: 2;
  color: #143425;
  max-width: 720px;
}
.clapp-apl-fullbleed .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 22px;
}
.clapp-apl-fullbleed h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 620;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  color: #143425;
}
.clapp-apl-fullbleed h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-apl-fullbleed p {
  font-family: "DM Sans", sans-serif;
  font-size: 19px;
  line-height: 1.55;
  color: #424245;
  margin: 0 0 32px;
  max-width: 560px;
}

/* 6. 5-UP ICON GRID */
.clapp-apl-5up {
  padding: 120px 0;
  background: #fff;
}
.clapp-apl-5up-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-apl-5up-header {
  text-align: center;
  margin-bottom: 48px;
}
.clapp-apl-5up-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #143425;
  margin: 0;
}
.clapp-apl-5up-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.clapp-apl-5up-tile {
  background: #f5f5f7;
  border-radius: 18px;
  padding: 32px 24px 28px;
  aspect-ratio: 1 / 1.1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.25s ease, transform 0.25s ease;
}
.clapp-apl-5up-tile:hover {
  background: #eceef0;
  transform: translateY(-2px);
}
.clapp-apl-5up-icon {
  width: 38px;
  height: 38px;
  color: #143425;
}
.clapp-apl-5up-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clapp-apl-5up-body h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 20px;
  font-weight: 620;
  line-height: 1.15;
  color: #143425;
  margin: 0 0 8px;
}
.clapp-apl-5up-body p {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #424245;
  margin: 0;
}

/* 7. COMPARISON STRIP */
.clapp-apl-compare {
  padding: 120px 0;
  background: #f5f5f7;
}
.clapp-apl-compare-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-apl-compare-header {
  text-align: center;
  margin-bottom: 56px;
}
.clapp-apl-compare-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #143425;
  margin: 0 0 12px;
}
.clapp-apl-compare-header p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #424245;
  max-width: 620px;
  margin: 0 auto;
}
.clapp-apl-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.clapp-apl-compare-col {
  background: #fff;
  border-radius: 22px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
}
.clapp-apl-compare-col.is-feature {
  background: #fafaf7;
  color: #143425;
  border: 2px solid #143425;
}
.clapp-apl-compare-col h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 22px;
  font-weight: 620;
  margin: 0 0 24px;
  color: #143425;
}
.clapp-apl-compare-col.is-feature h3 {
  color: #143425;
}
.clapp-apl-compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.clapp-apl-compare-col li {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #424245;
  padding-left: 24px;
  position: relative;
}
.clapp-apl-compare-col.is-feature li {
  color: #424245;
}
.clapp-apl-compare-col li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #143425;
  font-weight: 600;
}
.clapp-apl-compare-col.is-feature li::before {
  color: #143425;
}
.clapp-apl-compare-col li.is-miss::before {
  content: "\2014";
  color: #a8a8af;
}
.clapp-apl-compare-col.is-feature li.is-miss::before {
  color: rgba(20,52,37,0.4);
}

/* Fade-in-on-scroll (Apple-style passive reveals) */
.clapp-apl-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.clapp-apl-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .clapp-apl-selector-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .clapp-apl-selector-cell-main {
    grid-row: auto;
  }
  .clapp-apl-selector-cell {
    min-height: 240px;
  }
  .clapp-apl-detail-panel.is-active {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .clapp-apl-5up-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .clapp-apl-compare-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .clapp-apl-highlights { padding: 72px 0 60px; }
  .clapp-apl-selector,
  .clapp-apl-detail,
  .clapp-apl-5up,
  .clapp-apl-compare { padding: 72px 0; }
  .clapp-apl-5up-grid { grid-template-columns: 1fr; }
  .clapp-apl-fullbleed-inner { padding: 80px 24px; }
  .clapp-apl-fullbleed { min-height: 520px; }
}
/* === END CLAPP APPLE-STYLE HOMEPAGE v1 === */

/* === CLAPP APPLE-STYLE HOMEPAGE v2 — AREA BREAKDOWN === */
/* User direction: homepage should be about the 4 practice areas
   (Licensing / Compliance / Enforcement / Strategic) and break
   each one down — text paragraph + image on the alternating side,
   not numbered kicker tiles. No sideways carousels. */

.clapp-apl-area {
  padding: 140px 0;
  background: #fff;
  position: relative;
}
.clapp-apl-area.is-gray {
  background: #f5f5f7;
}
.clapp-apl-area.is-dark {
  background: #0d2624;
  color: #fff;
}
.clapp-apl-area.is-warm {
  background: #faf6f0;
}

.clapp-apl-area-intro {
  max-width: 980px;
  margin: 0 auto 72px;
  padding: 0 32px;
  text-align: center;
}
.clapp-apl-area-kicker {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-bottom: 18px;
  display: inline-block;
}
.clapp-apl-area.is-dark .clapp-apl-area-kicker {
  color: rgba(255,255,255,0.6);
}
.clapp-apl-area-h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(42px, 5.8vw, 80px);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #143425;
  margin: 0 0 20px;
}
.clapp-apl-area.is-dark .clapp-apl-area-h2 {
  color: #fff;
}
.clapp-apl-area-h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-apl-area.is-dark .clapp-apl-area-h2 em {
  color: #d7ecd9;
}
.clapp-apl-area-lead {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.5;
  color: #424245;
  max-width: 660px;
  margin: 0 auto;
}
.clapp-apl-area.is-dark .clapp-apl-area-lead {
  color: rgba(255,255,255,0.85);
}

.clapp-apl-area-rows {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}
.clapp-apl-area-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.clapp-apl-area-row.is-reversed .clapp-apl-area-row-img {
  order: -1;
}
.clapp-apl-area-row-text h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #143425;
  margin: 0 0 18px;
}
.clapp-apl-area.is-dark .clapp-apl-area-row-text h3 {
  color: #fff;
}
.clapp-apl-area-row-text p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #424245;
  margin: 0 0 16px;
}
.clapp-apl-area-row-text p:last-child {
  margin-bottom: 0;
}
.clapp-apl-area.is-dark .clapp-apl-area-row-text p {
  color: rgba(255,255,255,0.82);
}
.clapp-apl-area-row-text .clapp-apl-row-link {
  display: inline-block;
  margin-top: 22px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #143425;
  text-decoration: none;
  border-bottom: 1px solid #143425;
  padding-bottom: 2px;
  transition: opacity 0.25s ease;
}
.clapp-apl-area.is-dark .clapp-apl-area-row-text .clapp-apl-row-link {
  color: #d7ecd9;
  border-bottom-color: #d7ecd9;
}
.clapp-apl-area-row-text .clapp-apl-row-link:hover {
  opacity: 0.7;
}
.clapp-apl-area-row-img,
a.clapp-apl-area-row-img {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
  background-color: #eceef0;
  text-decoration: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
  position: relative;
}
a.clapp-apl-area-row-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.14);
}
a.clapp-apl-area-row-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.12) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
a.clapp-apl-area-row-img:hover::after {
  opacity: 1;
}

/* === CLAPP APL AREA DELIVERABLES LIST v1 ===
 * Bulleted deliverables list used inside a practice-area row. */
.clapp-apl-area-deliverables {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 14px;
}
.clapp-apl-area-deliverables li {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #424245;
  padding-left: 28px;
  position: relative;
}
.clapp-apl-area-deliverables li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: #143425;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.55;
}
.clapp-apl-area-deliverables li strong {
  color: #143425;
  font-weight: 620;
}
.clapp-apl-area.is-dark .clapp-apl-area-deliverables li {
  color: rgba(255, 255, 255, 0.82);
}
.clapp-apl-area.is-dark .clapp-apl-area-deliverables li::before {
  color: #d7ecd9;
}
.clapp-apl-area.is-dark .clapp-apl-area-deliverables li strong {
  color: #fff;
}
/* Padding on the area section so it breathes above/below */
section.clapp-apl-area {
  padding: clamp(96px, 12vh, 160px) 0;
}
/* Single-row layout needs a tighter container */
.clapp-apl-area-head + .clapp-apl-area-rows {
  margin-top: clamp(48px, 6vh, 72px);
}
/* === END CLAPP APL AREA DELIVERABLES === */

/* === CLAPP APL AREA HERO + SUPPORT v1 ===
 * Home-page practice-area structure: full-bleed image hero banner
 * (.clapp-apl-area-hero) followed by a supporting content section
 * (.clapp-apl-area-support) with a fear-stat callout + pattern-specific
 * content (cards, steps, stats). One pair per practice area. */

/* ---- Full-bleed image hero for each practice area ---- */
.clapp-apl-area-hero {
  position: relative;
  height: clamp(560px, 78vh, 780px);
  background: #0d2624;
  overflow: hidden;
  isolation: isolate;
}
/* Parallax image layer — oversized so the ±250px translate never
 * exposes the top/bottom edges. */
.clapp-apl-area-hero-img {
  position: absolute;
  top: -60%;
  left: -4%;
  width: 108%;
  height: 220%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* iOS / reduced-motion: pin the image (no parallax). */
@supports (-webkit-touch-callout: none) {
  .clapp-apl-area-hero-img { top: 0; height: 100%; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .clapp-apl-area-hero-img { top: 0; height: 100%; transform: none !important; }
}
.clapp-apl-area-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 38, 36, 0.44) 0%,
    rgba(13, 38, 36, 0.56) 55%,
    rgba(13, 38, 36, 0.72) 100%);
  z-index: 1;
  pointer-events: none;
}
.clapp-apl-area-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.clapp-apl-area-hero-kicker {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 22px;
}
.clapp-apl-area-hero-h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 24px;
}
.clapp-apl-area-hero-h2 em {
  font-style: normal;
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 340;
}
.clapp-apl-area-hero-lead {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  margin: 0 auto;
}

/* ---- Supporting content section below each hero ---- */
.clapp-apl-area-support {
  padding: clamp(80px, 10vh, 128px) 0;
  background: #fff;
}
.clapp-apl-area-support.is-gray {
  background: #f5f5f7;
}
.clapp-apl-area-support-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* ---- Fear-stat callout — Apple-style hero stat ---- */
/* Unboxed, centered, generously whitespaced. The number reads as a
 * display moment, not a warning card. */
.clapp-apl-area-fear {
  text-align: center;
  max-width: 820px;
  margin: clamp(56px, 8vh, 110px) auto clamp(72px, 9vh, 120px);
  padding: 0 clamp(16px, 3vw, 32px);
}
/* First fear block in a section doesn't need the top margin (it sits right
   under the section padding already). */
.clapp-apl-area-support-inner > .clapp-apl-area-fear:first-child {
  margin-top: 0;
}
.clapp-apl-area-fear-num {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(120px, 14vw, 220px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.055em;
  color: #143425;
  margin-bottom: 24px;
  display: block;
}
.clapp-apl-area-fear.is-alarm .clapp-apl-area-fear-num {
  color: #a8784a;
}
.clapp-apl-area-support.is-gray .clapp-apl-area-fear-num {
  color: #143425;
}
.clapp-apl-area-fear-text strong {
  display: block;
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 620;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #143425;
  margin: 0 auto 16px;
  max-width: 640px;
}
.clapp-apl-area-fear-text p {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: #5a7566;
  margin: 0 auto;
  max-width: 620px;
}
.clapp-apl-area-fear-text a {
  color: #5a7566;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(90, 117, 102, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.clapp-apl-area-fear-text a:hover {
  color: #143425;
  border-bottom-color: #143425;
}

/* ---- Licensing 3-card row — Apple-style deliverable cards ---- */
.clapp-apl-area-support .clapp-conv-grid {
  gap: clamp(18px, 2vw, 28px);
}
.clapp-apl-area-support .clapp-conv-card {
  background: #fafaf7;
  border-radius: 22px;
  padding: clamp(36px, 3.5vw, 52px);
  transition: background 0.25s ease, transform 0.35s ease, box-shadow 0.35s ease;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.clapp-apl-area-support .clapp-conv-card:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(13, 38, 36, 0.1);
}
.clapp-apl-area-support .clapp-conv-card-kicker {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5a7566;
  margin-bottom: 18px;
}
.clapp-apl-area-support .clapp-conv-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(24px, 2vw, 28px);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #143425;
  margin: 0 0 16px;
}
.clapp-apl-area-support .clapp-conv-card p {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #424245;
  margin: 0 0 auto;     /* pushes the link to the bottom of the card */
}
.clapp-apl-area-support .clapp-conv-card-link {
  display: inline-block;
  margin-top: 24px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #143425;
  border-bottom: 1px solid #143425;
  padding-bottom: 2px;
  transition: opacity 0.25s ease;
}
.clapp-apl-area-support .clapp-conv-card:hover .clapp-conv-card-link {
  opacity: 0.75;
}

/* ---- Dual CTA row under each support grid (Apple-style primary + ghost) */
.clapp-apl-area-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.5vw, 32px);
  flex-wrap: wrap;
  margin-top: clamp(48px, 6vh, 72px);
}
.clapp-apl-area-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #143425;
  background: transparent;
  border: 1.5px solid #143425;
  border-radius: 999px;
  padding: 15px 26px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.clapp-apl-area-cta-secondary:hover {
  background: #143425;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(13, 38, 36, 0.18);
}
.clapp-apl-area-cta-secondary:focus-visible {
  outline: 3px solid #ADB295;
  outline-offset: 3px;
}

/* ---- Compliance 4-step process grid ---- */
.clapp-apl-area-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.clapp-apl-area-step {
  background: #fff;
  border-radius: 18px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 2px 12px rgba(13, 38, 36, 0.04);
}
.clapp-apl-area-step-num {
  display: inline-block;
  font-family: "Mona Sans", sans-serif;
  font-size: 13px;
  font-weight: 620;
  color: #5a7566;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.clapp-apl-area-step h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #143425;
  margin: 0 0 12px;
}
.clapp-apl-area-step p {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #424245;
  margin: 0;
}
@media (max-width: 960px) { .clapp-apl-area-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .clapp-apl-area-steps { grid-template-columns: 1fr; } }

/* ---- Enforcement 3-stat callout grid ---- */
.clapp-apl-area-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.clapp-apl-area-stat {
  background: #0d2624;
  color: #fff;
  border-radius: 22px;
  padding: clamp(36px, 4vw, 52px) clamp(28px, 3vw, 40px);
}
.clapp-apl-area-stat-num {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #d7ecd9;
  margin-bottom: 16px;
}
.clapp-apl-area-stat-label {
  font-family: "Mona Sans", sans-serif;
  font-size: 15px;
  font-weight: 620;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.clapp-apl-area-stat p {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
@media (max-width: 960px) { .clapp-apl-area-stats { grid-template-columns: 1fr; } }
/* === END CLAPP APL AREA HERO + SUPPORT === */

/* === CLAPP PARALLAX PERF HINT v1 ===
 * Single safe hint only — keep a compositor layer ready for transform.
 * Nothing else (contain, isolation, will-change:filter) — all have
 * been observed to interfere with JS-driven scroll parallax. */
.clapp-parallax-img { will-change: transform; }
/* === END CLAPP PARALLAX PERF HINT === */

.clapp-apl-area-outro {
  max-width: 980px;
  margin: 96px auto 0;
  padding: 0 32px;
  text-align: center;
}
.clapp-apl-area-cta {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  background: #143425;
  color: #fff;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s ease;
}
.clapp-apl-area-cta:hover {
  background: #0d2624;
  color: #fff;
}
.clapp-apl-area.is-dark .clapp-apl-area-cta {
  background: #fff;
  color: #0d2624;
}
.clapp-apl-area.is-dark .clapp-apl-area-cta:hover {
  background: #d7ecd9;
  color: #0d2624;
}

/* Mobile */
@media (max-width: 900px) {
  .clapp-apl-area { padding: 96px 0; }
  .clapp-apl-area-rows { gap: 80px; }
  .clapp-apl-area-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .clapp-apl-area-row.is-reversed .clapp-apl-area-row-img {
    order: 0;
  }
  .clapp-apl-area-intro { margin-bottom: 56px; }
  .clapp-apl-area-outro { margin-top: 64px; }
}
/* === END CLAPP APPLE-STYLE HOMEPAGE v2 === */

/* === CLAPP HIDE PRELOADER SITEWIDE v1 === */
/* User direction: "i dont think we need the loading overlay".
   Kill the preloader everywhere with one rule — don't need to edit 236 pages. */
.preloader { display: none !important; }
/* === END CLAPP HIDE PRELOADER SITEWIDE v1 === */

/* === CLAPP APPLE-STYLE HOMEPAGE v3 — PATCHES === */
/* Anchor-ify cards/cells/tiles + add carousel arrow buttons. */

a.clapp-apl-card,
.clapp-apl-card {
  text-decoration: none;
  color: inherit;
}
a.clapp-apl-selector-cell,
.clapp-apl-selector-cell {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
a.clapp-apl-selector-cell:hover {
  transform: translateY(-2px);
  transition: transform 0.35s ease;
}
a.clapp-apl-5up-tile,
.clapp-apl-5up-tile {
  text-decoration: none;
  color: inherit;
}
a.clapp-apl-detail-img,
.clapp-apl-detail-img {
  display: block;
  text-decoration: none;
}
a.clapp-apl-detail-img {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
a.clapp-apl-detail-img:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.clapp-apl-scroller-prev,
.clapp-apl-scroller-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #d2d2d7;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  font-size: 22px;
  line-height: 1;
  color: #143425;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  font-family: "DM Sans", sans-serif;
  padding: 0;
}
.clapp-apl-scroller-prev { left: 8px; }
.clapp-apl-scroller-next { right: 8px; }
.clapp-apl-scroller-prev:hover,
.clapp-apl-scroller-next:hover {
  background: #f5f5f7;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.clapp-apl-scroller-prev:disabled,
.clapp-apl-scroller-next:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}
@media (max-width: 640px) {
  .clapp-apl-scroller-prev,
  .clapp-apl-scroller-next { display: none; }
}
/* === END CLAPP APPLE-STYLE HOMEPAGE v3 === */

/* === CLAPP COUNTY SNAPSHOT TILES v1 === */
/* Two-line county tiles on /jurisdictions/index.html — name + meta */
.clapp-loc-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 16px 18px !important;
  gap: 4px;
  min-height: 68px;
  justify-content: center;
}
.clapp-loc-card-name {
  font-family: "Mona Sans", "DM Sans", sans-serif;
  font-weight: 620;
  color: #143425;
  font-size: 15px;
  line-height: 1.15;
  display: block;
}
.clapp-loc-card-meta {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: #6e6e73;
  line-height: 1.3;
  font-weight: 400;
  display: block;
}
.clapp-loc-card.is-featured {
  background: #fafaf7 !important;
  color: #143425 !important;
  border: 2px solid #143425 !important;
}
.clapp-loc-card.is-featured .clapp-loc-card-name { color: #143425; }
.clapp-loc-card.is-featured .clapp-loc-card-meta { color: #5a7566; }
/* v1 extensions — difficulty + license-type pills */
.clapp-loc-card-specs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.clapp-loc-card-diff {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.clapp-diff-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #143425;
  display: inline-block;
}
.clapp-diff-dot.is-off {
  background: #d2d2d7;
}
.clapp-loc-card.is-featured .clapp-diff-dot { background: #143425; }
.clapp-loc-card.is-featured .clapp-diff-dot.is-off { background: rgba(20,52,37,0.18); }

.clapp-loc-card-types {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.clapp-type-pill {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #eceef0;
  color: #a8a8af;
  font-size: 9px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
.clapp-type-pill.is-on {
  background: #143425;
  color: #fff;
}
.clapp-loc-card.is-featured .clapp-type-pill {
  background: rgba(20,52,37,0.08);
  color: rgba(20,52,37,0.45);
}
.clapp-loc-card.is-featured .clapp-type-pill.is-on {
  background: #143425;
  color: #fff;
}
/* === END CLAPP COUNTY SNAPSHOT TILES v1 === */

/* === CLAPP LOCAL-SERVICES BG v2 (parallax) === */
/* Re-use the city/county hero image as a non-blurred parallax background
   behind the "How we help in [City]" services section. The image is a
   child .clapp-parallax-img div (same hook clapp-parallax.js uses on
   hero + editorial-break) so it scrolls with a subtle parallax. A light
   warm scrim keeps cards readable; cards themselves are fully opaque. */
.clapp-section-local-bg {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: #fafaf7;
}
.clapp-section-local-bg .clapp-local-bg-image {
  position: absolute;
  top: -260px;
  bottom: -260px;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
}
/* Opt-in blur: add .is-blur to the section (e.g. bottom Services hero) */
.clapp-section-local-bg.is-blur .clapp-local-bg-image {
  filter: blur(6px) brightness(1.18);  /* lighter treatment to match the county data sections */
  left: -20px;
  right: -20px;
  top: -280px;
  bottom: -280px;
}
/* Is-blur variant reads like a hero — dark scrim + white eyebrow + white H2 */
.clapp-section-local-bg.is-blur::before {
  background: linear-gradient(180deg,
    rgba(13, 38, 36, 0.36) 0%,
    rgba(13, 38, 36, 0.32) 45%,
    rgba(13, 38, 36, 0.44) 100%) !important;
}
.clapp-section-local-bg.is-blur .clapp-eyebrow,
.clapp-section-local-bg.is-blur .clapp-eyebrow-dark {
  color: rgba(255, 255, 255, 0.82);
}
.clapp-section-local-bg.is-blur .clapp-h2 {
  color: #fff;
}
.clapp-section-local-bg.is-blur .clapp-body,
.clapp-section-local-bg.is-blur p {
  color: rgba(255, 255, 255, 0.88);
}
.clapp-section-local-bg.is-blur .clapp-body a,
.clapp-section-local-bg.is-blur p a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
.clapp-section-local-bg.is-blur .clapp-body a:hover,
.clapp-section-local-bg.is-blur p a:hover {
  border-bottom-color: #fff;
}
.clapp-section-local-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(250,250,247,0.92) 0%,
    rgba(250,250,247,0.72) 22%,
    rgba(250,250,247,0.30) 50%,
    rgba(250,250,247,0) 75%);
  pointer-events: none;
  z-index: 1;
}
.clapp-section-local-bg > .clapp-wrap,
.clapp-section-local-bg > .clapp-wrap-narrow {
  position: relative;
  z-index: 2;
}
/* Cost table gets a frosted-glass wrapper when inside a local-bg section */
.clapp-section-local-bg .clapp-cost-table {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  border-radius: 20px;
  padding: 10px 24px;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 10px 30px rgba(13,38,36,0.10);
}
/* Disclaimer inside the cost-table glass pane — bottom, separated by hairline */
.clapp-cost-disclaimer {
  margin: 0;
  padding: 16px 2px 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #5a7566;
  border-top: 1px solid rgba(20,52,37,0.10);
}
.clapp-section-local-bg .clapp-conv-card {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: 0 10px 30px rgba(13,38,36,0.14);
  border-color: rgba(255,255,255,0.35);
}
/* === END CLAPP LOCAL-SERVICES BG v2 === */

/* === CLAPP LOCAL-CTA BAND v1 === */
/* "Ready when you are" CTA band on city/county pages — sits between
   At-a-glance and the services grid. Warm, inviting, promise-forward. */
.clapp-local-cta-band {
  padding: 100px 0;
  background: #fafaf7;
  position: relative;
}
.clapp-local-cta-band-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.clapp-local-cta-band .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 18px;
  display: inline-block;
}
.clapp-local-cta-band h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #143425;
  margin: 0 0 22px;
}
.clapp-local-cta-band h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-local-cta-band-lead {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: #424245;
  max-width: 640px;
  margin: 0 auto 36px;
}
.clapp-local-cta-promise {
  list-style: none;
  padding: 0;
  margin: 0 auto 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 44px;
  max-width: 820px;
  text-align: left;
}
.clapp-local-cta-promise li {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #143425;
  padding-left: 32px;
  position: relative;
}
.clapp-local-cta-promise li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #143425;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.clapp-local-cta-band .clapp-cta-primary {
  display: inline-block;
  background: #143425;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s ease;
}
.clapp-local-cta-band .clapp-cta-primary:hover {
  background: #0d2624;
  color: #fff;
}
.clapp-local-cta-sub {
  display: block;
  margin-top: 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #6e6e73;
}
@media (max-width: 700px) {
  .clapp-local-cta-band { padding: 72px 0; }
  .clapp-local-cta-promise { grid-template-columns: 1fr; gap: 12px; max-width: 520px; }
}
/* === END CLAPP LOCAL-CTA BAND v1 === */

/* === CLAPP LOCAL-DEPTH BLOCK v1 === */
/* Honest observation of a jurisdiction's quiet complexity — written
   like a seasoned consultant noting what most first-timers miss.
   Sits between At-a-glance and Ready-when-you-are CTA band. */
.clapp-local-depth {
  padding: 100px 0;
  background: #eef1ed;
}
/* Agency badges pop against the sage backdrop */
.clapp-local-depth .clapp-local-depth-badges span {
  background: #fff;
}
.clapp-local-depth-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-local-depth .clapp-eyebrow {
  margin-bottom: 18px;
  color: #5a7566;
}
.clapp-local-depth h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #143425;
  margin: 0 0 28px;
}
.clapp-local-depth h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-local-depth p {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: #424245;
  margin: 0 0 18px;
}
.clapp-local-depth p:last-of-type {
  margin-bottom: 0;
}
.clapp-local-depth p strong {
  color: #143425;
  font-weight: 620;
}
.clapp-local-depth-badges {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.clapp-local-depth-badges span {
  display: inline-block;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid rgba(20,52,37,0.14);
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #143425;
}
/* === END CLAPP LOCAL-DEPTH BLOCK v1 === */

/* === CLAPP LOCAL-COST BLOCK v1 === */
/* Fear-tactic dollar grid — "here's what a mistake actually costs."
   Big Mona Sans numerals, tight meta labels, Apple spec-card aesthetic. */
.clapp-local-cost {
  padding: 100px 0;
  background: #fafaf7;
}
.clapp-local-cost-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-local-cost-header {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}
.clapp-local-cost-header .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 18px;
  display: inline-block;
}
.clapp-local-cost-header h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #143425;
  margin: 0 0 20px;
}
.clapp-local-cost-header h2 em {
  font-style: normal;
  display: block;
  color: #5a7566;
  font-weight: 340;
}
.clapp-local-cost-header p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #424245;
  max-width: 640px;
  margin: 0 auto;
}
/* Static grid with comfortable per-card widths (Apple "informational tiles" pattern).
   Default 2 cols (so 4 cards land 2x2 with generous breathing room).
   Adapt to child count via :has() so 3 cards take a 1-row 3-col, 6 cards do 2x3, 8 cards do 2x4. */
.clapp-local-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.clapp-local-cost-grid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
.clapp-local-cost-grid:has(> :nth-child(6):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
.clapp-local-cost-grid:has(> :nth-child(8):last-child) {
  grid-template-columns: repeat(4, 1fr);
}
.clapp-local-cost-card {
  background: #fff;
  border: 1px solid rgba(20,52,37,0.10);
  border-radius: 22px;
  padding: 36px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 14px rgba(13,38,36,0.05);
}
.clapp-local-cost-figure {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 680;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #143425;
}
.clapp-local-cost-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 16px;
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #143425;
  margin: 0;
}
.clapp-local-cost-card p {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #5a7566;
  margin: 0;
}
.clapp-local-cost-footnote {
  max-width: 680px;
  margin: 44px auto 0;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #424245;
  font-style: italic;
}
.clapp-local-cost-footnote strong {
  font-style: normal;
  color: #143425;
  font-weight: 620;
}
@media (max-width: 1000px) {
  .clapp-local-cost-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .clapp-local-cost { padding: 72px 0; }
  .clapp-local-cost-grid { grid-template-columns: 1fr; }
}
/* === END CLAPP LOCAL-COST BLOCK v1 === */

/* === CLAPP LOCAL-STAKES BAND v1 === */
/* One big figure right under the hero — fear hook up top that seeds
   the full cost breakdown further down the page. */
.clapp-local-stakes-band {
  padding: 80px 0 72px;
  background: #eef1ed;
  border-bottom: 1px solid rgba(20,52,37,0.08);
  text-align: center;
}
.clapp-local-stakes-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.clapp-local-stakes-inner .clapp-eyebrow {
  color: #5a7566;
  margin-bottom: 14px;
  display: inline-block;
}
.clapp-local-stakes-lead {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 420;
  line-height: 1.35;
  color: #143425;
  margin: 0 0 8px;
}
.clapp-local-stakes-figure {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(84px, 11vw, 148px);
  font-weight: 680;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #143425;
  margin: 0 0 16px;
}
.clapp-local-stakes-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #424245;
  max-width: 560px;
  margin: 0 auto;
}
.clapp-local-stakes-sub strong {
  color: #143425;
  font-weight: 620;
}
/* === END CLAPP LOCAL-STAKES BAND v1 === */

/* === CLAPP PATHWAY STAKES PULL-QUOTE v1 === */
/* Dollar-figure pull-quote dropped inside the "Local pathway" narrative.
   Sits as an inline aside between paragraphs — big figure + anchor line. */
.clapp-pathway-stakes {
  margin: 40px 0;
  padding: 28px 32px;
  background: #eef1ed;
  border-left: 4px solid #143425;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.clapp-pathway-stakes-figure {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(54px, 6vw, 76px);
  font-weight: 680;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #143425;
  flex: 0 0 auto;
}
.clapp-pathway-stakes-text {
  flex: 1;
}
.clapp-pathway-stakes-label {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a7566;
  margin: 0 0 4px;
}
.clapp-pathway-stakes-text p {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #143425;
  margin: 0;
}
@media (max-width: 640px) {
  .clapp-pathway-stakes {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
  }
}
/* === END CLAPP PATHWAY STAKES PULL-QUOTE v1 === */

/* === CLAPP SITEMAP ALPHA v1 === */
/* Dense multi-column alpha list for the sitemap's county + city indexes. */
.clapp-sitemap-alpha {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 24px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
}
.clapp-sitemap-alpha li a {
  color: #143425;
  text-decoration: none;
  padding: 4px 0;
  display: block;
}
.clapp-sitemap-alpha li a:hover { text-decoration: underline; }
@media (max-width: 900px) { .clapp-sitemap-alpha { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .clapp-sitemap-alpha { grid-template-columns: 1fr; } }
/* === END CLAPP SITEMAP ALPHA v1 === */

/* === CLAPP ONBOARDING v1 === */
/* Universal Intake (FORM-UNIVERSAL-001) + account-creation flow.
 * Apple-clean: generous whitespace, pill buttons, 56px inputs, sage accents.
 * Palette: #f5f5f7 base · #fff cards · #0d2624 ink · #143425 accent · #ADB295 sage · rust #143425 ONLY for enforcement fast-path.
 * Sentinel block — do not split; scoped under `.gsg-ob-` prefix to avoid collisions.
 */

/* -------------------------------------------------- Secure-shell header
   Matches the homepage Apple-nav exactly (dark glass, 40px logo, 52px bar).
   We only strip the primary nav + CTA and swap in a portal-specific right chrome
   (section badge + notification bell + account menu).                      */
.apple-nav.apple-nav--secure .main-menu,
.apple-nav.apple-nav--secure .header-btn,
.apple-nav.apple-nav--secure .navbar-toggle { display: none !important; }

/* Let the base .apple-nav dark-glass background + 52px navbar + 40px logo
   flow through untouched. No width max override; no padding override; the
   homepage's own rules handle sizing. */
.apple-nav.apple-nav--secure .container-fluid {
  display: flex; align-items: center; justify-content: space-between;
}
.apple-nav.apple-nav--secure .navbar-brand img {
  display: block;           /* kills inline baseline gap */
  vertical-align: middle;
}

.gsg-ob-secure-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}
.gsg-ob-secure-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #ADB295;
  box-shadow: 0 0 0 2px rgba(173, 178, 149, 0.35);
}
.gsg-ob-secure-phone {
  font-family: "DM Sans", sans-serif;
  font-size: 14px; font-weight: 600; color: #fff;
  text-decoration: none;
  opacity: 0.9;
}
.gsg-ob-secure-phone:hover { opacity: 1; text-decoration: underline; }
.gsg-ob-secure-right { display: inline-flex; align-items: center; gap: clamp(12px, 2vw, 20px); }

/* -------------------------------------------------- Page canvas */
.gsg-ob-page {
  background-color: #f5f5f7;
  background-image: radial-gradient(circle, rgba(20, 52, 37, 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: fixed;
  min-height: 100vh;
  font-family: "DM Sans", sans-serif;
  color: #0d2624;
}
.gsg-ob-page.gsg-ob-page--wash { background: #e8ebe2; }

.gsg-ob-wrap {
  max-width: 720px; margin: 0 auto;
  padding: clamp(40px, 8vw, 88px) clamp(20px, 5vw, 48px);
}
/* Wide variant matches the header navbar: same max-width + same horizontal padding
   so left/right edges of content align with the logo and header buttons. */
.gsg-ob-wrap--wide {
  max-width: 1200px;
  padding-left: 32px;
  padding-right: 32px;
}
.gsg-ob-wrap--narrow { max-width: 560px; }
/* Extra-wide variant — wider than --wide but still capped so cards don't
   stretch on ultrawide monitors. Used by the document vault. */
.gsg-ob-wrap--full {
  max-width: 1000px;
  padding-left: clamp(20px, 3vw, 44px);
  padding-right: clamp(20px, 3vw, 44px);
}

/* -------------------------------------------------- Typography */
.gsg-ob-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5a7566; margin: 0 0 16px;
}
.gsg-ob-h1 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 680; line-height: 1.05; letter-spacing: -0.025em;
  color: #0d2624; margin: 0 0 20px;
}
.gsg-ob-h1 em { font-style: normal; color: #143425; }
.gsg-ob-h2 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 620; line-height: 1.15; letter-spacing: -0.02em;
  color: #0d2624; margin: 0 0 16px;
}
.gsg-ob-lead {
  font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5; color: #274543;
  margin: 0 0 32px;
}
.gsg-ob-micro {
  font-size: 13px; color: #5a7566; line-height: 1.5;
}
.gsg-ob-body { font-size: 16px; line-height: 1.6; color: #274543; margin: 0 0 16px; }

/* -------------------------------------------------- Trust row */
.gsg-ob-trust-row {
  display: flex; flex-wrap: wrap; gap: 20px 28px;
  font-size: 13px; color: #5a7566; margin: 24px 0 0;
}
.gsg-ob-trust-row li { list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.gsg-ob-trust-row li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ADB295;
}

/* -------------------------------------------------- Buttons */
.gsg-ob-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; min-height: 52px;
  background: #0d2624; color: #fff;
  border: 1px solid #0d2624; border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.gsg-ob-btn:hover:not(:disabled) { background: #143425; border-color: #143425; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13, 38, 36, 0.18); color: #fff; }
.gsg-ob-btn:disabled { background: #ADB295; border-color: #ADB295; cursor: not-allowed; }
.gsg-ob-btn--ghost {
  background: transparent; color: #0d2624;
  border: 1px solid #ADB295;
}
.gsg-ob-btn--ghost:hover:not(:disabled) { background: #e8ebe2; border-color: #274543; color: #0d2624; transform: none; box-shadow: none; }
.gsg-ob-btn--sage {
  background: #ADB295; color: #0d2624; border-color: #ADB295;
}
.gsg-ob-btn--sage:hover:not(:disabled) { background: #c7cbb0; border-color: #c7cbb0; color: #0d2624; }
.gsg-ob-btn--danger { background: #143425; color: #fff; border-color: #143425; }
.gsg-ob-btn--danger:hover:not(:disabled) { background: #c46345; border-color: #c46345; color: #fff; }
.gsg-ob-btn--full { width: 100%; }

.gsg-ob-link { color: #143425; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gsg-ob-link:hover { color: #0d2624; }

/* -------------------------------------------------- Pathway cards (landing) */
.gsg-ob-pathways {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.gsg-ob-pathway-card {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 18px;
  padding: 28px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.gsg-ob-pathway-card:hover {
  transform: translateY(-3px); border-color: #ADB295;
  box-shadow: 0 16px 40px rgba(13, 38, 36, 0.1);
  color: inherit;
}
.gsg-ob-pathway-card-label {
  font-family: "Mona Sans", sans-serif;
  font-size: 22px; font-weight: 620; line-height: 1.15;
  color: #0d2624; margin: 0;
}
.gsg-ob-pathway-card-tag {
  font-size: 13px; font-weight: 600; color: #274543;
  letter-spacing: -0.005em;
}
.gsg-ob-pathway-card-desc {
  font-size: 14px; line-height: 1.5; color: #5a7566; margin: 0;
}
.gsg-ob-pathway-card-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
}
.gsg-ob-pathway-card-chip {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: #274543; background: #e8ebe2;
  padding: 4px 10px; border-radius: 999px;
}
.gsg-ob-pathway-card-arrow {
  color: #143425; font-size: 18px; font-weight: 700; margin-top: 4px;
}

/* -------------------------------------------------- Progress bar (sticky top) */
.gsg-ob-progress {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245, 245, 247, 0.94);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid #e8ebe2;
  padding: 14px clamp(20px, 4vw, 48px);
}
.gsg-ob-progress-inner {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
}
.gsg-ob-progress-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: #5a7566;
}
.gsg-ob-progress-meta strong { color: #0d2624; }
.gsg-ob-progress-track {
  height: 4px; background: #e8ebe2; border-radius: 999px; overflow: hidden;
}
.gsg-ob-progress-fill {
  height: 100%; background: linear-gradient(90deg, #143425 0%, #274543 100%);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------- Section container */
.gsg-ob-section { background: #fff; border: 1px solid #e8ebe2; border-radius: 22px; padding: clamp(28px, 5vw, 48px); margin: 0 0 28px; }
.gsg-ob-section-head { margin: 0 0 28px; }
.gsg-ob-section-title { font-family: "Mona Sans", sans-serif; font-size: 28px; font-weight: 620; letter-spacing: -0.02em; color: #0d2624; margin: 0 0 8px; }
.gsg-ob-section-sub { font-size: 15px; color: #5a7566; margin: 0; }

/* -------------------------------------------------- Field */
.gsg-ob-field { margin: 0 0 24px; }
.gsg-ob-field:last-child { margin-bottom: 0; }
.gsg-ob-field-label {
  display: block; font-family: "DM Sans", sans-serif;
  font-size: 15px; font-weight: 600; color: #0d2624;
  margin: 0 0 6px; line-height: 1.4;
}
.gsg-ob-field-label .req { color: #143425; font-weight: 700; margin-left: 4px; }
.gsg-ob-field-help {
  font-size: 13px; color: #5a7566; line-height: 1.5; margin: 0 0 12px;
}

/* -------------------------------------------------- Text inputs */
.gsg-ob-input,
.gsg-ob-textarea,
.gsg-ob-select {
  width: 100%; box-sizing: border-box;
  min-height: 56px; padding: 14px 18px;
  background: #f5f5f7; border: 1px solid transparent; border-radius: 14px;
  font-family: "DM Sans", sans-serif; font-size: 16px; color: #0d2624;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.gsg-ob-input:focus,
.gsg-ob-textarea:focus,
.gsg-ob-select:focus {
  outline: none;
  border-color: #0d2624;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 38, 36, 0.08);
}
.gsg-ob-textarea { min-height: 120px; padding-top: 14px; resize: vertical; line-height: 1.5; }
.gsg-ob-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2010'%3E%3Cpath%20d='M1%201l7%207%207-7'%20stroke='%230d2624'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 14px;
  padding-right: 48px;
}
.gsg-ob-input.is-invalid { border-color: #143425; box-shadow: 0 0 0 4px rgba(20, 52, 37, 0.12); }
.gsg-ob-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .gsg-ob-input-row { grid-template-columns: 1fr; } }

/* -------------------------------------------------- Radio / single-select tiles */
/* Long answer lists: always single column. Yes/No uses .gsg-ob-radio-row (2 cols). */
.gsg-ob-tiles { display: grid; gap: 10px; grid-template-columns: 1fr; }
.gsg-ob-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: #f5f5f7; border: 1px solid transparent; border-radius: 14px;
  font-size: 15px; font-weight: 500; color: #0d2624;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.gsg-ob-tile input { position: absolute; opacity: 0; pointer-events: none; }
.gsg-ob-tile .gsg-ob-tile-dot {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #ADB295; background: #fff;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gsg-ob-tile.is-checked { background: #fff; border-color: #0d2624; box-shadow: 0 4px 14px rgba(13, 38, 36, 0.08); }
.gsg-ob-tile.is-checked .gsg-ob-tile-dot { border-color: #0d2624; background: #0d2624; }
.gsg-ob-tile.is-checked .gsg-ob-tile-dot::after {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%; background: #fff;
}
.gsg-ob-tile:hover { background: #fff; border-color: #ADB295; }

/* Multi-select tiles use a check instead of a dot */
.gsg-ob-tile--multi.is-checked .gsg-ob-tile-dot {
  border-radius: 6px; background: #0d2624; border-color: #0d2624;
}
.gsg-ob-tile--multi .gsg-ob-tile-dot { border-radius: 6px; }
.gsg-ob-tile--multi.is-checked .gsg-ob-tile-dot::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg); background: transparent; inset: auto;
}

/* Compact radio row (yes/no) */
.gsg-ob-radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gsg-ob-radio-row .gsg-ob-tile { flex: 1; min-width: 120px; justify-content: center; }

/* -------------------------------------------------- Contradiction banner + inline warning */
.gsg-ob-contradiction-banner {
  background: #fdf3ec; border: 1px solid #f0cdb5; color: #8a4a25;
  padding: 14px 18px; border-radius: 14px; margin: 0 0 20px;
  font-size: 14px; line-height: 1.5;
}
.gsg-ob-contradiction-banner strong { color: #6b3a1b; }
.gsg-ob-warn-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; font-weight: 600; color: #8a4a25;
  background: #fdf3ec; border: 1px solid #f0cdb5;
  padding: 4px 10px; border-radius: 999px;
}
.gsg-ob-warn-chip::before { content: "!"; display: inline-block; font-weight: 700; }

/* -------------------------------------------------- Jurisdiction picker live card */
.gsg-ob-jurisdiction-card {
  background: #e8ebe2; border-radius: 14px; padding: 20px;
  margin-top: 16px;
  font-size: 14px; color: #274543; line-height: 1.55;
}
.gsg-ob-jurisdiction-card h4 {
  font-family: "Mona Sans", sans-serif; font-size: 17px; font-weight: 640;
  color: #0d2624; margin: 0 0 10px;
}
.gsg-ob-jurisdiction-matrix {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px;
  margin: 12px 0 8px;
  font-size: 12px;
}
.gsg-ob-jurisdiction-matrix div {
  display: flex; justify-content: space-between; padding: 4px 10px;
  background: rgba(255, 255, 255, 0.6); border-radius: 8px;
}
.gsg-ob-jurisdiction-matrix .is-allowed { color: #143425; font-weight: 600; }
.gsg-ob-jurisdiction-matrix .is-prohibited { color: #a86251; }
.gsg-ob-jurisdiction-matrix .is-limited { color: #8a6a2f; }

/* -------------------------------------------------- File upload */
.gsg-ob-dropzone {
  border: 2px dashed #ADB295; border-radius: 18px;
  background: #f5f5f7;
  padding: clamp(28px, 5vw, 44px) 24px; text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}
.gsg-ob-dropzone.is-dragover { border-color: #0d2624; background: #fff; }
.gsg-ob-dropzone-icon {
  width: 48px; height: 48px; margin: 0 auto 12px;
  background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #143425; font-size: 22px; font-weight: 700;
  border: 1px solid #ADB295;
}
.gsg-ob-dropzone-title { font-family: "Mona Sans", sans-serif; font-size: 17px; font-weight: 620; color: #0d2624; margin: 0 0 4px; }
.gsg-ob-dropzone-sub { font-size: 13px; color: #5a7566; margin: 0; }
.gsg-ob-upload-list { display: grid; gap: 8px; margin-top: 16px; }
.gsg-ob-upload-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: #f5f5f7; border-radius: 12px;
  font-size: 14px;
}
.gsg-ob-upload-row .gsg-ob-upload-name { flex: 1; color: #0d2624; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsg-ob-upload-row .gsg-ob-upload-bucket {
  font-size: 11px; font-weight: 600; color: #274543; background: #e8ebe2;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.gsg-ob-upload-row .gsg-ob-upload-remove {
  background: transparent; border: 0; color: #5a7566;
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.gsg-ob-upload-row .gsg-ob-upload-remove:hover { color: #143425; }

/* -------------------------------------------------- Sticky footer (section nav) */
.gsg-ob-footbar {
  position: sticky; bottom: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border-top: 1px solid #e8ebe2;
  padding: 14px clamp(20px, 4vw, 48px);
  margin-top: 28px;
}
.gsg-ob-footbar-inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.gsg-ob-saved {
  font-size: 12px; color: #5a7566; margin-right: auto;
  display: inline-flex; align-items: center; gap: 6px;
}
.gsg-ob-saved::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ADB295;
}
.gsg-ob-routing-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.gsg-ob-routing-chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: #0d2624; background: #e8ebe2;
  padding: 4px 10px; border-radius: 999px;
}

/* -------------------------------------------------- Routing preview card (Section E / S6) */
.gsg-ob-preview-card {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 22px;
  padding: clamp(28px, 5vw, 44px); margin: 0 0 28px;
}
.gsg-ob-preview-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 12px 24px;
  padding: 14px 0; border-top: 1px solid #e8ebe2;
  font-size: 15px;
}
.gsg-ob-preview-row:first-of-type { border-top: 0; }
.gsg-ob-preview-label { color: #5a7566; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; }
.gsg-ob-preview-value { color: #0d2624; line-height: 1.5; }
@media (max-width: 640px) {
  .gsg-ob-preview-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}

.gsg-ob-service-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gsg-ob-service-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #0d2624;
  background: #e8ebe2; padding: 8px 14px; border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.gsg-ob-service-chip:hover { background: #ADB295; color: #0d2624; }
.gsg-ob-service-chip-id { font-family: "Mona Sans", sans-serif; font-weight: 700; letter-spacing: 0.02em; color: #143425; }

/* -------------------------------------------------- Enforcement fast-path band */
.gsg-ob-enforce-band {
  background: linear-gradient(135deg, #143425 0%, #c46345 100%);
  color: #fff; border-radius: 22px; padding: clamp(28px, 5vw, 44px);
  margin: 0 0 28px;
  border: 1px solid #c46345;
}
.gsg-ob-enforce-band h2 {
  color: #fff; margin: 0 0 8px;
  font-family: "Mona Sans", sans-serif; font-size: clamp(26px, 3vw, 34px); font-weight: 640; letter-spacing: -0.02em;
}
.gsg-ob-enforce-band p { color: rgba(255, 255, 255, 0.92); margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.gsg-ob-enforce-band .gsg-ob-btn { background: #fff; color: #c46345; border-color: #fff; font-weight: 700; }
.gsg-ob-enforce-band .gsg-ob-btn:hover:not(:disabled) { background: #0d2624; border-color: #0d2624; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.gsg-ob-enforce-band .gsg-ob-link { color: #fff; }

/* Minimal enforcement link on landing */
.gsg-ob-enforce-exit {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid #e8ebe2;
  font-size: 13px; color: #a86251;
  display: flex; align-items: center; gap: 8px;
}
.gsg-ob-enforce-exit a { color: #c46345; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gsg-ob-enforce-exit a:hover { color: #0d2624; }

/* -------------------------------------------------- Confirmation next-steps cards */
.gsg-ob-next-steps {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 32px 0;
}
.gsg-ob-next-step {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 22px;
}
.gsg-ob-next-step-num {
  font-family: "Mona Sans", sans-serif;
  font-size: 14px; font-weight: 700; color: #ADB295;
  letter-spacing: 0.04em; margin: 0 0 8px;
}
.gsg-ob-next-step-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 18px; font-weight: 640; color: #0d2624; margin: 0 0 6px;
}
.gsg-ob-next-step-body { font-size: 14px; color: #5a7566; line-height: 1.5; margin: 0; }

/* -------------------------------------------------- Account prompt (confirmation → account) */
.gsg-ob-account-prompt {
  background: linear-gradient(135deg, #143425 0%, #274543 100%);
  color: #fff; border-radius: 22px;
  padding: clamp(28px, 5vw, 44px);
  margin: 40px 0 0;
}
.gsg-ob-account-prompt h2 { color: #fff; margin: 0 0 8px; font-family: "Mona Sans", sans-serif; font-size: clamp(24px, 3vw, 30px); font-weight: 620; letter-spacing: -0.02em; }
.gsg-ob-account-prompt p { color: rgba(255, 255, 255, 0.85); margin: 0 0 20px; font-size: 15px; line-height: 1.55; }
.gsg-ob-account-prompt .gsg-ob-btn { background: #ADB295; border-color: #ADB295; color: #0d2624; }
.gsg-ob-account-prompt .gsg-ob-btn:hover:not(:disabled) { background: #fff; border-color: #fff; color: #0d2624; }

/* -------------------------------------------------- Responsive tuning */
@media (max-width: 640px) {
  .gsg-ob-wrap { padding: 32px 18px 96px; }
  .gsg-ob-section { border-radius: 18px; padding: 22px 20px; }
  .gsg-ob-h1 { font-size: clamp(30px, 8vw, 38px); }
  .gsg-ob-tiles { grid-template-columns: 1fr; }
  .gsg-ob-footbar { padding: 10px 14px; }
  .gsg-ob-footbar-inner { gap: 8px; }
  .gsg-ob-saved { order: 2; width: 100%; text-align: center; margin: 0; justify-content: center; }
}

/* -------------------------------------------------- Reveal (reuse .clapp-apl-reveal convention) */
.gsg-ob-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.gsg-ob-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .gsg-ob-reveal { opacity: 1; transform: none; transition: none; }
}

/* === END CLAPP ONBOARDING v1 === */

/* === CLAPP PORTAL v1 === */
/* Account sign-up/sign-in cards + logged-in client portal dashboard.
 * Sits on top of CLAPP ONBOARDING v1; shares palette, fonts, and reveal.
 */

/* Auth card */
.gsg-ob-auth-card {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 22px;
  padding: clamp(32px, 5vw, 48px);
  max-width: 480px; margin: 0 auto;
}
.gsg-ob-auth-switch {
  text-align: center; font-size: 14px; color: #5a7566; margin: 24px 0 0;
}
.gsg-ob-auth-error {
  background: #fdf3ec; border: 1px solid #f0cdb5; color: #8a4a25;
  padding: 12px 16px; border-radius: 14px;
  font-size: 14px; margin: 0 0 20px;
}

/* Portal variant — same dark-glass header as homepage; badge + bell + account
   trigger all run in the dark-on-light idiom used across apple-nav. */
.apple-nav.apple-nav--portal .gsg-ob-secure-badge {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.apple-nav.apple-nav--portal .gsg-ob-portal-user {
  color: rgba(255, 255, 255, 0.92);
}
.apple-nav.apple-nav--portal .gsg-ob-acct-trigger {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.apple-nav.apple-nav--portal .gsg-ob-acct-trigger .gsg-ob-acct-caret { color: rgba(255, 255, 255, 0.7); }
.apple-nav.apple-nav--portal .gsg-ob-acct-trigger:hover,
.apple-nav.apple-nav--portal .gsg-ob-acct.is-open .gsg-ob-acct-trigger {
  background: #fff;
  border-color: #fff;
  color: #0d2624;
}
.apple-nav.apple-nav--portal .gsg-ob-acct.is-open .gsg-ob-acct-caret,
.apple-nav.apple-nav--portal .gsg-ob-acct-trigger:hover .gsg-ob-acct-caret { color: #0d2624; }

.apple-nav.apple-nav--portal .gsg-ob-bell {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.apple-nav.apple-nav--portal .gsg-ob-bell:hover {
  background: #fff;
  border-color: #fff;
  color: #0d2624;
}
.gsg-ob-portal-user {
  font-family: "DM Sans", sans-serif;
  font-size: 14px; color: #274543;
  display: inline-flex; align-items: center; gap: 10px;
}
.gsg-ob-portal-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ADB295, #274543);
  color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.gsg-ob-portal-signout {
  font-size: 13px; color: #5a7566; text-decoration: underline; text-underline-offset: 3px;
  background: transparent; border: 0; cursor: pointer; font-family: "DM Sans", sans-serif;
  padding: 4px 0;
}
.gsg-ob-portal-signout:hover { color: #143425; }

/* Portal hero */
.gsg-ob-portal-hero {
  padding: 0 0 clamp(20px, 2.5vw, 28px);
}
.gsg-ob-portal-hero h1 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 640; letter-spacing: -0.02em; line-height: 1.1;
  color: #0d2624; margin: 0 0 10px;
}
.gsg-ob-portal-hero p { font-size: 16px; color: #5a7566; margin: 0; }

/* Overall progress card */
.gsg-ob-portal-overall {
  background: linear-gradient(135deg, #143425 0%, #274543 100%);
  color: #fff; border-radius: 22px;
  padding: clamp(24px, 4vw, 32px);
  margin: 0 0 32px;
  display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center;
}
.gsg-ob-portal-overall-label {
  font-family: "DM Sans", sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin: 0 0 6px;
}
.gsg-ob-portal-overall-headline {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(22px, 2.4vw, 28px); font-weight: 620; letter-spacing: -0.015em;
  color: #fff; margin: 0 0 12px;
}
.gsg-ob-portal-overall-track { height: 6px; background: rgba(255, 255, 255, 0.15); border-radius: 999px; overflow: hidden; }
.gsg-ob-portal-overall-fill { height: 100%; background: #ADB295; border-radius: 999px; transition: width 0.5s ease; }
.gsg-ob-portal-overall-meta {
  font-size: 13px; color: rgba(255, 255, 255, 0.8); margin: 8px 0 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.gsg-ob-portal-overall-pct {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(42px, 5vw, 58px); font-weight: 700;
  color: #fff; letter-spacing: -0.025em; line-height: 1;
}
@media (max-width: 560px) {
  .gsg-ob-portal-overall { grid-template-columns: 1fr; }
  .gsg-ob-portal-overall-pct { grid-row: 1; grid-column: 1; text-align: left; }
}

/* Checklist grid */
.gsg-ob-checklist {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.gsg-ob-check-card {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 18px;
  padding: 24px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
}
.gsg-ob-check-card:hover {
  transform: translateY(-2px);
  border-color: #ADB295;
  box-shadow: 0 12px 32px rgba(13, 38, 36, 0.08);
  color: inherit;
}
.gsg-ob-check-card.is-disabled { opacity: 0.55; pointer-events: none; }
.gsg-ob-check-head {
  display: flex; align-items: center; gap: 12px;
}
.gsg-ob-check-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: #e8ebe2;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Mona Sans", sans-serif; font-weight: 700; color: #143425;
}
.gsg-ob-check-card.is-complete .gsg-ob-check-icon { background: #143425; color: #fff; }
.gsg-ob-check-card.is-progress .gsg-ob-check-icon { background: #ADB295; color: #0d2624; }
.gsg-ob-check-status {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5a7566;
}
.gsg-ob-check-card.is-complete .gsg-ob-check-status { color: #143425; }
.gsg-ob-check-card.is-progress .gsg-ob-check-status { color: #8a6a2f; }
.gsg-ob-check-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 19px; font-weight: 640; letter-spacing: -0.015em;
  color: #0d2624; margin: 0;
}
.gsg-ob-check-body { font-size: 14px; color: #5a7566; line-height: 1.5; margin: 0; flex: 1; }
.gsg-ob-check-meta {
  font-size: 12px; color: #5a7566; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.gsg-ob-check-arrow {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: #143425;
}

/* Info row strip under checklist (matches, next steps) */
.gsg-ob-portal-strip {
  margin: 40px 0 0;
  background: #fff; border: 1px solid #e8ebe2; border-radius: 22px;
  padding: clamp(24px, 4vw, 32px);
}
.gsg-ob-portal-strip h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 20px; font-weight: 640; letter-spacing: -0.015em;
  color: #0d2624; margin: 0 0 14px;
}

/* === END CLAPP PORTAL v1 === */

/* === CLAPP PORTAL v1.1 (sequential + doc-requests) === */
/* Locked checklist card */
.gsg-ob-check-card.is-locked {
  background: #f5f5f7; border-color: #e8ebe2; opacity: 0.75;
  cursor: not-allowed;
  transform: none !important; box-shadow: none !important;
}
.gsg-ob-check-card.is-locked:hover { transform: none; border-color: #e8ebe2; box-shadow: none; }
.gsg-ob-check-card.is-locked .gsg-ob-check-icon { background: #e8ebe2; color: #5a7566; }
.gsg-ob-check-card.is-locked .gsg-ob-check-status { color: #5a7566; }
.gsg-ob-check-card.is-locked .gsg-ob-check-arrow { color: #5a7566; }

/* Document-request tiles */
.gsg-ob-doc-request {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 20px 22px; margin: 12px 0 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.gsg-ob-doc-request:first-of-type { margin-top: 0; }
.gsg-ob-doc-request.is-fulfilled { background: #fff; border-color: #ADB295; }
.gsg-ob-doc-request-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.gsg-ob-doc-request-check {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  background: #e8ebe2; color: #5a7566; flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.gsg-ob-doc-request.is-fulfilled .gsg-ob-doc-request-check { background: #143425; color: #fff; }
.gsg-ob-doc-request-title {
  flex: 1; min-width: 0;
  font-family: "Mona Sans", sans-serif;
  font-size: 17px; font-weight: 640; letter-spacing: -0.01em;
  color: #0d2624; margin: 0;
}
.gsg-ob-doc-request-fmt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5a7566; background: #fff; padding: 4px 10px; border-radius: 999px;
  border: 1px solid #e8ebe2;
}
.gsg-ob-doc-request.is-fulfilled .gsg-ob-doc-request-fmt { background: #e8ebe2; }
.gsg-ob-doc-request-detail {
  margin: 14px 0 0; padding: 0; display: grid; gap: 10px;
  font-size: 13.5px; line-height: 1.55; color: #274543;
}
.gsg-ob-doc-request-detail > div { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; }
.gsg-ob-doc-request-detail dt {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5a7566; margin: 0;
}
.gsg-ob-doc-request-detail dd { margin: 0; color: #274543; }
.gsg-ob-doc-request-detail dd a { color: #143425; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.gsg-ob-doc-request-actions { margin: 14px 0 0; }
.gsg-ob-doc-request-actions .gsg-ob-btn { width: 100%; justify-content: center; }
@media (max-width: 640px) {
  .gsg-ob-doc-request-detail > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Document request groups (pathway grouping) */
.gsg-ob-doc-group { margin: 0 0 32px; }
.gsg-ob-doc-group:last-child { margin-bottom: 0; }
.gsg-ob-doc-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 0 10px; margin-bottom: 12px;
  border-bottom: 2px solid #e8ebe2;
}
.gsg-ob-doc-group-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #143425; margin: 0;
}
.gsg-ob-doc-group-count {
  font-size: 12px; font-weight: 600; color: #5a7566; white-space: nowrap;
}

/* Document continue bar */
.gsg-ob-doc-continue-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  background: #0d2624; border-radius: 18px;
  padding: 22px 28px; margin: 32px 0 0;
}
.gsg-ob-doc-continue-meta { flex: 1; min-width: 0; }
.gsg-ob-doc-continue-count {
  font-family: "Mona Sans", sans-serif;
  font-size: 16px; font-weight: 500; color: #e8ebe2; margin: 0 0 4px;
}
.gsg-ob-doc-continue-count strong { color: #fff; font-weight: 700; }
.gsg-ob-doc-continue-hint { font-size: 13px; color: #ADB295; margin: 0; }
.gsg-ob-doc-continue-bar .gsg-ob-btn {
  background: #fff; color: #0d2624; border-color: #fff; white-space: nowrap;
}
.gsg-ob-doc-continue-bar .gsg-ob-btn:hover { background: #e8ebe2; border-color: #e8ebe2; }

/* === END CLAPP PORTAL v1.1 === */

/* === CLAPP PORTAL ACTIVE v1 === */
/* Paid-client dashboard (client_state === "active"). Grid of KPI strip + 8 panels.
 * Seeded from sales sheet + CSV data. Designed to scale as real engagements populate it.
 */

.gsg-ob-pill--active {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: #143425;
  padding: 5px 12px; border-radius: 999px;
}

/* KPI strip — 4 tiles */
.gsg-ob-kpi-strip {
  background: #fff; border-radius: 22px;
  padding: 28px; margin: 0 0 28px;
  display: grid; gap: 24px;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #e8ebe2;
}
.gsg-ob-kpi { display: flex; flex-direction: column; gap: 4px; }
.gsg-ob-kpi + .gsg-ob-kpi { border-left: 1px solid #e8ebe2; padding-left: 24px; }
.gsg-ob-kpi-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5a7566; margin: 0;
}
.gsg-ob-kpi-value {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  color: #0d2624; margin: 6px 0 2px;
}
.gsg-ob-kpi-unit { font-size: 0.4em; color: #5a7566; font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.gsg-ob-kpi-sub { font-size: 12px; color: #5a7566; margin: 0; line-height: 1.45; }
@media (max-width: 900px) {
  .gsg-ob-kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .gsg-ob-kpi + .gsg-ob-kpi { border-left: 0; padding-left: 0; }
  .gsg-ob-kpi-strip .gsg-ob-kpi:nth-child(3),
  .gsg-ob-kpi-strip .gsg-ob-kpi:nth-child(4) { border-top: 1px solid #e8ebe2; padding-top: 20px; }
}
@media (max-width: 540px) {
  .gsg-ob-kpi-strip { grid-template-columns: 1fr; padding: 20px; }
  .gsg-ob-kpi-strip .gsg-ob-kpi:nth-child(n+2) { border-top: 1px solid #e8ebe2; padding-top: 16px; }
}

/* 8-panel active grid */
.gsg-ob-active-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px) { .gsg-ob-active-grid { grid-template-columns: 1fr; } }

.gsg-ob-panel {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 18px;
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.gsg-ob-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 22px;
  background: #e8ebe2;
  border-bottom: 1px solid #d8decf;
}
.gsg-ob-panel-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 18px; font-weight: 640; letter-spacing: -0.01em;
  color: #0d2624; margin: 0;
}
.gsg-ob-panel-cta {
  font-size: 12px; font-weight: 700; color: #143425;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(20,52,37,0.18);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gsg-ob-panel-cta:hover {
  color: #fff; background: #143425; border-color: #143425;
  text-decoration: none;
}
.gsg-ob-panel-body {
  font-size: 14px; color: #274543; line-height: 1.5;
  padding: 18px 22px 22px;
}

/* Line list (shared by deadlines / tasks / alerts / billing / deliverables) */
.gsg-ob-line-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.gsg-ob-line-row {
  padding: 10px 0; border-top: 1px solid #e8ebe2;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.gsg-ob-line-row:first-child { border-top: 0; padding-top: 0; }
.gsg-ob-line-row:last-child { padding-bottom: 0; }
.gsg-ob-line-title { font-size: 14px; font-weight: 600; color: #0d2624; margin: 0; line-height: 1.35; }
.gsg-ob-line-meta { font-size: 12px; color: #5a7566; margin: 2px 0 0; line-height: 1.35; }
.gsg-ob-line-right { text-align: right; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.gsg-ob-line-date { font-size: 13px; font-weight: 600; color: #0d2624; }
.gsg-ob-line-days { font-size: 11px; color: #5a7566; }

.gsg-ob-line-row.is-soon .gsg-ob-line-days { color: #143425; font-weight: 700; }
.gsg-ob-line-row.is-watch .gsg-ob-line-days { color: #8a6a2f; font-weight: 600; }

.gsg-ob-line-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
.gsg-ob-line-badge.is-client { background: #fdf3ec; color: #8a4a25; }
.gsg-ob-line-badge.is-firm { background: #e8ebe2; color: #143425; }

/* Compliance score rows */
.gsg-ob-score-row { display: grid; grid-template-columns: 150px 1fr 40px; align-items: center; gap: 12px; }
.gsg-ob-score-label { font-size: 13px; color: #274543; font-weight: 600; }
.gsg-ob-score-track { height: 6px; background: #e8ebe2; border-radius: 999px; overflow: hidden; }
.gsg-ob-score-fill { height: 100%; background: linear-gradient(90deg, #143425 0%, #ADB295 100%); border-radius: 999px; }
.gsg-ob-score-val { font-size: 13px; color: #0d2624; font-weight: 700; text-align: right; }
@media (max-width: 540px) {
  .gsg-ob-score-row { grid-template-columns: 1fr 40px; }
  .gsg-ob-score-label { grid-column: 1 / -1; }
}

/* Alerts */
.gsg-ob-alert-row.is-warn { border-left: 3px solid #8a6a2f; padding-left: 10px; }
.gsg-ob-alert-row.is-crit { border-left: 3px solid #143425; padding-left: 10px; }
.gsg-ob-alert-row.is-info { border-left: 3px solid #ADB295; padding-left: 10px; }

/* Team rows */
.gsg-ob-team-row {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-top: 1px solid #e8ebe2;
}
.gsg-ob-team-row:first-child { border-top: 0; padding-top: 0; }

/* Vendor grid */
.gsg-ob-vendor-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}
.gsg-ob-vendor-tile {
  padding: 12px 14px; background: #f5f5f7; border-radius: 12px;
}

/* === END CLAPP PORTAL ACTIVE v1 === */

/* === CLAPP PORTAL ACTIVE v1.1 (history + activity log) === */
.gsg-ob-panel--span { grid-column: 1 / -1; }

/* Activity timeline */
.gsg-ob-timeline { list-style: none; padding: 0; margin: 0; }
.gsg-ob-timeline-row {
  position: relative; padding: 10px 0 10px 28px;
  border-top: 1px solid #e8ebe2;
}
.gsg-ob-timeline-row:first-child { border-top: 0; padding-top: 0; }
.gsg-ob-timeline-dot {
  position: absolute; left: 6px; top: 14px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ADB295; border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e8ebe2;
}
.gsg-ob-timeline-row:first-child .gsg-ob-timeline-dot { top: 4px; }
.gsg-ob-timeline-row.is-message .gsg-ob-timeline-dot { background: #143425; }
.gsg-ob-timeline-row.is-agency .gsg-ob-timeline-dot { background: #274543; }
.gsg-ob-timeline-row.is-deliverable .gsg-ob-timeline-dot { background: #8a6a2f; }
.gsg-ob-timeline-row.is-alert .gsg-ob-timeline-dot { background: #143425; }
.gsg-ob-timeline-row.is-billing .gsg-ob-timeline-dot { background: #ADB295; }
.gsg-ob-timeline-row.is-meeting .gsg-ob-timeline-dot { background: #274543; }
.gsg-ob-timeline-row.is-engagement .gsg-ob-timeline-dot { background: #143425; }
.gsg-ob-timeline-text { font-size: 14px; font-weight: 500; color: #0d2624; margin: 0; line-height: 1.45; }
.gsg-ob-timeline-meta { font-size: 11px; color: #5a7566; margin: 3px 0 0; letter-spacing: 0.04em; text-transform: uppercase; }

/* Unread dot + row */
.gsg-ob-unread-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #143425; vertical-align: middle; margin-right: 4px;
}
.gsg-ob-line-row.is-unread .gsg-ob-line-title { color: #0d2624; font-weight: 700; }

/* Message thread */
.gsg-ob-msg-thread { display: flex; flex-direction: column; gap: 10px; }
.gsg-ob-msg {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 16px 18px;
}
.gsg-ob-msg.is-outbound { background: #fff; margin-left: 32px; border-color: #ADB295; }
.gsg-ob-msg.is-inbound { margin-right: 32px; }
.gsg-ob-msg.is-unread { border-color: #143425; background: #fdf3ec; }
.gsg-ob-msg-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: #5a7566; margin: 0 0 6px;
}
.gsg-ob-msg-from { font-weight: 700; color: #0d2624; }
.gsg-ob-msg-date {}
.gsg-ob-msg-subject {
  font-family: "Mona Sans", sans-serif;
  font-size: 15px; font-weight: 620; color: #0d2624;
  margin: 0 0 6px;
}
.gsg-ob-msg-body { font-size: 14px; color: #274543; line-height: 1.55; margin: 0; }
@media (max-width: 640px) {
  .gsg-ob-msg.is-outbound, .gsg-ob-msg.is-inbound { margin-left: 0; margin-right: 0; }
}

/* === END CLAPP PORTAL ACTIVE v1.1 === */

/* === CLAPP VAULT + NEWSROOM v1 === */
/* Master document vault layout (delivered + requested + uploaded) + newsroom feed. */

/* Vault KPI strip — 4 tiles, responsive */
.gsg-ob-vault-kpi {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 22px;
  padding: 28px; margin: 0 0 28px;
  display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr);
}
.gsg-ob-vault-kpi-tile { display: flex; flex-direction: column; gap: 4px; }
.gsg-ob-vault-kpi-tile + .gsg-ob-vault-kpi-tile { border-left: 1px solid #e8ebe2; padding-left: 24px; }
@media (max-width: 900px) {
  .gsg-ob-vault-kpi { grid-template-columns: repeat(2, 1fr); }
  .gsg-ob-vault-kpi-tile + .gsg-ob-vault-kpi-tile { border-left: 0; padding-left: 0; }
  .gsg-ob-vault-kpi-tile:nth-child(3),
  .gsg-ob-vault-kpi-tile:nth-child(4) { border-top: 1px solid #e8ebe2; padding-top: 20px; }
}
@media (max-width: 540px) {
  .gsg-ob-vault-kpi { grid-template-columns: 1fr; padding: 20px; }
  .gsg-ob-vault-kpi-tile:nth-child(n+2) { border-top: 1px solid #e8ebe2; padding-top: 16px; }
}

/* Document tile grid — 2-column for delivered + uploaded sections */
.gsg-ob-doc-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 760px) { .gsg-ob-doc-grid { grid-template-columns: 1fr; } }

.gsg-ob-doc-tile {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 18px 20px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
}
.gsg-ob-doc-tile:hover {
  background: #fff; border-color: #ADB295;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(13, 38, 36, 0.08);
  color: inherit;
}
.gsg-ob-doc-tile--delivered { background: #fff; }
.gsg-ob-doc-tile--delivered:hover { border-color: #143425; }
.gsg-ob-doc-tile-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.gsg-ob-doc-ext {
  font-family: "Mona Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: #fff; background: #274543;
  padding: 5px 10px; border-radius: 8px;
  min-width: 48px; text-align: center;
  text-transform: uppercase;
}
.gsg-ob-doc-ext[data-ext="pdf"]  { background: #c03a2b; }
.gsg-ob-doc-ext[data-ext="docx"],
.gsg-ob-doc-ext[data-ext="doc"]  { background: #2b4c99; }
.gsg-ob-doc-ext[data-ext="xlsx"],
.gsg-ob-doc-ext[data-ext="csv"]  { background: #1f7a49; }
.gsg-ob-doc-ext[data-ext="png"],
.gsg-ob-doc-ext[data-ext="jpg"],
.gsg-ob-doc-ext[data-ext="jpeg"],
.gsg-ob-doc-ext[data-ext="heic"] { background: #8a4a9e; }
.gsg-ob-doc-ext[data-ext="zip"]  { background: #5a5a5a; }
.gsg-ob-doc-ext[data-ext="ai"]   { background: #d97757; }
.gsg-ob-doc-ext[data-ext="msg"],
.gsg-ob-doc-ext[data-ext="eml"]  { background: #8a6a2f; }

.gsg-ob-doc-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: #e8ebe2; color: #274543;
  white-space: nowrap;
}
.gsg-ob-doc-tag.is-final  { background: #143425; color: #fff; }
.gsg-ob-doc-tag.is-draft  { background: #fdf3ec; color: #8a4a25; }
.gsg-ob-doc-tag.is-linked { background: #ADB295; color: #0d2624; }
.gsg-ob-doc-tag.is-open   { background: #e8ebe2; color: #5a7566; }

.gsg-ob-doc-tile-name {
  font-family: "Mona Sans", sans-serif;
  font-size: 15px; font-weight: 620; letter-spacing: -0.01em;
  color: #0d2624; margin: 0;
  line-height: 1.35;
  word-break: break-word;
}
.gsg-ob-doc-tile-foot {
  margin-top: auto; padding-top: 8px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; gap: 10px;
}
.gsg-ob-doc-tile-date { color: #5a7566; }
.gsg-ob-doc-tile-action {
  font-size: 12px; font-weight: 700; color: #143425;
  background: transparent; border: 0; cursor: pointer;
  padding: 2px 0;
}
.gsg-ob-doc-tile-action:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Legacy master list row (kept for back-compat / inline uses) */
.gsg-ob-doc-master-list { display: flex; flex-direction: column; }
.gsg-ob-doc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid #e8ebe2;
}
.gsg-ob-doc-row:first-child { border-top: 0; }
.gsg-ob-doc-icon {
  font-size: 22px; flex-shrink: 0;
}
.gsg-ob-doc-meta { flex: 1; min-width: 0; }
.gsg-ob-doc-name { font-size: 14px; font-weight: 600; color: #0d2624; margin: 0; line-height: 1.35; }
.gsg-ob-doc-sub { font-size: 12px; color: #5a7566; margin: 2px 0 0; }
.gsg-ob-doc-action { font-size: 13px; font-weight: 600; color: #143425; text-decoration: none; white-space: nowrap; }
.gsg-ob-doc-action:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Newsroom ---------- */
.gsg-ob-news-list { list-style: none; padding: 0; margin: 0; }
.gsg-ob-news-row {
  padding: 10px 0 10px 12px; border-top: 1px solid #e8ebe2;
  border-left: 3px solid transparent;
}
.gsg-ob-news-row:first-child { border-top: 0; padding-top: 0; }
.gsg-ob-news-row.is-warning { border-left-color: #8a6a2f; }
.gsg-ob-news-row.is-critical { border-left-color: #143425; }
.gsg-ob-news-row.is-info { border-left-color: #ADB295; }
.gsg-ob-news-title { font-size: 14px; font-weight: 600; color: #0d2624; margin: 0; line-height: 1.4; }
.gsg-ob-news-meta { font-size: 11px; color: #5a7566; margin: 3px 0 0; letter-spacing: 0.02em; }

/* News page — 2-column card grid */
.gsg-ob-news-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 820px) { .gsg-ob-news-grid { grid-template-columns: 1fr; } }

.gsg-ob-news-card {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 20px;
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border-left: 4px solid #ADB295;
}
.gsg-ob-news-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(13, 38, 36, 0.08); border-color: #ADB295; border-left-color: #143425; }
.gsg-ob-news-card.is-warning { border-left-color: #8a6a2f; }
.gsg-ob-news-card.is-critical { border-left-color: #143425; }
.gsg-ob-news-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
}
.gsg-ob-news-category { color: #143425; background: #e8ebe2; padding: 4px 10px; border-radius: 999px; }
.gsg-ob-news-date     { color: #5a7566; }
.gsg-ob-news-card-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 20px; font-weight: 640; letter-spacing: -0.015em;
  line-height: 1.2; color: #0d2624;
  margin: 0;
}
.gsg-ob-news-card-author { font-size: 12px; color: #5a7566; margin: 0; font-weight: 500; }
.gsg-ob-news-card-body { font-size: 14.5px; color: #274543; line-height: 1.55; margin: 0; }
.gsg-ob-news-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.gsg-ob-news-tag {
  font-size: 11px; font-weight: 600; color: #274543; background: #e8ebe2;
  padding: 3px 10px; border-radius: 999px;
}
.gsg-ob-news-card-more { font-size: 13px; font-weight: 600; }

/* === END CLAPP VAULT + NEWSROOM v1 === */

/* === CLAPP VENDOR BENTO v1 === */
/* Certified-vendor network page: filter pills + bento image grid with cert badge. */

/* Filter pill row */
.gsg-ob-vendor-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 0 0 28px;
}
.gsg-ob-vendor-filter-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; min-height: 42px;
  background: #fff; color: #274543;
  border: 1px solid #e8ebe2; border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.gsg-ob-vendor-filter-btn:hover { border-color: #ADB295; transform: translateY(-1px); }
.gsg-ob-vendor-filter-btn.is-active {
  background: #0d2624; color: #fff; border-color: #0d2624;
}
.gsg-ob-vendor-filter-btn.is-active .gsg-ob-vendor-filter-count {
  background: rgba(255, 255, 255, 0.15); color: #fff;
}
.gsg-ob-vendor-filter-count {
  font-size: 11px; font-weight: 700;
  background: #e8ebe2; color: #274543;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.04em;
}

/* Vendor bento overrides (sits on top of .clapp-bento-grid / .clapp-bento-card) */
.gsg-ob-vendor-bento { margin-top: 0; }
.gsg-ob-vendor-card { display: flex; flex-direction: column; }
.gsg-ob-vendor-card .clapp-bento-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;
}

/* Cert badge overlays the image */
.gsg-ob-vendor-cert-badge {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #0d2624; background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(13, 38, 36, 0.18);
  backdrop-filter: saturate(1.4) blur(4px);
  -webkit-backdrop-filter: saturate(1.4) blur(4px);
}
.gsg-ob-vendor-cert-badge.is-preferred {
  background: #143425; color: #fff;
}
.gsg-ob-vendor-cert-badge.is-preferred .gsg-ob-vendor-cert-icon { color: #ADB295; }
.gsg-ob-vendor-cert-icon {
  font-size: 13px; font-weight: 900; color: #143425;
}

/* Body — add category subtitle + specialties chips + meta footer */
.gsg-ob-vendor-body { gap: 10px; }
.gsg-ob-vendor-head { display: flex; flex-direction: column; gap: 2px; }
.gsg-ob-vendor-category {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5a7566; margin: 0;
}
.gsg-ob-vendor-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.gsg-ob-vendor-spec {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: #274543; background: #e8ebe2;
  padding: 3px 10px; border-radius: 999px;
}
.gsg-ob-vendor-meta {
  margin-top: auto; padding-top: 10px;
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: #5a7566;
  border-top: 1px solid #e8ebe2;
}

/* === END CLAPP VENDOR BENTO v1 === */

/* === CLAPP ACCOUNT DROPDOWN + PROFILE v1 === */
/* Avatar dropdown menu in the portal header + profile page (personal, businesses, add-business). */

.gsg-ob-acct { position: relative; }
.gsg-ob-acct-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid #d8decf;
  cursor: pointer;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  color: #0d2624;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.gsg-ob-acct-trigger:hover,
.gsg-ob-acct.is-open .gsg-ob-acct-trigger {
  background: #143425;
  border-color: #143425;
  color: #fff;
  box-shadow: 0 4px 14px rgba(13, 38, 36, 0.18);
}
.gsg-ob-acct-trigger:hover .gsg-ob-acct-caret,
.gsg-ob-acct.is-open .gsg-ob-acct-caret { color: #fff; }
.gsg-ob-acct-name { font-size: 14px; font-weight: 600; }
.gsg-ob-acct-caret { font-size: 10px; color: #274543; transition: transform 0.15s ease, color 0.15s ease; }
.gsg-ob-acct.is-open .gsg-ob-acct-caret { transform: rotate(180deg); }
@media (max-width: 520px) { .gsg-ob-acct-name { display: none; } }

.gsg-ob-acct-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 280px; max-width: 320px;
  background: #fff; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 8px;
  box-shadow: 0 16px 42px rgba(13, 38, 36, 0.14);
  z-index: 60;
}
.gsg-ob-acct-menu-head {
  padding: 12px 14px 14px; margin-bottom: 4px;
  border-bottom: 1px solid #e8ebe2;
}
.gsg-ob-acct-menu-name {
  font-family: "Mona Sans", sans-serif;
  font-size: 15px; font-weight: 640; letter-spacing: -0.01em;
  color: #0d2624; margin: 0 0 2px;
}
.gsg-ob-acct-menu-email { font-size: 12px; color: #5a7566; margin: 0; word-break: break-all; }
.gsg-ob-acct-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 10px 14px; border-radius: 10px;
  background: transparent; border: 0;
  font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 500;
  color: #0d2624; text-decoration: none; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  text-align: left;
}
.gsg-ob-acct-menu-item:hover { background: #f5f5f7; color: #0d2624; }
.gsg-ob-acct-menu-item.is-danger:hover { background: #fdf3ec; color: #c46345; }
.gsg-ob-acct-menu-item.is-danger { color: #c46345; }
.gsg-ob-acct-arrow { font-size: 13px; color: #5a7566; }
.gsg-ob-acct-menu-div { height: 1px; background: #e8ebe2; margin: 4px 8px; }

/* Keep the legacy inline signout class hidden in case any old markup still references it */
.gsg-ob-portal-signout { display: none !important; }

/* ---------- Profile: businesses ---------- */
.gsg-ob-biz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* Business cards now use vendor bento-card style */
.gsg-ob-biz-card { text-decoration: none; color: inherit; }
.gsg-ob-biz-card:focus-visible { outline: 2px solid #143425; outline-offset: 3px; border-radius: 18px; }
.gsg-ob-biz-card .clapp-bento-card-img { aspect-ratio: 16/9; position: relative; }
.gsg-ob-biz-initials {
  font-family: 'Mona Sans', sans-serif; font-size: clamp(36px,5vw,56px); font-weight: 800;
  color: rgba(255,255,255,0.35); letter-spacing: -0.04em; user-select: none;
}
.gsg-ob-biz-status-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
}
.gsg-ob-biz-status-badge--is-active { background: rgba(20,52,37,0.85); color: #e8ebe2; }
.gsg-ob-biz-status-badge--is-onboarding,
.gsg-ob-biz-status-badge--is-scoping-in-progress { background: rgba(140,100,30,0.85); color: #fff; }
.gsg-ob-biz-body { padding: 18px 20px; }

/* vault tabs */
.gsg-ob-vault-tab { min-width: 160px; }

.gsg-ob-biz-card-arrow {
  display: inline-block;
  margin-top: 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px; font-weight: 700;
  color: #143425;
  letter-spacing: 0.02em;
  opacity: 0.7;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.gsg-ob-biz-card:hover .gsg-ob-biz-card-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.gsg-ob-biz-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; flex-wrap: wrap;
}
.gsg-ob-biz-name {
  font-family: "Mona Sans", sans-serif;
  font-size: 19px; font-weight: 640; letter-spacing: -0.015em;
  color: #0d2624; margin: 0;
}
.gsg-ob-biz-status {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: #e8ebe2; color: #274543;
  white-space: nowrap;
}
.gsg-ob-biz-status.is-active { background: #143425; color: #fff; }
.gsg-ob-biz-status.is-scoping-in-progress,
.gsg-ob-biz-status.is-scoping-requested { background: #fdf3ec; color: #8a4a25; }

.gsg-ob-biz-detail {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px;
  margin: 0; padding: 0;
  font-size: 13.5px; line-height: 1.5;
}
.gsg-ob-biz-detail > div { display: flex; flex-direction: column; }
.gsg-ob-biz-detail dt {
  font-family: "DM Sans", sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5a7566; margin: 0 0 2px;
}
.gsg-ob-biz-detail dd { color: #0d2624; margin: 0; font-weight: 500; }
@media (max-width: 560px) { .gsg-ob-biz-detail { grid-template-columns: 1fr; } }

/* ---------- Add-business form ---------- */
.gsg-ob-biz-addform {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 18px;
  padding: clamp(22px, 4vw, 32px);
  margin-top: 20px;
}

/* === END CLAPP ACCOUNT DROPDOWN + PROFILE v1 === */

/* === CLAPP MULTI-BUSINESS v1 === */
/* Master dashboard "Your businesses" grid + tile cards + business switcher in the portal header. */

.gsg-ob-biz-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.gsg-ob-biz-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 18px;
  padding: 22px 24px;
  text-decoration: none; color: inherit;
  border-left: 4px solid #ADB295;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.gsg-ob-biz-tile:hover {
  background: #fff;
  transform: translateY(-2px);
  border-color: #ADB295; border-left-color: #143425;
  box-shadow: 0 14px 36px rgba(13, 38, 36, 0.08);
  color: inherit;
}
.gsg-ob-biz-tile.is-active { background: #fff; border-left-color: #143425; }
.gsg-ob-biz-tile.is-onboarding,
.gsg-ob-biz-tile.is-scoping-requested,
.gsg-ob-biz-tile.is-scoping-in-progress { border-left-color: #8a6a2f; }

.gsg-ob-biz-tile-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.gsg-ob-biz-tile-status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: #e8ebe2; color: #274543;
  white-space: nowrap;
}
.gsg-ob-biz-tile-status.is-active { background: #143425; color: #fff; }
.gsg-ob-biz-tile-status.is-onboarding,
.gsg-ob-biz-tile-status.is-scoping-requested,
.gsg-ob-biz-tile-status.is-scoping-in-progress { background: #fdf3ec; color: #8a4a25; }

.gsg-ob-biz-tile-score {
  font-family: "Mona Sans", sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: #143425;
}
.gsg-ob-biz-tile-score-unit { font-size: 0.5em; color: #5a7566; font-weight: 500; margin-left: 2px; letter-spacing: 0; }

.gsg-ob-biz-tile-name {
  font-family: "Mona Sans", sans-serif;
  font-size: 19px; font-weight: 640; letter-spacing: -0.015em;
  color: #0d2624; margin: 0;
}
.gsg-ob-biz-tile-sub { font-size: 12.5px; color: #5a7566; margin: 0; line-height: 1.5; }
.gsg-ob-biz-tile-meta {
  font-size: 12.5px; color: #274543; line-height: 1.5;
  background: rgba(173, 178, 149, 0.14);
  padding: 8px 12px; border-radius: 10px;
  margin-top: auto;
}
.gsg-ob-biz-tile-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #5a7566;
  padding-top: 8px; border-top: 1px solid #e8ebe2;
}
.gsg-ob-biz-tile-arrow { font-weight: 700; color: #143425; }

/* Add-business tile (last card in the grid) */
.gsg-ob-biz-tile--add {
  background: transparent;
  border-style: dashed; border-left-style: dashed; border-color: #ADB295;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; min-height: 160px;
  color: #274543;
}
.gsg-ob-biz-tile--add:hover { background: #e8ebe2; border-style: dashed; border-color: #143425; border-left-color: #143425; }
.gsg-ob-biz-tile-plus {
  width: 42px; height: 42px; border-radius: 50%;
  background: #143425; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  margin-bottom: 6px;
}

/* Business switcher in portal header */
.gsg-ob-biz-switcher { position: relative; display: inline-flex; align-items: center; }
.gsg-ob-biz-switcher .gsg-ob-acct-trigger { padding: 8px 14px; border: 1px solid #e8ebe2; background: #fff; }
.gsg-ob-biz-switcher .gsg-ob-acct-trigger:hover,
.gsg-ob-biz-switcher .gsg-ob-acct.is-open .gsg-ob-acct-trigger { background: #e8ebe2; }
.gsg-ob-biz-switcher .gsg-ob-acct-menu { min-width: 320px; right: 0; }
.gsg-ob-biz-switcher .gsg-ob-acct-menu-item.is-active { background: #143425; color: #fff; }
.gsg-ob-biz-switcher .gsg-ob-acct-menu-item.is-active .gsg-ob-micro { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 720px) { .gsg-ob-biz-switcher .gsg-ob-acct-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* === END CLAPP MULTI-BUSINESS v1 === */

/* === CLAPP FINANCING v1 === */
/* Hero financing block (portal dashboard + financing page) — Apple-style: big type,
 * dark deep-green gradient, sage accents, centered stats, pill CTA.
 */

.gsg-ob-fin-hero {
  position: relative;
  background: linear-gradient(135deg, #0d2624 0%, #143425 50%, #274543 100%);
  color: #fff;
  border-radius: 26px;
  padding: clamp(32px, 5vw, 56px);
  overflow: hidden;
  isolation: isolate;
}
.gsg-ob-fin-hero::before,
.gsg-ob-fin-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  z-index: -1; pointer-events: none;
  filter: blur(60px);
}
.gsg-ob-fin-hero::before {
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(173, 178, 149, 0.45) 0%, transparent 70%);
}
.gsg-ob-fin-hero::after {
  bottom: -100px; left: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(173, 178, 149, 0.2) 0%, transparent 70%);
}

.gsg-ob-fin-hero-inner {
  display: grid; gap: clamp(28px, 4vw, 48px);
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  position: relative;
}
@media (max-width: 880px) { .gsg-ob-fin-hero-inner { grid-template-columns: 1fr; } }

.gsg-ob-fin-hero-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ADB295; margin: 0 0 12px;
}
.gsg-ob-fin-hero-title {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 680; line-height: 1.02; letter-spacing: -0.03em;
  color: #fff; margin: 0 0 20px;
}
.gsg-ob-fin-hero-title em { font-style: normal; color: #ADB295; }
.gsg-ob-fin-hero-body {
  font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch; margin: 0 0 28px;
}
.gsg-ob-fin-hero-stats {
  display: grid; gap: 18px 32px;
  grid-template-columns: repeat(3, 1fr);
  padding: 20px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0 0 28px;
}
@media (max-width: 620px) { .gsg-ob-fin-hero-stats { grid-template-columns: 1fr; gap: 12px; padding-top: 14px; } }
.gsg-ob-fin-hero-stat-num {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700; letter-spacing: -0.02em;
  color: #fff; margin: 10px 0 2px;
}
.gsg-ob-fin-hero-stat-sub { font-size: 12px; color: rgba(255, 255, 255, 0.65); margin: 0; letter-spacing: 0.02em; }

.gsg-ob-fin-hero-cta {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.gsg-ob-fin-hero-cta .gsg-ob-btn { font-size: 15px; padding: 14px 28px; }
.gsg-ob-fin-hero-cta .gsg-ob-btn--sage { box-shadow: 0 6px 22px rgba(173, 178, 149, 0.3); }
.gsg-ob-fin-hero-cta .gsg-ob-btn--sage:hover {
  background: #fff !important; border-color: #fff !important; color: #0d2624 !important;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.25);
}

.gsg-ob-fin-hero-products {
  display: grid; gap: 10px;
  align-self: stretch;
}
.gsg-ob-fin-product {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gsg-ob-fin-product:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(2px); }
.gsg-ob-fin-product-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: #ADB295; color: #0d2624;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Mona Sans", sans-serif; font-size: 13px; font-weight: 800;
  flex-shrink: 0;
}
.gsg-ob-fin-product-title { font-size: 14px; font-weight: 700; color: #fff; margin: 0; }
.gsg-ob-fin-product-sub { font-size: 12px; color: rgba(255, 255, 255, 0.65); margin: 2px 0 0; }

/* ---- Financing page product gallery (2-column) ---- */
.gsg-ob-fin-gallery {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) { .gsg-ob-fin-gallery { grid-template-columns: 1fr; } }

.gsg-ob-fin-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: #fff; border: 1px solid #e8ebe2; border-radius: 18px;
  padding: 22px 24px;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.gsg-ob-fin-card:hover {
  border-color: #ADB295;
  box-shadow: 0 14px 36px rgba(13, 38, 36, 0.08);
  transform: translateY(-2px);
  color: inherit;
}
.gsg-ob-fin-card-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: #143425; color: #ADB295;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Mona Sans", sans-serif; font-size: 17px; font-weight: 800;
}
.gsg-ob-fin-card-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 20px; font-weight: 640; letter-spacing: -0.015em;
  color: #0d2624; margin: 0 0 4px;
}
.gsg-ob-fin-card-range {
  font-family: "DM Sans", sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: #143425;
  background: #e8ebe2; padding: 3px 10px; border-radius: 999px;
  display: inline-block; margin: 0 0 10px;
}
.gsg-ob-fin-card-body { font-size: 14px; line-height: 1.55; color: #274543; margin: 0; }

/* === END CLAPP FINANCING v1 === */

/* === CLAPP FINANCING AD + FORM v2 (Apple-Pay feel) === */

/* ---------- Inline ad block (shown on every portal page except master + financing) ---------- */
.gsg-ob-fin-ad {
  display: block;
  background: linear-gradient(135deg, #143425 0%, #274543 100%);
  color: #fff;
  border-radius: 22px;
  padding: clamp(22px, 3vw, 32px);
  margin: 36px 0 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.gsg-ob-fin-ad::before {
  content: ""; position: absolute;
  top: -60px; right: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(173, 178, 149, 0.35) 0%, transparent 70%);
  filter: blur(50px); z-index: -1; pointer-events: none;
}
.gsg-ob-fin-ad-inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
}
.gsg-ob-fin-ad-lead { flex: 1; min-width: 260px; }
.gsg-ob-fin-ad-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ADB295; margin: 0 0 6px;
}
.gsg-ob-fin-ad-title {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(20px, 2vw, 26px); font-weight: 640; letter-spacing: -0.015em;
  color: #fff; margin: 0 0 6px;
}
.gsg-ob-fin-ad-body {
  font-size: 14.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 52ch;
}
.gsg-ob-fin-ad-cta .gsg-ob-btn { font-size: 14px; padding: 12px 22px; }
.gsg-ob-fin-ad-cta .gsg-ob-btn--sage:hover {
  background: #fff !important; border-color: #fff !important; color: #0d2624 !important;
}

/* ---------- Lender-grade form (Apple Pay sheet feel) ---------- */

.gsg-ob-fin-form-wrap {
  background: #f5f5f7;
  border: 1px solid #e8ebe2;
  border-radius: 26px;
  padding: clamp(28px, 4vw, 44px);
  margin: 0 0 28px;
}
.gsg-ob-fin-form-head { text-align: center; max-width: 620px; margin: 0 auto clamp(24px, 4vw, 40px); }

.gsg-ob-fin-form { display: flex; flex-direction: column; gap: 18px; }

/* Each step = white card with rounded corners, like an Apple Pay sheet */
.gsg-ob-fin-step {
  background: #fff;
  border-radius: 20px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 1px 0 rgba(13, 38, 36, 0.04);
}
.gsg-ob-fin-step-head {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px;
}
.gsg-ob-fin-step-num {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: #143425; color: #ADB295;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Mona Sans", sans-serif;
  font-size: 15px; font-weight: 700;
}
.gsg-ob-fin-step-title {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(20px, 2vw, 24px); font-weight: 640; letter-spacing: -0.015em;
  color: #0d2624; margin: 2px 0 0;
}
.gsg-ob-fin-step-head .gsg-ob-eyebrow { margin: 0; }

/* Tighten inputs inside the form to feel sheet-like */
.gsg-ob-fin-step .gsg-ob-field { margin-bottom: 20px; }
.gsg-ob-fin-step .gsg-ob-field:last-child { margin-bottom: 0; }

/* Repeatable row wrapper (debt schedule, use-of-funds) */
.gsg-ob-fin-rep-row {
  position: relative;
  background: #f5f5f7;
  border: 1px solid #e8ebe2;
  border-radius: 14px;
  padding: 16px 18px 16px 18px;
  margin: 10px 0;
}
.gsg-ob-fin-rep-row .gsg-ob-input-row { margin: 0 0 8px; }
.gsg-ob-fin-rep-row .gsg-ob-input-row:last-of-type { margin: 0; }
.gsg-ob-fin-rep-remove {
  position: absolute; top: 8px; right: 10px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 11px; font-weight: 600; color: #8a4a25;
  padding: 4px 8px; border-radius: 8px;
}
.gsg-ob-fin-rep-remove:hover { background: #fdf3ec; }

/* Document grid — Apple-style dropzone tiles */
.gsg-ob-fin-doc-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 620px) { .gsg-ob-fin-doc-grid { grid-template-columns: 1fr; } }

.gsg-ob-fin-doc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #f5f5f7; border: 1px dashed #ADB295; border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px; color: #0d2624; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gsg-ob-fin-doc:hover { background: #fff; border-color: #143425; border-style: solid; }
.gsg-ob-fin-doc input[type="file"] {
  background: transparent;
  font-size: 12px; color: #5a7566;
  max-width: 180px;
}

/* Final submit — Apple Pay-style black full-width pill */
.gsg-ob-fin-submit {
  background: #fff; border-radius: 20px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 1px 0 rgba(13, 38, 36, 0.04);
}
.gsg-ob-fin-submit .gsg-ob-btn {
  background: #000; border-color: #000; color: #fff;
  padding: 18px 28px; min-height: 58px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.gsg-ob-fin-submit .gsg-ob-btn:hover:not(:disabled) {
  background: #1a1a1a; border-color: #1a1a1a; color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

/* === END CLAPP FINANCING AD + FORM v2 === */

/* === CLAPP FIN WIZARD v1 ===
 * Stepper bar + Back/Next nav for the multi-step financing intake.
 * The form retains its 10 .gsg-ob-fin-step sections; JS hides all but
 * the active one and exposes the submit only on the final step. */
.gsg-ob-fin-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 880px;
  margin: 0 auto 12px;
  padding: 0 8px;
}
.gsg-ob-fin-stepper-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #f5f5f7;
  border: 1px solid #d6d8d3;
  color: #5a7566;
  font-family: "Mona Sans", sans-serif;
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  padding: 0;
  flex: 0 0 auto;
}
.gsg-ob-fin-stepper-dot:hover { transform: scale(1.06); border-color: #143425; }
.gsg-ob-fin-stepper-dot.is-active {
  background: #143425;
  border-color: #143425;
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 38, 36, 0.18);
}
.gsg-ob-fin-stepper-dot.is-done {
  background: #5a7566;
  border-color: #5a7566;
  color: #fff;
}
.gsg-ob-fin-stepper-bar {
  flex: 1 1 auto;
  height: 2px;
  min-width: 12px;
  background: linear-gradient(90deg, rgba(20, 52, 37, 0.06) 0%, rgba(20, 52, 37, 0.18) 50%, rgba(20, 52, 37, 0.06) 100%);
  margin: 0 4px;
}
.gsg-ob-fin-stepper-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 32px;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: #5a7566;
  letter-spacing: 0.02em;
}
.gsg-ob-fin-stepper-current strong { color: #143425; font-weight: 700; }
.gsg-ob-fin-stepper-label {
  font-family: "Mona Sans", sans-serif;
  font-size: 14px;
  font-weight: 620;
  color: #143425;
  letter-spacing: -0.01em;
  text-transform: none;
}
.gsg-ob-fin-stepper-label::before { content: "\00b7\00a0"; color: #b8bdb1; }

/* Back / Next nav (separate from the final-step submit pill) */
.gsg-ob-fin-wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 18px 4px 0;
  border-top: 1px solid rgba(13, 38, 36, 0.06);
}
.gsg-ob-fin-wizard-nav .gsg-ob-btn { min-width: 140px; justify-content: center; }
.gsg-ob-fin-wizard-nav [data-wiz-prev]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (max-width: 520px) {
  .gsg-ob-fin-stepper-dot { width: 26px; height: 26px; font-size: 12px; }
  .gsg-ob-fin-stepper-meta { flex-direction: column; gap: 4px; }
  .gsg-ob-fin-stepper-label::before { display: none; }
  .gsg-ob-fin-wizard-nav .gsg-ob-btn { min-width: 0; flex: 1; }
}
/* === END CLAPP FIN WIZARD === */

/* === CLAPP FIN FORM 2-COL TILES === */
.gsg-ob-tiles--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .gsg-ob-tiles--2col { grid-template-columns: 1fr; } }
/* === END === */

/* === CLAPP FIN FORM BREATHING ROOM v1 === */
/* Override the earlier tighter spacing to feel calm and Apple-Pay-sheet-like. */
.gsg-ob-fin-form { gap: 28px; }
.gsg-ob-fin-step { padding: clamp(32px, 4vw, 48px); }
.gsg-ob-fin-step-head { margin: 0 0 36px; gap: 18px; }
.gsg-ob-fin-step .gsg-ob-field { margin-bottom: 36px; }
.gsg-ob-fin-step .gsg-ob-field-label { margin-bottom: 12px; font-size: 16px; }
.gsg-ob-fin-step .gsg-ob-field-help { margin-bottom: 18px; font-size: 14px; }
.gsg-ob-fin-step .gsg-ob-input-row { gap: 18px; }
.gsg-ob-fin-step .gsg-ob-tiles,
.gsg-ob-fin-step .gsg-ob-radio-row { gap: 12px; margin-top: 4px; }
.gsg-ob-fin-step .gsg-ob-input,
.gsg-ob-fin-step .gsg-ob-textarea,
.gsg-ob-fin-step .gsg-ob-select { min-height: 60px; padding: 16px 20px; }
.gsg-ob-fin-step .gsg-ob-textarea { min-height: 130px; }
.gsg-ob-fin-step .gsg-ob-tile { padding: 18px 20px; }
.gsg-ob-fin-rep-row { padding: 22px; margin: 16px 0; border-radius: 16px; }
.gsg-ob-fin-rep-row .gsg-ob-input-row { margin-bottom: 12px !important; }
.gsg-ob-fin-rep-row .gsg-ob-input-row:last-of-type { margin-bottom: 0 !important; }
.gsg-ob-fin-doc-grid { gap: 14px; }
.gsg-ob-fin-doc { padding: 18px 20px; min-height: 64px; }
.gsg-ob-fin-submit { padding: clamp(28px, 4vw, 44px); margin-top: 8px; }
@media (max-width: 520px) {
  .gsg-ob-fin-step { padding: 24px; }
  .gsg-ob-fin-step .gsg-ob-field { margin-bottom: 28px; }
}
/* === END === */

/* === CLAPP AD ROW + VAULT OVERVIEW v1 === */
/* Paired financing + vendors ads at the bottom of every portal page. */
.gsg-ob-ad-row {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  margin: 36px 0 0;
}
@media (max-width: 820px) { .gsg-ob-ad-row { grid-template-columns: 1fr; } }

/* When ad row is rendered, kill the standalone .gsg-ob-fin-ad's top margin so they sit flush */
.gsg-ob-ad-row > .gsg-ob-fin-ad { margin-top: 0; }
.gsg-ob-ad-row .gsg-ob-fin-ad-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
.gsg-ob-ad-row .gsg-ob-fin-ad-cta { margin-top: auto; }

/* Vendors ad — sage gradient instead of deep green for visual hierarchy */
.gsg-ob-fin-ad--vendors {
  background: linear-gradient(135deg, #274543 0%, #3d5e58 60%, #5a7566 100%);
}
.gsg-ob-fin-ad--vendors::before {
  background: radial-gradient(circle, rgba(173, 178, 149, 0.5) 0%, transparent 70%);
}
.gsg-ob-fin-ad--vendors .gsg-ob-fin-ad-eyebrow { color: #d4dcc1; }

/* ---------- Multi-business documents overview cards ---------- */
.gsg-ob-vault-overview {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.gsg-ob-vault-card {
  display: flex; flex-direction: column; gap: 16px;
  background: #fff; border: 1px solid #e8ebe2; border-radius: 22px;
  padding: 28px 30px;
  text-decoration: none; color: inherit;
  border-left: 4px solid #ADB295;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gsg-ob-vault-card:hover {
  transform: translateY(-3px);
  border-color: #ADB295; border-left-color: #143425;
  box-shadow: 0 18px 40px rgba(13, 38, 36, 0.1);
  color: inherit;
}
.gsg-ob-vault-card.is-active { border-left-color: #143425; }
.gsg-ob-vault-card.is-onboarding,
.gsg-ob-vault-card.is-scoping-requested,
.gsg-ob-vault-card.is-scoping-in-progress { border-left-color: #8a6a2f; }

.gsg-ob-vault-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.gsg-ob-vault-card-name {
  font-family: "Mona Sans", sans-serif;
  font-size: 22px; font-weight: 640; letter-spacing: -0.02em;
  color: #0d2624; margin: 0;
}
.gsg-ob-vault-card-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 14px 0;
  border-top: 1px solid #e8ebe2; border-bottom: 1px solid #e8ebe2;
}
.gsg-ob-vault-card-num {
  font-family: "Mona Sans", sans-serif;
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  color: #143425; margin: 0;
}
.gsg-ob-vault-card-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5a7566; margin: 2px 0 0;
}
.gsg-ob-vault-card-recent { font-size: 13px; color: #274543; line-height: 1.5; margin: 0; }
.gsg-ob-vault-card-foot {
  margin-top: auto;
  padding-top: 4px;
  display: flex; justify-content: flex-end;
}
.gsg-ob-vault-card-cta {
  font-size: 13px; font-weight: 700; color: #143425;
  letter-spacing: -0.005em;
}
/* === END === */

/* === CLAPP APPROVED-PRODUCT PICKER v1 === */
/* Visual card-grid picker for DCC-approved license types in the Add-a-business form. */
.gsg-ob-product-picker {
  display: flex; flex-direction: column; gap: 24px;
  margin-top: 8px;
}
.gsg-ob-product-family-title {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5a7566; margin: 0 0 10px;
}
.gsg-ob-product-family-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.gsg-ob-product-card {
  position: relative;
  cursor: pointer;
  display: block;
}
.gsg-ob-product-card input { position: absolute; opacity: 0; pointer-events: none; }
.gsg-ob-product-card-inner {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  background: #f5f5f7;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.gsg-ob-product-card:hover .gsg-ob-product-card-inner { background: #fff; border-color: #ADB295; }
.gsg-ob-product-card input:checked + .gsg-ob-product-card-inner {
  background: #fff;
  border-color: #0d2624;
  box-shadow: 0 6px 18px rgba(13, 38, 36, 0.1);
}
.gsg-ob-product-card-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 15px; font-weight: 640; letter-spacing: -0.01em;
  color: #0d2624;
}
.gsg-ob-product-card-meta {
  font-size: 12px; font-weight: 600; color: #143425;
  background: #e8ebe2; padding: 3px 10px; border-radius: 999px;
  align-self: flex-start;
}
.gsg-ob-product-card-desc { font-size: 12.5px; line-height: 1.45; color: #5a7566; }
.gsg-ob-product-card-check {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #0d2624; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.gsg-ob-product-card input:checked ~ .gsg-ob-product-card-inner .gsg-ob-product-card-check,
.gsg-ob-product-card input:checked + .gsg-ob-product-card-inner .gsg-ob-product-card-check { opacity: 1; transform: scale(1); }
/* === END === */

/* === CLAPP FIN HERO SLIM v1 === */
/* Financing-page hero variant: no stats / no CTA / no products column.
 * Shrinks vertical padding and tightens the title size to match the new content density.
 */
.gsg-ob-fin-hero--slim { padding: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 48px); }
.gsg-ob-fin-hero--slim .gsg-ob-fin-hero-inner { grid-template-columns: 1fr; gap: 0; }
.gsg-ob-fin-hero--slim .gsg-ob-fin-hero-title {
  font-size: clamp(30px, 3.4vw, 44px);
  margin: 0 0 14px;
}
.gsg-ob-fin-hero--slim .gsg-ob-fin-hero-body { margin: 0; max-width: 64ch; font-size: 16px; }
.gsg-ob-fin-hero--slim .gsg-ob-fin-hero-eyebrow { margin-bottom: 8px; }
/* === END === */

/* === CLAPP CHARTS + MOTION v1 === */
/* SVG score gauge, sparklines, activity heatmap, deadline density strip, pulse/sheen/drift. */

/* ---- Compliance score gauge (donut) ---- */
.gsg-ob-gauge {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gsg-ob-gauge-svg { width: 100%; height: 100%; display: block; }
.gsg-ob-gauge-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.gsg-ob-gauge-num {
  font-family: "Mona Sans", sans-serif;
  font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  color: #0d2624; margin: 0;
}
.gsg-ob-gauge-unit {
  font-size: 13px; font-weight: 600; color: #5a7566;
  margin: 2px 0 0; letter-spacing: 0.02em;
}
.gsg-ob-gauge-sub {
  font-size: 11px; font-weight: 600; color: #143425;
  margin: 6px 0 0; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Two-column compliance panel: gauge + sparkline side-by-side */
.gsg-ob-compliance-inner {
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: center;
  padding: 6px 0 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e8ebe2;
}
.gsg-ob-compliance-trend { min-width: 0; }
.gsg-ob-compliance-trend .gsg-ob-spark { width: 100%; max-width: 240px; }
@media (max-width: 620px) {
  .gsg-ob-compliance-inner { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Sparkline ---- */
.gsg-ob-spark { display: block; }

/* ---- Business tile sparkline slot ---- */
.gsg-ob-biz-tile-spark {
  padding: 6px 0 0;
  margin: -4px 0 0;
}
.gsg-ob-biz-tile-spark .gsg-ob-spark { width: 100%; height: 36px; }

/* ---- Activity heatmap ---- */
.gsg-ob-heat-wrap { display: flex; flex-direction: column; gap: 10px; }
.gsg-ob-heat { display: block; max-width: 100%; height: auto; }
.gsg-ob-heat-cell { transition: opacity 0.2s ease; }
.gsg-ob-heat-cell:hover { opacity: 0.75; cursor: pointer; }
.gsg-ob-heat-l0 { fill: #e8ebe2; }
.gsg-ob-heat-l1 { fill: #c5cfb0; }
.gsg-ob-heat-l2 { fill: #9eae82; }
.gsg-ob-heat-l3 { fill: #5a7566; }
.gsg-ob-heat-l4 { fill: #143425; }
.gsg-ob-heat-legend {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #5a7566;
  justify-content: flex-end;
}
.gsg-ob-heat-legend .gsg-ob-heat-cell {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
}
.gsg-ob-heat-legend span:not(.gsg-ob-heat-cell) { margin: 0 4px; }

/* ---- Deadline density strip ---- */
.gsg-ob-density {
  padding: 10px 0 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e8ebe2;
}
.gsg-ob-density-bars {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
  align-items: end;
  height: 72px;
}
.gsg-ob-density-bar {
  position: relative;
  background: #ADB295; border-radius: 4px;
  min-height: 4px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gsg-ob-density-bar:hover { transform: scaleY(1.08); }
.gsg-ob-density-bar.is-watch { background: #8a6a2f; }
.gsg-ob-density-bar.is-urgent { background: #143425; }
.gsg-ob-density-count {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: #0d2624;
}
.gsg-ob-density-axis {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 10px; color: #5a7566; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---- Unread dot pulse ---- */
.gsg-ob-unread-dot {
  animation: gsgPulse 1.8s ease-in-out infinite;
}
@keyframes gsgPulse {
  0%   { box-shadow: 0 0 0 0 rgba(20, 52, 37, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(20, 52, 37, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 52, 37, 0); }
}

/* ---- Ad block subtle sheen (slow sweep) ---- */
.gsg-ob-fin-ad {
  position: relative;
  overflow: hidden;
}
.gsg-ob-fin-ad::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: gsgSheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gsgSheen {
  0%, 40% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ---- Financing hero orbs drift ---- */
.gsg-ob-fin-hero::before {
  animation: gsgOrbDriftA 18s ease-in-out infinite alternate;
}
.gsg-ob-fin-hero::after {
  animation: gsgOrbDriftB 22s ease-in-out infinite alternate;
}
@keyframes gsgOrbDriftA {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(40px, 30px); }
}
@keyframes gsgOrbDriftB {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-30px, -40px); }
}

/* ---- KPI value spans (keep count-up target on its own baseline) ---- */
.gsg-ob-kpi-value > span[data-countup] { display: inline; }

/* Reduced motion opt-out */
@media (prefers-reduced-motion: reduce) {
  .gsg-ob-unread-dot { animation: none; }
  .gsg-ob-fin-ad::after { animation: none; display: none; }
  .gsg-ob-fin-hero::before,
  .gsg-ob-fin-hero::after { animation: none; }
  .gsg-ob-gauge-arc,
  .gsg-ob-spark-line { transition: none !important; stroke-dashoffset: 0 !important; }
}

/* === END CLAPP CHARTS + MOTION v1 === */

/* === CLAPP VITALS BLOCK v1 === */
/* One-stop business-dashboard hero: gauge + trend + KPIs + density + heatmap. */

.gsg-ob-vitals {
  background: #fff;
  border: 1px solid #e8ebe2;
  border-radius: 26px;
  padding: clamp(28px, 4vw, 44px);
  margin: 0 0 28px;
}

.gsg-ob-vitals-head {
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8ebe2;
}
.gsg-ob-vitals-head .gsg-ob-eyebrow { margin: 0 0 6px; }
.gsg-ob-vitals-head .gsg-ob-panel-title {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 640; letter-spacing: -0.02em;
  color: #0d2624; margin: 0;
}

/* Top strip: gauge (auto) + sparkline (auto) + 3 KPI cards (1fr each) */
.gsg-ob-vitals-top {
  display: grid; gap: 28px;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  margin: 0 0 28px;
  padding: 0 0 28px;
  border-bottom: 1px solid #e8ebe2;
}
@media (max-width: 1080px) {
  .gsg-ob-vitals-top { grid-template-columns: auto 1fr; }
  .gsg-ob-vitals-top .gsg-ob-vitals-kpis { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .gsg-ob-vitals-top { grid-template-columns: 1fr; }
  .gsg-ob-vitals-top .gsg-ob-vitals-gauge,
  .gsg-ob-vitals-top .gsg-ob-vitals-spark { margin: 0 auto; }
}

.gsg-ob-vitals-gauge {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.gsg-ob-vitals-gauge--empty {
  width: 200px; height: 200px; border-radius: 50%;
  background: #f5f5f7; border: 2px dashed #ADB295;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.gsg-ob-vitals-trendlabel {
  font-family: "DM Sans", sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #143425; margin: 0;
  background: #e8ebe2; padding: 5px 12px; border-radius: 999px;
}

.gsg-ob-vitals-spark {
  min-width: 220px;
  padding: 0 16px;
  border-left: 1px solid #e8ebe2;
  border-right: 1px solid #e8ebe2;
}
.gsg-ob-vitals-spark .gsg-ob-spark { width: 100%; max-width: 300px; height: 60px; }
@media (max-width: 1080px) { .gsg-ob-vitals-spark { border-left: 0; padding-left: 0; } }
@media (max-width: 640px) { .gsg-ob-vitals-spark { border-right: 0; padding-right: 0; } }

.gsg-ob-vitals-kpis {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) { .gsg-ob-vitals-kpis { grid-template-columns: 1fr; } }
.gsg-ob-vitals-kpi {
  background: #f5f5f7;
  border-radius: 16px;
  padding: 18px 20px;
}
.gsg-ob-vitals-kpi .gsg-ob-kpi-value {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  color: #0d2624; margin: 4px 0 6px;
}

/* Row wrapper for density + heatmap */
.gsg-ob-vitals-row {
  padding: 20px 0 0;
  margin: 20px 0 0;
  border-top: 1px solid #e8ebe2;
}
.gsg-ob-vitals-row:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.gsg-ob-vitals-row-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin: 0 0 14px;
}
.gsg-ob-vitals-row-head .gsg-ob-eyebrow { margin: 0; }

/* Make the heatmap scrollable on narrow viewports */
.gsg-ob-vitals-row .gsg-ob-heat-wrap { overflow-x: auto; }
.gsg-ob-vitals-row .gsg-ob-heat { max-width: none; }

/* === END CLAPP VITALS BLOCK v1 === */

/* === CLAPP VITALS v1.1 — 2-col top, KPIs as own row === */
.gsg-ob-vitals-top {
  grid-template-columns: auto 1fr !important;
}
@media (max-width: 640px) {
  .gsg-ob-vitals-top { grid-template-columns: 1fr !important; }
}
/* === END === */

/* === CLAPP VITALS TREND FILL + VENDOR MODAL v1 === */

/* Let the 90-day sparkline fill the full remaining width of the vitals top row */
.gsg-ob-vitals-spark { flex: 1; min-width: 0; }
.gsg-ob-vitals-spark .gsg-ob-spark {
  width: 100%;
  max-width: none !important;
  height: auto;
  display: block;
}

/* Hide the removed cert footer even if stale CSS lingers */
.gsg-ob-vendor-meta { display: none !important; }

/* Vendor card is now a button; normalize the press state */
.gsg-ob-vendor-card:focus-visible { outline: 2px solid #143425; outline-offset: 4px; border-radius: 20px; }

/* ---------- Vendor modal ---------- */
.gsg-ob-vendor-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gsg-ob-vendor-modal.is-open { opacity: 1; }
.gsg-ob-vmod-scrim {
  position: absolute; inset: 0;
  background: rgba(13, 38, 36, 0.6);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  cursor: pointer;
}
.gsg-ob-vmod-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 720px;
  max-height: calc(100vh - 64px);
  overflow: auto;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(13, 38, 36, 0.4);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gsg-ob-vendor-modal.is-open .gsg-ob-vmod-card { transform: translateY(0) scale(1); }

.gsg-ob-vmod-banner {
  position: relative;
  aspect-ratio: 2.4 / 1;
  background-size: cover; background-position: center;
  border-radius: 26px 26px 0 0;
}
.gsg-ob-vmod-banner .gsg-ob-vendor-cert-badge { top: 20px; left: 20px; }

.gsg-ob-vmod-close {
  position: absolute; top: 16px; right: 16px;
  z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95); border: 0;
  font-size: 22px; color: #0d2624; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(13, 38, 36, 0.2);
  transition: background 0.15s ease, transform 0.15s ease;
}
.gsg-ob-vmod-close:hover { background: #fff; transform: scale(1.05); }

.gsg-ob-vmod-body {
  padding: clamp(28px, 4vw, 44px);
}
.gsg-ob-vmod-title {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(28px, 3vw, 36px); font-weight: 640; letter-spacing: -0.02em;
  color: #0d2624; margin: 0 0 10px;
}
.gsg-ob-vmod-blurb { font-size: 16px; line-height: 1.6; color: #274543; margin: 0 0 14px; }

.gsg-ob-vmod-products {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.gsg-ob-vmod-product {
  display: flex; flex-direction: column;
  background: #f5f5f7;
  border: 1px solid #e8ebe2;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.gsg-ob-vmod-product:hover {
  background: #fff;
  border-color: #ADB295;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(13,38,36,0.08);
}
.gsg-ob-vmod-product-img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #ADB295;
  border-bottom: 1px solid #e8ebe2;
}
.gsg-ob-vmod-product-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.gsg-ob-vmod-product-name {
  font-family: "Mona Sans", sans-serif;
  font-size: 15px; font-weight: 640; letter-spacing: -0.01em;
  color: #0d2624; margin: 0;
}
.gsg-ob-vmod-product-blurb {
  font-size: 13.5px; line-height: 1.5;
  color: #274543; margin: 0;
}

.gsg-ob-vmod-footer {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e8ebe2;
}

/* === END === */

/* === CLAPP UNIFIED VAULT HIERARCHY v1 === */
/* Jurisdiction-organized document vault on portal/documents.html. */

.gsg-ob-vault-filters {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 22px;
  padding: 20px 22px;
  margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.gsg-ob-vault-level-filter,
.gsg-ob-vault-biz-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.gsg-ob-vault-level-filter .gsg-ob-eyebrow,
.gsg-ob-vault-biz-filter .gsg-ob-eyebrow { white-space: nowrap; }
.gsg-ob-vault-search .gsg-ob-input { min-height: 48px; font-size: 14px; }

.gsg-ob-vault-tree { display: flex; flex-direction: column; gap: 24px; }

.gsg-ob-vault-level {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 22px;
  padding: 0;
  overflow: hidden;
}
.gsg-ob-vault-level-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0;
  padding: 16px clamp(20px, 3vw, 32px);
  background: #e8ebe2;
  border-bottom: 1px solid #d8decf;
}
.gsg-ob-vault-level-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 22px; font-weight: 640; letter-spacing: -0.02em;
  color: #0d2624; margin: 0;
}
.gsg-ob-vault-level-count {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5a7566;
}

.gsg-ob-vault-agency {
  margin: 0;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
  border-top: 1px solid #eef1e8;
}
.gsg-ob-vault-agency:first-of-type { border-top: 0; }
.gsg-ob-vault-agency-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px;
}
.gsg-ob-vault-agency-title {
  font-family: "DM Sans", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #274543; margin: 0;
}
.gsg-ob-vault-agency-count {
  font-size: 11px; font-weight: 700; color: #5a7566;
  background: #e8ebe2; padding: 2px 10px; border-radius: 999px;
}

.gsg-ob-vault-doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }

.gsg-ob-vault-doc {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: #f5f5f7;
  border-radius: 12px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.gsg-ob-vault-doc:hover { background: #fff; transform: translateX(2px); box-shadow: 0 4px 14px rgba(13, 38, 36, 0.05); }
.gsg-ob-vault-doc-meta { flex: 1; min-width: 0; }
.gsg-ob-vault-doc-name {
  font-size: 14px; font-weight: 600; color: #0d2624;
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gsg-ob-vault-doc-sub {
  font-size: 12px; color: #5a7566; margin: 2px 0 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.gsg-ob-vault-doc-action {
  background: transparent; border: 0; cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 13px; font-weight: 700; color: #143425;
  padding: 6px 10px; border-radius: 8px;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.gsg-ob-vault-doc-action:hover { background: #e8ebe2; }

/* Level-specific accents */
/* Level accents (left border) removed by request — keep selectors as no-op
   in case we want per-jurisdiction accents back later. */

/* ======================================================================
   CLAPP UNIFIED VAULT · BENTO GRID v1 — 3-column doc cards + preview modal
   ====================================================================== */
.gsg-ob-vault-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 0;
}
@media (max-width: 960px) {
  .gsg-ob-vault-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gsg-ob-vault-doc-grid { grid-template-columns: 1fr; }
}

.gsg-ob-vault-doc-card {
  display: flex; flex-direction: column;
  text-align: left;
  background: #f5f5f7;
  border: 1px solid #e8ebe2;
  border-radius: 18px;
  padding: 0;
  cursor: pointer;
  font: inherit; color: inherit;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.gsg-ob-vault-doc-card:hover {
  transform: translateY(-2px);
  border-color: #ADB295;
  background: #fff;
  box-shadow: 0 16px 36px rgba(13, 38, 36, 0.08);
}
.gsg-ob-vault-doc-card:focus-visible {
  outline: 2px solid #143425;
  outline-offset: 2px;
}

.gsg-ob-vault-doc-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #143425 0%, #274543 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gsg-ob-vault-doc-cover::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 20% 10%, rgba(173,178,149,0.35) 0%, transparent 55%);
  pointer-events: none;
}
.gsg-ob-vault-doc-cover-ext {
  position: relative;
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 720;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 18px rgba(0,0,0,0.25);
}
.gsg-ob-vault-doc-cover-kind {
  position: absolute; top: 12px; left: 12px;
}
/* Ext-specific color hints */
.gsg-ob-vault-doc-cover[data-ext="pdf"]  { background: linear-gradient(135deg, #7a2a1a 0%, #3b1610 100%); }
.gsg-ob-vault-doc-cover[data-ext="doc"],
.gsg-ob-vault-doc-cover[data-ext="docx"] { background: linear-gradient(135deg, #1e3a5f 0%, #0f1e33 100%); }
.gsg-ob-vault-doc-cover[data-ext="xls"],
.gsg-ob-vault-doc-cover[data-ext="xlsx"],
.gsg-ob-vault-doc-cover[data-ext="csv"]  { background: linear-gradient(135deg, #1f4f32 0%, #0d2419 100%); }
.gsg-ob-vault-doc-cover[data-ext="png"],
.gsg-ob-vault-doc-cover[data-ext="jpg"],
.gsg-ob-vault-doc-cover[data-ext="jpeg"] { background: linear-gradient(135deg, #5c3d72 0%, #2a1c3a 100%); }
.gsg-ob-vault-doc-cover[data-ext="zip"]  { background: linear-gradient(135deg, #6b5a1e 0%, #2e2710 100%); }

.gsg-ob-vault-doc-body {
  padding: 14px 16px 6px;
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.gsg-ob-vault-doc-body .gsg-ob-vault-doc-name {
  font-size: 14.5px; font-weight: 640; color: #0d2624;
  margin: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.gsg-ob-vault-doc-body .gsg-ob-vault-doc-sub {
  font-size: 12px; color: #5a7566; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsg-ob-vault-doc-cta {
  display: block; padding: 10px 16px 16px;
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px; font-weight: 700;
  color: #143425;
}

/* Preview modal — reuses vendor modal shell, tweaks the two-pane layout. */
.gsg-ob-doc-modal .gsg-ob-vmod-card {
  max-width: 880px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}
@media (max-width: 760px) {
  .gsg-ob-doc-modal .gsg-ob-vmod-card { grid-template-columns: 1fr; }
}
.gsg-ob-doc-preview-pane {
  background: #0d2624;
  padding: 36px 32px;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  position: relative;
}
.gsg-ob-doc-preview-pane[data-ext="pdf"]  { background: linear-gradient(135deg, #3b1610 0%, #0d2624 100%); }
.gsg-ob-doc-preview-pane[data-ext="doc"],
.gsg-ob-doc-preview-pane[data-ext="docx"] { background: linear-gradient(135deg, #0f1e33 0%, #0d2624 100%); }
.gsg-ob-doc-preview-pane[data-ext="xls"],
.gsg-ob-doc-preview-pane[data-ext="xlsx"],
.gsg-ob-doc-preview-pane[data-ext="csv"]  { background: linear-gradient(135deg, #0d2419 0%, #143425 100%); }
.gsg-ob-doc-preview-sheet {
  background: #fff;
  color: #0d2624;
  width: 100%;
  max-width: 280px;
  padding: 22px 22px 18px;
  border-radius: 10px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.2deg);
  font-family: "DM Sans", sans-serif;
}
.gsg-ob-doc-preview-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 14px;
}
.gsg-ob-doc-preview-badge {
  background: #143425; color: #fff;
  padding: 4px 10px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
}
.gsg-ob-doc-preview-sheet-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 14px; font-weight: 640; letter-spacing: -0.01em;
  margin: 0 0 2px; color: #0d2624;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gsg-ob-doc-preview-sheet-sub {
  font-size: 11px; color: #5a7566;
  margin: 0 0 14px;
}
.gsg-ob-doc-preview-sheet-lines {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 14px;
}
.gsg-ob-doc-preview-sheet-lines span {
  display: block; height: 6px;
  background: #e8ebe2;
  border-radius: 2px;
  width: 100%;
}
.gsg-ob-doc-preview-sheet-foot {
  font-size: 10px; color: #8a9a8f;
  text-align: center;
  margin: 0; padding-top: 10px;
  border-top: 1px solid #e8ebe2;
}
.gsg-ob-doc-preview-body {
  padding: 36px 36px 32px !important;
  display: flex; flex-direction: column;
  min-width: 0;
}
.gsg-ob-doc-preview-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px;
  margin: 0 0 24px;
}
.gsg-ob-doc-preview-meta > div { min-width: 0; }
.gsg-ob-doc-preview-meta dt {
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #5a7566; margin: 0 0 2px;
}
.gsg-ob-doc-preview-meta dd {
  font-size: 13.5px; font-weight: 500;
  color: #0d2624; margin: 0;
  overflow-wrap: anywhere;
}
/* === END CLAPP UNIFIED VAULT · BENTO GRID === */

/* === END === */

/* === CLAPP HERO VIDEO + SCROLL SCRUB v1 === */
/* Looping hero video behind .clapp-hero content, plus scroll-scrubbed editorial video. */

.gsg-hero-has-video { position: relative; overflow: hidden; }
.gsg-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Keep the scrim/tint on top of the video for legibility */
.gsg-hero-has-video .clapp-hero-image,
.gsg-hero-has-video .clapp-hero-urgent-image { opacity: 0;  }
.gsg-hero-has-video .clapp-hero-tint,
.gsg-hero-has-video .clapp-hero-bg { position: relative; z-index: 1; }
.gsg-hero-has-video .clapp-hero-inner { position: relative; z-index: 2; }

/* Scroll-scrubbed editorial break (legacy — replaced by autoplay-loop
 * variant below; kept for any pages still using the scrub pattern) */
.gsg-scroll-scrub { position: relative; overflow: hidden; }
.gsg-scroll-scrub-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Autoplay-loop video as an editorial-break background — dropped the
 * scroll-scrub cost entirely. Behaves like a silent bg video. */
.clapp-editorial-break-video { position: relative; overflow: hidden; }
.clapp-editorial-break-videobg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.clapp-editorial-break-video .clapp-parallax-overlay { position: absolute; inset: 0; z-index: 1; }
.clapp-editorial-break-video .clapp-editorial-caption { z-index: 2; }
/* Keep the overlay stacking above the video (but not above the caption)
 * without clobbering the caption's original absolute bottom-anchored positioning. */
.gsg-scroll-scrub .clapp-parallax-overlay { position: absolute; inset: 0; z-index: 1; }
.gsg-scroll-scrub .clapp-editorial-caption { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .gsg-hero-video { display: none; }
  .gsg-hero-has-video .clapp-hero-image { opacity: 1; }
}
/* === END === */

/* === CLAPP VENDOR PORTAL v1 === */
/* Mirrors the client portal visual system with vendor-specific widgets. */

/* Lead status chips */
.gsg-ob-vendor-lead-status {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: #e8ebe2; color: #274543;
  white-space: nowrap;
}
.gsg-ob-vendor-lead-status.is-new       { background: #fdf3ec; color: #8a4a25; }
.gsg-ob-vendor-lead-status.is-contacted { background: #e8ebe2; color: #143425; }
.gsg-ob-vendor-lead-status.is-quoted    { background: #ADB295; color: #0d2624; }
.gsg-ob-vendor-lead-status.is-won       { background: #143425; color: #fff; }
.gsg-ob-vendor-lead-status.is-lost      { background: #f5f5f7; color: #8a4a25; border: 1px dashed #c46345; }

/* Products editor — stacked cards */
.gsg-ob-vendor-product-list { display: flex; flex-direction: column; gap: 14px; }
.gsg-ob-vendor-product {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 20px 22px; position: relative;
  display: flex; flex-direction: column; gap: 10px;
}
.gsg-ob-vendor-product-head { display: flex; gap: 10px; align-items: center; }
.gsg-ob-vendor-product-name { flex: 1; font-weight: 600; }
.gsg-ob-vendor-product-blurb { min-height: 74px; }
.gsg-ob-vendor-product-del {
  background: transparent; border: 0; cursor: pointer;
  font-size: 20px; color: #8a4a25; padding: 4px 10px; border-radius: 8px;
}
.gsg-ob-vendor-product-del:hover { background: #fdf3ec; }
.gsg-ob-vendor-product-save { align-self: flex-start; }

/* Lead inbox — card grid */
.gsg-ob-vendor-lead-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.gsg-ob-vendor-lead {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 18px;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  border-left: 4px solid #ADB295;
}
.gsg-ob-vendor-lead:has(.gsg-ob-vendor-lead-status.is-new)       { border-left-color: #8a4a25; }
.gsg-ob-vendor-lead:has(.gsg-ob-vendor-lead-status.is-quoted)    { border-left-color: #ADB295; }
.gsg-ob-vendor-lead:has(.gsg-ob-vendor-lead-status.is-won)       { border-left-color: #143425; }
.gsg-ob-vendor-lead:has(.gsg-ob-vendor-lead-status.is-lost)      { border-left-color: #c46345; opacity: 0.85; }

.gsg-ob-vendor-lead-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gsg-ob-vendor-lead-biz {
  font-family: "Mona Sans", sans-serif;
  font-size: 19px; font-weight: 640; letter-spacing: -0.015em;
  color: #0d2624; margin: 0;
}
.gsg-ob-vendor-lead-detail {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
  margin: 0; padding: 0;
  font-size: 13px; line-height: 1.5;
}
.gsg-ob-vendor-lead-detail > div { display: flex; flex-direction: column; }
.gsg-ob-vendor-lead-detail dt {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5a7566; margin: 0 0 2px;
}
.gsg-ob-vendor-lead-detail dd { color: #0d2624; margin: 0; font-weight: 500; }
.gsg-ob-vendor-lead-notes {
  font-size: 13px; color: #274543; line-height: 1.55;
  background: #f5f5f7; border-radius: 12px; padding: 12px 14px; margin: 0;
}
.gsg-ob-vendor-lead-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid #e8ebe2;
}
@media (max-width: 440px) {
  .gsg-ob-vendor-lead-detail { grid-template-columns: 1fr; }
}

/* === END CLAPP VENDOR PORTAL v1 === */

/* === CLAPP VENDOR PRODUCT FORM v2 (image + full fields) === */

.gsg-ob-vendor-product-list { display: flex; flex-direction: column; gap: 18px; }

.gsg-ob-vendor-product {
  background: #fff;
  border: 1px solid #e8ebe2;
  border-radius: 20px;
  padding: clamp(24px, 3vw, 32px);
  position: relative;
  box-shadow: 0 1px 0 rgba(13, 38, 36, 0.04);
}

/* Top row: image | identity fields | delete */
.gsg-ob-vp-top {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 24px;
  align-items: start;
}
@media (max-width: 760px) {
  .gsg-ob-vp-top { grid-template-columns: 1fr; }
  .gsg-ob-vp-top .gsg-ob-vendor-product-del { position: absolute; top: 16px; right: 20px; }
}

.gsg-ob-vp-image {
  display: flex; flex-direction: column; gap: 10px;
}
.gsg-ob-vp-image-preview {
  width: 220px; max-width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: #f5f5f7;
  border: 1px solid #e8ebe2;
  display: block;
}
.gsg-ob-vp-image-empty {
  width: 220px; max-width: 100%; aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: #f5f5f7;
  border: 1px dashed #ADB295;
  display: flex; align-items: center; justify-content: center;
  color: #5a7566; font-size: 13px;
}
.gsg-ob-vp-image-btn {
  font-size: 13px; padding: 10px 16px; min-height: 40px;
  text-align: center; justify-content: center;
  cursor: pointer;
}

.gsg-ob-vp-identity { min-width: 0; }

.gsg-ob-vendor-product-del {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; color: #8a4a25; padding: 4px 10px; border-radius: 8px;
  align-self: start;
}
.gsg-ob-vendor-product-del:hover { background: #fdf3ec; }

/* Pricing trio */
.gsg-ob-vp-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 720px) { .gsg-ob-vp-pricing { grid-template-columns: 1fr; } }

/* Tighten input heights inside the product form a touch */
.gsg-ob-vendor-product .gsg-ob-input { min-height: 48px; padding: 12px 16px; font-size: 14px; }
.gsg-ob-vendor-product .gsg-ob-textarea { min-height: 80px; padding: 12px 16px; font-size: 14px; }
.gsg-ob-vendor-product .gsg-ob-field-label { font-size: 13px; margin-bottom: 6px; }

/* Save button aligned right */
.gsg-ob-vp-save { min-height: 44px; padding: 10px 22px; }

/* === END === */

/* === CLAPP VENDOR DREAM v1 === */
/* Gradient hero, pipeline funnel, benefits grid, motivation banner, asset gallery. */

/* Vendor hero — ink→sage gradient with big offset number */
.gsg-ob-vend-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #0d2624 0%, #143425 55%, #274543 100%);
  color: #fff;
  border-radius: 26px;
  padding: clamp(32px, 5vw, 56px);
  margin: 0 0 28px;
}
.gsg-ob-vend-hero::before,
.gsg-ob-vend-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); z-index: -1; pointer-events: none; }
.gsg-ob-vend-hero::before { top: -80px; right: -60px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(173,178,149,0.45) 0%, transparent 70%); animation: gsgOrbDriftA 18s ease-in-out infinite alternate; }
.gsg-ob-vend-hero::after  { bottom: -100px; left: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(173,178,149,0.22) 0%, transparent 70%); animation: gsgOrbDriftB 22s ease-in-out infinite alternate; }
.gsg-ob-vend-hero-inner { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 1.4fr 1fr; align-items: center; }
@media (max-width: 880px) { .gsg-ob-vend-hero-inner { grid-template-columns: 1fr; } }
.gsg-ob-vend-hero-title {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(36px, 4.4vw, 56px); font-weight: 680; letter-spacing: -0.028em; line-height: 1.05;
  color: #fff; margin: 0 0 18px;
}
.gsg-ob-vend-hero-title em { font-style: normal; color: #ADB295; }
.gsg-ob-vend-hero-body { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: rgba(255,255,255,0.85); max-width: 56ch; margin: 0 0 24px; }
.gsg-ob-vend-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.gsg-ob-vend-hero-stat {
  padding: 24px 28px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}
.gsg-ob-vend-hero-stat-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ADB295; margin: 0 0 6px; }
.gsg-ob-vend-hero-stat-num { font-family: "Mona Sans", sans-serif; font-size: clamp(36px, 4vw, 52px); font-weight: 700; letter-spacing: -0.028em; color: #fff; margin: 0 0 4px; line-height: 1; }
.gsg-ob-vend-hero-stat-sub { font-size: 13px; color: rgba(255,255,255,0.72); margin: 0; }

/* Motivation banner — contextual, sage-washed, subtle glow */
.gsg-ob-vend-motivate {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center;
  background: linear-gradient(135deg, #e8ebe2 0%, #f5f5f7 100%);
  border: 1px solid #ADB295;
  border-left: 4px solid #143425;
  border-radius: 18px;
  padding: 18px 22px;
  margin: 0 0 28px;
  position: relative; overflow: hidden;
}
.gsg-ob-vend-motivate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: gsgSheen 12s ease-in-out infinite;
  pointer-events: none;
}
.gsg-ob-vend-motivate-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #143425; color: #ADB295;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Mona Sans", sans-serif; font-size: 20px; font-weight: 700;
  flex-shrink: 0;
}
.gsg-ob-vend-motivate-body { min-width: 0; }
.gsg-ob-vend-motivate-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #143425; margin: 0 0 4px; }
.gsg-ob-vend-motivate-title { font-family: "Mona Sans", sans-serif; font-size: 17px; font-weight: 640; letter-spacing: -0.015em; color: #0d2624; margin: 0 0 4px; }
.gsg-ob-vend-motivate-text { font-size: 13.5px; line-height: 1.5; color: #274543; margin: 0; max-width: 72ch; }
.gsg-ob-vend-motivate-cta { white-space: nowrap; padding: 10px 18px; font-size: 13px; }
@media (max-width: 720px) {
  .gsg-ob-vend-motivate { grid-template-columns: 44px 1fr; }
  .gsg-ob-vend-motivate-cta { grid-column: 1 / -1; justify-self: start; }
}

/* Vendor KPI strip — 5-wide on desktop */
.gsg-ob-vend-kpis {
  display: grid; gap: 14px;
  grid-template-columns: repeat(5, 1fr);
  background: #fff; border: 1px solid #e8ebe2; border-radius: 22px;
  padding: 24px;
  margin: 0 0 24px;
}
@media (max-width: 1080px) { .gsg-ob-vend-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .gsg-ob-vend-kpis { grid-template-columns: 1fr 1fr; } }
.gsg-ob-vend-kpis .gsg-ob-kpi { padding: 0; border: 0; }
.gsg-ob-vend-kpis .gsg-ob-kpi + .gsg-ob-kpi { border-left: 1px solid #e8ebe2; padding-left: 14px; }
@media (max-width: 1080px) { .gsg-ob-vend-kpis .gsg-ob-kpi + .gsg-ob-kpi { border-left: 0; padding-left: 0; } }

/* Pipeline funnel — 5-column bar chart with counts + $ */
.gsg-ob-vend-funnel {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  align-items: end;
  padding: 20px 0 10px;
  min-height: 220px;
}
@media (max-width: 720px) { .gsg-ob-vend-funnel { grid-template-columns: repeat(5, 1fr); gap: 8px; min-height: 180px; } }
.gsg-ob-vend-funnel-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; position: relative; }
.gsg-ob-vend-funnel-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5a7566; order: -1; }
.gsg-ob-vend-funnel-bar { width: 100%; max-width: 80px; border-radius: 10px 10px 0 0; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); transition: transform 0.2s ease; }
.gsg-ob-vend-funnel-col:hover .gsg-ob-vend-funnel-bar { transform: scaleY(1.03); }
.gsg-ob-vend-funnel-count {
  font-family: "Mona Sans", sans-serif;
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  color: #0d2624;
}
.gsg-ob-vend-funnel-value { font-size: 12px; font-weight: 600; color: #143425; text-align: center; }
.gsg-ob-vend-funnel-sub { display: block; font-size: 11px; color: #5a7566; font-weight: 500; margin-top: 2px; }

/* Benefits grid — 4 tiles */
.gsg-ob-vend-benefits {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) { .gsg-ob-vend-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .gsg-ob-vend-benefits { grid-template-columns: 1fr; } }
.gsg-ob-vend-benefit {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 22px 22px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.gsg-ob-vend-benefit:hover { background: #fff; border-color: #ADB295; transform: translateY(-2px); }
.gsg-ob-vend-benefit-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: #143425; color: #ADB295;
  font-family: "Mona Sans", sans-serif; font-size: 18px; font-weight: 800;
  margin-bottom: 14px;
}
.gsg-ob-vend-benefit-title { font-family: "Mona Sans", sans-serif; font-size: 16px; font-weight: 640; letter-spacing: -0.015em; color: #0d2624; margin: 0 0 6px; }
.gsg-ob-vend-benefit-body { font-size: 13.5px; line-height: 1.55; color: #274543; margin: 0; }

/* Marketing asset gallery */
.gsg-ob-vend-asset-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.gsg-ob-vend-asset {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 16px 18px;
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 16px;
  text-decoration: none; color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.gsg-ob-vend-asset:hover { background: #fff; border-color: #ADB295; transform: translateY(-2px); color: inherit; }
.gsg-ob-vend-asset-icon {
  width: 52px; height: 64px; border-radius: 8px;
  background: #143425; color: #ADB295;
  display: flex; align-items: center; justify-content: center;
  font-family: "Mona Sans", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  position: relative;
}
.gsg-ob-vend-asset-icon[data-kind="pdf"]  { background: #c03a2b; color: #fff; }
.gsg-ob-vend-asset-icon[data-kind="zip"]  { background: #5a5a5a; color: #fff; }
.gsg-ob-vend-asset-icon[data-kind="pptx"] { background: #d97757; color: #fff; }
.gsg-ob-vend-asset-icon[data-kind="code"] { background: #274543; color: #ADB295; }
.gsg-ob-vend-asset-title { font-family: "Mona Sans", sans-serif; font-size: 15px; font-weight: 640; letter-spacing: -0.01em; color: #0d2624; margin: 0; }
.gsg-ob-vend-asset-desc { font-size: 12.5px; line-height: 1.45; color: #5a7566; margin: 4px 0 0; }
.gsg-ob-vend-asset-meta { font-size: 11px; color: #5a7566; margin: 4px 0 0; letter-spacing: 0.02em; }
.gsg-ob-vend-asset-cta { font-size: 13px; font-weight: 700; color: #143425; white-space: nowrap; }

/* === END === */

/* === CLAPP VENDOR CATALOG CARDS v1 === */
.gsg-ob-vend-catalog-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.gsg-ob-vend-catalog-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e8ebe2; border-radius: 18px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gsg-ob-vend-catalog-card:hover { transform: translateY(-3px); border-color: #ADB295; box-shadow: 0 14px 36px rgba(13,38,36,0.1); color: inherit; }

.gsg-ob-vend-catalog-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f5f5f7;
  background-size: cover; background-position: center;
}
.gsg-ob-vend-catalog-type {
  position: absolute; bottom: 12px; left: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #0d2624;
  background: rgba(255,255,255,0.95);
  padding: 4px 10px; border-radius: 999px;
}
.gsg-ob-vend-catalog-feature {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: #143425; color: #ADB295;
  padding: 4px 10px; border-radius: 999px;
}

.gsg-ob-vend-catalog-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gsg-ob-vend-catalog-name {
  font-family: "Mona Sans", sans-serif;
  font-size: 17px; font-weight: 640; letter-spacing: -0.015em;
  color: #0d2624; margin: 0;
}
.gsg-ob-vend-catalog-sub { font-size: 12px; color: #143425; font-weight: 600; margin: 0; letter-spacing: -0.005em; }
.gsg-ob-vend-catalog-desc { font-size: 13px; line-height: 1.5; color: #5a7566; margin: 4px 0 0; flex: 1; }

.gsg-ob-vend-catalog-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 14px 0 0; margin-top: 8px;
  border-top: 1px solid #e8ebe2;
}
.gsg-ob-vend-catalog-stats > div { text-align: left; }
.gsg-ob-vend-catalog-stat-num {
  font-family: "Mona Sans", sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  color: #0d2624; margin: 0;
}
.gsg-ob-vend-catalog-stat-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5a7566; margin: 4px 0 0;
}
/* === END === */

/* === CLAPP VENDOR TILE CLICKABLE v1 === */
.gsg-ob-vendor-tile {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  padding: 12px 14px;
  background: #f5f5f7;
  border-radius: 12px;
}
.gsg-ob-vendor-tile:hover { background: #e8ebe2; transform: translateX(2px); color: inherit; }
.gsg-ob-vendor-tile > p { flex: 1; min-width: 0; }
.gsg-ob-vendor-tile-arrow {
  font-size: 13px; font-weight: 700; color: #143425;
  opacity: 0.55; transition: opacity 0.15s ease, transform 0.15s ease;
}
.gsg-ob-vendor-tile:hover .gsg-ob-vendor-tile-arrow { opacity: 1; transform: translateX(2px); }
/* === END === */

/* === CLAPP PER-BIZ VAULT PANEL v1 === */
.gsg-ob-biz-vault {
  display: grid; gap: 24px;
  grid-template-columns: 1fr 1fr;
}
.gsg-ob-biz-vault-col { min-width: 0; }
.gsg-ob-biz-vault-col + .gsg-ob-biz-vault-col { padding-left: 24px; border-left: 1px solid #e8ebe2; }
@media (max-width: 720px) {
  .gsg-ob-biz-vault { grid-template-columns: 1fr; gap: 18px; }
  .gsg-ob-biz-vault-col + .gsg-ob-biz-vault-col { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid #e8ebe2; }
}
/* === END === */

/* ============================================================ */
/* CLAPP BROKER LOOP v1 — Referral Inbox + Introductions + Pay   */
/* ============================================================ */

.gsg-ob-vend-inbox {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  margin: 0 0 32px;
}
.gsg-ob-vend-referral {
  background: linear-gradient(180deg, #fff 0%, #f5f5f7 100%);
  border: 1px solid #ADB295;
  border-radius: 18px;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.gsg-ob-vend-referral.is-warn { border-color: #d4a84e; box-shadow: 0 0 0 3px rgba(212,168,78,0.12); }
.gsg-ob-vend-referral.is-urgent {
  border-color: #143425;
  box-shadow: 0 0 0 3px rgba(217,119,87,0.18);
  animation: gsgPulseRef 2.6s ease-in-out infinite;
}
@keyframes gsgPulseRef {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217,119,87,0.18); }
  50% { box-shadow: 0 0 0 6px rgba(217,119,87,0.08); }
}
.gsg-ob-vend-referral-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.gsg-ob-vend-referral-title {
  font-family: "Mona Sans", sans-serif;
  font-size: 18px; font-weight: 640; letter-spacing: -0.01em;
  color: #0d2624; margin: 0;
}
.gsg-ob-vend-referral-timer {
  background: #e8ebe2; color: #274543;
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 6px 12px; border-radius: 999px;
  white-space: nowrap;
}
.gsg-ob-vend-referral-timer.is-warn { background: #f6e7c5; color: #6b4a15; }
.gsg-ob-vend-referral-timer.is-urgent { background: #F2D8C9; color: #7a3818; }
.gsg-ob-vend-referral-privacy {
  font-size: 11.5px; color: #5a7566;
  font-style: italic; margin: 0;
  padding: 10px 12px;
  background: #e8ebe2;
  border-radius: 10px;
}
.gsg-ob-vend-referral-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
}
.gsg-ob-vend-lead-thread {
  display: flex; flex-direction: column; gap: 8px;
  margin: 8px 0 0; padding: 10px 12px;
  background: #f5f5f7; border-radius: 10px;
}
.gsg-ob-vend-lead-comment { font-size: 12.5px; color: #274543; }
.gsg-ob-vend-lead-comment-from { font-weight: 700; color: #143425; margin-right: 8px; }
.gsg-ob-vend-lead-comment-date { color: #5a7566; font-size: 11px; }
.gsg-ob-vend-lead-comment p { margin: 2px 0 0; }

/* My Introductions strip (client side) */
.gsg-ob-intro-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.gsg-ob-intro-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e8ebe2;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gsg-ob-intro-card:hover { border-color: #ADB295; box-shadow: 0 10px 28px rgba(13,38,36,0.06); }
.gsg-ob-intro-card-img {
  aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
  background-color: #ADB295;
}
.gsg-ob-intro-card-body {
  padding: 14px 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.gsg-ob-intro-card-name {
  font-family: "Mona Sans", sans-serif;
  font-size: 15px; font-weight: 640; letter-spacing: -0.01em;
  color: #0d2624; margin: 0;
}
.gsg-ob-intro-card-sub { font-size: 12px; color: #5a7566; margin: 0; }
.gsg-ob-intro-card .gsg-ob-doc-tag { align-self: flex-start; margin-top: 4px; }
.gsg-ob-intro-card-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.gsg-ob-intro-card-actions .gsg-ob-link { font-size: 12px; cursor: pointer; }

/* === END BROKER LOOP v1 === */

/* ============================================================ */
/* CLAPP CONSULTING LOOP v1 — messages / tasks / billing / prefs */
/* ============================================================ */

.gsg-ob-msg-threads { display: flex; flex-direction: column; gap: 10px; }
.gsg-ob-msg-thread-card {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 18px 20px; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gsg-ob-msg-thread-card:hover { border-color: #ADB295; box-shadow: 0 10px 24px rgba(13,38,36,0.06); }
.gsg-ob-msg-thread-card.is-unread { border-color: #143425; background: linear-gradient(180deg, #fff 0%, #f8faf3 100%); }
.gsg-ob-msg-thread-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0 0 4px; }
.gsg-ob-msg-thread-from { font-size: 12px; font-weight: 700; color: #143425; margin: 0; }
.gsg-ob-msg-thread-subject { font-family: "Mona Sans", sans-serif; font-size: 16px; font-weight: 640; letter-spacing: -0.01em; color: #0d2624; margin: 2px 0 0; }
.gsg-ob-msg-thread-preview { font-size: 13px; color: #5a7566; margin: 6px 0 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gsg-ob-msg-thread-foot { font-size: 11px; color: #5a7566; margin: 8px 0 0; }
.gsg-ob-msg-thread-meta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.gsg-ob-msg-thread-date { font-size: 11px; color: #5a7566; }

.gsg-ob-sla-chip { background: #e8ebe2; color: #274543; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.04em; }
.gsg-ob-sla-chip.is-warn { background: #f6e7c5; color: #6b4a15; }
.gsg-ob-sla-chip.is-late { background: #F2D8C9; color: #7a3818; }

.gsg-ob-msg-bubble { padding: 14px 16px; border-radius: 14px; margin: 0 0 10px; max-width: 92%; }
.gsg-ob-msg-bubble.is-inbound { background: #f5f5f7; align-self: flex-start; }
.gsg-ob-msg-bubble.is-outbound { background: #143425; color: #fff; margin-left: auto; }
.gsg-ob-msg-bubble.is-outbound .gsg-ob-msg-bubble-head span { color: rgba(255,255,255,0.75); }
.gsg-ob-msg-bubble-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: #5a7566; margin: 0 0 4px; }
.gsg-ob-msg-bubble p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.gsg-ob-msg-atts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.gsg-ob-msg-att { background: rgba(0,0,0,0.06); color: inherit; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.gsg-ob-msg-bubble.is-outbound .gsg-ob-msg-att { background: rgba(255,255,255,0.18); }

.gsg-ob-prefs-matrix { display: flex; flex-direction: column; gap: 2px; background: #e8ebe2; padding: 2px; border-radius: 12px; overflow: hidden; }
.gsg-ob-prefs-head, .gsg-ob-prefs-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2px; }
.gsg-ob-prefs-head > span { background: #274543; color: #fff; padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.gsg-ob-prefs-head > span:first-child { text-align: left; }
.gsg-ob-prefs-row { background: #e8ebe2; }
.gsg-ob-prefs-label { background: #fff; padding: 14px 16px; font-size: 14px; font-weight: 600; color: #0d2624; display: flex; align-items: center; }
.gsg-ob-prefs-cell { background: #fff; padding: 14px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.gsg-ob-prefs-cell input { display: none; }
.gsg-ob-prefs-cell span { width: 22px; height: 22px; border: 2px solid #ADB295; border-radius: 7px; transition: background 0.15s ease, border-color 0.15s ease; }
.gsg-ob-prefs-cell input:checked + span {
  background: #143425; border-color: #143425;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 70% 70%; background-position: center; background-repeat: no-repeat;
}

.gsg-ob-plan-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gsg-ob-plan-card { background: #fff; border: 1px solid #e8ebe2; border-radius: 16px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.gsg-ob-plan-card.is-active { border-color: #143425; background: linear-gradient(180deg, #fff 0%, #f8faf3 100%); }
.gsg-ob-plan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gsg-ob-plan-name { font-family: "Mona Sans", sans-serif; font-size: 17px; font-weight: 640; margin: 0; color: #0d2624; }
.gsg-ob-plan-price { font-family: "Mona Sans", sans-serif; font-size: 28px; font-weight: 640; color: #0d2624; margin: 0; }
.gsg-ob-plan-price span { font-size: 13px; font-weight: 500; color: #5a7566; margin-left: 4px; }
.gsg-ob-plan-blurb { font-size: 13px; color: #5a7566; margin: 0 0 6px; line-height: 1.45; }

/* === END CONSULTING LOOP v1 === */

/* ============================================================ */
/* CLAPP DEPTH v1 — calendar / newsroom / analytics / bell       */
/* ============================================================ */

.gsg-ob-cal-month { background: #fff; border: 1px solid #e8ebe2; border-radius: 18px; overflow: hidden; }
.gsg-ob-cal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #e8ebe2; border-bottom: 1px solid #d8decf; }
.gsg-ob-cal-head h3 { font-family: "Mona Sans"; font-size: 18px; font-weight: 640; margin: 0; color: #0d2624; }
.gsg-ob-cal-nav { display: flex; gap: 6px; }
.gsg-ob-cal-nav button { background: rgba(255,255,255,0.6); border: 1px solid rgba(20,52,37,0.18); color: #143425; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.gsg-ob-cal-nav button:hover { background: #143425; color: #fff; border-color: #143425; }
.gsg-ob-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid #eef1e8; }
.gsg-ob-cal-dayhead { background: #f5f5f7; padding: 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #5a7566; text-transform: uppercase; text-align: center; border-right: 1px solid #eef1e8; border-bottom: 1px solid #eef1e8; }
.gsg-ob-cal-dayhead:last-child { border-right: 0; }
.gsg-ob-cal-cell { background: #fff; min-height: 96px; padding: 8px 10px; border-right: 1px solid #eef1e8; border-bottom: 1px solid #eef1e8; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.gsg-ob-cal-cell:nth-child(7n) { border-right: 0; }
.gsg-ob-cal-cell.is-out { background: #fafbf7; color: #adb7ac; }
.gsg-ob-cal-cell.is-today .gsg-ob-cal-daynum { background: #143425; color: #fff; border-radius: 999px; padding: 2px 8px; align-self: flex-start; }
.gsg-ob-cal-daynum { font-weight: 700; color: #274543; margin: 0 0 2px; }
.gsg-ob-cal-chip { display: block; font-size: 11px; font-weight: 600; line-height: 1.25; padding: 3px 7px; border-radius: 6px; background: #e8ebe2; color: #143425; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; text-align: left; }
.gsg-ob-cal-chip.is-license  { background: #f6e7c5; color: #6b4a15; }
.gsg-ob-cal-chip.is-reporting { background: #d6e3f5; color: #1e3a5f; }
.gsg-ob-cal-chip.is-permit   { background: #d9ecd9; color: #1f4f32; }
.gsg-ob-cal-chip.is-disclosure { background: #f1e4c3; color: #8a6a2f; }
.gsg-ob-cal-chip.is-enforcement { background: #F2D8C9; color: #7a3818; }
.gsg-ob-cal-chip.is-closed { opacity: 0.5; text-decoration: line-through; }
.gsg-ob-cal-view-toggle { display: inline-flex; gap: 4px; background: #e8ebe2; padding: 4px; border-radius: 999px; }
.gsg-ob-cal-view-toggle button { background: transparent; border: 0; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #274543; }
.gsg-ob-cal-view-toggle button.is-active { background: #143425; color: #fff; }

.gsg-ob-news-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 24px; padding: 14px 18px; background: #f5f5f7; border-radius: 14px; }
.gsg-ob-news-filters .gsg-ob-input { min-width: 220px; }
.gsg-ob-news-card-bookmark { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.9); border: 0; cursor: pointer; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #5a7566; transition: background 0.15s ease, color 0.15s ease; z-index: 2; }
.gsg-ob-news-card-bookmark:hover { background: #143425; color: #fff; }
.gsg-ob-news-card-bookmark.is-on { background: #143425; color: #fff; }
.gsg-ob-news-card { position: relative; }
.gsg-ob-news-card.is-unread::before { content: ''; position: absolute; top: 16px; left: 16px; width: 8px; height: 8px; border-radius: 999px; background: #143425; }

.gsg-ob-vp-kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0 0 28px; }
.gsg-ob-vp-kpi { background: #fff; border: 1px solid #e8ebe2; border-radius: 14px; padding: 18px 20px; }
.gsg-ob-vp-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5a7566; margin: 0 0 4px; }
.gsg-ob-vp-kpi-value { font-family: "Mona Sans"; font-size: 28px; font-weight: 640; color: #0d2624; margin: 0; }
.gsg-ob-vp-kpi-sub { font-size: 12px; color: #5a7566; margin: 4px 0 0; }
.gsg-ob-vp-funnel { display: flex; flex-direction: column; gap: 8px; }
.gsg-ob-vp-funnel-row { display: grid; grid-template-columns: 140px 1fr 80px; gap: 12px; align-items: center; }
.gsg-ob-vp-funnel-label { font-size: 13px; font-weight: 600; color: #274543; }
.gsg-ob-vp-funnel-bar { height: 18px; background: #e8ebe2; border-radius: 999px; overflow: hidden; position: relative; }
.gsg-ob-vp-funnel-fill { height: 100%; background: linear-gradient(90deg, #143425 0%, #274543 100%); border-radius: 999px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.gsg-ob-vp-funnel-val { font-size: 13px; font-weight: 700; color: #0d2624; text-align: right; }

.gsg-ob-enforcement-banner { background: linear-gradient(135deg, #7a3818 0%, #143425 100%); color: #fff; padding: 14px 20px; margin: 0 0 24px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: 0 10px 28px rgba(122,56,24,0.3); }
.gsg-ob-enforcement-banner strong { font-weight: 700; }
.gsg-ob-enforcement-banner .gsg-ob-btn { background: rgba(255,255,255,0.95); color: #7a3818; border-color: rgba(255,255,255,0.95); }

.gsg-ob-bell {
  position: relative;
  background: #fff;
  border: 1px solid #d8decf;
  width: 38px; height: 38px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 10px;
  color: #0d2624;
  font-size: 16px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.gsg-ob-bell:hover {
  background: #143425;
  border-color: #143425;
  color: #fff;
  box-shadow: 0 4px 14px rgba(13, 38, 36, 0.18);
}
.gsg-ob-bell-count { position: absolute; top: -4px; right: -4px; background: #143425; color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; display: flex; align-items: center; justify-content: center; }
.gsg-ob-bell-panel { position: absolute; top: 44px; right: 0; width: min(380px, 90vw); background: #fff; border: 1px solid #e8ebe2; border-radius: 16px; box-shadow: 0 22px 50px rgba(13,38,36,0.16); z-index: 120; max-height: 70vh; overflow-y: auto; }
.gsg-ob-bell-panel-head { padding: 14px 18px; background: #e8ebe2; border-bottom: 1px solid #d8decf; display: flex; justify-content: space-between; align-items: center; }
.gsg-ob-bell-panel-head h4 { font-family: "Mona Sans"; font-size: 14px; font-weight: 640; margin: 0; color: #0d2624; }
.gsg-ob-bell-item { padding: 12px 18px; border-bottom: 1px solid #f1f3ec; display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; }
.gsg-ob-bell-item:hover { background: #fafbf7; }
.gsg-ob-bell-icon { width: 30px; height: 30px; border-radius: 999px; background: #e8ebe2; display: flex; align-items: center; justify-content: center; color: #274543; font-size: 14px; flex-shrink: 0; }
.gsg-ob-bell-body { flex: 1; min-width: 0; }
.gsg-ob-bell-title { font-size: 13px; font-weight: 600; color: #0d2624; margin: 0; }
.gsg-ob-bell-sub { font-size: 11.5px; color: #5a7566; margin: 2px 0 0; }

/* === END DEPTH v1 === */

/* ============================================================
 * ENFORCEMENT-DEFENSE PAGE — EMERGENCY / LOSSES / ARTICLE REFS
 * ============================================================ */

/* Emergency contact band — sits directly under hero. Dark alert
 * background with rust accent, pulsing live-status dot, giant phone
 * number, visible countdown-style deadlines grid. */
.gsg-enforce-emergency {
  background: linear-gradient(135deg, #141414 0%, #1c1c1c 55%, #2a1f1c 100%);
  color: #fff;
  padding: clamp(48px, 8vh, 96px) 0;
  position: relative;
  overflow: hidden;
  border-top: 3px solid #143425;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gsg-enforce-emergency::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(20, 52, 37, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 88% 78%, rgba(20, 52, 37, 0.10) 0%, transparent 55%);
  pointer-events: none;
}
.gsg-enforce-emergency-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .gsg-enforce-emergency-inner { grid-template-columns: 1fr; }
}
.gsg-enforce-emergency-lead .gsg-enforce-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 52, 37, 0.12);
  border: 1px solid rgba(20, 52, 37, 0.35);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #c7e8cf;
  margin-bottom: 24px;
}
.gsg-enforce-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: #143425;
  box-shadow: 0 0 0 0 rgba(20, 52, 37, 0.6);
  animation: gsg-enforce-pulse 1.6s ease-out infinite;
}
@keyframes gsg-enforce-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(20, 52, 37, 0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(20, 52, 37, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 52, 37, 0); }
}
.gsg-enforce-emergency h2 {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 20px;
  color: #fff;
}
.gsg-enforce-emergency h2 em { font-style: normal; color: #c7e8cf; }
.gsg-enforce-emergency p {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 28px;
  max-width: 50ch;
}
.gsg-enforce-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.gsg-enforce-ctas .gsg-enforce-call {
  display: inline-flex; align-items: center; gap: 12px;
  background: #143425;
  color: #141414;
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.01em;
  padding: 16px 26px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.gsg-enforce-ctas .gsg-enforce-call:hover { background: #274543; transform: translateY(-1px); }
.gsg-enforce-ctas .gsg-enforce-call svg { width: 22px; height: 22px; flex-shrink: 0; }
.gsg-enforce-ctas .gsg-enforce-email {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14.5px;
}
.gsg-enforce-ctas .gsg-enforce-email:hover { color: #fff; text-decoration: underline; }

/* Deadline grid — four statutory clocks with their urgency ranks */
.gsg-enforce-deadlines {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px;
}
.gsg-enforce-deadlines-header {
  grid-column: 1 / -1;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c7e8cf;
  font-weight: 600;
  margin-bottom: 4px;
}
.gsg-enforce-deadline {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px 18px;
}
.gsg-enforce-deadline-tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.gsg-enforce-deadline.is-red .gsg-enforce-deadline-tag {
  background: rgba(20, 52, 37, 0.18);
  color: #c7e8cf;
  border: 1px solid rgba(20, 52, 37, 0.3);
}
.gsg-enforce-deadline.is-amber .gsg-enforce-deadline-tag {
  background: rgba(20, 52, 37, 0.14);
  color: #c7e8cf;
  border: 1px solid rgba(20, 52, 37, 0.28);
}
.gsg-enforce-deadline-num {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.gsg-enforce-deadline-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.4;
}

/* Losses dashboard — SVG horizontal bar chart for 2024 DCC data */
.gsg-enforce-losses {
  background: #faf8f3;
  padding: clamp(72px, 11vh, 140px) 0;
  color: #1d1d1f;
}
.gsg-enforce-losses-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.gsg-enforce-losses-header {
  max-width: 720px;
  margin-bottom: 52px;
}
.gsg-enforce-losses-header .clapp-eyebrow { color: #0d2624; margin-bottom: 14px; display: inline-block; }
.gsg-enforce-losses-header h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #141414;
  margin: 0 0 16px;
}
.gsg-enforce-losses-header h2 em { font-style: normal; color: #0d2624; }
.gsg-enforce-losses-header p {
  font-size: 16.5px;
  line-height: 1.55;
  color: #424245;
  max-width: 62ch;
}
.gsg-enforce-losses-header p a { color: #0d2624; text-decoration: underline; text-underline-offset: 3px; }

.gsg-enforce-chart {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  column-gap: 24px;
  row-gap: 14px;
  align-items: center;
}
@media (max-width: 720px) {
  .gsg-enforce-chart { grid-template-columns: 1fr; row-gap: 10px; }
  .gsg-enforce-chart-value { justify-self: start !important; }
}
.gsg-enforce-chart-label {
  font-size: 14.5px;
  color: #141414;
  font-weight: 600;
  line-height: 1.35;
}
.gsg-enforce-chart-label small {
  display: block;
  font-weight: 400;
  color: #5a5a5f;
  font-size: 12.5px;
  margin-top: 3px;
}
.gsg-enforce-chart-bar {
  height: 30px;
  background: rgba(13, 38, 36, 0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.gsg-enforce-chart-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0d2624 0%, #0d2624 60%, #143425 100%);
  border-radius: 4px;
  transform-origin: left center;
  animation: gsg-bar-grow 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  transform: scaleX(0);
}
@keyframes gsg-bar-grow { to { transform: scaleX(1); } }
.gsg-enforce-chart-value {
  font-size: 18px;
  font-weight: 700;
  color: #141414;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}
.gsg-enforce-chart-footer {
  margin-top: 40px;
  padding: 22px 26px;
  background: rgba(13, 38, 36, 0.06);
  border-left: 3px solid #0d2624;
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #3a3a3f;
}
.gsg-enforce-chart-footer a { color: #0d2624; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Article references / "In the record" citation cards */
.gsg-enforce-refs {
  background: #f5f5f2;
  padding: clamp(72px, 11vh, 140px) 0;
}
.gsg-enforce-refs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.gsg-enforce-refs-header { max-width: 720px; margin-bottom: 48px; }
.gsg-enforce-refs-header .clapp-eyebrow { color: #0d2624; }
.gsg-enforce-refs-header h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #141414;
  margin: 14px 0 16px;
}
.gsg-enforce-refs-header h2 em { font-style: normal; color: #0d2624; }
.gsg-enforce-refs-header p { font-size: 16.5px; color: #424245; line-height: 1.55; }
.gsg-enforce-refs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.gsg-enforce-ref-card {
  background: #fff;
  border: 1px solid rgba(13, 38, 36, 0.08);
  border-radius: 14px;
  padding: 24px 26px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 160px;
}
.gsg-enforce-ref-card:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 38, 36, 0.35);
  box-shadow: 0 12px 28px rgba(13, 38, 36, 0.08);
}
.gsg-enforce-ref-card-tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #0d2624;
  margin-bottom: 10px;
}
.gsg-enforce-ref-card-title {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #141414;
  margin: 0 0 10px;
}
.gsg-enforce-ref-card-source {
  font-size: 13px;
  color: #5a7566;
  margin: 0 0 14px;
}
.gsg-enforce-ref-card-arrow {
  margin-top: auto;
  font-size: 13px;
  color: #0d2624;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* === END ENFORCEMENT-DEFENSE === */

/* Two-futures fear → relief contrast section (enforcement-defense) */
.gsg-enforce-futures {
  background: #0d0e0e;
  color: #fff;
  padding: clamp(80px, 12vh, 160px) 0;
  position: relative;
  overflow: hidden;
}
.gsg-enforce-futures::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(13, 38, 36, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(122, 200, 145, 0.09) 0%, transparent 55%);
  pointer-events: none;
}
.gsg-enforce-futures-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  position: relative;
  z-index: 1;
}
.gsg-enforce-futures-header { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.gsg-enforce-futures-header .clapp-eyebrow {
  color: #c7e8cf;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}
.gsg-enforce-futures-header h2 {
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 14px 0 18px;
  color: #fff;
}
.gsg-enforce-futures-header h2 em { font-style: normal; color: #c7e8cf; }
.gsg-enforce-futures-header p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}
.gsg-enforce-futures-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .gsg-enforce-futures-grid { grid-template-columns: 1fr; gap: 20px; }
  .gsg-enforce-futures-divider { display: none; }
}
.gsg-enforce-future {
  border-radius: 16px;
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  min-height: 520px;
}
.gsg-enforce-future.is-alone {
  background: linear-gradient(160deg, rgba(70, 22, 16, 0.55) 0%, rgba(24, 10, 8, 0.55) 100%);
  border: 1px solid rgba(20, 52, 37, 0.3);
}
.gsg-enforce-future.is-with-us {
  background: linear-gradient(160deg, rgba(20, 52, 37, 0.55) 0%, rgba(10, 28, 20, 0.55) 100%);
  border: 1px solid rgba(122, 200, 145, 0.32);
}
.gsg-enforce-future-kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
  align-self: flex-start;
}
.gsg-enforce-future.is-alone .gsg-enforce-future-kicker {
  background: rgba(20, 52, 37, 0.16);
  color: #c7e8cf;
  border: 1px solid rgba(20, 52, 37, 0.32);
}
.gsg-enforce-future.is-with-us .gsg-enforce-future-kicker {
  background: rgba(122, 200, 145, 0.14);
  color: #c7e8cf;
  border: 1px solid rgba(122, 200, 145, 0.32);
}
.gsg-enforce-future h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 14px;
  color: #fff;
}
.gsg-enforce-future > p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 24px;
}
.gsg-enforce-future ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.gsg-enforce-future li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.gsg-enforce-future li:first-child { border-top: none; padding-top: 0; }
.gsg-enforce-future li::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  margin-top: 3px;
  display: block;
  flex-shrink: 0;
}
.gsg-enforce-future.is-alone li::before {
  background: radial-gradient(circle at 30% 30%, #143425 0%, #0d2624 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 90, 0.4);
}
.gsg-enforce-future.is-with-us li::before {
  background: radial-gradient(circle at 30% 30%, #7ac891 0%, #143425 100%);
  box-shadow: inset 0 0 0 1px rgba(155, 220, 175, 0.35);
}
.gsg-enforce-future li strong { color: #fff; font-weight: 600; }
.gsg-enforce-future-outcome {
  margin-top: auto;
  padding: 18px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.gsg-enforce-future.is-alone .gsg-enforce-future-outcome {
  background: rgba(20, 52, 37, 0.14);
  color: #c7e8cf;
  border-left: 3px solid #143425;
}
.gsg-enforce-future.is-with-us .gsg-enforce-future-outcome {
  background: rgba(122, 200, 145, 0.12);
  color: #c7e8cf;
  border-left: 3px solid #7ac891;
}

/* Divider — vertical line + centered "vs" */
.gsg-enforce-futures-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.gsg-enforce-futures-divider::before,
.gsg-enforce-futures-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
}
.gsg-enforce-futures-divider::before { top: 0; height: calc(50% - 26px); }
.gsg-enforce-futures-divider::after { bottom: 0; height: calc(50% - 26px); }
.gsg-enforce-futures-divider span {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  padding: 8px 4px;
}

/* Closing reassurance CTA under the grid */
.gsg-enforce-futures-cta {
  margin-top: 56px;
  text-align: center;
}
.gsg-enforce-futures-cta p {
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.4;
  color: #fff;
  font-weight: 500;
  margin: 0 auto 24px;
  max-width: 56ch;
  letter-spacing: -0.01em;
}
.gsg-enforce-futures-cta p em { font-style: normal; color: #c7e8cf; font-weight: 600; }
.gsg-enforce-futures-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #143425;
  color: #141414;
  font-weight: 700;
  font-size: 18px;
  padding: 16px 28px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.gsg-enforce-futures-cta a:hover { background: #274543; transform: translateY(-1px); }
/* === END TWO-FUTURES === */

/* .clapp-local-cost with a background video — enforcement page cost-of-inaction */
.clapp-local-cost.has-video-bg { position: relative; overflow: hidden; }
.clapp-local-cost.has-video-bg .clapp-local-cost-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.clapp-local-cost.has-video-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(250, 248, 243, 0.92) 0%, rgba(250, 248, 243, 0.86) 55%, rgba(250, 248, 243, 0.82) 100%);
  z-index: 1;
  pointer-events: none;
}
.clapp-local-cost.has-video-bg .clapp-local-cost-inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .clapp-local-cost.has-video-bg .clapp-local-cost-video { display: none; }
}

/* ============================================================ */
/* CLAPP CONTACT FORM v1 — unified contact page form            */
/* ============================================================ */
.gsg-contact-layout {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: 32px;
}
@media (max-width: 920px) { .gsg-contact-layout { grid-template-columns: 1fr; } }
.gsg-contact-form-col { min-width: 0; }
.gsg-contact-form {
  background: #fff;
  border: 1px solid rgba(20,52,37,0.1);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 44px);
  margin-top: 28px;
  box-shadow: 0 16px 40px rgba(13,38,36,0.05);
}
.gsg-contact-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.gsg-contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 20px; }
.gsg-contact-field-row .gsg-contact-field { margin: 0; }
@media (max-width: 560px) { .gsg-contact-field-row { grid-template-columns: 1fr; } }
.gsg-contact-label {
  font-family: "DM Sans", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: #274543;
}
.gsg-contact-req { color: #143425; margin-left: 2px; }
.gsg-contact-input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(20,52,37,0.18);
  border-radius: 12px;
  background: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 15px; color: #0d2624;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gsg-contact-input:focus {
  outline: none;
  border-color: #143425;
  box-shadow: 0 0 0 3px rgba(20,52,37,0.12);
}
.gsg-contact-textarea { min-height: 140px; resize: vertical; }
.gsg-contact-radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gsg-contact-radio {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(20,52,37,0.18);
  border-radius: 999px; cursor: pointer;
  font-size: 14px; color: #274543;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.gsg-contact-radio input { accent-color: #143425; }
.gsg-contact-radio:has(input:checked) { background: #143425; color: #fff; border-color: #143425; }
.gsg-contact-checkbox {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: #274543; line-height: 1.5;
  margin: 0 0 24px;
  cursor: pointer;
}
.gsg-contact-checkbox input { margin-top: 2px; accent-color: #143425; flex-shrink: 0; }
.gsg-contact-checkbox a { color: #143425; text-decoration: underline; }
.gsg-contact-submit-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.gsg-contact-microcopy {
  font-size: 12.5px; color: #5a7566;
}
.gsg-contact-confirmation {
  text-align: center; padding: 24px 0;
}
.gsg-contact-confirmation-icon {
  width: 64px; height: 64px; border-radius: 999px;
  background: #ADB295; color: #0d2624;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700;
  margin: 0 0 16px;
}
.gsg-contact-confirmation h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(22px, 3vw, 28px); font-weight: 640; letter-spacing: -0.02em;
  color: #0d2624; margin: 0 0 10px;
}
.gsg-contact-confirmation p { color: #5a7566; margin: 0 0 20px; }

.gsg-contact-sidebar { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.gsg-contact-sidebar-card {
  background: #fff;
  border: 1px solid rgba(20,52,37,0.1);
  border-radius: 18px;
  padding: 24px 26px;
}
.gsg-contact-sidebar-card.is-emergency {
  background: linear-gradient(135deg, #7a3818 0%, #143425 100%);
  color: #fff; border-color: transparent;
}
.gsg-contact-sidebar-card.is-emergency .clapp-conv-card-kicker { color: rgba(255,255,255,0.85); }
.gsg-contact-sidebar-card h3 {
  font-family: "Mona Sans", sans-serif;
  font-size: 18px; font-weight: 640; letter-spacing: -0.01em;
  color: #0d2624; margin: 8px 0 10px;
}
.gsg-contact-sidebar-card.is-emergency h3 { color: #fff; }
.gsg-contact-sidebar-card p {
  font-size: 14px; color: #274543; line-height: 1.5; margin: 0;
}
.gsg-contact-sidebar-card.is-emergency p { color: rgba(255,255,255,0.92); }
.gsg-contact-sidebar-card ul {
  list-style: none; padding: 0; margin: 0;
  font-size: 13.5px; color: #274543; line-height: 1.55;
}
.gsg-contact-sidebar-card ul li { padding: 4px 0; }
.gsg-contact-sidebar-link {
  display: inline-block; margin-top: 16px;
  font-family: "Mona Sans", sans-serif;
  font-size: 22px; font-weight: 640; color: #fff;
  text-decoration: none;
}
.gsg-contact-sidebar-link:hover { text-decoration: underline; color: #fff; }
/* === END CONTACT FORM === */

/* Orphan content fix — some modals have H3/P as direct children of
 * .gsg-modal-content (not wrapped in .gsg-modal-body). Apply the same
 * padding and typography so they read as a continuation of the body. */
.gsg-modal-content > h3,
.gsg-modal-content > p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.gsg-modal-content > h3 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  line-height: 1.1;
  margin-top: 64px;
  margin-bottom: 20px;
}
.gsg-modal-content > p {
  font-size: 19px;
  line-height: 1.55;
  color: #424245;
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 400;
}
/* Leave a breathing gap before the footer-cta follows orphan content */
.gsg-modal-content > p + .gsg-modal-footer-cta,
.gsg-modal-content > h3 + .gsg-modal-footer-cta {
  margin-top: 64px;
}

/* =========================================================
 * Second-tier License Types submenu column
 * ========================================================= */
header.main-header.apple-nav .nav-dropdown-inner {
  position: relative;
}
header.main-header.apple-nav .nav-dd-col-sub {
  position: absolute;
  right: 0;
  top: 0;
  width: 260px;
  padding-left: 36px;
  border-left: 1px solid rgba(13, 38, 36, 0.09);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0.24, 1),
              transform 0.28s cubic-bezier(0.32, 0.72, 0.24, 1),
              visibility 0s linear 0.25s;
}
header.main-header.apple-nav .nav-dd-col-sub.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0.24, 1) 0.03s,
              transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1) 0.03s,
              visibility 0s linear 0s;
}
header.main-header.apple-nav .nav-dd-sub-title {
  display: block;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #6e6e73;
  margin-bottom: 14px;
  font-weight: 500;
}
header.main-header.apple-nav .nav-dd-sub-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
header.main-header.apple-nav .nav-dd-sub-links a {
  display: block;
  font-family: var(--default-font) !important;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: #1d1d1f;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.18s ease, transform 0.18s ease;
  line-height: 1.35;
}
header.main-header.apple-nav .nav-dd-sub-links a:hover {
  color: #143425;
  transform: translateX(2px);
}
/* Mobile: stack the sub column inline instead of absolute-positioning */
@media (max-width: 900px) {
  header.main-header.apple-nav .nav-dd-col-sub {
    position: static;
    width: auto;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(13, 38, 36, 0.09);
    padding-top: 12px;
    margin-top: 12px;
    transform: none !important;
  }
}
/* ========================================================= */

/* =========================================================
 * Centered checkmark icons — replace the Unicode ✓ character
 * (which has uneven baseline + rides high in most fonts)
 * with a pixel-perfect inline SVG via mask-image.
 * Affects: eligibility-check, compare-check, pricing-card bullets.
 * ========================================================= */
.clapp-eligibility-check {
  font-size: 0 !important; /* hide the ✓ character */
}
.clapp-eligibility-check::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4 10.5l4 4 8-8.5%27/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4 10.5l4 4 8-8.5%27/%3E%3C/svg%3E") no-repeat center / contain;
}
.clapp-compare-check {
  font-size: 0 !important;
}
.clapp-compare-check::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27none%27 stroke=%27black%27 stroke-width=%272.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4 10.5l4 4 8-8.5%27/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27none%27 stroke=%27black%27 stroke-width=%272.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4 10.5l4 4 8-8.5%27/%3E%3C/svg%3E") no-repeat center / contain;
}
.clapp-pricing-card li::before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27none%27 stroke=%27black%27 stroke-width=%272.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4 10.5l4 4 8-8.5%27/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27none%27 stroke=%27black%27 stroke-width=%272.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4 10.5l4 4 8-8.5%27/%3E%3C/svg%3E") no-repeat center / contain;
  font-size: 0;
  top: 12px;
}
/* Make sure the icon color inherits where needed */
.clapp-pricing-card li::before { color: #8a9478; }
.clapp-pricing-card.is-featured li::before { color: #ADB295; }
/* ========================================================= */

/* Portal check-icon — .is-complete state shows a perfectly centered
 * SVG checkmark instead of the Unicode ✓ character. */
.gsg-ob-check-card.is-complete .gsg-ob-check-icon {
  font-size: 0 !important;
  position: relative;
}
.gsg-ob-check-card.is-complete .gsg-ob-check-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4 10.5l4 4 8-8.5%27/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4 10.5l4 4 8-8.5%27/%3E%3C/svg%3E") no-repeat center / contain;
}

/* === CLAPP ARCHETYPE CITATION-CHIP v1 — Wave 8c bug 3 ===
 * Styles for the citation pills emitted by gsgRegulations.citationChip().
 * Markup contract: <a|span class="gs-citation-chip" data-rm-id="RM-XXXX">label</a>
 * Modifiers:
 *   --compact     : smaller font for inline runs inside table cells
 *   --unresolved  : rust border, used when the rm_id has no resolved entry
 */
.gs-citation-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #143425;
  color: #e8ebe2;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-decoration: none;
  margin: 0 4px 4px 0;
  border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
  white-space: nowrap;
  vertical-align: baseline;
}
.gs-citation-chip:hover,
.gs-citation-chip:focus {
  background: #1d4a34;
  color: #ffffff;
  border-color: #ADB295;
  text-decoration: none;
  transform: translateY(-1px);
}
.gs-citation-chip:active {
  transform: translateY(0);
}
.gs-citation-chip--compact {
  padding: 1px 8px;
  font-size: 11px;
  margin: 0 3px 3px 0;
}
.gs-citation-chip--unresolved {
  background: #f5f5f7;
  color: #8a3a1f;
  border-color: #D97757;
  font-style: italic;
}
.gs-citation-chip--unresolved:hover,
.gs-citation-chip--unresolved:focus {
  background: #fdf3ee;
  color: #8a3a1f;
  border-color: #D97757;
}
/* === END CLAPP ARCHETYPE CITATION-CHIP v1 === */

/* === CLAPP TIER FRAMEWORK :: Licensed / Educated / Compliant v1 === */
/* Subhead inside .clapp-apl-area-support that divides cadence from crisis */
.clapp-apl-area-subhead {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #143425;
  margin: 56px 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(20, 52, 37, 0.12);
}
.clapp-apl-area-support.is-gray .clapp-apl-area-subhead {
  color: #0d2624;
}

/* Tier pill — small badge for service/learn page headers */
.clapp-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  margin-bottom: 18px;
  border-radius: 999px;
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* When the pill follows the breadcrumb (alternate placement on some pages), keep symmetric spacing */
.clapp-crumbs + .clapp-tier-pill {
  margin-top: 14px;
}
.clapp-tier-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.clapp-tier-pill[data-tier="licensed"]::before { background: #ADB295; }
.clapp-tier-pill[data-tier="educated"]::before { background: #8a6a2f; }
.clapp-tier-pill[data-tier="compliant"]::before { background: #143425; box-shadow: 0 0 0 1px rgba(255,255,255,0.4); }

/* Light variant for non-hero contexts */
.clapp-tier-pill.is-light {
  background: #f5f5f7;
  color: #143425;
  border-color: rgba(20, 52, 37, 0.18);
  backdrop-filter: none;
}
/* === END CLAPP TIER FRAMEWORK v1 === */

/* === CLAPP RESCHEDULING ALERT STRIP v1 === */
.gsg-alert-strip {
  background: linear-gradient(90deg, #143425 0%, #274543 100%);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  position: relative;
  z-index: 1100;
}
.gsg-alert-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  line-height: 1.45;
}
.gsg-alert-strip-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ADB295;
  white-space: nowrap;
}
.gsg-alert-strip-text {
  flex: 1 1 auto;
  min-width: 0;
}
.gsg-alert-strip-cta {
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  white-space: nowrap;
  transition: border-color 0.18s ease;
}
.gsg-alert-strip-cta:hover {
  border-bottom-color: #fff;
  color: #fff;
}
@media (max-width: 768px) {
  .gsg-alert-strip-inner { padding: 8px 16px; font-size: 12px; }
  .gsg-alert-strip-eyebrow { font-size: 10px; }
}

/* Push the absolutely-positioned site header DOWN when the alert strip is present,
   so the header sits flush below the strip with no dead space showing through.
   Strip is ~40px tall on desktop (single line of 13px text + 20px padding). */
.gsg-alert-strip ~ header.main-header {
  top: 40px;
}
@media (max-width: 1024px) {
  .gsg-alert-strip ~ header.main-header { top: 64px; }
}
@media (max-width: 768px) {
  .gsg-alert-strip ~ header.main-header { top: 78px; }
}
/* Scroll-pin: when JS adds .is-pinned (after user scrolls past the alert
   strip), the header goes edge-to-edge across the full viewport width and
   anchors to top:0. Apple-style — translucent dark backdrop with blur so
   the hero shows through subtly behind it. */
header.main-header.is-pinned {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}
/* The inner sticky chrome gets the blur + translucent bg only when pinned,
   so the floating-over-hero look is preserved on initial load. Background
   fades in via transition for a smooth visual handoff (no snap). */
header.main-header .header-sticky {
  transition: background 0.24s ease, backdrop-filter 0.24s ease, border-radius 0.24s ease;
}
header.main-header.is-pinned .header-sticky {
  background: rgba(13, 38, 36, 0.88);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  border-radius: 0;
}
/* === END CLAPP RESCHEDULING ALERT STRIP v1 === */

/* === CLAPP ARCHETYPE WAVE15 EMP-HEADER v1 === */
/* Wave 15 Fix 6 — Employee Workspace header band collapse-on-scroll.
   The header band ("Welcome, Maria" + role/department/license chips) was
   getting visually crowded when the user scrolled to the tabs. Solution:
   on scroll past 200px, the band collapses — welcome line + chips hide,
   only the role + supervisor pills + Switch-to-admin-view CTA remain in
   a thin sticky bar. Triggered by a JS scroll handler in renderEmployeeWorkspace
   that toggles the .gsg-ob-emp-header--collapsed class. */
.gsg-ob-emp-header {
  transition: padding 0.2s ease, background-color 0.2s ease;
}
.gsg-ob-emp-header--collapsed {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.gsg-ob-emp-header--collapsed .gsg-ob-emp-header-eyebrow,
.gsg-ob-emp-header--collapsed .gsg-ob-emp-header-name,
.gsg-ob-emp-header--collapsed .gsg-ob-emp-header-chip-biz,
.gsg-ob-emp-header--collapsed .gsg-ob-emp-header-chip-license {
  display: none !important;
}
.gsg-ob-emp-header--collapsed .gsg-ob-emp-header-chips {
  margin-top: 0 !important;
}
/* === END CLAPP ARCHETYPE WAVE15 EMP-HEADER v1 === */

/* === CLAPP ARCHETYPE WAVE16 EMP-HERO v1 === */
/* RPG-inspired employee profile hero, Apple-esque. Replaces the flat header
   band with a 3-column layout: stats (left), portrait + name (center),
   per-phase progress "levels" (right). Uses CLAPP forest/sage palette only
   — no neon. Collapses to one column on narrow viewports. */
.gsg-ob-emp-hero {
  background: linear-gradient(180deg, #0d2624 0%, #143425 100%);
  color: #e8ebe2;
  border-radius: 24px;
  padding: 36px 40px;
  margin-bottom: 20px;
  position: relative;
}
.gsg-ob-emp-hero-topbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}
.gsg-ob-emp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 1024px) {
  .gsg-ob-emp-hero-grid { grid-template-columns: 1fr; }
}
.gsg-ob-emp-hero-stats {
  display: flex; flex-direction: column; gap: 14px;
}
.gsg-ob-emp-hero-portrait {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 8px 0;
}
.gsg-ob-emp-hero-portrait .portrait-frame {
  width: 148px; height: 148px; border-radius: 50%;
  background: rgba(173,178,149,0.12);
  padding: 6px; box-shadow: 0 12px 36px rgba(13,38,36,0.45);
  border: 1px solid rgba(173,178,149,0.28);
}
.gsg-ob-emp-hero-portrait .portrait-frame > .gsg-ob-emp-avatar {
  width: 100% !important; height: 100% !important;
  border-color: transparent !important;
}
.gsg-ob-emp-hero-portrait .portrait-name {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.96; letter-spacing: -0.03em;
  color: #fff; margin: 18px 0 6px;
}
.gsg-ob-emp-hero-portrait .portrait-role {
  color: #ADB295; font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 14px;
}
.gsg-ob-emp-hero-portrait .portrait-chips {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.gsg-ob-emp-hero-portrait .portrait-chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: #e8ebe2;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(173,178,149,0.22);
}
.gsg-ob-emp-hero-stat-pill {
  display: flex; gap: 14px; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(173,178,149,0.14);
  border-radius: 14px; padding: 12px 16px;
}
.gsg-ob-emp-hero-stat-pill .pill-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #ADB295 0%, #143425 100%);
  display: flex; align-items: center; justify-content: center;
  color: #0d2624; font-weight: 700; font-size: 14px; flex: 0 0 36px;
}
.gsg-ob-emp-hero-stat-pill .pill-body { flex: 1; min-width: 0; }
.gsg-ob-emp-hero-stat-pill .pill-label {
  font-size: 11px; color: #ADB295; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0;
}
.gsg-ob-emp-hero-stat-pill .pill-value {
  font-family: 'Mona Sans', sans-serif;
  font-size: 22px; font-weight: 600; color: #fff;
  margin: 2px 0 0; letter-spacing: -0.01em;
}
.gsg-ob-emp-hero-stat-pill .pill-sub {
  font-size: 11px; color: #ADB295; margin: 0;
}
.gsg-ob-emp-hero-bar {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(173,178,149,0.14);
  border-radius: 12px; padding: 12px 16px;
}
.gsg-ob-emp-hero-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.gsg-ob-emp-hero-bar-head .bar-label {
  font-size: 12px; color: #fff; font-weight: 600;
}
.gsg-ob-emp-hero-bar-head .bar-val {
  font-family: 'Mona Sans', sans-serif; font-weight: 600;
  font-size: 13px; color: #ADB295;
}
.gsg-ob-emp-hero-bar-track {
  height: 6px; background: rgba(173,178,149,0.18);
  border-radius: 999px; overflow: hidden;
}
.gsg-ob-emp-hero-bar-fill {
  height: 100%; background: linear-gradient(90deg, #ADB295 0%, #e8ebe2 100%);
  border-radius: 999px; transition: width 0.6s ease;
}
.gsg-ob-emp-hero-progress {
  display: flex; flex-direction: column; gap: 10px;
}
.gsg-ob-emp-hero-progress > p.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #ADB295; margin: 0 0 4px;
}
.gsg-ob-emp-hero-phase-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(173,178,149,0.14);
  border-radius: 10px; padding: 10px 14px;
}
.gsg-ob-emp-hero-phase-row .phase-num {
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px; color: #ADB295; font-weight: 600;
}
.gsg-ob-emp-hero-phase-row .phase-body {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.gsg-ob-emp-hero-phase-row .phase-label {
  font-size: 13px; color: #fff; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsg-ob-emp-hero-phase-row .phase-track {
  height: 4px; background: rgba(173,178,149,0.18);
  border-radius: 999px; overflow: hidden;
}
.gsg-ob-emp-hero-phase-row .phase-fill {
  height: 100%; background: #ADB295; border-radius: 999px;
  transition: width 0.6s ease;
}
.gsg-ob-emp-hero-phase-row .phase-lvl {
  font-family: 'Mona Sans', sans-serif;
  font-size: 11px; font-weight: 700; color: #0d2624;
  background: #ADB295; border-radius: 6px; padding: 4px 10px;
  letter-spacing: 0.04em; min-width: 52px; text-align: center;
}
.gsg-ob-emp-hero-phase-row.is-complete .phase-lvl {
  background: #fff; color: #143425;
}
.gsg-ob-emp-hero-spark-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 18px;
}
@media (max-width: 720px) {
  .gsg-ob-emp-hero-spark-row { grid-template-columns: 1fr; }
}
.gsg-ob-emp-hero-spark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(173,178,149,0.14);
  border-radius: 14px; padding: 14px 18px;
}
.gsg-ob-emp-hero-spark .spark-label {
  font-size: 11px; color: #ADB295; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0;
}
.gsg-ob-emp-hero-spark .spark-value {
  font-family: 'Mona Sans', sans-serif;
  font-size: 26px; font-weight: 600; color: #fff;
  margin: 4px 0 6px; letter-spacing: -0.01em;
}
.gsg-ob-emp-hero-spark .spark-delta {
  font-size: 12px; font-weight: 600; color: #ADB295;
}
.gsg-ob-emp-hero-spark svg { width: 100%; height: 36px; display: block; }

/* Collapsed (scroll past 200px) — fade everything but the pill. */
.gsg-ob-emp-header--collapsed.gsg-ob-emp-hero .gsg-ob-emp-hero-grid,
.gsg-ob-emp-header--collapsed.gsg-ob-emp-hero .gsg-ob-emp-hero-spark-row,
.gsg-ob-emp-header--collapsed.gsg-ob-emp-hero .gsg-ob-emp-hero-topbar { display: none !important; }
.gsg-ob-emp-header--collapsed.gsg-ob-emp-hero { padding: 16px 24px; }
.gsg-ob-emp-header--collapsed.gsg-ob-emp-hero::after {
  content: attr(data-collapsed-summary);
  display: block; color: #fff; font-weight: 600; font-size: 14px;
}

/* v2 — simplified two-column hero (portrait | phases). Removes the
   stats column + sparkline row per latest direction. */
.gsg-ob-emp-hero--v2 .gsg-ob-emp-hero-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.4fr);
  gap: 36px;
  align-items: center;
}
@media (max-width: 1024px) {
  .gsg-ob-emp-hero--v2 .gsg-ob-emp-hero-grid { grid-template-columns: 1fr; }
}
.gsg-ob-emp-hero-ce-strip {
  margin-top: 18px;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(173,178,149,0.18);
  font-family: 'Mona Sans', sans-serif;
}
.gsg-ob-emp-hero-ce-strip .ce-strip-label {
  font-size: 11px; color: #ADB295; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.gsg-ob-emp-hero-ce-strip .ce-strip-value {
  font-size: 16px; color: #fff; font-weight: 600; letter-spacing: -0.01em;
}
.gsg-ob-emp-hero-ce-strip .ce-strip-sep {
  color: #ADB295; opacity: 0.5;
}

/* Phase row — add an Open/Continue/Start button column on the right. */
.gsg-ob-emp-hero--v2 .gsg-ob-emp-hero-phase-row {
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
}
.gsg-ob-emp-hero-phase-row .phase-cta {
  background: #ADB295; color: #0d2624;
  border: none; border-radius: 8px;
  padding: 6px 14px; font-family: 'Mona Sans', sans-serif;
  font-size: 12px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.12s ease, background 0.15s ease;
  min-width: 78px;
}
.gsg-ob-emp-hero-phase-row .phase-cta:hover:not(:disabled) {
  background: #fff; transform: translateY(-1px);
}
.gsg-ob-emp-hero-phase-row.is-locked {
  opacity: 0.42;
}
.gsg-ob-emp-hero-phase-row .phase-cta.is-locked,
.gsg-ob-emp-hero-phase-row .phase-cta:disabled {
  background: rgba(173,178,149,0.18);
  color: rgba(255,255,255,0.6);
  cursor: not-allowed;
}
.gsg-ob-emp-hero-phase-row.is-locked .phase-label::after {
  content: " · locked";
  font-size: 10px; color: #ADB295; opacity: 0.7;
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}
/* === END CLAPP ARCHETYPE WAVE16 EMP-HERO v1 === */

/* === CLAPP ARCHETYPE WAVE16 EO-WIZARD v1 === */
/* Apple Setup Assistant flow for Employee Onboarding. One question per
   screen, slide transitions, progress arc, big tap targets. CLAPP forest/
   sage palette, soft neutral background. */
.gsg-eo-host {
  background: #f5f5f7;
  min-height: 80vh;
  /* Reserve space for the sticky GreenState header so the back chevron,
     progress arc, and Save link aren't tucked under it. */
  padding: 96px 0 60px;
  position: relative;
}
.gsg-eo-stage {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 560px;
  overflow: hidden;
}
/* When the review or done screen is showing, the stage breaks out so the
   long review content scrolls naturally and the Save button at the bottom
   is reachable. */
.gsg-eo-stage:has(> .gsg-eo-screen--review),
.gsg-eo-stage:has(> .gsg-eo-screen--done) {
  min-height: auto;
  overflow: visible;
}
.gsg-eo-screen {
  position: absolute;
  inset: 0;
  padding: 32px 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.28s ease;
  opacity: 1;
}
.gsg-eo-screen--review,
.gsg-eo-screen--done {
  position: relative !important;
  inset: auto !important;
  padding: 32px 0 80px;
  align-items: flex-start;
}
.gsg-eo-screen.from-right { transform: translateX(40px); opacity: 0; }
.gsg-eo-screen.from-left  { transform: translateX(-40px); opacity: 0; }
.gsg-eo-screen.is-entering { opacity: 1; transform: translateX(0); }
.gsg-eo-screen.is-leaving { opacity: 0; }
.gsg-eo-screen.to-left  { transform: translateX(-40px); }
.gsg-eo-screen.to-right { transform: translateX(40px); }
.gsg-eo-back {
  position: absolute; top: 16px; left: 16px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid #e8ebe2;
  color: #274543; font-size: 18px; cursor: pointer;
  border-radius: 50%; text-decoration: none;
  font-family: inherit;
  transition: background 0.15s ease;
  z-index: 2;
}
.gsg-eo-back:hover { background: #fff; color: #0d2624; }
.gsg-eo-arc {
  position: absolute; top: 16px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.gsg-eo-arc-track {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(#143425 var(--arc-deg, 0deg), #e8ebe2 var(--arc-deg, 0deg));
  -webkit-mask: radial-gradient(circle, transparent 18px, #000 19px);
          mask: radial-gradient(circle, transparent 18px, #000 19px);
}
.gsg-eo-arc-label {
  position: relative;
  font-family: 'Mona Sans', sans-serif;
  font-size: 11px; font-weight: 600; color: #274543;
  letter-spacing: 0.02em;
}
.gsg-eo-finish-link {
  position: absolute; top: 24px; right: 92px;
  background: transparent; border: none;
  color: #274543; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  padding: 8px 12px; border-radius: 8px;
  letter-spacing: 0.02em;
  z-index: 2;
  transition: background 0.15s ease;
}
.gsg-eo-finish-link:hover { background: rgba(173,178,149,0.18); color: #0d2624; }
@media (max-width: 640px) {
  .gsg-eo-finish-link { right: 76px; font-size: 12px; padding: 6px 8px; }
}
.gsg-eo-eyebrow {
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px; font-weight: 600; color: #5a7566;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 14px;
}
.gsg-eo-h1 {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: #0d2624;
  margin: 0 0 18px;
}
.gsg-eo-q-label {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15; letter-spacing: -0.02em;
  color: #0d2624;
  margin: 0 0 14px;
}
.gsg-eo-req { color: #D97757; font-weight: 600; }
.gsg-eo-sub {
  font-family: 'Mona Sans', sans-serif;
  font-size: 17px; line-height: 1.5; color: #274543;
  margin: 0 0 28px; max-width: 540px;
}
.gsg-eo-help {
  font-size: 14px; line-height: 1.5; color: #5a7566;
  margin: 0 0 20px;
}
.gsg-eo-hint {
  font-size: 12px; color: #5a7566;
  margin: 14px 0 0;
}
.gsg-eo-welcome, .gsg-eo-landing, .gsg-eo-question, .gsg-eo-review, .gsg-eo-done {
  width: 100%;
}
.gsg-eo-welcome-body, .gsg-eo-landing-body, .gsg-eo-done-body {
  text-align: center; max-width: 560px; margin: 0 auto;
}
.gsg-eo-question-body { max-width: 600px; margin: 0 auto; padding-top: 40px; }
.gsg-eo-input-host { margin: 0 0 28px; }
.gsg-eo-input-host .gsg-eo-input,
.gsg-eo-input-host input.gsg-ob-input,
.gsg-eo-input-host select.gsg-ob-input,
.gsg-eo-input-host textarea.gsg-ob-input {
  width: 100%; padding: 16px 18px;
  border: 1px solid #e8ebe2; border-radius: 12px;
  font-size: 17px; line-height: 1.4; color: #0d2624;
  background: #fff; font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gsg-eo-input-host input:focus,
.gsg-eo-input-host select:focus,
.gsg-eo-input-host textarea:focus {
  outline: none; border-color: #274543;
  box-shadow: 0 0 0 3px rgba(39,69,67,0.12);
}
.gsg-eo-actions {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
}
.gsg-eo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #0d2624; color: #fff;
  border: 1px solid #0d2624; border-radius: 12px;
  padding: 14px 28px; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit; min-height: 48px;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}
.gsg-eo-btn:hover:not(:disabled) { transform: translateY(-1px); background: #143425; }
.gsg-eo-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.gsg-eo-btn--cta { min-width: 220px; padding: 16px 36px; font-size: 16px; }
.gsg-eo-btn--ghost {
  background: transparent; color: #274543;
  border-color: #ADB295;
}
.gsg-eo-btn--ghost:hover { background: rgba(173,178,149,0.12); color: #0d2624; }

/* Multi-select as chip grid */
.gsg-eo-chip-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.gsg-eo-chip {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #e8ebe2; border-radius: 12px;
  padding: 14px 16px; cursor: pointer;
  font-size: 15px; color: #0d2624;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.gsg-eo-chip input { position: absolute; opacity: 0; pointer-events: none; }
.gsg-eo-chip span { flex: 1; }
.gsg-eo-chip:hover { border-color: #274543; }
.gsg-eo-chip.is-on {
  background: #143425; color: #fff; border-color: #143425;
}
.gsg-eo-chip.is-on::before {
  content: "\2713";
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ADB295; color: #0d2624;
  font-size: 11px; font-weight: 700;
  margin-right: 4px;
}

/* Radio as tap-cards */
.gsg-eo-radio-stack {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
}
.gsg-eo-radio-card {
  display: flex !important; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e8ebe2; border-radius: 12px;
  padding: 16px 18px; cursor: pointer;
  font-size: 15px; color: #0d2624;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gsg-eo-radio-card input { margin: 0; accent-color: #143425; }
.gsg-eo-radio-card:hover { border-color: #274543; }
.gsg-eo-radio-card.is-on {
  background: rgba(20,52,37,0.06);
  border-color: #143425; color: #0d2624;
}

/* Review */
.gsg-eo-review-body {
  max-width: 720px; margin: 0 auto; width: 100%;
  padding-top: 24px;
}
.gsg-eo-review-card {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 22px 26px; margin: 0 0 14px;
}
.gsg-eo-review-title {
  font-family: 'Mona Sans', sans-serif;
  font-size: 18px; font-weight: 600; color: #0d2624;
  margin: 0 0 14px;
}
.gsg-eo-review-row {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: flex-start;
  padding: 10px 0; border-top: 1px solid #f5f5f7;
}
.gsg-eo-review-row:first-of-type { border-top: 0; padding-top: 0; }
.gsg-eo-review-q {
  font-size: 12px; color: #5a7566; margin: 0 0 2px;
  letter-spacing: 0.02em;
}
.gsg-eo-review-a {
  font-size: 14px; color: #0d2624; margin: 0; line-height: 1.45;
  word-break: break-word;
}
.gsg-eo-review-edit {
  background: transparent; border: none; color: #274543;
  font-size: 13px; font-weight: 600; text-decoration: underline;
  cursor: pointer; font-family: inherit;
  flex: 0 0 auto;
}
.gsg-eo-review-edit:hover { color: #0d2624; }

/* Done */
.gsg-eo-done-body { padding-top: 60px; }
.gsg-eo-done-glyph {
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(135deg, #143425, #ADB295);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 700;
  margin: 0 auto 24px;
  box-shadow: 0 16px 40px rgba(20,52,37,0.32);
}

/* Mobile */
@media (max-width: 640px) {
  .gsg-eo-stage { min-height: 600px; padding: 0 16px; }
  .gsg-eo-screen { padding: 16px 0; }
  .gsg-eo-question-body { padding-top: 64px; }
  .gsg-eo-arc { width: 48px; height: 48px; }
  .gsg-eo-btn--cta { width: 100%; }
}
/* === END CLAPP ARCHETYPE WAVE16 EO-WIZARD v1 === */

/* === CLAPP ARCHETYPE WAVE16 EMP-PROFILE v1 === */
.gsg-ob-emp-prof-id {
  display: flex; align-items: center; gap: 22px;
  padding: 22px 26px; background: #fff;
  border: 1px solid #e8ebe2; border-radius: 18px;
  margin: 0 0 18px; flex-wrap: wrap;
}
.gsg-ob-emp-prof-id .prof-id-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden; flex: 0 0 96px;
  border: 2px solid #e8ebe2;
}
.gsg-ob-emp-prof-id .prof-id-avatar > .gsg-ob-emp-avatar {
  width: 100% !important; height: 100% !important; border: 0 !important;
}
.gsg-ob-emp-prof-id .prof-id-meta { flex: 1; min-width: 220px; }
.gsg-ob-emp-prof-id .prof-id-name {
  font-family: 'Mona Sans', sans-serif;
  font-size: 26px; font-weight: 600; color: #0d2624;
  letter-spacing: -0.015em; margin: 0 0 4px;
}
.gsg-ob-emp-prof-id .prof-id-role {
  font-size: 14px; color: #5a7566; margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.gsg-ob-emp-prof-id .prof-id-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.gsg-ob-emp-prof-id .prof-id-chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: #f5f5f7; color: #274543;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gsg-ob-emp-prof-id .prof-id-chip--muted {
  background: transparent; border: 1px solid #e8ebe2; color: #5a7566;
}
.gsg-ob-emp-prof-id .prof-id-cta { flex: 0 0 auto; }
.gsg-ob-emp-prof-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 0 0 14px;
}
@media (max-width: 720px) {
  .gsg-ob-emp-prof-grid { grid-template-columns: 1fr; }
}
.gsg-ob-emp-prof-card {
  background: #fff; border: 1px solid #e8ebe2;
  border-radius: 18px; padding: 22px 24px; margin: 0 0 14px;
}
.gsg-ob-emp-prof-card.prof-card--dark {
  background: #143425; color: #e8ebe2; border-color: #143425;
}
.gsg-ob-emp-prof-card.prof-card--alert {
  background: rgba(217,119,87,0.06);
  border-color: rgba(217,119,87,0.18);
}
.gsg-ob-emp-prof-card .prof-card-eyebrow {
  font-family: 'Mona Sans', sans-serif;
  font-size: 11px; color: #5a7566; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
}
.gsg-ob-emp-prof-card.prof-card--dark .prof-card-eyebrow { color: #ADB295; }
.gsg-ob-emp-prof-card .prof-card-body {
  margin: 8px 0 0; color: #274543; line-height: 1.6; font-size: 15px;
}
.prof-section-eyebrow {
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px; color: #274543; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 12px;
}
.prof-rule-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 720px) { .prof-rule-grid { grid-template-columns: 1fr; } }
.prof-rule-card {
  background: #fff; border: 1px solid #e8ebe2;
  border-radius: 14px; padding: 14px 16px;
}
.prof-rule-title {
  margin: 0 0 4px; color: #0d2624; font-weight: 600; font-size: 14px;
}
.prof-rule-body {
  margin: 0; color: #5a7566; font-size: 13px; line-height: 1.5;
}
.prof-workflow {
  list-style: none; padding: 8px 18px; margin: 0;
  background: #fff; border: 1px solid #e8ebe2; border-radius: 14px;
}
.prof-workflow li {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid #f5f5f7;
}
.prof-workflow li:last-child { border-bottom: 0; }
.prof-workflow-num {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: #143425; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.prof-workflow-body { flex: 1; }
.prof-workflow-label {
  margin: 4px 0 0; color: #0d2624; font-weight: 600; font-size: 14px;
}
.prof-workflow-detail {
  margin: 4px 0 0; color: #5a7566; font-size: 13px; line-height: 1.55;
}
/* === END CLAPP ARCHETYPE WAVE16 EMP-PROFILE v1 === */

/* === CLAPP VAULT-AUDIENCE v1 === */
/* Audience filter on the Document Vault — folds the former Evidence Pack
   into the vault. Toggle to scope what's visible to what each audience
   would actually want to see. */
.gsg-ob-vault-audience {
  background: #fff; border: 1px solid #e8ebe2;
  border-radius: 18px; padding: 22px 26px; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 14px;
}
@media (min-width: 720px) {
  .gsg-ob-vault-audience {
    flex-direction: row; align-items: center; justify-content: space-between;
  }
}
.gsg-ob-vault-audience .aud-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.gsg-ob-vault-audience .aud-head .aud-help {
  margin: 0; color: #5a7566; font-size: 13px; line-height: 1.4;
  max-width: 360px;
}
.gsg-ob-vault-audience .aud-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.gsg-ob-vault-audience .aud-pill {
  background: #f5f5f7; border: 1px solid #e8ebe2;
  border-radius: 999px; padding: 8px 16px;
  font-family: 'Mona Sans', sans-serif;
  font-size: 13px; font-weight: 600; color: #274543;
  cursor: pointer; letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.gsg-ob-vault-audience .aud-pill:hover { border-color: #274543; }
.gsg-ob-vault-audience .aud-pill.is-on {
  background: #143425; color: #fff; border-color: #143425;
}
.gsg-ob-vault-audience .aud-pill .aud-count {
  font-size: 11px; color: #5a7566;
  background: #fff; border-radius: 999px;
  padding: 2px 8px;
}
.gsg-ob-vault-audience .aud-pill.is-on .aud-count {
  background: rgba(173,178,149,0.22); color: #ADB295;
}
/* === END CLAPP VAULT-AUDIENCE v1 === */

/* === CLAPP ARCHETYPE WAVE16 EMP-SHELL v1 === */
/* Admin-style left sidebar + main column for the Employee Workspace. */
.gsg-emp-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 28px;
  align-items: flex-start;
}
@media (max-width: 980px) {
  .gsg-emp-shell { grid-template-columns: 1fr; gap: 14px; }
}
.gsg-emp-sidebar {
  background: #fff;
  border: 1px solid #e8ebe2;
  border-radius: 18px;
  padding: 18px 12px;
  position: sticky;
  top: 96px;
  align-self: flex-start;
}
@media (max-width: 980px) {
  .gsg-emp-sidebar {
    position: static; padding: 8px;
    border-radius: 14px;
  }
}
.gsg-emp-sidebar-nav {
  display: flex; flex-direction: column; gap: 4px;
}
@media (max-width: 980px) {
  .gsg-emp-sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
}
.gsg-emp-sidenav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 10px 14px; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: #5a7566; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}
.gsg-emp-sidenav-item:hover {
  background: #f5f5f7; color: #0d2624;
}
.gsg-emp-sidenav-item.is-active {
  background: #143425; color: #fff;
}
.gsg-emp-sidenav-icon {
  width: 18px; height: 18px; flex: 0 0 18px;
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: 0.85;
}
/* Inline SVG icons via mask-image — sage-tinted, monochrome. */
.gsg-emp-sidenav-icon[data-icon="bullseye"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='6' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='2' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='6' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='2' fill='black'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="checklist"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5l2 2 4-4M4 12l2 2 4-4M4 19l2 2 4-4M14 5h6M14 12h6M14 19h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5l2 2 4-4M4 12l2 2 4-4M4 19l2 2 4-4M14 5h6M14 12h6M14 19h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="wrench"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14.7 6.3a4 4 0 105.7 5.7l-1.4 1.4a2 2 0 01-2.8 0L4.6 1.8 1.8 4.6l11.6 11.6a2 2 0 010 2.8l-1.4 1.4a4 4 0 11-5.7-5.7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14.7 6.3a4 4 0 105.7 5.7l-1.4 1.4a2 2 0 01-2.8 0L4.6 1.8 1.8 4.6l11.6 11.6a2 2 0 010 2.8l-1.4 1.4a4 4 0 11-5.7-5.7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="person"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="dashboard"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='8' height='10' fill='black'/><rect x='13' y='3' width='8' height='6' fill='black'/><rect x='13' y='11' width='8' height='10' fill='black'/><rect x='3' y='15' width='8' height='6' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='8' height='10' fill='black'/><rect x='13' y='3' width='8' height='6' fill='black'/><rect x='13' y='11' width='8' height='10' fill='black'/><rect x='3' y='15' width='8' height='6' fill='black'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="map"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2zM9 4v16M15 6v16' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2zM9 4v16M15 6v16' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="seal"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='10' r='6' fill='none' stroke='black' stroke-width='2'/><path d='M9 16l-2 6 5-3 5 3-2-6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M9 10l2 2 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='10' r='6' fill='none' stroke='black' stroke-width='2'/><path d='M9 16l-2 6 5-3 5 3-2-6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M9 10l2 2 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="bank"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 9h18l-9-6zM4 9v10M8 9v10M12 9v10M16 9v10M20 9v10M3 21h18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 9h18l-9-6zM4 9v10M8 9v10M12 9v10M16 9v10M20 9v10M3 21h18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="book"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5a2 2 0 012-2h13v18H6a2 2 0 010-4h13' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5a2 2 0 012-2h13v18H6a2 2 0 010-4h13' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="grad"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 9l10-5 10 5-10 5zM6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 9l10-5 10 5-10 5zM6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="people"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='2'/><circle cx='17' cy='9' r='2' fill='none' stroke='black' stroke-width='2'/><path d='M3 19c0-3.3 2.7-6 6-6s6 2.7 6 6M15 19c0-2.5 1.5-4.5 4-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='2'/><circle cx='17' cy='9' r='2' fill='none' stroke='black' stroke-width='2'/><path d='M3 19c0-3.3 2.7-6 6-6s6 2.7 6 6M15 19c0-2.5 1.5-4.5 4-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="docs"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h10l4 4v14H5z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M14 3v5h5M8 12h8M8 16h8M8 8h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h10l4 4v14H5z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M14 3v5h5M8 12h8M8 16h8M8 8h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="calendar"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/><path d='M3 10h18M8 3v4M16 3v4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/><path d='M3 10h18M8 3v4M16 3v4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="mail"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='2'/><path d='M3 7l9 7 9-7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='2'/><path d='M3 7l9 7 9-7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="card"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='2'/><path d='M3 10h18M7 15h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='2'/><path d='M3 10h18M7 15h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="biz"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='10' width='18' height='11' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M7 21v-5h4v5M3 10l9-7 9 7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='10' width='18' height='11' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M7 21v-5h4v5M3 10l9-7 9 7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="vendor"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18l-2 8H5L3 6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M5 14v4a2 2 0 002 2h10a2 2 0 002-2v-4' fill='none' stroke='black' stroke-width='2'/><path d='M3 6l-1-3H1M9 6V3M15 6V3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18l-2 8H5L3 6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M5 14v4a2 2 0 002 2h10a2 2 0 002-2v-4' fill='none' stroke='black' stroke-width='2'/><path d='M3 6l-1-3H1M9 6V3M15 6V3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="rooms"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M3 12h10M13 3v18M13 14h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M3 12h10M13 3v18M13 14h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}
.gsg-emp-sidenav-icon[data-icon="gear"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/><path d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/><path d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* Anchor variant of the sidenav (links instead of buttons on company side). */
a.gsg-emp-sidenav-item { text-decoration: none; }
.gsg-emp-sidebar--co .gsg-emp-sidenav-item { font-size: 13px; padding: 9px 12px; }
.gsg-emp-sidebar-org {
  padding: 6px 14px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e8ebe2;
}
.gsg-emp-sidebar-org-eyebrow {
  margin: 0 0 2px;
  font-family: 'Mona Sans', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #ADB295;
}
.gsg-emp-sidebar-org-name {
  margin: 0;
  font-family: 'Mona Sans', sans-serif;
  font-size: 15px; font-weight: 600;
  color: #0d2624;
  letter-spacing: -0.01em;
  line-height: 1.2;
  word-break: break-word;
}
@media (max-width: 980px) {
  .gsg-emp-sidebar-org { display: none; }
}
.gsg-emp-sidenav-label { flex: 1; }
.gsg-emp-sidenav-item .emp-tab-badge {
  background: #ADB295; color: #0d2624;
}
.gsg-emp-sidenav-item.is-active .emp-tab-badge {
  background: #fff; color: #143425;
}
.gsg-emp-right-col { display: flex; flex-direction: column; min-width: 0; }
.gsg-emp-main { min-width: 0; }

/* Company identity card — dark hero */
.gsg-ob-co-identity {
  background: #0d2624; border-radius: 22px;
  display: grid; grid-template-columns: 240px 1fr;
  overflow: hidden; margin: 0 0 20px; min-height: 190px;
}
.gsg-ob-co-left {
  padding: 28px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.gsg-ob-co-logo {
  width: 80px; height: 80px; border-radius: 50%;
  background: #274543; border: 3px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; position: relative;
  flex-shrink: 0; transition: border-color 0.18s; margin-bottom: 4px;
}
.gsg-ob-co-logo:hover { border-color: rgba(255,255,255,0.4); }
.gsg-ob-co-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsg-ob-co-logo-initials {
  font-family: "Mona Sans", sans-serif;
  font-size: 24px; font-weight: 800; color: #e8ebe2; pointer-events: none;
}
.gsg-ob-co-logo-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.52);
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.gsg-ob-co-logo:hover .gsg-ob-co-logo-overlay { opacity: 1; }
.gsg-ob-co-name-row { display: flex; align-items: center; gap: 8px; }
.gsg-ob-co-name {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -0.02em;
  color: #fff; margin: 0;
}
.gsg-ob-co-name-edit-btn {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: rgba(255,255,255,0.35); font-size: 14px; line-height: 1;
  opacity: 0; transition: opacity 0.15s, color 0.15s; flex-shrink: 0;
}
.gsg-ob-co-identity:hover .gsg-ob-co-name-edit-btn { opacity: 1; }
.gsg-ob-co-name-edit-btn:hover { color: rgba(255,255,255,0.8); }
.gsg-ob-co-name-input {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -0.02em;
  color: #fff; border: none; border-bottom: 2px solid rgba(255,255,255,0.35);
  background: transparent; outline: none; width: 100%; padding: 0; text-align: center;
}
.gsg-ob-co-type {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: #ADB295; margin: 0;
}
.gsg-ob-co-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.gsg-ob-co-chips span {
  font-size: 11px; color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.07); border-radius: 999px; padding: 3px 10px;
}
.gsg-ob-co-right {
  padding: 28px 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 28px;
  align-content: center;
}
.gsg-ob-co-kpi {}
.gsg-ob-co-kpi-label {
  font-family: "DM Sans", sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #ADB295; margin: 0 0 4px;
}
.gsg-ob-co-kpi-value {
  font-family: "Mona Sans", sans-serif;
  font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  color: #fff; margin: 0 0 4px;
}
.gsg-ob-co-kpi-unit { font-size: 0.42em; color: #ADB295; font-weight: 500; margin-left: 2px; }
.gsg-ob-co-kpi-sub { font-size: 11px; color: #ADB295; margin: 0; }
@media (max-width: 860px) {
  .gsg-ob-co-identity { grid-template-columns: 1fr; }
  .gsg-ob-co-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
}
@media (max-width: 540px) {
  .gsg-ob-co-right { grid-template-columns: repeat(2, 1fr); padding: 20px; gap: 16px; }
}
/* === END CLAPP ARCHETYPE WAVE16 EMP-SHELL v1 === */

/* === CLAPP ARCHETYPE WAVE16 EMP-TODAY-PATH v1 === */
/* "You always know what's next." Three surfaces: horizontal path stepper,
   next-up card, then existing needs-your-attention rows. Restrained
   character-progression vibe — sage glow on the current step, soft check
   on completed, dim future. Forest/sage palette only. */
.emp-path-stepper {
  background: #fff; border: 1px solid #e8ebe2;
  border-radius: 16px; padding: 18px 22px;
  margin: 0 0 16px;
}
.emp-path-stepper .path-stepper-eyebrow {
  font-family: 'Mona Sans', sans-serif;
  font-size: 11px; font-weight: 600; color: #5a7566;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 14px;
}
.emp-path-stepper .path-stepper-track {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: flex-start;
  gap: 0;
  position: relative;
}
.emp-path-stepper .path-step {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 6px;
}
.emp-path-stepper .path-step:not(:last-child)::after {
  content: ""; position: absolute;
  top: 13px; left: calc(50% + 14px); right: calc(-50% + 14px);
  height: 2px; background: #e8ebe2;
  z-index: 0;
}
.emp-path-stepper .path-step.is-complete:not(:last-child)::after,
.emp-path-stepper .path-step.is-current:not(:last-child)::after {
  background: #ADB295;
}
.emp-path-stepper .path-step.is-current.is-current:not(:last-child)::after {
  background: linear-gradient(90deg, #ADB295 0%, #e8ebe2 100%);
}
.emp-path-stepper .path-step-dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  background: #e8ebe2; color: #5a7566;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px; font-weight: 700;
  margin-bottom: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.emp-path-stepper .path-step.is-complete .path-step-dot {
  background: #143425; color: #fff;
}
.emp-path-stepper .path-step.is-current .path-step-dot {
  background: #ADB295; color: #0d2624;
  box-shadow: 0 0 0 4px rgba(173,178,149,0.22);
  transform: scale(1.06);
}
.emp-path-stepper .path-step.is-future .path-step-dot {
  background: #f5f5f7; color: #ADB295;
}
.emp-path-stepper .path-step-label {
  font-size: 11px; color: #5a7566; line-height: 1.3;
  letter-spacing: 0.02em;
  max-width: 110px;
}
.emp-path-stepper .path-step.is-current .path-step-label {
  color: #0d2624; font-weight: 600;
}
.emp-path-stepper .path-step.is-future .path-step-label {
  color: #ADB295; opacity: 0.7;
}
@media (max-width: 720px) {
  .emp-path-stepper .path-step-label { display: none; }
  .emp-path-stepper .path-step:not(:last-child)::after {
    left: calc(50% + 18px); right: calc(-50% + 18px);
  }
}

/* Next-up card */
.emp-next-up {
  background: linear-gradient(160deg, #143425 0%, #0d2624 100%);
  color: #e8ebe2; border-radius: 18px;
  padding: 26px 28px; margin: 0 0 16px;
  position: relative;
}
.emp-next-up.emp-next-up--done {
  background: #f5f5f7; color: #0d2624; border: 1px solid #e8ebe2;
}
.emp-next-up .emp-next-eyebrow {
  font-family: 'Mona Sans', sans-serif;
  font-size: 11px; font-weight: 600; color: #ADB295;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 8px;
}
.emp-next-up.emp-next-up--done .emp-next-eyebrow { color: #5a7566; }
.emp-next-up .emp-next-title {
  font-family: 'Mona Sans', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600; color: #fff;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 8px;
}
.emp-next-up.emp-next-up--done .emp-next-title { color: #0d2624; }
.emp-next-up .emp-next-meta {
  font-size: 13px; color: #ADB295; margin: 0 0 16px;
}
.emp-next-up.emp-next-up--done .emp-next-meta { color: #5a7566; }
.emp-next-up .emp-next-cta {
  background: #ADB295; color: #0d2624; border-color: #ADB295;
  font-weight: 700; padding: 10px 22px;
}
.emp-next-up .emp-next-cta:hover {
  background: #fff; border-color: #fff;
}
.emp-next-up .emp-next-after {
  font-size: 12px; color: #ADB295; margin: 12px 0 0;
  font-style: italic; letter-spacing: 0.02em;
}
/* === END CLAPP ARCHETYPE WAVE16 EMP-TODAY-PATH v1 === */

/* === CLAPP ARCHETYPE WAVE16 MICRO-FEEDBACK v1 === */
/* Subtle motion + audio cues for right/wrong/complete. Restrained — no
   bouncing, no neon. Sage glow + small scale pulse on correct, gentle
   shake on wrong, soft sage flash on module completion. Honors
   prefers-reduced-motion (animations disabled, sounds also gated in JS). */
@keyframes gsg-anim-correct-pulse {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(20,52,37,0); }
  35%  { transform: scale(1.025); box-shadow: 0 0 0 8px rgba(173,178,149,0.32); }
  100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(20,52,37,0); }
}
@keyframes gsg-anim-correct-reveal {
  0%   { transform: scale(1);     opacity: 1; }
  50%  { transform: scale(1.015); opacity: 1; }
  100% { transform: scale(1);     opacity: 1; }
}
@keyframes gsg-anim-wrong-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes gsg-anim-celebrate-flash {
  0%   { box-shadow: 0 24px 64px rgba(13,38,36,0.4), 0 0 0 0 rgba(173,178,149,0); }
  40%  { box-shadow: 0 24px 64px rgba(13,38,36,0.4), 0 0 0 18px rgba(173,178,149,0.32); }
  100% { box-shadow: 0 24px 64px rgba(13,38,36,0.4), 0 0 0 0 rgba(173,178,149,0); }
}
.gsg-anim-correct {
  animation: gsg-anim-correct-pulse 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
.gsg-anim-reveal-correct {
  animation: gsg-anim-correct-reveal 0.5s ease;
}
.gsg-anim-wrong {
  animation: gsg-anim-wrong-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.gsg-anim-celebrate {
  animation: gsg-anim-celebrate-flash 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  .gsg-anim-correct,
  .gsg-anim-reveal-correct,
  .gsg-anim-wrong,
  .gsg-anim-celebrate { animation: none !important; }
}

/* Extended right-answer flair — ring pulse, check pop, label scale-in,
   floating +1 rise, sage shimmer sweep. */
@keyframes gsg-anim-correct-ring {
  0%   { transform: scale(0.4); opacity: 0.85; }
  60%  { transform: scale(1.6); opacity: 0.35; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes gsg-anim-correct-check {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(0deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}
@keyframes gsg-anim-correct-label {
  0%   { transform: scale(0.6); opacity: 0; letter-spacing: 0.16em; }
  100% { transform: scale(1);   opacity: 1; letter-spacing: 0.04em; }
}
@keyframes gsg-anim-correct-rise {
  0%   { transform: translate(-50%, 0)    scale(0.6); opacity: 0; }
  20%  { transform: translate(-50%, -8px) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -64px) scale(1);   opacity: 0; }
}
@keyframes gsg-anim-correct-shimmer {
  0%   { transform: translateX(-110%); opacity: 0; }
  20%  { opacity: 0.7; }
  100% { transform: translateX(110%);  opacity: 0; }
}

[data-quiz-pick] .gsg-anim-correct-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(173,178,149,0.22);
  margin-left: 10px; position: relative;
  vertical-align: middle;
}
[data-quiz-pick] .gsg-anim-correct-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #ADB295;
  animation: gsg-anim-correct-ring 0.9s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
[data-quiz-pick] .gsg-anim-correct-check {
  color: #ADB295; font-weight: 700; font-size: 14px;
  animation: gsg-anim-correct-check 0.5s cubic-bezier(0.32, 1.6, 0.4, 1) both;
}
[data-quiz-pick] .gsg-anim-correct-label {
  display: inline-block;
  animation: gsg-anim-correct-label 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.gsg-anim-correct-rise {
  position: absolute; left: 50%; bottom: 12px;
  background: #143425; color: #ADB295;
  font-family: 'Mona Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid #ADB295;
  pointer-events: none;
  animation: gsg-anim-correct-rise 1s cubic-bezier(0.22, 0.9, 0.34, 1) forwards;
  letter-spacing: 0.04em;
}
.gsg-anim-correct-shimmer {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; border-radius: inherit;
}
.gsg-anim-correct-shimmer::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.18) 50%,
    rgba(173,178,149,0.32) 55%,
    transparent 70%,
    transparent 100%);
  animation: gsg-anim-correct-shimmer 0.85s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .gsg-anim-correct-ring,
  .gsg-anim-correct-check,
  .gsg-anim-correct-label,
  .gsg-anim-correct-rise,
  .gsg-anim-correct-shimmer::before { animation: none !important; opacity: 1 !important; transform: none !important; }
  .gsg-anim-correct-rise { display: none !important; }
}
/* Quiz pass celebration screen — replaces modal body when a quiz is
   passed. Persistent until the user clicks "Mark complete & continue". */
.gsg-quiz-celebrate {
  text-align: center;
  padding: 32px 24px 36px;
  border-radius: 14px;
  background: linear-gradient(160deg, #143425 0%, #0d2624 100%);
  color: #e8ebe2;
  position: relative;
  overflow: hidden;
}
.gsg-quiz-celebrate-glyph {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #ADB295, #143425);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700;
  margin: 0 auto 18px;
  box-shadow: 0 12px 32px rgba(20,52,37,0.45), 0 0 0 6px rgba(173,178,149,0.18);
  animation: gsg-quiz-glyph-pop 0.55s cubic-bezier(0.32, 1.6, 0.4, 1) both;
}
@keyframes gsg-quiz-glyph-pop {
  0%   { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(0deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}
.gsg-quiz-celebrate-eyebrow {
  font-family: 'Mona Sans', sans-serif;
  font-size: 11px; font-weight: 600; color: #ADB295;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 8px;
}
.gsg-quiz-celebrate-headline {
  font-family: 'Mona Sans', sans-serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600; color: #fff;
  letter-spacing: -0.025em; line-height: 1.05;
  margin: 0 0 10px;
}
.gsg-quiz-celebrate-encourage {
  font-size: 16px; line-height: 1.5; color: #e8ebe2;
  max-width: 460px; margin: 0 auto 22px;
}
.gsg-quiz-celebrate-score {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(173,178,149,0.32);
  border-radius: 16px;
  padding: 18px 36px;
  margin: 0 auto 22px;
  width: fit-content;
  animation: gsg-quiz-score-fade 0.6s ease 0.2s both;
}
@keyframes gsg-quiz-score-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.gsg-quiz-celebrate-score-num {
  font-family: 'Mona Sans', sans-serif;
  font-size: 56px; font-weight: 600;
  color: #fff; letter-spacing: -0.03em; line-height: 1;
}
.gsg-quiz-celebrate-score-fraction {
  font-size: 13px; color: #ADB295;
  letter-spacing: 0.04em; margin-top: 8px;
  text-transform: uppercase; font-weight: 600;
}
.gsg-quiz-celebrate-cta {
  background: #ADB295; color: #0d2624; border-color: #ADB295;
  font-weight: 700; padding: 12px 28px; font-size: 15px;
  letter-spacing: 0.02em;
}
.gsg-quiz-celebrate-cta:hover { background: #fff; border-color: #fff; }
.gsg-quiz-celebrate-foot {
  font-size: 11px; color: #ADB295;
  margin: 16px 0 0; opacity: 0.7;
  letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
  .gsg-quiz-celebrate-glyph,
  .gsg-quiz-celebrate-score { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* === END CLAPP ARCHETYPE WAVE16 MICRO-FEEDBACK v1 === */

/* === CLAPP EMPLOYEE-ROSTER v1 === */
/* Wave 17 — manager-grade roster surface for portal/intake-j2/roster.html.
 * Surfaces (in render order): hero, KPI strip, filter strip, bulk-action bar,
 * roster table, pathway breakdown + coverage gaps + recent activity (3-up),
 * add-employee modal. CLAPP palette only; status colors use sage/forest/mist.
 */

/* Hero */
.gsg-roster-hero {
  display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  background: #f5f5f7;
  border: 1px solid #e8ebe2;
  border-radius: 22px;
  padding: 26px 28px;
  margin: 0 0 18px;
}
.gsg-roster-hero-text { flex: 1 1 480px; min-width: 0; }
.gsg-roster-hero-text h1 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 32px; font-weight: 600; color: #0d2624;
  letter-spacing: -0.02em; margin: 4px 0 8px;
}
.gsg-roster-eyebrow-line {
  font-size: 14px; color: #274543; margin: 0 0 6px;
}
.gsg-roster-eyebrow-line strong { color: #143425; }
.gsg-roster-lead {
  font-size: 14px; color: #5a7566; margin: 0; max-width: 720px; line-height: 1.5;
}
.gsg-roster-hero-cta { flex: 0 0 auto; align-self: stretch; display: flex; align-items: flex-start; }
.gsg-roster-hero-cta .gsg-ob-btn { white-space: nowrap; }

/* KPI strip */
.gsg-roster-kpis {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px; margin: 0 0 18px;
}
@media (max-width: 980px) { .gsg-roster-kpis { grid-template-columns: repeat(2, 1fr); } }
.gsg-roster-kpi {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 32px 20px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; text-align: center;
}
.gsg-roster-kpi-label {
  font-size: 11px; color: #5a7566; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.gsg-roster-kpi-value {
  font-family: 'Mona Sans', sans-serif;
  font-size: 36px; color: #0d2624; font-weight: 700; letter-spacing: -0.02em;
}

/* Incomplete docs warning */
.gsg-ob-doc-incomplete-warn {
  display: flex; align-items: flex-start; gap: 16px;
  background: #fff8ec; border: 1.5px solid #f0a940; border-radius: 14px;
  padding: 18px 22px; margin: 0 0 24px;
}
.gsg-ob-doc-incomplete-warn-icon {
  font-size: 22px; color: #c97b00; flex-shrink: 0; line-height: 1;
}
.gsg-ob-doc-incomplete-warn-title {
  font-family: 'Mona Sans', sans-serif; font-size: 15px; font-weight: 700;
  color: #7a4800; margin: 0 0 4px;
}
.gsg-ob-doc-incomplete-warn-sub {
  font-size: 13px; color: #7a4800; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.gsg-ob-doc-incomplete-filter-btn {
  background: rgba(0,0,0,0.08); border: none; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; color: #7a4800;
  cursor: pointer; white-space: nowrap;
}
.gsg-ob-doc-incomplete-filter-btn:hover { background: rgba(0,0,0,0.14); }

/* Filter strip */
.gsg-roster-filterbar {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 12px 14px; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.gsg-roster-filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gsg-roster-filter-label {
  font-size: 11px; color: #5a7566; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.gsg-roster-chip {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 999px;
  padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 600;
  color: #274543; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.gsg-roster-chip:hover { background: #e8ebe2; }
.gsg-roster-chip.is-on { background: #143425; color: #fff; border-color: #143425; }
.gsg-roster-select, .gsg-roster-search {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 10px;
  padding: 8px 12px; font-family: inherit; font-size: 13px; color: #0d2624;
  min-width: 0;
}
.gsg-roster-search { flex: 1 1 280px; }
.gsg-roster-search:focus, .gsg-roster-select:focus {
  outline: none; border-color: #143425;
}

/* Bulk-action bar */
.gsg-roster-bulkbar {
  display: none;
}
.gsg-roster-bulkbar.is-active {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #143425; color: #fff;
  border-radius: 12px; padding: 10px 16px; margin: 0 0 12px;
}
.gsg-roster-bulkbar.is-active .gsg-ob-btn--ghost {
  background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.2);
}
.gsg-roster-bulkbar.is-active .gsg-ob-btn--ghost:hover {
  background: rgba(255,255,255,0.14); border-color: #fff;
}
.gsg-roster-bulk-count { font-size: 13px; font-weight: 700; }

/* Roster card list */
.gsg-roster-table { margin: 0 0 22px; }
.gsg-roster-cards { display: flex; flex-direction: column; gap: 8px; }
.gsg-roster-card {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.gsg-roster-card:hover { background: #f5f5f7; border-color: #ADB295; }
.gsg-roster-card.gsg-roster-card--archived { opacity: 0.55; }
.gsg-roster-card-check { display: flex; align-items: center; justify-content: center; }
.gsg-roster-card-check input { cursor: pointer; width: 16px; height: 16px; }
.gsg-roster-card-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gsg-roster-emp { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gsg-roster-emp-text { min-width: 0; }
.gsg-roster-emp-name {
  margin: 0; font-weight: 600; color: #0d2624; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsg-roster-emp-meta {
  margin: 2px 0 0; font-size: 12px; color: #5a7566;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gsg-roster-card-tags {
  margin: 6px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.gsg-roster-sup-pill {
  background: #143425; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
}
.gsg-roster-card-right {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  min-width: 260px;
}
.gsg-roster-card-status-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.gsg-roster-card-rel { color: #5a7566; font-size: 12px; white-space: nowrap; }
.gsg-roster-card-progress { width: 100%; }
.gsg-roster-card-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) {
  .gsg-roster-card { grid-template-columns: 32px 1fr; }
  .gsg-roster-card-right { grid-column: 2; align-items: flex-start; min-width: 0; }
}

/* Status badges */
.gsg-roster-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.gsg-roster-status-badge--not_started { background: #e8ebe2; color: #5a7566; }
.gsg-roster-status-badge--in_progress { background: #ADB295; color: #0d2624; }
.gsg-roster-status-badge--complete    { background: #143425; color: #fff; }
.gsg-roster-status-badge--archived    { background: #5a7566; color: #fff; }

/* Completion bar */
.gsg-roster-bar-track {
  height: 6px; background: #f5f5f7; border-radius: 999px; overflow: hidden;
  margin-bottom: 4px;
}
.gsg-roster-bar-fill {
  height: 100%; background: #143425; border-radius: 999px;
  transition: width 0.3s ease;
}
.gsg-roster-bar-pct { font-size: 11px; color: #5a7566; font-weight: 600; }

/* Invite chip */
.gsg-roster-invite-chip {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.gsg-roster-invite-chip.is-accepted { background: #143425; color: #fff; }
.gsg-roster-invite-chip.is-sent     { background: #ADB295; color: #0d2624; }
.gsg-roster-invite-chip.is-none     { background: #f5f5f7; color: #5a7566; border: 1px solid #e8ebe2; }

/* Per-card action buttons */
.gsg-roster-action {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 8px;
  padding: 6px 10px; font-family: inherit; font-size: 12px; font-weight: 600;
  color: #274543; cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.gsg-roster-action:hover { background: #f5f5f7; border-color: #274543; }
.gsg-roster-action--danger { color: #8a6a2f; border-color: rgba(138,106,47,0.32); }
.gsg-roster-action--danger:hover { background: #faf3e6; }

/* Empty state */
.gsg-roster-empty {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 40px 24px; text-align: center; color: #5a7566;
}
.gsg-roster-empty h3 { color: #0d2624; margin: 6px 0 4px; }

/* Trio panel row (pathway / coverage / activity) */
/* Pathway breakdown — full-width row above filters */
.gsg-roster-pathway-full {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 22px 24px; margin: 0 0 14px;
}
.gsg-roster-pathway-full .gsg-roster-panel { background: none; border: none; padding: 0; }

/* Coverage + Activity — 2-col below employee list */
.gsg-roster-trio {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 14px 0 0;
}
@media (max-width: 1100px) { .gsg-roster-trio { grid-template-columns: 1fr; } }
.gsg-roster-panel {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 18px 20px;
}
.gsg-roster-panel-h {
  font-family: 'Mona Sans', sans-serif;
  font-size: 17px; font-weight: 600; color: #0d2624;
  margin: 6px 0 14px;
}
.gsg-roster-panel-foot {
  margin: 14px 0 6px; font-size: 11px; color: #5a7566;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.gsg-roster-panel-loading,
.gsg-roster-panel-empty { font-size: 13px; color: #5a7566; margin: 0; }

/* Mini bar list inside pathway breakdown */
.gsg-roster-mini-row {
  display: grid; grid-template-columns: 130px 1fr 32px;
  gap: 10px; align-items: center; margin: 0 0 6px;
}
.gsg-roster-mini-label { font-size: 12px; color: #274543; }
.gsg-roster-mini-track {
  background: #f5f5f7; height: 8px; border-radius: 999px; overflow: hidden;
}
.gsg-roster-mini-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.3s ease;
}
.gsg-roster-mini-count {
  font-size: 12px; color: #143425; font-weight: 700; text-align: right;
}

/* Coverage gaps list */
.gsg-roster-gap-list {
  list-style: none; margin: 0; padding: 0;
}
.gsg-roster-gap-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #f5f5f7;
}
.gsg-roster-gap-row:last-child { border-bottom: none; }
.gsg-roster-gap-text { flex: 1; min-width: 0; }
.gsg-roster-gap-label { margin: 0; font-size: 13px; font-weight: 600; color: #0d2624; }
.gsg-roster-gap-meta  { margin: 2px 0 0; font-size: 12px; color: #5a7566; }
.gsg-roster-gap-sev {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; flex: 0 0 auto;
}
.gsg-roster-gap-sev--high   { background: #D97757; color: #fff; }
.gsg-roster-gap-sev--medium { background: #8a6a2f; color: #fff; }

/* Activity feed */
.gsg-roster-activity-list { list-style: none; margin: 0; padding: 0; }
.gsg-roster-activity-row {
  display: flex; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid #f5f5f7;
}
.gsg-roster-activity-row:last-child { border-bottom: none; }
.gsg-roster-activity-dot {
  flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px;
  border-radius: 50%; background: #143425;
}
.gsg-roster-activity-text { flex: 1; min-width: 0; }
.gsg-roster-activity-label {
  margin: 0; font-size: 13px; font-weight: 600; color: #0d2624;
}
.gsg-roster-activity-meta {
  margin: 2px 0 0; font-size: 12px; color: #5a7566;
}
.gsg-roster-activity-empty {
  list-style: none; font-size: 13px; color: #5a7566; padding: 6px 0;
}

/* Modal */
.gsg-roster-modal {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(13,38,36,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: gsg-roster-modal-fade 0.18s ease both;
}
@keyframes gsg-roster-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.gsg-roster-modal-card {
  position: relative;
  background: #fff; border-radius: 22px;
  padding: 28px 30px; max-width: 480px; width: 100%;
  box-shadow: 0 30px 80px rgba(13,38,36,0.32);
}
.gsg-roster-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 28px; color: #5a7566; line-height: 1;
}
.gsg-roster-modal-card h3 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 22px; color: #0d2624; margin: 4px 0 8px;
}
.gsg-roster-modal-lead {
  margin: 0 0 18px; color: #5a7566; font-size: 14px; line-height: 1.5;
}
.gsg-roster-form { display: flex; flex-direction: column; gap: 12px; }
.gsg-roster-field {
  display: flex; flex-direction: column; gap: 4px;
}
.gsg-roster-field span {
  font-size: 11px; color: #5a7566; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.gsg-roster-field input {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 14px; color: #0d2624;
}
.gsg-roster-field input:focus { outline: none; border-color: #143425; background: #fff; }
.gsg-roster-form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 6px; flex-wrap: wrap;
}
/* === END CLAPP EMPLOYEE-ROSTER v1 === */

/* === CLAPP HERO-VIDEO LOAD PRIORITY v1 ===
 * On pages with a video hero (.clapp-hero.has-video), defer rendering of
 * everything BELOW the hero so the video gets browser-paint priority and
 * doesn't compete with parallax background images for bandwidth.
 *
 * content-visibility: auto skips off-screen rendering AND defers image
 * loading for those sections.
 * contain-intrinsic-size reserves placeholder space so nothing snaps down
 * the page as the user scrolls and sections render in.
 */
.clapp-hero.has-video ~ * {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
/* The hero itself never gets deferred — it's the visible-on-load region. */
.clapp-hero.has-video {
  content-visibility: visible;
}
/* === END CLAPP HERO-VIDEO LOAD PRIORITY v1 === */

/* === CLAPP REGULATIONS-LIBRARY v1 === */
/* Citation surface for portal/regulations.html. Source of truth for citation
   hover anywhere else in the product. CLAPP palette only; severity stripes
   sage / bronze / rust / deep-rust. */
.gsg-regs-hero {
  padding: 24px 0 18px;
  border-bottom: 1px solid #e8ebe2;
  margin-bottom: 18px;
}
.gsg-regs-h1 {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0d2624;
  margin: 6px 0 8px;
}
.gsg-regs-lead {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #274543;
  margin: 0;
  max-width: 680px;
}
/* ---- Sticky filter strip ---- */
.gsg-regs-filterbar {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: #f5f5f7;
  border: 1px solid #e8ebe2;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 18px;
  box-shadow: 0 2px 10px rgba(13, 38, 36, 0.04);
}
.gsg-regs-search-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.gsg-regs-search {
  flex: 1 1 280px;
  min-width: 240px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #ADB295;
  border-radius: 999px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #0d2624;
}
.gsg-regs-search:focus {
  outline: none;
  border-color: #143425;
  box-shadow: 0 0 0 3px rgba(20, 52, 37, 0.15);
}
.gsg-regs-count {
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #143425;
  background: #fff;
  border: 1px solid #ADB295;
  border-radius: 999px;
  padding: 6px 12px;
}
.gsg-regs-clear {
  background: transparent; border: none;
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: #5a7566; cursor: pointer;
  padding: 6px 8px;
}
.gsg-regs-clear:hover { color: #0d2624; }
.gsg-regs-chips {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.gsg-regs-chipgroup {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 10px;
}
.gsg-regs-chipgroup-label {
  margin: 4px 0 0;
  font-family: 'Mona Sans', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #5a7566;
}
.gsg-regs-chiprow {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.gsg-regs-chip {
  background: #fff;
  border: 1px solid #e8ebe2;
  border-radius: 999px;
  padding: 4px 11px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #274543;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  font-weight: 500;
}
.gsg-regs-chip:hover {
  border-color: #274543;
  color: #0d2624;
}
.gsg-regs-chip.is-on {
  background: #143425;
  border-color: #143425;
  color: #fff;
}
@media (max-width: 720px) {
  .gsg-regs-chipgroup {
    grid-template-columns: 1fr;
  }
}
/* ---- Coverage strip ---- */
.gsg-regs-coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.gsg-regs-cov-card {
  background: #fff;
  border: 1px solid #e8ebe2;
  border-radius: 14px;
  padding: 16px 18px;
}
.gsg-regs-cov-list {
  display: flex; flex-direction: column;
  gap: 4px; margin-top: 8px;
}
.gsg-regs-cov-row {
  display: grid;
  grid-template-columns: 110px 1fr 32px;
  align-items: center;
  gap: 10px;
  background: transparent; border: none;
  padding: 4px 0; cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.gsg-regs-cov-row:hover .gsg-regs-cov-label { color: #0d2624; }
.gsg-regs-cov-label {
  font-size: 12px; color: #274543;
  text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsg-regs-cov-bar {
  display: block; height: 6px;
  background: #e8ebe2; border-radius: 999px;
  overflow: hidden;
}
.gsg-regs-cov-fill {
  display: block; height: 100%;
  border-radius: 999px;
}
.gsg-regs-cov-num {
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px; font-weight: 700;
  color: #0d2624;
  text-align: right;
}
/* ---- Two-column layout: results + updates side panel ---- */
.gsg-regs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: flex-start;
}
@media (max-width: 1100px) {
  .gsg-regs-grid { grid-template-columns: 1fr; }
}
.gsg-regs-grid-main { min-width: 0; }
/* ---- Results list ---- */
.gsg-regs-results-section {
  background: transparent;
  margin-bottom: 18px;
}
.gsg-regs-results-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px;
  margin: 0 0 10px;
}
.gsg-regs-results-h2 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 22px; font-weight: 700;
  color: #0d2624; margin: 0;
  letter-spacing: -0.01em;
}
.gsg-regs-results-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.gsg-regs-row {
  display: block; width: 100%; text-align: left;
  background: #fff;
  border: 1px solid #e8ebe2;
  border-left: 4px solid #ADB295;
  border-radius: 12px;
  padding: 14px 18px;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.gsg-regs-row:hover {
  box-shadow: 0 6px 18px rgba(13, 38, 36, 0.08);
  border-color: #ADB295;
  transform: translateY(-1px);
}
.gsg-regs-row-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin: 0 0 6px;
  font-size: 12px;
}
.gsg-regs-row-id {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 700;
  background: rgba(20, 52, 37, 0.10);
  color: #143425;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.gsg-regs-row-cite {
  color: #0d2624;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.gsg-regs-row-auth {
  color: #5a7566;
  font-size: 12px;
  background: #f5f5f7;
  border-radius: 999px;
  padding: 2px 9px;
}
.gsg-regs-row-date {
  margin-left: auto;
  color: #5a7566;
  font-size: 12px;
  font-family: monospace;
}
.gsg-regs-row-title {
  font-family: 'Mona Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #0d2624;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.gsg-regs-row-summary {
  color: #274543;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.gsg-regs-row-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  border-top: 1px solid #f5f5f7;
  padding-top: 10px;
}
.gsg-regs-row-pills {
  display: flex; flex-wrap: wrap; gap: 4px; flex: 1;
}
.gsg-regs-row-pill {
  display: inline-block;
  background: #e8ebe2;
  color: #274543;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.gsg-regs-row-pill--superseded {
  background: rgba(217, 119, 87, 0.16);
  color: #8a3a1f;
}
.gsg-regs-row-open {
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #143425;
  letter-spacing: 0.02em;
}
.gsg-regs-empty {
  background: #fff;
  border: 1px dashed #e8ebe2;
  border-radius: 12px;
  padding: 28px 22px;
  text-align: center;
}
/* ---- Export row ---- */
.gsg-regs-export {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.gsg-regs-export-btn {
  background: #fff;
  border: 1px solid #ADB295;
  border-radius: 999px;
  padding: 5px 14px;
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #143425;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease;
}
.gsg-regs-export-btn:hover {
  background: #143425;
  color: #fff;
  border-color: #143425;
}
/* ---- Updates side panel ---- */
.gsg-regs-updates {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid #e8ebe2;
  border-radius: 14px;
  padding: 18px 18px 12px;
}
.gsg-regs-updates-h3 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0d2624;
  margin: 4px 0 12px;
  letter-spacing: -0.01em;
}
.gsg-regs-update-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.gsg-regs-update-row {
  display: flex; flex-direction: column;
  gap: 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f5f5f7;
  text-align: left;
  padding: 10px 0;
  font-family: inherit;
  cursor: pointer;
}
.gsg-regs-update-row:last-child { border-bottom: none; }
.gsg-regs-update-row:hover .gsg-regs-update-title { color: #143425; }
.gsg-regs-update-date {
  font-family: monospace;
  font-size: 11px;
  color: #5a7566;
}
.gsg-regs-update-title {
  font-family: 'Mona Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0d2624;
  line-height: 1.3;
}
.gsg-regs-update-diff {
  font-size: 11px;
  color: #5a7566;
  margin-top: 2px;
}
@media (max-width: 1100px) {
  .gsg-regs-updates { position: static; }
}
/* === END CLAPP REGULATIONS-LIBRARY v1 === */

/* === CLAPP BANKING-READINESS v1 === */
/* Decision-grade financial-intelligence surface (Master Plan §27A/§32/§33).
   Tier badge palette per spec: eligible=forest #143425, conditional=bronze
   #8a6a2f, not_eligible=rust #D97757. Admin/compliance-officer only. */

.gsg-bank-empty { padding: 40px; text-align: center; }
.gsg-bank-empty-line {
  color: #5a7566; font-size: 13px; padding: 24px;
  background: #f5f5f7; border: 1px dashed #e8ebe2; border-radius: 12px;
  text-align: center; margin: 8px 0 0;
}

/* ----- Hero --------------------------------------------------------------- */
.gsg-bank-hero {
  background: linear-gradient(180deg, #fff 0%, #f5f5f7 100%);
  border: 1px solid #e8ebe2; border-radius: 18px;
  padding: 28px 32px; margin: 0 0 22px;
}
.gsg-bank-hero--empty { text-align: left; }
.gsg-bank-hero-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.gsg-bank-hero-title {
  margin: 6px 0 4px; color: #0d2624;
  font-family: 'Mona Sans', 'DM Sans', sans-serif; font-weight: 700;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.01em;
}
.gsg-bank-hero-subhead {
  margin: 0; color: #5a7566; font-size: 13px;
  letter-spacing: 0.01em;
}
.gsg-bank-hero-grid {
  display: grid; grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 24px; align-items: center;
}
.gsg-bank-hero-score {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 16px 20px;
}
.gsg-bank-hero-num {
  margin: 4px 0 2px; color: #0d2624;
  font-family: 'Mona Sans', sans-serif; font-weight: 700;
  font-size: 48px; line-height: 1; letter-spacing: -0.02em;
}
.gsg-bank-hero-num span {
  font-size: 16px; color: #5a7566; font-weight: 600;
  margin-left: 4px;
}
.gsg-bank-hero-band {
  margin: 4px 0 0; color: #274543;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.gsg-bank-hero-lead p {
  margin: 0 0 6px; color: #274543;
  font-size: 14px; line-height: 1.55;
}
.gsg-bank-hero-lead code, .gsg-bank-hero-num code, .gsg-bank-hero-lead strong {
  font-family: 'DM Sans', monospace; font-size: 12px;
  background: #e8ebe2; padding: 1px 6px; border-radius: 4px;
}

/* Tier badge --------------------------------------------------------------- */
.gsg-bank-tier {
  display: inline-flex; align-items: center; padding: 8px 14px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(13, 38, 36, 0.15);
}

/* ----- Section shell ------------------------------------------------------ */
.gsg-bank-section {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 16px;
  padding: 22px 26px; margin: 0 0 18px;
}
.gsg-bank-section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.gsg-bank-section-title {
  margin: 4px 0 4px; color: #0d2624;
  font-family: 'Mona Sans', sans-serif; font-weight: 600;
  font-size: 20px; line-height: 1.25;
}
.gsg-bank-section-sub {
  margin: 0; color: #5a7566; font-size: 13px; line-height: 1.5;
  max-width: 720px;
}

.gsg-bank-mini {
  font-size: 11px; letter-spacing: 0.02em;
}

/* Eligibility meta --------------------------------------------------------- */
.gsg-bank-elig-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin: 4px 0 12px; padding: 0;
}
.gsg-bank-elig-meta div { margin: 0; }
.gsg-bank-elig-meta dt {
  font-size: 11px; color: #5a7566;
  text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 2px;
}
.gsg-bank-elig-meta dd {
  margin: 0; color: #0d2624; font-size: 13px;
}
.gsg-bank-elig-meta code {
  background: #e8ebe2; padding: 1px 6px; border-radius: 4px;
  font-family: 'DM Sans', monospace; font-size: 11px;
}

.gsg-bank-reason-list { list-style: none; padding: 0; margin: 4px 0 0; }
.gsg-bank-reason {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #f5f5f7;
  font-size: 13px; color: #0d2624;
}
.gsg-bank-reason:last-child { border-bottom: none; }
.gsg-bank-reason code {
  font-family: 'DM Sans', monospace; font-size: 12px; color: #274543;
}
.gsg-bank-reason-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #ADB295;
}
.gsg-bank-reason-dot[data-tier="eligible"] { background: #143425; }
.gsg-bank-reason-dot[data-tier="conditional"] { background: #8a6a2f; }
.gsg-bank-reason-dot[data-tier="not_eligible"] { background: #D97757; }

/* Risk-factor cards -------------------------------------------------------- */
.gsg-bank-rf-cat { margin-bottom: 16px; }
.gsg-bank-rf-cat-title {
  margin: 4px 0 10px; color: #0d2624;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gsg-bank-rf-cat-title span {
  display: inline-block; margin-left: 6px;
  background: #e8ebe2; color: #274543;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.gsg-bank-rf-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.gsg-bank-rf-card {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 12px;
  padding: 12px 14px;
}
.gsg-bank-rf-card header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 6px;
}
.gsg-bank-rf-weight {
  font-size: 11px; font-weight: 700; color: #5a7566;
  background: #fff; padding: 2px 8px; border-radius: 999px;
  border: 1px solid #e8ebe2;
}
.gsg-bank-rf-desc {
  margin: 0 0 6px; color: #0d2624; font-size: 13px; line-height: 1.45;
}
.gsg-bank-rf-source, .gsg-bank-rf-detected, .gsg-bank-rf-mit {
  margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: #274543;
}
.gsg-bank-rf-source code {
  font-family: 'DM Sans', monospace; font-size: 11px;
  background: #fff; padding: 1px 6px; border-radius: 4px;
}

/* Snapshot tiles ----------------------------------------------------------- */
.gsg-bank-tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.gsg-bank-tile {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 12px;
  padding: 12px 14px; text-align: left;
}
.gsg-bank-tile-label {
  margin: 0 0 4px; color: #5a7566;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
}
.gsg-bank-tile-value {
  margin: 2px 0; color: #0d2624;
  font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: 22px;
  line-height: 1.15;
}
.gsg-bank-tile-unit {
  font-size: 12px; color: #5a7566; font-weight: 500; margin-left: 2px;
}
.gsg-bank-tile-sub {
  margin: 4px 0 0; color: #5a7566; font-size: 11px;
}
.gsg-bank-status-pill {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: #ADB295; color: #0d2624; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gsg-bank-status-pill[data-status="ready"] { background: #143425; color: #fff; }
.gsg-bank-status-pill[data-status="conditional"] { background: #8a6a2f; color: #fff; }
.gsg-bank-status-pill[data-status="not_ready"] { background: #D97757; color: #fff; }

/* Tables ------------------------------------------------------------------- */
.gsg-bank-table-wrap { overflow-x: auto; margin: 4px 0 0; }
.gsg-bank-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; color: #0d2624;
  background: #fff;
}
.gsg-bank-table thead tr {
  background: #f5f5f7;
}
.gsg-bank-table th {
  text-align: left; padding: 10px 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #274543; font-weight: 600;
  border-bottom: 1px solid #e8ebe2;
}
.gsg-bank-table td {
  padding: 10px 12px; border-bottom: 1px solid #f5f5f7;
  vertical-align: top;
}
.gsg-bank-table tbody tr:last-child td { border-bottom: none; }
.gsg-bank-table code {
  font-family: 'DM Sans', monospace; font-size: 11px;
  background: #f5f5f7; padding: 1px 6px; border-radius: 4px;
}
.gsg-bank-stage-pill {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: #ADB295; color: #0d2624; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gsg-bank-stage-pill[data-stage="filed"],
.gsg-bank-stage-pill[data-stage="closed"] { background: #143425; color: #fff; }
.gsg-bank-stage-pill[data-stage="filing_in_progress"] { background: #8a6a2f; color: #fff; }
.gsg-bank-stage-pill[data-stage="threshold_met"] { background: #D97757; color: #fff; }
.gsg-bank-stage-pill[data-stage="monitoring"] { background: #ADB295; color: #0d2624; }

/* Filter chips ------------------------------------------------------------- */
.gsg-bank-filter {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px;
}
.gsg-bank-filter button {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 999px;
  padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 600;
  color: #274543; cursor: pointer; letter-spacing: 0.02em;
}
.gsg-bank-filter button:hover { border-color: #274543; }
.gsg-bank-filter button.is-on { background: #0d2624; color: #fff; border-color: #0d2624; }

/* Reports panel ------------------------------------------------------------ */
.gsg-bank-report-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.gsg-bank-report-card {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column;
}
.gsg-bank-report-card h3 {
  margin: 0 0 6px; color: #0d2624;
  font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: 15px;
  line-height: 1.25;
}
.gsg-bank-report-card p {
  margin: 0 0 6px; color: #274543; font-size: 13px; line-height: 1.45;
}
.gsg-bank-report-card code {
  font-family: 'DM Sans', monospace; font-size: 11px;
  background: #fff; padding: 1px 6px; border-radius: 4px;
}
.gsg-bank-report-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px;
}
.gsg-bank-report-actions .gsg-ob-btn { font-size: 12px; padding: 8px 12px; }

/* External-institution form ----------------------------------------------- */
.gsg-bank-ext-form {
  background: #f5f5f7; border: 1px dashed #ADB295; border-radius: 12px;
  padding: 14px 16px; margin-top: 12px;
}
.gsg-bank-ext-row {
  display: grid; grid-template-columns: 1.4fr 0.7fr 1fr auto;
  gap: 8px; align-items: stretch; margin: 8px 0 6px;
}
.gsg-bank-ext-form input, .gsg-bank-ext-form select {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 8px;
  padding: 8px 12px; font-family: inherit; font-size: 13px; color: #0d2624;
}
.gsg-bank-ext-form input:focus, .gsg-bank-ext-form select:focus {
  outline: none; border-color: #143425;
}

/* Permission footer ------------------------------------------------------- */
.gsg-bank-perm-foot {
  margin: 22px 0 8px; text-align: center;
  font-size: 11px; color: #5a7566; line-height: 1.5;
  letter-spacing: 0.02em;
}
.gsg-bank-perm-foot code {
  font-family: 'DM Sans', monospace; font-size: 11px;
  background: #e8ebe2; padding: 1px 6px; border-radius: 4px;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 720px) {
  .gsg-bank-hero-grid { grid-template-columns: 1fr; }
  .gsg-bank-ext-row { grid-template-columns: 1fr; }
  .gsg-bank-hero-num { font-size: 36px; }
  .gsg-bank-section { padding: 18px 18px; }
  .gsg-bank-hero { padding: 22px 20px; }
}

/* === END CLAPP BANKING-READINESS v1 === */

/* === CLAPP BANKING-READINESS-INTRO v1 === */
/* Plain-English handheld intro band that sits at the top of the
   Banking & Lending Readiness page. Hero card + 3-step "what you'll
   find here" row. Forest/sage/bronze/rust pill states map to the
   four eligibility tiers (bankable / almost-there / not-yet / awaiting).
   Self-contained — does NOT touch the BANKING-READINESS or financing
   blocks above. */

.gsg-bri-band {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0 0 28px;
}

.gsg-bri-hero {
  position: relative;
  background: linear-gradient(135deg, #0d2624 0%, #143425 55%, #274543 100%);
  color: #e8ebe2;
  border-radius: 22px;
  padding: 40px 44px 38px;
  overflow: hidden;
  box-shadow: 0 28px 60px -32px rgba(13, 38, 36, 0.55);
}

.gsg-bri-hero-eyebrow {
  font-family: "Mona Sans", "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ADB295;
  margin: 0 0 14px;
}

.gsg-bri-hero-title {
  font-family: "Mona Sans", "Inter", system-ui, sans-serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 16px;
}

.gsg-bri-hero-lead {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(232, 235, 226, 0.9);
  max-width: 640px;
  margin: 0 0 22px;
}

.gsg-bri-pill-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px;
}

.gsg-bri-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: "Mona Sans", "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gsg-bri-pill--bankable {
  background: #143425;
  color: #fff;
  border: 1px solid #ADB295;
}

.gsg-bri-pill--almost {
  background: #8a6a2f;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}

.gsg-bri-pill--notyet {
  background: #D97757;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}

.gsg-bri-pill--awaiting {
  background: #ADB295;
  color: #0d2624;
  border: 1px solid rgba(13,38,36,0.15);
}

.gsg-bri-pill-note {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(232, 235, 226, 0.85);
  max-width: 520px;
}

.gsg-bri-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 26px;
  font-family: "Mona Sans", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: #ADB295;
  color: #0d2624;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.gsg-bri-cta:hover {
  background: #c1c6ad;
  transform: translateY(-1px);
  color: #0d2624;
}

.gsg-bri-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.gsg-bri-step {
  background: #fff;
  border: 1px solid #ADB295;
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gsg-bri-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #ADB295;
  color: #0d2624;
  font-family: "Mona Sans", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
}

.gsg-bri-step-label {
  font-family: "Mona Sans", "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0d2624;
  margin: 4px 0 0;
  line-height: 1.25;
}

.gsg-bri-step-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #274543;
  margin: 0;
}

@media (max-width: 820px) {
  .gsg-bri-hero { padding: 30px 26px 28px; border-radius: 18px; }
  .gsg-bri-steps { grid-template-columns: 1fr; }
  .gsg-bri-cta { width: 100%; min-width: 0; }
}

/* === END CLAPP BANKING-READINESS-INTRO v1 === */

/* === CLAPP COMPLIANCE-ROADMAP v1 === */
/* portal/review.html — N1..N5 surfaces. CLAPP forest/sage palette only;
   rust #D97757 reserved for past-due / critical severity. */

.cr-hero {
  background: #f5f5f7;
  border: 1px solid #e8ebe2;
  border-radius: 22px;
  padding: 32px 36px;
  margin: 0 0 26px;
}
.cr-hero-inner { max-width: 1080px; }
.cr-hero-meta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 14px;
}
.cr-hero-meta-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; color: #5a7566;
}

.cr-approve-banner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #143425; color: #e8ebe2;
  padding: 14px 22px; border-radius: 14px;
  margin: 0 0 22px;
  position: sticky; top: 86px; z-index: 25;
  box-shadow: 0 4px 18px rgba(13,38,36,0.12);
}
.cr-approve-banner-text { flex: 1; font-size: 14px; line-height: 1.5; min-width: 220px; }
.cr-approve-banner-text code {
  background: rgba(255,255,255,0.08); color: #ADB295;
  padding: 1px 8px; border-radius: 4px;
  font-family: 'DM Sans', monospace; font-size: 12px;
}
.cr-approve-banner-btn {
  background: #ADB295; color: #0d2624; border: 0;
  padding: 10px 18px; border-radius: 10px;
  font-family: inherit; font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em; cursor: pointer;
  white-space: nowrap;
}
.cr-approve-banner-btn:hover { background: #fff; }

/* KPI strip --------------------------------------------------------------- */
.cr-kpi-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 28px;
}
@media (max-width: 1100px) { .cr-kpi-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .cr-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.cr-kpi-tile {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 14px 16px;
}
.cr-kpi-label {
  font-family: 'Mona Sans', sans-serif;
  font-size: 10px; font-weight: 600; color: #5a7566;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 4px;
}
.cr-kpi-value {
  font-family: 'Mona Sans', sans-serif;
  font-size: 28px; font-weight: 600; color: #0d2624;
  margin: 0; line-height: 1.05; letter-spacing: -0.02em;
}
.cr-kpi-sub { margin: 4px 0 0; font-size: 11px; color: #5a7566; }

/* Section frame ----------------------------------------------------------- */
.cr-section {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 18px;
  padding: 26px 28px;
  margin: 0 0 22px;
}
.cr-section-head { margin: 0 0 18px; max-width: 760px; }
.cr-section-title {
  font-family: 'Mona Sans', sans-serif;
  font-size: 26px; font-weight: 600; color: #0d2624;
  letter-spacing: -0.02em; margin: 4px 0 6px;
}
.cr-section-sub {
  font-size: 14px; color: #5a7566; line-height: 1.55; margin: 0;
}

/* N1 — Compliance Map ----------------------------------------------------- */
.cr-n1-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
}
.cr-n1-card {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 18px 20px;
}
.cr-n1-card-head { margin: 0 0 12px; }
.cr-n1-card-eyebrow {
  font-family: 'Mona Sans', sans-serif;
  font-size: 10px; font-weight: 600; color: #5a7566;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 4px;
}
.cr-n1-card-title {
  font-family: 'Mona Sans', sans-serif;
  font-size: 18px; font-weight: 600; color: #0d2624;
  text-transform: capitalize; margin: 0 0 6px;
}
.cr-n1-card-link {
  font-size: 12px; color: #274543; font-weight: 600;
  text-decoration: none; letter-spacing: 0.02em;
}
.cr-n1-card-link:hover { color: #0d2624; }
.cr-n1-list { list-style: none; padding: 0; margin: 0; }
.cr-n1-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #e8ebe2;
}
.cr-n1-row:first-child { border-top: 0; }
.cr-n1-row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cr-n1-kind {
  font-family: 'Mona Sans', sans-serif;
  font-size: 10px; font-weight: 600; color: #fff;
  background: #143425; padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.cr-n1-title {
  font-size: 14px; color: #0d2624; font-weight: 600;
  text-transform: capitalize;
}
.cr-n1-sub { font-size: 12px; color: #5a7566; }
.cr-n1-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-n1-cite-title {
  grid-column: 1 / -1;
  margin: 2px 0 0; font-size: 12px; color: #5a7566;
  font-style: italic; line-height: 1.4;
}
.cr-auth-chip {
  font-family: 'Mona Sans', sans-serif;
  font-size: 10px; font-weight: 600; color: #274543;
  background: #e8ebe2; padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.04em;
}

/* N2 — Training Matrix ---------------------------------------------------- */
.cr-mtx-wrap { }
.cr-mtx-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid #e8ebe2; }
.cr-mtx { width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif; }
.cr-mtx thead th { background: #143425; color: #e8ebe2; padding: 10px 12px; text-align: left; vertical-align: bottom; font-weight: 600; font-size: 12px; }
.cr-mtx th.cr-mtx-col { text-align: center; min-width: 84px; }
.cr-mtx th.cr-mtx-col span { display: block; }
.cr-mtx-col-id { font-family: 'DM Sans', monospace; font-size: 10px; opacity: 0.7; margin-top: 2px; font-weight: 400; }
.cr-mtx tbody tr { border-top: 1px solid #e8ebe2; }
.cr-mtx tbody tr:hover { background: #f5f5f7; }
.cr-mtx td { padding: 10px 12px; vertical-align: middle; }
.cr-mtx-empname { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.cr-mtx-emplink { color: #0d2624; font-weight: 600; text-decoration: none; font-size: 13px; }
.cr-mtx-emplink:hover { color: #143425; text-decoration: underline; }
.cr-mtx-empdept { font-size: 11px; color: #5a7566; text-transform: capitalize; }
.cr-mtx-pathway-pill {
  font-family: 'Mona Sans', sans-serif;
  font-size: 10px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; letter-spacing: 0.04em;
}
.cr-mtx-pathway-pill--lead { background: #143425; color: #fff; }
.cr-mtx-pathway-pill--emp { background: #e8ebe2; color: #274543; }
.cr-mtx-cell { text-align: center; padding: 8px; }
.cr-mtx-cell .cr-mtx-dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: #e8ebe2; border: 1px solid #ADB295;
}
.cr-mtx-cell--complete .cr-mtx-dot { background: #143425; border-color: #143425; }
.cr-mtx-cell--in_progress .cr-mtx-dot { background: #ADB295; border-color: #274543; }
.cr-mtx-cell--open .cr-mtx-dot { background: #fff; border-color: #274543; }
.cr-mtx-cell--pending .cr-mtx-dot { background: #fff; border-color: #8a6a2f; border-style: dashed; }
.cr-mtx-cell--overdue .cr-mtx-dot { background: #D97757; border-color: #8a3a1f; }
.cr-mtx-cell--na .cr-mtx-dot { background: transparent; border-color: #e8ebe2; }
.cr-mtx-cell--more { font-size: 11px; color: #5a7566; font-weight: 600; }
.cr-mtx-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 14px 0 0; font-size: 11px; color: #5a7566;
}
.cr-mtx-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.cr-mtx-leg-item .cr-mtx-dot { width: 11px; height: 11px; }

/* Empty state shared by N2 ------------------------------------------------ */
.cr-empty {
  background: #143425; color: #e8ebe2;
  border-radius: 16px; padding: 32px 28px;
}
.cr-empty .gsg-ob-eyebrow { color: #ADB295; }
.cr-empty-title { font-family: 'Mona Sans', sans-serif; color: #fff; font-size: 22px; margin: 6px 0 8px; }
.cr-empty-body { color: #ADB295; font-size: 14px; line-height: 1.55; margin: 0 0 14px; max-width: 600px; }

/* N3 — Required vs Recommended ------------------------------------------- */
.cr-n3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .cr-n3-grid { grid-template-columns: 1fr; } }
.cr-n3-col {
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 18px 20px;
}
.cr-n3-col--rec { background: #fff; }
.cr-n3-head { margin: 0 0 8px; }
.cr-n3-headsub { margin: 4px 0 0; font-size: 12px; color: #5a7566; }
.cr-n3-list { list-style: none; padding: 0; margin: 0; }
.cr-n3-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 12px 0; border-top: 1px solid #e8ebe2;
  align-items: flex-start;
}
.cr-n3-row:first-child { border-top: 0; }
.cr-n3-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cr-n3-title { color: #0d2624; font-size: 14px; }
.cr-n3-id { font-family: 'DM Sans', monospace; font-size: 11px; color: #5a7566; background: #e8ebe2; padding: 1px 6px; border-radius: 4px; }
.cr-n3-rationale { font-size: 12px; color: #5a7566; flex-basis: 100%; }
.cr-n3-src { font-size: 11px; color: #5a7566; text-transform: capitalize; flex-basis: 100%; }

/* N4 — Gap Analysis ------------------------------------------------------- */
.cr-n4-group { margin: 0 0 18px; }
.cr-n4-group-head {
  font-family: 'Mona Sans', sans-serif;
  font-size: 13px; font-weight: 600; color: #0d2624;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 10px;
}
.cr-n4-card {
  background: #f5f5f7; border-radius: 12px; padding: 16px 18px;
  border-left: 4px solid #ADB295;
  margin: 0 0 10px;
}
.cr-n4-card--critical { border-left-color: #D97757; background: rgba(217,119,87,0.06); }
.cr-n4-card--high     { border-left-color: #8a6a2f; background: rgba(138,106,47,0.06); }
.cr-n4-card--moderate { border-left-color: #274543; }
.cr-n4-card--low      { border-left-color: #ADB295; }
.cr-n4-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 10px;
}
.cr-n4-card-title { color: #0d2624; font-size: 15px; }
.cr-n4-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cr-n4-srcchip { font-family: 'DM Sans', monospace; font-size: 11px; color: #5a7566; background: #e8ebe2; padding: 2px 8px; border-radius: 4px; }
.cr-n4-days { font-size: 11px; color: #8a3a1f; font-weight: 600; }
.cr-n4-who  { font-size: 11px; color: #5a7566; }
.cr-n4-dl { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
@media (min-width: 720px) { .cr-n4-dl { grid-template-columns: 110px 1fr; column-gap: 16px; } }
.cr-n4-dl > div { display: contents; }
.cr-n4-dl dt {
  font-family: 'Mona Sans', sans-serif;
  font-size: 10px; font-weight: 600; color: #5a7566;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 4px;
}
.cr-n4-dl dd { margin: 0; font-size: 13px; color: #0d2624; line-height: 1.5; }

/* N5 — Roadmap timeline --------------------------------------------------- */
.cr-n5-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.cr-n5-timeline::before {
  content: ""; position: absolute; left: 19px; top: 12px; bottom: 12px;
  width: 2px; background: #e8ebe2;
}
.cr-n5-item { display: flex; gap: 18px; margin: 0 0 16px; position: relative; }
.cr-n5-marker {
  flex: 0 0 40px; height: 40px; border-radius: 50%;
  background: #143425; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: 14px;
  z-index: 1;
}
.cr-n5-item.is-complete .cr-n5-marker { background: #274543; }
.cr-n5-item.is-pastdue  .cr-n5-marker { background: #D97757; }
.cr-n5-card {
  flex: 1; background: #f5f5f7; border: 1px solid #e8ebe2;
  border-radius: 12px; padding: 16px 20px;
}
.cr-n5-item.is-pastdue .cr-n5-card { border-color: #D97757; background: rgba(217,119,87,0.06); }
.cr-n5-card-head { margin: 0 0 10px; }
.cr-n5-target {
  font-family: 'Mona Sans', sans-serif;
  font-size: 11px; font-weight: 600; color: #5a7566;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 4px;
}
.cr-n5-pastdue { color: #D97757; font-weight: 700; }
.cr-n5-name { font-family: 'Mona Sans', sans-serif; color: #0d2624; font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.cr-n5-owner { margin: 0; font-size: 12px; color: #5a7566; text-transform: capitalize; }
.cr-n5-tasks { list-style: disc; padding-left: 20px; margin: 8px 0 0; color: #274543; font-size: 13px; }
.cr-n5-tasks li { margin: 4px 0; }
.cr-n5-deps { margin: 8px 0 0; font-size: 12px; color: #5a7566; }
.cr-n5-deps-label { font-weight: 600; color: #274543; margin-right: 4px; }

/* Approval card (footer) -------------------------------------------------- */
.cr-approve-card {
  background: #143425; color: #e8ebe2;
  border-radius: 18px; padding: 26px 30px;
  display: grid; grid-template-columns: 1fr auto; gap: 16px 24px;
  align-items: center;
  margin: 0 0 24px;
}
@media (max-width: 720px) { .cr-approve-card { grid-template-columns: 1fr; } }
.cr-approve-meta { }
.cr-approve-version { font-family: 'Mona Sans', sans-serif; color: #fff; font-size: 22px; margin: 6px 0 4px; font-weight: 600; }
.cr-approve-stamp { font-size: 12px; color: #ADB295; margin: 0; }
.cr-approve-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cr-approve-card .gsg-ob-btn--ghost {
  background: transparent; color: #e8ebe2; border-color: #ADB295;
}
.cr-approve-card .gsg-ob-btn--ghost:hover { background: #ADB295; color: #0d2624; }
.cr-approve-note {
  grid-column: 1 / -1;
  margin: 0; font-size: 11px; color: #ADB295; line-height: 1.5;
}

/* === END CLAPP COMPLIANCE-ROADMAP v1 === */

/* === CLAPP COMPLIANCE-ROADMAP-INTRO v1 === */
/* Plain-English intro band that sits above the rules-engine hero on the
   Compliance Roadmap page. Hero gradient + 3-step explainer for non-compliance
   readers. Forest/sage palette only — no neon. */

.cri-band {
  display: block;
  margin: 0 0 28px;
}

.cri-hero {
  background: linear-gradient(135deg, #0d2624 0%, #143425 55%, #274543 100%);
  border-radius: 22px;
  padding: 40px 44px;
  color: #fff;
  box-shadow: 0 12px 40px rgba(13, 38, 36, 0.18);
}
.cri-hero-text { max-width: 720px; }
.cri-hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ADB295;
  margin: 0 0 12px;
}
.cri-hero-title {
  font-family: 'Mona Sans', 'Mona Sans VF', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 16px;
}
.cri-hero-lead {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px;
  margin: 0 0 22px;
}

.cri-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.cri-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.cri-pill--pending {
  background: rgba(138, 106, 47, 0.22);
  color: #f1d997;
  border-color: rgba(138, 106, 47, 0.55);
}
.cri-pill--active {
  background: rgba(173, 178, 149, 0.22);
  color: #ADB295;
  border-color: rgba(173, 178, 149, 0.55);
}
.cri-pill--awaiting,
.cri-pill--draft {
  background: rgba(232, 235, 226, 0.16);
  color: #e8ebe2;
  border-color: rgba(232, 235, 226, 0.40);
}
.cri-pill-copy {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

.cri-cta-row { margin-top: 4px; }
.cri-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ADB295;
  color: #0d2624;
  border: none;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  min-width: 240px;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.cri-cta:hover { background: #c2c8a9; }
.cri-cta:active { transform: translateY(1px); }
.cri-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cri-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.cri-step {
  background: #fff;
  border: 1px solid #ADB295;
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cri-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: #ADB295;
  color: #0d2624;
  font-family: 'Mona Sans', 'Mona Sans VF', sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.cri-step-title {
  margin: 0;
  font-family: 'Mona Sans', 'Mona Sans VF', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0d2624;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.cri-step-body {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #274543;
}

@media (max-width: 880px) {
  .cri-hero { padding: 30px 26px; }
  .cri-steps { grid-template-columns: 1fr; }
  .cri-cta { width: 100%; min-width: 0; }
}

/* === END CLAPP COMPLIANCE-ROADMAP-INTRO v1 === */



/* === CLAPP TRAINING-PROGRAMS v1 === */
/* Training Programs page — renderReview replacement. Replaces old Compliance Roadmap
   (N-outputs) with a per-phase employee completion view with print support. */

.gsg-tp-wrap { max-width: 900px; padding: 32px 0; }

.gsg-tp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.gsg-tp-h1 { margin: 4px 0 8px; font-size: 28px; color: #0d2624; }
.gsg-tp-lead { color: #5a7566; max-width: 560px; margin: 0; line-height: 1.6; }

.gsg-tp-phase {
  margin-bottom: 48px;
  break-inside: avoid;
}

.gsg-tp-phase-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.gsg-tp-phase-title { margin: 0; font-size: 20px; color: #0d2624; }
.gsg-tp-phase-count { margin: 4px 0 0; color: #5a7566; font-size: 13px; }

.gsg-tp-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(13,38,36,.06);
}

.gsg-tp-th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  letter-spacing: .06em;
  color: #5a7566;
  font-weight: 600;
  text-transform: uppercase;
  background: #f5f5f7;
}

.gsg-tp-td {
  padding: 11px 16px;
  border-bottom: 1px solid #e8ebe2;
  font-size: 14px;
  color: #0d2624;
}

.gsg-tp-td--muted { color: #5a7566; }

.gsg-tp-empty {
  padding: 16px;
  color: #ADB295;
  text-align: center;
  font-size: 14px;
}

/* Print styles */
@media print {
  .no-print { display: none !important; }
  .gsg-tp-wrap { max-width: 100%; padding: 0; }
  .gsg-tp-phase { break-inside: avoid; page-break-inside: avoid; }
  .gsg-tp-table { box-shadow: none; border: 1px solid #ccc; }
  .gsg-emp-sidenav,
  .gsg-emp-shell > :not([data-portal-route-host]),
  [data-portal-hero],
  .gsg-ob-portal-header { display: none !important; }
  body { background: #fff !important; }
}
/* === END CLAPP TRAINING-PROGRAMS v1 === */

/* === CLAPP BANKING-READINESS-PREFLIGHT v1 === */
/* How-it-works + document checklist before the financing form. */

.gsg-br-section-title { margin: 0 0 16px; font-size: 18px; color: #0d2624; }

.gsg-br-how { margin-bottom: 40px; }
.gsg-br-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.gsg-br-step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid #e8ebe2;
}
.gsg-br-step:last-child { border-bottom: none; }
.gsg-br-step-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: #143425; color: #e8ebe2;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-top: 1px;
}
.gsg-br-step div strong { display: block; color: #0d2624; font-size: 15px; margin-bottom: 4px; }
.gsg-br-step div p { margin: 0; color: #5a7566; font-size: 14px; line-height: 1.5; }

.gsg-br-docs { margin-bottom: 40px; }

.gsg-br-status {
  padding: 10px 14px; border-radius: 6px; font-size: 13px;
  margin: 0 0 14px; font-weight: 500;
}
.gsg-br-status--ok   { background: #e8ebe2; color: #143425; }
.gsg-br-status--warn { background: #fdf3ee; color: #8a3a1a; }

.gsg-br-doc-list { list-style: none; margin: 0; padding: 0; }
.gsg-br-doc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid #e8ebe2;
}
.gsg-br-doc-row:last-child { border-bottom: none; }
.gsg-br-doc-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.gsg-br-doc-icon--ok   { background: #143425; color: #e8ebe2; }
.gsg-br-doc-icon--miss { border: 1.5px solid #ADB295; color: #ADB295; }
.gsg-br-doc-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.gsg-br-doc-label  { font-size: 14px; color: #0d2624; font-weight: 500; }
.gsg-br-doc-detail { font-size: 12px; color: #5a7566; }
.gsg-br-doc-tag {
  flex-shrink: 0; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.gsg-br-doc-tag--need { background: #fdf3ee; color: #8a3a1a; }
.gsg-br-doc-tag--opt  { background: #f5f5f7; color: #5a7566; }
.gsg-br-doc-tag--ok   { background: #e8ebe2; color: #143425; }

/* Step wizard panels */
.gsg-br-step-panel {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 20px;
  padding: 32px; margin-bottom: 28px;
}
.gsg-br-step-panel--hidden { display: none; }
.gsg-br-step-panel-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  flex-wrap: wrap;
}
.gsg-br-step-badge {
  flex-shrink: 0; background: #0d2624; color: #e8ebe2;
  font-family: 'Mona Sans', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px;
}
.gsg-br-step-panel-foot {
  margin-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.gsg-br-step-skip { margin: 0; font-size: 13px; color: #ADB295; }

/* Doc progress bar */
.gsg-br-doc-progress {
  height: 5px; background: #e8ebe2; border-radius: 3px; margin: 0 0 16px; overflow: hidden;
}
.gsg-br-doc-progress-fill { height: 100%; background: #143425; border-radius: 3px; transition: width .4s ease; }

/* Per-doc upload button */
.gsg-br-upload-btn {
  flex-shrink: 0; cursor: pointer;
  background: #f5f5f7; border: 1px solid #e8ebe2; border-radius: 8px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; color: #274543;
  white-space: nowrap; transition: background .15s;
}
.gsg-br-upload-btn:hover { background: #e8ebe2; }
/* Banking readiness transition text */
.gsg-br-transition {
  font-family: 'Mona Sans', sans-serif; font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 600; color: #0d2624; text-align: center;
  margin: 0 0 20px; padding: 16px 24px;
  background: #e8ebe2; border-radius: 12px;
}

/* Calendar events — fixed height, truncated text, icon + tooltip */
.gsg-cal-event {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  max-width: 100%; display: block; font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px; cursor: default;
  position: relative;
}
.gsg-cal-day { height: 90px; overflow: hidden; }
/* === END CLAPP BANKING-READINESS-PREFLIGHT v1 === */

/* === CLAPP COMPANY-PORTAL-MODE v1 === */
/* Master mode: company-specific nav items are hidden until a company is selected. */
.gsg-portal--master [data-co-nav] { display: none !important; }
.gsg-portal--master [data-co-back] { display: none !important; }
.gsg-portal--company [data-co-back] { display: flex !important; }
/* Default: company nav visible (fallback for non-SPA pages) */
[data-co-nav] { display: flex; }
[data-co-back] { display: none; }
/* Master-only nav items: hide in company mode */
[data-master-nav] { display: flex; }
.gsg-portal--company [data-master-nav] { display: none !important; }
/* Employee-only nav items */
[data-employee-nav] { display: none; }
.gsg-portal--employee [data-employee-nav] { display: flex !important; }
.gsg-portal--employee [data-co-nav]      { display: none !important; }
.gsg-portal--employee [data-master-nav]  { display: none !important; }
.gsg-portal--employee [data-co-back]     { display: none !important; }
/* Company admin: company mode but no "All Companies" back link */
.gsg-portal--locked-co [data-co-back]   { display: none !important; }

/* "All Companies" back link — subtle separator above dashboard */
/* Parent group labels — not clickable, just section headers */
.gsg-emp-sidenav-item--group-head {
  cursor: default !important;
  pointer-events: none;
}
.gsg-emp-sidenav-item--group-head.is-active {
  background: #143425 !important;
  color: #fff !important;
}

/* Sub-items beneath Documents nav group */
.gsg-emp-sidenav-item--child {
  padding-left: 44px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #7a9186 !important;
}
.gsg-emp-sidenav-item--child:hover {
  background: #f0f2ee !important;
  color: #0d2624 !important;
}
.gsg-emp-sidenav-item--child.is-active {
  background: rgba(20, 52, 37, 0.10) !important;
  color: #143425 !important;
}

.gsg-sidenav-back {
  color: #ADB295 !important;
  font-size: 12px !important;
  border-bottom: 1px solid #e8ebe2;
  margin-bottom: 4px !important;
  padding-bottom: 10px !important;
}
.gsg-sidenav-back:hover { color: #0d2624 !important; }
.gsg-sidenav-back.is-active { background: none !important; color: #ADB295 !important; }

/* Back icon — left-pointing arrow */
[data-icon="back"]::before { content: "←"; font-style: normal; font-size: 14px; }

/* Company status badges inside identity card */
.gsg-ob-co-status {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.gsg-ob-co-status--active { background: rgba(39,69,67,0.85); color: #a3d9a5; }
.gsg-ob-co-status--onboarding { background: rgba(255,255,255,0.1); color: #ADB295; }

/* License chips inside company-mode identity card */
.gsg-ob-co-lic-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.gsg-ob-co-lic-chip {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5);
}
.gsg-ob-co-lic-chip--active { background: rgba(39,69,67,0.8); color: #a3d9a5; }

/* ---- Master dashboard company cards grid ---- */
.gsg-ob-companies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.gsg-ob-co-card {
  background: #fff; border: 1px solid #e8ebe2; border-radius: 18px;
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.18s, transform 0.18s;
  text-align: left;
}
.gsg-ob-co-card:hover { box-shadow: 0 8px 32px rgba(13,38,36,0.10); transform: translateY(-2px); }

.gsg-ob-co-card-header {
  background: linear-gradient(135deg, #0d2624 0%, #274543 100%);
  padding: 20px 20px 16px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.gsg-ob-co-card-initials {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-family: "Mona Sans", sans-serif; font-size: 20px; font-weight: 800;
  color: #fff; flex-shrink: 0;
}
.gsg-ob-co-card-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.gsg-ob-co-card-badge--active { background: rgba(39,69,67,0.85); color: #a3d9a5; }
.gsg-ob-co-card-badge--onboard { background: rgba(255,255,255,0.1); color: #ADB295; }

.gsg-ob-co-card-body { padding: 16px 20px 0; flex: 1; }
.gsg-ob-co-card-name {
  font-family: "Mona Sans", sans-serif; font-size: 16px; font-weight: 700;
  color: #0d2624; margin: 0 0 4px; letter-spacing: -0.01em;
}
.gsg-ob-co-card-loc {
  font-size: 12px; color: #5a7566; margin: 0 0 12px;
}
.gsg-ob-co-card-lics { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gsg-ob-co-card-lic {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  background: #f5f5f7;
}
.gsg-ob-co-card-lic--active { background: #e8f0e8; }
.gsg-ob-co-card-lic-type { font-size: 12px; font-weight: 600; color: #0d2624; flex: 1; }
.gsg-ob-co-card-lic-num { font-size: 11px; color: #5a7566; font-family: monospace; }

.gsg-ob-co-card-footer {
  padding: 14px 20px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid #e8ebe2; margin-top: 14px;
}
.gsg-ob-co-card-lic-count { font-size: 12px; color: #5a7566; }
.gsg-ob-co-card-enter {
  background: #0d2624; color: #fff; border: none;
  font-family: "Mona Sans", sans-serif; font-size: 13px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: background 0.15s;
}
.gsg-ob-co-card-enter:hover { background: #274543; }

/* "Add company" card */
.gsg-ob-co-card--add {
  border: 2px dashed #d0d8ce; background: #f9faf7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 200px; cursor: pointer;
  border-radius: 18px; transition: border-color 0.15s, background 0.15s;
}
.gsg-ob-co-card--add:hover { border-color: #ADB295; background: #f0f5ef; }
.gsg-ob-co-card-plus {
  width: 44px; height: 44px; border-radius: 50%;
  background: #e8ebe2; color: #0d2624;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 300;
}
.gsg-ob-co-card-add-label {
  font-family: "Mona Sans", sans-serif; font-size: 15px; font-weight: 700;
  color: #0d2624; margin: 0;
}
.gsg-ob-co-card-add-sub { font-size: 12px; color: #5a7566; margin: 0; }

/* ---- Apple-style slim banner — shared by both master and company modes ---- */
.gsg-ob-co-identity--master,
.gsg-ob-co-identity--company {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  min-height: unset;
  gap: 32px;
  /* override the left/right grid from base class */
  grid-template-columns: unset;
}
/* hide the old left/right columns — both modes use the new flex structure */
.gsg-ob-co-identity--master .gsg-ob-co-left,
.gsg-ob-co-identity--master .gsg-ob-co-right,
.gsg-ob-co-identity--company .gsg-ob-co-left,
.gsg-ob-co-identity--company .gsg-ob-co-right { display: none !important; }

.gsg-co-head {
  display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0;
}
.gsg-co-head-badge {
  width: 46px; height: 46px; border-radius: 11px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-family: "Mona Sans", sans-serif; font-size: 15px; font-weight: 800;
  color: #fff; flex-shrink: 0; letter-spacing: .01em; overflow: hidden;
}
.gsg-co-head-body { min-width: 0; }
.gsg-co-head-nameline {
  display: flex; align-items: center; gap: 10px; margin: 0 0 3px;
}
.gsg-co-head-name {
  font-family: "Mona Sans", sans-serif; font-size: 20px; font-weight: 800;
  color: #fff; margin: 0; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsg-co-head-status {
  font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 9px; border-radius: 99px; flex-shrink: 0;
}
.gsg-co-head-status--active   { color: #7dcea0; background: rgba(125,206,160,.16); }
.gsg-co-head-status--onboarding { color: #f0c27f; background: rgba(240,194,127,.14); }
.gsg-co-head-sub {
  font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 400;
  color: rgba(255,255,255,0.42); margin: 0 0 7px;
}
.gsg-co-head-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gsg-co-head-chip {
  font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.52);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px; padding: 3px 10px;
}
.gsg-co-head-chip--active { color: #a3d9a5; background: rgba(39,69,67,0.65); border-color: rgba(163,217,165,0.2); }

.gsg-co-head-kpis {
  display: flex; align-items: center; flex-shrink: 0;
}
.gsg-co-head-kpi {
  padding: 0 26px; text-align: right;
  border-left: 1px solid rgba(255,255,255,0.09);
}
.gsg-co-head-kpi:first-child { border-left: none; }
.gsg-co-head-kpi-label {
  font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,0.36); margin: 0 0 5px;
}
.gsg-co-head-kpi-value {
  font-family: "Mona Sans", sans-serif; font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  color: #fff; margin: 0 0 4px;
}
.gsg-co-head-kpi-unit { font-size: 13px; color: rgba(255,255,255,0.36); font-weight: 400; margin-left: 1px; }
.gsg-co-head-kpi-sub {
  font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 400;
  color: rgba(255,255,255,0.36); margin: 0;
}
@media (max-width: 860px) {
  .gsg-ob-co-identity--company { flex-direction: column; align-items: flex-start; padding: 20px; }
  .gsg-co-head-kpis { width: 100%; justify-content: flex-start; }
  .gsg-co-head-kpi { text-align: left; padding: 0 20px 0 0; border-left: none; border-right: 1px solid rgba(255,255,255,0.09); }
  .gsg-co-head-kpi:last-child { border-right: none; }
}
/* Company dashboard quick-links + panels */
.gsg-ob-co-quicklink {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid #e8ebe2; border-radius: 14px;
  padding: 16px 18px; text-decoration: none; gap: 2px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.gsg-ob-co-quicklink:hover { box-shadow: 0 4px 16px rgba(13,38,36,0.08); transform: translateY(-1px); }
.gsg-ob-co-quicklink-label { font-family: "Mona Sans", sans-serif; font-size: 13px; font-weight: 700; color: #0d2624; }
.gsg-ob-panel { background: #fff; border: 1px solid #e8ebe2; border-radius: 16px; padding: 20px 24px; }
.gsg-ob-panel-head { margin-bottom: 14px; }
.gsg-ob-panel-title { font-family: "Mona Sans", sans-serif; font-size: 16px; font-weight: 700; color: #0d2624; margin: 2px 0 0; }
.gsg-ob-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f2ee; }
.gsg-ob-panel-row:last-child { border-bottom: none; }
/* === END CLAPP COMPANY-PORTAL-MODE v1 === */

/* ═══════════════════════════════════════════════════════════
   ROOMS — Premises Diagram Builder
   ═══════════════════════════════════════════════════════════ */
.gsg-rm-wrap { display:flex; flex-direction:column; height:calc(100vh - 62px); overflow:hidden; font-family:"Mona Sans",sans-serif; }
.gsg-rm-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-bottom:1px solid #e8ebe2; background:#fff; gap:16px; flex-shrink:0; }
.gsg-rm-bar-title { font-family:"Mona Sans",sans-serif; font-size:17px; font-weight:700; color:#0d2624; margin:2px 0 0; }
.gsg-rm-bar-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.gsg-rm-body { display:flex; flex:1; overflow:hidden; min-height:0; }

/* Palette */
.gsg-rm-palette { width:192px; flex-shrink:0; overflow-y:auto; padding:14px 10px 24px; border-right:1px solid #e8ebe2; background:#fafaf7; }
.gsg-rm-pal-title { font-size:10.5px; font-weight:700; color:#5a7566; text-transform:uppercase; letter-spacing:.07em; margin:0 0 10px 2px; }
.gsg-rm-pal-grp { font-size:9px; font-weight:700; color:#adb295; text-transform:uppercase; letter-spacing:.09em; margin:10px 0 5px 2px; }
.gsg-rm-pal-item { display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:8px; font-size:11.5px; font-weight:600; color:#274543; cursor:grab; border:1px solid #e8ebe2; background:#fff; margin-bottom:3px; transition:box-shadow .14s,transform .14s; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gsg-rm-pal-item:hover { box-shadow:0 2px 10px rgba(13,38,36,.1); transform:translateX(3px); border-color:#c8cfc0; }
.gsg-rm-pal-item:active { cursor:grabbing; }
.gsg-rm-pal-sw { width:10px; height:10px; border-radius:2px; flex-shrink:0; border:1px solid rgba(0,0,0,.09); }

/* Canvas */
.gsg-rm-canvas-wrap { flex:1; overflow:auto; background:#eceee8; min-width:0; }
.gsg-rm-svg { display:block; }
.gsg-rm-svg .gsg-rm-room { cursor:move; }

/* Properties panel */
.gsg-rm-props { width:228px; flex-shrink:0; overflow-y:auto; border-left:1px solid #e8ebe2; background:#fafaf7; }
.gsg-rm-props-ph { display:flex; align-items:center; justify-content:center; height:100%; padding:24px; text-align:center; color:#adb295; font-size:13px; line-height:1.6; }
.gsg-rm-props-body { padding:18px 14px 28px; }
.gsg-rm-props-swatch { height:6px; border-radius:3px; margin-bottom:16px; transition:background .2s ease; }
.gsg-rm-props-section { font-size:10px; font-weight:700; color:#5a7566; text-transform:uppercase; letter-spacing:.07em; margin:0 0 11px; }
.gsg-rm-props-label { display:block; font-size:11px; font-weight:600; color:#4a5a50; margin-bottom:12px; }
.gsg-rm-props-input,.gsg-rm-props-select { display:block; width:100%; margin-top:4px; padding:7px 10px; border:1px solid #e0e4da; border-radius:8px; font-family:"Mona Sans",sans-serif; font-size:13px; color:#0d2624; background:#fff; outline:none; box-sizing:border-box; transition:border-color .15s,box-shadow .15s; }
.gsg-rm-props-input:focus,.gsg-rm-props-select:focus { border-color:#274543; box-shadow:0 0 0 3px rgba(39,69,67,.07); }
.gsg-rm-props-toggle-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.gsg-rm-props-toggle-lbl { font-size:11px; font-weight:600; color:#4a5a50; }
.gsg-rm-props-dcc { display:block; margin-top:4px; font-size:11px; color:#5a7566; font-style:italic; line-height:1.45; font-weight:400; }
.gsg-rm-props-meta { display:inline; margin-left:6px; font-weight:400; color:#adb295; }
.gsg-rm-door-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:7px; }
.gsg-rm-door-btn { padding:7px 6px; border:1px solid #e0e4da; border-radius:7px; background:#fff; font-size:11.5px; color:#274543; cursor:pointer; font-family:"Mona Sans",sans-serif; font-weight:600; transition:background .13s,border-color .13s; }
.gsg-rm-door-btn:hover { background:#e8ebe2; border-color:#c0c9b8; }

/* Toggle */
.gsg-rm-toggle { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.gsg-rm-toggle input { opacity:0; width:0; height:0; position:absolute; }
.gsg-rm-toggle-track { position:absolute; inset:0; background:#ddd8d0; border-radius:10px; transition:background .2s cubic-bezier(.2,.9,.3,1); cursor:pointer; }
.gsg-rm-toggle-track::after { content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s cubic-bezier(.2,.9,.3,1.2); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.gsg-rm-toggle input:checked + .gsg-rm-toggle-track { background:#274543; }
.gsg-rm-toggle input:checked + .gsg-rm-toggle-track::after { transform:translateX(16px); }

@media (max-width:900px) {
  .gsg-rm-palette { width:56px; }
  .gsg-rm-pal-title,.gsg-rm-pal-grp { display:none; }
  .gsg-rm-pal-item { padding:8px; justify-content:center; }
  .gsg-rm-pal-item span:last-child { display:none; }
  .gsg-rm-props { width:200px; }
  /* Warn-stack and zoombar: palette collapses to 56px — update offsets */
  .gsg-rm-warn-stack { left:calc(56px + 18px); max-width:calc(100vw - 56px - 200px - 200px); }
  .gsg-rm-zoombar { right:calc(200px + 14px); }
}

/* ── ROOMS — Detail mode (shelving / interior) ──────────────── */

/* Capacity chip in the top bar */
.gsg-rm-cap-chip {
  display:inline-flex; align-items:center;
  padding:4px 11px; border-radius:20px;
  background:#e8ede3; color:#274543;
  font-family:"Mona Sans",sans-serif; font-size:11.5px; font-weight:600;
  white-space:nowrap; letter-spacing:.01em;
}

/* Fixture palette variant — slightly more compact swatch */
.gsg-rm-pal-item--fixture .gsg-rm-pal-sw { border-radius:3px; }

/* Properties panel: two-column size row */
.gsg-rm-props-row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }

/* Rotation button row */
.gsg-rm-rot-row { display:flex; gap:4px; margin-top:5px; }
.gsg-rm-rot-btn {
  flex:1; padding:5px 2px; border:1px solid #e0e4da; border-radius:6px;
  background:#fff; font-size:11px; color:#274543; cursor:pointer;
  font-family:"Mona Sans",sans-serif; font-weight:600;
  transition:background .12s,border-color .12s;
}
.gsg-rm-rot-btn:hover { background:#e8ebe2; border-color:#c0c9b8; }
.gsg-rm-rot-btn.is-active { background:#274543; color:#fff; border-color:#274543; }

/* Door wall-picker (in room properties panel) */
.gsg-rm-door-walls { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
.gsg-rm-door-wall-btn {
  padding:7px 4px; border:1px dashed #c0c9b8; border-radius:6px;
  background:#fff; font-size:11px; color:#274543; cursor:pointer;
  font-family:"Mona Sans",sans-serif; font-weight:600;
  transition:background .12s,border-color .12s,color .12s;
}
.gsg-rm-door-wall-btn:hover { background:#274543; color:#fff; border-color:#274543; border-style:solid; }
.gsg-rm-door-list { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.gsg-rm-door-item { display:flex; gap:4px; align-items:stretch; }
.gsg-rm-door-pick {
  flex:1; padding:7px 9px; border:1px solid #e0e4da; border-radius:6px;
  background:#f5f7f1; cursor:pointer; text-align:left;
  font-family:"Mona Sans",sans-serif;
  display:flex; flex-direction:column; gap:2px;
  transition:background .12s,border-color .12s;
}
.gsg-rm-door-pick:hover { background:#e8ebe2; border-color:#c0c9b8; }
.gsg-rm-door-pick-wall { font-size:11px; font-weight:700; color:#274543; }
.gsg-rm-door-pick-meta { font-size:10px; color:#7a8470; font-weight:500; }
.gsg-rm-door-del {
  width:28px; border:1px solid #f0e8e4; border-radius:6px;
  background:#fff; color:#c46345; cursor:pointer;
  font-size:16px; line-height:1; font-weight:600;
  transition:background .12s,border-color .12s;
}
.gsg-rm-door-del:hover { background:#fbe9e3; border-color:#c46345; }

/* Suppress the browser's default focus outline on SVG room groups
   so clicking a focused/locked room (in detail mode) never paints a blue perimeter. */
#gsg-rm-svg g:focus,
#gsg-rm-svg g:focus-visible { outline: none; }

/* Unique-ID readout in props panels (room and fixture) — small monospace tag */
.gsg-rm-props-id {
  margin: 0 0 10px;
  font-size: 10px;
  color: #7a8470;
  font-family: "Mona Sans", sans-serif;
  letter-spacing: 0.02em;
}
.gsg-rm-props-id code {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 10px;
  color: #274543;
  background: #f2f4ee;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #e0e4da;
}

/* Make Rooms parent group-head clickable (override the global pointer-events:none) */
.gsg-emp-sidenav-item--group-head[data-route="rooms"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.gsg-emp-sidenav-item--group-head[data-route="rooms"]:hover {
  background: #f0f2ee !important;
}

/* Fullscreen mode for both Rooms views — hide stats banner + left sidebar, KEEP global header */
body.gsg-portal-fullscreen .gsg-co-head,
body.gsg-portal-fullscreen [data-portal-hero],
body.gsg-portal-fullscreen [data-company-identity],
body.gsg-portal-fullscreen .gsg-ob-co-banner,
body.gsg-portal-fullscreen .gsg-ob-co-identity,
body.gsg-portal-fullscreen .gsg-emp-sidebar,
body.gsg-portal-fullscreen .gsg-emp-sidebar-org,
body.gsg-portal-fullscreen .gsg-emp-sidenav,
body.gsg-portal-fullscreen [data-portal-spa-nav] { display:none !important; }
body.gsg-portal-fullscreen .gsg-emp-shell { display:block !important; grid-template-columns:none !important; }
body.gsg-portal-fullscreen [data-portal-route-host] { padding:0 !important; max-width:none !important; margin:0 !important; width:100% !important; }
body.gsg-portal-fullscreen main,
body.gsg-portal-fullscreen .gsg-emp-shell,
body.gsg-portal-fullscreen .gsg-portal-shell { padding-left:0 !important; margin:0 !important; max-width:none !important; }
/* Reserve room for the global app header AND prevent body scroll so the layout is locked */
body.gsg-portal-fullscreen {
  padding-top:64px !important;
  overflow:hidden !important;
  height:100vh !important;
}
body.gsg-portal-fullscreen .gsg-rm-shell-bar {
  position:fixed; top:64px; left:0; right:0; z-index:100;
}
body.gsg-portal-fullscreen [data-portal-route-host] > * { max-width:none !important; }
body.gsg-portal-fullscreen .gsg-rm-wrap {
  position:fixed;
  top:calc(64px + 56px);    /* below header + shell bar */
  left:0; right:0; bottom:0;
  height:auto;
}

/* Shared rooms shell top bar — sits above both Creator and Overview when fullscreen */
.gsg-rm-shell-bar {
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 20px; gap:18px;
  background:#0d2624; color:#fff; flex-shrink:0;
  font-family:"Mona Sans",sans-serif;
}
.gsg-rm-shell-bar-left { display:flex; align-items:center; gap:14px; }
.gsg-rm-shell-exit {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.78);
  text-decoration:none; padding:6px 10px; border-radius:7px;
  transition:background .15s,color .15s;
}
.gsg-rm-shell-exit:hover { background:rgba(255,255,255,.08); color:#fff; }
.gsg-rm-shell-divider { width:1px; height:18px; background:rgba(255,255,255,.18); }
.gsg-rm-shell-eyebrow { font-size:10px; font-weight:700; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.09em; }
.gsg-rm-shell-title { font-size:15px; font-weight:700; color:#fff; }
.gsg-rm-shell-tabs { display:flex; gap:2px; padding:3px; background:rgba(255,255,255,.06); border-radius:9px; }
.gsg-rm-shell-tab {
  display:inline-flex; align-items:center;
  padding:6px 16px; font-size:12.5px; font-weight:600;
  color:rgba(255,255,255,.62); text-decoration:none;
  border-radius:7px; transition:background .15s,color .15s;
}
.gsg-rm-shell-tab:hover { color:#fff; background:rgba(255,255,255,.06); }
.gsg-rm-shell-tab.is-active { background:#fff; color:#0d2624; }
.gsg-rm-shell-bar-right { display:flex; align-items:center; gap:8px; }
.gsg-rm-shell-bar-right .gsg-ob-btn { padding:7px 14px; font-size:12.5px; }
.gsg-rm-shell-bar-right .gsg-ob-btn--ghost { background:transparent; color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.22); }
.gsg-rm-shell-bar-right .gsg-ob-btn--ghost:hover:not(:disabled) { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.4); transform:none; box-shadow:none; }
.gsg-rm-shell-bar-right .gsg-ob-btn--ghost.is-active { background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.55); }
.gsg-rm-shell-bar-right .gsg-ob-btn:not(.gsg-ob-btn--ghost) { background:#fff; color:#0d2624; border-color:#fff; }
.gsg-rm-shell-bar-right .gsg-ob-btn:not(.gsg-ob-btn--ghost):hover:not(:disabled) { background:#e8ebe2; border-color:#e8ebe2; color:#0d2624; }

/* Overview canvas — centered, framed, scrollable */
.gsg-rm-overview-canvas {
  background:#fff; border:1px solid #e8ebe2; border-radius:14px;
  padding:16px; overflow:auto; max-height:calc(100vh - 380px); min-height:420px;
  display:flex; align-items:flex-start; justify-content:center;
}
.gsg-rm-overview-canvas svg { display:block; }

/* Zoom toolbar — fixed bottom-right of the canvas, always visible */
.gsg-rm-canvas-wrap { position:relative; }
.gsg-rm-zoombar {
  position:fixed; bottom:14px; right:calc(230px + 14px);   /* clear the props panel */
  display:flex; align-items:center; gap:0;
  background:#fff; border:1px solid #e8ebe2; border-radius:10px;
  box-shadow:0 4px 16px rgba(13,38,36,.12);
  padding:3px; z-index:50;
}
.gsg-rm-zoombar button {
  width:30px; height:30px; padding:0;
  border:none; background:transparent;
  font-family:"Mona Sans",sans-serif; font-size:16px; font-weight:600; color:#274543;
  cursor:pointer; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .14s;
}
.gsg-rm-zoombar button:hover { background:#e8ebe2; }
.gsg-rm-zoom-display {
  font-size:11.5px; font-weight:700; color:#274543; padding:0 8px; min-width:42px; text-align:center; user-select:none;
}
.gsg-rm-zoom-fit { width:auto !important; padding:0 10px !important; font-size:11px !important; font-weight:700 !important; }
.gsg-rm-svg { transform-origin:0 0; transition:transform .12s ease-out; }

/* ── ROOMS Direction A — Live Calc Chips ──────────────────────────────── */
.gsg-rm-calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:4px; }
.gsg-rm-calc-chip { display:flex; flex-direction:column; background:#f0f4ed; border:1px solid #dce5d4; border-radius:8px; padding:6px 8px; gap:2px; }
.gsg-rm-calc-chip-lbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#7a9278; }
.gsg-rm-calc-chip-val { font-size:12px; font-weight:700; color:#0d2624; line-height:1.2; }

/* ── ROOMS Direction A — Adjacency Warning Toasts ─────────────────────── */
.gsg-rm-warn-stack {
  position:fixed;
  bottom:14px; left:calc(195px + 18px);   /* sit just right of the palette */
  z-index:50; display:flex; flex-direction:row; gap:10px;
  max-width:calc(100vw - 195px - 230px - 220px);  /* leave room for palette + props + zoombar */
  pointer-events:none; align-items:flex-end;
}
.gsg-rm-warn-col { display:flex; flex-direction:column; gap:6px; pointer-events:none; align-items:flex-start; }
.gsg-rm-warn-col-title {
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Mona Sans",sans-serif; font-size:11px; font-weight:700;
  color:#0d2624; text-transform:uppercase; letter-spacing:.07em;
  border:none; padding:7px 12px; background:#fff; border-radius:7px;
  cursor:pointer; pointer-events:all; box-shadow:0 2px 10px rgba(13,38,36,.12);
  transition:transform .12s,box-shadow .12s;
}
.gsg-rm-warn-col-title:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(13,38,36,.16); }
.gsg-rm-warn-col-count { font-size:10px; font-weight:600; color:#5a7566; padding:1px 7px; background:#e8ebe2; border-radius:10px; }
.gsg-rm-warn-col-caret { font-size:9px; color:#adb295; }
.gsg-rm-warn-col--grower .gsg-rm-warn-col-title { border-left:3px solid #5a7566; padding-left:9px; color:#1a4a2a; }
.gsg-rm-warn-col--rec    .gsg-rm-warn-col-title { border-left:3px solid #7a8ca8; padding-left:9px; color:#2a3e5a; }
.gsg-rm-warn-col--reg    .gsg-rm-warn-col-title { border-left:3px solid #c46345; padding-left:9px; color:#7a3818; }
.gsg-rm-warn-col--grower .gsg-rm-warn-col-count { background:#dce5d4; color:#1a4a2a; }
.gsg-rm-warn-col--rec    .gsg-rm-warn-col-count { background:#dde3ed; color:#2a3e5a; }
.gsg-rm-warn-col--reg    .gsg-rm-warn-col-count { background:#f0d8cc; color:#7a3818; }
.gsg-rm-warn-col--compliance .gsg-rm-warn-col-title { border-left:3px solid #f0d4a0; padding-left:9px; color:#7a4a18; background:#fff8e8; }
.gsg-rm-warn-col--compliance .gsg-rm-warn-col-title:hover { background:#fff0d4; }
/* Chip box hidden by default (collapsed); shown when column has is-expanded */
.gsg-rm-warn-col-chips {
  display:none;
  flex-direction:column; gap:6px; max-height:60vh; overflow-y:auto;
  background:rgba(255,255,255,0.95); border-radius:10px; padding:8px;
  box-shadow:0 4px 16px rgba(13,38,36,.14);
  pointer-events:all; max-width:340px;
  margin-top:4px;
}
.gsg-rm-warn-col.is-expanded .gsg-rm-warn-col-chips { display:flex; animation:gsg-warn-in .22s cubic-bezier(.2,.9,.3,1) both; }

/* Auto-Compliance modal */
.gsg-rm-autocomp-modal {
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; transition:opacity .2s ease;
}
.gsg-rm-autocomp-modal.is-open { opacity:1; }
.gsg-rm-autocomp-scrim { position:absolute; inset:0; background:rgba(13,38,36,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.gsg-rm-autocomp-card {
  position:relative; background:#fff; border-radius:18px; padding:28px 28px 22px; max-width:520px; width:100%;
  max-height:calc(100vh - 80px); overflow-y:auto; box-shadow:0 24px 60px rgba(13,38,36,.3);
  font-family:"Mona Sans",sans-serif; transform:translateY(8px) scale(.98); transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.gsg-rm-autocomp-modal.is-open .gsg-rm-autocomp-card { transform:translateY(0) scale(1); }
.gsg-rm-autocomp-close {
  position:absolute; top:14px; right:14px; width:32px; height:32px; border:none; background:#f0f2ee; border-radius:50%;
  font-size:18px; line-height:1; color:#5a7566; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s,color .15s;
}
.gsg-rm-autocomp-close:hover { background:#274543; color:#fff; }
.gsg-rm-autocomp-title { font-size:22px; font-weight:700; color:#0d2624; margin:0 0 8px; }
.gsg-rm-autocomp-sub { font-size:13px; color:#5a7566; line-height:1.55; margin:0 0 18px; }
.gsg-rm-autocomp-list { display:flex; flex-direction:column; gap:4px; margin:0 0 18px; }
.gsg-rm-autocomp-row {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  font-size:13.5px; color:#0d2624; cursor:pointer; transition:background .12s;
}
.gsg-rm-autocomp-row:hover { background:#f0f4ed; }
.gsg-rm-autocomp-row.is-done { opacity:.5; cursor:not-allowed; }
.gsg-rm-autocomp-row input { width:16px; height:16px; accent-color:#274543; flex-shrink:0; cursor:pointer; }
.gsg-rm-autocomp-row.is-done input { cursor:not-allowed; }
.gsg-rm-autocomp-name { flex:1; font-weight:600; }
.gsg-rm-autocomp-status { font-size:11px; font-weight:600; color:#5a7566; padding:3px 8px; background:#e8ebe2; border-radius:11px; }
.gsg-rm-autocomp-status--need { background:#fff3ef; color:#7a3818; }
.gsg-rm-autocomp-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding-top:6px; border-top:1px solid #e8ebe2; margin-top:8px; padding-top:14px; }
.gsg-rm-autocomp-actions .gsg-ob-btn { padding:8px 16px; font-size:13px; }
.gsg-rm-warn-chip { display:flex; align-items:flex-start; gap:8px; padding:9px 10px 9px 12px; border-radius:10px; font-size:11.5px; font-weight:500; line-height:1.45; pointer-events:all; box-shadow:0 3px 14px rgba(13,38,36,.13); animation:gsg-warn-in .22s cubic-bezier(.2,.9,.3,1) both; }
@keyframes gsg-warn-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.gsg-rm-warn-chip--error { background:#fff3ef; border:1px solid #f0c4b4; color:#7a2e14; }
.gsg-rm-warn-chip--warn  { background:#fffbef; border:1px solid #e8d888; color:#6a5210; }
.gsg-rm-warn-chip--info  { background:#eff4fb; border:1px solid #c4d4ec; color:#2a3e5a; }
.gsg-rm-warn-body { flex:1; display:flex; flex-direction:column; gap:3px; }
.gsg-rm-warn-src { display:inline-block; align-self:flex-start; font-size:9px; font-weight:700; color:rgba(0,0,0,0.55); background:rgba(255,255,255,0.55); padding:1px 6px; border-radius:3px; letter-spacing:.04em; text-transform:uppercase; }
.gsg-rm-warn-chip--error .gsg-rm-warn-src { background:rgba(122,46,20,.12); color:#7a2e14; }
.gsg-rm-warn-chip--warn .gsg-rm-warn-src  { background:rgba(106,82,16,.12); color:#6a5210; }
.gsg-rm-warn-chip--info .gsg-rm-warn-src  { background:rgba(42,62,90,.12); color:#2a3e5a; }
.gsg-rm-warn-icon { font-size:13px; flex-shrink:0; margin-top:1px; }
.gsg-rm-warn-msg { flex:1; }
.gsg-rm-warn-close { flex-shrink:0; background:none; border:none; cursor:pointer; font-size:16px; line-height:1; color:inherit; opacity:.5; padding:0 0 0 4px; transition:opacity .12s; font-family:inherit; }
.gsg-rm-warn-close:hover { opacity:1; }

/* ── ROOMS Direction A — Cultivation Proportions Chip ─────────────────── */
.gsg-rm-prop-chip { position:relative; display:flex; align-items:center; gap:5px; padding:6px 11px; border-radius:8px; font-size:11.5px; font-weight:700; cursor:pointer; border:1.5px solid transparent; transition:box-shadow .14s; user-select:none; }
.gsg-rm-prop-chip--ok   { background:#e8f4e8; border-color:#a8d4a8; color:#1a4a1a; }
.gsg-rm-prop-chip--warn { background:#fff8e0; border-color:#e8d060; color:#5a4200; }
.gsg-rm-prop-chip:hover { box-shadow:0 2px 10px rgba(13,38,36,.1); }
.gsg-rm-prop-icon { font-size:12px; }
.gsg-rm-prop-lbl { font-size:11px; }
.gsg-rm-prop-panel { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid #dce5d4; border-radius:12px; padding:14px 16px; min-width:240px; box-shadow:0 8px 28px rgba(13,38,36,.13); z-index:50; }
.gsg-rm-prop-panel-title { font-size:10px; font-weight:700; color:#5a7566; text-transform:uppercase; letter-spacing:.07em; margin:0 0 10px; }
.gsg-rm-prop-row { display:grid; grid-template-columns:auto 34px 70px 1fr; align-items:center; gap:5px; margin-bottom:7px; }
.gsg-rm-prop-row-lbl { font-size:11px; font-weight:600; color:#274543; white-space:nowrap; }
.gsg-rm-prop-row-val { font-size:11px; font-weight:700; color:#1a4a1a; text-align:right; }
.gsg-rm-prop-row-val--warn { color:#c46345; }
.gsg-rm-prop-row-target { font-size:10px; color:#adb295; white-space:nowrap; }
.gsg-rm-prop-bar-wrap { height:5px; background:#eceee8; border-radius:3px; overflow:hidden; }
.gsg-rm-prop-bar-fill { height:100%; border-radius:3px; transition:width .3s ease; }