/* ==========================================================================
   BuildSmart ERP — Global stylesheet
   Shared by every page (home, industries, modules, features, resources).
   Section order: tokens > reset > layout > header > footer > components > page blocks > responsive
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand ramp — hue 206°, anchored on #1b75ba.
     Change --brand + --brand-rgb together; every tint, shadow and
     gradient below is derived from them. */
  --brand: #1b75ba;
  --brand-600: #16629c;   /* hover   */
  --brand-700: #124f7d;   /* pressed */
  --brand-050: #f1f8fd;   /* tint bg — kept light enough that --brand text on it clears WCAG AA */
  --brand-100: #c9e3f7;   /* tint border */
  --brand-rgb: 27, 117, 186;

  /* Neutrals share the brand hue so greys never read purple next to it */
  --ink: #0c1e30;
  --ink-soft: #1a3145;
  --body: #55677d;
  --muted: #8595a8;
  --ink-rgb: 12, 30, 48;

  --line: #e1eaf2;
  --line-soft: #edf2f7;
  --surface: #ffffff;
  --surface-alt: #f4f9fd;

  --navy: #0d2435;
  --navy-deep: #091925;

  /* Deep gradient stops for hero banners / dark bands */
  --brand-900: #08304f;
  --brand-800: #145f98;

  /* module accents */
  --c-blue: #1b75ba;      --c-blue-bg: #e5f1fa;
  --c-green: #16a34a;     --c-green-bg: #e7f7ec;
  --c-purple: #7c3aed;    --c-purple-bg: #f1eafe;
  --c-orange: #ea8c1b;    --c-orange-bg: #fdf1df;
  --c-teal: #0d9488;      --c-teal-bg: #e2f5f3;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), .06);
  --shadow-card: 0 2px 10px rgba(var(--ink-rgb), .05);
  --shadow-float: 0 12px 34px rgba(var(--ink-rgb), .13);
  --shadow-nav: 0 10px 40px rgba(var(--ink-rgb), .12);

  --container: 1200px;
  --header-h: 74px;

  /* Keep in step with the Google Fonts <link> in includes/header.php — that
     stylesheet is what actually downloads the face. */
  --font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  /* Explicit so Bootstrap's reboot (which sets its own heading font-family)
     can never win — headings must stay on --font like everything else. */
  font-family: var(--font);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
}

p { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid rgba(var(--brand-rgb), .45);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: 76px; }
.section--tight { padding-block: 56px; }
.section--alt { background: var(--surface-alt); }

.section-head { text-align: center; margin-bottom: 44px; }

.eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}

.section-title { font-size: clamp(26px, 3vw, 34px); }
.section-sub { margin-top: 12px; font-size: 15.5px; color: var(--body); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(var(--brand-rgb), .24); }
.btn--primary:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--brand-rgb), .3); }
.btn--primary:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(var(--brand-rgb), .24); }

.btn--ghost { background: #fff; color: var(--brand); border-color: var(--brand-100); }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-050); transform: translateY(-1px); }
.btn--ghost:active { transform: translateY(0); }

.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 5. Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.header--scrolled { border-color: transparent; box-shadow: 0 8px 24px rgba(var(--ink-rgb), .08); }
.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand__logo { height: 40px; width: auto; display: block; }
.brand__mark { width: 26px; height: 26px; color: var(--brand); }
.brand__name { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__link:hover { color: var(--brand); background: var(--brand-050); }
.nav__link[aria-current="page"] { color: var(--brand); }
/* parent trigger of the dropdown holding the current page */
.nav__link.is-current { color: var(--brand); }
.nav__caret { width: 12px; height: 12px; color: var(--muted); transition: transform .2s ease; }
.nav__item--has-menu.is-open .nav__caret { transform: rotate(180deg); }
.nav__item--has-menu.is-open > .nav__link { color: var(--brand); }

.nav__item { position: relative; }

.dropdown {
  position: absolute;
  top: 100%;
  margin-top: 10px;
  left: 0;
  min-width: 232px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-nav);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item--has-menu.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* keeps hover alive while the pointer crosses the gap under the trigger */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -12px;
  height: 12px;
}

.dropdown--wide {
  min-width: 560px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 12px;
}
.dropdown--mega {
  min-width: 720px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 12px;
}
/* anchors menus near the right edge so they never spill past the container */
.dropdown--right { left: auto; right: 0; }
.dropdown__title {
  grid-column: 1 / -1;
  padding: 4px 12px 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.dropdown a:hover { background: var(--brand-050); color: var(--brand); transform: translateX(3px); }
.dropdown a[aria-current="page"] { background: var(--brand-050); color: var(--brand); }

.header__actions { display: flex; align-items: center; gap: 18px; flex: none; }
.header__login { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.header__login:hover { color: var(--brand); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.nav-toggle:hover { border-color: var(--brand-100); background: var(--brand-050); }
.nav-toggle__bars { width: 18px; height: 13px; position: relative; flex: none; }
.nav-toggle__bar {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .28s ease;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 50%; margin-top: -1px; }
.nav-toggle__bar:nth-child(3) { top: 100%; margin-top: -2px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 50%; margin-top: -1px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 50%; margin-top: -1px; transform: rotate(-45deg); }

/* ---------- 6. Breadcrumb ---------- */
.crumbs { padding-block: 16px 4px; }
/* list-style must be cleared explicitly — the reset only nulls <ul>, so the
   <ol> was rendering "1. Home 3. Modules 5. …" (separator <li>s counted too) */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; list-style: none; margin: 0; padding: 0; }
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--brand); }
.crumbs li[aria-current] { color: var(--ink); font-weight: 700; }
.crumbs .sep { color: #bfcbd8; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 34px 46px;
  /* the top banner spans the full width of the screen rather than the 1200px
     container, so it carries its own gutter */
  --hero-pad: clamp(24px, 4.5vw, 80px);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.hero::before { top: -140px; right: -100px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(var(--brand-rgb), .16), rgba(var(--brand-rgb), 0) 70%); }
.hero::after { bottom: -160px; left: -120px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(13, 148, 136, .12), rgba(13, 148, 136, 0) 70%); }
/* overrides .container's max-width and padding — equal specificity, later rule */
.hero__grid {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-inline: var(--hero-pad);
  display: grid;
  /* 5 / 7 split — copy left, screen switcher right */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 3.5vw, 64px);
  align-items: center;
  min-height: 430px;
}

.hero__copy { padding-block: 18px; position: relative; z-index: 3; }
.hero__title {
  font-size: clamp(32px, 4.1vw, 46px);
  line-height: 1.14;
  letter-spacing: -.032em;
}
.hero__title span { color: var(--brand); }
.hero__text { margin-top: 20px; font-size: 16px; max-width: 400px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__highlights { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.hero__highlights li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.hero__highlights svg { width: 15px; height: 15px; flex: none; color: var(--c-green); }

/* grid + align-content keeps the in-flow child (.shots) vertically centred in
   the stretched column; .hero__photo is absolute so it ignores this */
.hero__media { position: relative; align-self: stretch; min-height: 430px; display: grid; align-content: center; }
.hero__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8%;
  /* bleeds through the banner's gutter to the viewport edge */
  right: calc(-1 * var(--hero-pad));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 42%);
}

/* floating stat cards */
.stat-card {
  position: absolute;
  z-index: 4;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  padding: 14px 16px;
}
.stat-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stat-card__head svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.stat-card__head span { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.stat-card__num { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat-card__label { font-size: 12px; color: var(--body); }
.stat-card__foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--c-green); }
.stat-card__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); }

.stat-card--a { top: 8%; left: 4%; width: 152px; }
.stat-card--b { top: 40%; left: -6%; width: 250px; }
.stat-card--c { top: 58%; right: -2%; width: 152px; }

/* mini budget chart inside card b */
.mini-rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 11px; }
.mini-rows dt { color: var(--muted); }
.mini-rows dd { margin: 0; font-weight: 800; color: var(--ink); }
.card-split { display: flex; align-items: center; gap: 14px; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 42px; margin-top: 10px; }
.spark i { flex: 1; background: var(--brand); border-radius: 2px 2px 0 0; opacity: .85; }

.ring { width: 54px; height: 54px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring__track { stroke: var(--brand-100); }
.ring__bar { stroke: var(--brand); stroke-linecap: round; }
.ring-wrap { position: relative; flex: none; }
.ring-wrap b {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--ink);
}

/* ---------- 8. Workflow rail ---------- */
.rail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
.rail__step { flex: 1 1 0; min-width: 0; text-align: center; }
.rail__icon {
  width: 62px; height: 62px;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rail__icon svg { width: 24px; height: 24px; color: var(--brand); }
.rail__step:hover .rail__icon { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(var(--brand-rgb), .16); }
.rail__label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.35; }
.rail__sep { flex: none; width: 14px; margin-top: 24px; color: #bfcbd8; }
.rail__sep svg { width: 14px; height: 14px; }

/* ---------- 9. Module cards ---------- */
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

.mod-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mod-card:hover { border-color: var(--brand-100); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }

.mod-card__head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.mod-card__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  transition: transform .25s ease;
}
.mod-card__icon svg { width: 21px; height: 21px; }
.mod-card:hover .mod-card__icon { transform: scale(1.08) rotate(-4deg); }
.mod-card__title { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }

.mod-list { display: grid; gap: 11px; margin-bottom: 20px; }
.mod-list li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--body); }
.mod-list svg { width: 15px; height: 15px; flex: none; }

.mod-card__foot { margin-top: auto; }

/* accent variants */
.acc-blue   .mod-card__icon { background: var(--c-blue-bg); color: var(--c-blue); }
.acc-blue   .mod-list svg { color: var(--c-blue); }
.acc-green  .mod-card__icon { background: var(--c-green-bg); color: var(--c-green); }
.acc-green  .mod-list svg { color: var(--c-green); }
.acc-purple .mod-card__icon { background: var(--c-purple-bg); color: var(--c-purple); }
.acc-purple .mod-list svg { color: var(--c-purple); }
.acc-orange .mod-card__icon { background: var(--c-orange-bg); color: var(--c-orange); }
.acc-orange .mod-list svg { color: var(--c-orange); }
.acc-teal   .mod-card__icon { background: var(--c-teal-bg); color: var(--c-teal); }
.acc-teal   .mod-list svg { color: var(--c-teal); }

/* ---------- 10. Role cards ---------- */
.role-card {
  padding: 26px 20px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.role-card:hover { border-color: var(--brand-100); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }
.role-card__photo {
  width: 76px; height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.role-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.role-card__name { font-size: 15px; font-weight: 800; }
.role-card__text { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.55; }

/* ---------- 11. Logo carousel ---------- */
.logos { display: flex; align-items: center; gap: 14px; }
.logos__track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 2px;
}
.logos__track::-webkit-scrollbar { display: none; }
.logos__item {
  flex: 0 0 auto;
  min-width: 160px;
  padding: 14px 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #47586b;
  text-transform: uppercase;
  border-right: 1px solid var(--line);
  filter: grayscale(1);
  opacity: .78;
  transition: opacity .18s ease, filter .18s ease;
}
.logos__item:last-child { border-right: 0; }
.logos__item:hover { opacity: 1; filter: none; color: var(--brand); }
.logos__item small { display: block; font-size: 10px; letter-spacing: .1em; font-weight: 700; color: var(--muted); }

.logos__btn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, color .18s ease;
}
.logos__btn:hover { border-color: var(--brand); color: var(--brand); }
.logos__btn svg { width: 16px; height: 16px; }

