/* ==========================================================================
   Site components: header, theme switch, menu, footer and the page blocks.
   Every colour, size and space comes from tokens.css.
   ========================================================================== */

/* Brand: the mark plus the name as real text */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.brand__mark {
  width: auto;
  height: var(--brand-mark-height);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: var(--leading-display);
}

.brand__name {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

/* The rest of the company name, in small spaced capitals under the first word */
.brand__sub {
  margin-top: var(--tag-pad-y);
  color: var(--color-on-dark-muted);
  font-size: var(--text-brand-sub);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Button: amber with an ink label. On navy it turns white when hovered. */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: var(--border) solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-ink);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-decoration: none;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.btn:hover {
  background: var(--theme-text);
  border-color: var(--theme-text);
  color: var(--theme-bg);
}

.on-dark .btn:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}

/* Pointer: every clickable control shows the hand; a disabled button shows it cannot be used. */
button,
.btn,
.chips a {
  cursor: pointer;
}

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

/* Top band: the navy field under the header that holds the hero on pages
   that have one. The same in both themes. */
.top {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* Header: a navy band that stays at the top of the window while the page
   scrolls. Pure CSS: position sticky, no script. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-ink);
  color: var(--color-paper);
  border-bottom: var(--border) solid var(--color-text-muted);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-6);
  min-height: var(--header-height);
  padding-block: var(--space-4);
}

/* Theme switch: small and quiet, in the header's top-right corner */
.theme-toggle {
  position: absolute;
  top: var(--toggle-inset);
  right: var(--toggle-inset);
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: var(--toggle-size);
  height: var(--toggle-size);
  padding: 0;
  border: var(--border) solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-on-dark-muted);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.theme-toggle:hover {
  border-color: var(--color-on-dark-muted);
  color: var(--color-paper);
}

.theme-toggle svg {
  width: var(--toggle-icon);
  height: var(--toggle-icon);
}

/* Keep the menu clear of the theme switch where the page has no side margin. */
@media (max-width: 80rem) {
  .site-header__inner {
    padding-right: calc(var(--toggle-size) + var(--toggle-inset));
  }
}

/* Menu: the text links, then the amber Contact button */
.menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
}

.menu__list {
  display: flex;
  align-items: center;
  column-gap: var(--space-6);
}

.menu a:not(.btn) {
  display: inline-block;
  padding-block: var(--space-1);
  border-bottom: var(--border-medium) solid transparent;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duration) var(--ease);
}

.menu a:not(.btn):hover,
.menu a:not(.btn)[aria-current] {
  border-bottom-color: var(--color-accent);
}

.menu .btn {
  flex: none;
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
}

/* The phone menu: a Menu button and a panel. Hidden on wide screens, where .menu shows. */
.menu-disclosure {
  display: none;
}

.menu-disclosure__button {
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border: var(--border) solid var(--color-on-dark-muted);
  border-radius: var(--radius);
  color: var(--color-paper);
  list-style: none;
  cursor: pointer;
}

.menu-disclosure__button::-webkit-details-marker {
  display: none;
}

.menu-disclosure[open] .menu-disclosure__button {
  border-color: var(--color-accent);
}

/* Three lines drawn in the text colour; they turn into a cross while the menu is open. */
.menu-icon {
  position: relative;
  width: var(--menu-icon-width);
  height: var(--border-medium);
  background: currentColor;
}

.menu-icon::before,
.menu-icon::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  transition: transform var(--duration) var(--ease);
  content: "";
}

.menu-icon::before {
  top: calc(-1 * var(--menu-icon-gap));
}

.menu-icon::after {
  top: var(--menu-icon-gap);
}

.menu-disclosure[open] .menu-icon {
  background: transparent;
}

.menu-disclosure[open] .menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-disclosure[open] .menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* The panel spans the full width under the header, which holds it in place. */
.menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--header-height-phone));
  overflow-y: auto;
  padding: var(--space-2) max(var(--gutter), env(safe-area-inset-right)) var(--space-5) max(var(--gutter), env(safe-area-inset-left));
  z-index: 1;
  background: var(--color-ink);
  border-bottom: var(--border-thick) solid var(--color-accent);
}

