/* ==========================================================================
   MarCom Unity — section library

   Every value here reads from the tokens in base.css. There is no hex colour,
   no font name and no magic pixel size below this comment — that is what makes
   a brand change a one-line edit.

   Design notes, so the intent survives the next person:
   · Gold is scarce on purpose. One accent per section, and it is always on the
     thing that matters (the number, the verb, the primary button).
   · Depth comes from hairlines and 6% surface shifts, never from shadows —
     shadows read as grey smudges on near-black.
   · The hexagon motif is lifted from the brand's own Facebook artwork, at very
     low opacity. It makes the page feel like this brand rather than any dark
     agency template.
   · Everything uses logical properties, so RTL mirrors with no overrides.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

.mc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mc-space-xs);
  font-family: var(--mc-font-body);
  font-size: 0.75rem;
  font-weight: var(--mc-weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-text-faint);
  margin-block-end: var(--mc-space-md);
}
[dir="rtl"] .mc-eyebrow { letter-spacing: 0; font-size: 0.8rem; }

.mc-eyebrow__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--mc-accent);
  flex: none;
}
.mc-eyebrow--center { display: flex; justify-content: center; }

.mc-head { max-inline-size: 62ch; margin-block-end: var(--mc-space-lg); }
.mc-head--center { margin-inline: auto; text-align: center; }
.mc-head__t { margin-block-end: var(--mc-space-sm); }
.mc-head__sub { color: var(--mc-text-faint); font-size: var(--mc-step-1); }

/* Buttons ---------------------------------------------------------------- */
.mc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.95em 1.7em;
  border-radius: var(--mc-radius-pill);
  font-family: var(--mc-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.mc-btn--sm { padding: 0.7em 1.25em; font-size: 0.875rem; }

.mc-btn--primary { background: var(--mc-accent); color: var(--mc-on-accent); }
.mc-btn--primary:hover { background: var(--mc-accent-hover); color: var(--mc-on-accent); transform: translateY(-1px); }

.mc-btn--ghost { border-color: var(--mc-line); color: var(--mc-text); }
.mc-btn--ghost:hover { border-color: var(--mc-accent); color: var(--mc-accent); }

.mc-btn__arrow { transition: transform 0.18s ease; }
.mc-btn:hover .mc-btn__arrow { transform: translateX(3px); }
[dir="rtl"] .mc-btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .mc-btn:hover .mc-btn__arrow { transform: scaleX(-1) translateX(3px); }

/* Reveal on scroll -------------------------------------------------------
   Content is visible by DEFAULT. JavaScript hides only the elements that are
   below the fold at load, then reveals them on scroll.

   The obvious way round — hide everything in CSS, reveal with JS — means the
   hero is blank until a deferred script runs. On a slow connection that is a
   black screen, and if the script ever fails it is a black screen for good.
   Content that is already on screen is never touched, so it also never
   animates in under the reader's eyes.                                      */
.mc-reveal { transition: opacity 0.55s ease, transform 0.55s ease; }
.mc-reveal--pending { opacity: 0; transform: translateY(14px); }
.mc-reveal--pending.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mc-reveal, .mc-reveal--pending { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.mc-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              backdrop-filter 0.25s ease;
}
.mc-header.is-stuck,
/* Inner pages have no hero for the header to float over, so it starts solid
   rather than appearing to hang in space above the first heading. */
body:not(.home) .mc-header {
  background: color-mix(in srgb, var(--mc-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end-color: var(--mc-line);
}

.mc-header__inner {
  display: flex;
  align-items: center;
  gap: var(--mc-space-md);
  /* Sized off the logo, not the other way round — see .mc-header__logo. */
  min-block-size: 100px;
}

.mc-header__brand { display: flex; align-items: center; text-decoration: none; flex: none; }
/* The mark is a hexagon with the wordmark inside it, so its effective text size
   is roughly a third of its height — 44px left the words unreadable.

   Back to 64px on 2026-08-13, when the hexagon returned as an outline. The
   letters-only version that sat here in between could afford 56px because all
   56 of them were wordmark; once the hexagon is around it, the same number
   leaves the two words noticeably smaller than they used to be. The header's
   min-height is 76px, so 64 is what fits with the mark still breathing.

   64 was still too small to read (Samy, same day) and it was the header that
   was the constraint, not the mark — so the header grew with it. At 80px the
   two words land at roughly 26px each, which is the size they were as a
   letters-only wordmark before the hexagon went back around them. Getting the
   words back to legible is the whole point of the change; a header 20px taller
   costs one scroll of nothing. */
.mc-header__logo { block-size: 80px; inline-size: auto; display: block; }
.mc-header__wordmark {
  font-family: var(--mc-font-display);
  font-weight: var(--mc-weight-black);
  font-size: 1.1rem;
  color: var(--mc-text);
  letter-spacing: -0.01em;
}

.mc-nav { margin-inline: auto; }
.mc-nav__list { display: flex; gap: var(--mc-space-md); list-style: none; margin: 0; padding: 0; }
.mc-nav__link {
  font-size: 0.925rem;
  font-weight: var(--mc-weight-medium);
  color: var(--mc-text-muted);
  text-decoration: none;
  padding-block: 0.4em;
  position: relative;
  transition: color 0.18s ease;
}
.mc-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background: var(--mc-accent);
  transition: inline-size 0.22s ease;
}
.mc-nav__link:hover { color: var(--mc-text); }
.mc-nav__link:hover::after { inline-size: 100%; }
.mc-nav__link.is-current { color: var(--mc-text); }
.mc-nav__link.is-current::after { inline-size: 100%; }

.mc-header__end { display: flex; align-items: center; gap: var(--mc-space-sm); flex: none; }

/* Language toggle -------------------------------------------------------- */
.mc-lang {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius-pill);
}
.mc-lang li { display: flex; }
.mc-lang a {
  display: block;
  padding: 0.35em 0.85em;
  border-radius: var(--mc-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mc-text-faint);
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.mc-lang a:hover { color: var(--mc-text); }
.mc-lang .current-lang a { background: var(--mc-accent); color: var(--mc-on-accent); }

/* Mobile ----------------------------------------------------------------- */
.mc-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 42px;
  block-size: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--mc-line);
  border-radius: 10px;
  cursor: pointer;
}
.mc-burger span {
  display: block;
  inline-size: 18px;
  block-size: 1.5px;
  margin-inline: auto;
  background: var(--mc-text);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.mc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mc-mobile {
  border-block-start: 1px solid var(--mc-line);
  background: var(--mc-surface);
  padding: var(--mc-space-md);
}
.mc-mobile__list { list-style: none; margin: 0 0 var(--mc-space-md); padding: 0; }
.mc-mobile__list a {
  display: block;
  padding: 0.85em 0;
  font-size: 1.05rem;
  font-weight: var(--mc-weight-medium);
  color: var(--mc-text);
  text-decoration: none;
  border-block-end: 1px solid var(--mc-line);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.mc-hero {
  position: relative;
  padding-block: clamp(4rem, 11vh, 8rem) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}

/* The brand's own nested-hexagon motif, echoed faintly behind the headline.
   Drawn as real SVG outlines: clip-path on a bordered box clips the border
   too, which yields a hexagonal edge rather than a hexagonal outline. */
.mc-hero__decor {
  position: absolute;
  z-index: -1;
  inset-block-start: -14%;
  inset-inline-end: -10%;
  inline-size: min(680px, 72vw);
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--mc-accent) 11%, transparent) 0%,
      transparent 64%);
}
.mc-hero__decor svg { inline-size: 100%; block-size: 100%; display: block; }
.mc-hero__decor polygon { fill: none; stroke: var(--mc-accent); stroke-width: 1; }
.mc-hero__decor polygon:nth-child(1) { opacity: 0.16; }
.mc-hero__decor polygon:nth-child(2) { opacity: 0.11; }
.mc-hero__decor polygon:nth-child(3) { opacity: 0.07; }

