/* ==========================================================================
   Mcafan — design system
   Motion, hover and transition states for the Elementor build.
   Elementor Pro's per-widget Custom CSS is not available on this install,
   so these are keyed to element IDs / classes set on the containers.
   Colours reference Elementor Global Colors so Site Settings still drives them.
   ========================================================================== */

:root {
  --mc-ink:       var( --e-global-color-primary,   #292D2B );
  --mc-green:     var( --e-global-color-secondary, #00A859 );
  --mc-grey:      var( --e-global-color-text,      #6B6F6A );
  --mc-lime:      var( --e-global-color-accent,    #9DE016 );
  --mc-paper:     #F5F5F2;
  --mc-paper-2:   #ECECE7;
  --mc-ink-2:     #1F2221;
  --mc-line:      rgba(41,45,43,0.14);
  --mc-line-soft: rgba(41,45,43,0.08);
  --mc-line-dark: rgba(245,245,242,0.16);
  --mc-ease:      cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------------------
   1. BUTTONS — six variants, each with its own hover swap
   -------------------------------------------------------------------------- */
.mc-btn .elementor-button,
.elementor-widget-button.mc-btn a.elementor-button {
  border: 1.5px solid transparent;
  border-radius: 5px;
  padding: 16px 26px;
  line-height: 1;
  transition: background-color .18s var(--mc-ease),
              color .18s var(--mc-ease),
              border-color .18s var(--mc-ease),
              transform .18s var(--mc-ease);
}

.mc-btn--primary  .elementor-button { background-color: var(--mc-lime);  color: var(--mc-ink); }
.mc-btn--primary  .elementor-button:hover,
.mc-btn--primary  .elementor-button:focus-visible { background-color: var(--mc-green); color: #fff; }

.mc-btn--green    .elementor-button { background-color: var(--mc-green); color: #fff; }
.mc-btn--green    .elementor-button:hover { background-color: var(--mc-ink); color: #fff; }

.mc-btn--dark     .elementor-button { background-color: var(--mc-ink);   color: var(--mc-paper); }
.mc-btn--dark     .elementor-button:hover { background-color: var(--mc-green); color: #fff; }

.mc-btn--outline  .elementor-button { background-color: transparent; color: var(--mc-ink); border-color: var(--mc-line); }
.mc-btn--outline  .elementor-button:hover { border-color: var(--mc-ink); }

.mc-dark .mc-btn--outline .elementor-button { color: var(--mc-paper); border-color: var(--mc-line-dark); }
.mc-dark .mc-btn--outline .elementor-button:hover { border-color: var(--mc-paper); }

.mc-btn--on-dark  .elementor-button { background-color: var(--mc-paper); color: var(--mc-ink); }
.mc-btn--on-dark  .elementor-button:hover { background-color: var(--mc-lime); color: var(--mc-ink); }

/* arrow nudge inside any button or arrow link */
.mc-btn .elementor-button-icon,
.mc-arrow-link .elementor-button-icon { transition: transform .18s var(--mc-ease); }
.mc-btn .elementor-button:hover .elementor-button-icon,
.mc-arrow-link a:hover .elementor-button-icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   2. ARROW LINK — underline grows on hover
   -------------------------------------------------------------------------- */
.mc-arrow-link a { position: relative; display: inline-flex; align-items: center; gap: .5em; padding-bottom: 6px; }
.mc-arrow-link a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--mc-green); transition: width .28s var(--mc-ease);
}
.mc-arrow-link a:hover::after { width: calc(100% - 1.4em); }

/* --------------------------------------------------------------------------
   3. CARDS — lift and shadow on hover, top rule turns green
   -------------------------------------------------------------------------- */
.mc-card {
  transition: transform .28s var(--mc-ease),
              box-shadow .28s var(--mc-ease),
              border-color .28s var(--mc-ease);
  will-change: transform;
}
.mc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(41,45,43,0.28);
  border-top-color: var(--mc-green) !important;
}

/* image zoom inside a hovered card */
.mc-card .elementor-widget-image img,
.mc-zoom img { transition: transform .5s var(--mc-ease); will-change: transform; }
.mc-card:hover .elementor-widget-image img,
.mc-zoom:hover img { transform: scale(1.05); }

/* consistent card image cropping, per the brief: height + object-fit */
.mc-crop img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* --------------------------------------------------------------------------
   4. CASE INDEX ROWS — the Work listing
   -------------------------------------------------------------------------- */
.mc-case-row {
  border-bottom: 1px solid var(--mc-line-soft);
  transition: background-color .22s var(--mc-ease), padding-left .22s var(--mc-ease);
}
.mc-case-row:hover { background-color: var(--mc-paper-2); padding-left: 14px; }
.mc-case-row .mc-case-go { transition: transform .22s var(--mc-ease), color .22s var(--mc-ease); }
.mc-case-row:hover .mc-case-go { transform: translateX(6px); color: var(--mc-green); }
.mc-case-row .mc-case-num { color: var(--mc-grey); transition: color .22s var(--mc-ease); }
.mc-case-row:hover .mc-case-num { color: var(--mc-lime); }

/* --------------------------------------------------------------------------
   5. LOGO WALL — continuous scroll, pauses on hover
   -------------------------------------------------------------------------- */
.mc-logo-wall { overflow: hidden; position: relative; }
.mc-logo-wall::before,
.mc-logo-wall::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 96px; z-index: 2; pointer-events: none;
}
.mc-logo-wall::before { left: 0;  background: linear-gradient(to right, var(--mc-paper), transparent); }
.mc-logo-wall::after  { right: 0; background: linear-gradient(to left,  var(--mc-paper), transparent); }
.mc-logo-wall .mc-logo-track { animation: mcLogoScroll 38s linear infinite; }
.mc-logo-wall:hover .mc-logo-track { animation-play-state: paused; }
@keyframes mcLogoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* logos sit grey until hovered, so the wall reads as one texture */
.mc-logo-wall img {
  filter: grayscale(1); opacity: .55;
  transition: filter .28s var(--mc-ease), opacity .28s var(--mc-ease);
  max-height: 46px; width: auto; object-fit: contain;
}
.mc-logo-wall img:hover { filter: grayscale(0); opacity: 1; }

/* --------------------------------------------------------------------------
   6. NAV — underline grows, dropdown fades in
   -------------------------------------------------------------------------- */
/* top-level links only — Xpro nests dropdown items under
   .xpro-elementor-dropdown-menu, which must not get the underline */
.mc-nav a.xpro-elementor-nav-link,
.mc-nav a.dropdown-toggle { position: relative; transition: color .18s var(--mc-ease); }
.mc-nav a.xpro-elementor-nav-link::after,
.mc-nav a.dropdown-toggle::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 0;
  background: var(--mc-green); transition: width .26s var(--mc-ease);
}
.mc-nav a.xpro-elementor-nav-link:hover::after,
.mc-nav a.dropdown-toggle:hover::after,
.mc-nav .current-menu-item > a.xpro-elementor-nav-link::after,
.mc-nav .current-menu-ancestor > a.dropdown-toggle::after,
.mc-nav .current_page_item > a.xpro-elementor-nav-link::after { width: 100%; }

/* Astra injects its own arrow span into the dropdown toggle; hide it so only
   Xpro's caret shows, otherwise the About item renders two carets */
.mc-nav .ast-header-navigation-arrow { display: none !important; }

/* dropdown panel */
.mc-nav .xpro-elementor-dropdown-menu {
  border: 1px solid var(--mc-line-soft);
  border-radius: 6px;
  box-shadow: 0 16px 36px -18px rgba(41,45,43,0.28);
  padding: 8px 0;
  background: #fff;
}
.mc-nav a.xpro-elementor-dropdown-item {
  padding: 9px 18px;
  transition: background-color .16s var(--mc-ease), color .16s var(--mc-ease);
}
.mc-nav a.xpro-elementor-dropdown-item:hover {
  background: var(--mc-paper-2);
  color: var(--mc-green);
}

/* --------------------------------------------------------------------------
   7. FOOTER links
   -------------------------------------------------------------------------- */
.mc-footer a { color: rgba(245,245,242,0.66); transition: color .18s var(--mc-ease); }
.mc-footer a:hover { color: var(--mc-paper); }

/* --------------------------------------------------------------------------
   8. STICKY HEADER — background appears past 24px of scroll
   -------------------------------------------------------------------------- */
.mc-header {
  transition: background-color .25s var(--mc-ease),
              box-shadow .25s var(--mc-ease),
              border-color .25s var(--mc-ease);
}
.mc-header.mc-scrolled {
  background-color: rgba(245,245,242,0.92) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 var(--mc-line-soft);
}

/* --------------------------------------------------------------------------
   9. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.mc-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--mc-ease), transform .6s var(--mc-ease); }
.mc-reveal.mc-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   10. DARK SECTIONS — invert type colours
   -------------------------------------------------------------------------- */
.mc-dark, .mc-dark p, .mc-dark li { color: rgba(245,245,242,0.78); }
.mc-dark h1, .mc-dark h2, .mc-dark h3, .mc-dark h4 { color: var(--mc-paper); }
.mc-dark .mc-eyebrow { color: var(--mc-lime); }
.mc-dark hr, .mc-dark .elementor-divider-separator { border-color: var(--mc-line-dark) !important; }

/* --------------------------------------------------------------------------
   11. EYEBROW + MEASURE
   -------------------------------------------------------------------------- */
.mc-eyebrow { color: var(--mc-green); }
.mc-measure { max-width: 68ch; }

/* --------------------------------------------------------------------------
   12. META PANEL — case study sidebar definition list
   -------------------------------------------------------------------------- */
.mc-meta-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--mc-line-soft); }
.mc-meta-row dt { color: var(--mc-grey); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.mc-meta-row dd { margin: 0; text-align: right; }

/* --------------------------------------------------------------------------
   13. FORM — Contact Form 7 restyled off its defaults
   -------------------------------------------------------------------------- */
.mc-form .wpcf7-form-control-wrap { display: block; }
.mc-form label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: var(--mc-ink); }
.mc-form input[type="text"],
.mc-form input[type="email"],
.mc-form input[type="tel"],
.mc-form select,
.mc-form textarea {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--mc-line);
  border-radius: 5px; background: #fff; color: var(--mc-ink);
  font-family: inherit; font-size: 16px; line-height: 1.5;
  transition: border-color .18s var(--mc-ease), box-shadow .18s var(--mc-ease);
}
.mc-form textarea { min-height: 160px; resize: vertical; }
.mc-form input:focus,
.mc-form select:focus,
.mc-form textarea:focus {
  outline: none; border-color: var(--mc-green);
  box-shadow: 0 0 0 3px rgba(0,168,89,0.14);
}
.mc-form .wpcf7-submit {
  background: var(--mc-lime); color: var(--mc-ink); border: 1.5px solid transparent;
  border-radius: 5px; padding: 16px 30px; font-family: inherit; font-size: 16px;
  font-weight: 500; line-height: 1; cursor: pointer;
  transition: background-color .18s var(--mc-ease), color .18s var(--mc-ease);
}
.mc-form .wpcf7-submit:hover { background: var(--mc-green); color: #fff; }
.mc-form .wpcf7-not-valid-tip { color: #B3261E; font-size: 13px; margin-top: 6px; }
.mc-form .wpcf7-response-output {
  border: none !important; background: var(--mc-paper-2); border-left: 3px solid var(--mc-green) !important;
  padding: 14px 18px !important; margin: 18px 0 0 !important; border-radius: 4px; font-size: 15px;
}

/* --------------------------------------------------------------------------
   14. ACCESSIBILITY
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--mc-green); outline-offset: 3px; border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mc-logo-wall .mc-logo-track { animation: none !important; }
  .mc-card:hover { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mc-logo-wall::before, .mc-logo-wall::after { width: 48px; }
}
@media (max-width: 767px) {
  .mc-meta-row { flex-direction: column; gap: 4px; }
  .mc-meta-row dd { text-align: left; }
  .mc-case-row:hover { padding-left: 0; }
}

/* ==========================================================================
   16. CONTAINER ID HOOKS
   Elementor containers silently drop the CSS Classes field, so container-level
   styling is keyed to element IDs instead. Prefix selectors mean any new
   container named mcDark*, mcCard*, mcReveal* etc. inherits the behaviour
   without another stylesheet edit.
   ========================================================================== */

/* --- sticky header --- */
#mcHeader {
  transition: background-color .25s var(--mc-ease),
              box-shadow .25s var(--mc-ease),
              border-color .25s var(--mc-ease);
}
#mcHeader.mc-scrolled {
  background-color: rgba(245,245,242,0.92) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 var(--mc-line-soft);
}

/* --- dark sections --- */
[id^="mcDark"],
[id^="mcDark"] p,
[id^="mcDark"] li,
#mcFooter, #mcFooter p, #mcFooter li {
  color: rgba(245,245,242,0.78);
}
[id^="mcDark"] h1, [id^="mcDark"] h2, [id^="mcDark"] h3, [id^="mcDark"] h4,
#mcFooter h1, #mcFooter h2, #mcFooter h3, #mcFooter h4 {
  color: var(--mc-paper);
}
[id^="mcDark"] .mc-eyebrow { color: var(--mc-lime); }
[id^="mcDark"] .elementor-divider-separator,
#mcFooter .elementor-divider-separator { border-top-color: var(--mc-line-dark) !important; }

