/* ==========================================================================
   About Page - Page Banner (title + breadcrumb)
   ========================================================================== */
.page-banner{
	position:relative;
	padding-top:calc(var(--header-height) + 70px);
	padding-bottom:60px;
	background-color:var(--color-bg-soft);
	background-image:var(--page-banner-bg);
	background-size:cover;
	background-position:top;
	overflow:hidden;
}

.page-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.7) 100%
    );
    z-index: 1;
}

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

.page-banner__breadcrumb{
	font-family:var(--font-body);
	font-size:14px;
	margin-bottom:16px;
}

.page-banner__breadcrumb a{
	color:var(--color-text-muted);
	transition:color .25s ease;
}

.page-banner__breadcrumb a:hover{
	color:var(--color-gold-dark);
}

.page-banner__separator{
	margin:0 8px;
	color:var(--color-text-muted);
}

.page-banner__current{
	color:var(--color-gold-dark);
	font-weight:600;
}

.page-banner__title{
	font-family:var(--font-heading);
	font-size:clamp(34px, 4.4vw, 28px);
	font-weight:600;
	line-height:1.15;
	color:var(--color-black);
	margin:0;
}

/* When a background image is present, switch text to light for contrast */
.page-banner[style*="--page-banner-bg"] .page-banner__breadcrumb a,
.page-banner[style*="--page-banner-bg"] .page-banner__separator{
	color:var(--color-black);
}

.page-banner[style*="--page-banner-bg"] .page-banner__current{
	color:var(--color-gold);
}

.page-banner[style*="--page-banner-bg"] .page-banner__title{
	color:var(--color-black);
}

/* ==========================================================================
   Responsive - Page Banner
   ========================================================================== */
@media (max-width: 768px){

	.page-banner{
		padding-top:calc(var(--header-height) + 40px);
		padding-bottom:44px;
	}
}


/* ==========================================================================
   About Page - Hero (Frank's photo + intro)
   ========================================================================== */
.about-hero{
	background:var(--color-bg);
	padding:60px 0;
	overflow:hidden;
}

.about-hero__inner{
	display:grid;
	grid-template-columns:0.62fr 1fr;
	align-items:center;
	gap:70px;
}

.about-hero__image{
	position:relative;
	max-width:420px;
}

.about-hero__image img{
	position:relative;
	z-index:2;
	width:100%;
	aspect-ratio:4 / 5;
	object-fit:cover;
	border-radius:4px;
}

.about-hero__content{
	transition-delay:.15s;
}

.about-hero__eyebrow{
	font-family:var(--font-heading);
	font-size:14px;
	font-weight:400;
	letter-spacing:0.22em;
	text-transform:uppercase;
	color:var(--color-gold-dark);
	margin:0 0 12px;
}

.about-hero__heading{
	font-family:var(--font-heading);
	font-size:clamp(30px, 3.4vw, 42px);
	font-weight:600;
	line-height:1.18;
	color:var(--color-black);
	margin:0 0 22px;
}

.about-hero__desc{
	font-family:var(--font-body);
	font-size:16.5px;
	line-height:1.8;
	color:var(--color-text-muted);
	max-width:622px;
	margin:0 0 34px;
}

.about-hero__btn{
	display:inline-flex;
}

/* ==========================================================================
   Responsive - About Hero
   ========================================================================== */
@media (max-width: 1024px){

	.about-hero{
		padding:70px 0;
	}

	.about-hero__inner{
		gap:48px;
	}

}

@media (max-width: 900px){

	.about-hero__inner{
		grid-template-columns:1fr;
	}

	.about-hero__image{
		max-width:340px;
		margin:0 auto;
	}

	.about-hero__desc{
		max-width:100%;
	}
}

@media (max-width: 480px){

	.about-hero{
		padding:56px 0;
	}

	.about-hero__frame{
		left:-10px;
		top:10px;
	}

	.about-hero__btn{
		width:100%;
		text-align:center;
	}
}


/* ==========================================================================
   About Page - Full Story / Bio
   ========================================================================== */
.about-story{
	background:var(--color-bg-soft);
	padding:60px 0;
}

.about-story__head{
	text-align:center;
	max-width:620px;
	margin:0 auto 56px;
}

