/* ==========================================================================
   Components — reusable UI building blocks (BEM-style names).
   See docs/design-system.md for usage and rationale.

   1. Focus          6. Section header   11. Media (images)
   2. Buttons        7. Eyebrow & badge  12. Icons
   3. Links          8. Dividers         13. Forms
   4. Accent colour  9. CTA block        14. Site shell (logo, header, nav, footer)
   5. Cards         10. (reserved)
  15. Hero  16. Stats  17. Card variants  18. Steps  19. Founder card
  20. CTA glow + scroll reveal  21. Breadcrumb  22. Page hero  25. Why intro
  26. Service families  28. Check list  29. Challenge selector
  30. Dark hero  31. Connection map  32. Help cards
  35. Outcomes + scenarios  36. FAQ  37. Scope grid
  38. Process chevrons  39. Findings funnel  40. Service page split layouts
  41. Outcomes row  42. Layer stack
  45. Outcome pillars  46. Architecture view  47. Transition path  48. Step axis
  49. Help card examples  50. Outcome cycle  51. Outcomes on dark sections
  52. Connection map mesh  53. Transition note
  (27, 33, 34, 43, 44, 54, 55 removed in the content cleanup, 2026-09-30: service blocks, capability
   framework, engagement phases, flow path, step stair, overlap diagram, step loop. See git history.)
  56. Industry profile cards  57. Help card links  58. Equation  59. Service links
  60. Architecture cross-cutting band  61. Outcome links (+ notes on alt sections)
  62. Outcome list  63. Before → after  64. Outcome modules  65. Architecture boundary
  66. Founder profiles  67. Perspective panels  68. Form layout  69. Contact page pieces
   ========================================================================== */

/* ==========================================================================
   1. Focus — keyboard only, consistent everywhere
   ========================================================================== */

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

.on-dark :focus-visible,
.section--dark :focus-visible,
.cta-block :focus-visible {
  outline-color: var(--color-text-inverse);
}

/* ==========================================================================
   2. Buttons
   <a class="btn btn--primary" href="…">Explore Services <span class="btn__icon" aria-hidden="true">&rarr;</span></a>
   <button class="btn btn--secondary" type="button">Talk to Us</button>
   Variants: --primary, --secondary, --text, --light (on dark)   Size: --sm
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-family: inherit;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-none);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition:
    background-color var(--transition-duration) var(--transition-easing),
    border-color var(--transition-duration) var(--transition-easing),
    color var(--transition-duration) var(--transition-easing);
}

.btn__icon {
  display: inline-block;
  transition: transform var(--transition-duration) var(--transition-easing);
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

/* Primary — solid charcoal ("Explore Services", header "Talk to Us") */
.btn--primary {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
}

.btn--primary:hover {
  color: var(--color-on-primary);
  background-color: var(--color-primary-light);
}

.btn--primary:active {
  background-color: var(--color-primary-dark);
}

/* Secondary — charcoal outline on light backgrounds (hero "Talk to Us") */
.btn--secondary {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
}

.btn--secondary:active {
  color: var(--color-on-primary);
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Light — white button on dark/image backgrounds ("Talk to Syphers") */
.btn--light {
  color: var(--color-primary);
  background-color: var(--color-background);
}

.btn--light:hover {
  color: var(--color-primary);
  background-color: var(--color-background-alt);
}

.btn--light:active {
  background-color: var(--gray-100);
}

/* Text — link-style action with arrow ("View all services →") */
.btn--text {
  min-height: 0;
  padding: var(--space-2) 0;
  color: var(--color-link);
  font-size: var(--font-size-small);
  border: 0;
  border-radius: var(--radius-sm);
}

.btn--text:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.btn--text:active {
  color: var(--color-primary-dark);
}

.on-dark .btn--text,
.section--dark .btn--text {
  color: var(--color-text-inverse);
}

/* Size */
.btn--sm {
  min-height: var(--button-height-sm);
  padding-inline: var(--button-padding-x-sm);
}

.btn--block {
  width: 100%;
}

/* Disabled — solid neutral colours instead of opacity to keep text legible */
.btn:disabled,
.btn[aria-disabled="true"] {
  color: var(--color-text-muted);
  background-color: var(--gray-100);
  border-color: var(--gray-100);
  cursor: not-allowed;
  pointer-events: none;
}

.btn--text:disabled,
.btn--text[aria-disabled="true"] {
  background-color: transparent;
}

/* ==========================================================================
   3. Links
   ========================================================================== */

/* Quiet link — navigational lists (footer, breadcrumbs) */
.link-quiet {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.link-quiet:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* Makes a whole card clickable from one real link inside it */
.link-stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ==========================================================================
   4. Accent colour — cycles teal / blue / violet like the reference icons.
   Sets --accent, used by .card__icon, .icon and .accent-bar.
   ========================================================================== */

.accent--teal { --accent: var(--color-accent-teal); }
.accent--blue { --accent: var(--color-accent-blue); }
.accent--violet { --accent: var(--color-accent-violet); }

/* ==========================================================================
   5. Cards
   Default card is "open" (no box) as in the reference service and industry
   rows. Add --boxed for a bordered surface (e.g. insights, founders).
   <article class="card card--center accent--teal">
     <span class="card__icon">[svg.icon]</span>
     <h3 class="card__title"><a class="link-stretched" href="…">…</a></h3>
     <p class="card__text">…</p>
   </article>
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card--center {
  align-items: center;
  text-align: center;
}

.card--boxed {
  padding: var(--space-6);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-card);
  transition:
    border-color var(--transition-duration) var(--transition-easing),
    box-shadow var(--transition-duration) var(--transition-easing);
}

.card--boxed:hover {
  border-color: var(--gray-400);
  box-shadow: var(--shadow-md);
}

.card__media {
  margin-block-end: var(--space-2);
}

.card--boxed .card__media {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.card__icon {
  color: var(--accent, var(--color-primary));
  margin-block-end: var(--space-2);
}

.card__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.card__footer {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
}

/* Where :has() is supported, move the focus ring from the title link to
   the whole card; otherwise the link keeps its own ring. */
@supports selector(:has(a)) {
  .card .link-stretched:focus-visible {
    outline: none;
  }

  .card:has(.link-stretched:focus-visible) {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-card);
  }

  .card:has(.link-stretched):hover .card__title {
    color: var(--color-link);
  }
}

/* Hairline dividers between grid cells, as between the reference service
   columns. Lines sit in the gaps; outer edges stay clean. */
.grid--divided {
  overflow: hidden;
}

.grid--divided > * {
  position: relative;
}

.grid--divided > *::before,
.grid--divided > *::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* vertical line in the column gap to the left */
.grid--divided > *::before {
  inset-block: 0;
  inset-inline-start: calc(var(--grid-gap, var(--space-6)) / -2);
  border-inline-start: var(--border-width) solid var(--color-border);
}

/* horizontal line in the row gap above */
.grid--divided > *::after {
  inset-inline: 0;
  inset-block-start: calc(var(--grid-gap, var(--space-6)) / -2);
  border-block-start: var(--border-width) solid var(--color-border);
}

/* ==========================================================================
   6. Section header — eyebrow + heading, optional action aligned right
   <div class="section-header">
     <div class="section-header__titles">
       <span class="eyebrow">…</span>
       <h2 class="section-header__title">…</h2>
     </div>
     <a class="btn btn--text section-header__action" href="…">… <span class="btn__icon" aria-hidden="true">&rarr;</span></a>
   </div>
   ========================================================================== */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-end: var(--section-header-gap);
}

.section-header__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section-header__action {
  align-self: flex-start; /* never stretch to full width on mobile */
}

.section-header__intro {
  max-width: 40rem; /* ≈ 65–70 characters per line */
  margin-block-start: var(--space-2);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  color: var(--color-text-secondary);
}

.section-header--center {
  align-items: center;
  text-align: center;
}

.section-header--center .section-header__titles {
  align-items: center;
}