#mcFooter a { color: rgba(245,245,242,0.66); transition: color .18s var(--mc-ease); }
#mcFooter a:hover { color: var(--mc-paper); }

/* --- tinted sections --- */
[id^="mcTint"] { background-color: var(--mc-paper-2); }

/* --- card containers --- */
[id^="mcCard"] {
  transition: transform .28s var(--mc-ease),
              box-shadow .28s var(--mc-ease),
              border-color .28s var(--mc-ease);
  will-change: transform;
}
[id^="mcCard"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(41,45,43,0.28);
  border-top-color: var(--mc-green) !important;
}
[id^="mcCard"] .elementor-widget-image img { transition: transform .5s var(--mc-ease); }
[id^="mcCard"]:hover .elementor-widget-image img { transform: scale(1.05); }

/* --- scroll reveal on containers --- */
[id^="mcReveal"] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--mc-ease), transform .6s var(--mc-ease);
}
[id^="mcReveal"].mc-in { opacity: 1; transform: none; }

/* --- measure --- */
[id^="mcMeasure"] { max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
  [id^="mcReveal"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [id^="mcCard"]:hover { transform: none; }
}
/* ==========================================================================
   17. LOGO MARQUEE
   Built on the native xpro-logo-grid widget. Its markup is a flat wrapper of
   .xpro-logo-grid-item children, so the wrapper becomes the marquee track.
   The repeater holds each logo twice; translating -50% loops seamlessly.
   ========================================================================== */
#mcLogoWall { overflow: hidden; position: relative; }
#mcLogoWall::before,
#mcLogoWall::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 3; pointer-events: none;
}
#mcLogoWall::before { left: 0;  background: linear-gradient(to right, var(--mc-paper-2), rgba(236,236,231,0)); }
#mcLogoWall::after  { right: 0; background: linear-gradient(to left,  var(--mc-paper-2), rgba(236,236,231,0)); }

