/* ==========================================================================
   Make You Digital — main stylesheet
   Loaded after Bootstrap 5.3 so every rule here wins over Reboot/utilities.

   1.  Design tokens
   2.  Base & reset
   3.  Layout primitives
   4.  Typography scale
   5.  Buttons & links
   6.  Header, navigation, overlay menu
   7.  Hero
   8.  The real problem
   9.  Industries strip
   10. Digital Health Check
   11. What we build
   12. How we work
   13. Not sure where to start
   14. Care plans
   15. Our work
   16. Contact
   17. Footer
   18. Sticky mobile bar
   19. Motion & reveal
   20. Responsive
   21. Homepage additions (audit teaser, ecosystem hero, section links)
   22. Print
   ========================================================================== */

/* 1. Design tokens ======================================================== */

:root {
  /* Ink / dark surfaces */
  --ink-900: #1c0a29;
  --ink-800: #26103a;
  --ink-700: #3a1053;
  --ink-600: #4a2263;
  --ink-500: #5b2c78;
  --ink-400: #7b2a9e;

  /* Accent */
  --accent: #c31a6d;
  --accent-light: #e0447f;
  --accent-dark: #a2135a;
  --accent-deep: #8d1050;
  --accent-pale: #f0a9c6;
  --accent-tint: #ffe4ef;
  --accent-tint-2: #ffd8e8;

  /* The two ink colours sampled from the logo monogram — used by the cursor. */
  --logo-magenta: #b22166;
  --logo-purple: #391561;

  /* Text on dark */
  --on-dark: #f7f2f8;
  --on-dark-2: #ecdcf3;
  --on-dark-3: #cbb2da;
  --on-dark-4: #a888bd;

  /* Text & surfaces on light */
  --text: #2b1240;
  --text-2: #3f2b4c;
  --text-3: #8d6aa4;
  --line: #e2d1f2;
  --surface: #f7f2f8;
  --surface-2: #fbf7ff;
  --surface-3: #f7f0ff;
  --white: #ffffff;

  /* Type */
  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --container: 1400px;
  --gutter: 24px;
  --section-y: clamp(48px, 7vw, 96px);
  --header-h: 96px;
  /* Height of the sticky call bar — 0 wherever it is hidden. Like --header-h,
     main.js overwrites this with the measured value; these are the fallbacks. */
  --mobilebar-h: 0px;

  /* Structure */
  --rule: 2px;
  --hairline: 1px;
  --gap-cell: 2px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Archivo — self-hosted ---------------------------------------------------
   Served from this origin, not fonts.gstatic.com, and preloaded in the head.

   The font used to load from Google Fonts with display=swap, so text first
   painted in whatever the platform calls system-ui and was re-laid-out when
   Archivo arrived. On Android — and on the device Lighthouse emulates — that
   fallback is Roboto, which sets the same string 11.1% WIDER than Archivo
   (measured: 2809.2px vs 2529.2px at 100px/800). The hero headline wrapped
   onto an extra line and then re-wrapped on swap, jumping everything below
   it. That was the whole of the 0.139 CLS Lighthouse reported.

   Self-hosting and preloading removes the swap rather than compensating for
   it: the font is requested from the same origin at highest priority and is
   in place for first paint, so there is no second layout at all. It also
   drops two cross-origin handshakes (fonts.googleapis.com for the CSS, then
   fonts.gstatic.com for the file), which were a render-blocking round trip
   on the critical path.

   One variable file covers 100-900, so the six static weights this site uses
   cost one 31.8 KB request instead of six. Latin subset only; the page has
   no Vietnamese or Latin-Extended text.

   A metric-matched @font-face fallback (size-adjust on local("Arial")) was
   tried first and rejected: Chrome does not apply synthetic bolding to a
   local() face, so the fallback came out 8-19% too NARROW depending on
   weight — a worse mismatch than the one being fixed. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Base & reset ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

a:hover {
  color: var(--accent-deep);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Zero radius is a system rule, and Bootstrap sets its own. */
button,
input,
select,
textarea,
.btn {
  border-radius: 0;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

/* Focus — visible on every interactive element, never removed. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.is-dark :focus-visible,
.mud-menu :focus-visible,
.mud-mobilebar :focus-visible {
  outline-color: var(--accent-pale);
}

::selection {
  background: var(--accent);
  color: var(--white);
}

/* Sticky header must not cover the section an anchor lands on. Exactly the
   header height, with nothing added — a section lands flush against the header
   rather than leaving a strip of page showing above it. Keep --header-h in step
   with the logo size (see the header rules) or this drifts. */
[id] {
  scroll-margin-top: var(--header-h);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink-900);
  color: var(--white);
  padding: 14px 20px;
  font: 700 13px/1 var(--font-heading);
  letter-spacing: .1em;
}

.skip-link:focus {
  left: 0;
  color: var(--white);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Layout primitives ==================================================== */

/* Grid — the Bootstrap subset this site actually uses, served from here.
   -------------------------------------------------------------------------
   The pages previously pulled bootstrap.min.css from cdn.jsdelivr.net: 227 KB
   of stylesheet, render-blocking, on a third party origin with no preconnect,
   ahead of everything else in <head>. An audit of all six pages found exactly
   eighteen Bootstrap classes in use, one of which (.visually-hidden) this
   file already defines. The seventeen below are the rest. Dropping the CDN
   removes a DNS lookup, a TLS handshake and a 227 KB parse from the critical
   path — which on a throttled mobile connection is the single largest cost
   before first paint.

   Reboot is not reproduced and is not needed: section 2 above already sets
   box-sizing, body margin, heading/list/figure margins, list-style, form font
   inheritance and border-radius, overriding everything Reboot would have
   supplied.

   The values are Bootstrap 5.3's own, kept exact so nothing reflows: gutter
   1.5rem, breakpoints 576/768/992, spacer 4 = 1.5rem and 5 = 3rem. Keep them
   that way — this is a faithful subset, not a reinterpretation. */

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

.col-6  { flex: 0 0 auto; width: 50%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.gy-4 { --bs-gutter-y: 1.5rem; }
.gy-5 { --bs-gutter-y: 3rem; }

.align-items-start  { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end    { align-items: flex-end !important; }

@media (min-width: 576px) {
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 768px) {
  .col-md-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
}

/* Hosts the rows above. A .row sets its own --bs-gutter-x (24px by default),
   pulling itself 12px outward and pushing its columns 12px back in — so column
   content always lands on this padding edge, and the row stays inside the page
   as long as this padding is at least 12px. Use the gy-* utilities for vertical
   spacing on wrapped rows; g-* would raise the horizontal gutter past that
   margin and push the row off the page on narrow screens. */
.mud-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mud-section {
  padding-block: var(--section-y);
}

.is-dark {
  background: var(--ink-900);
  color: var(--on-dark);
}

/* Panel groups: a 2px "gutter" drawn by the group's own background. */
.mud-cellgroup {
  display: grid;
  gap: var(--gap-cell);
  background: var(--ink-600);
  border: var(--rule) solid var(--ink-600);
}

.mud-cell {
  background: var(--ink-800);
  padding: clamp(20px, 2.4vw, 32px);
}

.mud-cell--raised {
  background: var(--ink-700);
}

/* Section headers: heading left, supporting line right, rule beneath. */
.mud-head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}

.mud-head--ruled {
  border-bottom: var(--rule) solid var(--ink-600);
  padding-bottom: 22px;
}

.mud-head--ruled-accent {
  border-bottom: var(--rule) solid var(--accent);
  padding-bottom: 22px;
}

.mud-body-grid {
  margin-top: clamp(26px, 3vw, 44px);
}

/* 4. Typography scale ===================================================== */

.mud-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 11px/1 var(--font-heading);
  letter-spacing: .24em;
  text-transform: uppercase;
}

.mud-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  background: currentColor;
}

.mud-eyebrow--plain::before {
  display: none;
}

.mud-label {
  font: 600 10px/1 var(--font-heading);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.mud-h1 {
  margin: 22px 0 0;
  font: 800 clamp(38px, 6.4vw, 84px)/0.98 var(--font-heading);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.mud-h2 {
  margin: 0;
  font: 800 clamp(28px, 4vw, 52px)/1.05 var(--font-heading);
  letter-spacing: -.03em;
}

.mud-h2--wide {
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.03;
}

.mud-h2--sm {
  font-size: clamp(24px, 2.9vw, 38px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.mud-h2--xl {
  font-size: clamp(30px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.035em;
}

.mud-h3 {
  margin: 0;
  font: 600 14.5px/1.3 var(--font-body);
  letter-spacing: 0;
  color: var(--text);
}

.mud-lead {
  margin: 0;
  font: 400 clamp(15px, 1.4vw, 18px)/1.6 var(--font-body);
}

.mud-note {
  margin: 0;
  font: 400 14px/1.6 var(--font-body);
}

/* Oversized gradient so it has somewhere to travel on hover. */
.mud-gradient-word {
  background: linear-gradient(90deg, var(--accent), var(--accent-light) 55%, var(--ink-400));
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 1.1s var(--ease);
}

.mud-h1:hover .mud-gradient-word,
.mud-h1:focus-within .mud-gradient-word {
  background-position: 100% 50%;
}

/* 5. Buttons & links ====================================================== */

.mud-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 0;
  cursor: pointer;
  padding: 15px 20px;
  font: 600 13px/1 var(--font-heading);
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mud-btn svg {
  flex: 0 0 auto;
}

.mud-btn--primary {
  background: var(--accent);
  color: var(--white);
}

.mud-btn--primary:hover {
  background: var(--accent-dark);
  color: var(--white);
}

.is-dark .mud-btn--primary:hover,
.mud-menu .mud-btn--primary:hover,
.mud-contact-form .mud-btn--primary:hover {
  background: var(--accent-light);
  color: var(--white);
}

.mud-btn--ink {
  background: var(--ink-700);
  color: var(--white);
  padding: 13px 16px;
  font-size: 12px;
}

.mud-btn--ink:hover {
  background: var(--accent);
  color: var(--white);
}

.mud-btn--outline {
  background: transparent;
  border: var(--rule) solid var(--ink-500);
  color: var(--on-dark);
  padding: 13px 20px;
}

.mud-btn--outline:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

.mud-btn--outline-accent {
  background: transparent;
  border: var(--rule) solid var(--accent-light);
  color: var(--white);
  padding: 13px 18px;
  font-size: 12px;
}

.mud-btn--outline-accent:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.mud-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.mud-underline-link {
  font: 600 12px/1 var(--font-heading);
  color: var(--accent-pale);
  border-bottom: var(--rule) solid var(--accent);
  padding-bottom: 4px;
}

.mud-underline-link:hover {
  color: var(--white);
  border-bottom-color: var(--accent-light);
}

/* Small pill labels used across dark panels. */
.mud-chip {
  padding: 7px 11px;
  border: var(--hairline) solid var(--ink-600);
  font: 500 12px/1 var(--font-body);
  color: var(--on-dark-2);
  white-space: nowrap;
}

.mud-chip--outline {
  border-color: var(--ink-500);
  font-size: 12.5px;
}

.mud-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 6. Header, navigation, overlay menu ===================================== */

.mud-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: var(--rule) solid var(--accent);
}

.mud-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 10px;
}

.mud-logo {
  flex: 0 0 auto;
}

.mud-logo img {
  height: 74px;
  width: auto;
  /* If the row ever does squeeze the box, letterbox rather than distort the
     wordmark. */
  object-fit: contain;
}

.mud-nav {
  display: none;
  gap: 20px;
  margin-left: auto;
  font: 500 13px/1 var(--font-body);
}

.mud-nav a {
  color: var(--text);
  padding-block: 6px;
  border-bottom: var(--rule) solid transparent;
}

.mud-nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.mud-call {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.mud-call__label {
  font: 600 9px/1 var(--font-heading);
  letter-spacing: .18em;
  color: var(--ink-500);
}

.mud-call__number {
  font: 700 15px/1 var(--font-heading);
  color: var(--text);
}

.mud-call:hover .mud-call__number {
  color: var(--accent);
}

.mud-burger {
  appearance: none;
  cursor: pointer;
  border: var(--rule) solid var(--ink-700);
  background: var(--white);
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
}

.mud-burger:hover {
  background: var(--surface-3);
}

.mud-burger span {
  width: 20px;
  height: 2px;
  background: var(--ink-700);
  display: block;
}

/* Overlay menu */
.mud-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  padding: 20px var(--gutter) 32px;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  /* Visibility flips only after the fade-out, so the panel stays out of the
     tab order while closed. */
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.mud-menu.is-open {
  opacity: 1;
  visibility: visible;
  /* ...and flips back immediately on open, so the first link is focusable
     on the same frame the class is added. */
  transition: opacity .25s ease, visibility 0s linear 0s;
}

.mud-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.mud-menu__top img {
  height: 48px;
  width: auto;
  background: var(--white);
  padding: 6px 8px;
}

.mud-menu__close {
  appearance: none;
  cursor: pointer;
  border: var(--rule) solid var(--ink-500);
  background: transparent;
  color: var(--on-dark);
  width: 46px;
  height: 46px;
  font: 400 22px/1 var(--font-heading);
}

.mud-menu__close:hover {
  border-color: var(--accent);
}

.mud-menu__nav {
  display: flex;
  flex-direction: column;
  margin-top: clamp(24px, 5vh, 56px);
}

.mud-menu__nav a {
  font: 800 clamp(26px, 7vw, 40px)/1.1 var(--font-heading);
  letter-spacing: -.03em;
  color: var(--on-dark);
  border-bottom: var(--hairline) solid var(--ink-700);
  padding: 16px 0;
}

.mud-menu__nav a:hover {
  color: var(--accent-pale);
}

.mud-menu__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 26px;
}

/* 7. Hero ================================================================= */

.mud-hero {
  position: relative;
  overflow: hidden;
}

/* Hero backdrop — the modular grid the brand is built on, lit from two corners.
   Pure CSS on a pseudo-element: no image request, no layout cost. */
.mud-hero::before,
.mud-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mud-hero::before {
  background-image:
    linear-gradient(var(--ink-700) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-700) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 20%, transparent 75%);
}

.mud-hero::after {
  background:
    radial-gradient(circle at 88% 12%, color-mix(in oklab, var(--accent) 38%, transparent) 0, transparent 42%),
    radial-gradient(circle at 8% 100%, color-mix(in oklab, var(--ink-400) 45%, transparent) 0, transparent 46%),
    linear-gradient(180deg, transparent 70%, color-mix(in oklab, var(--accent) 10%, transparent));
}

.mud-hero > * {
  position: relative;
  z-index: 1;
}

.mud-hero__inner {
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 80px);
}

.mud-hero .mud-eyebrow {
  color: var(--on-dark-4);
  letter-spacing: .28em;
}

.mud-hero .mud-eyebrow::before {
  background: var(--accent-light);
}

.mud-hero__lead {
  color: var(--on-dark-3);
  max-width: 52ch;
  margin-top: 24px;
}

.mud-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 36px;
  font: 500 12px/1 var(--font-body);
  color: var(--on-dark-4);
}

.mud-ribbon span[aria-hidden] {
  color: var(--accent-pale);
}

.mud-hero__extra {
  margin-top: 28px;
  border-top: var(--hairline) solid var(--ink-600);
  padding-top: 18px;
}

.mud-hero__extra .mud-label {
  color: var(--accent-light);
  font-size: 10px;
}

.mud-hero__extra .mud-chip-row {
  margin-top: 12px;
}

/* The panel drifts gently so the hero has some life. Transform only — it never
   moves anything else on the page — and it pauses on hover so the tabs inside
   are a still target to click. */
@keyframes mud-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

/* A wider drift than a straight bob: it rises, sways and tilts a fraction of a
   degree, so the panel reads as floating rather than sliding up and down. */
@keyframes mud-float-panel {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30%      { transform: translate3d(5px, -16px, 0) rotate(.4deg); }
  65%      { transform: translate3d(-5px, -8px, 0) rotate(-.4deg); }
}

.mud-hero__visual {
  min-width: 0;
  animation: mud-float-panel 9s ease-in-out infinite;
  will-change: transform;
}

.mud-hero__visual:hover,
.mud-hero__visual:focus-within {
  animation-play-state: paused;
}

/* Hero chips answer the pointer rather than sitting inert. */
.mud-hero__extra .mud-chip,
.mud-band__chips span {
  transition: transform .2s var(--ease), background-color .2s ease, border-color .2s ease;
}

.mud-hero__extra .mud-chip:hover {
  transform: translateY(-3px);
  border-color: var(--accent-light);
  color: var(--white);
}

.mud-band__chips span:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .3);
}