.logos__strip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 4px 10px;
}

/* ---------- 11b. Client logo marquee (includes/clients-slider.php) ----------
   The rail holds the roster twice and slides exactly one track-width, so the
   second copy lands where the first began and the seam never shows. Width is
   max-content rather than a percentage, otherwise the tracks would shrink to
   the viewport and -50% would no longer equal one track. */
.cmq {
  padding-block: 34px 38px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;     /* belt-and-braces: the mask below already clips */
}
.cmq--alt { background: var(--surface-alt); }

/* Reads as a sentence, not an eyebrow — at 15.5px the .14em uppercase tracking
   an eyebrow uses would sprawl, so this drops back to normal case. */
.cmq__label {
  text-align: center;
  margin-bottom: 26px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-soft);
}
.cmq__label-mark { color: var(--brand); font-weight: 800; }

/* the fade hides the logos entering and leaving instead of letting them
   pop at a hard edge */
.cmq__mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.cmq__rail {
  display: flex;
  width: max-content;
  animation: cmqScroll 55s linear infinite;
}
.cmq__mask:hover .cmq__rail,
.cmq__mask:focus-within .cmq__rail { animation-play-state: paused; }

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

.cmq__track {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-inline: 24px;   /* half the gap each side, so the seam spacing matches */
  margin: 0;
  list-style: none;
}

.cmq__item { flex: 0 0 auto; display: grid; place-items: center; }

/* Logos keep their own brand colours — hover lifts rather than un-greying,
   since there is no grey state left to come out of. */
.cmq__logo {
  height: 46px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  transition: transform .2s ease;
}
.cmq__item:hover .cmq__logo { transform: scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .cmq__logo { transition: none; }
  .cmq__item:hover .cmq__logo { transform: none; }
}

.cmq__name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* No crawl for visitors who asked for stillness — the strip becomes a plain
   horizontal scroller they drive themselves. */
@media (prefers-reduced-motion: reduce) {
  .cmq__rail { animation: none; }
  .cmq__mask { overflow-x: auto; }
  .cmq__rail > .cmq__track[aria-hidden="true"] { display: none; }
}

@media (max-width: 720px) {
  .cmq { padding-block: 26px 30px; }
  .cmq__label { margin-bottom: 20px; font-size: 11.5px; }
  .cmq__track { gap: 34px; padding-inline: 17px; }
  .cmq__logo { height: 38px; max-width: 130px; }
}