/* ==========================================================================
   7. Eyebrow & badge
   .eyebrow is defined in typography.css (text style).
   .badge is not present in the reference; neutral styling reserved for
   future insight categories/tags.
   ========================================================================== */

.eyebrow--accent {
  color: var(--teal-700);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-small);
  color: var(--color-text-secondary);
  background-color: var(--color-background-alt);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   8. Dividers
   ========================================================================== */

.divider {
  height: 0;
  margin: 0;
  border: 0;
  border-block-start: var(--border-width) solid var(--color-border);
}

.divider--vertical {
  align-self: stretch;
  width: 0;
  height: auto;
  border-block-start: 0;
  border-inline-start: var(--border-width) solid var(--color-border);
}

/* Short coloured bar under a title — reference industry row */
.accent-bar {
  display: block;
  width: var(--accent-bar-width);
  height: var(--accent-bar-height);
  background: var(--accent, var(--gradient-brand));
  border-radius: var(--radius-pill);
}

/* Short rule under the hero side statement — reference hero */
.rule-short {
  display: block;
  width: var(--space-8);
  height: 0;
  border-block-start: var(--border-width-thick) solid currentColor;
}

/* ==========================================================================
   9. CTA block — dark band with optional background image and overlay
   <section class="cta-block">
     <div class="cta-block__media"><img …></div>        (optional)
     <div class="container cta-block__inner">
       <div class="cta-block__content">
         <span class="eyebrow">…</span>
         <h2>… <span class="text-gradient">…</span></h2>
         <p>…</p>
       </div>
       <div class="cta-block__actions"><a class="btn btn--light" …>…</a></div>
     </div>
   </section>
   ========================================================================== */

.cta-block {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-padding-lg);
  color: var(--color-text-inverse-muted);
  background-color: var(--color-background-dark);
}

.cta-block :is(h2, h3) {
  color: var(--color-text-inverse);
}

.cta-block .eyebrow {
  color: var(--color-text-inverse-muted);
}

.cta-block__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cta-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the image so text keeps AA contrast */
.cta-block__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-overlay) 0%, var(--color-overlay-soft) 100%);
}

.cta-block__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.cta-block__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 40rem;
}

.cta-block__actions {
  flex-shrink: 0;
}

/* ==========================================================================
   11. Media — image containers
   <figure class="media media--card media--rounded">
     <img src="…" alt="…" width="…" height="…" loading="lazy" decoding="async">
   </figure>
   Ratios: --landscape 16:9, --card 3:2, --thumb 4:3, --square 1:1, --portrait 4:5
   ========================================================================== */

.media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-background-alt); /* shown while loading */
}

.media > img,
.media > picture > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--landscape { aspect-ratio: var(--ratio-landscape); }
.media--card { aspect-ratio: var(--ratio-card); }
.media--thumb { aspect-ratio: var(--ratio-thumb); }
.media--square { aspect-ratio: var(--ratio-square); }
.media--portrait { aspect-ratio: var(--ratio-portrait); }

.media--rounded {
  border-radius: var(--radius-card);
}

/* Hero imagery: fills its column/area; height comes from the layout */
.media--hero {
  min-height: clamp(16rem, 36vw, 32.5rem); /* reference hero band: 520px at 1440 */
}

/* Soft fade into the page background from the text side — reference hero */
.media--fade-start {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
}

.media--fade-end {
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 35%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 35%);
}

/* Focal point override: style="--focus: 30% 50%" */
.media > img {
  object-position: var(--focus, 50% 50%);
}

.media figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-2) var(--space-3);
}

/* ==========================================================================
   12. Icons — inline SVG, outline style, colour from currentColor
   <svg class="icon icon--lg" aria-hidden="true" focusable="false"><use href="/assets/icons/sprite.svg#shield"></use></svg>
   Conventions: assets/icons/README.md
   ========================================================================== */

.icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-size, var(--icon-size-md));
  height: var(--icon-size, var(--icon-size-md));
  color: var(--accent, currentColor);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.icon--sm { --icon-size: var(--icon-size-sm); }
.icon--md { --icon-size: var(--icon-size-md); }
.icon--lg { --icon-size: var(--icon-size-lg); }

/* Solid glyphs (e.g. social logos) */
.icon--filled {
  fill: currentColor;
  stroke: none;
}

/* ==========================================================================
   13. Forms
   ========================================================================== */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field__label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.form-field__required {
  color: var(--color-error);
}

.form-field__input {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-duration-fast) var(--transition-easing);
}

.form-field__input:hover {
  border-color: var(--color-text-muted);
}

.form-field__input:focus-visible {
  border-color: var(--color-focus);
  outline-offset: 0;
}

.form-field__input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-field__hint {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.form-field__error {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
}

.form-status {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-small);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-sm);
}

.form-status--success { color: var(--color-success); }
.form-status--error { color: var(--color-error); }

/* ==========================================================================
   14. Site shell — logo slot, header & navigation (Phase 3), footer
   (Phase 1 foundation; final footer design is a later phase).
   ========================================================================== */

/* ---------- Logo lockup ---------------------------------------------------
   Official wordmark (assets/logo/syphers-logo.svg, unmodified) + tagline
   "Connecting the Dots" + three brand dots, arranged as in the reference.
   Every part is sized from --logo-height (the wordmark height), so the
   lockup scales as one unit.
     --stacked  tagline row under the wordmark (header and footer)       */

.site-logo {
  display: inline-flex;
  flex-shrink: 0;
  width: fit-content; /* never stretch inside column layouts */
  color: var(--color-logo);
  text-decoration: none;
}

.site-logo:hover {
  color: var(--color-logo);
}

.site-logo__wordmark {
  display: block;
  width: auto;
  height: var(--logo-height);
}

.site-logo__tagline {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-height) * 0.4);
  font-size: calc(var(--logo-height) * 0.4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-none);
  white-space: nowrap;
  color: var(--color-logo);
}

.site-logo__dots {
  display: inline-flex;
  gap: calc(var(--logo-height) * 0.23);
}

.site-logo__dots > span {
  width: calc(var(--logo-height) * 0.26);
  height: calc(var(--logo-height) * 0.26);
  border-radius: 50%;
}

.site-logo__dots > span:nth-child(1) { background-color: var(--color-accent-teal); }
.site-logo__dots > span:nth-child(2) { background-color: var(--color-accent-blue); }
.site-logo__dots > span:nth-child(3) { background-color: var(--color-accent-violet); }

/* Tagline row under the wordmark */
.site-logo--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--logo-height) * 0.25);
}

/* Shown only if no wordmark file is configured */
.site-logo__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--logo-height) * 3.45);
  height: var(--logo-height);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-none);
  white-space: nowrap;
  color: var(--color-text-muted);
  background-color: var(--color-background-alt);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
}

/* ---------- Header --------------------------------------------------------
   Sticky white bar with a hairline rule, as in the reference. A soft shadow
   appears once the page scrolls (.is-scrolled, set by navigation.js).
   Mobile-first: below 1024px the navigation is a full-width panel opened by
   the menu button; desktop layout lives in responsive.css.               */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-background);
  border-block-end: var(--border-width) solid var(--color-border);
  transition: box-shadow var(--transition-duration) var(--transition-easing);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

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

/* ---------- Menu button (mobile/tablet) ---------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--button-height-sm);
  height: var(--button-height-sm);
  margin-inline-end: calc(var(--space-3) * -1); /* optically align bars with the content edge */
  color: var(--color-primary);
  border-radius: var(--radius-button);
  transition: background-color var(--transition-duration-fast) var(--transition-easing);
}

.nav-toggle:hover {
  background-color: var(--color-background-alt);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.375rem;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition:
    transform var(--transition-duration) var(--transition-easing),
    background-color var(--transition-duration-fast);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Navigation panel (mobile/tablet) ----------------------------- */

.site-nav {
  position: fixed;
  inset: calc(var(--header-height) + var(--border-width)) 0 0 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-2) var(--container-padding) var(--space-8);
  background-color: var(--color-background);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--transition-duration) var(--transition-easing),
    transform var(--transition-duration) var(--transition-easing),
    visibility 0s linear var(--transition-duration);
}