.about-story__eyebrow{
	font-family:var(--font-heading);
	font-size:14px;
	font-weight:400;
	letter-spacing:0.22em;
	text-transform:uppercase;
	color:var(--color-gold-dark);
	margin:0 0 12px;
}

.about-story__heading{
	font-family:var(--font-heading);
	font-size:clamp(28px, 3.2vw, 40px);
	font-weight:600;
	color:var(--color-black);
	margin:0;
}

.about-story__body{
	display:grid;
	grid-template-columns:1fr 0.42fr;
	gap:64px;
	align-items:start;
}

.about-story__text p{
	font-family:var(--font-body);
	font-size:16.5px;
	line-height:1.85;
	color:var(--color-text-muted);
	margin:0 0 24px;
}

.about-story__text p:last-child{
	margin-bottom:0;
}

.about-story__quote{
	position:relative;
	margin:36px 0;
	padding:28px 32px;
	background:var(--color-bg);
	border-left:3px solid var(--color-gold);
	border-radius:2px;
	font-family:var(--font-heading);
	font-size:21px;
	font-style:italic;
	font-weight:500;
	line-height:1.5;
	color:var(--color-black);
}

.about-story__aside{
	position:sticky;
	top:calc(var(--header-height) + 32px);
	display:flex;
	flex-direction:column;
	gap:16px;
}

.about-story__card{
	background:var(--color-bg);
	border:1px solid var(--color-border);
	border-radius:6px;
	padding:22px 24px;
	transition:border-color .3s ease, transform .3s ease;
}

.about-story__card:hover{
	border-color:var(--color-gold);
	transform:translateY(-3px);
}

.about-story__card-label{
	display:block;
	font-family:var(--font-heading);
	font-size:12.5px;
	font-weight:700;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:var(--color-gold-dark);
	margin-bottom:8px;
}

.about-story__card-value{
	display:block;
	font-family:var(--font-body);
	font-size:15.5px;
	line-height:1.5;
	color:var(--color-black);
}

/* ==========================================================================
   Responsive - Full Story / Bio
   ========================================================================== */
@media (max-width: 1024px){

	.about-story{
		padding:70px 0;
	}

	.about-story__body{
		gap:44px;
	}
}

@media (max-width: 860px){

	.about-story__body{
		grid-template-columns:1fr;
	}

	.about-story__aside{
		position:static;
		flex-direction:row;
		flex-wrap:wrap;
	}

	.about-story__card{
		flex:1 1 calc(50% - 8px);
	}
}

@media (max-width: 600px){

	.about-story__head{
		margin-bottom:40px;
	}

	.about-story__quote{
		font-size:19px;
		padding:22px 24px;
	}

	.about-story__aside{
		flex-direction:column;
	}

	.about-story__card{
		flex:1 1 auto;
	}
}

@media (max-width: 480px){

	.about-story{
		padding:56px 0;
	}
}


/* ==========================================================================
   About Page - Credentials / Certifications
   ========================================================================== */
.credentials{
	background:var(--color-bg);
	padding:60px 0;
}

.credentials__head{
	text-align:center;
	max-width:620px;
	margin:0 auto 56px;
}

.credentials__eyebrow{
	font-family:var(--font-heading);
	font-size:14px;
	font-weight:400;
	letter-spacing:0.22em;
	text-transform:uppercase;
	color:var(--color-gold-dark);
	margin:0 0 12px;
}

.credentials__heading{
	font-family:var(--font-heading);
	font-size:clamp(28px, 3.2vw, 40px);
	font-weight:600;
	color:var(--color-black);
	margin:0;
}

.credentials__grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:24px;
	margin-bottom:72px;
}

.credential-card{
	position:relative;
	background:var(--color-bg);
	border:1px solid var(--color-border);
	border-radius:8px;
	padding:28px 26px 26px;
	overflow:hidden;
	transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.credential-card::before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:3px;
	background:linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .4s ease;
}

.credential-card:hover{
	border-color:transparent;
	transform:translateY(-6px);
	box-shadow:0 20px 40px rgba(17,17,17,0.1);
}

.credential-card:hover::before{
	transform:scaleX(1);
}

