@charset "utf-8";

/* =====================================================================
   Meher Tech Solutions
   ---------------------------------------------------------------------
   One stylesheet, no build step, no framework.

   Sections
     1.  Fonts
     2.  Tokens
     3.  Reset and base
     4.  Typography
     5.  Layout
     6.  The dot motif
     7.  Buttons and links
     8.  Header
     9.  Footer
     10. Hero
     11. Cards, lists and tables
     12. The healthcare band
     13. Steps
     14. Monospace data blocks
     15. Diagrams
     16. Forms
     17. Utilities
     18. Motion, print, forced colours

   To change the brand colour, edit --brand / --brand-deep / --brand-tint
   in section 2. Nothing else in the file hardcodes it.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Fonts — self-hosted, no third-party requests
   ------------------------------------------------------------------ */

/* Display: headings and the wordmark only. */
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Body: long-form reading. */
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/Inter-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/Inter-Variable-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Data: file formats, transaction sets, identifiers, code. */
@font-face {
  font-family: 'JetBrainsMonoVar';
  src: url('/assets/fonts/JetBrainsMono-Variable-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrainsMonoVar';
  src: url('/assets/fonts/JetBrainsMono-Variable-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------------ */

:root {
  /* Brand. Swap these three and the whole site follows. */
  --brand:        #0F766E;
  --brand-deep:   #115E59;
  --brand-tint:   #CCFBF1;

  /* Ink and surfaces */
  --ink:          #0F172A;
  --ink-muted:    #475569;
  --line:         #E2E8F0;
  --surface:      #FFFFFF;
  --surface-alt:  #F8FAFC;

  /* Derived — kept as tokens so nothing downstream mixes colours ad hoc */
  --line-soft:    #EEF2F6;
  --ink-faint:    #64748B;

  /* Form control borders. --line is a divider between blocks of content
     and is deliberately faint; a control boundary has to be perceivable
     on its own, which WCAG 1.4.11 puts at 3:1. This clears it at 3.4:1
     against white and 3.3:1 against --surface-alt. */
  --field-line:   #7C8CA3;
  --focus:        var(--brand);

  /* Type */
  --font-display: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'InterVar', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrainsMonoVar', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem);
  --step-3:  clamp(1.5rem, 1.3rem + 0.9vw, 1.95rem);
  --step-4:  clamp(1.9rem, 1.55rem + 1.6vw, 2.7rem);
  --step-5:  clamp(2.25rem, 1.7rem + 2.6vw, 3.6rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(3.5rem, 2.4rem + 5vw, 6.5rem);

  /* Structure */
  --wrap: 84rem;      /* 1344px */
  --measure: 44rem;   /* ~72 characters at the body size */
  --radius: 4px;      /* restrained; nothing here is a pill */
  --head-h: 4.5rem;
}


/* ---------------------------------------------------------------------
   3. Reset and base
   ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48rem) {
  body { font-size: 18px; }
}

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

/* Every image and diagram on this site is SVG. Sizing them off their own
   viewBox means no layout shift and no width/height guessing. */
svg { display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}

::selection { background: var(--brand-tint); color: var(--ink); }

/* One focus treatment, everywhere, always visible. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Belt and braces for browsers without :focus-visible */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }


/* ---------------------------------------------------------------------
   4. Typography
   ------------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.021em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.028em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.012em; }
h4 { font-size: var(--step-1); letter-spacing: -0.008em; }

p { margin: 0 0 var(--s-5); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-deep); }

strong, b { font-weight: 600; }

/* The eyebrow that labels a section. Monospace, because on this site the
   monospace face marks "this is a label or a piece of data", not decoration. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 var(--s-4);
  display: block;
}
.eyebrow--onbrand { color: var(--brand-tint); }

.lede {
  font-size: var(--step-2);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 50rem;
}

.prose { max-width: var(--measure); }
.prose--wide { max-width: 54rem; }

.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose > :first-child { margin-top: 0; }

.muted { color: var(--ink-muted); }
.small { font-size: var(--step--1); }

/* Plain content lists */
.list {
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}
.list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: var(--s-3);
}
/* The bullet is a dot from the grid, not a disc glyph. */
.list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.list--faint li::before { background: var(--line); }
.list li:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------
   5. Layout
   ------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.55rem + 2.2vw, 2.5rem);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.section--alt { background: var(--surface-alt); }

.section-head { margin-bottom: var(--s-7); max-width: 56rem; }
.section-head p { color: var(--ink-muted); margin-bottom: 0; }

/* Two-column: heading rail on the left, content on the right. */
.split {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--s-8);
  }
  .split > :first-child { position: sticky; top: calc(var(--head-h) + 2rem); align-self: start; }
}