.site-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
}

.site-nav__item {
  border-block-end: var(--border-width) solid var(--color-border);
}

.site-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-nav__link {
  position: relative;
  display: block;
  flex: 1;
  padding: var(--space-4) 0;
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-duration-fast) var(--transition-easing);
}

.site-nav__link:hover,
.site-nav__menu-link:hover {
  color: var(--color-link);
}

/* Current page / current section */
.site-nav__link[aria-current] {
  color: var(--color-link);
}

/* Submenu toggle: chevron button beside the section link */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--button-height-sm);
  height: var(--button-height-sm);
  color: var(--color-text-primary);
  border-radius: var(--radius-button);
  transition:
    background-color var(--transition-duration-fast) var(--transition-easing),
    color var(--transition-duration-fast) var(--transition-easing);
}

.site-nav__toggle:hover {
  color: var(--color-link);
  background-color: var(--color-background-alt);
}

/* CSS chevron (no icon asset needed): points down, flips up when open */
.site-nav__chevron {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: var(--border-width-thick) solid currentColor;
  border-block-end: var(--border-width-thick) solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--transition-duration) var(--transition-easing);
}

.site-nav__item.is-open .site-nav__chevron {
  transform: translateY(25%) rotate(-135deg);
}

/* Submenu: accordion on mobile/tablet */
.site-nav__menu {
  display: none;
  margin: 0 0 var(--space-4) var(--space-1);
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-width-thick) solid var(--color-border);
}

.site-nav__item.is-open > .site-nav__menu {
  display: block;
}

.site-nav__menu-link {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition:
    color var(--transition-duration-fast) var(--transition-easing),
    background-color var(--transition-duration-fast) var(--transition-easing);
}

.site-nav__menu-link[aria-current="page"] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}

/* Primary CTA — full width at the end of the panel */
.site-nav__cta {
  width: 100%;
}

/* Tablet: keep the panel's content at a comfortable reading width */
@media (min-width: 48em) and (max-width: 63.99em) {
  .site-nav > * {
    width: 100%;
    max-width: 32rem;
  }
}

/* ---------- Without JavaScript -------------------------------------------
   The menu button cannot work, so the panel renders as a static block
   below the bar with every submenu expanded.                             */

.no-js .site-header__inner {
  flex-wrap: wrap;
  padding-block: var(--space-3);
}

.no-js .nav-toggle {
  display: none;
}

.no-js .site-nav {
  position: static;
  width: 100%;
  padding: 0;
  visibility: visible;
  opacity: 1;
  transform: none;
}

.no-js .site-nav__toggle {
  display: none;
}

.no-js .site-nav__menu {
  display: block;
}

/* ---------- Footer --------------------------------------------------------
   Brand column (logo lockup, positioning statement, location, social) +
   three link columns (Services, Industries, Company), then a bottom bar
   (copyright + legal links). Mobile-first: stacked; responsive.css adds
   2 → 3 → 4 columns.                                                     */

.site-footer {
  padding-block-start: var(--section-padding);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  background-color: var(--color-background);
  border-block-start: var(--border-width) solid var(--color-border);
}

.site-footer__main {
  display: grid;
  gap: var(--space-8);
  padding-block-end: var(--space-8);
}

/* Brand column */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 22rem;
}

.site-footer__statement {
  color: var(--color-text-secondary);
}

.site-footer__address {
  font-style: normal;
  color: var(--color-text-muted);
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin-block-start: calc(var(--space-2) * -1); /* offset the links' touch padding */
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
}

.site-footer__social-link:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* URL not yet provided: shown as muted text, not a link */
.site-footer__social-link.is-pending {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Link columns */
/* 1 column on small phones, 2 once there is room (≈ 480px+); 3 from tablet */
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-7) var(--space-6);
}

.site-footer__heading {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-none);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.site-footer__link,
.site-footer__legal-link {
  display: inline-block;
  padding-block: var(--space-2);
  line-height: var(--line-height-snug);
  text-decoration: none;
  transition: color var(--transition-duration-fast) var(--transition-easing);
}

.site-footer__link {
  color: var(--color-text-secondary);
}

.site-footer__legal-link {
  color: var(--color-text-muted);
}

.site-footer__link:hover,
.site-footer__legal-link:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.site-footer__link[aria-current="page"],
.site-footer__legal-link[aria-current="page"] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* Bottom bar */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-4);
  font-size: var(--font-size-caption);
  border-block-start: var(--border-width) solid var(--color-border);
}

.site-footer__copy {
  color: var(--color-text-muted);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

/* ==========================================================================
   15. Hero — page-opening statement with media bleeding to the right edge.
   Media is a band below the content on mobile/tablet; on desktop it fills
   the right side and fades into the page (as in the reference).
   <section class="hero">
     <div class="container hero__inner"><div class="hero__content">…</div></div>
     <div class="hero__media"><img class="hero__img" src="…" alt="" …></div>
   </section>
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-background);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-9) var(--space-8);
}

.hero__content {
  max-width: 36rem;
}

.hero__content > .eyebrow {
  margin-block-end: var(--space-4);
}

.hero__title {
  margin-block-end: var(--space-5);
}

.hero__lead {
  margin-block-end: var(--space-7);
  color: var(--color-text-secondary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  max-height: 26rem;
  background-color: var(--color-background-alt); /* shown only while the image loads */
}

/* The image: final photo or the temporary placeholder (same slot, same crop) */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, 65% 50%);
}

/* Overlay: fades the image into the page on the text side (top on mobile,
   left on desktop), so any approved image blends the way the reference does */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--color-background) 0%, transparent 28%);
}

/* Development-only marker so the temporary visual is never mistaken for final art */
.placeholder-label {
  display: none;
  position: absolute;
  inset: auto var(--space-3) var(--space-3) auto;
  z-index: 1;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--color-background-dark) 75%, transparent);
  border: var(--border-width) dashed var(--color-border-inverse);
  border-radius: var(--radius-pill);
}

[data-env="development"] .placeholder-label {
  display: inline-flex;
}

/* ==========================================================================
   16. Stats — approved figures only (label read before value by AT)
   <dl class="stats"><div class="stat accent--teal"><dt class="stat__label">…</dt><dd class="stat__value">28+</dd></div></dl>
   ========================================================================== */

.stats {
  display: grid;
  gap: var(--space-6);
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  border-inline-start: var(--accent-bar-height) solid var(--accent, var(--color-primary));
}

.stat__value {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-none);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-primary);
}

.stat__label {
  max-width: 18rem;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   17. Card variants
   ========================================================================== */

/* Open card lists (services, industries): hairline-divided cells, more air */
.card-list--open {
  --grid-gap: var(--space-8);
}

/* Feature card (services): accent bar, title, one-line teaser, "Learn More" at the bottom */
.card--feature {
  gap: var(--space-4);
  padding-inline-end: var(--space-4);
}

.card--feature .accent-bar {
  margin-block-end: var(--space-1);
}

.card--feature .card__text {
  max-width: 24rem;
}

/* Industry card: open card in a divided row */
.card--industry .card__text {
  flex: 1;
}

/* Insight card */
.card__badge {
  align-self: flex-start;
}

.card__meta {
  margin-block-start: auto;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Pillar card (Secure / Build / Transform): accent rule on top; the title
   closes with an accent full stop, echoing "Secure. Build. Transform." */
.card--pillar {
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6) var(--space-6);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--color-background)) 0%, var(--color-background) 45%);
  border-color: var(--color-border);
  box-shadow: inset 0 var(--accent-bar-height) 0 var(--accent);
}

.card--pillar:hover {
  box-shadow: inset 0 var(--accent-bar-height) 0 var(--accent), var(--shadow-md);
}

.pillar__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

.pillar__title::after {
  content: ".";
  color: var(--accent);
}

