/* ============================================================
   WARM THEME — shared by the case study pages
   Cream · Sage · Olive · Terracotta · Young Serif + Inter
   Loaded after theme.css and each page's own <style>.
   ============================================================ */
:root {
  --warm-bg: #F7F2E9;
  --warm-beige: #EBE6D8;
  --warm-sage-bg: #E1E2CD;
  --warm-ink: #2E2C25;
  --warm-muted: #6B6558;
  --warm-rule: #D8D1BC;
  --warm-olive: #5C6048;
  --warm-sage: #778D66;
  --warm-terra: #B5694A;
  --serif: 'Young Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html body { background-color: var(--warm-bg) !important; font-family: var(--sans); }

/* ── Navigation ───────────────────────────────────────────── */
html body #mainNav,
html body #subNav { background-color: var(--warm-bg) !important; border-bottom: 1px solid var(--warm-rule) !important; box-shadow: none !important; }
html body #mainNav .navbar-brand {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--warm-ink) !important;
}
html body #mainNav .nav-link,
html body #subNav .nav-link { font-family: var(--sans) !important; color: var(--warm-ink) !important; }
html body #mainNav .nav-link:hover,
html body #subNav .nav-link:hover,
html body #subNav .nav-link.active { color: var(--warm-terra) !important; }
html body #mainNav .dropdown-menu { background-color: var(--warm-bg) !important; border: 1px solid var(--warm-rule) !important; box-shadow: none !important; }
html body #mainNav .dropdown-item { font-family: var(--sans) !important; color: var(--warm-ink) !important; }
html body #mainNav .dropdown-item:hover,
html body #mainNav .dropdown-item.active { background-color: var(--warm-beige) !important; color: var(--warm-ink) !important; }

/* ── Section backgrounds ──────────────────────────────────── */
html body .case-study-header {
  background: var(--warm-beige) !important;
  background-image: none !important;
}
html body .case-study-header::before { display: none !important; animation: none !important; }
html body section.case-study-content,
html body section.scroll-reveal.case-study-content { background: var(--warm-bg) !important; background-image: none !important; }

/* ── Headings ─────────────────────────────────────────────── */
html body h2.masthead-heading,
html body .case-study-header h2 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 2.9rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  color: var(--warm-ink) !important;
}
html body section.case-study-content h3,
html body .case-study-content .col-lg-10 > h3,
html body h3[id] {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 2.1rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--warm-ink) !important;
}
html body h4,
html body .case-study-content h4,
html body .case-study-header h4 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--warm-ink) !important;
}
html body h5, html body h6 { font-family: var(--serif) !important; font-weight: 400 !important; color: var(--warm-ink) !important; }

/* ── Body copy ────────────────────────────────────────────── */
html body p,
html body .lead,
html body p.lead,
html body li,
html body figcaption,
html body blockquote,
html body td, html body th {
  font-family: var(--sans) !important;
  color: var(--warm-muted) !important;
}
html body p:not(.lead),
html body li { font-size: 1.05rem !important; line-height: 1.7; }
html body .lead, html body p.lead { font-size: 1.05rem !important; line-height: 1.7; }
html body .case-study-header p.lead { font-size: 1.25rem !important; color: var(--warm-ink) !important; line-height: 1.5; }
html body .text-muted, html body figcaption.text-muted { color: var(--warm-muted) !important; }
html body .col-lg-10 blockquote.blockquote p {
  font-family: var(--serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1.7rem !important;
  line-height: 1.45 !important;
  color: var(--warm-terra) !important;
}

/* ── Chips ────────────────────────────────────────────────── */
html body .badge,
html body .badge.bg-dark,
html body span.badge {
  background: rgba(92, 96, 72, 0.06) !important;
  background-color: rgba(92, 96, 72, 0.06) !important;
  border: 1px solid #CFC8B0 !important;
  border-radius: 100px !important;
  color: var(--warm-olive) !important;
  font-family: var(--sans) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.45rem 0.85rem !important;
}

/* ── Teal accents -> terracotta / sage ────────────────────── */
html body [style*="color:#0D9488"],
html body [style*="color: #0D9488"],
html body [style*="color:#0d9488"],
html body [style*="color: #0d9488"] { color: var(--warm-terra) !important; }

/* small uppercase labels -> olive */
html body [style*="letter-spacing:2px"][style*="#0D9488"],
html body [style*="letter-spacing: 2px"][style*="#0D9488"] {
  color: var(--warm-olive) !important;
  font-family: var(--sans) !important;
  letter-spacing: 0.08em !important;
  font-size: 0.76rem !important;
}
/* big stat numbers -> serif terracotta */
html body [style*="font-weight:800"][style*="#0D9488"] {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--warm-terra) !important;
}
html body [style*="fill:#0D9488"],
html body [style*="fill: #0D9488"] { fill: var(--warm-sage) !important; }
html body svg [fill="#0D9488"] { fill: var(--warm-sage) !important; }