#mcLogoWall .xpro-logo-grid-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  grid-template-columns: none !important;
  align-items: center;
  animation: mcLogoScroll 42s linear infinite;
}
#mcLogoWall:hover .xpro-logo-grid-wrapper { animation-play-state: paused; }

#mcLogoWall .xpro-logo-grid-item {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 42px;
  border: none !important;
  background: transparent !important;
}
#mcLogoWall .xpro-logo-grid-figure { margin: 0; }
#mcLogoWall .xpro-logo-grid-img {
  max-height: 44px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .5;
  transition: filter .28s var(--mc-ease), opacity .28s var(--mc-ease);
}
#mcLogoWall .xpro-logo-grid-item:hover .xpro-logo-grid-img { filter: grayscale(0); opacity: 1; }

@keyframes mcLogoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 767px) {
  #mcLogoWall::before, #mcLogoWall::after { width: 56px; }
  #mcLogoWall .xpro-logo-grid-item { padding: 0 26px; }
  #mcLogoWall .xpro-logo-grid-img { max-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  #mcLogoWall .xpro-logo-grid-wrapper { animation: none !important; flex-wrap: wrap !important; justify-content: center; width: 100% !important; }
}
/* ==========================================================================
   18. INDEX LISTINGS
   Work and Wurd are generated by the native xpro-post-grid widget. These rules
   restyle its default card markup into the two layouts the design calls for.
   ========================================================================== */