/* The page behind the open panel is dimmed, so the panel's edge is clear. */
.menu-disclosure[open]::after {
  position: fixed;
  inset: var(--header-height-phone) 0 0;
  background: var(--color-ink);
  opacity: 0.7;
  content: "";
}

.menu-panel__list li {
  border-bottom: var(--border) solid var(--color-text-muted);
}

.menu-panel__list a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-block: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 500;
  text-decoration: none;
}

.menu-panel__list a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--border-medium);
}

.menu-panel__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  margin-top: var(--space-5);
  font-size: var(--text-lg);
}

/* Below 62rem: one row with the lockup, the theme switch and the Menu button. */
@media (max-width: 62rem) {
  .site-header__inner {
    column-gap: var(--space-3);
    min-height: calc(var(--header-height-phone) - var(--border));
    padding-block: 0;
    padding-right: 0;
  }

  .brand {
    margin-right: auto;
  }

  .brand__mark {
    height: var(--brand-mark-height-phone);
  }

  .brand__name {
    font-size: var(--text-lg);
  }

  .theme-toggle {
    position: static;
    width: var(--tap-target);
    height: var(--tap-target);
  }

  .menu {
    display: none;
  }

  .menu-disclosure {
    display: block;
  }
}

/* Footer: the brand and up to four columns of links on ink at the foot of every page */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background: var(--color-ink);
  color: var(--color-paper);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
}

.site-footer h2 {
  margin-bottom: var(--space-3);
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.site-footer li + li {
  margin-top: var(--space-2);
}

.site-footer a[aria-current] {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--border-medium);
}

.site-footer address {
  font-style: normal;
}

.site-footer__text {
  max-width: var(--measure);
  margin-top: var(--space-4);
  color: var(--color-on-dark-muted);
}

.site-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border) solid var(--color-text-muted);
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
}

/* Narrower: the brand across the top, the link columns under it */
@media (max-width: 72rem) {
  .site-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 56rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Bands and page layout
   A page is a stack of full-width bands: .section, .section--surface and
   .section--ink from base.css, plus amber for the call to action.
   ========================================================================== */

.section--amber {
  background: var(--color-accent);
  color: var(--color-ink);
}

/* The heading at the top of a band */
.section-head {
  max-width: var(--section-head-width);
  margin-bottom: var(--space-7);
}

.section-head p {
  margin-top: var(--space-4);
  color: var(--theme-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.on-dark .section-head p {
  color: var(--color-on-dark-muted);
}

/* Two columns: a heading or short text on the left, the rest on the right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.split .section-head {
  margin-bottom: 0;
}

.lead-text {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

/* Small shared marks */

/* Tag: a small text label, such as "Client work" or "Demo" */
.tag {
  display: inline-block;
  align-self: flex-start;
  padding: var(--tag-pad-y) var(--space-2);
  border: var(--border) solid var(--theme-rule-strong);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
}

.on-dark .tag {
  border-color: var(--color-on-dark-muted);
}

/* Meta tags: facts such as a version, in the mono face */
.meta-tags,
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.meta-tags li,
.card__tags li {
  padding: var(--tag-pad-y) var(--space-2);
  border: var(--border) solid var(--theme-rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.on-dark .meta-tags li {
  border-color: var(--color-on-dark-muted);
}

/* "Read more" at the foot of a card, with an amber arrow */
.more {
  font-weight: 600;
}

.more::after {
  display: inline-block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  margin-left: var(--space-2);
  border-top: var(--border-medium) solid var(--color-accent);
  border-right: var(--border-medium) solid var(--color-accent);
  transform: rotate(45deg);
  content: "";
}

/* Buttons: an outlined variant beside the amber one, and ink on amber */
.btn--ghost {
  background: transparent;
  border-color: var(--theme-text);
  color: inherit;
}

.on-dark .btn--ghost {
  border-color: var(--color-on-dark-muted);
  color: var(--color-paper);
}

.btn--ink,
.on-dark .btn--ink {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.btn--ink:hover,
.on-dark .btn--ink:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Cards that are links: the border darkens on hover, nothing moves */
.card,
.feature,
.story {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--theme-bg);
  border: var(--border) solid var(--theme-rule);
  border-radius: var(--radius);
  color: var(--theme-text);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease);
}

.card:hover,
.feature:hover,
.story:hover {
  border-color: var(--theme-rule-strong);
}

.card:hover .more,
.feature:hover .more,
.story:hover .more {
  text-decoration: underline;
}

/* The navy panels that hold an illustration */
.card__art,
.industry__art,
.feature__art,
.story__art {
  display: grid;
  place-items: center;
  background: var(--color-ink);
}

/* ==========================================================================
   Heroes, on the navy top band
   ========================================================================== */

/* Home page hero: text on the left, the flow illustration on the right */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--hero-space-top) var(--hero-space-bottom);
}

.hero__title {
  font-size: var(--text-hero);
  line-height: var(--leading-display);
}

.hero__lead,
.page-hero__lead {
  max-width: var(--lead-width);
  color: var(--color-on-dark-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.hero__lead {
  margin-top: var(--space-5);
}

.hero__art svg {
  width: 100%;
  height: auto;
}

/* Inner page hero: title and intro, with an optional illustration */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--page-hero-space-top) var(--page-hero-space-bottom);
}

.page-hero--compact {
  grid-template-columns: minmax(0, 1fr);
}

.page-hero__title {
  font-size: var(--text-page-title);
  line-height: var(--leading-display);
}

.page-hero .tag {
  margin-bottom: var(--space-4);
}

.page-hero__lead {
  margin-top: var(--space-4);
}

.page-hero .meta-tags {
  margin-top: var(--space-5);
}

.page-hero__art svg {
  width: 100%;
  max-width: var(--hero-art-max);
  height: auto;
  margin-inline: auto;
}

/* A hero whose first band lifts over its bottom edge (About) */
.page-hero--lift {
  padding-bottom: var(--hero-lift-space);
}

.section--lift {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--lift-overlap));
  padding-block: 0;
}

