/*
This is the full replacement stylesheet for the current Extended Family Tech Solutions site.

What this version is doing:
- Keeps the banner image as its own top section
- Moves the white content area below the banner instead of floating on top of it
- Uses "contain" for the banner image so the bottom is not getting chopped off like before
- Restores the header to a proper left-title / right-nav layout
- Keeps the service cards and button styling clean
- Includes responsive behavior so tablet and mobile do not completely fall apart

One important note:
Because we are using background-size: contain, the entire image should show more cleanly,
but depending on the exact aspect ratio of the source image, you may get a little extra space
around it. That is still better than brutally cropping off the bottom of your art.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
	--bg:#eef4f8;
	--surface:#ffffff;
	--surface-soft:rgba(255,255,255,0.96);
	--primary:#2c78c9;
	--primary-dark:#1e5ea5;
	--muted:#5f6b7a;
	--text:#0f172a;
	--border:rgba(15,23,42,0.08);
	--shadow:0 12px 35px rgba(15,23,42,0.10);
	--radius:24px;
	--max-width:1200px;
}

*{
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
}

body{
	margin:0;
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	background:var(--bg);
	color:var(--text);
	line-height:1.55;
}

img{
	display:block;
	max-width:100%;
}

a{
	color:inherit;
}

.container{
	width:min(var(--max-width), calc(100% - 32px));
	margin:0 auto;
}

/*
Header and nav:
This restores the classic layout you wanted - title on the left, navigation on the top right.
The nav had wandered off because earlier styles either got removed or were never included.
Now it is pinned back into civilized behavior.
*/
header{
	position:sticky;
	top:0;
	z-index:50;
	background:rgba(255,255,255,0.94);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border);
	padding:16px 28px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	box-shadow:0 4px 16px rgba(15,23,42,0.04);
}

header h1{
	margin:0;
	font-size:1.2rem;
	font-weight:800;
	letter-spacing:-0.02em;
	color:var(--text);
}

nav{
	margin-left:auto;
	display:flex;
	align-items:center;
	gap:22px;
}

nav a{
	color:var(--muted);
	text-decoration:none;
	font-weight:700;
	font-size:0.98rem;
	transition:color 0.2s ease, transform 0.2s ease;
}

nav a:hover{
	color:var(--primary);
	transform:translateY(-1px);
}

main{
	padding:32px 0 20px;
}

/*
Hero section:
The hero is now a wrapper that contains a top banner image area and a lower white content area.
This avoids the floating overlay problem entirely.
*/
.hero{
	position:relative;
	margin-bottom:36px;
	border-radius:24px;
	overflow:hidden;
	box-shadow:var(--shadow);
	background:transparent;
	padding:0;
	min-height:auto;
}

/*
Banner image area:
The key change is background-size: contain instead of cover.
That means it tries to show the whole image rather than cropping the bottom off.
The height is increased so the image has more room to breathe.
The background color helps hide any extra empty space if the image ratio does not perfectly match.
*/
.hero::before{
	content:"";
	display:block;
	height:620px;
	background-image:url('/images/ExtendedfamilyAd.png');
	background-repeat:no-repeat;
	background-position:center top;
	background-size:contain;
	background-color:#d9eaf8;
}

/*
This is the content area under the banner.
No floating card nonsense now - it is just a clean white section.
*/
.hero .hero-content{
	position:relative;
	background:var(--surface-soft);
	padding:34px;
	margin:0;
	max-width:none;
	border-radius:0;
	box-shadow:none;
}

/*
Container inside the hero:
Keeps the content aligned and centered.
*/
.hero .container{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0;
}

/*
Headline and intro copy:
Now that the text is below the banner, it can use the width properly without crashing into artwork.
*/
.hero h2{
	margin:0 0 14px;
	font-size:clamp(2rem, 3vw, 3.2rem);
	line-height:1.08;
	letter-spacing:-0.03em;
	font-weight:800;
	max-width:14ch;
	color:var(--text);
}

.hero p{
	color:var(--muted);
	margin:0 0 22px;
	font-size:1.08rem;
	max-width:70ch;
}

/*
Service cards:
Simple grid for the three service boxes.
*/
.services{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:16px;
	margin-top:18px;
}

