/* ==========================================================================
   MindMonks — Reset, typography, and the flex-first layout system
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the fixed header when jumping to anchors */
  scroll-padding-top: calc(var(--mm-header-height) + var(--mm-space-md));
}

body {
  margin: 0;
  background-color: var(--mm-background);
  color: var(--mm-text-primary);
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-base);
  line-height: var(--mm-leading-normal);
  font-weight: var(--mm-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Belt-and-braces against accidental sideways scroll on any page */
  overflow-x: hidden;
}

/* Global overflow guards — long words, emails, URLs, qualification strings */
body,
p,
li,
dd,
dt,
figcaption,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
a,
td,
th,
label,
button {
  overflow-wrap: break-word;
  word-break: normal;
}

img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100%;
}

/* `hidden` must win over any component display rule — the pricing region
   switch and the form notices both rely on it. */
[hidden] {
  display: none !important;
}

img,
video {
  height: auto;
}

svg {
  height: auto;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Flex/grid children must be allowed to shrink below their content width */
.mm-flex > *,
.mm-grid > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--mm-space-sm);
  font-family: var(--mm-font-heading);
  font-weight: var(--mm-weight-semibold);
  line-height: var(--mm-leading-tight);
  letter-spacing: var(--mm-tracking-tight);
  color: var(--mm-teal-900);
  font-variation-settings: "SOFT" 30, "WONK" 0;
}

h1 {
  font-size: var(--mm-text-4xl);
}
h2 {
  font-size: var(--mm-text-3xl);
}
h3 {
  font-size: var(--mm-text-xl);
  line-height: var(--mm-leading-snug);
}
h4 {
  font-size: var(--mm-text-lg);
  line-height: var(--mm-leading-snug);
}
h5,
h6 {
  font-size: var(--mm-text-md);
  font-family: var(--mm-font-body);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: var(--mm-tracking-normal);
}

p {
  margin: 0 0 var(--mm-space-sm);
}

p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

a {
  color: var(--mm-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--mm-duration-fast) var(--mm-ease-soft);
}

a:hover {
  color: var(--mm-link-hover);
}

strong,
b {
  font-weight: var(--mm-weight-semibold);
}

small {
  font-size: var(--mm-text-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--mm-border);
  margin: var(--mm-space-lg) 0;
}

blockquote {
  margin: var(--mm-space-md) 0;
  padding: var(--mm-space-md) var(--mm-space-md) var(--mm-space-md)
    calc(var(--mm-space-md) + 4px);
  border-left: 4px solid var(--mm-olive-300);
  background: var(--mm-surface-olive);
  border-radius: 0 var(--mm-radius-md) var(--mm-radius-md) 0;
  font-size: var(--mm-text-md);
  color: var(--mm-teal-800);
}

blockquote cite {
  display: block;
  margin-top: var(--mm-space-2xs);
  font-size: var(--mm-text-sm);
  font-style: normal;
  color: var(--mm-text-secondary);
}

code,
pre,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

code {
  background: var(--mm-neutral-100);
  padding: 0.15em 0.4em;
  border-radius: var(--mm-radius-xs);
}

pre {
  background: var(--mm-teal-900);
  color: var(--mm-code-text);
  padding: var(--mm-space-sm);
  border-radius: var(--mm-radius-md);
  overflow-x: auto;
  max-width: 100%;
}

ul,
ol {
  margin: 0 0 var(--mm-space-sm);
  padding-left: 1.35em;
}

li + li {
  margin-top: var(--mm-space-3xs);
}

/* --------------------------------------------------------------------------
   Layout primitives — flex is the default container behaviour
   -------------------------------------------------------------------------- */

/* Outer section wrapper */
.mm-section {
  position: relative;
  padding-block: var(--mm-section-y);
  padding-inline: 0;
}

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

.mm-section--flush-top {
  padding-top: 0;
}

.mm-section--flush-bottom {
  padding-bottom: 0;
}

.mm-section--muted {
  background: var(--mm-surface-muted);
}

.mm-section--olive {
  background: var(--mm-surface-olive);
}

.mm-section--paper {
  background: var(--mm-background-alt);
}

.mm-section--inverse {
  background: var(--mm-surface-inverse);
  color: var(--mm-text-on-dark);
}

.mm-section--inverse h1,
.mm-section--inverse h2,
.mm-section--inverse h3,
.mm-section--inverse h4 {
  color: var(--mm-white);
}

.mm-section--inverse p {
  color: var(--mm-text-on-dark-muted);
}

/* Centred content container — fluid with a gutter that never crushes 320px */
.mm-container {
  width: min(100% - (var(--mm-gutter) * 2), var(--mm-container));
  margin-inline: auto;
  padding-inline: max(0px, var(--mm-safe-left)) max(0px, var(--mm-safe-right));
}

.mm-container--wide {
  width: min(100% - (var(--mm-gutter) * 2), var(--mm-container-wide));
}

.mm-container--narrow {
  width: min(100% - (var(--mm-gutter) * 2), var(--mm-container-narrow));
}

.mm-container--text {
  width: min(100% - (var(--mm-gutter) * 2), var(--mm-container-text));
}

/* Flex helpers */
.mm-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-md);
}

.mm-flex--nowrap {
  flex-wrap: nowrap;
}