/* Tabs */
/* The strip sits flush on the panel: the active tab reads as attached to the
   content it controls, and the panel's own top edge is the boundary — so no
   bottom rule here, which would otherwise leave a seam on the light panels. */
.mud-tabs {
  display: flex;
  flex-wrap: wrap;
}

.mud-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--on-dark-4);
  padding: 10px 14px;
  font: 700 10px/1 var(--font-heading);
  letter-spacing: .16em;
  transition: background-color .15s ease, color .15s ease;
}

.mud-tab:hover {
  color: var(--on-dark);
}

.mud-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--white);
}

.mud-tabpanel[hidden] {
  display: none;
}

/* Panel 1 — foundation stack */
.mud-stack__cap {
  background: var(--surface);
  color: var(--ink-900);
  padding: 20px 22px;
}

.mud-stack__cap .mud-label {
  font-size: 9px;
  color: var(--ink-500);
}

.mud-stack__cap-title {
  font: 800 clamp(21px, 2.4vw, 30px)/1.05 var(--font-heading);
  letter-spacing: -.02em;
  margin-top: 8px;
}

.mud-stack__bands {
  display: flex;
  flex-direction: column;
  gap: var(--gap-cell);
  margin-top: var(--gap-cell);
}

.mud-band {
  padding: 16px 20px;
}

