/* Brand overrides — applied AFTER each page's master-*.css so the brand
 * color (currently #0171fc, defined as --theme in master-marketing-agency.css)
 * has consistent white text + white icons wherever it appears as a bg. */

/* ---- Header navbar: blue pill + matching circle arrows ---- */
.header-area {
  --theme: #0171fc;
}

/* Uniform header behavior across all pages. master-marketing-agency.css
 * (used by the home page) leaves the header in normal flow with a bottom
 * border, AND widens .header-area .container to 1850px — both make the
 * home navbar look wider/looser than the rest of the site. Every other
 * page's master CSS pins the header absolutely with no divider and uses
 * the default Bootstrap container width. Force that variant everywhere. */
.header-area {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: 100%;
  z-index: 99;
}
.header-area .header-area__inner {
  border-bottom: 0 !important;
}
/* Clamp the header container back to Bootstrap's default xxl max-width so
 * the home navbar matches the (more compact) indent used by every other
 * page, instead of marketing-agency.css's 1850px stretch. */
@media (min-width: 1400px) {
  .header-area .container {
    max-width: 1320px !important;
  }
}

/* Active nav-link colour — brand blue on the currently-active route. */
.header-area .main-menu li.active > a,
.header-area .main-menu a.active {
  color: var(--theme) !important;
}

/* Service-details FAQ: stretch the accordion to full container width now
 * that the left-hand thumb image has been removed from the markup. The
 * master CSS pins .section-content to a two-column grid (550px 550px,
 * narrower at smaller breakpoints) which would leave the accordion stuck
 * in the right column. */
.faq-area .section-content {
  grid-template-columns: minmax(0, 1fr) !important;
}
.faq-area .section-title {
  max-width: none !important;
}

/* Brand-blue accent for the "Code and Thrive" wordmark inside body copy. */
.brand-accent {
  color: #0171fc !important;
}

/* /services exclusive-services cards were originally <div>s; they are now
 * <a>s linking to each service detail page. Reset default anchor styling
 * so the card layout, list bullets, and typography stay identical. */
a.service-item {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
a.service-item:hover {
  color: inherit;
  text-decoration: none;
}
a.service-item:hover .service-cta {
  gap: 14px;
  color: #0171fc;
}

/* "Learn more →" CTA pinned at the bottom of every service card. */
.service-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border, rgba(18, 18, 18, 0.08));
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--primary, #121212);
  transition: gap 0.25s ease, color 0.2s ease;
}
.service-cta .label {
  position: relative;
}
.service-cta i {
  font-size: 13px;
  transition: transform 0.25s ease;
}
a.service-item:hover .service-cta i {
  transform: translateX(2px);
}

/* Service-detail contact CTA: extend the dark background edge-to-edge
 * instead of being capped by the Bootstrap .container. The inner section
 * already centers its title via max-width, so widening the wrapper keeps
 * the headline centered while the bg goes full-bleed. */
.contact-area > .container {
  max-width: none !important;
  padding-inline: 0 !important;
}


/* Logo sizing — the .svg is responsive so we pin a height that reads well
 * in the navbar (and the sticky header below). Width auto preserves the
 * SVG's intrinsic aspect ratio. */
.header-area .header__logo img {
  height: 60px;
  width: auto;
  display: block;
}
.header-area.sticky .header__logo img {
  height: 50px;
}
@media (max-width: 767px) {
  .header-area .header__logo img,
  .header-area.sticky .header__logo img {
    height: 60px;
  }
}

.header-area .wc-btn-primary {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  background-color: var(--theme);
  border: 1px solid transparent;
  color: #ffffff;
  padding: 0 22px;
  height: 48px;
  line-height: 1;
  border-radius: 40px;
  white-space: nowrap;
}

.header-area .wc-btn-primary:hover {
  background-color: var(--theme);
  color: #ffffff;
  border-color: transparent;
}

.header-area .wc-btn-circle {
  background-color: var(--theme);
  color: #ffffff;
  width: 40px;
  height: 40px;
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: 50%;
}

.header-area .wc-btn-circle:hover {
  background-color: var(--theme);
  color: #ffffff;
}

.header-area .wc-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---- White text/icons ONLY where the button bg is actually blue.
 *      The base .wc-btn-primary in master CSS sets a white default bg for
 *      service-card buttons, so a global rule would make them invisible.
 *      We target just the contexts where --theme (blue) is the painted bg. */