.page-hero--wide .page-hero__art svg {
  max-width: var(--hero-art-wide);
}

/* Filter chips: links, so filtering works without a script */
.chips {
  margin-top: var(--space-6);
}

.chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chips a {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: var(--border) solid var(--color-on-dark-muted);
  border-radius: var(--radius);
  color: var(--color-paper);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease);
}

.chips a:hover {
  border-color: var(--color-paper);
}

.chips a[aria-current] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
  font-weight: 600;
}

/* ==========================================================================
   Home page bands
   ========================================================================== */

/* Integrator band: the Ignition statement, with the integrator card on the right */
.integrator--with-card {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.integrator__label {
  color: var(--theme-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.integrator h2 {
  margin-top: var(--space-2);
}

.integrator__body {
  max-width: var(--lead-width);
  margin-top: var(--space-4);
  color: var(--theme-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* The card: logo or official badge, a line of text and the verification link */
.integrator-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--theme-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.integrator-card__logo svg {
  width: auto;
  height: var(--card-logo-height);
}

.integrator-card__badge {
  width: auto;
  max-height: var(--badge-height);
}

.integrator-card__text {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}

/* Service cards: an illustration panel above the text */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
  gap: var(--space-5);
}

.card__art {
  height: var(--card-art-panel);
}

.card__art svg {
  width: auto;
  height: var(--card-art);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-6);
}

.card h3 {
  font-size: var(--text-xl);
}

.card__text {
  flex: 1;
  margin-top: var(--space-3);
  color: var(--theme-text-muted);
}

.card__tags {
  margin-top: var(--space-5);
}

.card .more {
  padding-top: var(--space-5);
}

/* Logo tiles: a platform logo, or its name as text, with a line under it */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--logo-min), 100%), 1fr));
  gap: var(--space-4);
}

.logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--logo-tile-height);
  padding: var(--space-5);
  background: var(--theme-bg);
  border: var(--border) solid var(--theme-rule);
  border-radius: var(--radius);
  font-weight: 600;
  text-align: center;
}

.logo-tile__mark {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* An official logo pair: the theme shows the vendor's file for its background. */
.logo-variant--on-light {
  display: var(--logo-on-light-display);
}

.logo-variant--on-dark {
  display: var(--logo-on-dark-display);
}

.logo-tile__mark img {
  width: auto;
  max-width: 100%;
  height: var(--logo-height);
}

/* Wide logos shrink to the tile's width; square ones keep the full height. */
.logo-tile__mark svg {
  width: auto;
  max-width: 100%;
  height: var(--logo-height);
}

.logo-tile__wordmark {
  font-size: var(--text-wordmark);
  letter-spacing: var(--tracking-wordmark);
  line-height: 1;
}

.logo-tile__caption {
  font-size: var(--text-sm);
}

/* Platforms beside a short text, on service pages: two tiles per row */
.split .logos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split__text {
  margin-top: var(--space-5);
  color: var(--theme-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* Industry tiles */
.industries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr));
  gap: var(--space-4);
}