.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }


/* ---------------------------------------------------------------------
   6. The dot motif
   ------------------------------------------------------------------
   The mark is a matrix, which is the same shape as a data grid, a
   schedule, or a reconciliation table. It recurs as texture and as
   dividers. It never becomes decoration for its own sake.
   ------------------------------------------------------------------ */

/* A section divider: a single row of dots. */
.dot-rule {
  height: 3px;
  background-image: radial-gradient(circle at center, var(--ink) 1.5px, transparent 1.6px);
  background-size: 14px 3px;
  background-repeat: repeat-x;
  opacity: 0.16;
  margin-block: var(--s-7);
}
.dot-rule--onbrand { background-image: radial-gradient(circle at center, #fff 1.5px, transparent 1.6px); opacity: 0.35; }
.dot-rule--flush { margin-block: 0; }

/* Field texture. Deliberately at the edge of visibility. */
.dot-field {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--ink) 1.4px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: 0.04;
  pointer-events: none;
}
.dot-field--onbrand {
  background-image: radial-gradient(circle at center, #fff 1.4px, transparent 1.5px);
  opacity: 0.09;
}
/* Fade the field out rather than letting it collide with the next section. */
.dot-field--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
}


/* ---------------------------------------------------------------------
   7. Buttons and links
   ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.35rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--field-line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--onbrand { background: #fff; color: var(--brand-deep); }
.btn--onbrand:hover { background: var(--brand-tint); color: var(--brand-deep); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* Text link with a trailing arrow. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
}
.arrow-link:hover { text-decoration: underline; }
.arw { width: 1em; height: 1em; flex: none; transition: transform 0.15s ease; }
.arrow-link:hover .arw { transform: translateX(2px); }

.email-link {
  font-family: var(--font-mono);
  font-weight: 500;
  word-break: break-word;
}


/* ---------------------------------------------------------------------
   8. Header
   ------------------------------------------------------------------ */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--head-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  /* Clear space: half the mark's width on all four sides. */
  padding: 0.75rem 0;
  flex: none;
}
.brand svg { width: auto; height: 2rem; }
@media (min-width: 30rem) {
  .brand svg { height: 2.25rem; }
}

.nav { display: flex; align-items: center; gap: var(--s-5); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.4rem 0;
  display: inline-block;
  position: relative;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current] { color: var(--ink); font-weight: 600; }

/* An ancestor of the current page: highlighted, but it does not claim to
   be the current page and carries no aria-current. */
.nav__link--section { color: var(--ink); }
.nav__link--section::after { opacity: 0.4; }

/* The current page is marked with a dot, keeping to the grid language. */
.nav__link[aria-current]::after,
.nav__link--section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.1rem;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--brand);
}

/* Mobile disclosure */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}
.nav-toggle__bars { width: 16px; height: 10px; position: relative; flex: none; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }

@media (max-width: 61.99rem) {
  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--s-4) clamp(1rem, 0.55rem + 2.2vw, 2.5rem) var(--s-6);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav[data-open] { display: flex; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: 0.85rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav__link[aria-current]::after { left: auto; right: 0; bottom: auto; top: 1.15rem; margin: 0; }
  .nav .btn { margin-top: var(--s-4); justify-content: center; }

  /* Without JavaScript the navigation is simply always open. Nothing is
     unreachable; the toggle is the enhancement, not the mechanism. */
  html.no-js .nav { display: flex; position: static; border: 0; padding-inline: 0; padding-top: 0; }
  html.no-js .nav-toggle { display: none; }
  html.no-js .site-head { position: static; }
  html.no-js .site-head__inner { flex-direction: column; align-items: stretch; }
}