/* Hero CTA + footer CTA + work area "View more" + blog "View more" — these
 * sit on the page bg and use the base .wc-btn-primary which is blue. */
.hero-area .btn-wrapper .wc-btn-primary,
.hero-area .btn-wrapper .wc-btn-circle,
.work-area .btn-wrapper .wc-btn-primary,
.work-area .btn-wrapper .wc-btn-circle,
.blog-area .btn-wrapper .wc-btn-primary,
.blog-area .btn-wrapper .wc-btn-circle,
.footer-area .wc-btn-primary,
.footer-area .wc-btn-circle {
  color: #ffffff;
}
.hero-area .btn-wrapper .wc-btn-primary i,
.hero-area .btn-wrapper .wc-btn-circle i,
.work-area .btn-wrapper .wc-btn-primary i,
.work-area .btn-wrapper .wc-btn-circle i,
.blog-area .btn-wrapper .wc-btn-primary i,
.blog-area .btn-wrapper .wc-btn-circle i,
.footer-area .wc-btn-primary i,
.footer-area .wc-btn-circle i {
  color: #ffffff;
}

/* Service / blog cards: buttons are white-bg dark-text by default, then
 * flip to blue --theme bg on parent hover. Only the hover state needs
 * white text. */
.service-box:hover .wc-btn-primary,
.service-box:hover .wc-btn-circle,
.blog:hover .wc-btn-primary,
.blog:hover .wc-btn-circle {
  color: #ffffff;
}
.service-box:hover .wc-btn-primary i,
.service-box:hover .wc-btn-circle i,
.blog:hover .wc-btn-primary i,
.blog:hover .wc-btn-circle i {
  color: #ffffff;
}

/* ---- Features section on the landing (the big blue rectangle with
 *      Scale / Improve / Grow-up). .features-area has background
 *      var(--theme); make every heading, paragraph, and icon white. */
.features-area .feature-box .title,
.features-area .feature-box .title span,
.features-area .feature-box .text,
.features-area .feature-box .content,
.features-area .feature-box .content * {
  color: #ffffff;
}

/* The feature icons are dark line-art images. Invert them to white on
 * the blue background. */
.features-area .feature-box .thumb img {
  filter: brightness(0) invert(1);
}

/* ---- .prose — in-body typography for Portable Text content
 *      (case study body, blog body). Replaces the template's giant
 *      .section-title style with body-friendly spacing. !important
 *      defends against the master CSS's generic .text / h2 / h3 rules
 *      that get matched anywhere in the page. */
.prose { max-width: 78ch; margin: 0 auto; }

.prose h2 {
  font-size: 28px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin: 2.4em 0 0.6em !important;
  letter-spacing: -0.01em !important;
  color: #000 !important;
}
.prose h3 {
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  margin: 1.8em 0 0.5em !important;
  letter-spacing: -0.005em !important;
  color: inherit !important;
}

.prose p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 0 1.2em !important;
  color: inherit !important;
}

.prose ul,
.prose ol {
  margin: 0 0 1.4em !important;
  padding-left: 1.4em !important;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li {
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 0 0.4em !important;
  color: inherit !important;
}

.prose blockquote {
  border-left: 4px solid currentColor;
  padding: 0.2em 0 0.2em 1.2em;
  margin: 1.6em 0 1.6em !important;
  font-style: italic;
  opacity: 0.85;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.prose .prose-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.8em 0 !important;
}

.prose > :first-child { margin-top: 0 !important; }
.prose > :last-child { margin-bottom: 0 !important; }

@media (min-width: 992px) {
  .prose h2 { font-size: 32px !important; }
  .prose h3 { font-size: 24px !important; }
  .prose p, .prose li { font-size: 18px !important; }
}

/* ---- Case-study detail: Problem Statement font size ----
 *      Master-work-details.css inherits the global 60px+ .section-title
 *      and includes responsive bumps. !important is necessary because
 *      the template's responsive @media blocks redeclare .section-title
 *      at the same selector specificity and would otherwise win. */
.body-wrapper .problem-area .section-title,
.problem-area .section-title {
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
@media (min-width: 768px) {
  .body-wrapper .problem-area .section-title,
  .problem-area .section-title {
    font-size: 32px !important;
  }
}
@media (min-width: 1200px) {
  .body-wrapper .problem-area .section-title,
  .problem-area .section-title {
    font-size: 38px !important;
  }
}