.industry {
  overflow: hidden;
  background: var(--theme-bg);
  border: var(--border) solid var(--theme-rule);
  border-radius: var(--radius);
}

.industry__art {
  height: var(--tile-art-panel);
}

.industry__art svg {
  width: auto;
  height: var(--tile-art);
}

.industry__name {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}

/* Process: numbered steps on navy, each with what it delivers */
.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--process-min), 100%), 1fr));
  gap: var(--space-7) var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.process__step {
  counter-increment: step;
}

.process__step::before {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  content: counter(step, decimal-leading-zero);
}

.process h3 {
  font-size: var(--text-lg);
}

.process p {
  margin-top: var(--space-2);
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
}

.process .process__deliverable {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--tag-pad-y) var(--space-2);
  border: var(--border) solid var(--color-on-dark-muted);
  border-radius: var(--radius);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Feature card: one case study or module, illustration beside the text */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.feature__art {
  min-height: var(--feature-art-panel);
  padding: var(--space-6);
}

.feature__art svg,
.story__art svg {
  width: 100%;
  max-width: var(--wide-art-max);
  height: auto;
  max-height: var(--feature-art-max-height);
}

.feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-7);
}

.feature .tag,
.story .tag {
  margin-bottom: var(--space-4);
}

.feature h3 {
  font-size: var(--text-2xl);
}

.feature__text,
.story__text {
  margin-top: var(--space-3);
  color: var(--theme-text-muted);
}

.feature .meta-tags {
  margin-top: var(--space-4);
}

.feature .more {
  margin-top: var(--space-5);
}

/* FAQ: details and summary, so it opens and closes without a script */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: var(--space-8);
  align-items: start;
}

.faq__intro p {
  margin-top: var(--space-4);
  color: var(--theme-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.faq__item {
  border-bottom: var(--border) solid var(--theme-rule);
}

.faq__item:first-child {
  border-top: var(--border) solid var(--theme-rule-strong);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  flex: none;
  width: var(--chevron-size);
  height: var(--chevron-size);
  border-right: var(--border-medium) solid var(--theme-text);
  border-bottom: var(--border-medium) solid var(--theme-text);
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease);
  content: "";
}

.faq__item[open] summary::after {
  transform: rotate(-135deg);
}

.faq__answer {
  padding-bottom: var(--space-5);
  color: var(--theme-text-muted);
}

/* ==========================================================================
   Lists and service page bands
   ========================================================================== */

/* Story cards: the case studies and modules lists, and related work */
.stories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--story-min), 100%), 1fr));
  gap: var(--space-5);
}

/* Two cards to a row, such as the modules */
.stories--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* One card per row, the illustration on the left, such as the modules page */
.stories--rows {
  grid-template-columns: minmax(0, 1fr);
}

.stories--rows .story {
  display: grid;
  grid-template-columns: var(--story-row-art) minmax(0, 1fr);
}

.stories > li {
  display: flex;
}

.story {
  flex: 1;
}

.story__art {
  min-height: var(--story-art-panel);
  padding: var(--space-5);
}

.story__art svg {
  max-height: var(--story-art-max-height);
}

.story__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-6);
}

.story h3 {
  font-size: var(--text-xl);
}

.story .more {
  margin-top: auto;
  padding-top: var(--space-5);
}

/* A card with extra links: the title's link covers the card, the extra links sit above it */
.story--with-links {
  position: relative;
}

.story--with-links:hover,
.story--with-links:focus-within {
  border-color: var(--theme-rule-strong);
}

.story__link {
  color: inherit;
  text-decoration: none;
}

.story__link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.story__links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--theme-rule);
  font-weight: 600;
}

.stories__note {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--theme-text-muted);
  font-size: var(--text-sm);
}

/* Split section: the heading beside the text, in larger type */
.split__body .prose {
  font-size: var(--text-lg);
}

