/* ==========================================================================
   Yogesh Strategy & Consulting — black & white professional minimalism
   White background, light-grey alternate bands, black ink, black footer.
   Loaded after main.css so it wins the cascade. Light theme only.
   ========================================================================== */

:root {
  /* Type: serif display headings + clean sans body (TrueNorth style) */
  --tc-heading-font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  --tc-display-font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  --tc-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Accent + ink: monochrome */
  --tc-theme-primary: #111111;
  --tc-theme-primary-rgb: rgba(17, 17, 17, 0.16);
  --tc-theme-primary-dark: #000000;
  --tc-theme-primary-light: #e6e6e6;

  --tc-theme-heading: #0a0a0a;
  --tc-theme-body: #3f3f46;
  --tc-theme-secondary: #6b7280;
  --tc-neutral-1000: #0a0a0a;

  /* Surfaces: white primary, very light grey for alternate bands */
  --tc-theme-secondary-1: #f5f5f6;
  --tc-bg-1: #f5f5f6;
  --tc-border-1: #e7e7e9;
  --tc-border-2: #e7e7e9;
  --tc-gradient-1: linear-gradient(180deg, #ffffff 0%, #f5f5f6 100%);
  --tc-gradient-2: linear-gradient(90deg, #ffffff 0%, #f5f5f6 100%);
  --tc-gradient-5: -webkit-linear-gradient(top, #111111, #444444);
  --tc-shadow-1: 0 18px 40px rgba(0, 0, 0, 0.06);

  --bs-primary: #111111;
  --bs-primary-rgb: 17, 17, 17;
}

/* ---- Typography: serif display headings, sans body ---- */
body {
  -webkit-font-smoothing: antialiased;
  color: var(--tc-theme-body);
  font-family: var(--tc-body-font-family);
}
h1, h2, h3, h4, h5, h6,
.ds-1, .ds-2, .ds-3, .ds-4, .ds-5, .ds-6 {
  font-family: var(--tc-heading-font-family);
  letter-spacing: -0.01em;
  color: var(--tc-theme-heading);
}
.hero-title { line-height: 1.02; }
.section-lede { color: var(--tc-theme-body); font-family: var(--tc-body-font-family); }
.nav-link, .btn, .navbar { font-family: var(--tc-body-font-family); }

/* ---- More air: generous vertical rhythm so each section reads on its own -- */
.section-padding { padding-top: 140px; padding-bottom: 140px; }
.sec-padding { padding-top: 120px; padding-bottom: 120px; }
@media (max-width: 991px) {
  .section-padding { padding-top: 84px; padding-bottom: 84px; }
  .sec-padding { padding-top: 72px; padding-bottom: 72px; }
}

/* Section eyebrow: uppercase, letter-spaced, grey (TrueNorth style) */
.text-primary.text-decoration-underline {
  text-decoration: none !important;
  font-family: var(--tc-body-font-family);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  font-size: 13px;
  color: #8a8a8a !important;
}
.text-primary.text-decoration-underline::before { content: none; }

/* ---- Buttons: solid black, subtle depth and a smooth lift ---- */
.btn {
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
  border-radius: 12px;
  font-weight: 600;
}
.btn-primary {
  --bs-btn-bg: #111111;
  --bs-btn-border-color: #111111;
  --bs-btn-hover-bg: #000000;
  --bs-btn-hover-border-color: #000000;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24); }
.btn-outline-primary {
  --bs-btn-color: #111111;
  --bs-btn-border-color: #111111;
  --bs-btn-hover-bg: #111111;
  --bs-btn-hover-border-color: #111111;
  --bs-btn-hover-color: #ffffff;
}
.btn-outline-primary:hover { transform: translateY(-2px); }

/* ---- Cards: light-grey boxes, black icon chip, faded serif corner number -- */
.experti,
.engagement-card {
  background: #f4f4f5 !important;
  border: 1px solid #ececee !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  padding: 40px !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.experti:hover,
.engagement-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.10) !important;
  border-color: #dcdce0 !important;
}
/* Clean icon chip: white Bootstrap-icon glyph on a black rounded square */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #111111;
  color: #ffffff;
  margin-bottom: 24px;
  flex: 0 0 auto;
}
.icon-chip i { color: #ffffff; font-size: 26px; line-height: 1; }
.icon-chip-sm { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 6px; }
.icon-chip-sm i { font-size: 20px; }
/* Card titles/body stay sans; titles bold, tight */
.experti h3,
.engagement-card h3 {
  font-family: var(--tc-body-font-family);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tc-theme-heading);
}
.experti .text-secondary,
.engagement-card .text-secondary { color: #5b616e !important; }
/* Big corner index: faded serif numeral */
.stroke_light_xl {
  font-family: var(--tc-heading-font-family) !important;
  -webkit-text-stroke: 0 !important;
  color: #e2e2e5 !important;
  opacity: 1;
  font-weight: 700;
}

/* Cards need white behind them to read as boxes (like the reference) */
#Services.bg-secondary-1 { background: #ffffff !important; }

/* ---- A black band for contrast (the engagement CTA) ---- */
#Work .bg-secondary-1 {
  background: #0d0d0d !important;
  border-radius: 24px;
}
#Work .bg-secondary-1 h3,
#Work .bg-secondary-1 p { color: #ffffff !important; }
#Work .bg-secondary-1 .btn-primary {
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-color: #111111;
  --bs-btn-hover-bg: #ececec;
  --bs-btn-hover-border-color: #ececec;
  --bs-btn-hover-color: #111111;
}

a { transition: color 0.2s ease; }

/* Drop the decorative PNG marker column in the About timeline accordions */
#bioAccordion .position-absolute.d-flex.flex-column { display: none !important; }
#bioAccordion .ps-10 { padding-left: 0 !important; }

/* Portfolio case-study illustrations stay monochrome; real logos keep colour */
.service-item img,
.portfolio-image { filter: grayscale(1); }

/* ---- Smaller portrait in the About section, with more surrounding space -- */
.home1_section2 .zoom-img.mw-500 { max-width: 400px; }
@media (max-width: 991px) {
  .home1_section2 .zoom-img.mw-500 { max-width: 320px; }
}

/* ---- Stats as four individual boxes ---- */
.stats-panel { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; margin-top: 8px; }
.stat-box {
  height: 100%;
  text-align: left;
  background: #0d0d0d;
  color: #fff;
  border-radius: 20px;
  padding: 26px 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stat-box:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,.18); }