.card{
	background:#f8fafc;
	border-radius:16px;
	padding:18px 16px;
	box-shadow:0 8px 24px rgba(15,23,42,0.05);
	border:1px solid rgba(15,23,42,0.06);
}

.card h3{
	margin:0 0 8px;
	font-size:1.02rem;
	line-height:1.3;
	font-weight:800;
	color:var(--text);
}

.card p{
	margin:0;
	color:var(--muted);
	font-size:0.98rem;
	line-height:1.45;
}

/*
Primary call-to-action button:
Just a nice clean blue button with a hover lift.
*/
.cta{
	display:inline-block;
	margin-top:20px;
	background:linear-gradient(180deg, var(--primary), var(--primary-dark));
	color:#fff;
	padding:12px 18px;
	border-radius:12px;
	text-decoration:none;
	font-weight:800;
	box-shadow:0 10px 20px rgba(44,120,201,0.24);
	transition:transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.cta:hover{
	transform:translateY(-1px);
	box-shadow:0 14px 26px rgba(44,120,201,0.28);
	filter:brightness(1.03);
}

/*
Form styling:
Keeping this here in case your contact page uses the same stylesheet.
That way the rest of the site does not look abandoned.
*/
form{
	margin-top:12px;
}

label{
	display:block;
	color:var(--muted);
	font-size:0.95rem;
	font-weight:600;
	margin-bottom:6px;
}

input,
textarea{
	width:100%;
	max-width:560px;
	padding:13px 14px;
	border-radius:12px;
	border:1px solid #dbe3ea;
	background:#fff;
	outline:none;
	font:inherit;
	color:var(--text);
	transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

input:focus,
textarea:focus{
	border-color:var(--primary);
	box-shadow:0 10px 24px rgba(44,120,201,0.10);
	transform:translateY(-1px);
}

button{
	background:linear-gradient(180deg, var(--primary), var(--primary-dark));
	color:#fff;
	border:none;
	padding:12px 18px;
	border-radius:12px;
	cursor:pointer;
	font-weight:800;
	font:inherit;
	box-shadow:0 10px 20px rgba(44,120,201,0.22);
	transition:transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover{
	transform:translateY(-1px);
	box-shadow:0 14px 26px rgba(44,120,201,0.28);
}

/*
Footer:
Simple and clean.
*/
footer{
	padding:10px 24px 32px;
	text-align:center;
	color:var(--muted);
	font-size:0.95rem;
}

footer p{
	margin:0;
}

/*
Tablet adjustments:
Banner gets a bit shorter, cards stack vertically if needed, and the layout stays sane.
*/
@media (max-width: 980px){
	.hero::before{
		height:500px;
	}

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

/*
Phone adjustments:
The header can stack here because on a narrow screen trying to force it all into one line
starts looking stupid pretty fast.
The banner also gets shorter so mobile users do not need to scroll through half a billboard.
*/
@media (max-width: 720px){
	header{
		padding:14px 16px;
		flex-direction:column;
		align-items:flex-start;
		gap:10px;
	}

	nav{
		margin-left:0;
		gap:16px;
		flex-wrap:wrap;
	}

	main{
		padding:22px 0 14px;
	}

	.container{
		width:min(var(--max-width), calc(100% - 20px));
	}

	.hero{
		border-radius:18px;
	}

	.hero::before{
		height:320px;
		background-position:center top;
		background-size:contain;
	}

	.hero .hero-content{
		padding:24px 18px;
	}

	.hero h2{
		max-width:none;
		font-size:clamp(1.7rem, 7vw, 2.3rem);
	}

	.hero p{
		font-size:1rem;
	}

	.services{
		grid-template-columns:1fr;
		gap:12px;
	}

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

/*
About page styling block.

This gives the About page its own identity instead of just reusing generic white boxes
over and over until the whole thing starts to feel like a tax form. The goal here is to
keep the site friendly and trustworthy while giving the page more shape, contrast, and
some visual hierarchy so the reader's eye has somewhere useful to go.

What this block adds:
- A proper hero area for the About page
- A small profile card for Mike
- A three-card highlight strip for rate / billing / audience
- Better-looking content panels
- A mission panel with a colored accent so it does not visually disappear into the page
- Slightly nicer spacing and depth throughout
*/

.about-page{
	padding-top:8px;
}

.about-hero{
	margin-bottom:24px;
}

.about-hero-grid{
	display:grid;
	grid-template-columns:1.45fr 0.85fr;
	gap:20px;
	align-items:stretch;
}

.about-hero-copy,
.profile-card{
	background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
	border:1px solid rgba(15,23,42,0.08);
	border-radius:24px;
	box-shadow:0 14px 40px rgba(15,23,42,0.08);
}

.about-hero-copy{
	padding:34px;
	position:relative;
	overflow:hidden;
}

.about-hero-copy::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at top right, rgba(44,120,201,0.12), transparent 30%),
		radial-gradient(circle at bottom left, rgba(169,211,106,0.18), transparent 28%);
	pointer-events:none;
}

.about-hero-copy > *{
	position:relative;
	z-index:1;
}

.eyebrow{
	margin:0 0 10px;
	font-size:0.84rem;
	font-weight:800;
	letter-spacing:0.16em;
	text-transform:uppercase;
	color:var(--primary);
}

.about-hero-copy h2{
	margin:0 0 14px;
	max-width:12ch;
	font-size:clamp(2.2rem, 4vw, 3.7rem);
	line-height:1.02;
	letter-spacing:-0.04em;
}

.about-hero-copy .lead{
	margin:0;
	font-size:1.08rem;
	color:var(--muted);
	max-width:60ch;
}

.profile-card{
	padding:28px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	background:
		linear-gradient(160deg, rgba(44,120,201,0.08), rgba(255,255,255,0.96) 42%),
		linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
}

.profile-label{
	margin:0 0 8px;
	font-size:0.8rem;
	font-weight:800;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--primary);
}

.profile-card h3{
	margin:0 0 10px;
	font-size:1.6rem;
	line-height:1.1;
	letter-spacing:-0.03em;
}

.profile-card p{
	margin:0;
	color:var(--muted);
}

.stats-strip{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:16px;
	margin-bottom:24px;
}

.stat-card{
	background:linear-gradient(180deg, #f8fbff, #ffffff);
	border:1px solid rgba(15,23,42,0.08);
	border-radius:20px;
	padding:22px 18px;
	box-shadow:0 10px 28px rgba(15,23,42,0.06);
	text-align:center;
}

.stat-card h3{
	margin:0 0 6px;
	font-size:1.65rem;
	line-height:1;
	letter-spacing:-0.03em;
	color:var(--primary);
}

.stat-card p{
	margin:0;
	color:var(--muted);
	font-size:0.96rem;
}

.about-section{
	margin-bottom:24px;
}

.content-panel{
	background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
	border:1px solid rgba(15,23,42,0.08);
	border-radius:24px;
	padding:30px;
	box-shadow:0 12px 34px rgba(15,23,42,0.07);
}

.content-panel h2{
	margin:0 0 14px;
	max-width:none;
	font-size:clamp(1.8rem, 2.4vw, 2.5rem);
	line-height:1.08;
	letter-spacing:-0.03em;
}

.content-panel p{
	margin:0 0 14px;
	color:var(--muted);
	font-size:1.02rem;
}

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

.mission-panel{
	display:grid;
	grid-template-columns:8px 1fr;
	padding:0;
	overflow:hidden;
}

.panel-accent{
	background:linear-gradient(180deg, var(--primary), #8ec252);
	min-height:100%;
}

.panel-body{
	padding:30px;
}

.about-services{
	margin-top:18px;
}

.about-services .card{
	background:linear-gradient(180deg, #fbfdff, #f5f9fc);
	border:1px solid rgba(15,23,42,0.06);
	box-shadow:0 10px 24px rgba(15,23,42,0.05);
}

.closing-panel{
	text-align:left;
	position:relative;
	overflow:hidden;
}

.closing-panel::after{
	content:"";
	position:absolute;
	right:-40px;
	bottom:-40px;
	width:180px;
	height:180px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(169,211,106,0.18), transparent 68%);
	pointer-events:none;
}

.closing-panel > *{
	position:relative;
	z-index:1;
}

@media (max-width: 980px){
	.about-hero-grid{
		grid-template-columns:1fr;
	}

	.stats-strip{
		grid-template-columns:1fr;
	}
}

@media (max-width: 720px){
	.about-hero-copy,
	.profile-card,
	.content-panel{
		border-radius:18px;
	}

	.about-hero-copy{
		padding:24px 20px;
	}

	.profile-card{
		padding:22px 20px;
	}

	.content-panel{
		padding:22px 18px;
	}

	.panel-body{
		padding:22px 18px;
	}

	.mission-panel{
		grid-template-columns:6px 1fr;
	}
}

/*
Contact page styling block.

This gives the contact page a clean, inviting layout without using a contact form.
That means less technical nonsense for you to maintain and a simpler experience for visitors.
The focus here is clarity:
- easy to spot phone number
- easy to spot email
- clear hours
- same polished visual language as the About page

The clickable phone and email are handled in the HTML with tel: and mailto: links.
This CSS just makes them look like intentional contact cards instead of sad default links.
*/

.contact-page{
	padding-top:8px;
}

.contact-hero{
	margin-bottom:24px;
}

.contact-hero-grid{
	display:grid;
	grid-template-columns:1.45fr 0.85fr;
	gap:20px;
	align-items:stretch;
}

.contact-hero-copy,
.contact-highlight-card{
	background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
	border:1px solid rgba(15,23,42,0.08);
	border-radius:24px;
	box-shadow:0 14px 40px rgba(15,23,42,0.08);
}

.contact-hero-copy{
	padding:34px;
	position:relative;
	overflow:hidden;
}

.contact-hero-copy::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at top right, rgba(44,120,201,0.12), transparent 30%),
		radial-gradient(circle at bottom left, rgba(169,211,106,0.18), transparent 28%);
	pointer-events:none;
}

.contact-hero-copy > *{
	position:relative;
	z-index:1;
}

.contact-hero-copy h2{
	margin:0 0 14px;
	max-width:12ch;
	font-size:clamp(2.2rem, 4vw, 3.7rem);
	line-height:1.02;
	letter-spacing:-0.04em;
}

.contact-hero-copy .lead{
	margin:0;
	font-size:1.08rem;
	color:var(--muted);
	max-width:60ch;
}

.contact-highlight-card{
	padding:28px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	background:
		linear-gradient(160deg, rgba(44,120,201,0.08), rgba(255,255,255,0.96) 42%),
		linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
}

.contact-highlight-card h3{
	margin:0 0 10px;
	font-size:1.6rem;
	line-height:1.1;
	letter-spacing:-0.03em;
}

.contact-highlight-card p{
	margin:0;
	color:var(--muted);
	font-size:1.02rem;
}

.contact-info-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:20px;
	margin-bottom:24px;
}

.contact-card{
	height:100%;
}

.primary-contact-card{
	position:relative;
	overflow:hidden;
}

.primary-contact-card::after{
	content:"";
	position:absolute;
	right:-40px;
	bottom:-40px;
	width:180px;
	height:180px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(169,211,106,0.16), transparent 68%);
	pointer-events:none;
}