.credential-card__top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:22px;
}

.credential-card__icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:46px;
	height:46px;
	border-radius:50%;
	background:var(--color-bg-soft);
	color:var(--color-gold-dark);
	flex-shrink:0;
	transition:background .3s ease, color .3s ease;
}

.credential-card:hover .credential-card__icon{
	background:var(--color-black);
	color:var(--color-gold);
}

.credential-card__year{
	font-family:var(--font-heading);
	font-size:13px;
	font-weight:700;
	letter-spacing:0.04em;
	color:var(--color-text-muted);
}

.credential-card__title{
	font-family:var(--font-heading);
	font-size:17.5px;
	font-weight:500;
	color:var(--color-black);
	margin:0 0 8px;
	line-height:1.35;
}

.credential-card__issuer{
	font-family:var(--font-body);
	font-size:13.5px;
	line-height:1.6;
	color:var(--color-text-muted);
	margin:0;
}

/* Featured-in media logos, inside the same section */
.credentials__media{
	text-align:center;
	padding-top:56px;
	border-top:1px solid var(--color-border);
}

.credentials__media-label{
	font-family:var(--font-heading);
	font-size:13px;
	font-weight:700;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--color-text-muted);
	margin:0 0 32px;
}

.credentials__media-grid{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:48px;
}

.credentials__media-logo{
	display:flex;
	align-items:center;
	justify-content:center;
	height:32px;
}

.credentials__media-logo img{
	max-height:32px;
	width:auto;
	filter:grayscale(100%) opacity(0.55);
	transition:filter .3s ease;
}

.credentials__media-logo:hover img{
	filter:grayscale(0%) opacity(1);
}

/* ==========================================================================
   Responsive - Credentials / Certifications
   ========================================================================== */
@media (max-width: 1024px){

	.credentials{
		padding:70px 0;
	}

	.credentials__grid{
		grid-template-columns:repeat(2, 1fr);
	}
}

@media (max-width: 600px){

	.credentials__head{
		margin-bottom:40px;
	}

	.credentials__grid{
		grid-template-columns:1fr;
		gap:16px;
		margin-bottom:56px;
	}

	.credentials__media{
		padding-top:44px;
	}

	.credentials__media-grid{
		gap:32px;
	}
}

@media (max-width: 480px){

	.credentials{
		padding:56px 0;
	}

	.credential-card{
		padding:26px 22px;
	}
}


/* ==========================================================================
   About Page - Personal Philosophy / Mission Statement
   Full-width dark statement section, echoes the CTA banner's ring motif.
   ========================================================================== */
.philosophy{
	position:relative;
	background:var(--color-black);
	padding:110px 0;
	overflow:hidden;
	text-align:center;
}

.philosophy__ring{
	position:absolute;
	border:1px solid rgba(201,162,75,0.22);
	border-radius:50%;
	pointer-events:none;
}

.philosophy__ring--1{
	width:380px;
	height:380px;
	top:-150px;
	left:-100px;
}

.philosophy__ring--2{
	width:260px;
	height:260px;
	bottom:-130px;
	right:-70px;
}

.philosophy__inner{
	position:relative;
	z-index:2;
	max-width:820px;
	margin:0 auto;
}

.philosophy__eyebrow{
	font-family:var(--font-heading);
	font-size:14px;
	font-weight:400;
	letter-spacing:0.22em;
	text-transform:uppercase;
	color:var(--color-gold);
	margin:0 0 24px;
}

.philosophy__mark{
	color:var(--color-gold);
	opacity:0.85;
	margin-bottom:20px;
}

.philosophy__statement{
	font-family:var(--font-heading);
	font-size:clamp(26px, 3.6vw, 40px);
	font-weight:500;
	font-style:italic;
	line-height:1.45;
	color:#fff;
	margin:0 0 28px;
}

.philosophy__signature{
	font-family:var(--font-heading);
	font-size:16px;
	font-weight:600;
	letter-spacing:0.04em;
	color:var(--color-gold);
	margin:0;
}

/* ==========================================================================
   Responsive - Philosophy / Mission Statement
   ========================================================================== */