/* ── Cards: no card layout (flat, no box) ─────────────────── */
html body [style*="background:#fff"],
html body [style*="background: #fff"],
html body [style*="background:#ffffff"],
html body [style*="background-color:#fff"],
html body [style*="background-color: #fff"],
html body [style*="background:#F6FFFD"],
html body [style*="background: #F6FFFD"],
html body [style*="background:#F0FDFA"],
html body [style*="background: #F0FDFA"],
html body [style*="background-color: #F0FDFA"],
html body [style*="background-color:#F0FDFA"],
html body [style*="rgba(255,240,240"],
html body [style*="rgba(255, 240, 240"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body [style*="box-shadow"] { box-shadow: none !important; }

/* ── Images and video: soft, slight shadow ────────────────── */
html body .case-study-content img,
html body .case-study-content video,
html body .case-study-content img.img-fluid,
html body .case-study-content video.img-fluid,
html body .case-study-content video:not(.img-fluid) {
  box-shadow: 0 2px 10px rgba(46, 44, 37, 0.06), 0 1px 2px rgba(46, 44, 37, 0.04) !important;
  border-radius: 12px !important;
}

/* ── Links styled as buttons: no fills, no teal, in any state ── */
html body .back-link,
html body .back-link:hover,
html body .back-link:focus,
html body .back-link:focus-visible,
html body .back-link:active {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--warm-olive) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
html body .back-link:hover, html body .back-link:focus-visible { color: var(--warm-ink) !important; }
html body .back-link .back-arrow { color: var(--warm-terra); font-weight: 700; transition: transform 0.2s ease; }
html body .back-link:hover .back-arrow { transform: translateX(-3px); }
/* any leftover .btn / old CTA: same flat link look in every state */
html body .btn, html body .btn:hover, html body .btn:focus, html body .btn:active,
html body .looking-for-connect-btn, html body .looking-for-connect-btn:hover,
html body .looking-for-connect-btn:focus, html body .looking-for-connect-btn:focus-visible,
html body .looking-for-connect-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--warm-olive) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  padding: 0 !important;
  text-decoration: none !important;
}
/* mobile Menu toggle: olive, not teal, in every state */
html body #mainNav .navbar-toggler,
html body #mainNav .navbar-toggler:not(.collapsed),
html body #mainNav .navbar-toggler[aria-expanded="true"],
html body #mainNav .navbar-toggler:hover,
html body #mainNav .navbar-toggler:focus,
html body #mainNav .navbar-toggler:focus-visible,
html body #mainNav .navbar-toggler:active,
html body #mainNav .navbar-toggler:hover:focus {
  background-color: var(--warm-olive) !important;
  border-color: var(--warm-olive) !important;
  color: var(--warm-bg) !important;
  box-shadow: none !important;
  font-family: var(--sans) !important;
}
html body #mainNav .navbar-toggler:hover,
html body #mainNav .navbar-toggler[aria-expanded="true"] {
  background-color: var(--warm-ink) !important;
  border-color: var(--warm-ink) !important;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { background-color: #E1E2CD; padding: 4rem 0; font-family: var(--sans); }
.site-footer .footer-wrap { max-width: 1140px; margin: 0 auto; padding: 0 12px; }
.footer-cols { display: grid; grid-template-columns: 1.2fr 0.8fr 1.5fr; gap: 3rem; }
.footer-label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm-olive); margin-bottom: 1rem; }
.footer-name { font-family: var(--serif); font-size: 1.6rem; color: var(--warm-ink); margin-bottom: 0.5rem; }
html body .footer-blurb { font-size: 1rem !important; line-height: 1.6; color: var(--warm-muted) !important; margin: 0; max-width: 30ch; }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a { font-size: 1rem; color: var(--warm-muted); text-decoration: none; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--warm-ink); }
@media (max-width: 767.98px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site-footer { padding: 3rem 0; }
  .site-footer .footer-wrap { padding: 0 1.5rem; }
}

/* sub nav active underline */
html body #subNav .nav-link,
html body #subNav .nav-link.active { border-bottom-color: transparent !important; }
html body #subNav .nav-link.active { border-bottom-color: var(--warm-terra) !important; }