.stat-num {
  font-family: var(--tc-heading-font-family);
  font-size: 52px;
  line-height: 1;
  color: #fff !important;
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
}
.stat-num .odometer { color: #fff !important; }
.stat-plus { color: #fff; }
.stat-label {
  font-family: var(--tc-body-font-family);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}
.stat-box p { color: #9a9ea8 !important; font-size: 14px; margin-bottom: 0; line-height: 1.5; }

/* ---- Blog: black band with white text (alternate rhythm) ---- */
#Blog { background: #0d0d0d !important; }
#Blog h2, #Blog h4, #Blog h4 a, #Blog span { color: #ffffff !important; }
#Blog h4 a:hover { color: #cfcfcf !important; }
#Blog .text-primary { color: #9a9a9a !important; }
#Blog .bg-primary { background: #ffffff !important; color: #111111 !important; }

/* ---- Section rhythm: alternate white / grey / black ---- */
/* Services: light-grey band, white cards */
#Services.bg-secondary-1 { background: #f5f5f6 !important; }
#Services .experti { background: #ffffff !important; }

/* Work: black band with white cards + a white CTA box */
#Work { background: #0d0d0d !important; }
#Work .text-primary { color: #9a9a9a !important; }
#Work > .container > .row .col-lg-8 h2,
#Work > .container > .row .col-lg-8 p { color: #ffffff !important; }
#Work .engagement-card { background: #ffffff !important; border-color: #ffffff !important; }
#Work .bg-secondary-1 { background: #ffffff !important; }
#Work .bg-secondary-1 h3,
#Work .bg-secondary-1 p { color: #111111 !important; }
#Work .bg-secondary-1 .btn-primary {
  --bs-btn-bg: #111111;
  --bs-btn-border-color: #111111;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #000000;
  --bs-btn-hover-border-color: #000000;
  --bs-btn-hover-color: #ffffff;
}

/* ---- No oval / pill shapes anywhere: use soft rectangles ---- */
.rounded-pill,
.rounded-top-pill,
.rounded-bottom-pill { border-radius: 16px !important; }

/* Accordion header chip spacing */
.service-item .icon-chip { margin: 0 12px 0 0 !important; }

/* ---- Footer: black background, white text ---- */
.footer-home1.bg-black,
.footer-home1.bg-dark-black { background-color: #000000 !important; }
.footer-home1 .col.bg-dark,
footer .col.bg-dark { background-color: #000000 !important; }
/* "conversation!" and any accent text in the footer must read white on black */
.footer-home1 .text-primary { color: #ffffff !important; }
.footer-home1 a.card-hover { color: #111111 !important; }