@media (max-width: 768px){

	.philosophy{
		padding:80px 0;
	}

	.philosophy__ring--1{
		width:240px;
		height:240px;
		top:-100px;
		left:-80px;
	}

	.philosophy__ring--2{
		width:170px;
		height:170px;
		bottom:-90px;
		right:-50px;
	}
}

@media (max-width: 480px){

	.philosophy{
		padding:64px 0;
	}

	.philosophy__mark{
		width:32px;
		height:24px;
	}
}


/* ==========================================================================
   About Page - Stats Strip
   ========================================================================== */
.about-stats{
	background:var(--color-bg);
	padding:80px 0;
}

.about-stats__grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
}

.stat-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding:0 24px;
	border-right:1px solid var(--color-border);
}

.stat-item:last-child{
	border-right:none;
}

.stat-item__number{
	font-family:var(--font-heading);
	font-size:clamp(38px, 4.4vw, 54px);
	font-weight:400;
	line-height:1;
	color:var(--color-black);
	margin-bottom:12px;
}

.stat-item__suffix{
	color:var(--color-gold-dark);
}

.stat-item__label{
	font-family:var(--font-body);
	font-size:14.5px;
	letter-spacing:0.02em;
	color:var(--color-text-muted);
}

/* ==========================================================================
   Responsive - Stats Strip
   ========================================================================== */
@media (max-width: 860px){

	.about-stats{
		padding:56px 0;
	}

	.about-stats__grid{
		grid-template-columns:repeat(2, 1fr);
		row-gap:36px;
	}

	.stat-item{
		border-right:none;
	}

	.stat-item:nth-child(odd){
		border-right:1px solid var(--color-border);
	}
}

@media (max-width: 480px){

	.about-stats{
		padding:48px 0;
	}

	.about-stats__grid{
		row-gap:28px;
	}

	.stat-item{
		padding:0 12px;
	}

	.stat-item__number{
		font-size:clamp(32px, 9vw, 40px);
	}
}

/* ==========================================================================
   About Page - CTA Banner (Book a Call)
   Same background image, white overlay, and styling as the home page.
   No bottom padding — sits flush against the footer directly below it.
   ========================================================================== */
.cta-banner{
	position:relative;
	padding:120px 0 60px;
	overflow:hidden;
	text-align:center;
}

.cta-banner__bg{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:top;
	background-repeat:no-repeat;
	background-attachment:fixed;
	z-index:1;
}

.cta-banner__overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.94) 100%);
	z-index:2;
}

.cta-banner__inner{
	position:relative;
	z-index:3;
	max-width:680px;
	margin:0 auto;
}

.cta-banner__eyebrow{
	font-family:var(--font-heading);
	font-size:14px;
	font-weight:400;
	letter-spacing:0.22em;
	text-transform:uppercase;
	color:var(--color-gold-dark);
	margin:0 0 14px;
}

.cta-banner__heading{
	font-family:var(--font-heading);
	font-size:clamp(30px, 4vw, 46px);
	font-weight:600;
	line-height:1.2;
	color:var(--color-black);
	margin:0 0 20px;
}

.cta-banner__desc{
	font-family:var(--font-body);
	font-size:16.5px;
	line-height:1.75;
	color:var(--color-text-muted);
	margin:0 0 38px;
}

.cta-banner__btn{
	display:inline-flex;
	background:var(--color-gold);
	border-color:var(--color-gold);
	color:var(--color-black);
}

.cta-banner__btn:hover{
	background:var(--color-black);
	border-color:var(--color-gold);
	color:#fff;
}

/* ==========================================================================
   Responsive - CTA Banner
   ========================================================================== */
@media (max-width: 768px){

	.cta-banner{
		padding:90px 0 44px;
	}

	.cta-banner__bg{
		background-position:63%;
	}

	.cta-banner__overlay{
		opacity:0.9;
	}
}

@media (max-width: 480px){

	.cta-banner{
		padding:70px 0 36px;
	}

	.cta-banner__desc{
		font-size:15px;
	}

	.cta-banner__btn{
		width:100%;
		text-align:center;
	}

	.cta-banner__bg{
		background-position:63%;
	}

	.cta-banner__overlay{
		opacity:0.9;
	}
}