/* pull-quote style lines */
html body [style*="font-style:italic"],
html body [style*="font-style: italic"] {
  font-family: var(--serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--warm-ink) !important;
  line-height: 1.5 !important;
}

/* stat groups: more air between flat items */
html body .case-study-header [style*="display:flex"],
html body .case-study-header .d-flex.gap-3 { gap: 3rem !important; }

/* ── Sub nav tabs: terracotta underline, darker terracotta hover ── */
html body #subNav .navbar-nav .nav-item .nav-link.active::after { background-color: #B5694A !important; }
html body #subNav .navbar-nav .nav-item .nav-link.active { color: #B5694A !important; }
html body #subNav .navbar-nav .nav-item .nav-link:hover,
html body #subNav .navbar-nav .nav-item .nav-link.active:hover { color: #8F4E34 !important; }
html body #subNav .navbar-nav .nav-item .nav-link:hover::after { background-color: #8F4E34 !important; }

/* title/overview section: same beige on every case study */
html body section.case-study-header,
html body section.page-section.case-study-header {
  background: #EBE6D8 !important;
  background-color: #EBE6D8 !important;
  background-image: none !important;
}

/* full-width content bands: same cream as the page around them */
html body [style*="linear-gradient(135deg, #fbfcfc"],
html body [style*="linear-gradient(135deg,#fbfcfc"] {
  background: #F7F2E9 !important;
  background-image: none !important;
}

/* transparent diagrams: no box or shadow around them */
html body .case-study-content img[src*="VATSMAP"] {
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* round list markers: solid terracotta, centred on the first line of text */
html body li > span[style*="border-radius:50%"],
html body li > span[style*="border-radius: 50%"] {
  width: 8px !important;
  height: 8px !important;
  background: #B5694A !important;
  border: 0 !important;
  margin-top: 0.7rem !important;
}

/* sub nav bar */
html body #subNav,
html body #subNav.navbar { background-color: #FDFAF5 !important; background: #FDFAF5 !important; }

/* class-based list bullets: solid terracotta circles, aligned to the first line */
html body section.case-study-content ul.lead > li { padding-left: 1.5rem !important; }
html body section.case-study-content ul.lead > li::before {
  width: 8px !important;
  height: 8px !important;
  background: var(--warm-terra) !important;
  border: 0 !important;
  border-radius: 50% !important;
  top: 0.72em !important;
}

/* numbered goals (01, 02, ...): terracotta */
html body section.case-study-content ol.filters-design-goals .filters-design-goals-num { color: var(--warm-terra) !important; }
/* carousel indicators (active) */
html body .carousel-indicators .active,
html body .carousel-indicators button.active { background-color: var(--warm-terra) !important; }

/* ── Carousel arrows: flat terracotta arrows, no circle or shadow ── */
html body #pricingWireframesCarousel .carousel-control-prev,
html body #pricingWireframesCarousel .carousel-control-next,
html body #pricingWireframesCarousel .carousel-control-prev:hover,
html body #pricingWireframesCarousel .carousel-control-next:hover,
html body .carousel .carousel-control-prev,
html body .carousel .carousel-control-next {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 56px !important;
  height: 56px !important;
}
html body #pricingWireframesCarousel .carousel-control-prev { left: -64px !important; }
html body #pricingWireframesCarousel .carousel-control-next { right: -64px !important; }
html body .carousel .carousel-control-prev-icon,
html body .carousel .carousel-control-next-icon,
html body #pricingWireframesCarousel .carousel-control-prev-icon,
html body #pricingWireframesCarousel .carousel-control-next-icon,
html body #pricingWireframesCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
html body #pricingWireframesCarousel .carousel-control-next:hover .carousel-control-next-icon {
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--warm-terra);
  transition: color 0.2s ease, transform 0.2s ease;
}
html body .carousel .carousel-control-prev-icon::before { content: "←"; }
html body .carousel .carousel-control-next-icon::before { content: "→"; }
html body .carousel .carousel-control-prev:hover .carousel-control-prev-icon { color: #8F4E34; transform: translateX(-3px); }
html body .carousel .carousel-control-next:hover .carousel-control-next-icon { color: #8F4E34; transform: translateX(3px); }
@media (max-width: 1200px) {
  html body #pricingWireframesCarousel .carousel-control-prev { left: 4px !important; }
  html body #pricingWireframesCarousel .carousel-control-next { right: 4px !important; }
}