.mc-hero__title { margin-block-end: var(--mc-space-md); max-inline-size: 18ch; }
.mc-hero__line { display: block; }

.mc-hero__sub {
  font-size: var(--mc-step-1);
  color: var(--mc-text-muted);
  max-inline-size: 56ch;
  margin-block-end: var(--mc-space-lg);
}

.mc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--mc-space-sm); }

/* --------------------------------------------------------------------------
   Stats bar
   -------------------------------------------------------------------------- */

.mc-stats {
  border-block: 1px solid var(--mc-line);
  background: var(--mc-surface);
}
.mc-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.mc-stat {
  padding: var(--mc-space-lg) var(--mc-space-sm);
  text-align: center;
  border-inline-start: 1px solid var(--mc-line);
}
.mc-stat:first-child { border-inline-start: 0; }
.mc-stat__n {
  font-family: var(--mc-font-display);
  font-weight: var(--mc-weight-black);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1;
  color: var(--mc-accent);
  direction: ltr;
  margin: 0;
  white-space: nowrap;
}
/* A currency code is a unit, not part of the number. Setting it at the same
   size made "EGP 2M+" wrap to two lines and broke the row's rhythm. */
.mc-stat__cur {
  font-size: 0.45em;
  font-weight: var(--mc-weight-bold);
  letter-spacing: 0.06em;
  vertical-align: 0.55em;
  margin-inline-end: 0.18em;
  opacity: 0.75;
}
.mc-stat__l {
  margin-block-start: 0.6em;
  margin-block-end: 0;
  font-size: 0.85rem;
  color: var(--mc-text-faint);
  max-inline-size: none;
}

/* "See all …" link under a truncated section ----------------------------- */
.mc-more { margin-block-start: var(--mc-space-lg); margin-block-end: 0; max-inline-size: none; }
.mc-more__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mc-accent);
  text-decoration: none;
  border-block-end: 1px solid color-mix(in srgb, var(--mc-accent) 35%, transparent);
  padding-block-end: 0.25em;
  transition: border-color 0.18s ease, gap 0.18s ease;
}
.mc-more__link:hover { border-block-end-color: var(--mc-accent); gap: 0.85em; }
[dir="rtl"] .mc-more__arrow { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */

.mc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--mc-space-md);
}
.mc-card {
  background: var(--mc-card);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius);
  padding: var(--mc-space-lg) var(--mc-space-md) var(--mc-space-md);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.mc-card:hover { border-color: color-mix(in srgb, var(--mc-accent) 45%, transparent); transform: translateY(-3px); }

/* Egypt-only badge. Driven by the service's scope field, so the client picks
   it from a dropdown instead of typing it into the description. */
.mc-card__badge {
  display: inline-block;
  margin-block-end: var(--mc-space-sm);
  padding: 0.3em 0.75em;
  border: 1px solid color-mix(in srgb, var(--mc-accent) 40%, transparent);
  border-radius: var(--mc-radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-accent);
}
[dir="rtl"] .mc-card__badge { letter-spacing: 0; font-size: 0.78rem; }