.pillar__label {
  margin-block-start: var(--space-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pillar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-small);
}

.pillar__list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--color-text-secondary);
}

.pillar__list li::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--accent);
  transform: translateY(-0.1em);
}

.pillar__list a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.pillar__list a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* ==========================================================================
   18. Steps — process flow (vertical on mobile/tablet, horizontal on desktop)
   <ol class="steps"><li class="step accent--teal"><span class="step__marker">01</span>
     <h3 class="step__title">…</h3><p class="step__text">…</p></li></ol>
   ========================================================================== */

.steps {
  --step-marker: 3rem;
  display: grid;
  gap: var(--space-7);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-marker) minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-content: start;
}

.step__marker {
  position: relative;
  z-index: 1;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--step-marker);
  height: var(--step-marker);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  border: var(--border-width-thick) solid var(--accent, var(--color-primary));
  border-radius: 50%;
}

.step__title {
  align-self: center;
  font-size: var(--font-size-h3);
}

.step__text {
  color: var(--color-text-secondary);
}

/* Connector to the next step */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block: var(--step-marker) calc(var(--space-7) * -1);
  inset-inline-start: calc(var(--step-marker) / 2 - 1px);
  border-inline-start: var(--border-width-thick) solid var(--color-border-strong);
}

/* ==========================================================================
   19. Founder card
   Photo: set founders[].photo in data/site.json (/assets/images/founders/<id>.jpg);
   until then an initials placeholder is shown.
   ========================================================================== */

.founder-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  height: 100%;
  padding: var(--space-7) var(--space-6);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-card);
}

.founder-card__photo {
  width: 7.5rem;
  border-radius: var(--radius-card);
}

.founder-card__photo img {
  border-radius: inherit;
}

.founder-card__initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background:
    linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--color-accent-blue) 10%, transparent)),
    var(--color-background);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: inherit;
}

.founder-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.founder-card__name {
  font-size: var(--font-size-h3);
}

.founder-card__role {
  margin-block-start: calc(var(--space-2) * -1);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.founder-card__summary {
  max-width: 34rem;
  color: var(--color-text-secondary);
}

.founder-card__label {
  margin-block-start: var(--space-3);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.founder-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

.founder-card__link {
  padding-block: var(--space-2);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

/* One wide card per row until two fit side by side (≈ 1200px+) */
.founder-list {
  grid-template-columns: repeat(auto-fit, minmax(min(34rem, 100%), 1fr));
  --grid-gap: var(--space-6);
}

/* Photo beside the text only when the card itself is wide enough
   (container query: works in any grid, at any page width) */
.founder-list > li {
  container-type: inline-size;
}

@container (min-width: 34rem) {
  .founder-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-7);
  }
}

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

/* ==========================================================================
   20. CTA glow variant and scroll reveal
   ========================================================================== */

/* Brand-colour light on the dark CTA band when no background image is used */
.cta-block--glow {
  background-image:
    radial-gradient(ellipse 45% 90% at 88% 50%, color-mix(in srgb, var(--color-accent-blue) 32%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 70% at 100% 100%, color-mix(in srgb, var(--color-accent-violet) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 60% at 70% 0%, color-mix(in srgb, var(--color-accent-teal) 24%, transparent), transparent 70%);
}

/* Applied only once components.js confirms it can reveal (html.reveal-ready).
   Hiding is instant (only below-the-fold items are hidden); the transition
   lives on .is-revealed so elements only ever animate in. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}

@media print {
  .reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--transition-duration-reveal) var(--transition-easing),
    transform var(--transition-duration-reveal) var(--transition-easing);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ==========================================================================
   21. Breadcrumb — generated by the build from the URL (<!-- build:breadcrumb -->)
   <nav class="breadcrumb" aria-label="Breadcrumb"><ol class="breadcrumb__list">
     <li><a href="/">Home</a></li><li><span aria-current="page">Services</span></li></ol></nav>
   ========================================================================== */

.breadcrumb {
  margin-block-end: var(--space-7);
  font-size: var(--font-size-caption);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.breadcrumb__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

/* Separator, hidden from assistive tech (alt text after the slash) */
.breadcrumb__list li + li::before {
  content: "/" / "";
  color: var(--color-border-control);
}

.breadcrumb__list a {
  padding-block: var(--space-1);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumb__list a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ==========================================================================
   22. Page hero — inner-page variant of .hero
   Same type and buttons as the homepage hero, but a contained 4:3 image
   beside the text (no full-bleed), plus a breadcrumb above.
   <section class="hero hero--page"><div class="container hero__inner">
     [breadcrumb] <div class="hero__grid"><div class="hero__content">…</div>
     <div class="hero__media"><img class="hero__img" …></div></div></div></section>
   ========================================================================== */

.hero--page .hero__inner {
  padding-block: var(--space-6) var(--section-padding);
}

.hero--page .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

/* Long hero / CTA button labels wrap instead of overflowing on phones (only when they don't fit) */
.hero__actions .btn,
.cta-block__actions .btn {
  max-width: 100%;
  white-space: normal;
}

/* Comfortable spacing if a filled/outlined label wraps (their min-height keeps one-line buttons unchanged) */
.hero__actions .btn:not(.btn--text),
.cta-block__actions .btn:not(.btn--text) {
  line-height: var(--line-height-snug);
}

.hero--page .hero__title {
  margin-block-end: var(--space-5);
}

.hero--page .hero__media {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  max-height: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

.hero--page .hero__media::after {
  display: none; /* no fade: the image is contained, not bleeding into the page */
}

/* ==========================================================================
   25. Why intro — statement heading beside a short paragraph, points below
   ========================================================================== */

.why-intro {
  align-items: end;
}

.why-intro__title {
  margin-block-start: var(--space-4);
}

.why-intro__text {
  max-width: 34rem;
  color: var(--color-text-secondary);
}

.why-points {
  --grid-gap: var(--space-7);
  margin-block-start: var(--section-header-gap);
}

/* ==========================================================================
   Dark sections — reusable fixes for components placed on .section--dark
   ========================================================================== */

.section--dark .section-header__intro {
  color: var(--color-text-inverse-muted);
}

.section--dark .btn--secondary {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

.section--dark .btn--secondary:hover {
  color: var(--color-primary);
  background-color: var(--color-text-inverse);
}

/* Family eyebrow: short accent rule before the label (Secure / Build / Transform) */
.eyebrow--family {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.eyebrow--family::before {
  content: "";
  width: var(--space-6);
  height: var(--accent-bar-height);
  background-color: var(--accent);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   26. Service families — "How Can We Help?" (services landing page)
   One large panel per family: index · title + statement | description | services
   <ol class="families"><li class="family accent--teal">…</li></ol>
   ========================================================================== */

.families {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.family {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6) var(--space-7) var(--space-7);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: inset var(--accent-bar-height) 0 0 var(--accent);
}

.family__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.family__index {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted);
}

.family__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

.family__title::after {
  content: ".";
  color: var(--accent);
}

.family__statement {
  max-width: 22rem;
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.family__text {
  max-width: 30rem;
  color: var(--color-text-secondary);
}

.family__services {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.family__count {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.family__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.family__list a {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
}

.family__list a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* ==========================================================================
   28. Check list — capability lists with accent ticks
   ========================================================================== */

.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-3) var(--space-6);
  width: 100%;
  margin-block: var(--space-2);
}

.check-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.75rem;
  border-inline-end: var(--border-width-thick) solid var(--accent, var(--color-primary));
  border-block-end: var(--border-width-thick) solid var(--accent, var(--color-primary));
  transform: translateY(-0.1em) rotate(45deg);
}

.section--dark .check-list li {
  color: var(--color-text-inverse);
}

/* ==========================================================================
   29. Challenge selector — "Where Should We Start?"
   <a class="challenge accent--teal"><span class="challenge__text">…</span>
     <span class="challenge__service">Service →</span></a>
   ========================================================================== */

.challenge-list {
  --grid-gap: var(--space-5);
}

.challenge {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  height: 100%;
  padding: var(--space-6);
  text-decoration: none;
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-card);
  box-shadow: inset var(--accent-bar-height) 0 0 var(--accent);
  transition:
    border-color var(--transition-duration) var(--transition-easing),
    box-shadow var(--transition-duration) var(--transition-easing);
}

.challenge:hover {
  border-color: var(--color-border-control);
  box-shadow: inset var(--accent-bar-height) 0 0 var(--accent), var(--shadow-md);
}

.challenge__text {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.challenge__service {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}

.challenge:hover .challenge__service {
  text-decoration: underline;
}

.challenge:hover .btn__icon {
  transform: translateX(3px);
}

/* ==========================================================================
   30. Dark hero — any .hero can take .section--dark (e.g. service pages)
   ========================================================================== */

.hero.section--dark {
  background-color: var(--color-background-dark);
}

.section--dark .hero__lead {
  color: var(--color-text-inverse-muted);
}

.section--dark .breadcrumb__list li,
.section--dark .breadcrumb__list li + li::before {
  color: var(--color-text-inverse-muted);
}

.section--dark .breadcrumb__list a {
  color: var(--color-text-inverse-muted);
}

.section--dark .breadcrumb__list a:hover,
.section--dark .breadcrumb [aria-current="page"] {
  color: var(--color-text-inverse);
}

/* CTA block: room for a secondary text link beside the button */
.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.cta-block .btn--text {
  color: var(--color-text-inverse);
}

/* ==========================================================================
   31. Connection map — areas connected to a central focus
   Mobile: centre chip above a wrapped cluster of area chips.
   Tablet+: areas arranged on a ring, joined to the centre by spokes.
   (<!-- build:connection-map:ID -->; count/index passed as --count/--i)
   ========================================================================== */

.connection-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.connection-map__center {
  position: relative;
  z-index: 1;
  padding: var(--space-4) var(--space-6);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--color-accent-blue) 18%, transparent), var(--shadow-md);
}

.connection-map__areas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.connection-map__area > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.connection-map__area > span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--accent);
}

/* ==========================================================================
   32. Help cards — "Where We Can Help" (large decorative index number)
   ========================================================================== */

.card--help {
  gap: var(--space-3);
}

.card--help__index {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-none);
  letter-spacing: var(--letter-spacing-heading);
  color: color-mix(in srgb, var(--accent) 75%, var(--color-background));
  margin-block-end: var(--space-2);
}

/* ==========================================================================
   35. Outcomes and scenarios
   ========================================================================== */

.outcome-list {
  --grid-gap: var(--space-8);
}

.outcome {
  gap: var(--space-3);
}

.outcome__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-h3);
}

.outcome__title::before {
  content: "";
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--accent);
}