/* ---------- WORK INDEX: minimal numbered rows ---------- */
/* Xpro's post-grid runs a JS masonry engine (cbp) that absolutely
   positions each .cbp-item using pixel math computed on load. That fights
   any CSS-only restyle into a plain list, causing stale gaps and default
   card borders to show through on later items. Force the engine back to
   normal block flow so our row styling below is the only layout math. */
#mcCaseIndex .xpro-post-grid-main,
#mcCaseIndex .cbp,
#mcCaseIndex .cbp-wrapper-outer,
#mcCaseIndex .cbp-wrapper {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  display: block !important;
  overflow: visible !important;
  transform: none !important;
}
#mcCaseIndex .xpro-post-grid-item,
#mcCaseIndex .cbp-item,
#mcCaseIndex .cbp-item-wrapper {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  float: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#mcCaseIndex .cbp-item-wrapper { display: block !important; height: auto !important; }

/* Strip every inner box the widget draws (content wrapper, inner divs, links,
   meta list) so only our row's bottom hairline remains. */
#mcCaseIndex .xpro-post-grid-item *,
#mcCaseIndex .xpro-post-grid-content,
#mcCaseIndex .xpro-post-grid-inner {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#mcCaseIndex .xpro-post-grid-wrapper,
#mcCaseIndex .cbp-wrapper { counter-reset: mccase; }