.mc-card__icon {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--mc-accent) 11%, transparent);
  color: var(--mc-accent);
  margin-block-end: var(--mc-space-md);
}
.mc-card__icon svg { inline-size: 22px; block-size: 22px; }

.mc-card__t { font-size: var(--mc-step-1); margin-block-end: 0.5em; }
/* Was 0.95rem / --mc-text-faint. The readability pass on 2026-08-13 put the
   card description back to full body size and to the brighter of the two greys:
   this is the only sentence on the services page that says what a service is,
   and it was set smaller and dimmer than anything else on the screen. */
.mc-card__d { font-size: 1rem; color: var(--mc-text-muted); max-inline-size: none; margin: 0; }

/* --------------------------------------------------------------------------
   Service cards that open on hover                       (Sally, 2026-08-13)

   HOW THE HEIGHT ANIMATES. A panel cannot transition to `height: auto`, and
   the usual workaround — a max-height guessed to be "big enough" — either
   clips long text or spends the animation running through empty space. A grid
   row going 0fr → 1fr animates to exactly the content's height, whatever it
   turns out to be, and needs no number in the stylesheet at all.

   The child needs `overflow: hidden` or its text spills out of the zero-height
   row while collapsed and prints over the card below it.

   Opens on :hover for a mouse, :focus-within for a keyboard, and .is-open for
   touch, where site.js turns a tap into a toggle. Anything with a fine pointer
   gets it on hover as asked; a phone has no hover to give.
   -------------------------------------------------------------------------- */

.mc-card--expands { cursor: pointer; }

.mc-card__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.mc-card__more > * { overflow: hidden; }

.mc-card--expands:hover .mc-card__more,
.mc-card--expands:focus-within .mc-card__more,
.mc-card--expands.is-open .mc-card__more { grid-template-rows: 1fr; }

.mc-card__detail {
  font-size: 0.95rem;
  color: var(--mc-text-faint);
  max-inline-size: none;
  margin: 0;
  padding-block-start: var(--mc-space-sm);
}

/* The description is clamped so that a card with a long one still has
   something to reveal, and unclamped by the same three states. `line-clamp`
   without its -webkit- twin is ignored by every browser shipping today; both
   are needed, and `display: -webkit-box` is what makes either work. */
.mc-card--expands .mc-card__d {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.mc-card--expands:hover .mc-card__d,
.mc-card--expands:focus-within .mc-card__d,
.mc-card--expands.is-open .mc-card__d {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* The affordance: a small gold chevron, so a card that opens looks different
   from one that does not before anybody touches it. Rotates when open. */
.mc-card__cue {
  display: block;
  inline-size: 9px;
  block-size: 9px;
  margin-block-start: var(--mc-space-sm);
  border-inline-end: 2px solid var(--mc-accent);
  border-block-end: 2px solid var(--mc-accent);
  transform: rotate(45deg);
  transition: transform 0.28s ease, opacity 0.22s ease;
  opacity: 0.55;
}
.mc-card--expands:hover .mc-card__cue,
.mc-card--expands:focus-within .mc-card__cue,
.mc-card--expands.is-open .mc-card__cue {
  transform: rotate(225deg);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mc-card__more, .mc-card__cue { transition: none; }
}

/* --------------------------------------------------------------------------
   Results — the credibility section, so it gets the strongest treatment
   -------------------------------------------------------------------------- */

.mc-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mc-space-md);
}
.mc-result {
  position: relative;
  background: var(--mc-bg);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius);
  padding: var(--mc-space-lg) var(--mc-space-md);
  overflow: hidden;
}
.mc-result::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(to right, var(--mc-accent), transparent);
}
[dir="rtl"] .mc-result::before { background: linear-gradient(to left, var(--mc-accent), transparent); }

.mc-result__tag {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-text-faint);
  margin: 0 0 var(--mc-space-md);
}
[dir="rtl"] .mc-result__tag { letter-spacing: 0; }

.mc-result__n {
  font-family: var(--mc-font-display);
  font-weight: var(--mc-weight-black);
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 0.95;
  color: var(--mc-accent);
  margin: 0;
  direction: ltr;
  text-align: start;
}
.mc-result__roas {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-text-faint);
  margin: 0.5em 0 var(--mc-space-md);
}
[dir="rtl"] .mc-result__roas { letter-spacing: 0; }

.mc-result__d {
  font-size: 0.95rem;
  color: var(--mc-text-muted);
  margin: 0 0 var(--mc-space-md);
  max-inline-size: none;
}

.mc-result__delta {
  display: flex;
  align-items: center;
  gap: var(--mc-space-sm);
  padding-block-start: var(--mc-space-sm);
  border-block-start: 1px solid var(--mc-line);
  font-size: 0.85rem;
  color: var(--mc-text-faint);
  margin: 0;
}
.mc-result__sep { flex: 1; block-size: 1px; background: var(--mc-line); }
.mc-result__days { color: var(--mc-text-muted); }

/* --------------------------------------------------------------------------
   Why us
   -------------------------------------------------------------------------- */

.mc-why {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--mc-space-xl);
  align-items: start;
}
/* No client logos means no panel — the reasons take the whole width instead of
   sitting in a narrow column beside empty space. Capped at a readable measure
   so the lines do not run the width of a desktop. */