.scenario-list {
  --grid-gap: var(--space-5);
}

/* Illustrative situations (not client quotes) */
.scenario {
  height: 100%;
  padding: var(--space-6);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-card);
}

.scenario::before {
  content: "“" / "";
  display: block;
  height: var(--space-6);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-none);
  color: var(--color-accent-blue);
}

.scenario p {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

/* ==========================================================================
   36. FAQ — native <details>/<summary> disclosure
   (<!-- build:faq:ID --> also emits FAQPage JSON-LD)
   ========================================================================== */

.faq {
  border-block-start: var(--border-width) solid var(--color-border-strong);
}

.faq__item {
  border-block-end: var(--border-width) solid var(--color-border-strong);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__heading {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  transition: color var(--transition-duration-fast) var(--transition-easing);
}

.faq__question:hover .faq__heading {
  color: var(--color-link);
}

/* Plus / minus indicator */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: var(--border-width-thick) solid var(--color-border-strong);
  border-radius: 50%;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  height: var(--border-width-thick);
  background-color: var(--color-text-primary);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-duration) var(--transition-easing);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
  max-width: 44rem;
  padding-block-end: var(--space-6);
  color: var(--color-text-secondary);
}

/* FAQ section layout: heading column beside the questions (desktop) */
.faq-layout {
  --split-ratio: 0.55fr;
  align-items: start;
}

/* ==========================================================================
   37. Scope grid — assessable areas as checkpoint tiles + "scope is agreed" note
   (<!-- build:scope-grid:ID -->)
   ========================================================================== */

.scope {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

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

.scope-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-6);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-card);
}

/* Checkpoint marker: small ticked square in the tile's accent */
.scope-grid__marker {
  position: relative;
  width: 1.375rem;
  height: 1.375rem;
  margin-block-end: var(--space-2);
  border: var(--border-width-thick) solid var(--accent);
  border-radius: var(--radius-sm);
}

.scope-grid__marker::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 0.3rem;
  height: 0.6rem;
  border-inline-end: var(--border-width-thick) solid var(--accent);
  border-block-end: var(--border-width-thick) solid var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.scope-grid__title {
  font-size: var(--font-size-h4);
}

.scope-grid__text {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-secondary);
}

/* Scope note: an empty (dashed) checkpoint — "you choose what is in scope" */
.scope__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 48rem;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-card);
}

.scope__note-marker {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.2em;
  border: var(--border-width-thick) dashed var(--color-border-control);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   38. Process chevrons — numbered steps as an arrow sequence
   (stacked on mobile/tablet; chevron row from desktop) (<!-- build:process-chevrons:ID -->)
   ========================================================================== */

.chevrons {
  display: grid;
  gap: var(--space-5);
}

.chevron {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chevron__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 4rem;
  padding: var(--space-3) var(--space-5);
  background-color: color-mix(in srgb, var(--accent) 12%, var(--color-background));
  border-radius: var(--radius-button);
}

.chevron__number {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
}

.chevron__title {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-snug);
}

.chevron__text {
  padding-inline: var(--space-5);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   39. Findings funnel — stages narrowing from a finding to an action plan
   (designed for dark sections) (<!-- build:stage-funnel:ID -->)
   ========================================================================== */

.funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.funnel__stage {
  position: relative;
  display: flex;
  justify-content: center;
  width: calc(100% - var(--i) * 7%);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--accent) 22%, transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--radius-button);
}

.funnel__stage:nth-child(-n + 2) { --accent: var(--color-accent-teal); }
.funnel__stage:nth-child(n + 3) { --accent: var(--color-accent-blue); }
.funnel__stage:nth-child(n + 5) { --accent: var(--color-accent-violet); }

/* Arrow in the gap between stages (hidden from assistive tech) */
.funnel__stage + .funnel__stage::before {
  content: "↓" / "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  font-size: var(--font-size-small);
  line-height: var(--space-5);
  color: var(--color-text-inverse-muted);
  transform: translateX(-50%);
}

/* The end point: the action plan */
.funnel__stage--final {
  color: var(--color-primary);
  background-color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

/* ==========================================================================
   40. Service page section layouts (split variants)
   ========================================================================== */

.audit-why {
  align-items: start;
}

/* Hero title made of two statements (.text-line): slightly reduced on desktop so each
   statement holds a single line in the split hero column (see responsive.css) */
.hero__title--statements .text-line {
  text-wrap: balance;
}

.finding-action {
  align-items: center;
}

.finding-action__note,
.flow__note {
  padding-block-start: var(--space-4);
  font-size: var(--font-size-small);
  color: var(--color-text-inverse-muted);
  border-block-start: var(--border-width) solid var(--color-border-inverse);
}

/* ==========================================================================
   41. Outcomes row — 4-up variant under a section header
   (<!-- build:outcomes:ID:row -->; 1 / 2 / 4 columns via .grid--4)
   ========================================================================== */

.outcome-list--row {
  --grid-gap: var(--space-7);
}

/* ==========================================================================
   42. Layer stack — conceptual layers joined into one system, with a dashed
   return rail from the last layer back to the first (<!-- build:layer-stack:ID -->)
   ========================================================================== */

.layers {
  --layer-height: 3.25rem;
  --rail-width: var(--space-5);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-end: calc(var(--rail-width) + var(--space-5));
}

.layers__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--layer-height);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background-color: color-mix(in srgb, var(--accent) 9%, var(--color-background));
  border-inline-start: 4px solid var(--accent);
}

