:root{
    --accent: #bdbbb0; /* main site color */
    --accent-contrast: #222;
    --muted: #f5f5f5;
}

*{box-sizing:border-box}

/* ensure the page can stretch to full viewport height so footer can stick to bottom */
html, body { height: 100%; }

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin:18px;
    /* extra bottom padding so fixed/floating widgets (Calendly badge) don't overlap page/footer */
    padding-bottom:96px;
    background:#fafafa;
    color:#111;
}

header{
    display:flex;
    background-color:var(--accent);
    align-items:center;
    justify-content:space-between;
    border-radius:10px;
    margin-bottom:20px;
    padding:10px;
}

/* Make header read like a card with a subtle shadow (matches article styles) */
header{ box-shadow: 6px 6px 18px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04) }

#logo{ border-radius:10px }

/* Improve logo contrast when the image is light or has transparency */
#logo{
    background: #fff; /* white backdrop for light logos */
    padding:6px;
    border-radius:10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border:1px solid rgba(0,0,0,0.04);
    display:inline-block;
    height:auto;
    max-height:110px;
}

nav{ background:white; display:flex; justify-content:space-around; border-radius:10px; margin-right:1%; width:auto; padding:8px 14px }
nav a{ color:var(--accent); padding:5px }

/* Hamburger menu (appears at very small widths) */
.hamburger{ display:none; background:transparent; border:0; cursor:pointer; padding:8px; border-radius:8px }
.hamburger .bar{ display:block; width:22px; height:2px; background:var(--accent-contrast); margin:4px 0; transition: transform 180ms ease, opacity 180ms ease }

/* Slide-down mobile menu container (hidden by default) */
.mobile-menu{ display:none; width:100%; background:white; border-radius:8px; margin-top:8px; overflow:hidden }
.mobile-menu.open{ display:block; animation:slideDown 220ms ease forwards }

@keyframes slideDown{ from{ transform:translateY(-6px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* At very small widths show hamburger and hide inline nav bar */
@media (max-width:375px){
    nav{ display:none }
    .hamburger{ display:inline-block }
}

.page-wrapper{ max-width:1200px; margin:0 auto; padding:0 18px; flex: 1 0 auto; min-height: 0 }

@media (min-width:1400px){ .page-wrapper{ max-width:1400px } article{ padding:28px; margin:24px } }

/* Mobile: stack logo above the nav for narrow viewports */
@media (max-width:750px){
    header{ flex-direction:column; align-items:center; gap:10px; padding:12px }
    nav{ width:100%; display:flex; justify-content:space-around; padding:10px; margin-right:0 }
    nav a{ padding:8px 10px; display:inline-block }
}

article{
    background-color:#fff;
    border-radius:10px;
    border:1px solid #eee;
    box-shadow:8px 8px 16px rgba(0,0,0,0.06);
    padding:20px;
    margin:20px;
}

#hero{ display:block; margin:0 auto; width:100%; max-width:1200px; height:auto; max-height:60vh; object-fit:cover; border-radius:8px }

/* Give hero a card-like separation on the homepage */
#hero{ box-shadow: 8px 8px 22px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04) }

.muted-text{ color:#666; font-size:0.95rem }

/* Owner bio: desktop shows photo left of text; mobile stacks photo above text */
.owner-bio{ display:flex; gap:14px; align-items:flex-start }
.owner-photo{ width:120px; height:120px; object-fit:cover; border-radius:8px; box-shadow:6px 6px 16px rgba(0,0,0,0.06); flex: 0 0 120px }

@media (max-width:750px){
    .owner-bio{ flex-direction:column; align-items:center; text-align:center }
    .owner-photo{ width:160px; height:160px; flex: 0 0 auto }
    .owner-bio > div{ max-width:540px }
}

/* small utility for buttons used on multiple pages */
.btn{ background:var(--accent); color:#fff; padding:10px 16px; border-radius:18px; border:none; cursor:pointer; font-weight:600 }

/* Form styles used site-wide */
.form-card{ background:inherit; padding:14px; border-radius:8px; max-width:900px; margin:0 auto }
.form-card label{ display:block; font-weight:600; margin-bottom:6px; color:var(--accent-contrast) }
.form-card input[type="text"], .form-card input[type="email"], .form-card textarea{ width:100%; padding:10px 12px; border-radius:6px; border:1px solid #ddd; font-size:14px }
.form-card textarea{ min-height:140px; resize:vertical }
.form-messages{ margin-top:12px }
.form-messages .success{ color:green }
.form-messages .error{ color:#b00020 }

.btn--primary{ background:var(--accent); color:#fff; padding:12px 20px; border-radius:20px; font-weight:700; font-size:16px }
.btn, .btn--primary{ transition: box-shadow 120ms ease, transform 120ms ease }
.btn:hover, .btn--primary:hover{ box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-2px) }
.btn:focus, .btn--primary:focus{ outline:3px solid rgba(189,187,176,0.25); outline-offset:2px }

/* Footer */
footer{
    margin-top:28px;
    /* taller footer to provide visual breathing room and prevent overlap with floating widgets */
    padding:28px 0;
    min-height:72px;
    /* subtle card-like separation from main content */
    background: linear-gradient(180deg, rgba(250,250,250,0.9), rgba(245,245,245,0.95));
    border-top:1px solid rgba(189,187,176,0.12);
    box-shadow: 0 -6px 18px rgba(0,0,0,0.03);
    color:#333;
    font-size:0.95rem;
}
footer .footer-inner{ max-width:1200px; margin:0 auto; padding:0 18px; display:flex; justify-content:space-between; gap:12px; align-items:center }
footer a{ color:var(--accent-contrast); text-decoration:none }
footer small{ color:#666 }