/* ---------- 12. CTA + form ---------- */
.cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 44px;
  padding: 40px;
  border-radius: var(--radius-xl);
  /* lightest stop is --brand-600 so the .82-alpha white body copy stays >= 4.5:1 across the sweep */
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 55%, var(--brand-900) 100%);
  color: #fff;
}
.cta::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -70px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}
.cta__title { color: #fff; font-size: clamp(24px, 2.6vw, 30px); }
.cta__text { margin-top: 14px; font-size: 15px; color: rgba(255, 255, 255, .82); max-width: 380px; }

.cta__points { display: grid; gap: 14px; margin-top: 26px; }
.cta__points li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .94); }
.cta__points span {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}
.cta__points svg { width: 15px; height: 15px; color: #fff; }

.form-card {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 18px 40px rgba(var(--ink-rgb), .22);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.field .req { color: #dc2626; }
.field input,
.field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder { color: #a3b0bf; }
.field select { color: var(--body); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238595a8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; padding-right: 34px; }
.field input:focus,
.field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.field .error { font-size: 12px; font-weight: 600; color: #dc2626; min-height: 0; }

.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea::placeholder { color: #a3b0bf; }
.field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); }
.field textarea[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

.form-note { margin-top: 14px; font-size: 12px; color: var(--muted); text-align: center; }
.form-status { margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--c-green); text-align: center; }
.form-status.is-err { color: #dc2626; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything hidden outright but will happily fill a field that is merely moved.
   aria-hidden and tabindex="-1" in the markup keep it away from real users. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Server-rendered outcome, shown when the form was submitted without
   JavaScript and the browser came back with ?enquiry=ok in the URL. */
.form-banner {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #b6e3cd;
  border-radius: var(--radius);
  background: #edfaf3;
  color: #145f3d;
  font-size: 13.5px;
  line-height: 1.6;
}
.form-banner strong { font-weight: 800; }
.form-banner--err { border-color: #f0c4c1; background: #fdf1f0; color: #8c1d17; }

/* ---------- 13. Footer ---------- */
.footer { background: var(--navy); color: rgba(255, 255, 255, .68); padding-block: 54px 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.5fr;
  gap: 34px;
}
.footer .brand__name { color: #fff; }
.footer .brand__mark { color: #5ab0f2; }
/* the wordmark is dark artwork — flip it to solid white for the navy footer */
.footer .brand__logo { height: 44px; filter: brightness(0) invert(1); opacity: .95; }
.footer__about { margin-top: 16px; font-size: 13.5px; line-height: 1.7; max-width: 250px; }

.footer__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer__list { display: grid; gap: 11px; }
.footer__list a { font-size: 13.5px; }
.footer__list a:hover { color: #fff; }

.footer__contact { display: grid; gap: 13px; }
.footer__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: #5ab0f2; }

.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  transition: background .18s ease;
}
.socials a:hover { background: var(--brand); }
.socials svg { width: 15px; height: 15px; color: #fff; }

.footer__bar {
  margin-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: var(--navy-deep);
}
.footer__bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 16px;
  font-size: 12.5px;
}
.footer__legal { display: flex; align-items: center; gap: 14px; }
.footer__legal a:hover { color: #fff; }
.footer__legal .sep { color: rgba(255, 255, 255, .28); }

/* ---------- 13b. Homepage — hero screen switcher ----------
   Three tab buttons over one stage. Panels are stacked in the same grid cell
   so the stage keeps the height of the tallest shot and nothing reflows when
   the visible panel changes. [hidden] is what the script toggles; the opacity
   transition rides on .is-active. */
/* tab bar and stage are one card — the frame lives on .shots so the two sit
   flush with no gap between them */
.shots {
  display: grid;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  animation: dashFloat 6s ease-in-out infinite;
}
@keyframes dashFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* full-width segmented bar: three equal cells, hairline dividers, and an
   accent underline on the selected one. Each button sets its own --tab-accent. */
.shots__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.shots__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px 19px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.shots__tab:last-child { border-right: 0; }
.shots__tab svg { width: 26px; height: 26px; flex: none; color: var(--tab-accent, var(--brand)); }
.shots__tab:hover { background: #f7fbfe; }
.shots__tab:focus-visible { outline: 2px solid var(--tab-accent, var(--brand)); outline-offset: -3px; }
.shots__tab[aria-selected="true"] { color: var(--tab-accent, var(--brand)); }
/* the underline indicator */
.shots__tab::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--tab-accent, var(--brand));
  transform: scaleX(0);
  transition: transform .22s ease;
}
.shots__tab[aria-selected="true"]::after { transform: scaleX(1); }

.shots__stage {
  display: grid;
  padding: 14px;
}

.shots__panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.shots__panel[hidden] { display: none; }
.shots__panel.is-active { opacity: 1; transform: none; }
.shots__panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .shots { animation: none; }
  .shots__panel { transition: none; transform: none; }
  .shots__tab::after { transition: none; }
}

/* ---------- 13c. Homepage — metrics strip ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.metrics__item { display: flex; align-items: center; gap: 14px; }
.metrics__icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand-050); color: var(--brand); }
.metrics__icon svg { width: 23px; height: 23px; }
.metrics__num { font-size: 23px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.metrics__label { font-size: 13px; color: var(--body); margin-top: 2px; }

/* ---------- 13d. Homepage — feature cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  min-height: 250px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover { border-color: var(--brand-100); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }
.feature-card__info { flex: 1 1 auto; min-width: 0; }
.feature-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-050); color: var(--brand); margin-bottom: 18px; transition: transform .25s ease; }
.feature-card:hover .feature-card__icon { transform: scale(1.08) rotate(-4deg); }
.feature-card__icon svg { width: 22px; height: 22px; }
.feature-card__title { font-size: 16.5px; font-weight: 800; margin-bottom: 8px; }
.feature-card__text { font-size: 13.5px; line-height: 1.65; }
.feature-card__art { flex: none; width: 112px; display: flex; align-items: center; justify-content: center; }

/* mini phone (Mobile Ready / Offline Mobile) */
.mini-phone { width: 108px; height: 192px; background: var(--navy); border-radius: 20px; padding: 6px; box-shadow: var(--shadow-sm); flex: none; }
.mini-phone__screen { width: 100%; height: 100%; background: #fff; border-radius: 14px; padding: 10px 8px; overflow: hidden; }
.mini-phone__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mini-phone__head b { font-size: 8.5px; font-weight: 800; color: var(--ink); }
.mini-phone__head svg { width: 11px; height: 11px; color: #dc2626; }
.mini-phone__row { display: flex; gap: 5px; margin-bottom: 5px; }
.mini-phone__tile { flex: 1; background: var(--surface-alt); border-radius: 6px; padding: 6px 7px; text-align: center; }
.mini-phone__tile b { display: block; font-size: 11px; font-weight: 800; color: var(--ink); }
.mini-phone__tile--row { display: flex; align-items: center; justify-content: space-between; text-align: left; flex-direction: row; margin-bottom: 5px; }
.mini-phone__tile--row b { font-size: 8px; font-weight: 700; }
.mini-phone__tile--row span { font-size: 8px; font-weight: 800; color: var(--ink); }
.mini-phone__bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 8px; }
.mini-phone__bars i { flex: 1; background: var(--brand-100); border-radius: 1px 1px 0 0; }
.mini-phone__btn { margin-top: 8px; background: var(--brand); color: #fff; text-align: center; border-radius: 6px; padding: 6px; font-size: 8px; font-weight: 800; }

/* cloud graphic (Cloud ERP) */
.art-cloud { position: relative; width: 108px; height: 118px; }
.art-cloud__ring { width: 88px; height: 68px; margin: 0 auto; border: 2px dashed var(--brand-100); border-radius: 50%; display: grid; place-items: center; }
.art-cloud__ring svg { width: 32px; height: 32px; color: var(--brand); }
.art-cloud__icons { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.art-cloud__icons span { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-alt); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.art-cloud__icons svg { width: 14px; height: 14px; color: var(--brand); }

/* mini hub graphic (API Integration) */
.art-hub { position: relative; width: 108px; height: 108px; }
.art-hub::before { content: ""; position: absolute; inset: 12px; border: 2px dashed var(--line); border-radius: 50%; }
.art-hub__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 9px; background: var(--brand); display: grid; place-items: center; z-index: 1; }
.art-hub__center svg { width: 17px; height: 17px; color: #fff; }
.art-hub__node { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); display: grid; place-items: center; font-size: 9px; font-weight: 800; }
.art-hub__node svg { width: 13px; height: 13px; }

/* stat mockups (AI Analytics) */
.art-stats { width: 112px; display: grid; gap: 8px; }
.art-stats__card { background: var(--surface-alt); border-radius: 9px; padding: 8px 9px; }
.art-stats__card span { display: block; font-size: 8px; color: var(--muted); margin-bottom: 5px; }
.art-stats__card b { font-size: 11px; font-weight: 800; color: var(--ink); }
.art-stats__pill { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; color: var(--c-green); }
.art-stats__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); }
.art-stats__spark { display: flex; align-items: flex-end; gap: 2px; height: 18px; margin-top: 5px; }
.art-stats__spark i { flex: 1; background: var(--c-teal); opacity: .5; border-radius: 1px 1px 0 0; }
.art-stats__delta { font-size: 8.5px; font-weight: 700; color: var(--c-green); }

/* workflow steps (Workflow Automation) */
.art-flow { width: 116px; display: grid; gap: 8px; position: relative; }
.art-flow::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 0; border-left: 2px dashed var(--line); }
.art-flow__step { position: relative; padding-left: 20px; font-size: 9px; font-weight: 700; color: var(--ink-soft); background: var(--surface-alt); border-radius: 7px; padding: 6px 8px 6px 20px; }
.art-flow__step::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.art-flow__step--done { color: var(--c-green); background: var(--c-green-bg); }
.art-flow__step--done::before { background: var(--c-green); }
.art-flow__step--active { color: var(--brand); background: var(--brand-050); }
.art-flow__step--active::before { background: var(--brand); }

/* ---------- 13e. Homepage — industry cards ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.industry-card {
  position: relative;
  display: block;      /* homepage and listing page both render these as links */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.industry-card:hover { border-color: var(--brand-100); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }
.industry-card__photo { position: relative; height: 140px; }
.industry-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.industry-card__icon {
  position: absolute; left: 16px; bottom: -20px;
  width: 42px; height: 42px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--brand);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.industry-card:hover .industry-card__icon { background: var(--brand); color: #fff; transform: scale(1.08); }
.industry-card__icon svg { width: 19px; height: 19px; }
.industry-card__body { padding: 28px 18px 20px; }
.industry-card__title { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.industry-card__text { font-size: 12.5px; line-height: 1.6; }

/* ---------- 13f0. Homepage — integrations hub diagram ---------- */
.hub { position: relative; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 960 / 480; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub__lines path { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 7; }
.hub__side { position: absolute; top: 0; bottom: 0; width: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 0; }
.hub__side--left { left: 0; }
.hub__side--right { right: 0; }
.hub__item { display: flex; align-items: center; gap: 12px; }
.hub__item--rev { flex-direction: row-reverse; text-align: right; }
/* neutral chip — the logos inside carry their own brand colour */
.hub__icon { width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
/* contain, not fill — official brand files are not all square (MS Project is 479x417) */
.hub__icon img { width: 30px; height: 30px; object-fit: contain; display: block; }
.hub__item h4 { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.hub__item p { font-size: 12px; color: var(--body); line-height: 1.4; }
.hub__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 150px; height: 150px; z-index: 2;
  border-radius: 50%; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
/* wordmark is wide, so it sits inside the circle's widest band rather than filling it */
.hub__center-logo { width: 112px; height: auto; display: block; }
.hub-fallback { display: none; }

/* ---------- 13f. Homepage — integration cards ---------- */
.integration-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease;
}
.integration-card:hover { border-color: var(--brand-100); transform: translateY(-3px); }
.integration-card__icon { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); }
.integration-card__icon img { width: 26px; height: 26px; object-fit: contain; display: block; }
.integration-card h4 { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.integration-card p { font-size: 12px; }

/* ---------- 13g. Homepage — mobile app section ---------- */
.app {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 48px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-050) 55%, #ffffff 100%);
}
.app__title { font-size: clamp(26px, 3vw, 36px); }
.app__title span { color: var(--brand); }
.app__text { margin-top: 14px; font-size: 15px; max-width: 420px; }
.app__points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 26px; }
.app__points li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.app__points span { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.app__points svg { width: 16px; height: 16px; }
.app__badges { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.app__badge { display: flex; align-items: center; gap: 9px; padding: 10px 16px; background: var(--navy); color: #fff; border-radius: 10px; font-size: 11px; }
.app__badge b { display: block; font-size: 13.5px; font-weight: 800; }
.app__badge svg { width: 20px; height: 20px; flex: none; }

/* Tall enough to hold the lower phone whole — .app clips (overflow: hidden),
   so anything past this height gets cut. Budget: .phone--b's top offset (52)
   + the shell height, which is 224px wide less 2x10 padding at the 393:852
   screen ratio, plus that padding back = 462. */
.app__phones { position: relative; height: 516px; }
/* The handset is CSS (shell, Dynamic Island); the screen is one image, so a
   real screenshot drops in. aspect-ratio holds true phone proportions —
   393 x 852 is an iPhone 15 capture — whatever width the shell is given. */
.phone {
  position: absolute;
  width: 224px;
  background: linear-gradient(160deg, #1b2d3d 0%, #080f18 100%);
  border-radius: 46px;
  padding: 10px;
  box-shadow: var(--shadow-float), inset 0 0 0 2px rgba(255,255,255,.04);
}
.phone--a { left: 2%; top: 6px; z-index: 2; }
.phone--b { left: 42%; top: 52px; z-index: 1; opacity: .98; }

.phone__island {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 20px; background: #000; border-radius: 12px; z-index: 3;
}
.phone__shot {
  display: block;
  width: 100%;
  aspect-ratio: 393 / 852;
  height: auto;
  object-fit: contain;
  background: var(--surface-alt);
  border-radius: 36px;
}

/* ---------- 13h. Homepage — people / role-team cards ---------- */
.people { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
/* The artwork is the 400x400 studio portraits in assets/img/role-*.png — the
   same shots the role cards use. They are square with a solid white backdrop
   (no alpha), so the frame is square too: at 1:1 into 1:1, object-fit has
   nothing to crop and no one loses the top of their head. The frame's own
   background is white to match the artwork's, so the two meet invisibly —
   a tint here would box each photo in a visible square. */
.people__card {
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.people__card:hover { transform: translateY(-6px); border-color: var(--brand-100); box-shadow: var(--shadow-float); }

.people__photo {
  position: relative;
  aspect-ratio: 1 / 1;       /* the artwork's own ratio, so nothing is cropped */
  overflow: hidden;
  background: #fff;
}
.people__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.people__card:hover .people__photo img { transform: scale(1.04); }

/* Sits in normal flow between the photo and the caption, pulled up by half its
   height so it straddles the seam. It is a sibling of both, so absolute
   positioning would anchor it to the card, not to the photo's lower edge —
   and the photo's height is ratio-driven, so there is no fixed offset to use. */
.people__badge {
  position: relative;
  z-index: 1;
  width: 46px; height: 46px;
  margin: -23px auto 0;
  /* Tinted, not white. The photo's backdrop is white now, so a white disc on a
     white ring vanished into it and just looked like a bite out of the figure;
     the accent fill makes it read as a badge again. */
  background: color-mix(in srgb, var(--pc, var(--brand)) 14%, #fff);
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px #fff, var(--shadow-card);
}
.people__badge svg { width: 21px; height: 21px; color: var(--pc, var(--brand)); }

.people__foot { position: relative; padding: 14px 14px 20px; text-align: center; }
.people__name { color: var(--ink); font-size: 15px; font-weight: 800; }
.people__role { color: var(--body); font-size: 12px; line-height: 1.55; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .people__card, .people__photo img { transition: none; }
  .people__card:hover { transform: none; }
  .people__card:hover .people__photo img { transform: none; }
}

/* ---------- 13i. Module & role pages — hero, workflow, tiles ---------- */
.module-hero,
.page-hero {
  padding-block: 54px 58px;
  background: linear-gradient(180deg, var(--brand-050) 0%, #fff 100%);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.module-hero__title,
.page-hero__title {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.03em;
  line-height: 1.12;
  max-width: 900px;
  margin-inline: auto;
}
.module-hero__text,
.page-hero__text {
  max-width: 720px;
  margin: 16px auto 0;
  font-size: 16px;
  color: var(--body);
}
.module-hero__actions,
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

/* role workflow — numbered journey steps */
.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.flow__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.flow__step:hover { border-color: var(--brand-100); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(var(--ink-rgb), .09); }
.flow__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  background: var(--brand-050);
  color: var(--brand);
}
.flow__label { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }

.flow.acc-blue   .flow__num { background: var(--c-blue-bg);   color: var(--c-blue); }
.flow.acc-green  .flow__num { background: var(--c-green-bg);  color: var(--c-green); }
.flow.acc-purple .flow__num { background: var(--c-purple-bg); color: var(--c-purple); }
.flow.acc-orange .flow__num { background: var(--c-orange-bg); color: var(--c-orange); }
.flow.acc-teal   .flow__num { background: var(--c-teal-bg);   color: var(--c-teal); }

.step-card {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.step-card:hover { border-color: var(--brand-100); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }
.step-card__num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 800;
  background: var(--brand-050);
  color: var(--brand);
  margin-bottom: 16px;
}
.step-card__kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.step-card__title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.step-card__text { margin-top: 9px; font-size: 13.5px; line-height: 1.65; color: var(--body); }
.step-card__list { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.step-card__list li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.step-card__list svg { width: 15px; height: 15px; flex: none; color: var(--brand); }

/* accent variants reuse the module-card palette */
.step-card.acc-blue   .step-card__num { background: var(--c-blue-bg);   color: var(--c-blue); }
.step-card.acc-blue   .step-card__list svg { color: var(--c-blue); }
.step-card.acc-green  .step-card__num { background: var(--c-green-bg);  color: var(--c-green); }
.step-card.acc-green  .step-card__list svg { color: var(--c-green); }
.step-card.acc-purple .step-card__num { background: var(--c-purple-bg); color: var(--c-purple); }
.step-card.acc-purple .step-card__list svg { color: var(--c-purple); }
.step-card.acc-orange .step-card__num { background: var(--c-orange-bg); color: var(--c-orange); }
.step-card.acc-orange .step-card__list svg { color: var(--c-orange); }
.step-card.acc-teal   .step-card__num { background: var(--c-teal-bg);   color: var(--c-teal); }
.step-card.acc-teal   .step-card__list svg { color: var(--c-teal); }

.impact-card {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.impact-card:hover { border-color: var(--brand-100); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }
.impact-card__num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand-100);
  line-height: 1;
}
.impact-card__title { margin-top: 14px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.impact-card__text { margin: 10px 0 20px; font-size: 14px; line-height: 1.65; color: var(--body); }
.impact-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--brand-050);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 800;
}
.impact-card__tag svg { width: 14px; height: 14px; flex: none; }

/* ---------- Testimonials ----------
   Each card sets --tc for its monogram; everything else is shared. */

/* The slider is a snapping scroll track — native scroll and swipe do the work,
   the arrows and dots just page it by one viewport at a time. overflow-x:auto
   forces overflow-y to auto too, so the padding leaves room for the hover lift
   and card shadow instead of clipping them. */
.tslider { position: relative; }
.tslider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 2px 12px;
  scrollbar-width: none;
}
.tslider__track::-webkit-scrollbar { display: none; }
.tslider__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius-lg); }
.tslider__track > .tcard {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
}

.tslider__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.tslider__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tslider__btn svg { width: 18px; height: 18px; }
.tslider__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.tslider__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.tslider__dots { display: flex; align-items: center; gap: 8px; }
.tslider__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: width .22s ease, background .22s ease;
}
.tslider__dots button[aria-current="true"] { width: 26px; background: var(--brand); }
.tslider__dots button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;              /* figure carries a UA margin the reset doesn't clear */
  padding: 28px 24px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tcard:hover { border-color: var(--brand-100); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }

/* decorative open-quote, sits behind the text */
.tcard__mark {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 42px;
  height: 42px;
  color: var(--brand-050);
  pointer-events: none;
}

.tcard__stars { display: flex; gap: 3px; color: var(--c-orange); }
.tcard__stars svg { width: 15px; height: 15px; }

.tcard__quote {
  position: relative;
  margin: 16px 0 22px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--body);
}

.tcard__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.tcard__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tc) 12%, #fff);
  color: var(--tc);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.tcard__name { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.tcard__role { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 940px) {
  .tslider__track > .tcard { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 720px) {
  .tslider__track > .tcard { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tslider__track { scroll-behavior: auto; }
  .tcard { transition: none; }
  .tcard:hover { transform: none; }
}

.module-tile {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.module-tile:hover { border-color: var(--brand-100); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }
.module-tile__num {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 800;
  background: var(--brand-050);
  color: var(--brand);
  margin-bottom: 16px;
}
.module-tile.acc-blue   .module-tile__num { background: var(--c-blue-bg);   color: var(--c-blue); }
.module-tile.acc-green  .module-tile__num { background: var(--c-green-bg);  color: var(--c-green); }
.module-tile.acc-purple .module-tile__num { background: var(--c-purple-bg); color: var(--c-purple); }
.module-tile.acc-orange .module-tile__num { background: var(--c-orange-bg); color: var(--c-orange); }
.module-tile.acc-teal   .module-tile__num { background: var(--c-teal-bg);   color: var(--c-teal); }
.module-tile__title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.module-tile__text { margin: 10px 0 20px; font-size: 13.5px; line-height: 1.65; color: var(--body); }
.module-tile .link-arrow { margin-top: auto; }

/* ---------- 14. Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1080px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .rail { flex-wrap: wrap; gap: 22px 4px; }
  .rail__step { flex: 0 0 calc(25% - 12px); }
  .rail__sep { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: repeat(3, 1fr); }
}

/* The desktop header row — logo + 7 nav items + Book a Demo + Login — has an
   intrinsic minimum of about 1062px. It used to hold on down to 940px, so
   between roughly 960 and 1080 the header pushed the page wider than the
   viewport and every page scrolled sideways. The row's own minimum measures
   ~1071, and 1080 still left a few pixels short at some window sizes, so the
   drawer takes over at 1100 — verified clean from 930 through 1400. Keep this
   in step with the matchMedia query in main.js that decides hover-vs-click
   dropdowns. */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .header__inner { gap: 14px; }
  .header__login { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-nav);
    padding: 12px 16px 22px;
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 15px; }

  .dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 2px 0 8px 12px;
    padding: 2px 0 2px 8px;
    min-width: 0;
  }
  .nav__item--has-menu.is-open .dropdown { display: block; }
  .dropdown::before { display: none; }
  .dropdown--wide,
  .dropdown--mega { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .hero__media { min-height: 330px; order: -1; }
  .hero__photo {
    position: relative;
    inset: auto;
    height: 330px;
    border-radius: var(--radius-lg);
  }
  .hero__text { max-width: none; }
  .stat-card--a { top: 5%; left: 4%; }
  .stat-card--b { top: auto; bottom: 6%; left: 4%; }
  .stat-card--c { display: none; }

  .cta { grid-template-columns: 1fr; gap: 30px; padding: 30px 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .app { grid-template-columns: 1fr; padding: 34px 24px; }
  .app__phones { height: 420px; margin-top: 10px; }
  .phone--a { transform: scale(.82); transform-origin: top left; }
  .phone--b { transform: scale(.82); transform-origin: top left; left: 40%; top: 40px; }
  .people { grid-template-columns: repeat(2, 1fr); }

  .hub { display: none; }
  .hub-fallback { display: grid; }
}

@media (max-width: 720px) {
  .section { padding-block: 54px; }
  .grid-5 { grid-template-columns: 1fr 1fr; }
  .rail__step { flex: 0 0 calc(33.333% - 12px); }
  .form-grid { grid-template-columns: 1fr; }
  .stat-card--b { width: 220px; }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .app__points { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .shots__tab { padding: 15px 8px 16px; font-size: 13.5px; gap: 8px; }
  .shots__tab svg { width: 23px; height: 23px; }

  .feature-card { flex-direction: column; text-align: center; min-height: 0; gap: 16px; }
  .feature-card__icon { margin: 0 auto 18px; }
  .feature-card__art { margin: 0 auto; }

  .app__phones { height: 310px; }
  .phone--a { transform: scale(.68); transform-origin: top left; left: 0; top: -6px; }
  .phone--b { transform: scale(.6); transform-origin: top left; left: 44%; top: 18px; }
}

@media (max-width: 520px) {
  .container { padding-inline: 18px; }
  .brand__logo { height: 32px; }
  .grid-5 { grid-template-columns: 1fr; }
  .rail__step { flex: 0 0 calc(50% - 12px); }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 100%; }
  .stat-card--b { width: 200px; }
  .form-card { padding: 20px; }

  .metrics { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }
  .shots__stage { padding: 10px; }
  .shots__tab { padding: 13px 5px 14px; font-size: 12px; gap: 7px; }
  .shots__tab svg { width: 20px; height: 20px; }

  .app { padding: 26px 18px; }
  .app__phones { height: 270px; }
  .phone--a { transform: scale(.58); transform-origin: top left; left: -2%; top: -4px; }
  .phone--b { transform: scale(.5); transform-origin: top left; left: 46%; top: 14px; }
}

/* ---------- 15b. Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(var(--brand-rgb), .3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s, background .18s ease;
}
.back-to-top svg { width: 19px; height: 19px; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--brand-600); }

/* ==========================================================================
   16. Inner-page blocks (About Us, Integrations)
   ========================================================================== */

/* ---------- 16.1 Blue page hero banner ---------- */
.pagehero {
  position: relative;
  overflow: hidden;
  /* ends on --brand-600, not --brand: soft-white hero copy needs a dark enough floor for AA */
  background: linear-gradient(100deg, var(--brand-900) 0%, var(--brand-800) 44%, var(--brand-600) 100%);
  color: #fff;
  padding-block: 74px 82px;
  text-align: center;
}
.pagehero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: skewY(-7deg);
}
.pagehero__art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(46%, 540px);
  opacity: .3;
}
.pagehero__inner { position: relative; z-index: 1; }

.pagehero__eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c7e4f8;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, .45);
  margin-bottom: 24px;
}
.pagehero__title { color: #fff; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.14; }
.pagehero__text {
  margin: 20px auto 0;
  max-width: 640px;
  font-size: 16px;
  color: rgba(255, 255, 255, .84);
}
.pagehero__crumbs {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
}
.pagehero__crumbs a:hover { color: #fff; }
.pagehero__crumbs .dot { color: rgba(255, 255, 255, .5); }

/* ---------- 16.2 Pill label ---------- */
.pill {
  display: inline-block;
  padding: 7px 16px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--brand-050);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- 16.3 Who we are (copy + tab card) ---------- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;   /* tab card sits centred against the taller copy+mockup column */
}
.about-intro__title { font-size: clamp(23px, 2.7vw, 31px); margin-bottom: 16px; }
.about-intro__text { font-size: 15.5px; margin-bottom: 14px; }
.about-intro__text b { color: var(--brand); font-weight: 800; }
.about-intro__media { margin-top: 30px; }

/* ---------- 16.3b Laptop + phone product shot ----------
   One image (assets/img/about-devices.jpeg). Overwrite the file to change the
   artwork; nothing here needs touching. It renders at 534px from a 1600px
   source, so it downscales on every display and stays sharp. */
.devices { display: block; width: 100%; max-width: 534px; height: auto; }

/* ---------- 16.4 Tab card (Mission / Vision / Why) ---------- */
.tabsc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 8px 30px 24px;
}
.tabsc__nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}
.tabsc__btn {
  flex: 1;
  padding: 18px 6px 15px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.tabsc__btn:hover { color: var(--brand); }
.tabsc__btn.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* min-height is sized to the longest of the three panels so switching tabs
   never changes the card's height; content is centred in whatever slack is left */
.tabsc__panel { display: none; padding: 34px 4px 10px; min-height: 262px; }
.tabsc__panel.is-active {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  animation: tabFade .3s ease both;
}
@keyframes tabFade { from { opacity: 0; transform: translateY(8px); } }

.tabsc__icon {
  width: 62px; height: 62px;
  flex: none;   /* keep the circle round as a column flex item */
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
  margin-bottom: 22px;
}
.tabsc__icon svg { width: 27px; height: 27px; }
.tabsc__title { font-size: 21px; margin-bottom: 12px; }
.tabsc__text { font-size: 15.5px; }

.tabsc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
}
.tabsc__arrow {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.tabsc__arrow svg { width: 17px; height: 17px; }
.tabsc__arrow:hover { border-color: var(--brand); background: var(--brand-050); }
.tabsc__dots { display: flex; gap: 8px; }
.tabsc__dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background .2s ease, width .2s ease;
}
.tabsc__dots i.is-active { background: var(--brand); width: 20px; border-radius: 999px; }

/* ---------- 16.5 Stat bar ---------- */
.statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 46px;
  padding: 26px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.statbar__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: 18px;
  border-right: 1px solid var(--line-soft);
}
.statbar__item:last-child { border-right: 0; }
.statbar__icon {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
}
.statbar__icon svg { width: 23px; height: 23px; }
.statbar__num { font-size: 23px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.statbar__label { font-size: 13px; color: var(--body); margin-top: 2px; }

/* Four across needs roughly 800px of viewport: each item is a 50px icon plus
   a label that will not wrap below its longest word, so the 1fr tracks cannot
   shrink past that min-content floor and the bar pushed the page sideways.
   Drop to two across well before the floor rather than at 720px. */
@media (max-width: 900px) {
  .statbar { grid-template-columns: 1fr 1fr; row-gap: 22px; padding: 22px 12px; }
  .statbar__item:nth-child(2n) { border-right: 0; }
}

/* ---------- 16.6 Journey timeline ---------- */
.journey { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.journey::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 122px;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--brand-rgb), 0), var(--brand) 12%, var(--brand) 88%, rgba(var(--brand-rgb), 0));
}
.journey__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.journey__icon {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.journey__icon svg { width: 40px; height: 40px; }
.journey__step:hover .journey__icon { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.journey__stem { width: 2px; height: 22px; background: var(--brand-100); }
.journey__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--brand);
  position: relative;
  z-index: 1;
}
.journey__year { margin-top: 18px; font-size: 19px; font-weight: 800; color: var(--brand); }
.journey__label { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.journey__text { margin-top: 8px; font-size: 12.5px; color: var(--body); line-height: 1.55; padding-inline: 6px; }

/* ---------- 16.7 Client logo grid ---------- */
/* Four across rather than six: at six the cell is ~187px wide, so a landscape
   logo is width-constrained to about 49px tall and reads as a stamp. Four
   gives ~287px, and with 10px cell padding the artwork renders near its full
   260px width — height is what caps it, not width. */
.clients { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.clients__item {
  display: grid;
  place-content: center;
  text-align: center;
  min-height: 100px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.clients__item:hover { transform: translateY(-4px); border-color: var(--brand-100); box-shadow: var(--shadow-float); }

/* Logos sit muted so the wall reads as one texture rather than a colour
   clash, and come up to full strength on hover. Height is capped and width
   is free, so logos of any proportion sit on a common optical size.
   Box-sizing is border-box, so the cell's 100px min-height leaves 78px inside
   (10px padding + 1px border each side) — the cap stays under that. */
.clients__logo {
  width: 100%;
  max-height: 72px;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.clients__item:hover .clients__logo { filter: none; opacity: 1; }

/* fallback when a client has no logo file */
.clients__name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.clients__type { display: block; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

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

/* ---------- 16.8 Awards ---------- */
.awards {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.awards__title { font-size: clamp(22px, 2.5vw, 29px); margin-bottom: 18px; }
.awards__rule { width: 40px; height: 3px; background: var(--brand); border-radius: 2px; margin-bottom: 18px; }
.awards__text { font-size: 15px; margin-bottom: 24px; }
.awards__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.awards__item { text-align: center; padding: 10px 12px; border-right: 1px solid var(--line); }
.awards__item:last-child { border-right: 0; }
.awards__badge {
  width: 74px; height: 74px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.awards__badge svg { width: 34px; height: 34px; }
.awards__year {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--brand-050);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 800;
}
.awards__name { margin-top: 10px; font-size: 14px; font-weight: 800; color: var(--ink); }
.awards__for { margin-top: 5px; font-size: 12px; color: var(--body); line-height: 1.45; }

/* ---------- 16.9 FAQ accordion ---------- */
.faq { display: grid; grid-template-columns: 380px 1fr; gap: 54px; align-items: start; }
.faq__title { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 18px; }
.faq__text { font-size: 15.5px; margin-bottom: 26px; }

.faq__list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__item:last-child { border-bottom: 0; }
.faq__item.is-open { background: var(--brand-050); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.faq__num { color: var(--brand); font-weight: 800; flex: none; }
.faq__qt { flex: 1; line-height: 1.45; }
.faq__ic {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
  transition: background .2s ease, color .2s ease, transform .25s ease;
}
.faq__ic svg { width: 16px; height: 16px; }
.faq__item.is-open .faq__ic { background: var(--brand); color: #fff; transform: rotate(-180deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 24px 24px 44px; font-size: 15px; }

/* ---------- 16.10 Integration tool tiles ---------- */
.itools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.itool {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 20px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.itool:hover { transform: translateY(-5px); border-color: var(--brand-100); box-shadow: var(--shadow-float); }
/* neutral chip — the logos inside carry their own brand colour */
.itool__icon {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  margin-bottom: 20px;
}
.itool__icon img { width: 40px; height: 40px; object-fit: contain; display: block; }
.itool__name { font-size: 17px; }
.itool__desc { margin-top: 8px; font-size: 13px; color: var(--body); line-height: 1.5; }

/* ---------- 16.11 API / custom integration band ---------- */
.apiband {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 40px 44px;
  border-radius: var(--radius-xl);
  background: linear-gradient(100deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
  color: #fff;
}
.apiband__title { color: #fff; font-size: clamp(21px, 2.4vw, 28px); margin-bottom: 12px; }
.apiband__text { color: rgba(255, 255, 255, .82); font-size: 15px; max-width: 620px; }
.apiband__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.apiband__tags span {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 12.5px;
  font-weight: 700;
}
.apiband .btn--ghost { border-color: #fff; }

/* ---------- 16.12 Inner-page responsive ---------- */
@media (max-width: 1080px) {
  .about-intro { grid-template-columns: 1fr; gap: 36px; }
  .journey { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .journey::before { display: none; }
  .clients { grid-template-columns: repeat(3, 1fr); }
  .awards { grid-template-columns: 1fr; padding: 34px; }
  .awards__list { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .awards__item:nth-child(3n) { border-right: 0; }
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .itools { grid-template-columns: repeat(3, 1fr); }
  .apiband { grid-template-columns: 1fr; padding: 32px 26px; }
}

@media (max-width: 720px) {
  .pagehero { padding-block: 52px 58px; }
  .pagehero__art { width: 62%; opacity: .18; }
  .tabsc { padding: 6px 20px 20px; }
  .tabsc__nav { gap: 2px; }
  .tabsc__btn { font-size: 13.5px; padding: 14px 4px 12px; }
  .journey { grid-template-columns: repeat(2, 1fr); }
  .clients { grid-template-columns: repeat(2, 1fr); }
  .awards__list { grid-template-columns: repeat(2, 1fr); }
  .awards__item:nth-child(3n) { border-right: 1px solid var(--line); }
  .awards__item:nth-child(2n) { border-right: 0; }
  .itools { grid-template-columns: repeat(2, 1fr); }
  .faq__q { padding: 18px 16px; font-size: 15px; }
  .faq__a p { padding: 0 16px 20px 16px; }
}

/* the product shot is an image now — width:100% scales it, so the old
   transform + negative-margin pair for narrow screens is gone */

@media (max-width: 520px) {
  .statbar { grid-template-columns: 1fr; }
  .statbar__item { border-right: 0; }
  .journey { grid-template-columns: 1fr; }
  .clients { grid-template-columns: 1fr 1fr; }
  .itools { grid-template-columns: 1fr; }
  .awards__list { grid-template-columns: 1fr; }
  .awards__item { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
  .awards__item:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Deep blueprint hero — module pages, plus any .page-hero opting in with
   .page-hero--dark (industries listing). The gradient is the same one
   mobile-app.php paints behind .bsm-hero, so the dark bands all match.

   Opt-in by design: the other .page-hero users (roles, blogs) deliberately
   keep the pale treatment defined earlier in this file. Appended here so it
   wins over that shared rule at equal specificity.
   ========================================================================== */
.module-hero,
.page-hero--dark {
  position: relative;
  overflow: hidden;
  padding-block: 68px 74px;
  border-bottom: 0;
  background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-900) 100%);
}

/* blueprint grid, faded out toward the edges */
.module-hero::before,
.page-hero--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 42%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 42%, #000 30%, transparent 80%);
  pointer-events: none;
}

.module-hero > .container,
.page-hero--dark > .container { position: relative; z-index: 1; }

.module-hero .eyebrow,
.page-hero--dark .eyebrow { color: rgba(255, 255, 255, .85); }
.module-hero .eyebrow::after {
  content: "";
  display: block;
  width: 248px;
  max-width: 60%;
  height: 1px;
  margin: 15px auto 0;
  background: rgba(255, 255, 255, .34);
}

/* .page-hero__title/__text share a rule with their .module-hero twins earlier
   in the file, so the dark colours have to be re-stated for the opted-in page */
.module-hero__title,
.page-hero--dark .page-hero__title { color: #fff; }
.module-hero__text,
.page-hero--dark .page-hero__text  { color: rgba(255, 255, 255, .88); }

/* buttons invert on the dark band */
.module-hero .btn--primary,
.page-hero--dark .btn--primary {
  background: #fff;
  color: var(--brand);
  border-color: #fff;
  box-shadow: 0 8px 20px rgba(8, 48, 79, .28);
}
.module-hero .btn--primary:hover,
.page-hero--dark .btn--primary:hover {
  background: transparent;
  color: #fff;
  box-shadow: none;
}
.module-hero .btn--ghost,
.page-hero--dark .btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.module-hero .btn--ghost:hover,
.page-hero--dark .btn--ghost:hover {
  background: #fff;
  color: var(--brand);
  border-color: #fff;
}
.module-hero .btn:focus-visible,
.page-hero--dark .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 768px) {
  .module-hero,
  .page-hero--dark { padding-block: 48px 54px; }
  .module-hero .eyebrow::after { width: 180px; margin-top: 12px; }
}

/* ==========================================================================
   Module pages — workflow stepper
   A tablist of stages above a detail panel. All classes are `mstep-` scoped
   so nothing here can collide with the shared components above.
   ========================================================================== */
/* One segmented bar rather than separate cards — matches the activity tabs on
   mobile-app.php. The 1px grid gap over a --line background draws the dividers,
   so they land correctly both in a single row and once the bar wraps. */
.mstep-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  margin-bottom: 22px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mstep-chip {
  position: relative;
  min-width: 0;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px 10px 15px;
  background: var(--surface);
  border: 0;
  box-shadow: inset 0 -3px 0 transparent;
  color: var(--body);
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.mstep-chip:hover { background: var(--surface-alt); }
.mstep-chip:focus-visible { outline: 2px solid var(--ms-accent, var(--brand)); outline-offset: -3px; }

.mstep-chip__ico {
  display: grid;
  place-items: center;
  color: var(--ms-accent, var(--brand));
}
.mstep-chip__ico svg { width: 24px; height: 24px; }

.mstep-chip__name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: inherit;
}

/* active step: accent label plus the underline sitting on the bar's edge */
.mstep-chip[aria-selected="true"] {
  color: var(--ms-accent, var(--brand));
  box-shadow: inset 0 -3px 0 var(--ms-accent, var(--brand));
}

/* ---------- detail panel ---------- */
.mstep-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
  padding: 44px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.mstep-panel[hidden] { display: none; }

.mstep-kicker {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}
.mstep-kicker span { display: inline-block; }
.mstep-kicker span::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand);
  margin-top: 10px;
}

.mstep-title {
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ink);
  margin-bottom: 12px;
}
.mstep-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body);
  max-width: 46ch;
}
.mstep-list {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.mstep-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}
.mstep-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}

/* ---------- illustrative preview ---------- */
/* One image per step (assets/img/modules/<module>-<n>.svg). Overwrite a file
   to change that step's picture — nothing here needs touching. */
.mstep-viz { display: block; }
.mstep-shot { display: block; width: 100%; height: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .mstep-panel { grid-template-columns: 1fr; gap: 34px; padding: 30px; }
  .mstep-text { max-width: none; }
  .mstep-viz { max-width: 520px; }
}
@media (max-width: 860px) {
  /* the bar wraps to two rows rather than scrolling; the 1px grid gap keeps
     drawing the dividers, now in both directions */
  .mstep-rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }
  .mstep-chip { padding: 16px 10px 14px; }
}
@media (max-width: 640px) {
  .mstep-panel { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .mstep-chip { transition: none; }
}

/* ==========================================================================
   Role pages — split hero, workflow strip, module cards, team grid
   All classes are `rhero- / rcard- / rflow- / rmod- / rteam-` scoped.
   ========================================================================== */
.rhero { position: relative; overflow: hidden; padding-block: 40px 60px; background: #fff; }
/* Art column trimmed to suit the 460px cap on .rhero__shot — the copy takes
   the space the art no longer needs rather than leaving a gap beside it. */
.rhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 56px; align-items: center; }
.rhero__title { font-size: clamp(30px, 3.7vw, 44px); letter-spacing: -.03em; line-height: 1.14; margin-top: 6px; }
.rhero__text { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--body); max-width: 52ch; }
.rhero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Hero art is one image — swap the per-role file in assets/img/RolesBanner/
   and nothing here changes. */
.rhero__art { position: relative; }
/* The supplied artwork is only 561x421, so rendering it at 561 CSS px left the
   browser stretching it on any scaled display (Windows 125/150%, retina) and
   it went soft. Holding it at 460 means even those screens DOWNSCALE the 1122px
   @2x file rather than upscaling — downscaling always reads sharp. Raising this
   number is what makes the art blurry again; only do it with bigger source art. */
.rhero__shot { display: block; width: 100%; max-width: 460px; height: auto; margin-inline: auto; }

/* ---------- workflow strip ---------- */
.rflow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; list-style: none; margin: 0; padding: 0; }
.rflow__step { position: relative; flex: 0 0 11.11%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px; }
.rflow__step:not(:last-child)::after {
  content: ""; position: absolute; top: 30px; left: calc(50% + 34px); width: calc(100% - 68px);
  border-top: 1.5px dashed var(--brand-100);
}
.rflow__badge {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--brand);
  box-shadow: var(--shadow-card); position: relative; z-index: 1;
  transition: border-color .2s ease, transform .2s ease;
}
.rflow__badge svg { width: 26px; height: 26px; }
.rflow__step:hover .rflow__badge { border-color: var(--brand); transform: translateY(-3px); }
.rflow__label { font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; color: var(--ink); }

/* ---------- module cards ---------- */
.rmods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.rmod { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow-card); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.rmod:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }
.rmod__head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.rmod__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex: none; }
.rmod__ico svg { width: 21px; height: 21px; }
.rmod__title { font-size: 15px; line-height: 1.25; }
.rmod__list { display: grid; gap: 9px; flex: 1; }
.rmod__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--body); }
.rmod__list svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.rmod__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13px; font-weight: 700; }
.rmod__link svg { width: 15px; height: 15px; transition: transform .2s ease; }
.rmod__link:hover svg { transform: translateX(3px); }

.rmod.acc-blue   { --rm: var(--c-blue);   --rm-bg: var(--c-blue-bg); }
.rmod.acc-green  { --rm: var(--c-green);  --rm-bg: var(--c-green-bg); }
.rmod.acc-purple { --rm: var(--c-purple); --rm-bg: var(--c-purple-bg); }
.rmod.acc-orange { --rm: var(--c-orange); --rm-bg: var(--c-orange-bg); }
.rmod.acc-teal   { --rm: var(--c-teal);   --rm-bg: var(--c-teal-bg); }
.rmod .rmod__ico   { background: var(--rm-bg); color: var(--rm); }
.rmod .rmod__list svg { color: var(--rm); }
.rmod .rmod__link  { color: var(--rm); }
.rmod:hover        { border-color: var(--rm); }

/* ---------- every team, one platform ---------- */
.rteam { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.rteam__card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 18px 20px; box-shadow: var(--shadow-card); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.rteam__card:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }
.rteam__card.is-current { border-color: var(--brand); background: var(--brand-050); }
.rteam__photo { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--brand-050); border: 3px solid var(--surface); box-shadow: 0 6px 18px rgba(var(--ink-rgb), .10); overflow: hidden; }
.rteam__photo img { width: 100%; height: 100%; object-fit: cover; }
.rteam__name { margin-top: 15px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.rteam__text { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--body); }
.rteam__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.rteam__link svg { width: 14px; height: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .rmods, .rteam { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rflow__step { flex: 0 0 20%; }
  .rflow__step::after { display: none; }
}
@media (max-width: 900px) {
  .rhero__grid { grid-template-columns: 1fr; gap: 40px; }
  .rhero__text { max-width: none; }
  /* single column now — cap the art so it does not tower over the copy */
  .rhero__art { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .rmods, .rteam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rflow__step { flex: 0 0 33.33%; }
}
@media (max-width: 460px) {
  .rmods, .rteam { grid-template-columns: 1fr; }
  .rflow__step { flex: 0 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .rmod, .rteam__card, .rflow__badge { transition: none; }
}

/* ==========================================================================
   18. Industry pages — hero, pillars and the project lifecycle wheel
   ========================================================================== */

/* ---------- 18.1 Hero: copy column + full-bleed artwork ---------- */
.ihero { position: relative; background: #fff; overflow: hidden; }

/* the right cell is left empty on purpose — the artwork is placed behind it
   so it can bleed past the container to the edge of the viewport */
.ihero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 540px;
  padding-block: 54px 60px;
}
.ihero__copy { padding-right: 48px; }

.ihero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.ihero__media img { width: 100%; height: 100%; object-fit: cover; }
/* softens the seam between the white copy column and the artwork */
.ihero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .55) 9%, rgba(255, 255, 255, 0) 27%);
  pointer-events: none;
}

.ihero__crumbs { margin-bottom: 22px; }
.ihero__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; list-style: none; margin: 0; padding: 0; }
.ihero__crumbs a { color: var(--muted); font-weight: 600; }
.ihero__crumbs a:hover { color: var(--brand); }
.ihero__crumbs li[aria-current] { color: var(--ink); font-weight: 700; }
.ihero__crumbs .sep { color: #bfcbd8; }

.ihero__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ihero__label {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}
.ihero__title {
  margin-top: 18px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.ihero__title span { color: var(--brand); }
.ihero__text { margin-top: 20px; font-size: 16.5px; line-height: 1.7; max-width: 44ch; }
.ihero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- 18.2 What you get — copy column + four pillars ---------- */
.ipillars { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.ipillars__title { font-size: clamp(23px, 2.6vw, 30px); }
.ipillars__text { margin-top: 16px; font-size: 14.5px; line-height: 1.75; }

.ipillars__items { display: grid; grid-template-columns: repeat(4, 1fr); }
.ipillar { padding: 4px 22px 0; border-left: 1px solid var(--line); }
.ipillar__icon {
  width: 62px;
  height: 62px;
  margin-bottom: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--brand-100);
  background: #fff;
  color: var(--brand);
}
.ipillar__icon svg { width: 28px; height: 28px; }
.ipillar__name { font-size: 14.5px; font-weight: 800; margin-bottom: 10px; }
.ipillar__text { font-size: 13px; line-height: 1.7; }

/* ---------- 18.3 Project lifecycle wheel ----------
   Eight stages on one ring. Node offsets come from the template as --x/--y in
   px, so the ring geometry is identical in every browser. Below 1000px the
   same markup falls back to a plain card list. */
.iflow { overflow: hidden; }

.iwheel { position: relative; width: 100%; max-width: 960px; height: 680px; margin: 6px auto 0; }

.iwheel__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 470px;
  height: 470px;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.iwheel__track { fill: none; stroke: rgba(var(--brand-rgb), .34); stroke-width: 2.2; stroke-dasharray: 4 10; stroke-linecap: round; }
.iwheel__arrow { fill: none; stroke: var(--brand); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.iwheel__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 268px;
  height: 268px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #fff 48%, var(--brand-050) 100%);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), .1), 0 18px 46px rgba(var(--ink-rgb), .09);
}
/* wordmark is ~2.9:1, so it sits inside the circle's widest band rather than filling it */
.iwheel__hub-logo { width: 152px; height: auto; display: block; }
.iwheel__hub-text { margin-top: 12px; font-size: 12.5px; color: var(--body); }

.iwheel__steps { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
/* zero-size anchor point: the dot is centred on it, the label offset from it */
.iwheel__node { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: 0; height: 0; }

.iwheel__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand);
  box-shadow: 0 10px 26px rgba(var(--ink-rgb), .1);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.iwheel__dot svg { width: 32px; height: 32px; }
.iwheel__node:hover .iwheel__dot {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--brand-100);
  box-shadow: 0 14px 32px rgba(var(--brand-rgb), .22);
}

.iwheel__label { position: absolute; top: 50%; transform: translateY(-50%); width: 200px; }
.iwheel__node--r .iwheel__label { left: 54px; text-align: left; }
.iwheel__node--l .iwheel__label { right: 54px; text-align: right; }
.iwheel__node--b .iwheel__label { left: 50%; top: 56px; width: 230px; transform: translateX(-50%); text-align: center; }
/* stage 1 sits near the top of the ring — lift its label clear of the arc */
.iwheel__node--lift .iwheel__label { margin-top: -34px; }

.iwheel__name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1.4; }
/* inline-grid rather than a flex child, so a title that wraps keeps the badge
   attached to the first word instead of pinning it to the label's edge */
.iwheel__num {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-right: 8px;
  vertical-align: -3px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}
.iwheel__text { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--body); }