.mc-why--nopanel { grid-template-columns: minmax(0, 68ch); }
.mc-why__item {
  display: flex;
  gap: var(--mc-space-md);
  padding-block: var(--mc-space-md);
  border-block-start: 1px solid var(--mc-line);
}
.mc-why__item:first-child { border-block-start: 0; padding-block-start: 0; }

.mc-why__num {
  font-family: var(--mc-font-display);
  font-weight: var(--mc-weight-black);
  font-size: 0.95rem;
  color: var(--mc-accent);
  flex: none;
  padding-block-start: 0.25em;
  direction: ltr;
}
.mc-why__t { font-size: var(--mc-step-1); margin-block-end: 0.4em; }
.mc-why__d { font-size: 0.95rem; color: var(--mc-text-faint); margin: 0; max-inline-size: none; }

.mc-panel {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--mc-accent) 9%, var(--mc-card)),
    var(--mc-card));
  border: 1px solid color-mix(in srgb, var(--mc-accent) 22%, transparent);
  border-radius: var(--mc-radius);
  padding: var(--mc-space-lg) var(--mc-space-md);
  position: sticky;
  inset-block-start: 100px;
}
.mc-panel__n {
  font-family: var(--mc-font-display);
  font-weight: var(--mc-weight-black);
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 0.95;
  color: var(--mc-accent);
  margin: 0;
  direction: ltr;
  text-align: start;
}
.mc-panel__l { font-size: 0.95rem; color: var(--mc-text-muted); margin: 0.6em 0 var(--mc-space-lg); max-inline-size: none; }
.mc-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mc-space-sm);
  padding-block-start: var(--mc-space-md);
  border-block-start: 1px solid var(--mc-line);
}
.mc-panel__sn {
  font-family: var(--mc-font-display);
  font-weight: var(--mc-weight-bold);
  font-size: 1.35rem;
  color: var(--mc-text);
  direction: ltr;
}
.mc-panel__sl { font-size: 0.75rem; color: var(--mc-text-faint); margin-block-start: 0.35em; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */

.mc-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--mc-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.mc-step { position: relative; padding-block-start: var(--mc-space-md); border-block-start: 2px solid var(--mc-line); }
.mc-step::before {
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  inline-size: 34px;
  block-size: 2px;
  background: var(--mc-accent);
}
.mc-step__num {
  display: block;
  font-family: var(--mc-font-display);
  font-weight: var(--mc-weight-black);
  font-size: 0.85rem;
  color: var(--mc-accent);
  margin-block-end: 0.75em;
  direction: ltr;
}
.mc-step__t { font-size: var(--mc-step-1); margin-block-end: 0.5em; }
/* Was 0.925rem / --mc-text-faint — see the note on .mc-card__d. */
.mc-step__d { font-size: 1rem; color: var(--mc-text-muted); margin: 0; max-inline-size: none; }

/* --------------------------------------------------------------------------
   Process steps that open on click                       (Sally, 2026-08-13)

   The box keeps its rule, its number and its name; the explanation moves into
   a panel underneath. Same 0fr → 1fr row as the service cards, driven by a
   real <button> instead of hover, because a click target has to be operable by
   keyboard and announce whether it is open.
   -------------------------------------------------------------------------- */

.mc-step__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-space-sm);
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.mc-step__toggle:hover { color: var(--mc-accent); }

/* THE PINK BAND (client + Samy, 2026-08-17). Nailing the background shut.

   Dragging across this control paints it #CC3366 for a moment. What that colour
   is has resisted every instrument available from outside DevTools: it is a real
   computed background-color, it survives a clean Chrome launched with
   --disable-extensions and a throwaway profile, and it comes from NO readable
   stylesheet, no inline style, no adopted sheet, no Web Animation, no custom
   property, no CSS system colour, and no call to setProperty/insertRule/animate
   (all three were hooked and caught nothing). It also does not reproduce with
   this button's own styles in isolation, and it is intermittent.

   So the origin is not identified — and this is the honest way to say that in
   code. `background: none` in the base rule is evidently being beaten by
   something, so the declaration is repeated across every state that a pointer
   can put this control into, with !important, which no author-level rule can
   outrank. `user-select: none` in base.css already removes the *selection* case;
   this covers whatever the remaining one is.

   If it ever turns out to be one identifiable rule, this block is the thing to
   delete — it exists only because that rule could not be found. */
.mc-step__toggle,
.mc-step__toggle:hover,
.mc-step__toggle:focus,
.mc-step__toggle:focus-visible,
.mc-step__toggle:focus-within,
.mc-step__toggle:active {
  background-color: transparent !important;
  background-image: none !important;
}

.mc-step__chev {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 2px solid var(--mc-accent);
  border-block-end: 2px solid var(--mc-accent);
  transform: rotate(45deg);
  transition: transform 0.26s ease;
}
/* Pointing up while the panel is open. The rotation is written against the
   collapsed state, so it holds whichever way the script starts things off. */
.mc-step__toggle[aria-expanded="true"] .mc-step__chev { transform: rotate(225deg); }

/* The state lives on the <li>, not on the button. The button is inside the
   heading and the panel is the heading's sibling, so no combinator reaches
   from one to the other — an earlier version used `+` here and every panel
   stayed open, silently, because the selector simply never matched. */
.mc-step__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.26s ease;
}
.mc-step__panel-in { overflow: hidden; }
.mc-step.is-closed .mc-step__panel { grid-template-rows: 0fr; }