/* ---------------------------------------------------------------------
   9. Footer
   ------------------------------------------------------------------ */

.site-foot {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--step--1);
}

.foot-grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

.foot-brand svg { width: auto; height: 5rem; color: var(--ink); }
.foot-brand p { margin-top: var(--s-4); color: var(--ink-muted); max-width: 22rem; }

.foot-col h2 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-4);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 0.55rem; }
.foot-col a { color: var(--ink-muted); text-decoration: none; }
.foot-col a:hover { color: var(--brand); text-decoration: underline; }

.foot-base {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  color: var(--ink-faint);
}
.foot-base p { margin: 0; }


/* ---------------------------------------------------------------------
   10. Hero
   ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 56rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--s-8);
  }
}

.hero h1 { margin-bottom: var(--s-5); }
.hero .lede { margin-bottom: var(--s-6); }

.hero__mark {
  justify-self: center;
  width: min(20rem, 62vw);
  color: var(--brand);
}
@media (min-width: 56rem) {
  .hero__mark { justify-self: end; width: min(22rem, 30vw); }
}

/* --- The resolve ---------------------------------------------------
   The one orchestrated moment on the site. Twenty-five dots arrive from
   a scattered field and settle into the M.

   It is pure CSS. The keyframes animate *towards* the resting state, so
   if the animation never runs — reduced motion, an old browser, an
   unsupported property — the dots are already exactly where they belong.
   ------------------------------------------------------------------ */

.hero-dot {
  opacity: var(--do, 1);
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-resolve 0.9s cubic-bezier(0.22, 0.61, 0.28, 1) both;
  animation-delay: var(--dd, 0s);
}

@keyframes hero-resolve {
  from {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.4);
  }
  60% { opacity: var(--do, 1); }
  to {
    opacity: var(--do, 1);
    transform: translate(0, 0) scale(1);
  }
}


/* ---------------------------------------------------------------------
   11. Cards, lists and tables
   ------------------------------------------------------------------ */

.cards {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 44rem) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.card:hover { border-color: var(--ink-faint); }
.card h3 { margin-bottom: 0; }
.card p { color: var(--ink-muted); margin-bottom: 0; }
.card__foot { margin-top: auto; padding-top: var(--s-3); }

/* A whole-card link without nesting interactive elements: the card is a
   plain container and one link inside it is stretched over the surface. */
.card--link { position: relative; }
.card--link a::after { content: ""; position: absolute; inset: 0; }

.card__icon { width: 2.75rem; height: 2.75rem; color: var(--brand); margin-bottom: var(--s-2); }

/* The service grid on the home page and the services index.
   Six cards, and the first two carry the priority order visually so the
   hierarchy is legible before anybody reads a word. Two lead cards at
   half width, then four at quarter width. */