/* ---------- 18.4 Industry page responsive ---------- */
@media (max-width: 1080px) {
  .ipillars { grid-template-columns: 1fr; gap: 30px; }
  .ipillar:first-child { border-left: 0; padding-left: 0; }
}

@media (max-width: 1000px) {
  /* the ring cannot hold its geometry — same eight stages, as a card list */
  .iwheel { max-width: none; height: auto; margin-top: 0; }
  .iwheel__ring { display: none; }
  .iwheel__hub {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    padding: 26px 24px;
    margin-bottom: 20px;
    border-radius: var(--radius-xl);
  }
  .iwheel__steps { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .iwheel__node {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .iwheel__dot { position: static; transform: none; width: 52px; height: 52px; flex: none; box-shadow: none; }
  .iwheel__dot svg { width: 24px; height: 24px; }
  .iwheel__node:hover .iwheel__dot { transform: none; box-shadow: none; }
  .iwheel__node .iwheel__label { position: static; transform: none; width: auto; margin-top: 0; text-align: left; }
}

@media (max-width: 900px) {
  /* column-reverse lifts the artwork above the copy without moving it in the DOM */
  .ihero { display: flex; flex-direction: column-reverse; }
  .ihero__grid { grid-template-columns: 1fr; min-height: 0; padding-block: 28px 44px; }
  .ihero__copy { padding-right: 0; }
  .ihero__media { position: static; width: 100%; height: 300px; }
  .ihero__media::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .92) 100%); }
  .ihero__text { max-width: none; }
}