.layers__item:first-child { border-start-end-radius: var(--radius-card); }
.layers__item:last-child { border-end-end-radius: var(--radius-card); }

.layers__node {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--accent);
  border-radius: 50%;
}

/* Return rail (decorative): from the middle of the last layer back up to the first */
.layers::after {
  content: "";
  position: absolute;
  inset-block: calc(var(--layer-height) / 2);
  inset-inline-end: var(--space-2);
  width: var(--rail-width);
  border: var(--border-width-thick) dashed var(--color-border-control);
  border-inline-start: 0;
  border-start-end-radius: var(--radius-card);
  border-end-end-radius: var(--radius-card);
}

/* Arrowhead where the rail re-enters the first layer */
.layers::before {
  content: "";
  position: absolute;
  top: calc(var(--layer-height) / 2 - 5px);
  inset-inline-end: calc(var(--space-2) + var(--rail-width) + 2px);
  border-block: 5px solid transparent;
  border-inline-end: 7px solid var(--color-border-control);
}

/* ==========================================================================
   45. Outcome pillars — tiles standing on a shared base line
   (<!-- build:outcomes:ID.KEY:pillars -->; 1 / 2 / 4 columns via .grid--4)
   ========================================================================== */

.outcome-list--pillars {
  --grid-gap: var(--space-4);
  --pillar-base: 0.375rem;
  position: relative;
  padding-block-end: var(--pillar-base);
}

/* The shared base the pillars stand on (decorative) */
.outcome-list--pillars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--pillar-base);
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
}

.outcome-list--pillars .outcome {
  height: 100%;
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-background-alt);
  border-block-start: 4px solid var(--accent);
  border-start-start-radius: var(--radius-card);
  border-start-end-radius: var(--radius-card);
}

.outcome-list--pillars .outcome__title {
  font-size: var(--font-size-h4);
}

.outcome-list--pillars .outcome__title::before {
  display: none;
}

/* Pillars on an alternate-background section: tiles switch to white so they stay distinct */
.section--alt .outcome-list--pillars .outcome {
  background-color: var(--color-background);
}

/* ==========================================================================
   46. Architecture view — connected layers inside a system boundary with
   supporting considerations around it (designed for dark sections; layout
   from 1024 px in responsive.css) (<!-- build:architecture-view:ID -->)
   ========================================================================== */

.arch {
  --arch-column: minmax(18rem, 24rem);
  --arch-line: color-mix(in srgb, var(--color-text-inverse) 40%, transparent);
  display: grid;
  gap: var(--space-7);
}

/* System boundary with a spine connecting the layers */
.arch__layers {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  padding: var(--space-5);
  border: var(--border-width) dashed var(--arch-line);
  border-radius: var(--radius-card);
}

.arch__layers::before {
  content: "";
  position: absolute;
  inset-block: var(--space-6);
  left: calc(50% - 1px);
  width: 2px;
  background-color: var(--arch-line);
}

.arch__layer {
  position: relative;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--accent) 24%, var(--color-background-dark));
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: var(--radius-button);
}

.arch__support-label {
  margin-block-end: var(--space-4);
  text-align: center;
}

.arch__considerations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.arch__consideration {
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-inverse);
  border: var(--border-width) solid var(--color-border-inverse);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   47. Transition path — current state to modernized environment
   (row from 1024 px, stacked below) (<!-- build:transition-path:ID -->)
   ========================================================================== */

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

.transition__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-card);
}

.transition__title {
  font-size: var(--font-size-h4);
}

.transition__text {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-secondary);
}

/* Where you start: drawn "as-is" */
.transition__stage--from {
  background-color: transparent;
  border: var(--border-width-thick) dashed var(--color-border-control);
}

/* Where you are heading: the destination */
.transition__stage--to {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.transition__stage--to .transition__title {
  color: var(--color-text-inverse);
}

.transition__stage--to .transition__text {
  color: var(--color-text-inverse-muted);
}

/* Arrows between stages (hidden from assistive tech) */
.transition__stage:not(:last-child)::after {
  content: "↓" / "";
  position: absolute;
  top: 100%;
  left: 50%;
  font-size: var(--font-size-small);
  line-height: var(--space-7);
  color: var(--color-text-muted);
  transform: translateX(-50%);
}

/* ==========================================================================
   48. Step axis — numbered nodes on one axis; details to the right (mobile)
   or alternating above/below the axis (1024 px+) (<!-- build:step-axis:ID -->)
   ========================================================================== */

.axis {
  --axis-node: 3rem;
  position: relative;
  display: grid;
  gap: var(--space-6);
}

.axis::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--axis-node) / 2);
  left: calc(var(--axis-node) / 2 - 1px);
  width: 2px;
  background-color: var(--color-border-control);
}

.axis__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--axis-node) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
}

.axis__node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--axis-node);
  height: var(--axis-node);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  border: var(--border-width-thick) solid var(--accent);
  border-radius: 50%;
}

.axis__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
}

.axis__title {
  font-size: var(--font-size-h4);
}

.axis__text {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   49. Help card examples — optional example tags under the description
   (helpCards[].examples; tags align along the bottom of each card row)
   ========================================================================== */

.card--help__examples {
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

/* ==========================================================================
   50. Outcome cycle — four tiles read clockwise, the last leading back to
   the first (<!-- build:outcomes:ID.KEY:cycle -->; 2 × 2 from 768 px)
   ========================================================================== */

.outcome-list--cycle {
  --grid-gap: var(--space-8);
}

.outcome-list--cycle .outcome {
  height: 100%;
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-background);
  border-block-start: 3px solid var(--accent);
  border-radius: var(--radius-card);
}

/* Arrows between tiles (hidden from assistive tech): ↓ when stacked */
.outcome-list--cycle .outcome::after {
  position: absolute;
  font-size: var(--font-size-small);
  line-height: 1;
  color: var(--color-text-muted);
}

.outcome-list--cycle .outcome:not(:last-child)::after {
  content: "↓" / "";
  top: calc(100% + var(--grid-gap) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   51. Outcomes on dark sections — text and dividers switch to inverse colours
   ========================================================================== */

.section--dark .outcome-list .card__text {
  color: var(--color-text-inverse-muted);
}

.section--dark .grid--divided > *::before,
.section--dark .grid--divided > *::after {
  border-color: var(--color-border-inverse);
}

/* ==========================================================================
   52. Connection map mesh — areas joined to each other through a hub
   (connectionMap without "center"; ring from 768 px in responsive.css)
   ========================================================================== */

.connection-map__hub {
  display: none;
}

/* ==========================================================================
   53. Transition note — optional note below a transition path (light sections)
   ========================================================================== */

.transition__note,
.page-note {
  max-width: 48rem;
  margin-block-start: var(--space-7);
  padding: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  background-color: var(--color-background-alt);
  border-inline-start: 3px solid var(--color-accent-violet);
  border-radius: var(--radius-card);
}

/* ==========================================================================
   56. Industry profile cards — one boxed card per industry (/industries/)
   (<!-- build:industry-profiles -->; the whole card is the link to the industry page)
   ========================================================================== */

.card--profile {
  gap: var(--space-3);
  border-block-start: 4px solid var(--accent);
}

.card--profile__index {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-none);
  letter-spacing: var(--letter-spacing-heading);
  color: color-mix(in srgb, var(--accent) 75%, var(--color-background));
  margin-block-end: var(--space-2);
}

.card--profile__focus {
  padding-block-start: var(--space-2);
}

.card--profile .card__footer {
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

/* Industry card links (/industries/) wrap when the industry name is long instead of overflowing.
   (Homepage industry cards use a short "Learn More" link that never wraps, so they keep the flex button.)
   Inline flow (not flex) so a wrapped label keeps the arrow right after its last word. The whole card
   remains the click target (link-stretched). */
.card--profile .card__footer .btn {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  text-align: start;
  /* Comfortable spacing between wrapped lines; the padding gives back the extra line-height, so a
     one-line link keeps exactly its previous size and text position */
  line-height: var(--line-height-snug);
  padding-block: calc(var(--space-2) - (1em * var(--line-height-snug) - 1em) / 2);
}

/* The space before the arrow in the markup plus this margin match the flex gap used elsewhere */
.card--profile .card__footer .btn__icon {
  position: relative;
  top: 0.175em; /* centres the arrow on the text as in the flex button */
  margin-inline-start: 0.358em; /* with the space before it: the same 0.5rem gap as the flex button */
}

/* ==========================================================================
   57. Help card links — optional links to related pages under the description
   ========================================================================== */

.card--help__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

/* ==========================================================================
   58. Equation — inputs joined by "+" leading (↓) to a result
   (designed for dark sections; inputs in a row from 1024 px) (<!-- build:equation:ID -->)
   ========================================================================== */

.equation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
}

.equation__inputs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  width: 100%;
  max-width: 20rem;
}

.equation__input {
  position: relative;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--accent) 22%, var(--color-background-dark));
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: var(--radius-card);
}

