/* ========================================
   VINTAGE NEWSPAPER STYLE – DIVINTARA
   (Updated: single-font site using Montserrat only)
   ======================================== */

/* Import Montserrat (weights used: 400, 600, 700) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root{
  /* single site-wide font */
  --font-main: "Montserrat", sans-serif;

  --paper-bg: #ffffff;
  --paper-aged: #fffefc;
  --ink-black: #1a1410;
  --ink-gray: #4a4540;
  --sepia-dark: #5c523e;
  --sepia-mid: #8b7f68;
  --sepia-light: #b8a88a;
  --accent-gold: #c9a961;
  --accent-mocha: #9fbf63; /* green highlight — unchanged */
  --border-color: #2c2418;
  --soft-shadow: 0 6px 12px rgba(0,0,0,0.08);
  --retro-duration: 650ms;
}

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }

/* Body */
body {
  font-family: var(--font-main);
  background-color: var(--paper-bg);
  color: var(--ink-black);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Headings */
h1,h2,h3,h4,h5,h6, .section-heading, .section-subheading, caption, table th {
  font-family: var(--font-main);
  font-weight: 600;
}
.newspaper-title { font-family: var(--font-main); font-weight:700; }

/* Highlight */
.highlight {
  background: linear-gradient(180deg, transparent 60%, var(--accent-mocha) 60%);
  padding: 0 4px;
  font-weight:600;
}

/* Masthead */
.masthead {
  background-color: var(--paper-aged);
  border-top: 4px solid var(--border-color);
  border-bottom: 3px solid var(--border-color);
  padding: 0.6rem 1.75rem 0.9rem;
  text-align: center;
  box-shadow: 0 4px 0 var(--sepia-mid), 0 8px 16px rgba(0,0,0,0.12);
  position: relative;
}
.masthead-top {
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.7rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:0.2rem; color:var(--sepia-dark);
  font-family: var(--font-main);
}
.newspaper-title { font-size:2.6rem; letter-spacing:1.5px; margin:0.1rem 0; color:var(--ink-black); text-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.14); }
.subtitle { font-family:var(--font-main); font-size:0.8rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--sepia-dark); padding-top:0.1rem; }

/* Navigation */
.navigation {
  background: #201712;
  padding: 0.75rem 0;
  text-align: center;
  border-bottom: 3px solid var(--border-color);
  position: sticky; top:0; z-index:50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.28);
}
.navigation a {
  font-family:var(--font-main); color: var(--paper-bg); text-decoration:none; text-transform:uppercase;
  letter-spacing:1.5px; margin:0 1.2rem; font-size:0.9rem; font-weight:600; transition: color 0.3s, opacity 0.3s, transform 0.15s;
  opacity:0.9; position: relative;
}
.navigation a:hover, .navigation a.active { opacity:1; transform: translateY(-1px); }
.navigation a::after { content:""; position:absolute; left:50%; bottom:-0.35rem; width:0; height:2px; background-color:var(--accent-mocha); transform:translateX(-50%); border-radius:999px; }
.navigation a:hover::after, .navigation a.active::after { animation: sketch-underline 0.4s ease-out forwards; }
@keyframes sketch-underline { 0%{width:0;} 35%{width:40%;}65%{width:70%;}100%{width:95%;} }

/* Dividers */
.divider { border:none; border-top:1px solid var(--border-color); margin:2rem 0; }
.divider-thick { border:none; border-top:3px double var(--border-color); margin:3rem 0; }

/* Container */
.container { max-width:1200px; margin:0 auto; padding:1rem; }

/* Page sections */
.page-section { display:none; }
.page-section.active { display:block; }

