/* Baroudi Consulting additions on top of the shared EQALL-derived system */

:root { --card: var(--bg-elevated); }

/* Brand lockup: tree mark + wordmark */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.05; }
.brand-name small { display: block; font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.footer .brand { color: #fff; }
.footer .brand-name small { color: var(--on-dark-3); }

/* Hero visual */
.hero-visual { position: relative; }
.hero-photo {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  aspect-ratio: 5 / 4;
  background: var(--bg-dark);
}
.hero-photo picture { display: contents; } /* WebP wrapper: lay the img out as if direct */
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-quote {
  position: absolute; left: -24px; bottom: -28px;
  max-width: 330px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-pop);
}
.hero-quote p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.hero-quote .who { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.hero-quote .who img { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; object-position: top; }
/* Stacked under the text: keep the photo to a readable size, with the quote
   card still overlapping its bottom-left corner as on wide screens (room is
   left below for the overhang). On phones the card sits under the photo. */
@container (max-width: 1024px) {
  .hero-visual { max-width: 600px; margin-bottom: 28px; }
}
@container (max-width: 560px) {
  .hero-visual { margin-bottom: 0; }
  .hero-quote { position: static; margin-top: 16px; max-width: none; }
}

/* Service cards */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@container (max-width: 1000px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  text-decoration: none; color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.service-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.service-num { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-blue-deep); }
.service-icon {
  width: 44px; height: 44px; border-radius: 12px; margin: 18px 0 18px;
  display: grid; place-items: center;
  background: rgba(46,187,124,0.10); color: var(--brand-blue-deep);
}
.service-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 10px; }
.service-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.service-card .link-more { margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 600; color: var(--brand-blue-deep); }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden; }
@container (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 32px 28px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); margin-bottom: -1px; }
.step:last-child { border-right: 0; }
.step-num { font-size: 13px; letter-spacing: 0.12em; color: var(--brand-green); font-weight: 600; }
.step h3 { color: #fff; font-size: 22px; margin: 14px 0 10px; font-weight: 600; letter-spacing: -0.01em; }
.step p { color: var(--on-dark-2); margin: 0; font-size: 15px; line-height: 1.6; }

/* Values */
.values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@container (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 520px) { .values-grid { grid-template-columns: 1fr; } }
.value-card { border-top: 2px solid var(--brand-blue-deep); padding: 20px 4px 0; }
.value-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.value-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px; }
@container (max-width: 760px) { .mv-grid { grid-template-columns: 1fr; } }
.mv-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; }
.mv-card .eyebrow { margin-bottom: 12px; }
.mv-card p { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }

/* Founder */
.founder-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5cqi, 72px); align-items: center; }
@container (max-width: 900px) { .founder-grid { grid-template-columns: 1fr; } }
.founder-photo { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-pop); max-width: 460px; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.role-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.role-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.role-list li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--brand-blue-deep); margin-top: 8px; }