#mcCaseIndex .xpro-post-grid-item {
  counter-increment: mccase;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100% !important;
  padding: 30px 4px;
  border: 0 !important;
  border-bottom: 1px solid var(--mc-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: background-color .3s var(--mc-ease), padding-left .3s var(--mc-ease);
}
#mcCaseIndex .xpro-post-grid-item:first-child { border-top: 1px solid var(--mc-line-soft) !important; }
#mcCaseIndex .xpro-post-grid-item:hover { background-color: var(--mc-paper-2); padding-left: 24px; }

/* left accent bar: hidden until the row is hovered */
#mcCaseIndex .xpro-post-grid-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--mc-green);
  opacity: 0 !important;
  transform: scaleY(0) !important; transform-origin: top;
  transition: transform .3s var(--mc-ease), opacity .3s var(--mc-ease);
}
#mcCaseIndex .xpro-post-grid-item:hover::before { opacity: 1 !important; transform: scaleY(1) !important; }

/* Xpro wraps everything in .xpro-post-grid-content and emits the category
   BEFORE the title. Re-order with flex so the client name leads and the
   discipline label sits beneath it, and strip the widget's inner box. */
#mcCaseIndex .xpro-post-grid-content {
  display: flex; flex-direction: column; gap: 9px;
  padding: 0 20px 0 0; flex: 1 1 auto; min-width: 0;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}
#mcCaseIndex .xpro-post-grid-content > a { order: 1; text-decoration: none; border: 0 !important; }
#mcCaseIndex .xpro-post-grid-meta-list { order: 2; margin: 0; padding: 0; list-style: none; border: 0 !important; }

/* Explicit numerals per row: CSS counters were rendering as missing glyphs
   in the variable display font, so the numbers are set literally. */
#mcCaseIndex .xpro-post-grid-content::before {
  content: "";
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: 30px; line-height: 1; letter-spacing: -0.01em;
  color: var(--mc-grey);
  transition: color .3s var(--mc-ease);
}
#mcCaseIndex .xpro-post-grid-item:nth-child(1) .xpro-post-grid-content::before { content: "01"; }
#mcCaseIndex .xpro-post-grid-item:nth-child(2) .xpro-post-grid-content::before { content: "02"; }
#mcCaseIndex .xpro-post-grid-item:nth-child(3) .xpro-post-grid-content::before { content: "03"; }
#mcCaseIndex .xpro-post-grid-item:nth-child(4) .xpro-post-grid-content::before { content: "04"; }
#mcCaseIndex .xpro-post-grid-item:nth-child(5) .xpro-post-grid-content::before { content: "05"; }
#mcCaseIndex .xpro-post-grid-item:nth-child(6) .xpro-post-grid-content::before { content: "06"; }
#mcCaseIndex .xpro-post-grid-item:nth-child(7) .xpro-post-grid-content::before { content: "07"; }
#mcCaseIndex .xpro-post-grid-item:nth-child(8) .xpro-post-grid-content::before { content: "08"; }
#mcCaseIndex .xpro-post-grid-item:nth-child(9) .xpro-post-grid-content::before { content: "09"; }
#mcCaseIndex .xpro-post-grid-item:nth-child(10) .xpro-post-grid-content::before { content: "10"; }
#mcCaseIndex .xpro-post-grid-item { padding-left: 92px; }
#mcCaseIndex .xpro-post-grid-item:hover { padding-left: 112px; }
#mcCaseIndex .xpro-post-grid-item:hover .xpro-post-grid-content::before { color: var(--mc-green); }