@media (max-width: 760px) {
  .ipillars__items { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .ipillar { padding-inline: 18px; }
  .ipillar:nth-child(odd) { border-left: 0; padding-left: 0; }
  .iwheel__steps { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .ihero__media { height: 230px; }
  .ihero__actions { gap: 10px; }
  .ihero__actions .btn { flex: 1 1 100%; }
  .ipillars__items { grid-template-columns: 1fr; row-gap: 28px; }
  .ipillar { border-left: 0; padding-inline: 0; }
}

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

/* ==========================================================================
   19. Contact page — reach-out cards, map and message form
   ========================================================================== */

/* ---------- 19.1 Reach-out cards ---------- */
.reach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.reach__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 20px 26px;
  border-radius: var(--radius-lg);
  background: var(--brand-050);
  background: color-mix(in srgb, var(--brand) 5%, #fff);
  border: 1px solid var(--brand-050);
  border-color: color-mix(in srgb, var(--brand) 12%, #fff);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.reach__card:hover { transform: translateY(-4px); border-color: var(--brand-100); box-shadow: var(--shadow-float); }
.reach__icon {
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  box-shadow: 0 4px 14px rgba(var(--brand-rgb), .15);
}
.reach__icon svg { width: 24px; height: 24px; }
.reach__label { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.reach__text { font-size: 12.5px; line-height: 1.75; color: var(--body); }
.reach__text a { font-weight: 600; }
.reach__text a:hover { color: var(--brand); }

.reach__socials { display: flex; gap: 8px; }
.reach__socials a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.reach__socials a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.reach__socials svg { width: 15px; height: 15px; }

/* ---------- 19.2 Map + message form ---------- */
.csplit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }

/* The Maps embed sizes its canvas from the iframe's own layout box, and an
   absolutely-positioned iframe leaves it measuring zero — the frame loads but
   no tiles paint. Keep the iframe in flow and let a grid stretch it instead. */
.cmap {
  --map-h: 470px;
  display: grid;
  min-height: var(--map-h);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.cmap iframe { display: block; width: 100%; height: 100%; min-height: var(--map-h); border: 0; }

.cpanel {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--brand-050);
  background: color-mix(in srgb, var(--brand) 5%, #fff);
  border: 1px solid var(--brand-050);
  border-color: color-mix(in srgb, var(--brand) 12%, #fff);
}
.cpanel__title { font-size: clamp(17px, 1.9vw, 20px); }
.cpanel__text { margin-top: 7px; font-size: 13px; color: var(--body); }

/* pill fields, so the panel reads as one soft stack rather than a boxy form */
.cform { display: grid; gap: 12px; margin-top: 22px; }
.cform .field { gap: 5px; }
.cform .field input,
.cform .field select { padding: 13px 20px; border-radius: 999px; }
.cform .field select { padding-right: 38px; background-position: right 16px center; }
.cform .field textarea { padding: 14px 20px; border-radius: 18px; min-height: 118px; }
.cform .form-status { text-align: left; margin-top: 4px; }

.btn--pill { border-radius: 999px; gap: 12px; padding: 7px 8px 7px 24px; }
.btn__go {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.btn__go svg { width: 15px; height: 15px; }

/* ---------- 19.3 Contact page responsive ---------- */
@media (max-width: 1080px) {
  .reach { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .csplit { grid-template-columns: 1fr; }
  /* form first on a phone; the map follows it */
  .cmap { --map-h: 340px; order: 2; }
}

@media (max-width: 520px) {
  .reach { grid-template-columns: 1fr; }
  .cpanel { padding: 22px 18px; }
  .btn--pill { width: 100%; }
}

/* ==========================================================================
   20. Media & awards page
   ========================================================================== */

/* title-only variant of the blue banner — no eyebrow, no standfirst */
.pagehero--short { padding-block: 56px 62px; }
.pagehero--short .pagehero__crumbs { margin-top: 14px; }

/* ---------- 20.1 Press coverage cards ---------- */
.media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.media__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.media__card:hover { transform: translateY(-4px); border-color: var(--brand-100); box-shadow: 0 14px 30px rgba(var(--ink-rgb), .09); }

.media__cover { padding: 14px 14px 0; }
/* height:auto is required — the img's height attribute is a presentational
   hint that would otherwise win over aspect-ratio and stretch the cover */
.media__cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.media__body { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 22px; }
.media__title { font-size: 13.5px; font-weight: 800; color: var(--brand); line-height: 1.45; }
.media__date { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.media__date svg { width: 13px; height: 13px; flex: none; color: var(--brand); }
.media__lead { font-size: 12px; font-weight: 800; color: var(--ink-soft); line-height: 1.55; }
.media__text { font-size: 11.5px; line-height: 1.75; color: var(--body); }
.media__more { margin-top: auto; padding-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--brand); }
.media__more:hover { text-decoration: underline; }

/* ---------- 20.2 Awards ---------- */
/* Cards on plain white — the warm tint lives on the cards themselves, so the
   band sits quietly between the media grid and the demo form. */
.awards-band { background: var(--surface); }

.awards-band__head { text-align: center; margin-bottom: 44px; }
.awards-band__title {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -.03em;
}
.awards-band__title span { color: var(--brand); }
.awards-band__sub { margin-top: 12px; font-size: 16px; color: var(--body); }

.awardgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.award {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 20px 24px;
  /* brand blue tint rather than the old orange — keeps the awards band in the
     same palette as the rest of the site, alongside the blue trophy art */
  background: var(--c-blue-bg);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.award:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(var(--ink-rgb), .1); }

/* year pinned to the top, title + credit pushed to the bottom */
.award__copy { align-self: stretch; display: flex; flex-direction: column; }
.award__year { font-size: 17px; font-weight: 700; color: var(--brand); }
.award__name {
  margin-top: auto;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--ink);
}
.award__by { margin-top: 7px; font-size: 15px; color: var(--muted); }

/* the awarding bodies' own badge art — square, so the slot is square too */
.award__badge {
  width: 100%;
  max-width: 104px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  justify-self: center;
  transition: transform .25s ease;
}
.award:hover .award__badge { transform: scale(1.06); }

/* ---------- 20.3 Media & awards responsive ---------- */
@media (max-width: 980px) {
  .media { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .awardgrid { grid-template-columns: 1fr; gap: 18px; }
  .award { min-height: 132px; }
}

@media (max-width: 560px) {
  .media { grid-template-columns: 1fr; }
  .media__cover img { aspect-ratio: 4 / 3; }
  .award { grid-template-columns: minmax(0, 1fr) 82px; gap: 14px; padding: 18px 18px; }
  .award__badge { max-width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .award, .award__badge, .media__card { transition: none; }
}

/* ==========================================================================
   21. Our Clients page
   ========================================================================== */

/* the shared stat bar carries a top margin for the About layout — not wanted
   when it is the first thing in its own section */
.statbar--flush { margin-top: 0; }

/* ---------- 21.1 Client roster ---------- */
.clientgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.clientcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.clientcard:hover { transform: translateY(-5px); border-color: var(--brand-100); box-shadow: var(--shadow-float); }

/* Logo plate. The lockups already carry the company name, so the card prints
   no caption — a plate rather than a circle keeps wide wordmarks uncropped. */
.clientcard__logo {
  width: 100%;
  height: 96px;
  padding: 10px 14px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ic) 8%, #fff);
  transition: transform .2s ease;
}
.clientcard:hover .clientcard__logo { transform: scale(1.04); }
.clientcard__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Fallback for clients with no logo file — the name set in type, inside the
   same plate, so those cells read as part of the grid rather than as a gap. */
.clientcard__logo--text { color: var(--ic); }
.clientcard__logo--text b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.clientcard__logo--text small { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- 21.2 Sector chips ---------- */
.sectorchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.sectorchip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sectorchip:hover { transform: translateY(-3px); border-color: var(--brand-100); box-shadow: var(--shadow-card); }
.sectorchip__icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
}
.sectorchip__icon svg { width: 21px; height: 21px; }
.sectorchip__label { flex: 1; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.sectorchip__go { width: 16px; height: 16px; flex: none; color: var(--brand); transition: transform .2s ease; }
.sectorchip:hover .sectorchip__go { transform: translateX(4px); }

/* ---------- 21.3 Our Clients responsive ---------- */
@media (max-width: 1080px) {
  .clientgrid { grid-template-columns: repeat(3, 1fr); }
  .sectorchips { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .clientgrid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .clientcard { padding: 16px 14px; }
  .clientcard__logo { height: 72px; padding: 8px 10px; }
  .clientcard__logo--text b { font-size: 15px; }
  .sectorchips { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .clientgrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .clientcard, .clientcard__logo, .sectorchip, .sectorchip__go { transition: none; }
}

/* ==========================================================================
   22. Blog — listing, cards and article
   ========================================================================== */

/* ---------- 22.1 Category chips ---------- */
.blogcats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.blogcat {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--body);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.blogcat:hover { border-color: var(--brand-100); background: var(--brand-050); color: var(--brand); }
.blogcat.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.blogcats--stack { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 0; }
.blogcats--stack .blogcat { width: 100%; }

/* Post count beside a chip label — reads as a quiet superscript, not a badge */
.blogcat__n { font-size: 11.5px; font-weight: 700; opacity: .55; margin-left: 3px; }

.blogempty { text-align: center; font-size: 15px; color: var(--body); padding-block: 40px; }
.blogempty a { color: var(--brand); font-weight: 700; }

/* ---------- 22.1b Paging ---------- */
.blogpager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.blogpager__nums { display: flex; flex-wrap: wrap; gap: 6px; }

.blogpager__n,
.blogpager__step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--body);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.blogpager__n svg,
.blogpager__step svg { width: 15px; height: 15px; flex: none; }

a.blogpager__n:hover,
a.blogpager__step:hover { border-color: var(--brand-100); background: var(--brand-050); color: var(--brand); }

.blogpager__n.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.blogpager__step.is-off { opacity: .4; }

/* ---------- 22.1c Authoring notices (draft preview, content warnings) ---------- */
.post__draft,
.blogwarn {
  border: 1px solid var(--brand-100);
  background: var(--brand-050);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}
.post__draft { margin-top: 24px; }
.post__draft code,
.blogwarn code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: #fff;
  border: 1px solid var(--brand-100);
  border-radius: 5px;
  padding: 1px 5px;
}
.blogwarn ul { margin: 8px 0 0; padding-left: 20px; }
.blogwarn li { margin-top: 3px; }

/* ==========================================================================
   23. Dark hero panel — homepage only (body.home-dark)
   --------------------------------------------------------------------------
   The header keeps the site's standard white bar; below it the hero sits as a
   rounded dark panel inset from the page edges, so the white page reads as the
   mat around it. .hero already carries overflow:hidden, which is what clips the
   grid and the vignette to the rounded corners.

   Nothing here applies without .home-dark on <body>, which only index.php
   sets, so every other page keeps its full-bleed hero.
   ========================================================================== */
.home-dark {
  --band-ink: #ffffff;
  --band-ink-soft: rgba(255, 255, 255, .82);
  --band-accent: #8ecbff;          /* highlighted words, links on the panel */
}

/* The panel. A single 135° two-stop gradient (what mobile-app.php uses) goes
   flat and banded once it has to cover a 1900px-wide hero, so this builds the
   light the way a photograph would: a deep navy base, a bright key light off
   the top-left behind the headline, and a cooler fill light bottom-right to
   stop the far corner going dead. */
.home-dark .hero {
  --panel-top: 20px;
  --panel-tail: 22px;   /* white left showing under the panel at the fold */
  margin: var(--panel-top) clamp(14px, 2.2vw, 30px) 0;
  border-radius: clamp(22px, 2.6vw, 36px);
  /* stacked layout below 941px; kept tight so the phone hero stays short */
  padding-block: 30px 36px;
  box-shadow: 0 26px 64px rgba(4, 23, 42, .26);
  /* the panel is already inset, so its inner gutter can be tighter than the
     full-bleed value .hero sets for every other page */
  --hero-pad: clamp(22px, 3.4vw, 60px);
  background-color: #04172a;
  background-image:
    radial-gradient(1150px 760px at 14% 4%,  rgba(86, 186, 255, .52), rgba(86, 186, 255, 0) 58%),
    radial-gradient(920px 660px at 88% 84%,  rgba(27, 117, 186, .50), rgba(27, 117, 186, 0) 62%),
    linear-gradient(168deg, #0a3a66 0%, #072743 48%, #04172a 100%);
}

/* Faint engineering grid. Reuses the ::before the light theme puts here as a
   blurred blob, so every property that shaped that blob — the offsets, the
   440px box, the 50% radius, the 70px blur — has to be unwound. The mask
   fades it out before it reaches the copy, so it never fights the headline. */
.home-dark .hero::before {
  display: block;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  filter: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(115% 85% at 50% 0%, #000 30%, transparent 76%);
          mask-image: radial-gradient(115% 85% at 50% 0%, #000 30%, transparent 76%);
}

/* Settles the bottom edge into a defined line against the white logo strip
   below, instead of the gradient just stopping mid-tone. */
.home-dark .hero::after {
  display: block;
  inset: auto 0 0 0;
  width: auto;
  height: 180px;
  border-radius: 0;
  filter: none;
  background: linear-gradient(180deg, rgba(4, 23, 42, 0), rgba(4, 23, 42, .55));
}

/* The header is deliberately left alone — it keeps the shared white bar, dark
   nav links and brand-blue CTA that every other page uses. Only the panel
   below it is dark, so none of that needs reversing out. */

/* ---- hero copy on the panel ---- */
.home-dark .hero .eyebrow { color: var(--band-accent); }
.home-dark .hero__title { color: var(--band-ink); }
.home-dark .hero__title span { color: var(--band-accent); }
.home-dark .hero__text { color: var(--band-ink-soft); }
.home-dark .hero__highlights li { color: rgba(255, 255, 255, .9); }
.home-dark .hero__highlights svg { color: #4ade80; }   /* --c-green is too dark on navy */

.home-dark .hero .btn--ghost {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
}
.home-dark .hero .btn--ghost:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #fff;
  color: #fff;
}

/* the brand-tinted focus ring all but disappears on navy */
.home-dark .hero :focus-visible { outline-color: rgba(255, 255, 255, .85); }

/* ---- one-screen panel ----
   Only from 941px up, where .hero__grid is still two columns. Below that the
   media stacks above the copy (see section 15) and the two together cannot
   honestly fit a screen, so there the panel goes back to flowing naturally.

   What made it overflow was the screenshot: .shots__panel img is width:100%
   height:auto, so at a 1000x620 ratio it grows with the column and ignores how
   much vertical room is actually left. Capping it against the viewport is what
   holds the panel to one screen; the rest just removes the fixed 430px floors
   and centres whatever height remains. svh rather than vh so a mobile browser's
   collapsing toolbar cannot push the panel past the fold. */
@media (min-width: 941px) {
  .home-dark .hero {
    /* header + top margin + panel + tail = exactly one screen, so the panel's
       bottom rounding lands just above the fold instead of running off it */
    min-height: calc(100vh - var(--header-h) - var(--panel-top) - var(--panel-tail));
    min-height: calc(100svh - var(--header-h) - var(--panel-top) - var(--panel-tail));
    padding-block: clamp(22px, 3.4vh, 46px);
    display: grid;
    align-content: center;
  }
  .home-dark .hero__grid,
  .home-dark .hero__media { min-height: 0; }

  /* 5/7 leaves the copy column ~500px, which is narrower than "Manage every
     project on" sets at 46px — the line was breaking after "on" and dropping a
     one-word orphan. 5.5/6.5 gives it the ~90px it needs. */
  .home-dark .hero__grid { grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); }

  /* 250px is the chrome stacked around the image: panel padding, the panel's
     own top margin, the 62px tab bar and the stage's 14px inset, plus room to
     breathe. object-fit keeps the shot undistorted when the cap bites. */
  .home-dark .shots__panel img {
    max-height: calc(100vh - var(--header-h) - 250px);
    max-height: calc(100svh - var(--header-h) - 250px);
    object-fit: contain;
  }
}

/* ---------- 22.2 Post cards ---------- */
.bloglead { margin-bottom: 30px; }
.bloggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.blogcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blogcard:hover { transform: translateY(-5px); border-color: var(--brand-100); box-shadow: 0 16px 34px rgba(var(--ink-rgb), .1); }

.blogcard__media { position: relative; display: block; overflow: hidden; }
/* height:auto keeps the img height attribute from overriding aspect-ratio */
.blogcard__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .35s ease;
}
.blogcard:hover .blogcard__media img { transform: scale(1.04); }
/* sits bottom-left: the covers carry their own artwork in the top-left */
.blogcard__tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: var(--shadow-sm);
}

.blogcard__body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 24px; }
.blogcard__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.blogcard__meta i { width: 3px; height: 3px; border-radius: 50%; background: #bfcbd8; }
.blogcard__title { margin-top: 10px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -.015em; }
.blogcard:hover .blogcard__title { color: var(--brand); }
.blogcard__text { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--body); }
.blogcard__more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 700; color: var(--brand); }
.blogcard__more svg { width: 15px; height: 15px; transition: transform .18s ease; }
.blogcard:hover .blogcard__more svg { transform: translateX(4px); }

/* featured card — cover beside the copy */
.blogcard--wide { flex-direction: row; align-items: stretch; }
.blogcard--wide .blogcard__media { flex: 0 0 52%; }
.blogcard--wide .blogcard__media img { height: 100%; aspect-ratio: auto; min-height: 320px; }
.blogcard--wide .blogcard__body { justify-content: center; padding: 34px 38px; }
.blogcard--wide .blogcard__title { font-size: clamp(22px, 2.4vw, 30px); }
.blogcard--wide .blogcard__text { font-size: 15px; }

/* ---------- 22.3 Reading progress ---------- */
.readbar {
  position: sticky;
  top: var(--header-h);
  z-index: 55;
  height: 3px;
  background: transparent;
}
.readbar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .1s linear; }

/* ---------- 22.4 Article ---------- */
.post__head { max-width: 800px; padding-top: 12px; text-align: center; }
.post__cat {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--brand-050);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.post__cat:hover { background: var(--brand); color: #fff; }
.post__title { margin-top: 18px; font-size: clamp(28px, 4vw, 46px); line-height: 1.16; letter-spacing: -.03em; }
.post__standfirst { margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--body); }

.post__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.post__meta i { width: 3px; height: 3px; border-radius: 50%; background: #bfcbd8; }
.post__author { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--ink); }
.post__avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
}
.post__avatar svg { width: 16px; height: 16px; }

.post__cover { margin: 34px 0 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.post__cover img { width: 100%; height: auto; display: block; }

.post__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 54px; align-items: start; padding-block: 48px 68px; }
.post__main { min-width: 0; max-width: 720px; }

/* ---------- 22.5 Key takeaways callout ---------- */
.callout {
  padding: 22px 26px;
  margin-bottom: 34px;
  border-radius: var(--radius-lg);
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  border-left: 4px solid var(--brand);
}
.callout__title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.callout__title svg { width: 17px; height: 17px; }
.callout ul { margin-top: 14px; display: grid; gap: 9px; }
.callout li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); font-weight: 600; }
.callout li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* ---------- 22.6 Article typography ---------- */
.post__body { font-size: 16.5px; line-height: 1.8; color: var(--ink-soft); }
.post__body > * + * { margin-top: 22px; }
.post__body h2 { margin-top: 44px; font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.02em; }
.post__body h3 { margin-top: 34px; font-size: clamp(17px, 1.9vw, 20px); letter-spacing: -.01em; }
.post__body h2 + p, .post__body h3 + p { margin-top: 14px; }
.post__body strong { color: var(--ink); font-weight: 800; }
.post__body a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.post__body ul, .post__body ol { display: grid; gap: 12px; padding-left: 4px; }
.post__body li { position: relative; padding-left: 30px; }
.post__body ul > li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .55;
}
.post__body ol { counter-reset: postnum; }
.post__body ol > li { counter-increment: postnum; }
.post__body ol > li::before {
  content: counter(postnum);
  position: absolute;
  left: 0;
  top: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.post__body blockquote {
  margin-inline: 0;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  border-left: 4px solid var(--brand);
  font-size: 17.5px;
  line-height: 1.65;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

/* ---------- 22.6b Pictures inside an article ----------
   Written by the admin's Image button as <figure><img><figcaption>. Kept to
   the text measure: .post__main is 720px against a 300px sidebar with a 54px
   gap, so a full-bleed figure would reach into that gap at the narrow end of
   the two-column layout. */
.post__body figure {
  margin-inline: 0;
  margin-block: 34px;
}
.post__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
.post__body figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}
/* A bare image with no figure around it still has to behave. */
.post__body > img { margin-block: 34px; }

/* ---------- 22.7 Share row ---------- */
.post__share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
.post__share-label { margin-right: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.post__share-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.post__share-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.post__share-btn svg { width: 17px; height: 17px; }
.post__copied { font-size: 12.5px; font-weight: 700; color: var(--c-green); }

/* ---------- 22.8 Sidebar ---------- */
.post__aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; }
.post__panel { padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.post__panel-title { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.post__panel-title--light { color: rgba(255, 255, 255, .72); }
.post__panel--cta { background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-900) 100%); border-color: transparent; }
.post__panel-text { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .86); margin-bottom: 18px; }
.post__panel--cta .btn--ghost { border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff; }
.post__panel--cta .btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

.authorbox { display: flex; align-items: center; gap: 13px; }
.authorbox__avatar {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
}
.authorbox__avatar svg { width: 23px; height: 23px; }
.authorbox__name { font-size: 15px; font-weight: 800; color: var(--ink); }
.authorbox__role { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--body); }

/* ---------- 22.9 Blog responsive ---------- */
@media (max-width: 1080px) {
  .bloggrid { grid-template-columns: repeat(2, 1fr); }
  .post__layout { grid-template-columns: 1fr; gap: 40px; }
  .post__main { max-width: none; }
  .post__aside { position: static; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .blogcard--wide { flex-direction: column; }
  .blogcard--wide .blogcard__media { flex: none; }
  .blogcard--wide .blogcard__media img { min-height: 0; aspect-ratio: 16 / 9; }
  .blogcard--wide .blogcard__body { padding: 22px 24px 26px; }
}

@media (max-width: 720px) {
  .bloggrid { grid-template-columns: 1fr; }
  .post__aside { grid-template-columns: 1fr; }
  .post__body { font-size: 16px; }
  .post__body blockquote { padding: 20px 22px; font-size: 16.5px; }
  .callout { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .blogcard, .blogcard__media img, .post__share-btn, .readbar i { transition: none; }
}