/* "+" between inputs, "↓" before the result (decorative; the relationship is also in text) */
.equation__input + .equation__input::before,
.equation__result::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse-muted);
  transform: translateX(-50%);
}

.equation__input + .equation__input::before {
  content: "+";
  font-size: var(--font-size-h4);
  line-height: var(--space-6);
}

.equation__result {
  position: relative;
  padding: var(--space-4) var(--space-7);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-primary);
  background-color: var(--color-text-inverse);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--color-accent-violet) 22%, transparent);
}

.equation__result::before {
  content: "↓";
  line-height: var(--space-7);
}

/* ==========================================================================
   59. Service links — every service as a compact pill link (dark sections)
   (<!-- build:service-links -->) + the "How We Apply Our Expertise" layout
   ========================================================================== */

.apply-expertise {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.apply-expertise__services {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block-start: var(--space-7);
  border-block-start: var(--border-width) solid var(--color-border-inverse);
}

.service-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  text-decoration: none;
  border: var(--border-width) solid var(--color-border-inverse);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--transition-duration) var(--transition-easing),
    background-color var(--transition-duration) var(--transition-easing);
}

.service-link::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--accent);
  border-radius: 50%;
}

.service-link:hover {
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
  border-color: var(--color-text-inverse-muted);
}

/* ==========================================================================
   60. Architecture view — cross-cutting band (e.g. security & governance)
   running beside every layer (architecture.crossCutting; dark sections)
   ========================================================================== */

.arch__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.arch--spanned .arch__layers {
  flex: 1 1 auto;
  max-width: none;
  margin-inline: 0;
}

.arch__span {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  padding-block: var(--space-4);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--accent) 22%, var(--color-background-dark));
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius: var(--radius-card);
}

.arch__span > span:first-child {
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ==========================================================================
   61. Outcome links — optional related-service links under an outcome
   (outcomes[].links; aligned along the bottom of each row)
   ========================================================================== */

.outcome__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

/* Notes (transition note, page note) on an alternate-background section switch to white */
.section--alt :is(.transition__note, .page-note) {
  background-color: var(--color-background);
}

/* ==========================================================================
   62. Outcome list — one item per row beside a heading (split), title and
   text side by side from 768 px (<!-- build:outcomes:ID.KEY:list -->)
   ========================================================================== */

.outcome-list--list {
  --grid-gap: var(--space-6);
}

.outcome-list--list .outcome__title {
  font-size: var(--font-size-h4);
}

/* ==========================================================================
   63. Before → after — paired rows: each "before" condition and what it
   becomes (designed for dark sections) (<!-- build:before-after:ID -->)
   ========================================================================== */

.shift {
  --shift-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.shift__heads {
  display: grid;
  grid-template-columns: var(--shift-columns);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}

.shift__heads > :last-child {
  grid-column: 3;
}

.shift__rows {
  display: grid;
  gap: var(--space-3);
}

.shift__row {
  display: grid;
  grid-template-columns: var(--shift-columns);
  align-items: stretch;
}

.shift__from,
.shift__to {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-card);
}

/* Where you start: drawn "as-is" */
.shift__from {
  color: var(--color-text-inverse-muted);
  border: var(--border-width) dashed var(--color-border-inverse);
}

/* What it becomes */
.shift__to {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--accent) 22%, var(--color-background-dark));
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 60%, transparent);
}

.shift__arrow {
  display: grid;
  place-items: center;
  color: var(--color-text-inverse-muted);
}

/* ==========================================================================
   64. Outcome modules — tiles arranged as building blocks: 2 + 3 on desktop
   for five items (<!-- build:outcomes:ID.KEY:modules -->)
   ========================================================================== */

.outcome-list--modules {
  --grid-gap: var(--space-4);
}

.outcome-list--modules .outcome {
  height: 100%;
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border-strong);
  border-block-start: 3px solid var(--accent);
  border-radius: var(--radius-card);
}

.outcome-list--modules .outcome__title {
  font-size: var(--font-size-h4);
}

/* ==========================================================================
   65. Architecture boundary — a labelled frame around the whole layer stack
   (e.g. Security across every layer) (architecture.boundary; dark sections)
   ========================================================================== */

.arch--bounded .arch__row {
  max-width: 32rem;
}

.arch__frame {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.arch--bounded .arch__layers {
  flex: 1 1 auto;
  padding-block-start: var(--space-7);
  border: var(--border-width-thick) solid color-mix(in srgb, var(--color-accent-teal) 70%, transparent);
}

.arch__boundary {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--accent) 35%, var(--color-background-dark));
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 75%, transparent);
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   66. Founder profiles (About) — the founder card with experience line, background,
   key expertise, a native "more expertise" disclosure and certifications
   (<!-- build:founder-profiles:ID -->)
   ========================================================================== */

.founder-card__experience {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.founder-card__bio {
  max-width: 40rem;
  color: var(--color-text-secondary);
}

.founder-card__more {
  width: 100%;
}

.founder-card__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
  list-style: none;
  cursor: pointer;
}

.founder-card__more-toggle::-webkit-details-marker {
  display: none;
}

.founder-card__more-toggle::before {
  content: "+" / "";
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  border: var(--border-width) solid currentColor;
  border-radius: 50%;
}

.founder-card__more[open] > .founder-card__more-toggle::before {
  content: "−" / "";
}

.founder-card__more > .tag-list {
  padding-block-start: var(--space-2);
}

.founder-card__certs {
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-primary);
}

.founder-card__certs > li {
  position: relative;
  padding-inline-start: var(--space-5);
}

.founder-card__certs > li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-accent-blue);
  border-radius: 50%;
}

/* ==========================================================================
   67. Perspective panels — two panels joined by a centre label, or three with
   the featured one in the visual centre (<!-- build:perspective-panels:ID.KEY -->)
   ========================================================================== */

.perspectives {
  display: grid;
  gap: var(--space-5);
}

.perspectives__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border-strong);
  border-block-start: 3px solid var(--accent);
  border-radius: var(--radius-card);
}

.perspectives__label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.perspectives__title {
  font-size: var(--font-size-h3);
}

.perspectives__text {
  color: var(--color-text-secondary);
}

.perspectives__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
}

.perspectives__items > li {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-small);
  color: var(--color-text-primary);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

/* The combined perspective */
.perspectives__panel--featured {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  border-block-start-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.perspectives__panel--featured .perspectives__title {
  color: var(--color-text-inverse);
}

.perspectives__panel--featured .perspectives__label {
  color: var(--color-text-inverse-muted);
}

.perspectives__panel--featured .perspectives__items > li {
  color: var(--color-text-inverse);
  border-color: var(--color-border-inverse);
}

/* Centre label joining two panels */
.perspectives__center {
  display: flex;
  justify-content: center;
}

.perspectives__center > span {
  position: relative;
  padding: var(--space-3) var(--space-5);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--color-accent-blue) 18%, transparent);
}

