@charset "UTF-8";
/* =============================================================================
   GENERABILIS INTELLECTUS LLC — Brand Stylesheet
   =============================================================================
   Architecture:
     1. Google Fonts import
     2. Reset & base
     3. CSS custom properties (brand tokens)
     4. Layout utilities
     5. Navigation
     6. Hero (homepage)
     7. Buttons
     8. Sections
     9. Cards
    10. Values grid
    11. Pull quote
    12. Page header (inner pages)
    13. Prose (long-form content)
    14. Contact block & form
    15. Footer
    16. Post list (research page)
    17. Utility classes
    18. Responsive breakpoints

   Brand colors are defined in :root as CSS custom properties.
   Always use var(--teal), var(--text), etc. — never hardcode hex values
   outside of the :root block so the palette stays easy to update.
   ============================================================================= */
/* --- 1. Google Fonts -------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500&display=swap");
/* --- 2. Reset & base -------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- 3. CSS custom properties (brand tokens) -------------------------------- */
:root {
  /* Primary palette */
  --teal: #1D9E75; /* Primary teal — buttons, links, accents */
  --teal-dark: #085041; /* Dark teal — headings, hero text, footer bg */
  --teal-mid: #0F6E56; /* Mid teal — hero body, hover states */
  --teal-light: #E1F5EE; /* Light teal — hero bg, card fills */
  --teal-pale: #F0FAF6; /* Pale teal — subtle section backgrounds */
  --amber: #FAC775; /* Amber — accent dot in logo mark */
  /* Text */
  --text: #1a1a1a; /* Primary body text */
  --text-muted: #5a5a5a; /* Secondary text, descriptions */
  --text-faint: #888780; /* Timestamps, captions, LLC logotype text */
  /* Borders */
  --border: rgba(0,0,0,0.10); /* Default subtle border */
  --border-mid: rgba(0,0,0,0.16); /* Slightly stronger border (form inputs) */
  /* Surfaces */
  --white: #ffffff;
  --surface: #f8f8f6; /* Off-white background for alternating sections */
  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  /* Typography */
  --font-serif: 'Lora', Georgia, serif; /* Headings */
  --font-sans: 'Inter', system-ui, sans-serif; /* Body, UI */
  /* Layout */
  --max-w: 860px; /* Maximum content width */
  --nav-h: 68px; /* Navigation bar height — used for sticky offset */
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Headings use the serif font and dark teal color */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.3;
  color: var(--teal-dark);
}

/* clamp() scales font size fluidly between viewport widths */
h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h2 {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
}

h3 {
  font-size: 1.2rem;
}

/* h4 uses sans-serif to feel more like a UI label than a document heading */
h4 {
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 500;
}

p {
  margin-bottom: 1.1rem;
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.35rem;
}

em {
  font-style: italic;
}

strong {
  font-weight: 500;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* --- 4. Layout -------------------------------------------------------------- */
/* Centered content wrapper used on every section */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- 5. Navigation ---------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100; /* Above all page content */
  background: rgba(255, 255, 255, 0.97); /* Near-opaque for legibility */
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px); /* Frosted glass effect */
  height: var(--nav-h);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Height controls the logo size — width:auto preserves aspect ratio */
.nav-logo img {
  height: 55px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  transition: color 0.18s;
}

.nav-links a:hover {
  color: var(--teal);
  text-decoration: none;
}

.nav-links a.active {
  color: var(--teal);
} /* Current page highlight */
/* CTA nav item (Contact) — styled as a filled teal button */
.nav-cta a {
  background: var(--teal);
  color: var(--white) !important;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.nav-cta a:hover {
  background: var(--teal-mid);
  text-decoration: none;
}

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.2s;
}

/* Mobile: show hamburger, hide links until toggled open */
@media (max-width: 640px) {
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    gap: 1.1rem;
    align-items: flex-start;
  }
  .nav-links.open {
    display: flex;
  } /* Toggled by JS in default.html */
}
/* --- 6. Hero (homepage) ----------------------------------------------------- */
.hero {
  background: var(--teal-light);
  padding: 5rem 0 4.5rem;
  text-align: center;
}