.mc-step__detail {
  font-size: 0.95rem;
  color: var(--mc-text-faint);
  margin-block-start: 0.75em;
  margin-block-end: 0;
  max-inline-size: none;
}

@media (prefers-reduced-motion: reduce) {
  .mc-step__panel, .mc-step__chev { transition: none; }
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.mc-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mc-space-md);
}
.mc-quote {
  position: relative;
  background: var(--mc-card);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius);
  padding: var(--mc-space-lg) var(--mc-space-md) var(--mc-space-md);
  margin: 0;
  display: flex;
  flex-direction: column;
}
.mc-quote__mark {
  position: absolute;
  inset-block-start: 0.15em;
  inset-inline-end: 0.5em;
  font-family: var(--mc-font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--mc-accent) 20%, transparent);
  pointer-events: none;
}
.mc-quote__q {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--mc-text-muted);
  margin: 0 0 var(--mc-space-md);
  flex: 1;
  border: 0;
  padding: 0;
}
.mc-quote__by { display: flex; align-items: center; gap: 0.75rem; padding-block-start: var(--mc-space-sm); border-block-start: 1px solid var(--mc-line); }
.mc-quote__avatar {
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mc-accent) 15%, transparent);
  color: var(--mc-accent);
  font-family: var(--mc-font-display);
  font-weight: var(--mc-weight-bold);
  font-size: 0.85rem;
  direction: ltr;
}
.mc-quote__n { display: block; font-weight: 600; font-size: 0.95rem; color: var(--mc-text); }
.mc-quote__r { display: block; font-size: 0.8rem; color: var(--mc-text-faint); margin-block-start: 0.15em; }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

/* The closing band follows whatever section came before it, so its own top
   padding stacks on that section's bottom padding. Halving it keeps the gap
   generous instead of cavernous. */
.mc-cta { text-align: center; padding-block-start: var(--mc-space-lg); }
.mc-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--mc-space-md);
  text-align: start;
  margin-block-start: var(--mc-space-md);
}
/* One offer since 2026-08-13. Left to auto-fit it would stretch to the full
   1200px container — a single panel as wide as the page reads as a banner
   rather than as an invitation, and its line length goes well past comfortable.
   Centred and capped instead. */
.mc-cta__grid--one {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
  text-align: center;
}
.mc-cta__grid--one .mc-offer__d { margin-inline: auto; }
.mc-offer {
  background: var(--mc-card);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius);
  padding: var(--mc-space-lg) var(--mc-space-md);
  display: flex;
  flex-direction: column;
  align-items: start;
}
.mc-offer--primary {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--mc-accent) 12%, var(--mc-card)),
    var(--mc-card));
  border-color: color-mix(in srgb, var(--mc-accent) 35%, transparent);
}
.mc-offer__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-accent);
  margin: 0 0 var(--mc-space-sm);
}
[dir="rtl"] .mc-offer__kicker { letter-spacing: 0; font-size: 0.78rem; }
.mc-offer__t { font-size: var(--mc-step-2); margin-block-end: 0.5em; }
.mc-offer__d { font-size: 0.95rem; color: var(--mc-text-faint); margin: 0 0 var(--mc-space-lg); flex: 1; max-inline-size: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.mc-footer { border-block-start: 1px solid var(--mc-line); background: var(--mc-surface); }
.mc-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mc-space-md);
  padding-block: var(--mc-space-lg);
}
.mc-footer__brand img { block-size: 52px; inline-size: auto; display: block; }
.mc-footer__tagline { color: var(--mc-text-faint); font-size: 0.9rem; margin: 0; flex: 1; min-inline-size: 200px; }
.mc-footer__nav { display: flex; flex-wrap: wrap; gap: var(--mc-space-md); }
.mc-footer__nav a { color: var(--mc-text-muted); text-decoration: none; font-size: 0.9rem; }
.mc-footer__nav a:hover { color: var(--mc-accent); }

.mc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-space-sm);
  padding-block: var(--mc-space-md);
  border-block-start: 1px solid var(--mc-line);
}
.mc-footer__bottom p { color: var(--mc-text-faint); font-size: 0.85rem; margin: 0; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .mc-why { grid-template-columns: 1fr; gap: var(--mc-space-lg); }
  .mc-panel { position: static; }
}

@media (max-width: 860px) {
  .mc-nav { display: none; }
  .mc-burger { display: flex; }
  .mc-header__cta { display: none; }
  .mc-nav { margin-inline: 0; }
  .mc-header__end { margin-inline-start: auto; }
  .mc-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .mc-stat:nth-child(3) { border-inline-start: 0; }
  .mc-stat:nth-child(-n+2) { border-block-end: 1px solid var(--mc-line); }
}