.cards--priority { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cards--priority > * { grid-column: span 12; }

@media (min-width: 44rem) {
  .cards--priority > * { grid-column: span 6; }
}
@media (min-width: 62rem) {
  .cards--priority > * { grid-column: span 3; }
  .cards--priority > .card--lead { grid-column: span 6; }
}

.card--lead { border-top: 2px solid var(--brand); }
.card--lead h3 { font-size: var(--step-3); }
@media (min-width: 62rem) {
  .card--lead p { font-size: var(--step-1); }
}

/* The opening paragraph of a service page: the situation the reader is
   in, before the service has been named. */
.situation {
  border-left: 2px solid var(--brand);
  padding-left: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  max-width: 52rem;
}
.situation .eyebrow { margin-bottom: var(--s-3); }
.situation p {
  font-size: var(--step-2);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* Capability blocks — used on the healthcare page. */
.caps { display: grid; gap: 0; }
.cap {
  display: grid;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}
.cap:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 50rem) {
  .cap { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
.cap h3 { margin: 0; font-size: var(--step-1); }
.cap p { margin: 0; color: var(--ink-muted); }

/* Definition pairs — "what you do / what we do" style content. */
.pairs { margin: 0; }
.pairs > div {
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s-1) var(--s-5);
}
.pairs > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 44rem) {
  .pairs > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
}
.pairs dt { font-weight: 600; }
.pairs dd { margin: 0; color: var(--ink-muted); }

/* The compact form, for use inside a card where there is no room for a
   label column. */
.pairs--tight > div {
  grid-template-columns: 1fr;
  padding-block: var(--s-3);
  gap: var(--s-1);
}
.pairs--tight dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pairs--tight dd { font-size: var(--step--1); line-height: 1.55; }


/* ---------------------------------------------------------------------
   12. The healthcare band
   ------------------------------------------------------------------ */

.band {
  position: relative;
  overflow: hidden;
  background: var(--brand-deep);
  color: #fff;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
}
.band__inner { position: relative; }
.band h2 { color: #fff; max-width: 22ch; }
.band p { color: #fff; }
.band .lede { color: #fff; opacity: 0.92; }
.band a:not(.btn) { color: var(--brand-tint); }

.band-cols {
  display: grid;
  gap: var(--s-6);
  margin-block: var(--s-7);
}
@media (min-width: 44rem) { .band-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-7); } }
@media (min-width: 62rem) { .band-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.band-item h3 { font-size: var(--step-1); color: #fff; margin-bottom: var(--s-2); }
.band-item p { font-size: var(--step--1); line-height: 1.6; margin: 0; opacity: 0.9; }

.band h3 { color: #fff; }
.band .list li { color: #fff; }
.band .list li::before { background: var(--brand-tint); }


/* ---------------------------------------------------------------------
   13. Steps — only used where things really are sequential
   ------------------------------------------------------------------ */

.steps {
  display: grid;
  gap: var(--s-5);
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 44rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step { counter-increment: step; padding-top: var(--s-4); border-top: 2px solid var(--brand); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brand);
  display: block;
  margin-bottom: var(--s-3);
}
.step h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.step p { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }

/* The long form of the same list: one stage per row, with the detail
   underneath rather than squeezed into a column. */
@media (min-width: 44rem) {
  .steps--stacked { grid-template-columns: 1fr; gap: var(--s-7); }
}
/* The narrow form, for a side rail. Always one column. */
.steps--rail { gap: var(--s-5); }
@media (min-width: 44rem) {
  .steps--rail { grid-template-columns: 1fr; }
}

.step--wide { padding-top: var(--s-5); }
.step--wide h3 { font-size: var(--step-3); margin-bottom: var(--s-4); }
.step--wide .pairs > div:first-child { border-top: 0; padding-top: 0; }
.step--wide .pairs > div:last-child { border-bottom: 0; }
.step--wide .pairs dd { font-size: var(--step--1); }


/* ---------------------------------------------------------------------
   14. Monospace data blocks
   ------------------------------------------------------------------
   The firm works with file formats, transaction sets and identifiers.
   Monospace is the honest way to render them.
   ------------------------------------------------------------------ */

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

.mono { font-family: var(--font-mono); }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }

/* The formats table — the most persuasive block on the site for a reader
   who knows what these are. Set it properly: code left, plain English right. */
.formats { margin: 0; border-top: 1px solid var(--line); }
.formats > div {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 40rem) {
  .formats > div { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
}
.formats dt {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.01em;
}
.formats dd { margin: 0; color: var(--ink-muted); }

/* The technology list. Capability, not a logo wall. */
.stack-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .stack-grid { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
}

.stack-group h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.stack-group ul { list-style: none; margin: 0; padding: 0; }
.stack-group li {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding-block: 0.28rem;
}

/* Comparison tables. Real table markup: scoped headers, a caption, and
   a scroll container of its own so the page never scrolls sideways. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 34rem;
  background: var(--surface);
}
.table th, .table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table thead th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--ink-faint);
  white-space: nowrap;
}
.table tbody th { font-weight: 600; color: var(--ink); }
.table td { color: var(--ink-muted); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.figure__scroll > .table { min-width: 34rem; }

/* A callout for an honest caveat or a note. */
.note {
  border-left: 2px solid var(--brand);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  color: var(--ink-muted);
  margin-block: var(--s-5);
}


/* ---------------------------------------------------------------------
   15. Diagrams
   ------------------------------------------------------------------
   Drawn in the dot-grid language, as SVG, with obviously synthetic
   labels. No screenshots, and never anything resembling real data.
   ------------------------------------------------------------------ */

.figure {
  margin: var(--s-6) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: var(--s-5);
}
.figure svg { width: 100%; height: auto; color: var(--ink); }
.figure figcaption {
  margin-top: var(--s-4);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
/* Diagrams get their own scroll container rather than squashing. The page
   body never scrolls sideways; the diagram does. */
.figure__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.figure__scroll > svg { min-width: 34rem; }

/* Diagram internals. Everything here follows the brand token. */
.dgm { font-family: var(--font-body); }
.dgm .n { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.dgm .t { fill: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.dgm .m { fill: var(--brand); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; }
.dgm .lbl { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 11.5px; }
.dgm .lbl--brand { fill: var(--brand); }
.dgm .dot { fill: var(--brand); }

/* Connectors are drawn as a row of dots, not a line. Same motif as the
   section dividers and the mark itself. */
.dgm .dots {
  stroke: var(--ink-faint);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0 9;
}
.dgm .head { stroke: var(--ink-faint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dgm .loop { stroke: var(--brand); }
.dgm .head--brand { stroke: var(--brand); }

/* The permission matrix is the mark's own grid: solid where a role holds
   the permission, faint where it does not. */
.dgm .cell { fill: var(--brand); opacity: 0.28; }
.dgm .cell--on { opacity: 1; }


/* ---------------------------------------------------------------------
   16. Forms
   ------------------------------------------------------------------ */

.form { max-width: 34rem; }
.field { margin-bottom: var(--s-5); }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--s-2);
}
.field .hint {
  display: block;
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-top: -0.15rem;
  margin-bottom: var(--s-2);
}
.field .optional { font-weight: 400; color: var(--ink-faint); }

.input,
.select,
.textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); }
.textarea { min-height: 9rem; resize: vertical; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.15rem, calc(100% - 0.85rem) 1.15rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.field--error .input,
.field--error .select,
.field--error .textarea { border-color: #B91C1C; }

.error-text {
  display: block;
  color: #B91C1C;
  font-size: var(--step--1);
  margin-top: var(--s-2);
  font-weight: 500;
}

/* The honeypot. Hidden from sight and from assistive technology, and
   never focusable, so no real visitor can fill it in by accident. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  padding: var(--s-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: var(--s-6);
}
.alert h2 { font-size: var(--step-2); margin-bottom: var(--s-3); }
.alert p:last-child { margin-bottom: 0; }
.alert--ok { border-color: var(--brand); background: var(--brand-tint); }
.alert--ok h2 { color: var(--brand-deep); }
.alert--bad { border-color: #B91C1C; background: #FEF2F2; }
.alert--bad h2 { color: #991B1B; }

fieldset { border: 0; margin: 0; padding: 0; }


/* ---------------------------------------------------------------------
   17. Utilities
   ------------------------------------------------------------------ */

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

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* The closing call to action, repeated at the foot of every page. */
.cta-end { border-top: 1px solid var(--line); }
.cta-end .wrap { padding-block: var(--section); }
.cta-end h2 { max-width: 18ch; }
.cta-end .email-link { font-size: var(--step-2); }


/* ---------------------------------------------------------------------
   18. Motion, print, forced colours
   ------------------------------------------------------------------ */

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

  /* The resolve is switched off entirely, not merely shortened. The dots
     render in their final position, which is what the keyframes were
     travelling towards anyway. */
  .hero-dot { animation: none; opacity: var(--do, 1); transform: none; }

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

@media (forced-colors: active) {
  .btn { border: 1px solid; }
  .dot-rule, .dot-field { display: none; }
  .nav__link[aria-current]::after { forced-color-adjust: none; }
}

@media print {
  .site-head, .site-foot, .skip-link, .dot-field, .cta-end { display: none; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}