:root { --color-white: #ffffff; --color-teal-dark: #0f766e; --color-teal: #14b8a6; --color-teal-light: #ccfbf1; --color-grey-dark: #1f2937; --color-grey: #4b5563; --color-grey-light: #e5e7eb; --color-bg-soft: #f8fafc; --radius-pill: 9999px; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; --spacing-xl: 4rem; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; background-color: var(--color-bg-soft); color: var(--color-grey-dark); } .brand-name { font-weight: 700; font-size: 1.25rem; color: var(--color-teal-dark); } .footer-brand-name { font-weight: 700; font-size: 1.5rem; color: var(--color-teal-dark); margin-bottom: var(--spacing-sm); display: block; } .button-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; border-radius: var(--radius-pill); background-color: var(--color-teal-dark); color: var(--color-white); text-decoration: none; font-weight: 600; transition: background-color 0.2s ease; } .button-pill:hover { background-color: var(--color-teal); } .sticky-header { position: sticky; top: 0; z-index: 1000; background-color: var(--color-white); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .header-container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1200px; margin: 0 auto; padding: var(--spacing-md) var(--spacing-lg); } .brand-link { justify-self: start; display: flex; align-items: center; gap: var(--spacing-sm); text-decoration: none; } .brand-link svg { height: 32px; width: auto; color: var(--color-teal-dark); } .desktop-nav { justify-self: center; display: flex; gap: var(--spacing-lg); } .nav-link { text-decoration: none; color: var(--color-grey); font-weight: 500; transition: color 0.2s ease; } .nav-link:hover { color: var(--color-teal-dark); } .header-actions { justify-self: end; display: flex; align-items: center; gap: var(--spacing-md); } .burger-menu { display: none; background: none; border: none; color: var(--color-grey-dark); cursor: pointer; padding: var(--spacing-sm); } .burger-menu svg { width: 24px; height: 24px; } .mobile-nav { display: none; flex-direction: column; background-color: var(--color-white); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--color-grey-light); } .mobile-nav.is-open { display: flex; } .mobile-nav-link { text-decoration: none; color: var(--color-grey-dark); padding: var(--spacing-sm) 0; font-weight: 500; border-bottom: 1px solid var(--color-grey-light); text-align: left; } .mobile-cta { margin-top: var(--spacing-md); text-align: center; } .site-footer { background-color: var(--color-white); border-top: 1px solid var(--color-grey-light); padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md); margin-top: auto; } .footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--spacing-xl); } .footer-tagline { color: var(--color-grey); line-height: 1.5; margin: 0; } .footer-heading { font-weight: 700; color: var(--color-grey-dark); margin-top: 0; margin-bottom: var(--spacing-md); } .footer-link { display: block; text-decoration: none; color: var(--color-grey); margin-bottom: var(--spacing-sm); transition: color 0.2s ease; } .footer-link:hover { color: var(--color-teal-dark); } .contact-link { display: flex; align-items: flex-start; gap: var(--spacing-sm); line-height: 1.4; } .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-teal); } .footer-bottom { max-width: 1200px; margin: var(--spacing-xl) auto 0; padding-top: var(--spacing-md); border-top: 1px solid var(--color-grey-light); text-align: center; color: var(--color-grey); font-size: 0.875rem; } @media (max-width: 768px) { .header-container { display: flex; justify-content: space-between; } .desktop-nav { display: none; } .header-cta { display: none; } .burger-menu { display: block; } .footer-container { grid-template-columns: 1fr; gap: var(--spacing-lg); text-align: left; } }
/* footer extras */
.footer__extras{margin-top:16px;}
.footer__extrasInner{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;}
.footer__social{display:flex;gap:10px;align-items:center;}
.footer-social{display:inline-flex;gap:8px;align-items:center;text-decoration:none;}
.footer-social__icon{display:block;}
.footer__poemWrap{max-width:520px;}
.footer-poem{opacity:0.9;font-size:0.95em;line-height:1.35;}
/* --- injected by logo step --- */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{width:28px;height:28px;display:inline-block;flex:0 0 auto}
.brand-logo *{vector-effect:non-scaling-stroke}
/* --- /injected by logo step --- */