/* SECTION brand override — loaded AFTER bootstrap.min.css / style.css /
   responsive.css so these variable redefinitions win the cascade.
   This file intentionally does NOT add layout/component CSS — only
   eDigital's own CSS custom properties are remapped to SECTION's palette
   and font. All layout/spacing/behavior stays exactly as eDigital's own
   style.css/responsive.css define it. */

:root {
  /* SECTION acid */
  --theme-color1: #bcfc0f;
  --theme-color1-rgb: 188, 252, 15;
  --bg-theme-color1: #bcfc0f;

  /* SECTION dark surfaces (consolidates eDigital's several near-black tones).
     Main page/section background set to pure black; hardcoded card-specific
     tones elsewhere in style.css (e.g. #272727, #222) are untouched since
     they don't use these variables. */
  --theme-color2: #000000;
  --theme-color3: #000000;
  --body-bg: #000000;
  --theme-color-black: #000000;
  --theme-color-black-rgb: 0, 0, 0;
  --theme-color-dark: #000000;
  --headings-color: #000000;
  --bg-theme-color2: #000000;
  --bg-theme-color3: #000000;

  /* SECTION light */
  --theme-color-white: #f3f3f3;
  --theme-color-white-rgb: 243, 243, 243;
  --text-color: rgba(243, 243, 243, 0.6);

  /* MOTIVE, via the existing next/font/local setup */
  --body-font-family: var(--font-motive), sans-serif;
  --heading-font-family: var(--font-motive), sans-serif;
}

/* Hero: eDigital's .hero-title/.hero-title-2/.text-1 force
   text-transform: uppercase. The JSX text is already "Section" / "Growth" /
   "Unit" (first-letter caps only) — this override just stops the forced
   uppercase transform so it renders as typed. No other property touched. */
.hero-1 .hero-content .hero-title,
.hero-1 .hero-content .hero-title-2,
.hero-1 .hero-content .hero-title-2 .text-1 {
  text-transform: none;
}

/* Footer's newsletter <form><input/><button/></form> was replaced with a
   single real link (rule 10 — no fake newsletter). These rules reuse the
   EXACT pixel values from eDigital's own .footer-widget-wrapper form
   input/button rules in style.css, just retargeted to the new element. */
.newsletter-cta {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 32.5px;
  background: #222;
  padding: 24px 35px;
  line-height: 1;
  text-decoration: none;
}
.newsletter-cta-text {
  color: rgba(243, 243, 243, 0.7);
}
.newsletter-cta:hover .newsletter-cta-text {
  color: var(--theme-color-white);
}
.newsletter-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--theme-color1);
  color: var(--theme-color-black);
  font-size: 22px;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
}

/* SkillSection's .skill-thumb img (software logos) was replaced with a
   text mark (rule 10 — not appropriate SECTION claims). Retargets the
   exact same eDigital transition/hover-rotate treatment onto the mark. */
.skill-thumb .mark {
  display: inline-block;
  font-family: var(--font-motive), sans-serif;
  font-size: 20px;
  font-weight: 700;
  transition: all 900ms ease;
}
.skill-box:hover .skill-thumb .mark {
  transform: rotateY(360deg);
}
/* the 3 Growth Unit circles (P/D/S) get the acid treatment; the other 6
   capability circles keep eDigital's own .skill-box dark background */
.skill-box.is-unit {
  background-color: var(--theme-color1) !important;
}
.skill-box.is-unit .mark,
.skill-box.is-unit .title {
  color: var(--theme-color-black) !important;
}

/* Multiple.jsx testimonial avatar: the source's single shared stock photo
   was replaced with initials (rule 10 — not a real client). Same 60x60
   circular footprint as eDigital's own .infu .image img. */
.initials-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--theme-color3);
  color: var(--theme-color-white);
  font-family: var(--font-motive), sans-serif;
  font-weight: 600;
  font-size: 16px;
}

/* Home 2 Brand strip (/about): eDigital's own .brand-wrap-2 .brand-img2
   rule (style.css) dims logos via `brightness(200%) saturate(0%)` at
   opacity 0.2 — tuned for a light section background. Against SECTION's
   pure-black background that combination reads as near-invisible. This
   keeps the exact same dim/hover-reveal behavior (still a translucent
   silhouette by default, full original color at 1 opacity on hover) but
   swaps the filter for one that stays visible on black; no image files,
   text, or Swiper geometry are touched. */
.brand-wrap-2 .brand-img2 {
  filter: brightness(0) invert(1);
  opacity: 0.55;
}
/* eDigital's own :hover rule already resets filter to initial (= none) and
   opacity to 1, so the original full-color reveal-on-hover is unaffected. */

/* /contact — Growth Check scope surface. eDigital's ContactInner embeds a
   Dublin Google Map iframe inside <section className="map-section">, in
   an element carrying the original .map.w-100 classes (style.css:
   .map{height:450px}). SECTION has no public address, so the iframe is
   replaced with a restrained, centered content block rendered in that
   exact element/slot (id="growth-check-scope") — same 450px footprint,
   no new page-height/rhythm change, no map/cards/new design system. */
#growth-check-scope {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #000000;
  padding: 0 24px;
}
#growth-check-scope .scope-inner {
  max-width: 760px;
}
#growth-check-scope .scope-eyebrow {
  display: block;
  font-family: var(--font-motive), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--theme-color1);
  margin-bottom: 18px;
}
#growth-check-scope .scope-title {
  font-family: var(--font-motive), sans-serif;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--theme-color-white);
  margin-bottom: 26px;
}
#growth-check-scope .scope-title mark {
  background: none;
  color: var(--theme-color1);
}
#growth-check-scope .scope-areas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-motive), sans-serif;
  font-size: 15px;
  color: rgba(243, 243, 243, 0.7);
}
#growth-check-scope .scope-area .dot {
  display: inline-block;
  color: var(--theme-color1);
  margin-right: 8px;
  font-size: 12px;
}
@media (max-width: 767.98px) {
  #growth-check-scope .scope-title {
    font-size: 24px;
  }
}