/* At a glance: short facts as tiles, label then value */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--glance-min), 100%), 1fr));
  gap: var(--space-4);
}

.glance__item {
  padding: var(--space-5);
  background: var(--theme-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.glance dt {
  color: var(--theme-text-muted);
  font-size: var(--text-sm);
}

.glance dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}

/* Numbered cards. The number is in the text colour over an amber rule:
   amber is never used for text on white. */
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--principle-min), 100%), 1fr));
  gap: var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: principle;
}

.principles__item {
  padding: var(--space-6);
  background: var(--theme-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  counter-increment: principle;
}

.principles__item::before {
  display: block;
  margin-bottom: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--border-thick) solid var(--color-accent);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  content: counter(principle, decimal-leading-zero);
}

.principles h3 {
  font-size: var(--text-lg);
}

.principles p {
  margin-top: var(--space-2);
  color: var(--theme-text-muted);
}

/* A navy panel with one button, such as Work with us. The same in both themes. */
.partner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  background: var(--color-ink);
  border-radius: var(--radius);
  color: var(--color-paper);
}

.partner h2 {
  font-size: var(--text-2xl);
}

.partner p {
  max-width: var(--lead-width);
  margin-top: var(--space-3);
  color: var(--color-on-dark-muted);
}

/* The founder: a raised card beside the reasons */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: var(--space-8);
  align-items: start;
}

.founder-card {
  padding: var(--space-7);
  background: var(--theme-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.founder-card__label {
  color: var(--theme-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.founder-card__name {
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
}

.founder-card__role {
  margin-top: var(--space-2);
  color: var(--theme-text-muted);
}

.founder-card__links {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border) solid var(--theme-rule);
}

.founder-card__links a {
  font-weight: 600;
}

.founder__why h2 {
  font-size: var(--text-2xl);
}

.founder__intro {
  margin-top: var(--space-3);
  color: var(--theme-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* Numbered reasons. The number is in the text colour over an amber rule:
   amber is never used for text on white. */
.reasons {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: reason;
}

.reasons__item {
  display: grid;
  grid-template-columns: var(--reason-number) minmax(0, 1fr);
  gap: var(--space-4);
  counter-increment: reason;
}

.reasons__item::before {
  align-self: start;
  padding-top: var(--space-2);
  border-top: var(--border-thick) solid var(--color-accent);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  content: counter(reason, decimal-leading-zero);
}

.reasons h3 {
  font-size: var(--text-lg);
}

.reasons p {
  margin-top: var(--space-2);
  color: var(--theme-text-muted);
}

/* Link list: links to other sites, each with a line under it */
.links-list {
  display: grid;
  gap: var(--space-4);
}

.links-list a {
  font-weight: 600;
}

.links-list__note {
  display: block;
  color: var(--theme-text-muted);
  font-size: var(--text-sm);
}

/* A navy panel on a page band, such as Learning Ignition? on the home page */
.learn-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7);
  background: var(--color-ink);
  border-radius: var(--radius);
  color: var(--color-paper);
}

.learn-band h2 {
  font-size: var(--text-2xl);
}

.learn-band p {
  max-width: var(--lead-width);
  margin-top: var(--space-3);
  color: var(--color-on-dark-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.learn-band .btn {
  margin-top: var(--space-5);
}

.learn-band__art svg {
  width: 100%;
  max-width: var(--band-art-max);
  height: auto;
  margin-inline: auto;
}

/* Capabilities: what a service includes, each with an amber rule */
.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--caps-min), 100%), 1fr));
  gap: var(--space-4);
}

.caps__item {
  padding: var(--space-6);
  background: var(--theme-bg);
  border: var(--border) solid var(--theme-rule);
  border-left: var(--border-thick) solid var(--color-accent);
  border-radius: var(--radius);
}

.caps h3 {
  font-size: var(--text-lg);
}

.caps p {
  margin-top: var(--space-2);
  color: var(--theme-text-muted);
}

/* Call to action on amber */
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  align-items: center;
}

.cta__text p {
  max-width: var(--cta-text-width);
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* ==========================================================================
   Body blocks. Each has its own template in pages/templates/blocks.
   ========================================================================== */

/* Child list: the pages listed on index pages */
.child-list__item {
  padding-block: var(--space-6);
  border-top: var(--border) solid var(--theme-rule);
}

.child-list__item:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Contact page: the details card beside the form */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-8);
  align-items: start;
}

