/* ==========================================================
   Mountics site styles
   Brand colours, fonts, shared components and states.
   Shared parts of the pages (header, footer, buttons, headings,
   cards, lists, forms) are named classes below. One-off
   decorative pieces, such as the small mock dashboards and
   illustrations, still carry their own inline styles.
   ========================================================== */

:root {
  --accent: #14955A;        /* logo green */
  --accent-dark: #0E7A48;   /* hover, text on white, CTA cards */
  --tint: #EAF5EF;          /* light green panels */
  --ink: #0B0B0B;           /* main text */
  --muted: #5B6560;         /* secondary text */
  --soft: #3F4A44;          /* list and footer link text */
  --line: #E6EAE7;          /* borders */
  --surface: #F7F8F7;       /* grey section backgrounds */
  --font: 'Poppins', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-dark); }

/* Page chrome */
.announce { display: block; background: var(--accent-dark); color: #FFFFFF; text-align: center; padding: 10px 16px; font-size: 13px; font-weight: 500; }
.underline { text-decoration: underline; }
.announce:hover { color: #FFFFFF; }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; }
.section-pad { padding: 6rem 2rem; }
/* Sections set their own top and bottom space with --pt and --pb; phones get 60% of it */
.section-space { padding: var(--pt, 0rem) 2rem var(--pb, 0rem); }
.split { display: flex; flex-wrap: wrap; gap: 4rem; align-items: center; }
.bg-surface { background: var(--surface); }

/* Header and main navigation */
.site-header { padding: 18px 2rem 0; }
.nav-bar {
  position: relative;
  max-width: 1200px; margin: 0 auto; height: 68px; padding: 0 12px 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: #FFFFFF; border: 1px solid #ECEEEC; border-radius: 14px;
}
.logo { font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.logo:hover { color: var(--ink); }
.nav-links { display: flex; gap: 32px; font-size: 14px; font-weight: 500; }
.navl:hover { color: var(--accent-dark); }
.navl.is-current { color: var(--accent-dark); font-weight: 600; }
.menu-btn, .nav-mobile-only { display: none; }

/* Services dropdown (header.njk). Desktop: opens on hover, keyboard focus or the arrow button.
   The panel's top padding bridges the gap under the link so the pointer can travel into it. */
.nav-drop { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-drop-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer;
}
.nav-drop-btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.nav-drop-btn:hover,
.navl.is-current + .nav-drop-btn { color: var(--accent-dark); }
.nav-menu-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--tint); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-menu-icon svg { width: 18px; height: 18px; }
.nav-menu-item:hover .nav-menu-icon { background: var(--accent); color: #FFFFFF; }
.nav-menu-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.nav-menu-text { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--muted); }
@media (min-width: 901px) {
  .nav-menu {
    position: absolute; top: 100%; left: 50%; z-index: 60; padding-top: 30px; transform: translateX(-50%);
    opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }
  .nav-drop:hover .nav-menu,
  .nav-drop:focus-within .nav-menu,
  .nav-drop.is-open .nav-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav-drop.is-suppressed .nav-menu { opacity: 0; visibility: hidden; }
  .nav-drop:hover .nav-drop-btn svg,
  .nav-drop:focus-within .nav-drop-btn svg,
  .nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
  .nav-drop.is-suppressed .nav-drop-btn svg { transform: none; }
  .nav-menu-panel { width: 580px; padding: 10px; background: #FFFFFF; border: 1px solid #E6EAE7; border-radius: 16px; }
  .nav-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .nav-menu-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; transition: background-color 0.2s ease; }
  .nav-menu-item:hover { background: #F5F8F6; }
  .nav-menu-all {
    display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 14px 12px 6px;
    border-top: 1px solid #EEF0EE; font-size: 13px; font-weight: 600; color: var(--accent-dark);
  }
}

/* Desktop: the header stays at the top while the page scrolls.
   scroll-padding-top stops in-page links (#cta, #results, #form) landing under it. */
@media (min-width: 901px) {
  html { scroll-padding-top: 104px; }
  .site-header { position: sticky; top: 0; z-index: 40; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; border-radius: 10px; font-weight: 600; justify-content: center; border: 0; font-family: var(--font); cursor: pointer; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn-md { min-height: 48px; padding: 0 20px; font-size: 14px; }
.btn-lg { min-height: 50px; padding: 0 22px; font-size: 15px; }
.btn-xl { min-height: 52px; padding: 0 24px; font-size: 15px; }
.btn-g { background: var(--accent); color: #FFFFFF; }
.btn-o { border: 1px solid #D9DDDA; background: #FFFFFF; }
.btn-w { background: #FFFFFF; color: var(--ink); }
.btn-g:hover { background: var(--accent-dark) !important; color: #FFFFFF !important; }  /* green */
.btn-o:hover { background: #F3F5F3 !important; color: var(--ink) !important; }          /* outline */
.btn-w:hover { background: var(--tint) !important; color: var(--ink) !important; }      /* white on green */

/* Headings and text */
.h-hero { margin: 1.25rem 0 0; font-weight: 600; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.1; letter-spacing: -0.03em; }
.h-page { margin: 0; font-weight: 600; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.1; letter-spacing: -0.03em; }
.h-article-title { margin: 1.25rem 0 0; max-width: 900px; font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.15; letter-spacing: -0.03em; }
.h-section { margin: 1rem 0 0; font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: -0.025em; }
.h-feature { margin: 0.75rem 0 0; font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -0.025em; }
.h-cta { margin: 0; font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.15; letter-spacing: -0.025em; }
.h-band { margin: 0; font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.2; letter-spacing: -0.025em; }
.h-case { margin: 0; font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.25; letter-spacing: -0.02em; }
.h-article { margin: 2.75rem 0 0; font-weight: 600; font-size: 28px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.h-legal { margin: 2.25rem 0 0; font-weight: 600; font-size: 22px; color: var(--ink); }
.h-card-lg { margin: 0; font-weight: 600; font-size: 21px; }
.h-card { margin: 0; font-weight: 600; font-size: 19px; }
.h-step { margin: 0; font-weight: 600; font-size: 18px; }
.post-title { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.4; }
.section-intro { margin: 1rem 0 0; max-width: 560px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.body-text { margin: 1.25rem 0 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
.lead { font-size: 17px; line-height: 1.7; color: var(--muted); }
.eyebrow-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--accent-dark); }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--accent-dark); }
.eyebrow-light { font-size: 13px; font-weight: 600; color: #7CC9A2; }
.list-label { margin-top: 1.75rem; font-size: 14px; font-weight: 600; }

/* Cards */
.card-link { background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.icon-tile { width: 48px; height: 48px; border-radius: 12px; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; }
.card-title { font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.more-link { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 14px; color: var(--accent-dark); }
.bento { border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; background: #FFFFFF; }
.bento-copy { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bento-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 460px; }
.quote-card { margin: 0; background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 1.5rem; }
.quote { margin: 0; font-size: 15px; line-height: 1.75; flex-grow: 1; }
.quote-by { display: flex; align-items: center; gap: 12px; padding-top: 1.25rem; border-top: 1px solid #EEF0EE; }
.avatar { width: 40px; height: 40px; border-radius: 999px; background: #DDE8E1; flex-shrink: 0; }
img.avatar { object-fit: cover; }  /* a real photo in place of the grey circle */
.person-name { display: block; font-weight: 600; font-size: 14px; }
.person-role { display: block; font-size: 13px; color: var(--muted); }
.step-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--accent); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.card { border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.card-dark { border: 1px solid #2A2E2C; border-radius: 18px; padding: 28px; }
.text-on-dark { font-size: 14px; line-height: 1.75; color: #C9CFCB; }
.card-link:hover { color: var(--ink); }
.jump:hover { border-color: var(--accent) !important; }

/* Card hover titles */
.post:hover h3,
.feat:hover h2,
.case:hover h2 { color: var(--accent-dark); }

/* Lists */
.checklist { margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 24px; font-size: 14px; color: var(--soft); }
.ticks { margin: 1.75rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.tick-item { display: flex; align-items: center; gap: 10px; }
.tick-item svg { flex-shrink: 0; }
.check-item { display: flex; gap: 10px; }
.check-icon { flex-shrink: 0; margin-top: 2px; }

/* FAQ (details/summary) */
.faq { flex: 1.6 1 520px; min-width: 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-q { display: flex; justify-content: space-between; gap: 16px; font-size: 17px; font-weight: 600; }
.faq-a { margin: 12px 0 0; font-size: 15px; line-height: 1.75; color: var(--muted); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Call to action */
.cta-card { border-radius: 24px; background: var(--accent-dark); color: #FFFFFF; overflow: hidden; display: flex; flex-wrap: wrap; align-items: stretch; }
.cta-copy { flex: 1.3 1 460px; min-width: 0; padding: 3.5rem; }
.cta-image { flex: 1 1 340px; min-height: 320px; background: #1E9A62; position: relative; display: flex; align-items: center; justify-content: center; }
.cta-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band { border-radius: 24px; background: var(--accent-dark); color: #FFFFFF; padding: 3.5rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.band-text { margin: 0.75rem 0 0; font-size: 15px; line-height: 1.7; color: #E3F2EA; }

/* Image and logo placeholders */
.ph-label { position: absolute; left: 1.5rem; bottom: 1.5rem; font-size: 12px; font-weight: 500; color: var(--muted); }
/* Client logos. Still: one centred row that wraps. With motion allowed it becomes a strip that
   scrolls forever (see Motion); the second set is the copy that makes the loop seamless. */
.logo-track { display: flex; justify-content: center; }
.logo-set { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px var(--logo-gap, 56px); }
.logo-set[aria-hidden="true"] { display: none; }

/* Testimonials: three across where they fit; on phones a sideways-scrolling row (below) */
.quote-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
[data-quote-nav]:hover { border-color: var(--accent) !important; }
[data-quote-nav]:disabled { opacity: 0.35; cursor: default !important; }
[data-quote-nav]:disabled:hover { border-color: #D9DDDA !important; }
[data-quote-nav][hidden] { display: none !important; }
.client-logo img { display: block; max-width: 100%; height: auto; }
.client-logo { height: 72px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: #6B746F; }

/* Blog and case study cards */
.post-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.post-thumb { aspect-ratio: 16 / 9; background: #E4EBE6; }
.post-thumb-alt { background: #DDE8E1; }
.post-thumb { display: block; overflow: hidden; }
.post-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.post-excerpt { font-size: 14px; line-height: 1.65; color: var(--muted); }
.post-meta { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--muted); }
.post-cat { font-size: 12px; font-weight: 600; color: var(--accent-dark); }
.media-card { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.media-body { flex: 1.1 1 440px; min-width: 0; padding: 2.75rem; display: flex; flex-direction: column; gap: 14px; }
.case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; padding-top: 18px; border-top: 1px solid #EEF0EE; }
.stat-num { display: block; font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }

/* Blog filter tabs */
.tablist { display: flex; flex-wrap: wrap; gap: 28px; border-bottom: 1px solid var(--line); }
.tab {
  min-height: 48px; padding: 0; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted); font-family: var(--font); font-size: 15px; font-weight: 500; cursor: pointer;
}
.tab:hover { color: var(--accent-dark); }
.tab.is-active { border-bottom-color: var(--accent); color: var(--accent-dark); font-weight: 600; }
.post[hidden] { display: none !important; }

/* Stats */
.stat { border-left: 2px solid var(--accent); padding: 0.25rem 0 0.25rem 1.5rem; }
.stat-value { font-weight: 600; font-size: 40px; letter-spacing: -0.03em; line-height: 1.1; }
.stat-label { margin-top: 6px; font-size: 14px; color: var(--muted); }
.result-tile { background: var(--tint); border-radius: 18px; padding: 1.75rem; }
.result-value { font-weight: 600; font-size: 40px; letter-spacing: -0.03em; color: var(--accent-dark); }
.result-label { margin-top: 4px; font-size: 14px; color: var(--soft); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
/* Note shown under a form while forms aren't connected (js/main.js) */
.form-note { flex-basis: 100%; grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; font-weight: 500; line-height: 1.6; }
.input { height: 48px; padding: 0 14px; border: 1px solid #D9DDDA; border-radius: 10px; background: #FFFFFF; font-family: var(--font); font-size: 15px; }
.contact-row { display: flex; gap: 14px; align-items: center; }
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent) !important;
}
#nl-email:focus { outline-color: #FFFFFF; outline-offset: 2px; }  /* newsletter sits on green */

/* Articles and legal pages */
.breadcrumb { font-size: 13px; color: var(--muted); display: flex; gap: 8px; }
.callout { border-left: 3px solid var(--accent); background: #F3F8F5; border-radius: 0 14px 14px 0; }
.legal-body { flex: 1 1 560px; min-width: 0; max-width: 760px; font-size: 16px; line-height: 1.85; color: #2B322E; }
.legal-p { margin: 0.75rem 0 0; }
.toc { border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem; }
.toc-side { flex: 0 1 260px; min-width: 220px; }
.toc-title { font-size: 14px; font-weight: 600; }
.toc-list { margin: 1rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.share-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.toc a:hover { color: var(--accent-dark); }

/* Footer */
.site-footer { border-top: 1px solid #EEF0EE; overflow: hidden; }
.footer-inner { padding: 4rem 2rem 0; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 3rem; padding-bottom: 3rem; }
.footer-brand { flex: 2 1 320px; min-width: 0; }
.footer-blurb { margin: 1.25rem 0 0; max-width: 360px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.footer-nav { flex: 1 1 180px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-heading { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.footer-nav a { color: var(--soft); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 0; border-top: 1px solid #EEF0EE; font-size: 13px; color: var(--muted);
}
.footer-solo { padding: 1.5rem 2rem; border-top: 0; }  /* 404 page: bottom row only */
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: var(--muted); }
.footer-nav a:hover,
.footer-legal a:hover,
.site-footer a.is-current { color: var(--accent-dark); }
.site-footer a.is-current { font-weight: 600; }
.footer-wordmark {
  font-weight: 700; font-size: clamp(5rem, 18vw, 16rem); line-height: 0.8; letter-spacing: -0.05em;
  color: #EEF2EF; text-align: center; margin-bottom: -0.12em;
}

/* Utilities (keep last so they win over component defaults) */
.text-sm { font-size: 14px; line-height: 1.7; color: var(--muted); }
.meta { font-size: 13px; color: var(--muted); }
.accent { color: var(--accent); }
.link-accent { color: var(--accent-dark); font-weight: 600; }
.accent-dark { color: var(--accent-dark); }
.muted { color: var(--muted); }
.soft { color: var(--soft); }
.bg-white { background: #FFFFFF; }
.stack { display: flex; flex-direction: column; }
.m-0 { margin: 0; }

/* Small screens: nav links move into a menu opened by .menu-btn (js/main.js) */
@media (max-width: 900px) {
  .nav-bar { gap: 12px; }
  .nav-cta { margin-left: auto; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; flex-shrink: 0;
    border: 1px solid #D9DDDA; border-radius: 10px; background: #FFFFFF; color: var(--ink); cursor: pointer;
  }
  .menu-btn:hover { background: #F3F5F3; }
  .menu-btn .i-close,
  .menu-btn[aria-expanded="true"] .i-open { display: none; }
  .menu-btn[aria-expanded="true"] .i-close { display: inline; }
  .nav-links {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
    flex-direction: column; gap: 2px; padding: 8px;
    background: #FFFFFF; border: 1px solid #ECEEEC; border-radius: 14px; font-size: 15px;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 10px; }
  .nav-links a:hover { background: var(--tint); }
  .nav-links .nav-mobile-only { display: none; color: var(--accent-dark); font-weight: 600; }
  /* Services in the phone menu: the arrow expands the six services under it */
  .nav-drop { flex-wrap: wrap; gap: 0; }
  .nav-drop > .navl { flex: 1; }
  .nav-drop-btn { width: 48px; height: 48px; border-radius: 10px; }
  .nav-drop-btn:hover { background: var(--tint); }
  .nav-drop-btn svg { width: 18px; height: 18px; }
  .nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
  .nav-menu { display: none; flex-basis: 100%; }
  .nav-drop.is-open .nav-menu { display: block; }
  .nav-menu-grid { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; }
  .nav-links .nav-menu-item { gap: 12px; min-height: 44px; font-size: 14px; }
  .nav-menu-icon { width: 28px; height: 28px; border-radius: 8px; }
  .nav-menu-icon svg { width: 15px; height: 15px; }
  .nav-menu-name { font-weight: 500; }
  .nav-menu-text, .nav-menu-all { display: none !important; }
}
@media (max-width: 560px) {
  .nav-cta { display: none; }
  .menu-btn { margin-left: auto; }
  .nav-links .nav-mobile-only { display: flex; }
}

/* Phones: less outer space so the content gets the width.
   !important is only used where a page still sets that padding inline. */
@media (max-width: 560px) {
  /* Headings scale with the screen so they keep to two or three lines on small phones */
  .h-hero { font-size: clamp(1.9rem, 9.6vw, 2.6rem); }
  .h-section,
  .h-feature { font-size: clamp(1.6rem, 7.6vw, 2rem); }
  .h-cta { font-size: clamp(1.6rem, 7.4vw, 1.9rem); }
  .h-home { font-size: clamp(1.7rem, 8.6vw, 2.4rem) !important; }  /* home h1 sets its size inline */
  .site-header { padding: 12px 1.25rem 0; }
  .nav-bar { padding: 0 10px 0 18px; }
  .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .section-pad { padding-top: 3.6rem; padding-bottom: 3.6rem; }
  .section-space { padding-top: calc(var(--pt, 0rem) * 0.6); padding-bottom: calc(var(--pb, 0rem) * 0.6); }
  .split { gap: 2.5rem; }
  .card, .card-link, .bento, .quote-card, .card-dark { padding: 22px; }
  .cta-copy, .cta-band { padding: 2.25rem 1.5rem; }
  .media-body { padding: 1.75rem 1.5rem; }
  #form { padding: 1.5rem !important; }
  .case-stats { gap: 10px; }
  .stat-num { font-size: 22px; }
  .footer-inner { padding-top: 3rem; }
  .footer-cols { gap: 2rem; }
  .footer-wordmark { font-size: 18vw; }
  .logo-set { --logo-gap: 36px; }
  /* Testimonials: swipe sideways, one card at a time, the next card peeking in at the edge */
  .quote-track {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -1.25rem; padding: 0 1.25rem 4px; scroll-padding: 0 1.25rem; scrollbar-width: none;
  }
  .quote-track::-webkit-scrollbar { display: none; }
  .quote-track > * { flex: 0 0 86%; scroll-snap-align: start; }
  /* Hero pictures: pull in so the floating badges stay on screen */
  .hero-visual { margin: 0 7% 2.5rem; }
  /* Home hero diagram: full width (it has nothing hanging over its edges) */
  .hero-visual-home { margin: 0; }
  /* Image blocks in cards: shorter, and the text beside them gets less padding */
  .feat > [role="img"], .case > [role="img"] { min-height: 200px !important; }
  .feat > span:last-child { padding: 1.75rem 1.5rem !important; }
  .cta-image { min-height: 200px; padding: 2rem 0; }  /* keeps the "Your free audit" box off the green edges */
  .toc-side { flex-basis: 100%; }
  /* Integrations diagram: smaller chips so the outer ring fits the screen */
  .orbit-chip { font-size: 11px !important; padding: 5px 9px !important; }
  .orbit-logo { font-size: 15px !important; }
}

/* ==========================================================
   Motion
   Small interactions so the pages don't feel static.
   - Hover and press feedback only on things you can click.
   - Anything that moves is inside prefers-reduced-motion:
     no-preference, so people who turn motion off get a still page.
   - "Hidden until revealed" states only apply while <html> has
     .motion (added in the <head>, confirmed by js/main.js), so
     content never stays hidden if the script fails.
   Hooks: data-intro (plays on load), data-reveal and
   data-reveal-group (play when scrolled into view), and inside a
   revealed block: data-seq, .bar-x, .draw (ordered with --s).
   ========================================================== */

:root { --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Integrations diagram: each ring and its chips share a layer that can turn around the logo */
.orbit-group { position: absolute; inset: 0; }
/* The turning layers are squares; at 45° their (empty) corners would widen the page */
.orbit-section { overflow-x: hidden; overflow-x: clip; }

/* Hero diagram (index.html): services feed the business, the business makes sales.
   The SVG lines and the boxes share one 500 × 540 grid, so the whole thing scales as one
   piece; text sizes follow its width (cqi) within readable limits. */
.flow { position: relative; aspect-ratio: 500 / 540; border-radius: 24px; background: var(--surface); container-type: inline-size; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-line { fill: none; stroke: #CFD8D2; stroke-width: 2; stroke-linecap: round; }
.flow-packet { fill: var(--accent); }
.flow-box {
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 0.45em;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px;
  font-size: clamp(10.5px, 2.5cqi, 13px); font-weight: 600; white-space: nowrap;
}
.flow-box svg { width: 1.3em; height: 1.3em; flex-shrink: 0; color: var(--accent-dark); }
.flow-service { top: 14.8%; width: 24%; height: 8.7%; }
.flow-business {
  left: 31%; top: 58.3%; width: 38%; height: 8.7%;
  border: 1.5px solid var(--accent); color: var(--accent-dark); font-size: clamp(11px, 2.8cqi, 14px);
}
.flow-sales {
  left: 26%; top: 76.7%; width: 48%; height: 8.7%; justify-content: space-between; padding: 0 5%;
  background: var(--accent-dark); border-color: var(--accent-dark); color: #FFFFFF; font-size: clamp(11.5px, 3cqi, 15px);
}
.flow-sales-label { display: inline-flex; align-items: center; gap: 0.45em; }
.flow-sales svg { color: #FFFFFF; }
.flow-bars { display: flex; align-items: flex-end; gap: clamp(2px, 0.8cqi, 5px); height: 48%; }
.flow-bars span { width: clamp(5px, 1.7cqi, 9px); border-radius: 3px; background: rgba(255, 255, 255, 0.35); transform-origin: bottom; }
.flow-bars span:last-child { background: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .flow-packet { display: none; } }

/* About hero (about.html): the name split into its two parts, each part labelled underneath.
   Same grey panel as the home diagram; sizes follow the panel's width (cqi). */
.name-card {
  aspect-ratio: 5 / 5.2; border-radius: 24px; background: var(--surface); container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center; padding: 0 8%;
}
.name-word { font-weight: 700; font-size: clamp(3rem, 19cqi, 7rem); line-height: 1; letter-spacing: -0.04em; text-align: center; }
.name-lines { display: block; width: 100%; height: clamp(48px, 18cqi, 96px); margin-top: 4%; }
.name-lines path { fill: none; stroke: #CFD8D2; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.name-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }
.name-part { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.name-part-accent { border: 1.5px solid var(--accent); }
.name-tag { font-weight: 600; font-size: clamp(13px, 3.4cqi, 16px); color: var(--accent-dark); }
.name-text { font-size: clamp(12.5px, 3cqi, 14px); line-height: 1.5; color: var(--muted); }
/* Phones: the two parts stack, the connector lines go, and the two badges stop floating:
   they sit side by side under the panel so nothing covers the name. */
@media (max-width: 560px) {
  .about-visual { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  .about-visual > .name-card { flex: 1 1 100%; }
  .about-visual > .bg-white { position: static !important; flex: 1 1 140px; min-width: 0; }
  .name-card { aspect-ratio: auto; padding: 32px 20px 20px; }
  .name-word { font-size: clamp(2.1rem, 17cqi, 3.4rem); }
  .name-lines { display: none; }
  .name-parts { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .name-part { flex-direction: row; align-items: baseline; gap: 10px; padding: 12px 14px; }
  .name-tag { flex: 0 0 3.2em; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion .name-lines path { stroke-dasharray: 1; animation: draw-line 0.8s ease-out 0.6s backwards; }
  .motion .name-part { animation: pop 0.5s var(--ease-out) backwards; animation-delay: 0.9s; }
  .motion .name-part-accent { animation-delay: 1.05s; }
}

/* About story chart (about.html): clicks and likes wobble, revenue climbs.
   On scroll the lines draw in (grey first, then green) and the end dot pops. */
.story-chart { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.story-grid { fill: none; stroke: #EEF1EF; stroke-width: 1; }
.story-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.story-dot { fill: var(--accent); stroke: #FFFFFF; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .motion [data-reveal] .story-line { stroke-dasharray: 1; }
  .motion [data-reveal]:not(.is-in) .story-line { stroke-dashoffset: 1; }
  .motion [data-reveal].is-in .story-line { animation: draw-line 1.1s ease-out backwards; animation-delay: calc(var(--s, 0) * 120ms + 400ms); }
  .motion [data-reveal]:not(.is-in) .story-dot { opacity: 0; }
  .motion [data-reveal].is-in .story-dot { animation: pop 0.5s var(--ease-out) backwards; animation-delay: 1.6s; }
}

/* Colour changes are fine for everyone */
.btn,
.menu-btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
.card-link { transition: border-color 0.25s ease, transform 0.25s var(--ease-out); }
.card-link .icon-tile { transition: background-color 0.25s ease; }
.card-link .icon-tile svg { transition: stroke 0.25s ease; }
.card-link:hover { border-color: var(--accent); }
.card-link:hover .icon-tile { background: var(--accent); }
.card-link:hover .icon-tile svg { stroke: #FFFFFF; }
/* Blog posts, case studies and the "next case study" link: green edge on hover, like the service cards */
.post-card,
.media-card,
.next-link { transition: border-color 0.25s ease, transform 0.25s var(--ease-out); }
.post-card:hover,
.media-card:hover,
.next-link:hover { border-color: var(--accent) !important; }
.arrow { display: inline-block; transition: transform 0.2s var(--ease-out); }

@media (prefers-reduced-motion: no-preference) {

  /* Hover and press */
  a:hover .arrow { transform: translateX(4px); }
  .card-link:hover,
  .post-card:hover,
  .media-card:hover,
  .next-link:hover { transform: translateY(-4px); }
  .card-link:active,
  .post-card:active,
  .media-card:active,
  .next-link:active { transform: translateY(-1px); }
  .btn:active,
  .menu-btn:active { transform: scale(0.97); }

  /* Nav links: a short green line slides in under the hovered link */
  @media (min-width: 901px) {
    .navl { position: relative; }
    .navl::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
      background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease-out);
    }
    .navl:hover::after { transform: scaleX(1); }
  }

  /* Services dropdown slides down a touch as it fades in */
  @media (min-width: 901px) {
    .nav-menu-panel { transition: translate 0.22s var(--ease-out); translate: 0 -6px; }
    .nav-drop:hover .nav-menu-panel,
    .nav-drop:focus-within .nav-menu-panel,
    .nav-drop.is-open .nav-menu-panel { translate: 0 0; }
  }

  @keyframes rise { from { opacity: 0; translate: 0 18px; } }
  @keyframes pop { from { opacity: 0; scale: 0.92; } }
  @keyframes grow-x { from { scale: 0 1; } }
  @keyframes grow-y { from { scale: 1 0; } }
  @keyframes draw { from { stroke-dashoffset: 24; } }
  @keyframes draw-line { from { stroke-dashoffset: 1; } }
  @keyframes breathe { 50% { scale: 1 0.85; } }
  @keyframes spin { to { rotate: 360deg; } }

  /* On load: hero copy rises in, then the diagram builds top to bottom (boxes pop in, lines draw,
     sales bars grow) and the green dots start running from the services into sales */
  .motion [data-intro] { animation: rise 0.8s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
  .motion .flow-box { animation: pop 0.5s var(--ease-out) backwards; animation-delay: calc(var(--s, 0) * 120ms + 450ms); }
  .motion .flow-line { stroke-dasharray: 1; animation: draw-line 0.6s ease-out backwards; animation-delay: calc(var(--s, 0) * 120ms + 450ms); }
  .motion .flow-bars span { animation: grow-y 0.6s var(--ease-out) backwards; animation-delay: calc(var(--b, 0) * 80ms + 1.6s); }
  .motion .flow-bars span:last-child { animation: grow-y 0.6s var(--ease-out) backwards, breathe 2.4s ease-in-out 2.6s infinite; animation-delay: calc(var(--b, 0) * 80ms + 1.6s), 2.6s; }

  /* 404: the trail draws itself, then the summit dot pops and the lost path fades in */
  .motion .trail-line { stroke-dasharray: 1; animation: draw-line 1.2s ease-out 0.2s backwards; }
  .motion .trail-base { animation: rise 0.6s var(--ease-out) backwards; }
  .motion .trail-dot { transform-box: fill-box; transform-origin: center; animation: pop 0.5s var(--ease-out) 1.2s backwards; }
  .motion .trail-dash { animation: rise 0.6s ease-out 1.4s backwards; }

  /* On scroll: blocks rise into place, several at once go one after another */
  .motion [data-reveal]:not(.is-in) { opacity: 0; }
  .motion [data-reveal].is-in { animation: rise 0.7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); }

  /* Inside a revealed block: small parts play in order (--s) */
  .motion [data-reveal]:not(.is-in) [data-seq] { opacity: 0; }
  .motion [data-reveal].is-in [data-seq] { animation: pop 0.5s var(--ease-out) backwards; animation-delay: calc(var(--s, 0) * 120ms + 400ms); }
  .bar-x { transform-origin: left; }
  .motion [data-reveal]:not(.is-in) .bar-x { scale: 0 1; }
  .motion [data-reveal].is-in .bar-x { animation: grow-x 0.9s var(--ease-out) backwards; animation-delay: calc(var(--s, 0) * 120ms + 400ms); }
  .draw path { stroke-dasharray: 24; }
  .motion [data-reveal]:not(.is-in) .draw path { stroke-dashoffset: 24; }
  .motion [data-reveal].is-in .draw path { animation: draw 0.5s ease-out backwards; animation-delay: calc(var(--s, 0) * 160ms + 450ms); }

  /* Client logos: scroll right to left forever, pause while the pointer is over them */
  @keyframes marquee { to { transform: translateX(-50%); } }
  .logo-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .logo-track { justify-content: flex-start; width: max-content; animation: marquee 40s linear infinite; }
  .logo-marquee:hover .logo-track { animation-play-state: paused; }
  .logo-set { flex-wrap: nowrap; padding-right: var(--logo-gap, 56px); }
  .logo-set[aria-hidden="true"] { display: flex; }

  /* Integrations: platforms revolve around the logo, inner ring clockwise, outer ring
     anticlockwise. Each chip turns back the other way at the same speed so its label stays
     upright. Hovering the diagram pauses it so the names are easy to read. */
  @keyframes upright-cw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
  @keyframes upright-ccw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
  .orbit-inner { --orbit-time: 40s; animation: spin var(--orbit-time) linear infinite; }
  .orbit-outer { --orbit-time: 60s; animation: spin var(--orbit-time) linear infinite reverse; }
  .orbit-inner .orbit-chip { animation: upright-ccw var(--orbit-time) linear infinite; }
  .orbit-outer .orbit-chip { animation: upright-cw var(--orbit-time) linear infinite; }
  .orbit:hover .orbit-group,
  .orbit:hover .orbit-chip { animation-play-state: paused; }
}

/* Images added in the CMS inside a blog post */
article figure img { display: block; width: 100%; height: auto; border-radius: 18px; }

/* Blog: the Mountics mark as the author picture, and a green cover for posts without an image */
.avatar-brand { background: #EAF5EF; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #0B0B0B; }
.post-cover { position: relative; overflow: hidden; background: var(--accent-dark); color: #FFFFFF; }
.post-cover-alt { background: #14955A; }
.post-cover svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; }
.post-cover-mark { position: absolute; left: 1.5rem; top: 1.25rem; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.post-cover-cat { position: absolute; left: 1.5rem; bottom: 1.25rem; font-weight: 600; font-size: clamp(1.1rem, 3vw, 2rem); letter-spacing: -0.02em; }
.post-thumb .post-cover-cat { font-size: 1.15rem; }