/* Service detail rows (services page) */
.svc-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 5cqi, 72px); padding: clamp(40px, 5cqi, 64px) 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.svc-detail:first-child { border-top: 0; padding-top: 0; }
@container (max-width: 860px) { .svc-detail { grid-template-columns: 1fr; } }
.svc-detail h2 { font-family: var(--font-display); font-size: clamp(28px, 3cqi, 38px); letter-spacing: -0.02em; line-height: 1.1; margin: 12px 0 14px; font-weight: 600; }
.svc-detail .lede { font-size: 17px; }
.svc-panel { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.svc-panel h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.svc-panel h3 + ul { margin-bottom: 22px; }
.svc-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.svc-panel li { position: relative; padding-left: 20px; color: var(--ink-2); line-height: 1.55; font-size: 15px; }
.svc-panel li::before { content: "→"; position: absolute; left: 0; color: var(--brand-blue-deep); }

/* EQALL callout */
.eqall-callout { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 32px; }
.eqall-callout img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.eqall-callout h3 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.eqall-callout p { margin: 0; color: var(--ink-2); }
@container (max-width: 720px) { .eqall-callout { grid-template-columns: 1fr; } }

/* ---------- Chat (ported from EQALL support-chat + ask-eqall) ---------- */
.chat-section { background: linear-gradient(180deg, #EEF8F1 0%, #F2FAF6 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chat-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Bot switcher pills (light/dark inversion of the same green pair) */
.sc-bubbles { display: flex; gap: 8px; margin-bottom: 14px; flex: 0 0 auto; }
.sc-bubble {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid #0F7A49; background: #E8F8F0;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #0F7A49;
  cursor: pointer; white-space: nowrap;
}
.sc-bubble:hover { background: #DFF5E9; }
.sc-bubble.is-active { background: #0F7A49; border-color: #0F7A49; color: #E8F8F0; }

/* Common questions: always one row that scrolls sideways */
.sc-suggest-wrap { position: relative; }
.sc-suggestions {
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
  scroll-behavior: smooth;
}
.sc-suggestions::-webkit-scrollbar { display: none; }
.sc-suggestion {
  flex: 0 0 auto; white-space: nowrap;
  font-family: inherit; font-size: 12.5px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line, rgba(0,0,0,0.1));
  background: #fff; color: var(--ink, #111); cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.sc-suggestion:hover { border-color: #0F7A49; color: #0F7A49; }
/* Fade the edge that has more chips behind it */
.sc-suggest-wrap::before, .sc-suggest-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 2px; width: 36px; pointer-events: none; opacity: 0; transition: opacity .2s ease; z-index: 1;
}
.sc-suggest-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg, #fbfbf9), transparent); }
.sc-suggest-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg, #fbfbf9), transparent); }
.sc-suggest-wrap.has-left::before, .sc-suggest-wrap.has-right::after { opacity: 1; }
.sc-suggest-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2);
  font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px;
  box-shadow: 0 2px 8px rgba(13,36,25,0.12);
}
.sc-suggest-arrow.is-left { left: -2px; }
.sc-suggest-arrow.is-right { right: -2px; }
@media (hover: none) { .sc-suggest-arrow { display: none; } }

/* Assistant reply typography */
.sc-msg-html p { margin: 0 0 8px; }
.sc-msg-html p:last-child { margin-bottom: 0; }
.sc-msg-html ol, .sc-msg-html ul { margin: 4px 0 8px; padding-left: 22px; }
.sc-msg-html li { margin-bottom: 4px; }
.sc-msg-html strong { font-weight: 600; }
.sc-msg-html em { font-style: italic; }
.sc-msg-html a { color: inherit; text-decoration: underline; }
.sc-msg-html h1, .sc-msg-html h2, .sc-msg-html h3, .sc-msg-html h4 { font-weight: 600; line-height: 1.3; margin: 10px 0 6px; }
.sc-msg-html h1 { font-size: 17px; }
.sc-msg-html h2 { font-size: 15px; }
.sc-msg-html h3, .sc-msg-html h4 { font-size: 14px; }
.sc-msg-html :first-child { margin-top: 0; }
.sc-msg-html code { font-size: 12.5px; background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 5px; }
.sc-msg-html blockquote { margin: 6px 0 8px; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.sc-msg-html table { border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.sc-msg-html th, .sc-msg-html td { border: 1px solid var(--line-strong); padding: 5px 9px; text-align: left; }
.sc-scroll::-webkit-scrollbar { width: 6px; }
.sc-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 99px; }
@media (max-width: 860px) { .sc-composer-input { font-size: 16px !important; } }

/* Disclaimer + Terms popup */
.sc-disclaimer { margin-top: 10px; text-align: center; font-size: 11px; line-height: 1.45; color: var(--ink-3, #888); flex: 0 0 auto; }
.sc-terms-link { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-blue-deep); text-decoration: underline; cursor: pointer; }
.sc-terms-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; background: rgba(13,36,25,0.45); }
.sc-terms-card {
  position: relative; width: min(280px, 100%); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 60px rgba(13,36,25,0.24); font-size: 13px;
}
.sc-terms-title { padding-right: 22px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); }
.sc-terms-card a { color: var(--ink); text-decoration: underline; }
.sc-reset-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink, #0D2419); text-decoration: none; cursor: pointer; }
.sc-reset-link:disabled { cursor: default; }
.sc-terms-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; cursor: pointer; padding: 4px; font-size: 18px; line-height: 1; color: var(--ink-3); }

/* Ask Baroudi launcher. Closed: a floating pill (the root takes no pointer
   events so its strip on phones doesn't swallow taps; only the pill does).
   Open (html.chat-open): on wide screens the page shifts left and the chat is a
   full-height panel on the right; on narrower screens it fills the screen. */
#ask-baroudi { position: fixed; right: 24px; bottom: 24px; z-index: 9999; pointer-events: none; }
#ask-baroudi .ae-pill, #ask-baroudi .ae-panel { pointer-events: auto; }
#ask-baroudi .ae-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; box-shadow: 0 6px 24px rgba(13,36,25,0.16);
  cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
}
#ask-baroudi .ae-pill:hover { box-shadow: 0 8px 30px rgba(13,36,25,0.22); }
#ask-baroudi .ae-pill[aria-busy="true"] { cursor: progress; opacity: .75; }
#ask-baroudi .ae-pill img { width: 20px; height: 20px; object-fit: contain; display: block; }
#ask-baroudi .ae-dot { width: 8px; height: 8px; border-radius: 50%; background: #1DB76E; }
#ask-baroudi .ae-panel {
  box-sizing: border-box; overflow: hidden; position: relative;
  background: var(--bg); padding: 48px 16px 16px;
}
#ask-baroudi .ae-close {
  position: absolute; top: 12px; right: 16px; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--ink-2);
}
/* Let the message list absorb the panel's spare height */
#ask-baroudi .sc-root { display: flex; flex-direction: column; height: 100%; }
#ask-baroudi .ae-panel .sc-scroll { flex: 1 1 auto; min-height: 0 !important; max-height: none !important; }
#ask-baroudi .ae-pill { animation: ae-in .28s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes ae-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes ae-slide { from { transform: translateX(24px); opacity: 0; } }
/* The mobile menu has its own "Ask our AI" button, so hide the pill while it's open */
body.nav-open #ask-baroudi .ae-pill { display: none; }
@media (max-width: 640px) {
  #ask-baroudi { right: 12px; left: 12px; bottom: 12px; }
  #ask-baroudi .ae-pill { margin-left: auto; width: fit-content; }
}
/* Open, wide screens: the page makes room and the chat docks on the right. */
@media (min-width: 1024px) {
  body { transition: margin-right .25s ease; }
  html.chat-open body { margin-right: 400px; }
  html.chat-open #ask-baroudi { top: 0; right: 0; bottom: 0; left: auto; }
  html.chat-open #ask-baroudi .ae-panel {
    width: 400px; height: 100vh; height: 100dvh;
    border-left: 1px solid var(--line); box-shadow: -8px 0 32px rgba(13,36,25,0.08);
    animation: ae-slide .25s cubic-bezier(0.2,0.8,0.2,1);
  }
  /* Carried over from the previous page: appear in place, no slide-in. */
  html.chat-restore #ask-baroudi .ae-panel { animation: none; }
  /* ...and draw the panel's frame before its content arrives. */
  html.chat-open #ask-baroudi:empty {
    width: 400px; background: var(--bg);
    border-left: 1px solid var(--line); box-shadow: -8px 0 32px rgba(13,36,25,0.08);
  }
}
/* Header while the chat is docked: drop what's redundant ("Ask our AI", the
   tagline under the logo). The compact (burger) header kicks in by itself when
   the page is under 860px wide, because layout follows the page width. */