/* On dark sections: translucent panels, light centre label */
.section--dark .perspectives__panel {
  background-color: color-mix(in srgb, var(--color-text-inverse) 5%, transparent);
  border-color: var(--color-border-inverse);
  border-block-start-color: var(--accent);
}

.section--dark .perspectives__text,
.section--dark .perspectives__label {
  color: var(--color-text-inverse-muted);
}

.section--dark .perspectives__items > li {
  color: var(--color-text-inverse);
  border-color: var(--color-border-inverse);
}

.section--dark .perspectives__center > span {
  color: var(--color-primary);
  background-color: var(--color-text-inverse);
}

/* About profiles: one full-width profile per founder (same structure and size for both), so the
   background and expertise read in comfortable lines instead of a tall narrow column */
.founder-list--profiles {
  grid-template-columns: minmax(0, 1fr);
}

.founder-card--profile .founder-card__intro,
.founder-card--profile .founder-card__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.founder-card--profile .founder-card__details > .founder-card__label:first-child {
  margin-block-start: 0;
}

.founder-card--profile .founder-card__actions {
  margin-block-start: 0;
}

/* Wide profiles: introduction and details side by side */
@container (min-width: 56rem) {
  .founder-card--profile .founder-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* ==========================================================================
   68. Form layout — reusable lead-form building blocks (Contact page)
   <div class="form-panel"><form data-form="…">
     <p class="form-panel__note">…</p>
     <div class="form-grid"> .form-field … .form-field.form-grid__full … </div>
     <div class="form-panel__actions"><button class="btn btn--primary" type="submit">…</button></div>
     <div class="form-status" data-form-status role="status" hidden></div>
     <p class="form-preview-note" data-form-preview hidden>…</p>
   </form></div>
   Fields use the existing .form-field pattern (section 13). Two columns from 768 px.
   ========================================================================== */

.form-panel {
  padding: var(--space-7) var(--space-6);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

.form-panel form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-panel__note {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

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

.form-field__optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* Select: native control with a drawn chevron */
.form-field__input--select {
  appearance: none;
  padding-inline-end: var(--space-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
    linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) 50%,
    calc(100% - 0.9rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.form-field__input--textarea {
  min-height: 9rem;
  line-height: var(--line-height-body);
  resize: vertical;
}

.form-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Outcome messages: never colour alone — a leading marker and text carry the meaning */
.form-status {
  display: flex;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  border-inline-start: 3px solid currentColor;
}

.form-status--success::before { content: "✓" / ""; }
.form-status--error::before { content: "!" / ""; }

.form-status:focus-visible {
  outline-offset: var(--space-1);
}

/* Pre-launch preview note (development only; see js/forms.js) */
.form-preview-note {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  background-color: color-mix(in srgb, var(--color-accent-violet) 8%, var(--color-background));
  border: var(--border-width) dashed var(--color-border-control);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   69. Contact page pieces — enquiry guidance list; light service links
   ========================================================================== */

.contact-guide {
  padding-block-start: var(--space-3);
}

.contact-guide__title {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

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

.contact-guide__list > li {
  position: relative;
  padding-inline-start: var(--space-5);
  color: var(--color-text-primary);
}

.contact-guide__list > li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-accent-blue);
  border-radius: 50%;
}

/* Service links on a light section (<!-- build:service-links:light -->) */
.service-links--light .service-link {
  color: var(--color-text-primary);
  background-color: var(--color-background);
  border-color: var(--color-border-strong);
}

.service-links--light .service-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-background-alt);
  border-color: var(--color-border-control);
}

/* Contact form section: introduction aligned with the top of the form panel */
.contact-layout {
  align-items: start;
}

/* Cloudflare Turnstile anti-spam check (iframe injected by Cloudflare): reserve its height so the
   Send button does not jump when it loads; data-size="flexible" makes it fill the form width */
.form-turnstile {
  min-height: 65px;
}

/* Contact form privacy notice (below the submit button; information, not a consent control) */
.form-privacy-note {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-small);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   70. Legal pages — /privacy-policy/, /terms/, /cookie-policy/ (Phase 20)
   Content-first: light compact hero, "On this page" contents, narrow reading
   column. Placeholders (data/legal.json) render as .legal-placeholder.
   <section class="hero hero--page legal-hero">…<!-- build:legal-meta --></section>
   <section class="section legal"><div class="container legal-layout">
     <aside class="legal-layout__aside"><!-- build:legal-toc --></aside>
     <article class="legal-content"><section class="legal-section" aria-labelledby="…">
       <h2 class="legal-section__title" id="…"><span class="legal-section__number">1.</span> …</h2>
   ========================================================================== */

.legal-hero {
  background-color: var(--color-background-alt);
  border-block-end: var(--border-width) solid var(--color-border);
}

.legal-hero .hero__inner {
  padding-block-end: var(--space-9);
}

.legal-hero .hero__content {
  max-width: 46rem;
}

.legal-hero .hero__lead {
  margin-block-end: var(--space-6);
}

/* Effective date line; the draft marker shows in development builds only */
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.legal-meta__draft {
  display: none;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  border: var(--border-width) dashed var(--color-border-control);
  border-radius: var(--radius-pill);
}

[data-env="development"] .legal-meta__draft {
  display: inline-flex;
}

/* A value still to be confirmed (e.g. [Legal jurisdiction to be confirmed]) — marked, never guessed */
.legal-placeholder {
  padding-inline: 0.3em;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  background-color: color-mix(in srgb, var(--color-accent-violet) 8%, var(--color-background));
  border: var(--border-width) dashed var(--color-border-control);
  border-radius: var(--radius-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Reading pages start closer to the hero than marketing sections (max 64px) */
.legal {
  padding-block-start: min(var(--section-padding), var(--space-9));
}

/* Layout: contents above the text on phones/tablets; beside it (sticky) from 1024px,
   left-aligned with the hero and breadcrumb */
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

/* On this page */
.legal-toc {
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-background-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
}

.legal-toc__title {
  margin-block-end: var(--space-3);
}

.legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.legal-toc__link {
  display: block;
  padding-block: var(--space-1);
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.legal-toc__link:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* Reading column */
.legal-content {
  max-width: var(--container-narrow);
}

.legal-section + .legal-section {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-8);
  border-block-start: var(--border-width) solid var(--color-border);
}

.legal-section > * + * {
  margin-block-start: var(--space-4);
}

/* Anchor targets land clear of the sticky header */
.legal-section__title,
.legal-section h3[id] {
  scroll-margin-top: var(--space-6);
}

.legal-section__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
}

.legal-section__number {
  margin-inline-end: 0.2em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.legal-section > .legal-section__title + * {
  margin-block-start: var(--space-5);
}

.legal-section h3 {
  font-size: var(--font-size-h5);
}

.legal-section > * + h3 {
  margin-block-start: var(--space-6);
}

.legal-section p,
.legal-list {
  color: var(--color-text-secondary);
}

.legal-list {
  padding-inline-start: 1.25em;
  list-style: disc;
}

.legal-list > li + li {
  margin-block-start: var(--space-2);
}

.legal-list > li::marker {
  color: var(--color-accent);
}

/* Contact details for legal enquiries */
.legal-details {
  border-block-start: var(--border-width) solid var(--color-border);
}

.legal-details__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1) var(--space-5);
  padding-block: var(--space-3);
  border-block-end: var(--border-width) solid var(--color-border);
}

.legal-details dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.legal-details dd {
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* Cookie categories: status stated in words, never colour alone */
.legal-categories {
  display: grid;
  gap: var(--space-4);
}

.legal-category {
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-card);
}

.legal-category__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-block-end: var(--space-3);
}

.legal-category__title {
  font-size: var(--font-size-h5);
}

.legal-category__status {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background-color: var(--color-background-alt);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.legal-category p {
  color: var(--color-text-secondary);
}