.mud-band__label {
  font: 700 9px/1 var(--font-heading);
  letter-spacing: .22em;
}

.mud-band__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.mud-band__chips span {
  padding: 6px 9px;
  font: 600 11px/1 var(--font-body);
  color: var(--white);
}

.mud-band--growth {
  background: var(--accent);
}

.mud-band--growth .mud-band__label {
  color: var(--white);
}

.mud-band--growth .mud-band__chips span {
  background: rgba(255, 255, 255, .16);
}

.mud-band--foundation {
  background: var(--ink-500);
}

.mud-band--foundation .mud-band__label {
  color: #e2d1f2;
}

.mud-band--foundation .mud-band__chips span {
  background: rgba(255, 255, 255, .14);
}

.mud-band--systems {
  background: var(--ink-700);
}

.mud-band--systems .mud-band__label {
  color: var(--on-dark-3);
}

.mud-band--systems .mud-band__chips span {
  background: rgba(255, 255, 255, .12);
  color: var(--on-dark);
}

/* Panel 2 — sample audit */
.mud-audit {
  background: var(--surface);
  color: var(--ink-900);
  padding: 22px 24px;
}

.mud-audit__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--rule) solid var(--ink-700);
  padding-bottom: 12px;
}

.mud-audit__head .mud-label {
  color: var(--text-3);
}

.mud-audit__sample {
  font: 700 12px/1 var(--font-heading);
  color: var(--accent);
}

.mud-audit__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0 18px;
  margin-top: 6px;
}

.mud-audit__rows li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: var(--hairline) solid var(--line);
  font: 500 12.5px/1 var(--font-body);
}

.mud-audit__rows .is-on {
  color: var(--ink-700);
}

.mud-audit__rows .is-off {
  color: var(--accent);
}

.mud-audit__score {
  background: var(--accent);
  color: var(--white);
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: var(--gap-cell);
}

.mud-audit__score .mud-label {
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--accent-tint-2);
}

.mud-audit__score-num {
  font: 800 40px/1 var(--font-heading);
  letter-spacing: -.03em;
  margin-top: 6px;
}

.mud-audit__score-num small {
  font: 500 15px/1 var(--font-body);
  opacity: .8;
}

.mud-audit__score-note {
  font: 600 11px/1.4 var(--font-body);
  max-width: 16ch;
  opacity: .92;
}

/* Panel 3 — capability grid */
.mud-tilegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cell);
}

.mud-tile {
  padding: 14px;
  font: 600 11.5px/1.25 var(--font-body);
  display: flex;
  align-items: flex-end;
  min-height: 78px;
  color: var(--on-dark);
}

.mud-tile--lead {
  grid-column: span 2;
  background: var(--surface);
  color: var(--ink-900);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 118px;
}

.mud-tile--lead .mud-label {
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--text-3);
}

.mud-tile--lead strong {
  font: 800 clamp(20px, 2.4vw, 26px)/1 var(--font-heading);
  letter-spacing: -.03em;
}

.mud-tile--website {
  background: var(--accent);
  color: var(--white);
  padding: 16px;
  font: 700 12px/1.25 var(--font-heading);
  min-height: 118px;
}

.mud-tile--ink-700 { background: var(--ink-700); }
.mud-tile--ink-500 { background: var(--ink-500); }
.mud-tile--accent  { background: var(--accent); color: var(--white); }
.mud-tile--pink    { background: var(--accent-light); color: var(--text); }

/* 8. The real problem ===================================================== */

.mud-problem .mud-eyebrow {
  color: var(--accent);
}

.mud-problem h2 {
  margin-top: 18px;
  max-width: 20ch;
}

.mud-problem h2 span {
  color: var(--accent);
}

.mud-quote {
  border-left: var(--rule) solid var(--ink-700);
  padding: 4px 0 4px 16px;
  margin-top: 26px;
}

.mud-quote p:first-child {
  font: 600 clamp(16px, 1.5vw, 19px)/1.4 var(--font-body);
}

.mud-quote p:last-child {
  font: 400 14px/1.6 var(--font-body);
  color: var(--text-2);
  margin-top: 8px;
  max-width: 34ch;
}

/* Multi-column keeps a single <ol> reading 01–08 down the first column and
   on into the second, and collapses to one ordered column on phones. */
.mud-checklist {
  column-gap: clamp(20px, 3vw, 44px);
}

@media (min-width: 768px) {
  .mud-checklist {
    columns: 2;
  }
}

.mud-checklist li {
  break-inside: avoid;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: var(--hairline) solid var(--line);
}

.mud-checklist b {
  font: 700 10px/1.6 var(--font-heading);
  color: var(--accent);
  min-width: 18px;
}

.mud-checklist span {
  font: 400 15px/1.5 var(--font-body);
}

.mud-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background: var(--ink-700);
  color: var(--on-dark);
  padding: 18px 22px;
  margin-top: 26px;
}

.mud-callout strong {
  font: 700 clamp(17px, 1.8vw, 24px)/1.2 var(--font-heading);
  letter-spacing: -.02em;
}

.mud-callout a {
  margin-left: auto;
}

/* 9. Industries strip ===================================================== */

.mud-industries {
  background: var(--surface-2);
  border-block: var(--rule) solid var(--line);
}

.mud-industries ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  padding-block: 22px;
}

.mud-industries .mud-label {
  color: var(--ink-500);
  font-size: 10px;
  letter-spacing: .2em;
}

.mud-industries li {
  font: 600 14px/1 var(--font-body);
  color: var(--text);
}

.mud-industries li + li::before {
  content: "/";
  color: var(--text-3);
  margin-right: 26px;
  font-weight: 400;
}

/* 10. Digital Health Check ================================================ */

.mud-check .mud-eyebrow {
  color: var(--accent-pale);
}

.mud-check h2 {
  margin-top: 16px;
  max-width: 22ch;
}

.mud-check__note {
  color: var(--on-dark-3);
  max-width: 34ch;
}

.mud-check__grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: clamp(26px, 3vw, 40px);
}