#mcCaseIndex .xpro-post-grid-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mc-ink); margin: 0;
  transition: color .3s var(--mc-ease);
}
#mcCaseIndex .xpro-post-grid-item:hover .xpro-post-grid-title { color: var(--mc-ink); }
#mcCaseIndex .xpro-post-grid-meta-list li,
#mcCaseIndex .xpro-post-grid-meta-list a {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mc-green); text-decoration: none;
}
#mcCaseIndex .xpro-post-grid-meta-list i,
#mcCaseIndex .xpro-post-grid-meta-list svg { display: none; }
#mcCaseIndex .xpro-post-grid-btn { display: none; }

/* circular arrow button, fills green on hover */
#mcCaseIndex .xpro-post-grid-item::after {
  content: "\2192";
  flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--mc-line); border-radius: 50%;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 17px; line-height: 1;
  color: var(--mc-ink);
  transition: background-color .3s var(--mc-ease), border-color .3s var(--mc-ease), color .3s var(--mc-ease), transform .3s var(--mc-ease);
}
#mcCaseIndex .xpro-post-grid-item:hover::after {
  background: var(--mc-green); border-color: var(--mc-green); color: #fff; transform: translateX(2px);
}

@media (max-width: 767px) {
  #mcCaseIndex .xpro-post-grid-item { padding: 26px 4px 26px 56px; }
  #mcCaseIndex .xpro-post-grid-item:hover { padding-left: 56px; }
  #mcCaseIndex .xpro-post-grid-content::before { font-size: 23px; }
  #mcCaseIndex .xpro-post-grid-title { font-size: 20px; }
  #mcCaseIndex .xpro-post-grid-item::after { display: none; }
}

/* ---------- WURD INDEX: article cards ---------- */
#mcWurdGrid .xpro-post-grid-item {
  display: flex; flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--mc-line-soft) !important;
  border-top: 2px solid var(--mc-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  transition: transform .28s var(--mc-ease), box-shadow .28s var(--mc-ease), border-top-color .28s var(--mc-ease);
}
#mcWurdGrid .xpro-post-grid-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(41,45,43,0.28);
  border-top-color: var(--mc-green) !important;
}
#mcWurdGrid .xpro-post-grid-content { padding: 0; display: flex; flex-direction: column; height: 100%; }
#mcWurdGrid .xpro-post-grid-meta-list { margin: 0 0 14px; padding: 0; list-style: none; order: -1; }
#mcWurdGrid .xpro-post-grid-meta-list li,
#mcWurdGrid .xpro-post-grid-meta-list a {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 500; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mc-green); text-decoration: none;
}
#mcWurdGrid .xpro-post-grid-meta-list i,
#mcWurdGrid .xpro-post-grid-meta-list svg { display: none; }
#mcWurdGrid .xpro-post-grid-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; font-weight: 400; line-height: 1.22;
  color: var(--mc-ink); margin: 0 0 12px;
  transition: color .22s var(--mc-ease);
}
#mcWurdGrid .xpro-post-grid-item:hover .xpro-post-grid-title { color: var(--mc-green); }
#mcWurdGrid .xpro-post-grid-excerpt {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15.5px; line-height: 1.6; color: var(--mc-grey); margin: 0 0 18px;
}
#mcWurdGrid .xpro-post-grid-btn {
  margin-top: auto; align-self: flex-start;
  background: transparent !important; color: var(--mc-ink) !important;
  padding: 0 !important; border: 0 !important;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; font-weight: 500;
  position: relative; padding-bottom: 5px !important;
}
#mcWurdGrid .xpro-post-grid-btn::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--mc-green); transition: width .28s var(--mc-ease);
}
#mcWurdGrid .xpro-post-grid-item:hover .xpro-post-grid-btn::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  #mcWurdGrid .xpro-post-grid-item:hover { transform: none; }
}
/* ==========================================================================
   19. CONTACT FORM (Contact Form 7)
   CF7 ships almost unstyled and what it does ship does not match the brand.
   Two-column name row, brand focus ring, brand submit button.
   ========================================================================== */
