/* ═══ TEMPLATE C — MODERN ASYMMETRIC — SHARED STYLESHEET ═══
   Best fit: professional / B2B-adjacent local businesses (accounting,
   financial advisory, real estate, legal, consulting firms). Confident,
   data-forward. Multi-page site: index.html, services.html, about.html,
   contact.html all share this stylesheet. Keep the bento grid (deliberately
   uneven block sizes), the staggered timeline, and the dense FAQ list. Do
   not flatten the bento grid into uniform cards or center the hero.
   See README.md for full guidance. */

:root {
  --charcoal:   #1C2B3A;
  --charcoal-2: #24384A;
  --lime:       #A6823C;
  --lime-dark:  #8C6C2E;
  --white:      #FFFFFF;
  --off-white:  #FAF7F1;
  --ink:        #1C2B3A;
  --muted:      #5C6670;
  --border:     #E3DFD3;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body { font-family: 'Karla', sans-serif; background: var(--white); color: var(--ink); line-height: 1.65; max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-family: 'Source Serif 4', serif; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--charcoal); }
.mono { font-family: 'Karla', sans-serif; letter-spacing: 0.04em; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; width: 100%; }
section { padding: 6rem 0; }

nav { padding: 1.25rem 0; border-bottom: 1px solid var(--border); position: relative; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
.nav-logo { font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.nav-logo .dot { width: 10px; height: 10px; background: var(--lime); border-radius: 2px; }
.nav-links { display: flex; align-items: center; gap: 2.25rem; list-style: none; }
.nav-links a { font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.nav-links a.current { color: var(--charcoal); }
.nav-cta { background: var(--charcoal); color: var(--white) !important; padding: 0.6rem 1.4rem; border-radius: 100px; }

/* MOBILE MENU TOGGLE — hidden on desktop, shown under the 900px breakpoint */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--charcoal); border-radius: 2px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* PAGE HEADER — used on Services/About/Contact instead of the full hero */
.page-header { padding: 4rem 0 3rem; }
.page-header .hero-tagline { margin-bottom: 1.25rem; }
.page-header h1 { font-size: clamp(2rem, 4.5vw, 3rem); }

/* HERO — asymmetric, offset heading, floating stat chip (home page only) */
#hero { padding: 5rem 0 3rem; position: relative; overflow: hidden; }
.hero-layout { display: grid; grid-template-columns: 7fr 5fr; gap: 2rem; align-items: start; }
.hero-tagline { font-family: 'Karla', sans-serif; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.76rem; color: var(--lime-dark); background: #F3ECDD; display: inline-block; padding: 0.4rem 0.9rem; border-radius: 3px; margin-bottom: 1.5rem; }
#hero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin-bottom: 1.5rem; }
#hero .sub { color: var(--muted); font-size: 1.05rem; max-width: 460px; margin-bottom: 2rem; }
.btn { display: inline-block; padding: 0.9rem 1.9rem; border-radius: 100px; font-weight: 700; font-size: 0.92rem; }
.btn-primary { background: var(--charcoal); color: var(--white); }
.btn-lime { background: var(--lime); color: var(--charcoal); }

.hero-stat-stack { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.hero-stat-card { background: var(--charcoal); color: var(--white); border-radius: 16px; padding: 1.5rem 1.75rem; }
.hero-stat-card .val { font-family: 'Source Serif 4', serif; font-size: 2rem; font-weight: 700; color: var(--lime); }
.hero-stat-card .lbl { font-size: 0.82rem; color: #A8ADB5; margin-top: 0.3rem; }
.hero-stat-card.light { background: var(--off-white); color: var(--charcoal); }
.hero-stat-card.light .val { color: var(--charcoal); }
.hero-stat-card.light .lbl { color: var(--muted); }

/* BENTO GRID — asymmetric feature blocks, NOT uniform 3-up cards */
#features { background: var(--off-white); }
.section-header { margin-bottom: 3rem; }
.section-header .eyebrow { font-family: 'Karla', sans-serif; font-weight: 700; font-size: 0.78rem; color: var(--lime-dark); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 0.75rem; }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 200px); gap: 1.25rem; }
.bento-item { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; }
.bento-item.large { grid-column: span 2; grid-row: span 2; background: var(--charcoal); color: var(--white); }
.bento-item.large h3 { color: var(--white); }
.bento-item.large p { color: #A8ADB5; }
.bento-item.tall { grid-row: span 2; }
.bento-item.wide { grid-column: span 2; }
.bento-item .icon-chip { width: 44px; height: 44px; border-radius: 10px; background: var(--lime); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.bento-item.large .icon-chip { background: var(--lime); }
.bento-item h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.bento-item p { color: var(--muted); font-size: 0.9rem; }

/* SERVICES PAGE — a flatter, listing version of the bento concept per-service */
.service-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.service-detail-card { background: var(--off-white); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; }
.service-detail-card .icon-chip { width: 44px; height: 44px; border-radius: 10px; background: var(--lime); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.service-detail-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.service-detail-card p { color: var(--muted); font-size: 0.92rem; }

/* STAGGERED TIMELINE — offset left/right, connecting vertical line */
.timeline-track { position: relative; max-width: 800px; margin: 3rem auto 0; }
.timeline-track::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border); transform: translateX(-50%); }
.timeline-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem; position: relative; }
.timeline-row:nth-child(even) .timeline-content { grid-column: 2; text-align: left; }
.timeline-row:nth-child(odd) .timeline-content { grid-column: 1; text-align: right; }
.timeline-dot { position: absolute; left: 50%; top: 0.3rem; width: 14px; height: 14px; background: var(--lime); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--charcoal); border-radius: 50%; transform: translateX(-50%); z-index: 1; }
.timeline-content .step-label { font-family: 'Karla', sans-serif; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.74rem; color: var(--lime-dark); margin-bottom: 0.4rem; }
.timeline-content h4 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.timeline-content p { color: var(--muted); font-size: 0.9rem; }

/* STAT BAND — dark, mono numbers, asymmetric column widths */
#stats { background: var(--charcoal); color: var(--white); }
.stats-layout { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; align-items: center; }
.stats-layout h2 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.stat-block { text-align: center; border-left: 1px solid #3A3F47; padding-left: 2rem; }
.stat-block .num { font-family: 'Source Serif 4', serif; font-size: 2.4rem; font-weight: 700; color: var(--lime); }
.stat-block .lbl { font-size: 0.82rem; color: #A8ADB5; margin-top: 0.4rem; }

/* ABOUT PAGE */
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.about-visual { aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: 18px; }
.about-text p { color: var(--muted); margin-bottom: 1.25rem; font-size: 1rem; }
.credentials-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.credential-chip { background: var(--off-white); border: 1px solid var(--border); border-radius: 100px; padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600; color: var(--charcoal); }

/* FAQ AS LIST — dense, mono numbering, not accordion cards */
.faq-row { display: grid; grid-template-columns: 60px 1fr; gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--border); }
.faq-row .q-num { font-family: 'Source Serif 4', serif; color: var(--lime-dark); font-weight: 700; }
.faq-row h4 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.faq-row p { color: var(--muted); font-size: 0.92rem; }

/* CONTACT PAGE */
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; }
.contact-info-card { background: var(--charcoal); color: var(--white); border-radius: 18px; padding: 2rem; }
.contact-info-card h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 1.25rem; }
.contact-detail { margin-bottom: 1.25rem; }
.contact-detail .label { font-family: 'Karla', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); display: block; margin-bottom: 0.3rem; }
.contact-detail .value { font-size: 0.98rem; color: var(--white); }
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-group label { font-size: 0.8rem; font-weight: 600; color: var(--charcoal); display: block; margin-bottom: 0.4rem; }
.form-group input, .form-group textarea {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 10px;
  font-family: 'Karla', sans-serif; font-size: 0.95rem; background: var(--off-white); color: var(--ink);
}
.form-group textarea { resize: vertical; min-height: 120px; }

#cta { text-align: center; background: var(--off-white); }
#cta h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: 1.25rem; }
#cta p { color: var(--muted); max-width: 480px; margin: 0 auto 2rem; }

footer { background: var(--charcoal); color: #8A8F97; text-align: center; padding: 2.5rem 2rem; }
.footer-logo { color: var(--white); font-weight: 800; font-size: 1.1rem; }
.footer-links { display: flex; justify-content: center; gap: 1.75rem; list-style: none; margin: 1rem 0; }
.footer-links a { font-size: 0.8rem; color: #8A8F97; }
.footer-links a:hover { color: var(--lime); }
footer p { font-size: 0.8rem; margin-top: 1rem; }

/* PREVIEW BANNER — flags this as a Modern Steward pre-sale demonstration,
   built from public info only. Never remove for a live client deployment. */
.preview-banner { background: #C4F542; color: var(--charcoal); text-align: center; font-size: 0.82rem; font-weight: 700; padding: 0.6rem 1rem; }
.preview-banner strong { text-decoration: underline; }

@media (max-width: 900px) {
  .hero-layout, .stats-layout, .timeline-row, .about-layout, .contact-layout { grid-template-columns: 1fr; min-width: 0; }
  .hero-layout > *, .about-layout > * { min-width: 0; }
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .bento-item.large, .bento-item.tall, .bento-item.wide { grid-column: span 2; grid-row: span 1; }
  .timeline-track::before { left: 20px; }
  .timeline-dot { left: 20px; }
  .timeline-row:nth-child(odd) .timeline-content, .timeline-row:nth-child(even) .timeline-content { grid-column: 1; text-align: left; padding-left: 3rem; }
  .stat-block { border-left: none; padding-left: 0; border-top: 1px solid #3A3F47; padding-top: 1.5rem; }

  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(28,43,58,0.08);
    padding: 0.5rem 1.5rem 1.25rem;
    z-index: 50;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-cta { text-align: center; margin-top: 0.75rem; }

  section { padding: 3.5rem 0; }
  .container { padding: 0 1.25rem; }
}

@media (max-width: 480px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-item.large, .bento-item.tall, .bento-item.wide { grid-column: span 1; }
  .contact-layout, .about-layout { gap: 2rem; }
  .stats-layout { grid-template-columns: 1fr; }
}