@media (max-width: 520px) {
  .mc-header__logo { block-size: 64px; }
  /* The bar comes down with the mark. A 100px header is a fifth of a phone
     screen spent on a logo the visitor has already seen. */
  .mc-header__inner { min-block-size: 84px; }
  .mc-hero__actions .mc-btn { inline-size: 100%; justify-content: center; }
  .mc-footer__bottom { justify-content: center; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Style guide
   A reference page, not a designed one. It borrows every component from the
   real stylesheet and adds only what is needed to lay specimens out in rows —
   any styling of its own would be a second design to keep in step.
   ══════════════════════════════════════════════════════════════════════════ */

.mc-sg__note { color: var(--mc-text-muted); max-inline-size: 60ch; }
.mc-sg__h {
  font-family: var(--mc-font-display);
  font-size: var(--mc-step-2);
  margin-block: var(--mc-space-xl) var(--mc-space-md);
  padding-block-end: var(--mc-space-xs);
  border-block-end: 1px solid var(--mc-line);
}
.mc-sg__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--mc-space-md);
}
.mc-sg__swatch { display: flex; flex-direction: column; gap: 0.25rem; }
.mc-sg__swatch code { font-size: 0.8rem; color: var(--mc-text); }
.mc-sg__swatch small { color: var(--mc-text-faint); }
.mc-sg__chip {
  display: block;
  block-size: 56px;
  border-radius: var(--mc-radius);
  /* Every swatch is outlined, because #0A0A0A on #0A0A0A is an invisible
     square and the darkest tokens are the ones most worth seeing. */
  border: 1px solid var(--mc-line);
}
.mc-sg__table { border-collapse: collapse; inline-size: 100%; max-inline-size: 700px; }
.mc-sg__table th,
.mc-sg__table td {
  text-align: start;
  padding: 0.5rem 0.75rem;
  border-block-end: 1px solid var(--mc-line);
  font-weight: var(--mc-weight-body);
  color: var(--mc-text-muted);
}
.mc-sg__table code { color: var(--mc-text); }
.mc-sg__type > * + * { margin-block-start: var(--mc-space-md); }
.mc-sg__row { display: flex; flex-wrap: wrap; gap: var(--mc-space-md); align-items: center; }
.mc-sg__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  inline-size: 84px;
  color: var(--mc-accent);
}
.mc-sg__icon svg { inline-size: 28px; block-size: 28px; }
.mc-sg__icon small { color: var(--mc-text-faint); font-size: 0.72rem; }

/* ── The service checkboxes ────────────────────────────────────────────────
   More than one service can be picked (Sally, 2026-08-13). Rendered as a
   wrapping set of chips rather than a column of ticks: nine services in a
   vertical list is a page of its own inside a form, while the same nine wrap
   into three or four rows and read as one question.

   The real <input> is transparent and pinned over its own chip — the same
   pattern as .mc-slot input below, and for the same reasons: it keeps its place
   in the tab order and a screen reader still announces the group.

   `.mc-check` MUST be positioned. Without it the absolutely-positioned input
   has no containing block of its own, so `inline-size: 100%` resolves against
   the form instead of against the chip — and the first version of this did
   exactly that: ten checkboxes 1879px wide each, giving the contact page 3034px
   of scrollable width on an 1878px viewport. Nothing looked wrong in a
   screenshot. It was found by measuring scrollWidth against clientWidth, which
   is the only way this class of bug is ever found.

   Note also that `.mc-field input` further down sets `inline-size: 100%` at the
   same specificity as anything here and wins on order alone — which is why the
   size is not fought over but made to resolve correctly instead.
   ───────────────────────────────────────────────────────────────────────── */