.hero h1 {
  color: var(--teal-dark);
  margin-bottom: 1.1rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero p {
  font-size: 1.1rem;
  color: var(--teal-mid);
  max-width: 500px;
  margin: 0 auto 2rem;
  line-height: 1.75;
}

/* Stacked logo displayed in hero — size controlled here not on the img tag */
.hero-logo {
  margin: 0 auto 2.5rem;
  width: 240px;
}

/* --- 7. Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  padding: 0.7rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.18s, transform 0.1s;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--teal-mid);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Outline variant — used for secondary CTAs on colored backgrounds */
.btn-outline {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
}

.btn-outline:hover {
  background: var(--teal-light);
}

/* --- 8. Sections ------------------------------------------------------------ */
.section {
  padding: 4.5rem 0;
}

.section-alt {
  background: var(--surface);
} /* Subtle off-white bg */
.section-teal {
  background: var(--teal-light);
} /* Light teal bg */
.section-dark {
  background: var(--teal-dark);
  color: var(--teal-light);
}

/* Adjust text colors inside dark sections */
.section-dark h2, .section-dark h3 {
  color: var(--teal-light);
}

.section-dark p {
  color: rgba(225, 245, 238, 0.85);
}

/* Small uppercase label shown above section headings */
.section-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.75rem;
}

/* Section header group — label + h2 + optional intro paragraph */
.section-header {
  margin-bottom: 2.5rem;
}

.section-header h2 {
  margin-bottom: 0.6rem;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 540px;
}

/* --- 9. Cards --------------------------------------------------------------- */
/* Responsive auto-fit grid — fills available width with min 220px columns */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
}

/* Teal-tinted square icon container at top of card */
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.card-icon svg {
  width: 20px;
  height: 20px;
}

.card h3 {
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.4rem;
}

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

/* --- 10. Values grid -------------------------------------------------------- */
/* Two-column grid of value items with a teal left border accent */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem 2rem;
}

.value-item {
  border-left: 2.5px solid var(--teal);
  padding-left: 1rem;
}

.value-item h4 {
  color: var(--teal-dark);
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.value-item p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
}

/* --- 11. Pull quote --------------------------------------------------------- */
/* Styled blockquote with teal left border and pale teal background */
.pull-quote {
  border-left: 3px solid var(--teal);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--teal-pale);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.pull-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--teal-dark);
  margin: 0;
}

/* --- 12. Page header (inner pages) ----------------------------------------- */
/* Teal banner at the top of every inner page (about, research, contact) */
.page-header {
  background: var(--teal-light);
  padding: 3.5rem 0 3rem;
}

.page-header h1 {
  color: var(--teal-dark);
  margin-bottom: 0.5rem;
}

.page-header p {
  color: var(--teal-mid);
  font-size: 1.05rem;
  margin: 0;
  max-width: 540px;
}

/* --- 13. Prose (long-form content) ----------------------------------------- */
/* Applied to the content area of inner pages for readable line length */
.prose {
  max-width: 660px;
}

.prose h2 {
  margin: 2.2rem 0 0.75rem;
}

.prose h3 {
  margin: 1.6rem 0 0.5rem;
}

.prose p {
  color: var(--text-muted);
}

.prose ul li {
  color: var(--text-muted);
}

/* --- 14. Contact block & form ----------------------------------------------- */
/* Info block (email, phone, address) */
.contact-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 500px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
}

.contact-row:last-child {
  border-bottom: none;
}

.contact-label {
  font-size: 0.78rem;
  color: var(--text-faint);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 72px;
}

.contact-value {
  font-size: 0.95rem;
  color: var(--text);
}

.contact-value a {
  color: var(--teal);
}

/* --- 15. Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--teal-dark);
  color: rgba(225, 245, 238, 0.75);
  padding: 3rem 0 2rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Logo is inverted to white via CSS filter */
.footer-brand img {
  height: 40px;
  margin-bottom: 0.75rem;
  filter: brightness(0) invert(1) opacity(0.85);
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(225, 245, 238, 0.6);
  max-width: 240px;
  line-height: 1.6;
}

.footer-links h4 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(225, 245, 238, 0.5);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.4rem;
}

.footer-links a {
  font-size: 0.9rem;
  color: rgba(225, 245, 238, 0.75);
}

.footer-links a:hover {
  color: var(--teal-light);
  text-decoration: none;
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: rgba(225, 245, 238, 0.45);
}

/* --- 16. Post list (research page) ----------------------------------------- */
.post-list {
  list-style: none;
  padding: 0;
}

.post-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

.post-item:first-child {
  padding-top: 0;
}

.post-date {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
}

.post-item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.post-item h3 a {
  color: var(--teal-dark);
}

.post-item h3 a:hover {
  color: var(--teal);
  text-decoration: none;
}

.post-excerpt {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* --- 17. Utility classes ---------------------------------------------------- */
.text-center {
  text-align: center;
}

.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

/* --- 18. Responsive breakpoints -------------------------------------------- */
@media (max-width: 640px) {
  .section {
    padding: 3rem 0;
  }
  .hero {
    padding: 3.5rem 0 3rem;
  }
  .footer-inner {
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/*# sourceMappingURL=main.css.map */