.mud-quiz {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mud-quiz__q {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.mud-quiz__n {
  font: 700 10px/1.5 var(--font-heading);
  color: var(--accent-light);
}

.mud-quiz__text {
  font: 600 15px/1.4 var(--font-body);
  color: var(--on-dark);
}

.mud-quiz__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0 22px;
}

.mud-opt {
  appearance: none;
  cursor: pointer;
  border: var(--hairline) solid var(--ink-500);
  background: transparent;
  color: var(--on-dark-2);
  padding: 9px 12px;
  font: 500 12.5px/1.2 var(--font-body);
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mud-opt:hover {
  border-color: var(--accent-light);
  color: var(--white);
}

.mud-opt[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.mud-result {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mud-result .mud-label {
  color: var(--on-dark-4);
}

.mud-result__score {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 12px;
}

.mud-result__num {
  font: 800 clamp(52px, 7vw, 84px)/1 var(--font-heading);
  letter-spacing: -.04em;
  color: var(--white);
}

.mud-result__den {
  font: 500 16px/1 var(--font-body);
  color: var(--on-dark-4);
  padding-bottom: 10px;
}

.mud-meter {
  height: 10px;
  background: var(--ink-900);
  margin-top: 14px;
}

.mud-meter__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .4s ease;
}

.mud-verdict {
  font: 600 clamp(15px, 1.4vw, 18px)/1.45 var(--font-body);
  color: var(--accent-pale);
  margin-top: 18px;
}

.mud-priorities li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: var(--hairline) solid var(--ink-700);
}

.mud-priorities li::before {
  content: "\2192";
  font: 700 11px/1.4 var(--font-heading);
  color: var(--accent-light);
}

.mud-priorities span {
  font: 500 14px/1.5 var(--font-body);
  color: var(--on-dark-2);
}

.mud-result .mud-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* 11. What we build ======================================================= */

.mud-build__lead {
  color: var(--text-2);
  max-width: 40ch;
  font-size: clamp(15px, 1.35vw, 17px);
}

.mud-column__head {
  padding: 14px 16px;
  color: var(--on-dark);
}

.mud-column__head h3 {
  margin: 0;
  font: 700 11px/1 var(--font-heading);
  letter-spacing: .18em;
  color: inherit;
}

.mud-column__head p {
  font: 400 12.5px/1.4 var(--font-body);
  margin-top: 7px;
}

.mud-column--found .mud-column__head { background: var(--ink-700); }
.mud-column--sell  .mud-column__head { background: var(--accent); color: var(--white); }
.mud-column--run   .mud-column__head { background: var(--ink-500); }

.mud-column li {
  border-bottom: var(--hairline) solid var(--line);
  padding: 14px 4px;
}

.mud-column li p {
  font: 400 13px/1.55 var(--font-body);
  color: var(--text-2);
  margin-top: 5px;
}

/* 12. How we work ========================================================= */

.mud-process__lead {
  font: 600 clamp(14px, 1.3vw, 17px)/1.4 var(--font-body);
  color: var(--on-dark-3);
  max-width: 34ch;
}

.mud-process .mud-eyebrow {
  color: var(--accent-pale);
}

.mud-process .mud-eyebrow::before {
  background: var(--accent);
}

.mud-process h2 {
  margin-top: 18px;
}

.mud-rail {
  display: flex;
  align-items: center;
  margin: clamp(30px, 3.5vw, 48px) 0 var(--gap-cell);
}

.mud-rail::before,
.mud-rail::after {
  content: "";
  width: 11px;
  height: 11px;
  background: var(--accent);
  flex: 0 0 auto;
}

.mud-rail span {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--ink-500) 55%, var(--accent));
}

.mud-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-cell);
}

.mud-step {
  flex: 1 1 210px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 26px) clamp(24px, 2.6vw, 34px);
  transition: background-color .2s ease;
}

.mud-step:hover {
  background: var(--ink-700);
}

.mud-step__ghost {
  position: absolute;
  right: -6px;
  bottom: -26px;
  font: 800 clamp(76px, 9vw, 120px)/1 var(--font-heading);
  letter-spacing: -.06em;
  color: rgba(240, 169, 198, .14);
  pointer-events: none;
}

.mud-step__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mud-step__icon {
  width: 44px;
  height: 44px;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.mud-step__n {
  font: 700 12px/1 var(--font-heading);
  letter-spacing: .2em;
  color: var(--accent-pale);
}

.mud-step h3 {
  margin-top: 10px;
  font: 800 clamp(19px, 2vw, 26px)/1.1 var(--font-heading);
  letter-spacing: -.02em;
  color: var(--white);
}

.mud-step p {
  font: 400 clamp(13.5px, 1.15vw, 15px)/1.6 var(--font-body);
  color: var(--on-dark-3);
  margin-top: 12px;
}

.mud-step--last {
  background: var(--accent);
}

.mud-step--last:hover {
  background: var(--accent-light);
}

.mud-step--last .mud-step__ghost {
  color: rgba(255, 255, 255, .2);
}

.mud-step--last .mud-step__icon {
  background: var(--white);
}

.mud-step--last .mud-step__n {
  color: var(--white);
}

.mud-step--last p {
  color: var(--accent-tint);
}

/* 13. Not sure where to start ============================================= */

.mud-start__grid {
  margin-top: clamp(26px, 3.5vw, 48px);
}

.mud-start__lead {
  color: var(--text-2);
  max-width: 50ch;
  margin-top: 16px;
}

.mud-startopt {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  cursor: pointer;
  border: 0;
  border-bottom: var(--hairline) solid var(--line);
  border-left: 4px solid var(--line);
  background: transparent;
  padding: 16px 14px;
  font: 500 15px/1.4 var(--font-body);
  color: var(--text);
  transition: background-color .15s ease, border-color .15s ease;
}

.mud-startopt:hover {
  background: var(--surface-3);
}

.mud-startopt[aria-selected="true"] {
  border-left-color: var(--accent);
  background: var(--surface-3);
  font-weight: 600;
}

.mud-answer {
  background: var(--ink-800);
  color: var(--on-dark);
  padding: clamp(22px, 2.6vw, 34px);
}

.mud-answer .mud-label {
  color: var(--accent-pale);
}

.mud-answer p {
  font: 600 clamp(16px, 1.6vw, 21px)/1.45 var(--font-body);
  margin-top: 16px;
}

.mud-answer .mud-chip-row {
  margin-top: 22px;
}

.mud-answer .mud-btn {
  margin-top: 26px;
}

/* 14. Care plans ========================================================== */

.mud-care h2 {
  max-width: 20ch;
}

.mud-care__note {
  color: var(--on-dark-3);
  max-width: 36ch;
}

.mud-care__grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: clamp(26px, 3vw, 40px);
}

.mud-plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mud-plan__kicker {
  font: 700 11px/1 var(--font-heading);
  letter-spacing: .18em;
  color: var(--on-dark-3);
}

.mud-cell--raised .mud-plan__kicker {
  color: var(--accent-pale);
}

.mud-plan h3 {
  margin-top: 10px;
  font: 700 clamp(18px, 1.9vw, 24px)/1.2 var(--font-heading);
  letter-spacing: -.01em;
  color: var(--white);
}

.mud-plan__for {
  font: 400 13.5px/1.55 var(--font-body);
  color: var(--on-dark-3);
  margin-top: 10px;
}

.mud-plan__features li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  border-top: var(--hairline) solid var(--ink-700);
  padding-top: 10px;
  margin-top: 16px;
}

.mud-cell--raised .mud-plan__features li {
  border-top-color: var(--ink-600);
}

.mud-plan__features li::before {
  content: "+";
  color: var(--accent-pale);
  font: 700 11px/1.4 var(--font-heading);
}

.mud-plan__features span {
  font: 500 13.5px/1.5 var(--font-body);
  color: var(--on-dark-2);
}

.mud-care__footnote {
  font: 500 13.5px/1.6 var(--font-body);
  color: var(--on-dark-3);
  margin-top: 20px;
}

/* 15. Our work ============================================================ */

.mud-work__lead {
  color: var(--text-2);
  max-width: 38ch;
}

.mud-worktabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-cell);
  margin-top: clamp(26px, 3vw, 40px);
}

.mud-worktab {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--surface-3);
  color: var(--ink-500);
  padding: 12px 18px;
  font: 700 10px/1 var(--font-heading);
  letter-spacing: .18em;
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}

.mud-worktab:hover {
  background: var(--line);
}

.mud-worktab[aria-selected="true"] {
  background: var(--accent);
  color: var(--white);
}

.mud-work__panel {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: var(--gap-cell);
}

/* The screenshot is matted on the project's gradient rather than cropped to
   fill the cell, so the whole design stays visible whatever height the grid
   hands this column. The gradient also covers the moment before it loads. */
.mud-work__art {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(18px, 2.2vw, 30px);
  background: var(--ink-700);
}

.mud-work__shot {
  width: 100%;
  height: auto;
  display: block;
}

.mud-work__art span {
  align-self: flex-start;
  font: 700 13px/1.4 var(--font-heading);
  color: var(--white);
  border-bottom: var(--rule) solid rgba(255, 255, 255, .6);
  padding-bottom: 4px;
}

.mud-work__art span::after {
  content: " \2197";
}

.mud-work__art:hover span {
  border-bottom-color: var(--white);
}