.mc-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.35rem;
}
.mc-check { display: inline-flex; position: relative; }
.mc-check input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.mc-check span {
  display: block;
  padding: 0.5em 0.95em;
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius-pill);
  background: var(--mc-card);
  color: var(--mc-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.mc-check span:hover { border-color: var(--mc-text-faint); color: var(--mc-text); }
.mc-check input:checked + span {
  border-color: var(--mc-accent);
  background: color-mix(in srgb, var(--mc-accent) 14%, var(--mc-card));
  color: var(--mc-text);
}
/* The input is invisible, so the focus ring has to be drawn on the thing that
   is visible or keyboard users lose their place entirely. */
.mc-check input:focus-visible + span {
  outline: 2px solid var(--mc-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .mc-check span { transition: none; }
}

/* ── The time roll ─────────────────────────────────────────────────────────
   A strip of times you push sideways, not a dropdown you open and read. The
   difference matters on a form this long: a <select> is a decision with a
   door in front of it, while a row of chips is a decision already on screen.

   Scroll-snap so it comes to rest on a whole chip, and a masked right edge so
   it is visibly a strip that continues rather than one that has ended. The
   inline axis is logical throughout, so the whole thing reverses in Arabic
   with no separate rule.
   ────────────────────────────────────────────────────────────────────────── */

.mc-slots__roll {
  display: flex;
  gap: var(--mc-space-xs);
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  padding-block-end: var(--mc-space-xs);
  scrollbar-width: thin;
  scrollbar-color: var(--mc-line) transparent;
  /* Fade the trailing edge so the strip reads as continuing off-screen. */
  mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
[dir="rtl"] .mc-slots__roll {
  mask-image: linear-gradient(to left, #000 88%, transparent 100%);
}
/* The track is transparent on purpose. Left to the browser it paints a light
   grey rail, which on this background is the brightest thing in the form —
   brighter than the chips it is there to serve. */
.mc-slots__roll::-webkit-scrollbar { block-size: 4px; }
.mc-slots__roll::-webkit-scrollbar-track { background: transparent; }
.mc-slots__roll::-webkit-scrollbar-thumb {
  background: var(--mc-line);
  border-radius: 999px;
}

.mc-slot {
  scroll-snap-align: start;
  flex: 0 0 auto;
  /* Load-bearing. The radio inside is absolutely positioned, and without a
     positioned ancestor it resolves against the page instead of its chip —
     seventeen of them landed off the right edge and gave the whole document a
     horizontal scrollbar. */
  position: relative;
}
.mc-slot input {
  /* Transparent and pinned over its own chip rather than display:none, so it
     keeps its place in the tab order and a screen reader still announces the
     group. */
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.mc-slot span {
  display: block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius-pill);
  background: var(--mc-card);
  color: var(--mc-text-muted);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.mc-slot span:hover { border-color: var(--mc-text-faint); color: var(--mc-text); }
.mc-slot input:checked + span {
  background: var(--mc-accent);
  border-color: var(--mc-accent);
  color: var(--mc-on-accent);
  font-weight: var(--mc-weight-medium);
}
/* Focus has to be drawn on the chip, because the control itself is off-screen
   and would otherwise take the ring with it. */
.mc-slot input:focus-visible + span {
  outline: 2px solid var(--mc-accent);
  outline-offset: 2px;
}
.mc-slots.is-loading .mc-slots__roll { opacity: 0.5; }
.mc-slots__note {
  margin: var(--mc-space-xs) 0 0;
  color: var(--mc-text-faint);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .mc-slot span { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Client logo wall
   Seventeen marks by seventeen designers, which is seventeen sizes, seventeen
   weights, and seventeen opinions about how much air a logo needs. Left alone
   they read as clutter. Three rules pull them into one row:

   1. One height, width auto — never the reverse. Matching widths makes a
      wordmark tower over a monogram.
   2. Monochrome, carried by the asset itself (white PNGs with an alpha
      channel), so no rule here has to know any brand's colours.
   3. Held back at rest, full strength on hover. This wall is evidence, not
      the headline, and it must not out-shout the numbers directly above it.
   ══════════════════════════════════════════════════════════════════════════ */

.mc-clients {
  border-block-end: 1px solid var(--mc-line);
  background: var(--mc-surface);
  padding-block: var(--mc-space-lg);
}
.mc-clients__head { margin-block-end: var(--mc-space-md); }
.mc-clients__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mc-space-md) var(--mc-space-lg);
}
.mc-clients__item { display: flex; align-items: center; }
.mc-clients__logo {
  /* Height is the controlled dimension, but not a shared one — each logo
     carries a multiplier that holds its *area* level with the rest. See
     marcom_logo_scale(). The breakpoint below moves the base; the multipliers
     stay put. */
  block-size: calc(var(--mc-clients-h, 30px) * var(--mc-logo-scale, 1));
  inline-size: auto;
  max-inline-size: 190px;
  object-fit: contain;
  opacity: 0.62;
  transition: opacity 200ms ease;
}
.mc-clients__item:hover .mc-clients__logo,
.mc-clients__item:focus-within .mc-clients__logo { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mc-clients__logo { transition: none; }
}

@media (max-width: 720px) {
  .mc-clients__row { gap: var(--mc-space-sm) var(--mc-space-md); }
  .mc-clients { --mc-clients-h: 22px; }
  .mc-clients__logo { max-inline-size: 130px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Enquiry form
   The only place on the site a visitor types. Everything here is in service
   of one number: how many people who start it finish it.
   ══════════════════════════════════════════════════════════════════════════ */

.mc-form__wrap {
  max-width: 860px;
  margin-inline: auto;
}

.mc-form__panel {
  background: var(--mc-card);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.mc-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mc-space-md);
}

.mc-field--wide { grid-column: 1 / -1; }

.mc-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mc-field label {
  font-size: 0.86rem;
  font-weight: var(--mc-weight-medium);
  color: var(--mc-text-muted);
  letter-spacing: 0.01em;
}

.mc-field label em  { color: var(--mc-accent); font-style: normal; }
.mc-field label small { color: var(--mc-text-faint); font-weight: var(--mc-weight-body); }

/* Help text gets its own line. Inline it collided with the "— optional" note
   and read as one run-on sentence. */
.mc-field__help {
  margin: -0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--mc-text-faint);
}

/* One step down from the site-wide section heading. Everywhere else the
   headline IS the content; here the form is, and at full size the heading ate
   the first screen on a laptop and pushed the fields out of sight. */
.mc-contact .mc-head__t { font-size: var(--mc-step-3); }
.mc-contact .mc-head { margin-bottom: var(--mc-space-lg); }

.mc-field input,
.mc-field select,
.mc-field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  color: var(--mc-text);
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  transition: border-color .16s ease, box-shadow .16s ease;
  /* Safari on iOS renders its own rounded, grey inputs otherwise. */
  -webkit-appearance: none;
  appearance: none;
}

.mc-field textarea { resize: vertical; min-height: 7rem; line-height: var(--mc-leading-body); }

/* The arrow the appearance reset just removed. Inlined as a data URI so the
   form never waits on a second request to look finished. */
.mc-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238A8A8A' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-inline-end: 2.4rem;
}

[dir="rtl"] .mc-field select { background-position: left 1rem center; }

.mc-field input::placeholder,
.mc-field textarea::placeholder { color: #5f5f5f; }

.mc-field input:focus-visible,
.mc-field select:focus-visible,
.mc-field textarea:focus-visible {
  outline: none;
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .16);
}

/* Set by the no-JavaScript path, which knows what was missing only after the
   round trip. The enhanced path uses the same class, so both look identical. */
.mc-field.is-missing input,
.mc-field.is-missing select,
.mc-field.is-missing textarea { border-color: #C0392B; }

.mc-form__foot {
  display: flex;
  align-items: center;
  gap: var(--mc-space-md);
  flex-wrap: wrap;
  margin-top: var(--mc-space-lg);
  padding-top: var(--mc-space-md);
  border-top: 1px solid var(--mc-line);
}

.mc-form__promise {
  margin: 0;
  font-size: 0.88rem;
  color: var(--mc-text-faint);
}

.mc-form__alert {
  margin: 0 0 var(--mc-space-md);
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.92rem;
  color: #F3C7C2;
  background: rgba(192, 57, 43, .12);
  border: 1px solid rgba(192, 57, 43, .45);
}

/* The honeypot. Still not display:none — the better form fillers skip anything
   hidden that way, and every one of them fills this in.
   NOT `left:-9999px`. That is the usual recipe and it broke the Arabic pages:
   in RTL the document's origin is the right edge, so a negative-left element
   extends the scrollable width by exactly 9999px, and the browser opens the
   page parked on that empty strip. The page looked completely blank while
   every element in it measured visible and correctly positioned.
   The clip pattern takes the field out of the flow without moving it. */
.mc-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.mc-form__done {
  text-align: center;
  background: var(--mc-card);
  border: 1px solid rgba(245, 166, 35, .35);
  border-radius: var(--mc-radius);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}

.mc-form__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--mc-space-md);
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--mc-on-accent);
  background: var(--mc-accent);
}

.mc-form__done-t {
  margin: 0 0 0.5rem;
  font-family: var(--mc-font-display);
  font-size: var(--mc-step-2);
  font-weight: var(--mc-weight-bold);
}

.mc-form__done-d {
  margin: 0 auto;
  max-width: 34em;
  color: var(--mc-text-muted);
  line-height: var(--mc-leading-body);
}

.mc-form.is-sending #mc-submit { opacity: .6; pointer-events: none; }

@media (max-width: 720px) {
  .mc-form__grid { grid-template-columns: 1fr; }
  .mc-form__foot { flex-direction: column; align-items: stretch; text-align: center; }
  .mc-form__foot .mc-btn { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Not found
   ══════════════════════════════════════════════════════════════════════════ */

.mc-404__inner {
  max-width: 620px;
  text-align: center;
  /* Vertically settled rather than pinned to the top, so a short page does not
     leave the footer floating halfway up a tall screen. */
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mc-404__t {
  margin: 0 0 var(--mc-space-sm);
  font-family: var(--mc-font-display);
  font-size: var(--mc-step-3);
  font-weight: var(--mc-weight-black);
  line-height: var(--mc-leading-tight);
}

.mc-404__d {
  margin: 0 auto var(--mc-space-lg);
  color: var(--mc-text-muted);
  line-height: var(--mc-leading-body);
}

.mc-404__actions {
  display: flex;
  gap: var(--mc-space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.mc-404__links {
  margin-top: var(--mc-space-xl);
  padding-top: var(--mc-space-md);
  border-top: 1px solid var(--mc-line);
}

.mc-404__links-t {
  margin: 0 0 var(--mc-space-sm);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-text-faint);
}

.mc-404__links ul {
  display: flex;
  gap: var(--mc-space-md);
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mc-404__links a {
  color: var(--mc-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.mc-404__links a:hover,
.mc-404__links a:focus-visible {
  color: var(--mc-accent);
  border-bottom-color: var(--mc-accent);
}

@media (max-width: 480px) {
  .mc-404__actions .mc-btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact details — footer strip and the block under the form
   ══════════════════════════════════════════════════════════════════════════ */

.mc-footer__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-space-md);
  flex-wrap: wrap;
  padding: var(--mc-space-md) 0;
  border-top: 1px solid var(--mc-line);
}

.mc-contactlist,
.mc-social {
  display: flex;
  align-items: center;
  gap: var(--mc-space-md);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mc-contactlist a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mc-text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color .15s ease;
}

.mc-contactlist a:hover,
.mc-contactlist a:focus-visible { color: var(--mc-accent); }

.mc-contactlist__i svg { width: 18px; height: 18px; display: block; }

.mc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--mc-line);
  border-radius: 50%;
  color: var(--mc-text-muted);
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.mc-social a:hover,
.mc-social a:focus-visible {
  color: var(--mc-accent);
  border-color: var(--mc-accent);
  transform: translateY(-2px);
}

.mc-social svg { width: 19px; height: 19px; display: block; }

/* ── under the form ─────────────────────────────────────────────────────── */

.mc-contact__direct {
  max-width: 860px;
  margin: var(--mc-space-lg) auto 0;
  text-align: center;
}

.mc-contact__or {
  /* `margin-inline: auto`, not 0. base.css caps paragraph width for
     readability, so this box is narrower than its container — with zero side
     margins text-align:center centres the words inside a box that is itself
     sitting on the left, and the label reads as misaligned above the tiles. */
  margin: 0 auto var(--mc-space-md);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-text-faint);
}

.mc-contact__ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--mc-space-sm);
}

.mc-way {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: var(--mc-space-md) var(--mc-space-sm);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius);
  background: var(--mc-card);
  color: var(--mc-text);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

.mc-way:hover,
.mc-way:focus-visible { border-color: var(--mc-accent); transform: translateY(-2px); }

.mc-way__i { color: var(--mc-accent); }
.mc-way__i svg { width: 22px; height: 22px; display: block; }

.mc-way__t { font-weight: var(--mc-weight-medium); font-size: 0.95rem; }

.mc-way__v {
  font-size: 0.82rem;
  color: var(--mc-text-faint);
  /* Long addresses must not push the tile wider than its grid column. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .mc-footer__contact { flex-direction: column; align-items: flex-start; }
}