@media (min-width: 1024px) {
  html.chat-open .nav-signin { display: none !important; }
  html.chat-open .brand-name small { display: none; }
}
/* With the chat open, keep "Book a call" next to the nav links instead of
   spread to the far edge. */
@container (min-width: 861px) {
  html.chat-open .nav-inner { justify-content: flex-start; }
  html.chat-open .nav-links { margin-left: auto; }
  html.chat-open .nav-cta { margin-left: 28px; }
}
@media (min-width: 1024px) {
  html.chat-open .nav-mobile { right: 400px; }
}
/* Open, narrower screens: the chat fills the screen; the × returns to the page. */
@media (max-width: 1023px) {
  html.chat-open, html.chat-open body { overflow: hidden; }
  html.chat-open #ask-baroudi { inset: 0; }
  html.chat-open #ask-baroudi .ae-panel { width: 100%; height: 100vh; height: 100dvh; animation: ae-in .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  #ask-baroudi .ae-panel, #ask-baroudi .ae-pill { animation: none !important; }
}

/* Compact header on small screens: CTA lives in the mobile menu */
.brand-name { white-space: nowrap; }
@container (max-width: 860px) {
  .brand-name small { display: none; }
  .nav-cta .nav-start, .nav-cta .nav-signin { display: none; }
}