.mud-work__art--1 { background: linear-gradient(135deg, #3a1053, #c31a6d 60%, #e0447f); }
.mud-work__art--2 { background: linear-gradient(135deg, #26103a, #5b2c78 55%, #c31a6d); }
.mud-work__art--3 { background: linear-gradient(135deg, #1c0a29, #4a2263 50%, #e0447f); }

.mud-work__detail {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mud-work__detail .mud-label {
  color: var(--on-dark-4);
}

.mud-work__name {
  font: 600 clamp(17px, 1.8vw, 23px)/1.3 var(--font-body);
  margin-top: 10px;
  color: var(--white);
}

.mud-work__detail p:not(.mud-work__name) {
  font: 400 14px/1.6 var(--font-body);
  color: var(--on-dark-3);
  margin-top: 8px;
}

.mud-work__detail .mud-chip-row {
  margin-top: 10px;
}

/* 16. Contact ============================================================= */

.mud-contact {
  background: var(--accent);
  color: var(--white);
}

.mud-contact h2 {
  max-width: 18ch;
}

.mud-contact__lead {
  color: var(--accent-tint);
  max-width: 48ch;
  margin-top: 24px;
}

.mud-contact__reassure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  font: 500 14px/1.5 var(--font-body);
  color: var(--accent-tint);
}

.mud-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  font: 600 15px/1 var(--font-heading);
}

.mud-contact__links a {
  color: var(--white);
  border-bottom: var(--rule) solid rgba(255, 255, 255, .5);
  padding-bottom: 5px;
}

.mud-contact__links a:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

.mud-contact-form {
  background: var(--ink-900);
  padding: clamp(22px, 2.6vw, 34px);
}

.mud-contact-form .mud-label {
  color: var(--accent-pale);
}

.mud-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.mud-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mud-field > span {
  font: 600 11px/1 var(--font-heading);
  letter-spacing: .14em;
  color: var(--on-dark-4);
}

.mud-field input,
.mud-field select {
  background: var(--ink-800);
  border: var(--hairline) solid var(--ink-600);
  color: var(--white);
  padding: 12px 13px;
  font: 500 14px/1.2 var(--font-body);
  width: 100%;
  transition: border-color .15s ease;
}

.mud-field input::placeholder {
  color: var(--on-dark-4);
}

.mud-field input:hover,
.mud-field select:hover {
  border-color: var(--ink-500);
}

.mud-field input[aria-invalid="true"] {
  border-color: var(--accent-light);
}

.mud-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--on-dark-4) 50%),
                    linear-gradient(135deg, var(--on-dark-4) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.mud-field select option {
  background: var(--ink-800);
  color: var(--white);
}

.mud-error {
  font: 500 12px/1.4 var(--font-body);
  color: var(--accent-pale);
  min-height: 0;
}

.mud-error:empty {
  display: none;
}

.mud-contact-form .mud-btn--primary {
  align-self: flex-start;
}

.mud-formnote {
  font: 400 12.5px/1.55 var(--font-body);
  color: var(--on-dark-4);
  margin: 0;
}

.mud-formnote a {
  color: var(--accent-pale);
}

.mud-formnote a:hover {
  color: var(--white);
}

/* 17. Footer ============================================================== */

.mud-footer {
  background: var(--ink-900);
  color: var(--on-dark-3);
}

.mud-footer__inner {
  padding-block: clamp(36px, 5vw, 60px);
}

.mud-footer__brand img {
  height: 40px;
  width: auto;
  background: var(--white);
  padding: 8px 10px;
}

.mud-footer__brand p {
  font: 400 13px/1.6 var(--font-body);
  margin-top: 14px;
  max-width: 32ch;
}

.mud-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.mud-social a {
  width: 34px;
  height: 34px;
  border: var(--hairline) solid var(--ink-500);
  display: grid;
  place-items: center;
}

.mud-social a:hover {
  border-color: var(--accent-light);
  background: var(--ink-800);
}

.mud-social a.is-whatsapp:hover {
  border-color: #25d366;
}

.mud-footer__nav {
  font: 500 13px/2.1 var(--font-body);
}

.mud-footer__nav a {
  color: var(--on-dark-3);
}

.mud-footer__nav a:hover {
  color: var(--accent-pale);
}

.mud-footer__contact {
  font: 500 13px/2.1 var(--font-body);
}

.mud-footer__contact span {
  display: block;
}

.mud-footer__contact a {
  color: var(--accent-pale);
}

.mud-footer__contact a:hover {
  color: var(--white);
}

.mud-footer__address {
  font: 400 13px/1.6 var(--font-body);
  max-width: 28ch;
  margin-top: 10px;
}

.mud-footer__copy {
  margin-top: 12px;
}

/* 18. Sticky mobile bar =================================================== */

.mud-mobilebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  border-top: var(--rule) solid var(--accent);
}

.mud-mobilebar a {
  flex: 1;
  padding: 15px 10px;
  font: 700 12px/1 var(--font-heading);
  letter-spacing: .1em;
  text-align: center;
  color: var(--white);
}

/* WhatsApp moved to the floating button, so the bar carries the call only. */
.mud-mobilebar a {
  background: var(--ink-900);
}

.mud-mobilebar a:hover {
  background: var(--ink-700);
  color: var(--white);
}

/* 18b. Floating WhatsApp button ============================================ */

.mud-fab {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mud-fab__btn {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--white);
  animation: mud-float 4.5s ease-in-out infinite;
  transition: background-color .2s ease, transform .2s var(--ease);
}

.mud-fab__btn:hover {
  background: var(--accent-dark);
  color: var(--white);
  transform: scale(1.06);
  animation-play-state: paused;
}

.mud-fab__btn:active {
  transform: scale(.96);
}

/* A slow halo that draws the eye without nagging. Square, like everything
   else in the system. */
.mud-fab__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  animation: mud-fab-pulse 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes mud-fab-pulse {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.45); }
  100% { opacity: 0;   transform: scale(1.45); }
}

.mud-fab__label {
  order: -1;
  background: var(--ink-900);
  color: var(--on-dark);
  padding: 9px 13px;
  font: 600 12px/1 var(--font-heading);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s var(--ease);
  pointer-events: none;
}

.mud-fab__btn:hover + .mud-fab__label,
.mud-fab__btn:focus-visible + .mud-fab__label {
  opacity: 1;
  transform: none;
}

/* Clear the sticky call bar on phones. */
@media (max-width: 759.98px) {
  .mud-fab {
    bottom: calc(var(--mobilebar-h) + 16px);
  }

  .mud-fab__btn {
    width: 52px;
    height: 52px;
  }

  /* No hover on touch, so the label would never show — and it crowds the
     screen edge at this size. */
  .mud-fab__label {
    display: none;
  }
}

/* 18c. Custom cursor ======================================================= */

/* Only ever enabled by JS, and only for a real mouse — see main.js. */
.mud-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}

.mud-cursor.is-visible {
  opacity: 1;
}

/* The cursor is the one round thing in the system — a pointer reads as a
   pointer, not as a piece of the layout.
   It cycles between the logo's two inks, and the dot and ring run half a cycle
   apart so they are never the same colour at once. The white outlines are what
   keep it findable on the magenta panels — the contact band and the hero's
   Growth band are the accent itself, and a magenta cursor vanishes on them. */
@keyframes mud-cursor-fill {
  0%, 100% { background-color: var(--logo-magenta); }
  50%      { background-color: var(--logo-purple); }
}

@keyframes mud-cursor-tint {
  0%, 100% { background-color: rgba(178, 33, 102, .26); }
  50%      { background-color: rgba(57, 21, 97, .26); }
}

.mud-cursor-dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--logo-magenta);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
  animation: mud-cursor-fill 4s ease-in-out infinite;
}

/* No stroke — a soft tinted disc, half a cycle behind the dot. The dot is what
   makes the pointer findable (its white outline holds 5.69:1 even on the
   accent bands); this is the trailing flourish. */
.mud-cursor-ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background-color: rgba(178, 33, 102, .26);
  animation: mud-cursor-tint 4s ease-in-out -2s infinite;
  transition: opacity .25s ease, width .2s var(--ease), height .2s var(--ease),
              margin .2s var(--ease);
}

/* Over something clickable the disc opens up. The fill is owned by the
   animation, so size alone carries the state. */
.mud-cursor-ring.is-hot {
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
}

.mud-cursor-ring.is-down {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}

/* Hide the native pointer only once the replacement is running. Form fields
   keep theirs — the caret position matters more than the effect. */
html.mud-cursor-on,
html.mud-cursor-on * {
  cursor: none;
}

html.mud-cursor-on input,
html.mud-cursor-on textarea,
html.mud-cursor-on select {
  cursor: auto;
}

/* 19. Motion & reveal ===================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Per-block reveal: the children of a group come in one after another as it
   scrolls into view. Kept deliberately small — 8px and 55ms apart — so it
   reads as the page settling, not as a sequence of effects. */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