/* Hero slider
   We're keeping the layout but JS will ensure only the desired slide stays.
*/
.hero-slider { position: relative; overflow:hidden; border:2px solid var(--border-color); background-color:var(--paper-aged); min-height:320px; box-shadow: var(--soft-shadow); margin-bottom:1.1rem; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; }
.hero-slide.active { opacity:1; transform: translateY(0); z-index:2; pointer-events:auto; }
.hero-overlay { position:absolute; inset:0; background:none; color:var(--ink-black); padding: 2.1rem 2.5rem; display:flex; flex-direction:column; justify-content:center; border-left:4px solid var(--accent-mocha); }

/* Ensure overlay text wraps and doesn't stack */
.hero-title { font-size:2rem; line-height:1.05; margin-bottom:0.6rem; max-width:68%; word-break:break-word; }
.hero-subtitle { font-size:1.05rem; color:var(--ink-gray); max-width:65%; }

/* Cover image container */
.cover-image-container { margin: 1.25rem auto; padding: 0.8rem; max-width:1200px; text-align:center; border:1px solid rgba(44,36,24,0.06); }
.cover-image-container img { display:block; width:100%; max-width:1100px; height:auto; margin:0 auto; border-radius:8px; object-fit:contain; }

/* Move landing text up */
#home .section:first-of-type { padding-top: 0.6rem; }
.centered-text { text-align:left; font-family:var(--font-main); font-size:1.02rem; line-height:1.8; max-width:900px; margin: -0.6rem auto 0; padding:1.6rem; background-color:var(--paper-aged); border-top:2px solid var(--border-color); border-bottom:2px solid var(--border-color); }

/* Headings */
.section-heading { font-family:var(--font-main); font-size:2.3rem; font-weight:600; text-align:center; margin-bottom:1rem; color:var(--ink-black); }
.section-subheading { font-family:var(--font-main); text-align:center; font-size:1.05rem; color:var(--ink-gray); max-width:800px; margin:0 auto 1.6rem; }