/* ---------- Stats band animation (home) ---------- */
.stat-card { position: relative; overflow: hidden; }
.stat-bar {
  display: block; height: 3px; width: 48px; margin: 18px 0 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-teal));
  transform-origin: left center;
}
.stat-num { font-variant-numeric: tabular-nums; min-height: 0.95em; }
.stats-animate .stat-card {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), background-color .3s ease, border-color .3s ease;
}
.stats-animate .stat-bar { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.stats-animate.is-visible .stat-card { opacity: 1; transform: none; }
.stats-animate.is-visible .stat-bar { transform: scaleX(1); }
.stats-animate.is-visible .stat-card:nth-child(2), .stats-animate.is-visible .stat-card:nth-child(2) .stat-bar { transition-delay: .16s; }
.stats-animate.is-visible .stat-card:nth-child(3), .stats-animate.is-visible .stat-card:nth-child(3) .stat-bar { transition-delay: .32s; }
.stats-animate.is-visible .stat-card:nth-child(4), .stats-animate.is-visible .stat-card:nth-child(4) .stat-bar { transition-delay: .48s; }
.stat-num.is-done { animation: stat-pop .5s ease; }
@keyframes stat-pop { 0% { text-shadow: 0 0 0 rgba(139,210,123,0); } 40% { text-shadow: 0 0 28px rgba(139,210,123,.55); } 100% { text-shadow: 0 0 0 rgba(139,210,123,0); } }
.stat-num.is-typing::after {
  content: ""; display: inline-block; width: 4px; height: .8em; margin-left: 6px;
  background: var(--brand-green); vertical-align: -0.05em;
  animation: caret 0.8s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
/* Soft light that follows the cursor across a stat card */
.stat-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(139,210,123,0.14), transparent 70%);
  transition: opacity .3s ease;
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover { background-color: rgba(255,255,255,0.04); }
.stat-card:hover .stat-bar { width: 88px; transition: width .4s ease; }

/* ---------- Hover lift for boxes, site-wide ---------- */
.mv-card, .svc-panel, .eqall-callout, .problem-card, .chat-fallback, .hero-quote {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mv-card:hover, .svc-panel:hover, .eqall-callout:hover, .problem-card:hover, .chat-fallback:hover, .hero-quote:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.service-card:hover { transform: translateY(-3px); }
.service-card .service-icon, .service-card .link-more { transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.service-card:hover .service-icon { background: var(--brand-blue-deep); color: #fff; transform: scale(1.06); }
.service-card:hover .link-more { transform: translateX(4px); }

.value-card { transition: transform .25s ease, border-color .25s ease; border-radius: 0 0 var(--r-md) var(--r-md); }
.value-card:hover { transform: translateY(-3px); border-top-color: var(--brand-green); }

/* Dark-section boxes: lift, lighten, glow */
.step, .usecase-card { transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; position: relative; }
.step:hover, .usecase-card:hover {
  transform: translateY(-3px);
  background-color: rgba(255,255,255,0.04);
  box-shadow: inset 0 2px 0 var(--brand-green), 0 18px 40px rgba(0,0,0,0.25);
  z-index: 1;
}
.usecase-card:hover { background-color: #163526; }
.step h3, .step-num { transition: color .25s ease; }
.step:hover .step-num { color: var(--brand-teal); }

.founder-photo img { transition: transform .6s ease; }
.founder-photo:hover img { transform: scale(1.04); }
.hero-photo img { transition: transform .8s ease; }
.hero-photo:hover img { transform: scale(1.03); }

.contact-info-block { transition: transform .25s ease; }
.contact-info-block:hover { transform: translateX(4px); }

/* FAQs: click to open and read; no hover or motion effects */
.faq-item summary::after { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .stats-animate .stat-card, .stats-animate .stat-bar { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mv-card:hover, .svc-panel:hover, .eqall-callout:hover, .problem-card:hover, .chat-fallback:hover, .hero-quote:hover,
  .service-card:hover, .value-card:hover, .step:hover, .usecase-card:hover, .contact-info-block:hover,
  .founder-photo:hover img, .hero-photo:hover img { transform: none; }
}

/* Answer options in a bot reply (Health Check multiple choice) */
.sc-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sc-choice {
  font-family: inherit; font-size: 13px; line-height: 1.35; text-align: left;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid #0F7A49; background: #E8F8F0; color: #0F7A49;
  font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.sc-choice:hover { background: #0F7A49; color: #E8F8F0; transform: translateY(-1px); }
.sc-choice:focus-visible { outline: 2px solid #0F7A49; outline-offset: 2px; }

/* "Experience behind it" note on each service */
.svc-proof { margin: 20px 0 0; padding: 14px 16px; border-left: 3px solid var(--brand-blue-deep); background: rgba(46,187,124,0.06); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.svc-related { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.svc-related span { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.svc-related a, .article-related a { color: var(--brand-blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-related { margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.svc-proof span { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--brand-blue-deep); margin-bottom: 4px; }

/* Career timeline (About) */
.career { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-strong); }
.career-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 0 0 28px 24px; position: relative; }
.career-item::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand-blue-deep); }
.career-item:first-child::before { background: var(--brand-blue-deep); }
.career-when { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--brand-blue-deep); padding-top: 3px; font-variant-numeric: tabular-nums; }
.career-what h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.career-org { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.career-what p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 70ch; }
@container (max-width: 640px) { .career-item { grid-template-columns: 1fr; gap: 4px; } }

/* Leave room under the footer's last line for the floating "Ask Baroudi"
   pill (24px offset + ~50px pill), so it never covers the tagline. */
.footer { padding-bottom: 96px; }
@container (max-width: 640px) { .footer { padding-bottom: 84px; } }

/* Home: founder section as four compact "seats" (no photo) */
.founder-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.seat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@container (max-width: 1000px) { .seat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) { .seat-grid { grid-template-columns: 1fr; } }
.seat { border-top: 2px solid var(--brand-blue-deep); padding-top: 16px; transition: transform .25s ease, border-color .25s ease; }
.seat:hover { transform: translateY(-3px); border-top-color: var(--brand-green); }
.seat-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-blue-deep); }
.seat p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
/* Keep "Read Joe's story" on the right of the founder heading; stack on phones */
.founder-head { flex-wrap: nowrap; max-width: none; }
.founder-head > div { flex: 1 1 0; min-width: 0; }
.founder-head > .btn { flex: none; }
@container (max-width: 640px) { .founder-head { flex-wrap: wrap; } .founder-head > div { flex-basis: 100%; } }

/* ---------- Insights (thought leadership) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.insights-toolbar { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.insights-search {
  display: flex; align-items: center; gap: 10px; max-width: 560px;
  padding: 0 16px; height: 48px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg-elevated); color: var(--ink-3);
}
.insights-search:focus-within { border-color: var(--brand-blue-deep); box-shadow: 0 0 0 3px rgba(46,187,124,0.15); }
.insights-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg-elevated); color: var(--ink-2);
}
.filter-chip span { font-weight: 500; color: var(--ink-4); margin-left: 4px; font-variant-numeric: tabular-nums; }
.filter-chip:hover { border-color: #0F7A49; color: #0F7A49; }
.filter-chip.is-active { background: #0F7A49; border-color: #0F7A49; color: #E8F8F0; }
.filter-chip.is-active span { color: rgba(232,248,240,0.75); }
.filter-chip:focus-visible, .insight-card:focus-visible { outline: 2px solid #0F7A49; outline-offset: 2px; }
.insights-count { margin: 0 0 24px; font-size: 14px; color: var(--ink-3); }

.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@container (max-width: 1000px) { .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 640px) { .insight-grid { grid-template-columns: 1fr; } }
.insight-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: inherit; text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.insight-card[hidden] { display: none; }
.insight-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.insight-card h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.insight-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.insight-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.insight-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.tag-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(46,187,124,0.10); color: #0F7A49; text-decoration: none; }
a.tag-pill:hover { background: rgba(46,187,124,0.2); }
.draft-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: #FFF4D6; color: #7A5300; }
.insights-empty { padding: 40px 24px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.insights-empty[hidden] { display: none; }
.insights-empty h3 { margin: 0 0 6px; font-size: 18px; }
.insights-empty p { margin: 0; color: var(--ink-2); }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-blue-deep); text-decoration: underline; cursor: pointer; }

/* Article page */
.article { padding-block: clamp(32px, 5cqi, 64px) clamp(48px, 6cqi, 80px); }
.article-wrap { max-width: 760px; }
.draft-banner { margin-top: 20px; padding: 12px 16px; border-radius: var(--r-sm); background: #FFF4D6; color: #5C3F00; font-size: 14px; }
.article-title { font-family: var(--font-display); font-size: clamp(34px, 5cqi, 52px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; margin: 16px 0 20px; text-wrap: balance; }
.article-byline { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.article-byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; }
.article-byline div { display: flex; flex-direction: column; font-size: 14px; }
.article-byline span { color: var(--ink-3); font-size: 13px; }
.article-body { padding-top: 28px; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.article-body .article-lede { font-size: 21px; line-height: 1.55; color: var(--ink); }
.article-body h2 { font-size: 26px; line-height: 1.25; color: var(--ink); margin: 40px 0 12px; letter-spacing: -0.015em; text-wrap: balance; }
.article-body p, .article-body ul { margin: 0 0 18px; }
.article-body blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--brand-blue-deep); font-size: 22px; line-height: 1.45; color: var(--ink); }
.article-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding: 24px 28px; border-radius: var(--r-lg); background: var(--bg-elevated); border: 1px solid var(--line); }
.article-cta h2 { margin: 0 0 4px; font-size: 20px; }
.article-cta p { margin: 0; color: var(--ink-2); }

/* Article components: data-to-evidence flow, FACTS list, client cases */
.evo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 28px 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg-elevated); }
.evo-step { position: relative; padding: 18px 16px 18px 20px; border-right: 1px solid var(--line); }
.evo-step:last-child { border-right: 0; }
.evo-step span { display: block; font-size: 16px; font-weight: 600; color: var(--brand-blue-deep); }
.evo-step small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.evo-step:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 16px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-elevated); color: var(--brand-blue-deep); font-size: 13px; line-height: 18px; text-align: center; z-index: 1; }
.evo-step.is-end { background: #0F7A49; }
.evo-step.is-end span { color: #E8F8F0; }
.evo-step.is-end small { color: rgba(232,248,240,0.8); }
@container (max-width: 640px) {
  .evo { grid-template-columns: 1fr; }
  .evo-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .evo-step:not(:last-child)::after { content: "↓"; right: auto; left: 20px; top: auto; bottom: -9px; }
}
.facts { margin: 20px 0 24px; display: grid; gap: 12px; }
.facts > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.facts dt { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #0F7A49; color: #E8F8F0; font-size: 22px; font-weight: 700; }
.facts dd { margin: 0; font-size: 17px; line-height: 1.6; }
.facts dd strong { color: var(--ink); }
.case { margin: 24px 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elevated); font-size: 16px; line-height: 1.6; }
.case p { margin: 0 0 10px; }
.case-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-blue-deep); margin-bottom: 10px; }
.case-result { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15px; }
.case-result span { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--brand-blue-deep); font-variant-numeric: tabular-nums; }
.article-note { margin-top: 28px; font-size: 14px; color: var(--ink-3); font-style: italic; }

/* ---------- Insight cards v2: topic cover band, featured card ---------- */
.insight-card { padding: 0; overflow: hidden; gap: 0; }
.insight-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.insight-cover {
  position: relative; height: 128px; overflow: hidden;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 140%);
  color: #fff;
}
.insight-rings { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 1.2; transition: transform .6s ease; }
.insight-card:hover .insight-rings { transform: scale(1.06) rotate(-2deg); }
.insight-icon {
  position: absolute; left: 20px; bottom: 18px; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(255,255,255,0.16); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(4px);
}
.insight-topic { position: absolute; left: 76px; bottom: 30px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
.insight-year { position: absolute; right: 18px; top: 14px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
.insight-read { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--brand-blue-deep); }
.insight-read span { display: inline-block; transition: transform .2s ease; }
.insight-card:hover .insight-read span { transform: translateX(4px); }
.insight-tags { margin-top: auto; }

/* Featured (newest) article: wide card with cover on the left */
.insight-card.is-featured { grid-column: span 2; flex-direction: row; }
.insight-card.is-featured .insight-cover { height: auto; min-height: 260px; flex: 0 0 44%; }
.insight-card.is-featured .insight-body { padding: 28px 30px; }
.insight-card.is-featured h3 { font-size: 26px; }
.insight-card.is-featured p { font-size: 16px; }
.insight-card.is-featured .insight-icon { width: 56px; height: 56px; border-radius: 14px; left: 26px; bottom: 26px; }
.insight-card.is-featured .insight-icon svg { width: 28px; height: 28px; }
.insight-card.is-featured .insight-topic { left: 96px; bottom: 44px; }
@container (max-width: 1000px) { .insight-card.is-featured { grid-column: span 2; } }
@container (max-width: 640px) {
  .insight-card.is-featured { grid-column: auto; flex-direction: column; }
  .insight-card.is-featured .insight-cover { min-height: 0; height: 140px; flex: none; }
  .insight-card.is-featured h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .insight-card:hover .insight-rings, .insight-card:hover .insight-read span { transform: none; } }

/* Poll results (benchmark article) */
.poll { margin: 20px 0 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elevated); }
.poll figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.poll figcaption span { font-weight: 500; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.poll-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) 44px; align-items: center; gap: 12px; padding: 5px 0; font-size: 14.5px; }
.poll-label { color: var(--ink-2); line-height: 1.35; }
.poll-bar { height: 10px; border-radius: 99px; background: rgba(46,187,124,0.12); overflow: hidden; }
.poll-bar i { display: block; height: 100%; border-radius: 99px; background: #7FC6A0; }
.poll-row.is-top .poll-bar i { background: #0F7A49; }
.poll-row.is-top .poll-label { color: var(--ink); font-weight: 600; }
.poll-pct { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
@container (max-width: 560px) { .poll-row { grid-template-columns: minmax(0, 1fr) 44px; } .poll-bar { grid-column: 1 / -1; grid-row: 2; } }
.article-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.article-note a:hover { color: var(--brand-blue-deep); }

/* Article images and charts */
.article-body .portrait { float: right; width: 200px; margin: 4px 0 16px 24px; }
.article-body .portrait img { width: 100%; height: auto; border-radius: var(--r-md); display: block; box-shadow: var(--shadow-soft); }
.article-body .portrait figcaption { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.article-body .portrait figcaption a, .article-body .bar-source a, .article-body p a, .article-body li a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.article-body p a:hover, .article-body li a:hover { color: var(--brand-blue-deep); }
.article-body h2 { clear: both; }
@container (max-width: 560px) { .article-body .portrait { float: none; width: 160px; margin: 0 0 16px; } }
.bar-chart { margin: 20px 0 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elevated); }
.bar-chart figcaption { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 12px; align-items: center; padding: 6px 0; font-size: 14.5px; }
.bar-label { color: var(--ink-2); }
.bar-track { height: 14px; border-radius: 99px; background: rgba(46,187,124,0.12); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 99px; background: #7FC6A0; }
.bar-row.is-top .bar-track i { background: #0F7A49; }
.bar-value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-value small { font-weight: 600; color: #0F7A49; margin-left: 4px; }
.bar-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.bar-source { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
@container (max-width: 560px) { .bar-row { grid-template-columns: 1fr auto; } .bar-track { grid-column: 1 / -1; grid-row: 2; } }

/* Schedule page: booking panel (Outlook can't be embedded, so we link out) */
.schedule-book {
  margin-top: 20px; padding: 40px 32px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, #EEF8F1 0%, var(--bg-elevated) 100%);
}
.schedule-book-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: #0F7A49; color: #E8F8F0; }
.schedule-book h3 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.schedule-book p { margin: 0 auto 20px; max-width: 380px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.schedule-book .schedule-book-alt { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-3); }
.schedule-book-alt a { color: var(--brand-blue-deep); }
.career-org a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.career-org a:hover { color: var(--brand-blue-deep); }

/* Schedule page: embedded Calendly booking calendar */
.schedule-embed { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; min-width: 320px; height: 820px; }
.schedule-embed iframe { display: block; width: 100%; height: 820px; border: 0; }
.schedule-embed-alt { margin: 12px 4px 0; font-size: 13.5px; color: var(--ink-3); }
.schedule-embed-alt a { color: var(--brand-blue-deep); }
@container (max-width: 640px) { .schedule-embed, .schedule-embed iframe { height: 1000px; } }