[data-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

/* A group that paints its own 2px gutter colour would otherwise flash as a
   solid slab while its cards are still hidden. */
.mud-cellgroup[data-stagger] {
  background-color: transparent;
  border-color: transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}

.mud-cellgroup[data-stagger].is-in {
  background-color: var(--ink-600);
  border-color: var(--ink-600);
}

/* No JS: never leave content invisible. */
.no-js [data-reveal],
.no-js [data-stagger] > * {
  opacity: 1;
  transform: none;
}

.no-js .mud-cellgroup[data-stagger] {
  background-color: var(--ink-600);
  border-color: var(--ink-600);
}

/* 20. Responsive ========================================================== */

/* Desktop navigation. The artboard switched at 1180px, but the logo is larger
   here (74px tall, 210px wide) and the six nav links, the phone block and the
   CTA need about 1194px of row before the nav wraps to a second line — so the
   threshold moved to 1280px, which also leaves the gaps below something to
   spend. Below this the burger is the better experience anyway.
   The nav and the call block both keep `margin-left: auto`, so the leftover row
   space splits evenly between them: the nav sits off the logo instead of
   butting against the phone number, and the gap only ever spends space that is
   actually free, so it can never push the CTA off the end. */
@media (min-width: 1280px) {
  .mud-nav {
    display: flex;
  }

  .mud-burger {
    display: none;
  }
}

@media (max-width: 1279.98px) {
  .mud-menu__nav a:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 991.98px) {
  .mud-header__inner {
    gap: 14px;
  }

  .mud-callout a {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  :root {
    --header-h: 87px;
  }

  .mud-logo img {
    height: 65px;
  }

  .mud-tilegrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mud-tile--lead {
    grid-column: span 2;
  }
}

/* Sticky bottom bar below the design's 760px threshold. */
@media (max-width: 759.98px) {
  :root {
    /* 15px padding + 12px line + 15px padding + the 2px rule. */
    --mobilebar-h: 44px;
  }

  .mud-mobilebar {
    display: flex;
  }

  /* Exactly the bar's height, so the footer ends where the bar begins. Any
     surplus here shows as a strip of white page between the two. */
  body {
    padding-bottom: var(--mobilebar-h);
  }
}

/* Header CTA hides below the design's 560px threshold. */
@media (max-width: 559.98px) {
  .mud-header__cta {
    display: none;
  }
}

@media (max-width: 575.98px) {
  :root {
    --gutter: 18px;
    /* Logo 55 + 2 × 10 padding + the 2px rule. Keep in step with the logo
       height below, or anchored headings land off-target. */
    --header-h: 77px;
  }

  .mud-logo img {
    height: 55px;
  }

  /* The larger logo, the phone block and the burger no longer fit one row at
     this width — the logo was being crushed to make space. The phone block is
     the one that can go: the sticky bar below shows Call Now at every width
     under 760px, and the overlay menu carries the number too. */
  .mud-call {
    display: none;
  }

  .mud-burger {
    margin-left: auto;
  }

  .mud-call__number {
    font-size: 13px;
  }

  .mud-quiz__options {
    margin-left: 0;
  }

  .mud-industries li + li::before {
    margin-right: 26px;
  }

  .mud-work__art {
    min-height: 200px;
  }

  .mud-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .mud-btn-row .mud-btn,
  .mud-menu__foot .mud-btn {
    width: 100%;
  }

  /* Keep the three tabs on one row — wrapping strands the third one across
     the full width, which reads as a broken strip now that it sits flush on
     the panel. */
  .mud-tabs {
    width: 100%;
    flex-wrap: nowrap;
  }

  .mud-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 4px;
    font-size: 9px;
    letter-spacing: .08em;
    text-align: center;
  }
}

@media (max-width: 359.98px) {
  .mud-tilegrid {
    grid-template-columns: 1fr;
  }

  .mud-tile--lead {
    grid-column: span 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    /* Without this the stagger delays survive and content still trickles in. */
    transition-delay: 0s !important;
  }

  [data-reveal],
  [data-stagger] > * {
    opacity: 1;
    transform: none;
  }
}

/* 21. Homepage additions ================================================= */

/* A row of the logo's arcs running along the base of the hero. */
.mud-page-hero__arcs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, var(--accent) 0 64px, var(--ink-500) 64px 128px, var(--accent-light) 128px 192px, var(--ink-700) 192px 256px);
}

.mud-page-hero .mud-eyebrow { color: var(--accent-pale); }

.mud-svc__ask {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 6px;
  font: 600 12.5px/1.3 var(--font-heading);
  color: var(--accent-deep);
  border-bottom: var(--rule) solid var(--accent);
  padding-bottom: 4px;
}

.mud-svc__ask:hover { color: var(--accent); }

/* Hero — free badge */
.mud-da-free { display: inline-flex; align-items: stretch; margin: 0; border: var(--rule) solid var(--accent); }
.mud-da-free__badge { display: grid; place-items: center; padding: 8px 14px; background: var(--accent); font: 800 15px/1 var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.mud-da-free > span:last-child { display: grid; place-items: center; padding: 8px 14px; font: 700 12px/1.2 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.mud-da-free + .mud-h1 { margin-top: 22px; }

/* 21k. Header alignment + homepage patterns =============================== */

@media (min-width: 1280px) {
  .mud-header__inner { gap: 28px; }
  .mud-nav {
    flex: 1;
    justify-content: center;
    gap: clamp(20px, 2.2vw, 34px);
    margin-left: 0;
    font: 600 13.5px/1 var(--font-heading);
    letter-spacing: .01em;
  }
  .mud-nav a { position: relative; padding-block: 10px; border-bottom: 0; }
  .mud-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s var(--ease);
  }
  .mud-nav a:hover::after, .mud-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .mud-nav a[aria-current="page"] { color: var(--accent-deep); }
  .mud-header .mud-call { margin-left: 0; padding-left: 22px; border-left: var(--hairline) solid var(--line); }
}

@media (prefers-reduced-motion: reduce) { .mud-nav a::after { transition: none; } }

/* Homepage — hero stripe, as on the inner pages */
.mud-hero { box-shadow: inset 0 -10px 0 transparent; }
.mud-hero > .mud-page-hero__arcs { position: absolute; z-index: 1; }

/* Homepage — light sections */
.mud-problem, .mud-start { position: relative; isolation: isolate; overflow: hidden; background: var(--white); }
.mud-problem::before, .mud-start::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 100% 100%, var(--accent-tint) 0, transparent 40%),
    radial-gradient(circle at 0% 0%, var(--surface-3) 0, transparent 45%);
}

.mud-build, .mud-work {
  background-color: var(--surface-3);
  background-image: radial-gradient(var(--line) 1.2px, transparent 1.4px);
  background-size: 18px 18px;
}

/* Homepage — dark sections get the masked grid */
.mud-check, .mud-process, .mud-care { position: relative; isolation: isolate; overflow: hidden; }
.mud-check::before, .mud-process::before, .mud-care::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ink-700) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-700) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 40%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 80% 40%, #000 15%, transparent 75%);
}
.mud-process::before { -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 60%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 20% 60%, #000 15%, transparent 75%); }
.mud-check::after, .mud-care::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 95% 5%, color-mix(in oklab, var(--accent) 30%, transparent) 0, transparent 35%);
}


/* 21l. Homepage hero — entrance, drifting glow, ecosystem option ========== */

html[data-home-hero="b"] .mud-hero-opt[data-opt="a"],
html:not([data-home-hero="b"]) .mud-hero-opt[data-opt="b"] { display: none; }
html[data-home-hero="b"] .mud-hero__visual { animation: none; }

/* Drifting colour orbs behind the hero */
.mud-hero__orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mud-hero__orbs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.mud-hero__orbs i:nth-child(1) { width: 520px; height: 520px; right: -120px; top: -160px; background: var(--accent); animation: mud-drift-a 18s ease-in-out infinite alternate; }
.mud-hero__orbs i:nth-child(2) { width: 460px; height: 460px; left: -160px; bottom: -200px; background: var(--ink-400); animation: mud-drift-b 22s ease-in-out infinite alternate; }
.mud-hero__orbs i:nth-child(3) { width: 300px; height: 300px; left: 42%; top: 30%; background: var(--accent-light); opacity: .22; animation: mud-drift-c 26s ease-in-out infinite alternate; }

@keyframes mud-drift-a { to { transform: translate(-140px, 120px) scale(1.15); } }
@keyframes mud-drift-b { to { transform: translate(180px, -90px) scale(1.1); } }
@keyframes mud-drift-c { to { transform: translate(-120px, -80px) scale(.85); } }