#mcContactForm .mc-form-grid {
  display: flex; flex-wrap: wrap;
  margin: 0 -10px;
}
#mcContactForm .mc-form-grid > p { margin: 0 0 20px; padding: 0 10px; }
#mcContactForm .mc-f-half { flex: 0 0 50%; max-width: 50%; }
#mcContactForm .mc-f-full { flex: 0 0 100%; max-width: 100%; }

#mcContactForm label {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--mc-ink); margin-bottom: 8px;
}
#mcContactForm .wpcf7-form-control-wrap { display: block; }

#mcContactForm input.mc-input,
#mcContactForm select.mc-input,
#mcContactForm textarea.mc-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--mc-line);
  border-radius: 5px;
  background: #fff;
  color: var(--mc-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
  transition: border-color .18s var(--mc-ease), box-shadow .18s var(--mc-ease);
  -webkit-appearance: none; appearance: none;
}
#mcContactForm select.mc-input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B6F6A' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 42px;
}
#mcContactForm textarea.mc-input { min-height: 170px; resize: vertical; }

#mcContactForm input.mc-input:focus,
#mcContactForm select.mc-input:focus,
#mcContactForm textarea.mc-input:focus {
  outline: none;
  border-color: var(--mc-green);
  box-shadow: 0 0 0 3px rgba(0,168,89,0.14);
}

#mcContactForm .mc-submit {
  background: var(--mc-lime);
  color: var(--mc-ink);
  border: 1.5px solid transparent;
  border-radius: 5px;
  padding: 16px 30px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px; font-weight: 500; line-height: 1;
  cursor: pointer;
  transition: background-color .18s var(--mc-ease), color .18s var(--mc-ease);
}
#mcContactForm .mc-submit:hover { background: var(--mc-green); color: #fff; }

#mcContactForm .wpcf7-not-valid-tip {
  color: #B3261E; font-size: 13px; margin-top: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
}
#mcContactForm .wpcf7-not-valid { border-color: #B3261E !important; }
#mcContactForm .wpcf7-response-output {
  border: 0 !important;
  border-left: 3px solid var(--mc-green) !important;
  background: var(--mc-paper-2);
  padding: 15px 18px !important;
  margin: 22px 10px 0 !important;
  border-radius: 4px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px; color: var(--mc-ink);
}
#mcContactForm .wpcf7-form.invalid .wpcf7-response-output,
#mcContactForm .wpcf7-form.failed .wpcf7-response-output { border-left-color: #B3261E !important; }
#mcContactForm .wpcf7-spinner { margin: 0 0 0 12px; }

/* contact detail blocks in the sidebar */
.mc-detail-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--mc-grey);
}

@media (max-width: 600px) {
  #mcContactForm .mc-f-half { flex: 0 0 100%; max-width: 100%; }
}
/* ==========================================================================
   20. SINGLE TEMPLATES (case study + Wurd article)
   ========================================================================== */

/* ---- metadata panel ---- */
.mc-meta-panel { margin: 0; }
.mc-meta-panel .mc-meta-row:first-child { border-top: 1px solid var(--mc-line-soft); }

/* ---- case study body, rendered from post content ---- */
#mcCaseBody h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: 32px; line-height: 1.12;
  letter-spacing: -0.4px; color: var(--mc-ink);
  margin: 56px 0 18px;
}
#mcCaseBody > h2:first-child { margin-top: 0; }
#mcCaseBody p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px; line-height: 1.68; color: var(--mc-ink); margin: 0 0 16px;
}
#mcCaseBody ul { margin: 0; padding: 0; list-style: none; }
#mcCaseBody li {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.5; color: var(--mc-ink);
  padding: 9px 0 9px 26px; position: relative;
  border-bottom: 1px solid var(--mc-line-soft);
}
#mcCaseBody li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mc-green);
}