/* Card base */
.card-matte {
  background-color: var(--paper-bg);
  border-radius:10px;
  border:1px solid rgba(44,36,24,0.06);
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
  transform-origin: center;
  /* override previous "retro" animation: none by default for stability */
  animation: none !important;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Buttons */
.cta-buttons { display:flex; gap:1rem; justify-content:center; margin:2rem 0 0; flex-wrap:wrap; }
.btn-primary, .btn-secondary { font-family:var(--font-main); padding:0.9rem 1.8rem; font-size:0.95rem; text-transform:uppercase; letter-spacing:1px; border-radius:999px; border:2px solid var(--border-color); cursor:pointer; transition: all 0.18s ease; display:inline-block; text-decoration:none; text-align:center; }
.btn-primary { background-color:#211711; color:var(--paper-bg); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.btn-primary:hover { background-color:#3a2c22; transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,0.18); }
.btn-secondary { background-color:#f3efe6; color:var(--ink-black); }
.btn-secondary:hover { background-color:#e6dec7; transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,0.12); }
.full-width { width:100%; }

/* Services grid */
.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; margin-top:1rem; }
.service-card { padding:1.7rem 1.6rem; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; display:flex; flex-direction:column; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,0.06); border-color: var(--accent-mocha); }
.service-card h4 { font-family:var(--font-main); font-size:1.25rem; margin-bottom:0.6rem; color:var(--ink-black); font-weight:600; }
.service-card p { font-family:var(--font-main); margin-bottom:1.2rem; color:var(--ink-gray); flex-grow:1; }

/* Read more */
.read-more { font-family:var(--font-main); color:var(--ink-black); text-decoration:none; font-weight:600; text-transform:uppercase; font-size:0.85rem; letter-spacing:1px; cursor:pointer; border:none; background:none; padding:0; display:inline-block; margin-top:auto; }
.read-more:hover { color:var(--accent-mocha); transform: translateX(6px); }

/* columns */
.two-column { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap:2rem; margin-top:1rem; }
.three-column { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:2rem; margin-top:1.5rem; }

/* Feature lists */
.feature-box { background-color: var(--paper-aged); border-left:4px solid var(--accent-mocha); padding:1.5rem; margin-bottom:1.5rem; }
.feature-box h4 { font-family:var(--font-main); font-size:1.3rem; margin-bottom:0.75rem; color:var(--ink-black); }
.feature-box p { font-family:var(--font-main); color:var(--ink-gray); }
.feature-list, .benefit-list { list-style:none; margin-top:1rem; font-family:var(--font-main); }
.feature-list li, .benefit-list li { padding:0.75rem 0; padding-left:1.5rem; position:relative; border-bottom:1px solid var(--sepia-light); }
.feature-list li::before { content:"►"; position:absolute; left:0; color:var(--accent-mocha); }
.benefit-list li::before { content:"✓"; position:absolute; left:0; color:var(--accent-mocha); }

/* CTA section */
.cta-section { text-align:center; padding:2.1rem 2rem; background-color: var(--paper-aged); border:2px solid var(--border-color); margin:2rem 0 0; }

/* Contact form */
.contact-form { background-color: var(--paper-aged); padding:2.2rem 2.2rem; border:2px solid var(--border-color); }
.form-group { margin-bottom:1.6rem; }
.form-group label { display:block; font-family:var(--font-main); font-weight:600; margin-bottom:0.55rem; color:var(--ink-black); text-transform:uppercase; font-size:0.8rem; letter-spacing:1px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:0.75rem; border:2px solid var(--sepia-mid); background-color: var(--paper-bg); font-family:var(--font-main); font-size:1rem; color:var(--ink-black); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--accent-mocha); }
.form-note { text-align:center; font-size:0.86rem; font-family:var(--font-main); color:var(--sepia-dark); margin-top:1.2rem; line-height:1.8; }

/* Contact info */
.contact-info { background-color: var(--paper-aged); border-left:4px solid var(--accent-mocha); padding:2.1rem 2.2rem 4.6rem; margin-bottom:1.5rem; position:relative; }
.contact-info h4 { font-family:var(--font-main); font-size:1.3rem; margin-bottom:0.75rem; color:var(--ink-black); }
.contact-info p { font-family:var(--font-main); margin-bottom:0.9rem; color:var(--ink-gray); line-height:1.9; }
.contact-info a { color:var(--ink-black); text-decoration:none; }
.contact-info a:hover { color:var(--accent-mocha); }

/* brand mark */
.brand-mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  max-width: 260px;
  width: 52%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Library */
.library-list { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.library-article { padding:1.8rem; border:2px solid var(--border-color); }
.library-article h4 { font-family:var(--font-main); font-size:1.4rem; margin-bottom:0.75rem; }
.library-article p { font-family:var(--font-main); margin-bottom:0.7rem; color:var(--ink-gray); }

/* Logo strip and scrolling
   We'll manage duplication & animation from JS for a smooth loop.
*/
.logo-strip { margin-top:1rem; padding:1.1rem 0.5rem; overflow:hidden; border:2px solid var(--border-color); position:relative; }
.logo-track { display:flex; align-items:center; gap:3rem; will-change: transform; transform: translateX(0); }
.logo-item { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.logo-item img { height:120px; width:auto; object-fit:contain; filter:grayscale(100%); opacity:0.95; transition: opacity 0.2s, filter 0.2s, transform 0.2s; }
.logo-item img:hover { opacity:1; filter:grayscale(0%); transform: translateY(-2px); }

/* About layout */
.about-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1rem 0; }
.about-block, .about-aside { padding: 2.1rem 2.3rem; background: var(--paper-aged); border: 1px solid rgba(44,36,24,0.04); border-radius: 8px; }
.about-block p, .about-aside p { font-size: 0.98rem; line-height:1.85; text-align:left; hyphens:auto; max-width:60ch; color:var(--ink-gray); }
.about-doodle-list { list-style:none; margin:0 0 1.5rem; padding:0; font-family:var(--font-main); font-size:0.95rem; }
.about-doodle-list li { display:flex; align-items:flex-start; gap:0.7rem; margin-bottom:0.7rem; }
.doodle-dot { width:10px; height:10px; border-radius:999px; border:2px solid var(--accent-mocha); margin-top:0.2rem; }

/* Founder */
.founder-block { max-width:900px; margin:0 auto; }

/* Footer */
.footer { text-align:center; padding:2rem; color:var(--sepia-dark); font-size:0.9rem; font-family:var(--font-main); }
.footer p { margin:0.5rem 0; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:2000; }
.modal.hidden { display:none; }
.modal-content { max-width:420px; width:90%; padding:2rem; position:relative; background:#ffffff; border-radius:8px; }
.modal-content h3 { font-family:var(--font-main); font-size:1.7rem; margin-bottom:0.75rem; }
.modal-content p { font-family:var(--font-main); font-size:0.98rem; margin-bottom:0.8rem; }
.modal-form { margin-top:0.8rem; }
.modal-form label { display:block; font-family:var(--font-main); font-size:0.8rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:0.4rem; }
.modal-form input { width:100%; padding:0.6rem; border:2px solid var(--sepia-mid); background-color: var(--paper-bg); font-family:var(--font-main); margin-bottom:0.8rem; }
.modal-note { margin-top:0.6rem; font-size:0.8rem; color:var(--sepia-dark); }
.modal-close { position:absolute; top:0.7rem; right:0.9rem; background:none; border:none; font-size:1.4rem; cursor:pointer; }

/* Back to top button */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: none;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(32, 23, 18, 0.92);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 900px) {
  .about-layout { gap:1.4rem; grid-template-columns:1fr; padding:0; }
  .about-block, .about-aside { padding:1.4rem; }
  .logo-track { gap:2rem; }
  .logo-item img { height:76px; }
  .brand-mark { max-width:160px; width:40%; bottom:10px; }
}
@media (max-width: 768px) {
  .newspaper-title { font-size:2.3rem; }
  .masthead-top { flex-direction: column; gap:0.5rem; }
  .navigation a { margin:0 0.5rem; font-size:0.8rem; }
  .container { padding:1.25rem; }
  .hero-overlay { padding:1.8rem 1.5rem; }
  .hero-title { font-size:1.6rem; max-width:100%; }
  .hero-subtitle { font-size:0.95rem; max-width:100%; }
  .cta-buttons { flex-direction: column; }
  .btn-primary, .btn-secondary { width:100%; }
  .cover-image-container img { max-width:100%; height:auto; }
}

/* Print */
@media print { body { background: white; } .navigation, .cta-buttons, .contact-form, .back-to-top, .modal { display:none !important; } }

/* Belief collapse */
.belief-card { overflow: visible; display:flex; flex-direction:column; gap:0.35rem; }
.belief-summary { font-family:var(--font-main); color:var(--ink-gray); }
.belief-extra { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.2s ease; padding-top:0; }
.belief-card.belief-expanded .belief-extra { padding-top:0.8rem; max-height: 800px; }

/* Grants table styling */
.grants-table { width:100%; border-collapse: collapse; margin-top: 1rem; font-family: var(--font-main); }
.grants-table caption { font-family: var(--font-main); font-weight:600; margin-bottom:0.5rem; }
.grants-table thead th { text-align:left; padding:0.8rem 0.6rem; font-family:var(--font-main); font-weight:600; font-size:0.95rem; border-bottom:2px solid rgba(44,36,24,0.08); }
.grants-table tbody td { padding:0.7rem 0.6rem; border-bottom:1px solid rgba(44,36,24,0.04); vertical-align:top; }
.grants-table tbody tr:nth-child(odd) { background-color: rgba(0,0,0,0.01); }

/* About - What we do: larger container + smaller text */
.about-whatwe { padding: 2.4rem 0; }
.about-whatwe-grid .column { padding: 1.6rem; }
.about-whatwe-text { font-size: 0.94rem; line-height:1.85; font-family:var(--font-main); color:var(--ink-gray); }

/* Focus outlines for accessibility */
.read-more:focus, .belief-toggle:focus, .service-link:focus, .btn-primary:focus, .btn-secondary:focus { outline: 3px solid rgba(159,191,99,0.18); outline-offset: 3px; }

/* WhatsApp ribbon placeholder (kept stylistic space) */
.whatsapp-ribbon {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: 0.2px;
  transform: translateY(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.whatsapp-ribbon:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.28); }
.whatsapp-ribbon-icon { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; flex: 0 0 36px; margin-left: 2px; margin-right: 2px; background: #128C7E; padding: 6px; }
.whatsapp-ribbon-text { display: inline-block; font-size: 15px; line-height: 1; padding-right: 8px; }

/* ==========================
   Zero to Hero Launch Toolkit
   ========================== */

.launch-toolkit-page {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* general cards for this page */
.lt-card {
  border-radius: 12px;
  padding: 1.6rem;
  background: var(--paper-aged);
  border: 1px solid rgba(44,36,24,0.06);
}

/* top row: why + what you get */
.lt-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 1.8rem;
}

/* smaller heading sizes to fit */
.lt-heading { font-size: 1.15rem; margin-bottom: 0.8rem; font-family:var(--font-main); }
.lt-bullets { margin: 0; padding-left: 1.2rem; font-family:var(--font-main); }
.lt-bullets li { margin-bottom: 0.9rem; line-height:1.5; }

/* Pricing + CTA area */
.lt-offer-card { margin-top: 2rem; border-radius: 12px; padding: 1.6rem; background: var(--paper-bg); display:block; }
.lt-offer-inner { display:flex; gap:1.6rem; align-items:flex-start; flex-wrap:wrap; }
.lt-offer-left { flex: 1 1 320px; }
.lt-offer-right { flex: 1 1 320px; display:flex; flex-direction:column; gap:1rem; }
.lt-price-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; opacity:0.9; margin-bottom: 0.6rem; font-family:var(--font-main); }
.lt-price { font-size: 1.6rem; font-weight:700; margin-bottom: 1rem; font-family:var(--font-main); }
.lt-price-note { line-height:1.5; font-family:var(--font-main); }
.lt-main-btn { padding: 0.85rem 1rem; border-radius: 999px; display: inline-block; text-decoration:none; }

/* small auth blocks */
.lt-auth-block.small { padding:0.8rem; border-radius:8px; }
.lt-secure-note { font-size:0.85rem; opacity:0.8; margin-top:0.8rem; font-family:var(--font-main); }
.lt-auth-heading { margin-bottom:0.25rem; font-size:1rem; }
.lt-auth-text { margin-bottom:0.75rem; font-size:0.95rem; line-height:1.5; font-family:var(--font-main); }
.lt-help { font-size:0.9rem; line-height:1.5; font-family:var(--font-main); }

/* bottom row: who it's for + how it works */
.lt-details-grid { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; margin-top:1.8rem; }
.lt-steps { padding-left: 1.4rem; font-family:var(--font-main); }
.lt-steps li { margin-bottom:1rem; line-height:1.5; }

/* responsive adjustments */
@media (max-width: 960px) {
  .lt-intro-grid, .lt-offer-inner, .lt-details-grid { grid-template-columns: 1fr; }
  .lt-offer-inner { flex-direction: column; }
  .lt-offer-card { padding:1rem; }
}

/* -------------------------
   Subtle hover lift for all cards (replaces retro push)
   ------------------------- */
.card-matte:hover,
.about-block:hover,
.library-article:hover,
.service-card:hover,
.lt-card:hover,
.lt-offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

/* reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .card-matte,
  .cover-image-container,
  .hero-slide,
  .logo-strip,
  .contact-info,
  .about-block,
  .about-aside,
  .library-article,
  .service-card,
  .cta-section,
  .modal-content,
  .lt-card,
  .lt-offer-card {
    animation: none !important;
    transition: none !important;
  }
}

/* END */