/* Entrance — staggered rise on page open */
.mud-hero__inner .col-lg-6:first-child > * { animation: mud-rise .9s var(--ease) both; }
.mud-hero__inner .col-lg-6:first-child > :nth-child(1) { animation-delay: .1s; }
.mud-hero__inner .col-lg-6:first-child > :nth-child(2) { animation-delay: .2s; }
.mud-hero__inner .col-lg-6:first-child > :nth-child(3) { animation-delay: .35s; }
.mud-hero__inner .col-lg-6:first-child > :nth-child(4) { animation-delay: .5s; }
.mud-hero__inner .col-lg-6:first-child > :nth-child(5) { animation-delay: .62s; }
.mud-hero__inner .col-lg-6:first-child > :nth-child(6) { animation-delay: .74s; }
.mud-hero .mud-gradient-word { background-size: 200% 100%; animation: mud-sheen 6s ease-in-out 1.2s infinite alternate; }

@keyframes mud-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes mud-sheen { to { background-position: 100% 0; } }
@keyframes mud-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes mud-bob { 50% { translate: 0 -7px; } }

/* Ecosystem */
/* Phone and tablet: the diagram leads, the text column follows.

   Below the col-lg-6 split the two hero columns stack, and source order would
   put the entire text block — eyebrow, headline, lead, both buttons, the
   process ribbon and the chip row — above the diagram, pushing it the better
   part of a screen down. The diagram is what shows the whole offer at a
   glance, so on a phone it goes first.

   Only the painted order changes. The DOM is untouched, so the <h1> stays
   early in the source where crawlers and LLMs read it, and the accessibility
   reading order still begins at the headline rather than at a picture. The
   diagram holds nothing focusable — it is one role="img" — so tab order is
   unaffected either way.

   Safe for CLS: .mud-eco takes its height from aspect-ratio off its own
   width, so the box is the right size at first paint. Nothing below it gets
   pushed down once CSS and fonts settle, which is what matters now that it
   sits above the text rather than below it. */
@media (max-width: 991.98px) {
  .mud-hero__visual { order: -1; }
}

.mud-eco { position: relative; width: min(100%, 580px); aspect-ratio: 1 / .94; margin-inline: auto; }

.mud-eco__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mud-eco__line { stroke: var(--ink-500); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; opacity: 0; animation: mud-fade .6s ease .4s forwards; }
.mud-eco__pulse { stroke: var(--accent-light); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: square; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: 0; animation: mud-packet 3.2s linear infinite; }
/* Stagger the seven packets. The selector counts in twos because nth-of-type
   counts every <line> in the group, and the spokes alternate dim line, bright
   pulse — so the pulses are the even-numbered lines, 2 through 14. Indexing
   them 1..7 (as this did before) matched only half of them and left the rest
   firing together on the default delay. */
.mud-eco__lines .mud-eco__pulse:nth-of-type(2)  { animation-delay: 1.20s; }
.mud-eco__lines .mud-eco__pulse:nth-of-type(4)  { animation-delay: 1.55s; }
.mud-eco__lines .mud-eco__pulse:nth-of-type(6)  { animation-delay: 1.90s; }
.mud-eco__lines .mud-eco__pulse:nth-of-type(8)  { animation-delay: 2.25s; }
.mud-eco__lines .mud-eco__pulse:nth-of-type(10) { animation-delay: 2.60s; }
.mud-eco__lines .mud-eco__pulse:nth-of-type(12) { animation-delay: 2.95s; }
.mud-eco__lines .mud-eco__pulse:nth-of-type(14) { animation-delay: 3.30s; }

@keyframes mud-fade { to { opacity: .9; } }
@keyframes mud-packet { 0% { stroke-dashoffset: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -94; opacity: 0; } }

.mud-eco__ring { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border: 1.5px solid var(--accent-light); transform: translate(-50%, -50%); opacity: 0; animation: mud-ripple 4s ease-out infinite; }
.mud-eco__ring--b { animation-delay: 2s; }
@keyframes mud-ripple { 0% { opacity: .7; width: 30%; } 100% { opacity: 0; width: 62%; } }

.mud-eco__core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 30%;
  aspect-ratio: 1;
  padding: 16px;
  background: linear-gradient(145deg, var(--accent-light), var(--accent) 55%, var(--accent-deep));
  box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 20%, transparent), 0 30px 60px -20px var(--accent);
  transform: translate(-50%, -50%);
  animation: mud-pop .8s var(--ease) .25s both;
}

.mud-eco__core .mud-label { color: var(--accent-tint); }
.mud-eco__core b { font: 800 clamp(17px, 2vw, 25px)/1.05 var(--font-heading); letter-spacing: -.02em; color: var(--white); }

.mud-eco__node {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px 10px 10px;
  background: color-mix(in oklab, var(--ink-800) 82%, transparent);
  border: var(--hairline) solid var(--ink-500);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 30px -18px var(--ink-900);
  color: var(--accent-pale);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: mud-pop .7s var(--ease) both, mud-bob 6s ease-in-out infinite;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.mud-eco__node span { font: 700 13px/1 var(--font-heading); color: var(--white); }
.mud-eco__node:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
/* Seven nodes, evenly spaced at 360/7 = 51.43 degrees from twelve o'clock.
   The positions come from x = 50 + 38*cos(t), y = 50 + 36*sin(t) — an ellipse,
   not a circle, because the SVG beneath uses preserveAspectRatio="none" inside
   a 1 : .94 box, so a true circle would render visibly squashed. The 38/36
   pair is the same ratio the previous eight-node layout used. */
.mud-eco__node--1 { left: 50%;   top: 14%;   animation-delay: 0.50s, 0.0s; }
.mud-eco__node--2 { left: 79.7%; top: 27.5%; animation-delay: 0.60s, 0.8s; }
.mud-eco__node--3 { left: 87%;   top: 58%;   animation-delay: 0.70s, 1.6s; }
.mud-eco__node--4 { left: 66.5%; top: 82.4%; animation-delay: 0.80s, 2.4s; }
.mud-eco__node--5 { left: 33.5%; top: 82.4%; animation-delay: 0.90s, 3.2s; }
.mud-eco__node--6 { left: 13%;   top: 58%;   animation-delay: 1.00s, 4.0s; }
.mud-eco__node--7 { left: 20.3%; top: 27.5%; animation-delay: 1.10s, 4.8s; }

.mud-eco__badge {
  position: absolute;
  right: 0;
  bottom: -2%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--white);
  box-shadow: 0 20px 40px -20px var(--ink-900);
  color: var(--text);
  animation: mud-rise .8s var(--ease) 1.3s both;
}

.mud-eco__badge:hover { color: var(--text); background: var(--accent-tint); }
.mud-eco__badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent); animation: mud-pulse 1.4s steps(2) infinite; }
.mud-eco__badge span { display: flex; flex-direction: column; gap: 3px; font: 500 11.5px/1 var(--font-body); color: var(--text-2); }
.mud-eco__badge b { font: 800 13.5px/1 var(--font-heading); color: var(--text); }