.mm-flex--column {
  flex-direction: column;
}

.mm-flex--between {
  justify-content: space-between;
}

.mm-flex--center {
  justify-content: center;
}

.mm-flex--align-center {
  align-items: center;
}

.mm-flex--align-start {
  align-items: flex-start;
}

.mm-flex--gap-sm {
  gap: var(--mm-space-sm);
}

.mm-flex--gap-lg {
  gap: var(--mm-space-lg);
}

.mm-flex--gap-xl {
  gap: var(--mm-space-xl);
}

/* Vertical stack with a consistent rhythm */
.mm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
}

.mm-stack--xs {
  gap: var(--mm-space-2xs);
}
.mm-stack--md {
  gap: var(--mm-space-md);
}
.mm-stack--lg {
  gap: var(--mm-space-lg);
}
.mm-stack--xl {
  gap: var(--mm-space-xl);
}

/* Horizontal cluster that wraps gracefully */
.mm-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-space-sm);
}

.mm-cluster--tight {
  gap: var(--mm-space-2xs);
}

/* Two-column editorial split — collapses at the point the content needs it,
   not at an arbitrary framework breakpoint. */
.mm-split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-xl);
  align-items: center;
}

.mm-split > * {
  flex: 1 1 min(100%, 26rem);
  min-width: 0;
}

.mm-split--top {
  align-items: flex-start;
}

.mm-split--reverse > *:first-child {
  order: 2;
}

@media (max-width: 60rem) {
  .mm-split--reverse > *:first-child {
    order: 0;
  }
}

/* Auto-fitting card grid — the one place CSS Grid genuinely earns its keep */
.mm-grid {
  display: grid;
  gap: var(--mm-space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mm-card-min, 17rem)), 1fr));
}

.mm-grid--2 {
  --mm-card-min: 22rem;
}
.mm-grid--3 {
  --mm-card-min: 19rem;
}
.mm-grid--4 {
  --mm-card-min: 15.5rem;
}
.mm-grid--compact {
  --mm-card-min: 13rem;
  gap: var(--mm-space-sm);
}

/* Cap service cards at 4 columns even on 2560px screens so they never
   stretch into thin unreadable strips. */
@media (min-width: 100rem) {
  .mm-grid--cap-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .mm-grid--cap-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Readable measure for long-form text */
.mm-prose {
  max-width: var(--mm-measure);
}

.mm-prose--narrow {
  max-width: var(--mm-measure-narrow);
}

.mm-prose > * + * {
  margin-top: var(--mm-space-sm);
}

/* --------------------------------------------------------------------------
   Flow utilities

   A deliberately tiny set. They exist so that no template ever needs an inline
   style: spacing between blocks still comes from the same scale as everything
   else, and it stays greppable.
   -------------------------------------------------------------------------- */

.mm-flush {
  margin: 0;
}

.mm-flow-top-2xs {
  margin-top: var(--mm-space-2xs);
}

.mm-flow-top-sm {
  margin-top: var(--mm-space-sm);
}

.mm-flow-top-md {
  margin-top: var(--mm-space-md);
}

.mm-flow-top-lg {
  margin-top: var(--mm-space-lg);
}

.mm-flow-bottom-md {
  margin: 0 0 var(--mm-space-md);
}

.mm-flow-bottom-lg {
  margin: 0 0 var(--mm-space-lg);
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

.mm-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;
}

.mm-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--mm-z-toast);
  transform: translateY(-120%);
  background: var(--mm-primary);
  color: var(--mm-on-primary);
  padding: var(--mm-space-2xs) var(--mm-space-sm);
  border-radius: 0 0 var(--mm-radius-sm) 0;
  text-decoration: none;
  transition: transform var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--mm-on-primary);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mm-teal-600);
  outline-offset: 2px;
  border-radius: var(--mm-radius-xs);
}

/* --------------------------------------------------------------------------
   Motion language — calm reveals, honoured only when motion is welcome
   -------------------------------------------------------------------------- */

.mm-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--mm-duration-reveal) var(--mm-ease-calm),
    transform var(--mm-duration-reveal) var(--mm-ease-calm);
  transition-delay: var(--mm-reveal-delay, 0ms);
}

.mm-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* If JS never runs, nothing stays invisible */
.no-js .mm-reveal {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .mm-reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .mm-site-header,
  .mm-sticky-cta,
  .mm-site-footer__newsletter,
  .mm-nav-toggle {
    display: none !important;
  }

  body {
    background: var(--mm-white);
    color: var(--mm-black);
  }
}

/* --------------------------------------------------------------------------
   Inline icons

   An <svg> inside a flex row is a flex item like any other, and with no
   flex-basis it shrinks — which is how the icons beside long lines of text
   ended up as squashed slivers. Pinning the box and forbidding the shrink
   fixes it everywhere at once, rather than per component.
   -------------------------------------------------------------------------- */

.mm-icon {
  flex: none;
  display: block;
  overflow: visible;
}

/* Icons that lead a line of text sit on that line's optical centre rather than
   floating at the top of a wrapped paragraph. */
.mm-aside-card li > .mm-icon,
.mm-note > .mm-icon,
.mm-checklist li > .mm-icon {
  margin-top: 0.15em;
}