/* ---- pull quote ---- */
.mc-quote {
  margin: 56px 0 0; padding: 34px 0 0;
  border-top: 2px solid var(--mc-line);
  position: relative;
}
.mc-quote blockquote {
  margin: 0; padding: 0; border: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px; line-height: 1.4; letter-spacing: -0.2px;
  color: var(--mc-ink);
}
.mc-quote figcaption {
  margin-top: 18px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mc-grey);
}

/* ---- project gallery (hidden until populated) ---- */
.mc-gallery { margin-top: 56px; }
.mc-gallery .mc-eyebrow {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--mc-grey); margin: 0 0 18px;
}
.mc-gallery-grid { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.mc-gallery-grid figure {
  flex: 0 0 33.333%; max-width: 33.333%;
  margin: 0 0 16px; padding: 0 8px;
  overflow: hidden;
}
.mc-gallery-img {
  width: 100%; height: 220px; object-fit: cover;
  border-radius: 6px; display: block;
}
@media (max-width: 767px) {
  .mc-gallery-grid figure { flex: 0 0 100%; max-width: 100%; }
}

/* ---- prev / next nav ---- */
.mc-cs-nav {
  display: flex; justify-content: space-between; align-items: stretch;
  flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--mc-line-soft);
  padding-top: 26px;
}
.mc-cs-nav-item {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; max-width: 46%;
  transition: transform .22s var(--mc-ease);
}
.mc-cs-nav-right { text-align: right; align-items: flex-end; }
.mc-cs-nav-item:hover { transform: translateX(-3px); }
.mc-cs-nav-right:hover { transform: translateX(3px); }
.mc-cs-nav-k {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 500; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mc-grey);
  transition: color .22s var(--mc-ease);
}
.mc-cs-nav-item:hover .mc-cs-nav-k { color: var(--mc-green); }
.mc-cs-nav-t {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--mc-ink);
}
@media (max-width: 600px) {
  .mc-cs-nav-item { max-width: 100%; flex: 0 0 100%; }
  .mc-cs-nav-right { text-align: left; align-items: flex-start; margin-top: 22px; }
}

/* ---- case study hero logo ---- */
#mcCaseLogo img { max-height: 56px; width: auto; object-fit: contain; }

/* ---- Wurd article ---- */
.mc-wurd-meta {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px; color: var(--mc-grey);
}
.mc-wurd-meta .mc-dot { margin: 0 10px; color: var(--mc-line); }

#mcWurdBody h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: 30px; line-height: 1.15;
  letter-spacing: -0.3px; color: var(--mc-ink);
  margin: 48px 0 16px;
}
#mcWurdBody p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 18px; line-height: 1.72; color: var(--mc-ink); margin: 0 0 20px;
}
#mcWurdBody blockquote {
  margin: 34px 0; padding: 24px 0 24px 26px;
  border: 0; border-left: 3px solid var(--mc-lime);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; line-height: 1.42; color: var(--mc-ink);
  background: transparent;
}
#mcWurdBody ul { margin: 0 0 20px; padding-left: 20px; }
#mcWurdBody li {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px; line-height: 1.65; color: var(--mc-ink); margin-bottom: 8px;
}
/* consent checkbox */
#mcContactForm .mc-consent { margin-bottom: 22px !important; }
#mcContactForm .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
#mcContactForm .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14.5px; color: var(--mc-grey); cursor: pointer; margin: 0; }
#mcContactForm .wpcf7-acceptance input[type=checkbox] { width: 17px; height: 17px; margin: 2px 0 0; accent-color: #00A859; flex: 0 0 auto; }

/* ==========================================================================
   21. CASE STUDY HERO BAND
   ========================================================================== */
.mc-hero-band { margin: 0; overflow: hidden; border-radius: 8px; line-height: 0; }
.mc-hero-band .mc-hero-img { width: 100%; height: 440px; object-fit: cover; object-position: center; display: block; transition: transform .6s var(--mc-ease); }
.mc-hero-band:hover .mc-hero-img { transform: scale(1.03); }
@media (max-width: 1024px) { .mc-hero-band .mc-hero-img { height: 340px; } }
@media (max-width: 767px)  { .mc-hero-band .mc-hero-img { height: 230px; border-radius: 6px; } }
@media (prefers-reduced-motion: reduce) { .mc-hero-band:hover .mc-hero-img { transform: none; } }