:root{
	--bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	--bg-solid: #f8fafc;
	--text: #1e293b; /* warmer near-black */
	--text-light: #475569; /* softer gray for secondary text */
	--muted: #64748b; /* refined gray */
	--accent: #0ea5e9; /* modern blue accent */
	--accent-light: #38bdf8; /* lighter accent for hovers */
	--card: rgba(255, 255, 255, 0.8); /* glass effect */
	--card-border: rgba(148, 163, 184, 0.2); /* subtle border */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
	--border-radius: 16px;
}

*{box-sizing:border-box}
body{
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
	background: var(--bg); 
	color: var(--text); 
	margin: 0; 
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.container{max-width:1200px;margin:0 auto;padding:32px 24px}
.site-header{
	background: rgba(248, 250, 252, 0.95);
	backdrop-filter: blur(12px);
	padding: 20px 0;
	border-bottom: 1px solid var(--card-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.header-inner{
	display:flex;
	align-items:center;
	justify-content:center;
	max-width:1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.logo{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.1rem}
.nav-toggle{display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:6px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-left:auto;position:relative;z-index:400}
.nav-toggle:focus{outline:3px solid rgba(11,74,111,0.12);outline-offset:3px;border-radius:8px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.nav .btn{background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px;text-decoration:none}
.nav .btn{min-height:44px;display:inline-flex;align-items:center}
/* hide inline nav by default so the hamburger is the canonical control */
.nav{display:none}

/* style for disabled nav items (login coming soon) */
.nav a.disabled,
.nav a[aria-disabled="true"]{
	opacity:0.5;
	cursor:default;
	pointer-events:none;
}

/* header inline login (visible, inert) */
.header-inner .login{margin-left:auto;text-decoration:none;color:var(--accent);font-weight:600}
.header-inner .login.disabled, .header-inner .login[aria-disabled="true"]{opacity:0.6;pointer-events:none;cursor:default}
.hero{padding:64px 0}
.hero-inner{
	display:flex;
	gap:48px;
	align-items:center;
	background: var(--card);
	backdrop-filter: blur(12px);
	border-radius: var(--border-radius);
	padding: 48px;
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--card-border);
}
.hero-photo-wrap{
	flex:0 0 360px;
	position: relative;
}
.hero-photo{
	width:100%;
	height:auto;
	border-radius: var(--border-radius);
	display:block;
	object-fit:cover;
	box-shadow: var(--shadow-md);
	transition: transform 0.3s ease;
}
.hero-photo:hover{
	transform: scale(1.02);
}
.hero-copy{flex:1;min-width:280px}
.hero-copy h1{
	font-size:3rem;
	font-weight: 700;
	margin:0 0 20px;
	color:var(--text);
	letter-spacing: -0.025em;
	line-height: 1.1;
}
.hero-copy > p{
	color:var(--text-light);
	line-height:1.7;
	font-size: 1.25rem;
	margin-bottom: 32px;
	font-weight: 400;
}
/* Explicitly reduce <p> font size in hero section */
.hero-copy p {
  font-size: 1.2rem !important; /* Ensure smaller font size */
}
/* Ensure <p> font size under <h1> in hero section */
.hero-copy h1 + p {
  font-size: 1.2rem; /* Smaller than <h1> */
}
.cta-row{margin-top:18px}
.cta{background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;margin-right:10px}
.muted{color:var(--muted);text-decoration:none;padding:10px}
.hero-art{width:340px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
.card{background:var(--card);padding:18px;border-radius:10px;border:1px solid var(--border);box-shadow:0 6px 18px rgba(11,74,111,0.04)}
.card h3{margin:0 0 8px;color:var(--text)}
.projects{margin:28px 0}
.family-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.photo-card{background:var(--card);padding:8px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.photo-card img{max-width:100%;border-radius:6px;display:block}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.project{background:var(--card);padding:16px;border-radius:8px;border:1px solid var(--border)}
.blog{margin:28px 0}
.site-footer{
	border-top:1px solid var(--card-border);
	padding:48px 0 32px;
	margin-top:64px;
	background: var(--bg-solid);
}
.footer-inner{
	display:flex;
	justify-content:space-between;
	align-items:center;
	max-width:1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Modern navigation styling */
.footer-links{
	display:flex;
	gap:8px;
	align-items:center;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(8px);
	padding: 8px;
	border-radius: 24px;
	border: 1px solid var(--card-border);
}
.footer-links a{
	color:var(--muted);
	text-decoration:none;
	padding:12px 20px;
	border-radius:20px;
	font-weight:500;
	font-size:0.95rem;
	transition: all 0.2s ease;
	position: relative;
}
.footer-links a:hover{
	background: var(--accent);
	color: white;
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}
.footer-links a:focus{
	outline:2px solid var(--accent);
	outline-offset:2px;
}

/* Contact form styles */
.contact-card{background:var(--card);border:1px solid var(--border);padding:36px;border-radius:14px;box-shadow:0 12px 40px rgba(11,74,111,0.06);margin:28px 0}
.contact-grid{display:grid;grid-template-columns:1fr 460px;gap:36px;align-items:start}
.contact-blurb h1{margin-top:0;font-size:2.1rem}
.contact-blurb p{color:var(--muted);line-height:1.6;margin-bottom:12px}
.contact-meta{margin:12px 0 0;padding:0;list-style:none}
.contact-meta li{color:var(--muted);font-size:0.95rem;margin-bottom:8px}

.contact-form{width:100%}
.contact-form .form-row{display:flex;flex-direction:column;margin-bottom:16px}
.contact-form .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form .col{display:flex;flex-direction:column}
.contact-form label{font-weight:700;margin-bottom:8px}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{padding:12px 14px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:1rem}
.contact-form textarea{min-height:140px}
.form-actions{display:flex;align-items:center}
.cta{padding:12px 20px;border-radius:12px;box-shadow:0 6px 0 rgba(8,48,70,0.06)}
.form-actions .muted{margin-left:12px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:#fff}
.form-status{
  margin-top:16px;
  padding:12px 16px;
  border-radius:8px;
  font-weight:500;
  font-size:0.95rem;
  transition: all 0.3s ease;
}
.form-status.success{
  background-color: #dcfce7;
  border: 1px solid #16a34a;
  color: #166534;
}
.form-status.error{
  background-color: #fef2f2;
  border: 1px solid #dc2626;
  color: #991b1b;
}
.form-status.info{
  background-color: #dbeafe;
  border: 1px solid #2563eb;
  color: #1d4ed8;
}
.form-status:empty{
  display: none;
}

@media (max-width:880px){
	.contact-grid{grid-template-columns:1fr;}
	.contact-blurb{order:2}
	.contact-form{order:1}
	.contact-form .two-col{grid-template-columns:1fr}
}

/* Modern footer social icons */
.socials{
	display:flex;
	gap:16px;
	align-items:center;
	margin-left:24px;
}
.social-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:var(--accent);
	text-decoration:none;
	transition: transform 0.2s ease;
}
.social-link svg{width:32px;height:32px}
.social-link img.social-thumb{
	width:48px;
	height:48px;
	object-fit:cover;
	border-radius:12px;
	border:1px solid var(--card-border);
	display:block;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-sm);
}
.social-link:hover{
	transform: translateY(-2px);
}
.social-link:hover img.social-thumb{
	box-shadow: var(--shadow-md);
	border-color: var(--accent-light);
}

@media (max-width:880px){
	.site-header{position:relative}
	.hero-inner{flex-direction:column;align-items:flex-start}
	.hero-art{width:100%;max-width:420px}
	.hero-copy h1{font-size:1.6rem}
	.cards{grid-template-columns:1fr}
	.project-grid{grid-template-columns:1fr}
	.nav a{margin-left:0;padding:10px 14px}
	/* When nav is opened (body.nav-open), show a full-screen overlay menu */
	body.nav-open .nav{display:flex;position:fixed;inset:0;top:64px;background:var(--bg);flex-direction:column;align-items:stretch;padding:24px;z-index:300;box-shadow:0 8px 40px rgba(15,23,42,0.08)}
	body.nav-open .nav a{font-size:1.125rem;color:var(--text);padding:14px 18px;border-radius:8px}
	body.nav-open .nav .btn{margin-top:8px}
	body.nav-open{overflow:hidden}
	.nav-toggle{display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:8px;margin-left:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none}
	.nav-toggle .hamburger{display:inline-block;width:22px;height:2px;background:var(--text);position:relative;border-radius:2px;transition:transform .18s ease, background .18s ease}
	.nav-toggle .hamburger::before,.nav-toggle .hamburger::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .18s ease, top .18s ease, opacity .18s ease}
	.nav-toggle .hamburger::before{top:-7px}
	.nav-toggle .hamburger::after{top:7px}
	/* transform to X when menu open */
	body.nav-open .nav-toggle .hamburger{background:transparent}
	body.nav-open .nav-toggle .hamburger::before{transform:rotate(45deg);top:0}
	body.nav-open .nav-toggle .hamburger::after{transform:rotate(-45deg);top:0}


/* ensure nav is hidden by default and controlled by hamburger */
	.nav{display:none}
	.nav-toggle{border-radius:8px}
	/* make nav links full-width on mobile for easier tapping */
	.nav a{display:block;padding:12px 10px}
	/* Make nav links full-width touch targets */
	.nav a{display:block;padding:12px 10px}
}

/* accessibility tweaks */
a:focus{outline:3px solid rgba(11,74,111,0.12);outline-offset:3px}

/* larger touch targets */
.nav a, .cta, .nav .btn {touch-action:manipulation}

/* Mockup styles for main container text */
.main-container {
  font-size: 1.2rem; /* Slightly larger font size */
  font-weight: 600; /* Semi-bold for emphasis */
  color: #333; /* Neutral dark color for readability */
  background: linear-gradient(to right, #f9f9f9, #ffffff); /* Subtle gradient */
  padding: 20px; /* Add padding for breathing room */
  border-left: 4px solid #007acc; /* Accent border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  margin: 20px 0; /* Space above and below */
  border-radius: 8px; /* Rounded corners */
}

.main-container a {
  color: #007acc; /* Accent color for links */
  text-decoration: none; /* Remove underline */
  font-weight: 700; /* Bold links */
}

.main-container a:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Adjust <h1> font size for hero and contact sections */
.hero-copy h1, .contact-blurb h1 {
  font-size: 1.8rem; /* Slightly smaller font size */
}

/* Elegant sites section styling */
.sites-section {
  margin-top: 48px;
}

.sites-section h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text);
  letter-spacing: -0.025em;
}

.site-links {
  display: grid;
  gap: 16px;
}

.site-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.site-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

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

.site-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-light);
}

.site-card strong {
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.site-card span {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Responsive design improvements */
@media (max-width: 768px) {
	.container {
		padding: 24px 16px;
	}
	
	.hero-inner {
		flex-direction: column;
		gap: 32px;
		padding: 32px 24px;
	}
	
	.hero-photo-wrap {
		flex: none;
		width: 100%;
		max-width: 300px;
	}
	
	.hero-copy h1 {
		font-size: 2.25rem;
	}
	
	.hero-copy > p {
		font-size: 1.1rem;
	}
	
	.sites-section h2 {
		font-size: 1.5rem;
	}
	
	.footer-links {
		flex-wrap: wrap;
		gap: 4px;
		padding: 6px;
	}
	
	.footer-links a {
		padding: 8px 16px;
		font-size: 0.9rem;
	}
	
	.footer-inner {
		flex-direction: column;
		gap: 24px;
		text-align: center;
		padding: 0 16px;
	}
	
	.socials {
		margin-left: 0;
		justify-content: center;
	}
}