.primary-contact-card > *{
	position:relative;
	z-index:1;
}

.contact-method-list{
	display:grid;
	gap:14px;
	margin-top:20px;
}

.contact-method{
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:18px 18px;
	border-radius:18px;
	text-decoration:none;
	background:linear-gradient(180deg, #fbfdff, #f5f9fc);
	border:1px solid rgba(15,23,42,0.07);
	box-shadow:0 10px 24px rgba(15,23,42,0.05);
	transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-method:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 28px rgba(15,23,42,0.08);
	border-color:rgba(44,120,201,0.20);
}

.static-contact-method:hover{
	transform:none;
}

.contact-method-label{
	font-size:0.82rem;
	font-weight:800;
	letter-spacing:0.12em;
	text-transform:uppercase;
	color:var(--primary);
}

.contact-method-value{
	font-size:1.12rem;
	font-weight:700;
	color:var(--text);
	word-break:break-word;
}

@media (max-width: 980px){
	.contact-hero-grid{
		grid-template-columns:1fr;
	}

	.contact-info-grid{
		grid-template-columns:1fr;
	}
}

@media (max-width: 720px){
	.contact-hero-copy,
	.contact-highlight-card{
		border-radius:18px;
	}

	.contact-hero-copy{
		padding:24px 20px;
	}

	.contact-highlight-card{
		padding:22px 20px;
	}

	.contact-method{
		padding:16px 16px;
	}

	.contact-method-value{
		font-size:1rem;
	}
}