.contact-card {
  padding: var(--space-7);
  background: var(--theme-bg-alt);
  border: var(--border) solid var(--theme-rule);
  border-radius: var(--radius);
}

.contact-card h2 {
  font-size: var(--text-xl);
}

.contact-card dl {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.contact-card dt {
  color: var(--theme-text-muted);
  font-size: var(--text-sm);
}

.contact-card dd {
  margin: 0;
  font-weight: 500;
}

.contact-card address {
  font-style: normal;
}

.contact-card h3 {
  margin-top: var(--space-7);
  font-size: var(--text-base);
}

.contact-card ul {
  margin-top: var(--space-3);
  padding-left: var(--space-5);
  color: var(--theme-text-muted);
}

.contact-card li + li {
  margin-top: var(--space-2);
}

/* Forms: works without a script; errors in words, never by colour alone */
.form {
  display: grid;
  gap: var(--space-5);
}

.form h2 {
  font-size: var(--text-2xl);
}

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field__optional {
  color: var(--theme-text-muted);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--theme-bg);
  border: var(--border) solid var(--theme-field-border);
  border-radius: var(--radius);
  color: var(--theme-text);
}

.field textarea {
  min-height: var(--message-height);
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: var(--border-thick) solid var(--color-accent);
  outline-offset: var(--border);
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--theme-error);
  border-width: var(--border-medium);
}

.field__error {
  color: var(--theme-error);
  font-size: var(--text-sm);
  font-weight: 600;
}

.form__note {
  color: var(--theme-text-muted);
  font-size: var(--text-sm);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.form-errors {
  padding: var(--space-5);
  background: var(--theme-bg-alt);
  border: var(--border) solid var(--theme-rule);
  border-left: var(--border-thick) solid var(--theme-error);
  border-radius: var(--radius);
}

.form-errors h3 {
  color: var(--theme-error);
  font-size: var(--text-base);
}

.form-errors ul {
  margin-top: var(--space-3);
  padding-left: var(--space-5);
}

.form-errors li + li {
  margin-top: var(--space-2);
}

.form-done {
  padding: var(--space-6);
  background: var(--theme-bg-alt);
  border: var(--border) solid var(--theme-rule);
  border-left: var(--border-thick) solid var(--color-accent);
  border-radius: var(--radius);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* Callout: the same amber tint in both themes */
.callout {
  padding: var(--space-5);
  background: var(--color-accent-tint);
  color: var(--color-ink);
  border-radius: var(--radius);
}

/* Spec table: label and value rows inside a ruled box */
.spec-table {
  background: var(--theme-bg);
  border: var(--border) solid var(--theme-rule);
}

.spec-table caption {
  padding-bottom: var(--space-3);
  color: var(--theme-text-muted);
  font-size: var(--text-sm);
  text-align: left;
}

.spec-table th,
.spec-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border) solid var(--theme-rule);
}

.spec-table th {
  width: 30%;
}

/* Screenshot with caption. With a link, the image and caption are one link
   and the caption is underlined like other links. */
.screenshot__link {
  display: block;
}

.screenshot__image {
  width: 100%;
  border: var(--border) solid var(--theme-rule);
  border-radius: var(--radius);
}

/* A video block's player, put in place of the poster by video.js. */
.video__player {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--border) solid var(--theme-rule);
  border-radius: var(--radius);
}

.video__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.screenshot__caption {
  max-width: var(--measure);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--theme-text-muted);
}

/* Steps inside a section. role="list" in the template keeps the list
   semantics that list-style: none removes in Safari. */
.steps {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  display: grid;
  grid-template-columns: var(--space-7) 1fr;
  column-gap: var(--space-4);
  max-width: var(--measure);
  counter-increment: step;
}

.steps__item::before {
  grid-row: span 2;
  padding-top: var(--space-1);
  border-top: var(--border-medium) solid var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 600;
  content: counter(step, decimal-leading-zero);
}

.steps__title {
  font-size: var(--text-lg);
}

/* ==========================================================================
   Narrow screens: every two-column layout becomes one column
   ========================================================================== */