@media (max-width: 575.98px) {
  .mud-eco { aspect-ratio: 1 / 1.05; }
  .mud-eco__node { padding: 7px 9px 7px 7px; gap: 6px; }
  .mud-eco__node svg { width: 14px; height: 14px; }
  .mud-eco__node span { font-size: 11px; }
  .mud-eco__core { width: 34%; padding: 10px; }
  .mud-hero__orbs i:nth-child(1) { width: 320px; height: 320px; }
  .mud-hero__orbs i:nth-child(2) { width: 300px; height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .mud-hero__orbs i, .mud-hero__inner .col-lg-6:first-child > *, .mud-hero .mud-gradient-word,
  .mud-eco__line, .mud-eco__pulse, .mud-eco__ring, .mud-eco__core, .mud-eco__node, .mud-eco__badge, .mud-eco__badge i { animation: none; }
  .mud-eco__line { opacity: .9; }
  .mud-eco__pulse, .mud-eco__ring { display: none; }
}

/* Ecosystem — grouped foundation: arcs, legend, tinted nodes */
.mud-hero-opt[data-opt="b"] { display: flex; flex-direction: column; gap: 14px; }
.mud-eco__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; animation: mud-rise .8s var(--ease) .15s both; }
.mud-eco__legend span { display: inline-flex; align-items: center; gap: 8px; font: 700 10.5px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.mud-eco__legend i { width: 18px; height: 4px; }
.mud-eco__legend .is-found i, .mud-eco__arc--found { background: var(--accent-light); stroke: var(--accent-light); }
.mud-eco__legend .is-grow i, .mud-eco__arc--grow { background: var(--accent-pale); stroke: var(--accent-pale); }
.mud-eco__legend .is-run i, .mud-eco__arc--run { background: var(--ink-400); stroke: var(--ink-400); }

.mud-eco__arc { fill: none; stroke-width: 4; vector-effect: non-scaling-stroke; opacity: 0; animation: mud-fade .9s ease .5s forwards; }
.mud-eco__line--found { stroke: color-mix(in oklab, var(--accent-light) 55%, var(--ink-500)); }
.mud-eco__line--grow { stroke: color-mix(in oklab, var(--accent-pale) 45%, var(--ink-500)); }

.mud-eco__node { border-left-width: 3px; }
.mud-eco__node.is-found { border-left-color: var(--accent-light); color: var(--accent-light); }
.mud-eco__node.is-grow { border-left-color: var(--accent-pale); color: var(--accent-pale); }
.mud-eco__node.is-run { border-left-color: var(--ink-400); color: var(--on-dark-3); }
.mud-eco__node:hover { color: var(--white); }

.mud-eco__core { align-items: flex-start; }
.mud-eco__core .mud-label { font-size: 9.5px; line-height: 1.3; }
.mud-eco__core b { font-size: clamp(20px, 2.4vw, 30px); }

@media (prefers-reduced-motion: reduce) { .mud-eco__arc, .mud-eco__legend { animation: none; opacity: 1; } }

/* Ecosystem ring — thicker, drawn in, with a travelling sweep */
.mud-eco__track { fill: none; stroke: var(--ink-700); stroke-width: 12; vector-effect: non-scaling-stroke; opacity: .6; }
.mud-eco__arc { stroke-width: 9; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 55%, transparent)); animation: mud-fade .5s ease .4s forwards, mud-arc-breathe 4s ease-in-out 1.6s infinite; }
.mud-eco__arc--grow { animation-delay: .7s, 2.2s; }
.mud-eco__arc--run { animation-delay: 1s, 2.8s; }
.mud-eco__sweep { fill: none; stroke: var(--white); stroke-width: 9; vector-effect: non-scaling-stroke; stroke-linecap: butt; opacity: 0; filter: drop-shadow(0 0 8px var(--white)); animation: mud-sweep 6s linear 1.4s infinite; }
@keyframes mud-arc-breathe { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
@keyframes mud-sweep { 0% { stroke-dashoffset: 0; opacity: 0; } 8% { opacity: .55; } 92% { opacity: .55; } 100% { stroke-dashoffset: -360; opacity: 0; } }
.mud-eco__core .mud-label { font-size: 9.5px; letter-spacing: .14em; }
.mud-eco__core b { font-size: clamp(15px, 1.7vw, 22px); line-height: 1.08; overflow-wrap: anywhere; }
.mud-eco__core { padding: clamp(10px, 1.4vw, 16px); overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mud-eco__sweep { display: none; } .mud-eco__arc { animation: none; opacity: .9; } }

/* Ecosystem — small screens: keep nodes inside the frame, badge below the ring */
@media (max-width: 575.98px) {
  .mud-eco { margin-bottom: 64px; }
  .mud-eco__core b { font-size: clamp(12px, 3.8vw, 15px); overflow-wrap: normal; word-break: normal; }
  .mud-eco__node span { font-size: 10.5px; }
  /* Pull the outermost pair in so the labels stay inside the frame. With seven
     nodes the extremes are 6 (left, 13%) and 3 (right, 87%). */
  .mud-eco__node--6 { left: 17%; }
  .mud-eco__node--3 { left: 83%; }
  .mud-eco__badge { right: 0; left: 0; bottom: -64px; width: max-content; max-width: 100%; margin-inline: auto; }
}

/* Keep the badge clear of the floating WhatsApp button */
@media (min-width: 576px) {
  .mud-eco__badge { right: 72px; }
}

/* Tap targets */
.mud-more, .mud-worktab { display: inline-flex; align-items: center; min-height: 44px; }

/* 21m. Homepage audit teaser, section links, pre-footer pattern ========== */

.mud-hm-audit__lead { margin: 18px 0 0; max-width: 44ch; font: 400 clamp(15px, 1.4vw, 17px)/1.6 var(--font-body); color: var(--on-dark-3); }
.mud-check .mud-da-free > span:last-child { color: var(--white); }

.mud-hm-audit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.mud-hm-audit__tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2vw, 26px);
  background: color-mix(in oklab, var(--ink-800) 85%, transparent);
  border: var(--hairline) solid var(--ink-600);
  color: var(--on-dark-3);
  box-shadow: 0 20px 40px -28px var(--ink-900);
  transition: transform .2s var(--ease), background-color .2s ease, border-color .2s ease;
}

.mud-hm-audit__tile:hover { transform: translateY(-4px); background: var(--ink-700); color: var(--on-dark-2); }
.mud-hm-audit__icon { display: grid; place-items: center; width: 46px; height: 46px; background: var(--ink-700); color: var(--accent-pale); transition: background-color .2s ease, color .2s ease; }
.mud-hm-audit__tile:hover .mud-hm-audit__icon { background: var(--accent); color: var(--white); }
.mud-hm-audit__tile b { margin-top: 6px; font: 800 clamp(30px, 3.2vw, 44px)/1 var(--font-heading); letter-spacing: -.04em; color: var(--white); }
.mud-hm-audit__tile > span:last-child { font: 400 14px/1.5 var(--font-body); }
.mud-hm-audit__tile.is-hot { background: var(--accent); border-color: var(--accent); color: var(--accent-tint); }
.mud-hm-audit__tile.is-hot .mud-hm-audit__icon { background: var(--white); color: var(--accent-deep); }
.mud-hm-audit__tile.is-hot:hover { background: var(--accent-light); border-color: var(--accent); }

.mud-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mud-more { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 4px; border-bottom: var(--rule) solid var(--accent); font: 700 13px/1 var(--font-heading); color: var(--accent-deep); transition: gap .2s var(--ease), color .2s ease; }
.mud-more:hover { gap: 10px; color: var(--accent); }
.mud-more--dark { color: var(--white); border-bottom-color: var(--accent-light); }
.mud-more--dark:hover { color: var(--accent-pale); }


@media (max-width: 575.98px) { .mud-hm-audit__grid { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .mud-hm-audit__tile, .mud-more { transition: none; }
  .mud-hm-audit__tile:hover { transform: none; }
}

/* Homepage — contact band: inner-page hero patterns on the rose ground */
.mud-contact { position: relative; isolation: isolate; overflow: hidden; background: var(--accent); }
.mud-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in oklab, var(--white) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--white) 16%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 75% 35%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 85% at 75% 35%, #000 15%, transparent 78%);
}
.mud-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in oklab, var(--accent-light) 80%, transparent) 0, transparent 38%),
    radial-gradient(circle at 55% 115%, color-mix(in oklab, var(--ink-700) 70%, transparent) 0, transparent 50%),
    radial-gradient(circle at 0% 20%, color-mix(in oklab, var(--accent-deep) 60%, transparent) 0, transparent 35%);
}
.mud-contact__fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mud-contact__fx i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; }
.mud-contact__fx i:nth-child(1) { width: 420px; height: 420px; right: -100px; bottom: -140px; background: var(--ink-400); animation: mud-drift-a 20s ease-in-out infinite alternate; }
.mud-contact__fx i:nth-child(2) { width: 360px; height: 360px; left: 30%; top: -180px; background: var(--accent-pale); opacity: .3; animation: mud-drift-b 24s ease-in-out infinite alternate; }
.mud-contact > .mud-page-hero__arcs { z-index: 0; }
@media (prefers-reduced-motion: reduce) { .mud-contact__fx i { animation: none; } }


/* Hero backgrounds are static — the glow and the colour orbs no longer drift. */
.mud-page-hero::after,
.mud-hero::after { animation: none; }
.mud-hero__orbs i:nth-child(n) { animation: none; }

/* Footer tap targets on touch widths */
@media (max-width: 759.98px) {
  .mud-footer__nav { display: flex; flex-direction: column; }
  .mud-footer__nav br { display: none; }
  .mud-footer__nav a,
  .mud-footer__contact a,
  .mud-social a { display: inline-flex; align-items: center; min-height: 44px; }
  .mud-social a { min-width: 44px; justify-content: center; }
  .mud-mobilebar a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* 22. Print =============================================================== */

@media print {
  .mud-header,
  .mud-menu,
  .mud-mobilebar,
  .mud-fab,
  .mud-cursor,
  .mud-tabs,
  .skip-link {
    display: none !important;
  }

  .mud-hero__visual {
    animation: none !important;
  }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  .is-dark,
  .mud-contact,
  .mud-footer,
  .mud-cell,
  .mud-step,
  .mud-answer,
  .mud-contact-form {
    background: #fff !important;
    color: #000 !important;
  }

  .mud-tabpanel[hidden] {
    display: block !important;
  }

  /* Sections the reader never scrolled past are still opacity:0 — they must
     not print blank. */
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
  }
}