@media (max-width: 56rem) {
  .hero,
  .page-hero,
  .split,
  .integrator--with-card,
  .feature,
  .faq,
  .partner,
  .founder,
  .learn-band,
  .contact,
  .form__row,
  .cta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .feature {
    gap: 0;
  }

  /* A panel's button keeps its own width under the text */
  .partner .btn,
  .cta .btn {
    justify-self: start;
  }

  /* The flow illustration under the home page text, no wider than on a laptop */
  .hero__art svg {
    max-width: var(--hero-art-wide);
    margin-inline: auto;
  }

  .feature__art {
    min-height: var(--feature-art-panel-phone);
  }
}

/* ==========================================================================
   Phones (below 48rem, 768 px): text first and full width, smaller illustrations,
   tighter cards with equal gaps, and tap targets of at least 44 px
   ========================================================================== */

@media (max-width: 47.9375rem) {
  /* Heroes: the text, then the illustration, smaller and centred */
  .page-hero__art svg,
  .page-hero--wide .page-hero__art svg {
    max-width: var(--hero-art-phone);
  }

  /* Hero buttons: full width, one above the other */
  .hero .actions,
  .page-hero .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .actions .btn,
  .page-hero .actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target);
  }

  .section-head {
    margin-bottom: var(--space-6);
  }

  /* Filter chips: big enough to tap */
  .chips a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    padding-inline: var(--space-4);
  }

  .logo-tile {
    min-height: var(--logo-tile-height-phone);
    padding: var(--space-4);
  }

  /* Step text at body size, at least 16 px */
  .process p {
    font-size: var(--text-base);
  }

  /* Every grid of cards and tiles: one column, the same gap */
  .cards,
  .logos,
  .split .logos,
  .industries,
  .stories,
  .principles,
  .caps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  /* Module rows: the illustration on top, the text below */
  .stories--rows .story {
    display: flex;
  }

  /* At a glance: two short facts per row, the same height across a row.
     An odd last tile takes the whole row. */
  .glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .glance__item {
    padding: var(--space-4);
  }

  .glance dd {
    font-size: var(--text-base);
  }

  .glance__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* The same inner padding on every card and panel */
  .card__body,
  .story__body,
  .feature__body,
  .feature__art,
  .caps__item,
  .principles__item,
  .founder-card,
  .contact-card,
  .partner,
  .learn-band {
    padding: var(--space-5);
  }

  .partner .btn,
  .learn-band .btn,
  .cta .btn {
    display: flex;
    justify-content: center;
    justify-self: stretch;
  }

  /* The spec table: each label above its value */
  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display: block;
  }

  /* The caption stays above the ruled box, as on wide screens. */
  .spec-table {
    background: none;
    border: 0;
    font-size: var(--text-base);
  }

  .spec-table caption {
    display: block;
  }

  .spec-table tbody {
    background: var(--theme-bg);
    border: var(--border) solid var(--theme-rule);
  }

  .spec-table tr {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border) solid var(--theme-rule);
  }

  .spec-table tr:last-child {
    border-bottom: 0;
  }

  .spec-table th,
  .spec-table td {
    width: auto;
    padding: 0;
    border: 0;
  }

  .spec-table td {
    margin-top: var(--space-1);
    color: var(--theme-text-muted);
  }

  /* Form fields full width and at least 44 px tall; the text stays above
     16 px, so phones do not zoom in when a field is chosen. */
  .field input,
  .field select {
    min-height: var(--tap-target);
  }

  .form__actions .btn {
    flex: 1 1 100%;
    min-height: var(--tap-target);
  }

  /* Footer: Services and Contact across the full width, Company and the
     links column side by side between them. Company is as wide as its
     longest link, and the links column takes the rest. */
  .site-footer__grid {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-6) var(--space-5);
  }

  .site-footer__brand,
  .site-footer__column--services,
  .site-footer__column--contact {
    grid-column: 1 / -1;
  }

  /* Footer links: each a comfortable tap target */
  .site-footer li + li {
    margin-top: 0;
  }

  .site-footer__column a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-size: var(--text-footer-phone);
    line-height: var(--leading-snug);
  }

  .site-footer {
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }
}

/* The labels inside the flow illustration grow on phones, where it is drawn small. */
@media (max-width: 30rem) {
  .iso-label {
    font-size: var(--illustration-label-phone);
  }
}