/* ==========================================================================
   EKSTRUH — Global stylesheet (Phase 1 design system)
   Single production stylesheet. No frameworks, no external fonts.
   Sections:
     01 Tokens
     02 Reset & base
     03 Typography
     04 Layout: container / section / grid
     05 Links & buttons
     06 Cards & surfaces
     07 Header & navigation
     08 Footer
     09 Page shell (hero, eyebrow, breadcrumb)
     09b Global CTA component
     10 Utilities
     11 Motion & reduced motion
     12 Homepage (Phase 3)
     13 Services overview (Phase 4)
     14 Service detail pages (Phase 5)
     15 Specialist framework pages (Phase 6)
     16 Staff augmentation area
     17 About, Our Work & Contact (Phase 10)
     18 Legal pages (Phase 11)
   The numbering is logical, not physical: sections 10 and 11 sit at the END
   of the file (utilities and motion are applied last so they can override),
   and the dark-band system lives inside 04 Layout.
   One stylesheet, no frameworks, no external fonts, no @import.
   ========================================================================== */

/* ---------- 01 Tokens ---------------------------------------------------- */
:root {
  /* ---- Official EKSTRUH logo colours (sampled from the supplied asset) ----
     These two values are the brand's source of truth. The light green is a
     DECORATIVE colour only: at 2.11:1 on white it fails WCAG AA, so it is
     never used for text, icons conveying meaning, or small UI. Accessible
     text/action greens below are derived from the same hue family.          */
  --brand-green-light: #85C441;  /* logo "ek"     — decorative use only     */
  --brand-green-dark:  #285128;  /* logo "struh"  — 9.14:1 on white         */

  /* Brand roles (all contrast-tested against white and --surface-alt) */
  --brand-primary:       #2F6B33;  /* 6.42:1 — links, actions, emphasis     */
  --brand-primary-hover: #24552A;  /* 8.72:1                                */
  --brand-dark:          #285128;  /* 9.14:1 — headings, footer, CTA panel  */
  --brand-deep:          #1C3A1C;  /* 12.56:1 — deepest brand neutral       */
  --brand-accent:        #85C441;  /* decorative only, never text           */
  --brand-soft:          #F2F7EC;  /* tinted surface                        */
  --brand-soft-strong:   #E4EFD9;  /* hover/indicator tint                  */
  /* Text-safe lift of the logo green, for small text on --brand-dark only.
     #85C441 is 4.34:1 there (below AA); this is 4.89:1. Decorative shapes
     still use the exact official --brand-accent. */
  --brand-accent-text:   #95CE57;

  /* Neutrals — warmed very slightly towards the brand green */
  --c-bg:            #ffffff;
  --c-bg-soft:       #F7F9F6;
  --c-bg-sunken:     #EFF2EC;
  --c-ink:           #0F1511;   /* 18.49:1 */
  --c-ink-strong:    #070A08;
  --c-muted:         #55605A;   /* 6.55:1  */
  --c-border:        #E4E8E2;
  --c-border-strong: #CBD3C7;

  /* Semantic aliases kept so existing Phase 1 rules keep working */
  --c-accent:        var(--brand-primary);
  --c-accent-hover:  var(--brand-primary-hover);
  --c-accent-soft:   var(--brand-soft);
  /* Same value as --brand-primary (6.42:1); aliased so the focus ring and the
     brand action colour can never drift apart. */
  --c-focus:         var(--brand-primary);

  /* Dark section bands (Phase 14.5). These two were repeated as raw hex in
     four rules, including .step::before which MUST match the band background
     it sits on -- a token makes that relationship explicit. */
  --surface-dark:      #101A14;  /* charcoal with a green cast */
  --surface-dark-ink:  #14251A;  /* text on a white button inside a dark band */

  /* Form errors. #A32020 on white is 7.54:1 -- AA for text at any size, and
     it is also the invalid-field border and the error panel rule. Do not
     lighten it for the sake of matching the brand: contrast is the reason
     this red was chosen. */
  --c-danger:        #A32020;

  /* Typography — system stack only, zero font requests */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Fluid type scale */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1rem;
  --t-md:   clamp(1.0625rem, 0.4vw + 0.98rem, 1.125rem);
  --t-lg:   clamp(1.1875rem, 0.6vw + 1.07rem, 1.375rem);
  --t-xl:   clamp(1.375rem, 1vw + 1.15rem, 1.75rem);
  --t-2xl:  clamp(1.625rem, 1.7vw + 1.25rem, 2.25rem);
  --t-3xl:  clamp(2rem, 3vw + 1.3rem, 3rem);
  /* Phase 14.5 display scale: section headings were topping out at 2.25rem,
     which read as a documentation page rather than a commercial site. */
  --t-4xl:  clamp(2.25rem, 3.4vw + 1.4rem, 3.5rem);
  --t-5xl:  clamp(2.5rem, 3.6vw + 1.25rem, 3.9rem);
  /* Homepage hero only. --t-5xl is shared with the internal page heroes, so
     the display headline gets its own token and can be tuned without moving
     any other H1 on the site. */
  --t-hero: clamp(2.55rem, 4.3vw + 1.1rem, 4.3rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  /* Spacing (4px base) */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;

  /* Section rhythm */
  --section-y: clamp(3rem, 6vw, 5.5rem);

  /* Structure */
  --container:      72rem;
  --container-wide: 84rem;
  --container-prose: 44rem;
  /* One size for every .page-hero__visual. Content must fit inside it. */
  --page-hero-visual-width: 100%;
  --page-hero-visual-height: 17.5rem;
  --page-hero-visual-radius: 16px;
  --page-hero-visual-pad: 0.85rem 0.9rem 0.9rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.05);
  --shadow-md: 0 6px 20px -8px rgba(13, 17, 23, 0.16);
  /* Layered elevation for hero/feature surfaces. Two stacked shadows read as
     real depth where a single large blur just looks smudged. */
  --shadow-lg:
    0 2px 4px rgba(13, 17, 23, 0.04),
    0 12px 32px -12px rgba(13, 17, 23, 0.18);
  --shadow-xl:
    0 2px 6px rgba(13, 17, 23, 0.05),
    0 28px 60px -24px rgba(13, 17, 23, 0.26);
  /* Reusable faint engineering grid, used behind hero + dark sections. */
  --grid-line: rgba(15, 21, 17, 0.055);
  --grid-line-dark: rgba(255, 255, 255, 0.05);

  --ring: 3px;

  /* Motion */
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --header-h: 4rem;
}

/* ---------- 02 Reset & base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* guard against accidental horizontal scroll */
}

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

button, input, select, textarea { font: inherit; color: inherit; }

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

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

::selection { background: var(--c-accent); color: #fff; }

/* Focus: visible, consistent, never removed */
:focus-visible {
  outline: var(--ring) solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 03 Typography ------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  color: var(--c-ink-strong);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); letter-spacing: -0.03em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); line-height: var(--lh-snug); }
h4 { font-size: var(--t-md); }

p, ul, ol { margin: 0 0 var(--s-4); }
p { max-width: 68ch; }
:is(p, li) { text-wrap: pretty; }

.lead {
  font-size: var(--t-md);
  color: var(--c-muted);
  max-width: 60ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  flex: 0 0 auto;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

small, .text-sm { font-size: var(--t-sm); }
.text-muted { color: var(--c-muted); }

/* ---------- 04 Layout ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--soft { background: var(--c-bg-soft); }
.section--bordered { border-top: 1px solid var(--c-border); }

/* ---- Dark section system (Phase 14.5) -----------------------------------
   Used sparingly to create rhythm: the page alternates white -> soft ->
   dark rather than presenting seven identical light bands.               */
.section--dark {
  position: relative;
  isolation: isolate;
  /* Charcoal with a green cast: deliberately cooler/darker than the
     #285128 Framework band so two dark sections never read as one. */
  background: var(--surface-dark);
  color: #fff;
}
.section--dark h2,
.section--dark h3,
.section--dark strong { color: #fff; }
.section--dark p,
.section--dark li { color: rgba(255, 255, 255, 0.78); }
.section--dark .lead,
.section--dark .section__head .lead { color: rgba(255, 255, 255, 0.82); }
.section--dark .eyebrow { color: var(--brand-accent-text); }
.section--dark :focus-visible { outline-color: #fff; }

/* Surfaces inside dark sections invert rather than being re-implemented.
   .arch is deliberately absent: it is now defined as a dark-surface component
   (it exists only inside the hero panel), so inverting it again would fight
   its own definition. */
.section--dark .flow,
.section--dark .vis {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.section--dark .flow__caption {
  color: rgba(255, 255, 255, 0.62);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.section--dark .flow__step { color: #fff; }
.section--dark .flow__note { color: rgba(255, 255, 255, 0.66); }
.section--dark .flow__list li::before { color: var(--brand-accent-text); background: none; }
.section--dark .flow__list li:not(:last-child)::after { background: rgba(255, 255, 255, 0.22); }
.section--dark .ai-list strong { color: #fff; }
.section--dark .ai-list span { color: rgba(255, 255, 255, 0.7); }
.section--dark .btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--surface-dark-ink);
}
/* Technology stack rendered on a dark band */
.section--dark .tech-group__title {
  color: var(--brand-accent-text);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.section--dark .tech-tags li {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
}
/* Process steps on a dark band */
.section--dark .steps::before {
  background: linear-gradient(90deg,
    var(--brand-accent) 0%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0.14) 100%);
  opacity: 1;
}
.section--dark .step { border-top-color: rgba(255, 255, 255, 0.18); }
.section--dark .step::before {
  background: var(--surface-dark);
  border-color: var(--brand-accent);
}
.section--dark .step::after { background: var(--brand-accent); }
.section--dark .step:last-child::before { border-color: rgba(255,255,255,0.3); }
.section--dark .step:last-child::after { background: rgba(255,255,255,0.3); }
.section--dark .step__num { color: var(--brand-accent-text); }
.section--dark .fitlist { border-top-color: rgba(255, 255, 255, 0.16); }
.section--dark .fitlist li { border-bottom-color: rgba(255, 255, 255, 0.16); }

.section--dark .btn--primary:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  color: var(--surface-dark-ink);
}

/* Faint engineering grid; masked so it never sits behind body copy. */
.section--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(42rem 26rem at 78% 18%, #000, transparent 72%);
          mask-image: radial-gradient(42rem 26rem at 78% 18%, #000, transparent 72%);
}

.section__head { margin-bottom: var(--s-8); max-width: 60ch; }
/* Section headings carry the editorial weight of the page. */
.section__head h2 {
  font-size: var(--t-4xl);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.section__head .lead {
  font-size: var(--t-md);
  max-width: 58ch;
  color: var(--c-muted);
}
.section__head > :last-child { margin-bottom: 0; }

/* Grid utilities — mobile-first, single column by default */
.grid { display: grid; gap: var(--s-5); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 40em) {   /* 640px — large phone / small tablet */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {   /* 1024px — laptop */
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

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

/* ---------- 05 Links & buttons ------------------------------------------ */
a { color: var(--c-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--c-accent-hover); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 550;
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;            /* comfortable touch target */
  padding: 0.6875rem var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: #fff;
}

.btn--secondary {
  background: var(--c-bg);
  border-color: var(--c-border-strong);
  color: var(--c-ink);
}
.btn--secondary:hover { border-color: var(--c-ink); color: var(--c-ink-strong); }

.btn--ghost { background: transparent; color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-bg-sunken); }

.btn svg { transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(2px); }

/* ---------- 06 Cards & surfaces ----------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card > :last-child { margin-bottom: 0; }
.card__title { margin-bottom: var(--s-2); font-size: var(--t-md); }
.card__body { color: var(--c-muted); font-size: var(--t-sm); }
.card__foot { margin-top: auto; padding-top: var(--s-4); }

.card--link:hover,
.card--link:focus-within {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Whole-card click target driven by the heading link (no JS needed) */
.card--link { position: relative; }
.card--link .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card__link { color: inherit; text-decoration: none; }
.card__link:hover { color: var(--c-accent); }



/* ---------- 07 Header & navigation --------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink-strong);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-3); color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #ffffff;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid #CDD6C8;
  box-shadow: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.125rem; /* 66px — same bar as the homepage menu */
  padding-block: 0.5rem;
}

/* Brand / official logo.
   One asset (/assets/images/ekstruh-logo.png) reused site-wide so the browser
   serves header + footer from a single cached request.
   The <img> carries intrinsic width/height (480x95); CSS sets the displayed
   width and `height:auto` keeps the official 5.05:1 aspect ratio exact. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Reserve the rendered box before paint to prevent CLS */
  flex: 0 0 auto;
}
.brand__logo {
  display: block;
  width: 140px;
  height: auto;          /* preserves aspect ratio — never distorted */
  aspect-ratio: 480 / 95;
}
@media (min-width: 30em) { .brand__logo { width: 142px; } }
@media (min-width: 62em) { .brand__logo { width: 148px; } }

/* Same lockup on every page. Tagline CSS is the approved lockup rule. */
.brand--lockup {
  width: 140px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  line-height: 1;
}
.brand--lockup .brand__logo { width: 100%; }
.brand__tag, .brand:hover .brand__tag {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  padding: 0;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: capitalize;
  text-align: justify;
  text-align-last: left;
  line-height: 1;
  color: #6A746E;
  white-space: nowrap;
  overflow: hidden;
}
@media (min-width: 30em) { .brand--lockup { width: 142px; } }
@media (min-width: 62em) { .brand--lockup { width: 148px; } }

.brand:focus-visible { outline-offset: 4px; }

/* Toggle — only rendered/used on small screens */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0 var(--s-3);
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 5px; }
.nav-toggle__bars::after { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

/* Mobile-first navigation.
   The panel is a stacked disclosure below the bar. Every link is real HTML
   and present without JavaScript — see the .no-js rules at the end. */
.site-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-4) var(--gutter) var(--s-5);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
}
.site-nav.is-open { display: block; }

.site-nav__list {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.site-nav__link {
  display: block;
  padding: var(--s-3) var(--s-2);
  min-height: 2.75rem;
  border-radius: var(--radius);
  color: var(--c-ink);
  font-size: var(--t-sm);
  font-weight: 550;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.site-nav__link:hover { background: var(--brand-soft); color: var(--brand-primary); }

/* Current page: green text plus a non-colour cue (underline bar) */
.site-nav__link[aria-current="page"] {
  color: var(--brand-primary);
  font-weight: 650;
}

/* Reserved top-level labels. Not links: no Industries or Collaborative
   Models destination exists yet. */
.site-nav__label {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-2);
  color: var(--c-ink);
  font-size: var(--t-sm);
  font-weight: 550;
  line-height: 1.2;
  cursor: default;
}

.site-nav__cta { margin-top: var(--s-2); }
.site-nav__cta .btn { width: 100%; }

/* ---- Mega menu: mobile accordion, desktop panel below the header ----- */
.nav-item { position: relative; }

.nav-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-2);
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--c-ink);
  font-size: var(--t-sm);
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nav-disclosure:hover { background: var(--brand-soft); color: var(--brand-primary); }
.nav-disclosure[aria-expanded="true"] { color: var(--brand-primary); }

.nav-disclosure__chevron {
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}
.nav-disclosure[aria-expanded="true"] .nav-disclosure__chevron { transform: rotate(180deg); }

/* Mobile: expandable group. The desktop grid is not used here. */
.mega { display: none; }
.mega.is-open { display: block; }
.mega__panel {
  width: auto;
  max-width: none;
  margin: 0.15rem 0 0.35rem;
  padding: 0.15rem 0 0.2rem 0.85rem;
  border-left: 2px solid var(--brand-soft-strong);
  background: transparent;
  box-shadow: none;
}
.mega__cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  min-height: 2.75rem;
  margin: 0.15rem 0;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mega__cat-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.25;
  color: inherit;
}
.mega__cat-desc {
  display: block;
  max-width: 28ch;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-muted);
}
.mega__cat:hover,
.mega__cat:focus-visible {
  color: var(--brand-primary);
  background: var(--brand-soft);
}
.mega__cat.is-active {
  color: var(--brand-primary);
  background: var(--brand-soft);
  border-left-color: var(--brand-primary);
  font-weight: 650;
}
.mega__pane[hidden] { display: none; }
.no-js .mega__pane[hidden] { display: block !important; }
.mega__blurb {
  margin: 0.1rem 0 0.35rem;
  color: var(--c-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  max-width: 62ch;
}
.mega__lead { margin: 0.15rem 0 0.35rem; }
.mega__row + .mega__row { margin-top: 0.15rem; }
.mega__overview {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: var(--brand-primary);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
}
.mega__overview:hover { text-decoration: underline; }
.mega__overview[aria-current="page"] { text-decoration: underline; }
.mega__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega__grid a {
  display: block;
  padding: 0.55rem 0.35rem;
  min-height: 2.75rem;
  border-radius: var(--radius);
  text-decoration: none;
}
.mega__grid a:hover { background: var(--brand-soft); }
.mega__grid a[aria-current="page"] { background: var(--brand-soft); }
.mega__title {
  display: block;
  color: var(--brand-primary);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
}
.mega__desc {
  display: block;
  margin-top: 0.15rem;
  color: var(--c-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
}

/* No-JS fallback: expose everything inline.
   The disclosure buttons become inert section labels rather than vanishing,
   so the submenus keep their headings. */
.no-js .nav-toggle { display: none; }
.no-js .nav-disclosure {
  pointer-events: none;
  color: var(--c-muted);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 0;
  padding-bottom: var(--s-1);
}
.no-js .nav-disclosure__chevron { display: none; }
.no-js .site-nav {
  position: static;
  display: block;
  box-shadow: none;
  padding-inline: 0;
  padding-bottom: var(--s-4);
  max-height: none;
  overflow: visible;
  border-bottom: 0;
}
.no-js .mega { display: block; }
/* The header bar is a flex row; without JS the nav must drop to its own line
   instead of sitting beside the logo. */
.no-js .site-header__inner { flex-wrap: wrap; }
.no-js .site-nav { flex: 1 0 100%; }
/* Sticky + a fully expanded inline nav would swallow the viewport on mobile */
.no-js .site-header { position: static; }

/* ---- Desktop navigation ------------------------------------------------- */
@media (min-width: 62em) {   /* 992px */
  .nav-toggle { display: none; }

  .site-nav,
  .no-js .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--s-1);
    margin: 0;
  }

  .site-nav__link,
  .site-nav__label,
  .nav-disclosure {
    padding: var(--s-2) var(--s-3);
    /* 44px: this breakpoint is also hit by touch-capable tablets, so the
       nav controls keep a full touch target rather than a pointer-only one */
    min-height: 2.75rem;
    width: auto;
    white-space: nowrap;
  }

  /* Active-page indicator. Absolute so the bar does not make the current
     item taller and lift its label above the rest of the row. */
  .site-nav__link[aria-current="page"],
  .nav-item--active > .nav-disclosure {
    position: relative;
  }
  .site-nav__link[aria-current="page"]::after,
  .nav-item--active > .nav-disclosure::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 2px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    background: var(--brand-accent);
  }

  .no-js .nav-disclosure {
    pointer-events: auto;
    color: var(--c-ink);
    font-size: var(--t-sm);
    font-weight: 550;
    letter-spacing: normal;
    text-transform: none;
    min-height: 2.5rem;
    padding: var(--s-2) var(--s-3);
  }
  .no-js .nav-disclosure__chevron { display: block; }
  .no-js .site-header { position: sticky; }
  .no-js .site-header__inner { flex-wrap: nowrap; }
  .no-js .site-nav { flex: 0 1 auto; padding-bottom: 0; }

  /* Desktop mega panel: one wide sheet under the header, aligned to the
     header container. Not a small flyout, and not a full-bleed table. */
  .nav-item { position: static; }
  .mega,
  .mega.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity var(--dur) var(--ease),
                visibility 0s linear var(--dur);
  }
  .mega.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  /* Invisible bridge so the pointer can move from the trigger into the panel. */
  .mega.is-open::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1rem;
    height: 1rem;
  }
  .mega__panel {
    position: relative;
    display: grid;
    grid-template-columns: 16.75rem minmax(0, 1fr);
    column-gap: 0.85rem;
    align-content: start;
    width: min(100%, var(--container));
    max-width: var(--container);
    height: 350px;
    max-height: calc(100vh - var(--header-h) - 0.75rem);
    margin-inline: auto;
    margin-top: 0;
    padding: 0.7rem var(--gutter);
    background: #fff;
    border: 1px solid var(--c-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 16px 28px -20px rgba(13, 17, 23, 0.28);
    overflow: hidden;
  }
  /* Left category rail is a quiet grey so it separates from the white
     service pane. It stops at the pane divider. */
  .mega__panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--gutter) + 16.75rem + 0.85rem);
    background: #F1F3F1;
    pointer-events: none;
  }
  /* Categories stack in the left column and size to their description.
     Every pane uses the same right-hand box, so switching cannot resize
     the panel. */
  .mega__row { display: contents; }
  .mega__cat {
    position: relative;
    z-index: 1;
    grid-column: 1;
    width: auto;
    margin: 0.2rem 0;
    border-radius: 8px;
  }
  /* White pill on the grey rail for hover, focus, and the open category.
     Green text and the left bar still mark the selected category. */
  .mega__cat:hover,
  .mega__cat:focus-visible,
  .mega__cat.is-active {
    background: #fff;
  }
  .mega__cat[data-mega="ai"] { grid-row: 1; }
  .mega__cat[data-mega="engineering"] { grid-row: 2; }
  .mega__cat[data-mega="framework"] { grid-row: 3; }
  .mega__cat[data-mega="staff"] { grid-row: 4; }
  .mega__pane {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: stretch;
    min-height: 0;
    margin: 0;
    padding: 0.15rem 0.15rem 0.15rem 0.85rem;
    border-left: 1px solid var(--c-border);
    overflow: auto;
  }
  .mega__pane[hidden] { display: none; }
  .mega__lead { margin: 0.2rem 0.75rem 0.35rem; }
  .mega__overview { font-size: 0.875rem; }
  .mega__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem;
    align-content: start;
    padding: 0.35rem;
  }
  .no-js .mega__panel {
    height: auto;
    max-height: none;
    padding: 0.35rem var(--gutter) 0.55rem;
    overflow: visible;
  }
  .no-js .mega__panel::before { display: none; }
  .no-js .mega__cat { background: #F1F3F1; }
  .no-js .mega__row {
    display: grid;
    grid-template-columns: 16.75rem minmax(0, 1fr);
    border-top: 1px solid var(--c-border);
  }
  .no-js .mega__row:first-child { border-top: 0; }
  .no-js .mega__cat,
  .no-js .mega__pane,
  .no-js .mega__pane[hidden] {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;
  }
  .no-js .mega__pane,
  .no-js .mega__pane[hidden] { display: block !important; }
  .no-js .mega__cat { pointer-events: none; }
  .mega__grid a {
    min-height: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
  }
  .mega__title { font-size: 0.9375rem; }
  .mega__desc { max-width: 36ch; }

  /* No-JS desktop: the panel opens from the trigger, not as a stuck overlay. */
  .no-js .nav-item:hover .mega,
  .no-js .nav-item:focus-within .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .site-nav__cta { margin-top: 0; }
  .site-nav__cta .btn { width: auto; }

  /* Same menu metrics as the homepage reference bar. */
  .site-nav__link,
  .site-nav__label,
  .nav-disclosure {
    min-height: 2.25rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1A211C;
  }
  .site-nav { gap: 1rem; }
  .site-nav__list { gap: 0.7rem; }
  .site-nav__cta .btn {
    min-height: 2.375rem;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
  }
}

/* Narrow desktop (992-1180px): the full nav + CTA only just fits, so tighten
   spacing rather than letting the header overflow. */
@media (min-width: 62em) and (max-width: 73.75em) {
  .site-nav__link,
  .site-nav__label,
  .nav-disclosure { padding-inline: 0.4rem; font-size: 0.8125rem; }
  .site-nav__link[aria-current="page"]::after,
  .nav-item--active > .nav-disclosure::after { left: 0.4rem; right: 0.4rem; }
  .site-nav__cta .btn { padding-inline: 0.7rem; }
}

/* ---------- 08 Footer — one global component, not homepage-scoped -------- */
.site-footer {
  margin-top: var(--section-y);
  padding-block: clamp(2.75rem, 4.2vw, 3.75rem) 1.35rem;
  background: #fff;
  border-top: 1px solid var(--c-border);
  font-size: var(--t-sm);
}
.site-footer__grid {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40em) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-footer h2 {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--c-ink-strong);
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li + li { margin-top: 0.45rem; }
.footer-list a {
  display: inline-block;
  padding-block: 0.08rem;
  color: var(--c-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  text-decoration: none;
}
.footer-list a:hover { color: var(--c-accent); text-decoration: underline; }

.site-footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.4rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: 0.8125rem;
}
.site-footer__bottom p { margin: 0; max-width: none; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__legal a {
  color: var(--c-muted);
  font-size: 0.8125rem;
  text-decoration: none;
}
.site-footer__legal a:hover { color: var(--brand-primary); text-decoration: underline; }
.site-footer__legal li + li::before {
  content: "-";
  margin-inline: 0.4rem;
  color: var(--c-muted);
}
@media (min-width: 40em) {
  .site-footer__bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .site-footer__legal { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* ---------- 09 Page shell — the inner-page hero system ------------------
   One shell, five families, nineteen plates. The homepage owns the dark
   instrument panel; an inner page is a document, so its hero is a light
   "engineering plate": paper surface, hairline rules, mono tags, one lit
   accent. The family colour appears exactly twice per page — the top band and
   the dissolving rule at the base — and nowhere else, so the site reads as a
   system rather than a set of page themes.
   Artwork markup: _build/hero_visuals.py.                              */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 4vw, 3.75rem) clamp(2.75rem, 5.5vw, 5rem);
  border-top: 0;
  border-bottom: 1px solid var(--c-border);
  background:
    radial-gradient(46rem 20rem at 94% -6rem, var(--brand-soft), transparent 66%),
    linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-soft) 100%);
}
/* The band boundary, in the family colour, dissolving left-to-right — the same
   device the homepage hero uses, so the two are visibly one system. */
.page-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--ph-accent, var(--brand-accent)) 0, var(--brand-primary) 16rem, transparent 46%);
  pointer-events: none;
}

.page-hero__grid {
  display: grid;
  gap: clamp(2rem, 3.5vw, 2.75rem);
  align-items: center;
}
.page-hero__inner { max-width: 48rem; }

.page-hero h1 { margin-bottom: var(--s-4); }
.page-hero__inner .lead { margin-bottom: 0; }

/* ---- Families -----------------------------------------------------------
   Each family is a measure, a rule colour and a type size — never a separate
   visual language.                                                              */

/* Services: commercial, capability-first. */
.page-hero--service { --ph-accent: var(--brand-primary); }
/* Framework Expertise: the engineering end of the site. The grid belongs here
   because these pages are about structure; it sits beside the copy, never
   behind it, so it cannot cost the H1 any contrast. */
.page-hero--framework { --ph-accent: var(--brand-dark); }
/* Staff augmentation: commercial capacity, warmer tint, no grid. */
.page-hero--staff { --ph-accent: var(--brand-accent); }
.page-hero--staff {
  background:
    radial-gradient(42rem 18rem at 12% -6rem, var(--brand-soft-strong), transparent 70%),
    linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-soft) 100%);
}
/* Our Work: delivery. Same posture as the service pages, quieter rule. */
.page-hero--work { --ph-accent: var(--brand-accent-hover); }
/* Contact: conversion. The form is the hero, so the band is deliberately the
   shortest on the site and the copy is capped short. */
.page-hero--contact {
  --ph-accent: var(--brand-primary);
  padding-block-end: clamp(2rem, 3vw, 2.75rem);
}
/* About: editorial — no diagram's worth of colour, just a wide measure and a
   single dark rule. */
.page-hero--company {
  --ph-accent: var(--brand-dark);
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg) 60%, var(--c-bg-soft) 100%);
}
/* Legal: a document, not a marketing page. No tint, no accent, no plate. */
.page-hero--legal {
  --ph-accent: transparent;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
  padding-block: clamp(2rem, 4vw, 3rem) var(--s-8);
}
.page-hero--legal .page-hero__inner { max-width: none; }
/* No accent rule at the base either: the dissolving line is a commercial
   device, and a privacy policy is not a commercial page. */
.page-hero--legal::after { display: none; }

/* ---- Typography ---------------------------------------------------------
   The H1 is the LCP candidate on every inner page, so it is never faded from
   opacity:0 (Phase 3 lesson): a transform-only entrance keeps it painted at
   full contrast from the first frame. */
.page-hero--service h1,
.page-hero--framework h1,
.page-hero--staff h1,
.page-hero--work h1,
.page-hero--contact h1 {
  font-size: var(--t-4xl);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.page-hero--company h1 {
  font-size: var(--t-3xl);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.page-hero--legal h1 {
  font-size: var(--t-2xl);
  letter-spacing: -0.015em;
}
.page-hero--service .lead,
.page-hero--framework .lead,
.page-hero--staff .lead,
.page-hero--work .lead,
.page-hero--company .lead { font-size: var(--t-lg); }
/* Responsive headline break */
.h1-break { display: inline; }
@media (min-width: 48em) { .h1-break { display: block; height: 0; overflow: hidden; } }

.page-hero__inner { animation: hero-rise var(--dur-slow) var(--ease) both; }

/* ---- The plate ----------------------------------------------------------
   One modern card for every inner-page hero. The drawing inside stays the
   page's own diagram; only the surface, elevation and header change. */
.phv {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 14rem;
  padding: 1.05rem 1.1rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(47, 107, 51, 0.14);
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 36px -22px rgba(28, 58, 28, 0.42),
    0 2px 8px rgba(16, 26, 20, 0.05);
  animation: hero-in 600ms var(--ease) both 160ms;
}
.phv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(16rem 11rem at 100% 0%, rgba(133, 196, 65, 0.2), transparent 68%),
    radial-gradient(12rem 9rem at 0% 100%, rgba(47, 107, 51, 0.07), transparent 72%),
    linear-gradient(180deg, #ffffff 0%, #f6faf3 100%);
  pointer-events: none;
}
.phv::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1.35rem;
  right: 1.35rem;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary) 42%, transparent 88%);
  pointer-events: none;
}

.phv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 0.35rem;
  padding-bottom: 0.7rem;
  border-bottom: 0;
}
.phv__idx {
  display: inline-flex;
  align-items: center;
  min-width: 2.25rem;
  padding: 0.18rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(47, 107, 51, 0.22);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--brand-primary);
}
.phv__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.phv__ticks { display: inline-flex; flex: 0 0 auto; gap: 4px; }
.phv__ticks span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-border-strong);
}
.phv__ticks span:first-child { background: var(--ph-accent, var(--brand-accent)); }

.phv__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--s-3);
  align-items: center;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.phv__step {
  position: relative;
  padding-left: 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
.phv__step::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-border-strong);
}
.phv__step--on { color: var(--brand-primary); font-weight: 650; }
.phv__step--on::before { background: var(--brand-accent); }

/* Shared drawing atoms: node, slab, connector. Every plate below is
   assembled from these, which is why 16 drawings cost ~200 lines. */
.phv__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; }
.phv__node {
  display: grid;
  gap: 1px;
  padding: 0.55rem 0.6rem;
  text-align: center;
  border: 1px solid rgba(47, 107, 51, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.phv__node--on {
  border-color: rgba(47, 107, 51, 0.28);
  background: var(--brand-soft);
}
.phv__node--dim {
  border-style: dashed;
  border-color: var(--c-border-strong);
  background: none;
}
.phv__k {
  font-size: var(--t-xs);
  font-weight: 650;
  line-height: 1.25;
  color: var(--c-ink-strong);
}
.phv__node--dim .phv__k { color: var(--c-muted); font-weight: 600; }
.phv__v {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.3;
  color: var(--c-muted);
}
.phv__legs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: 0.9rem;
}
.phv__legs span { justify-self: center; width: 1px; height: 100%; background: var(--c-border-strong); }
.phv__slabs { display: grid; gap: 0.35rem; }
.phv__slab {
  display: flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(47, 107, 51, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
}
.phv__slab--on { border-color: rgba(47, 107, 51, 0.28); background: var(--brand-soft); }
.phv__slab--dim { border-style: dashed; border-color: var(--c-border-strong); background: none; }
.phv__slab .phv__k { font-size: var(--t-xs); }

/* Nothing inside a plate may push the page wide. At 320px a three-across cell
   is about 82px, and "Authentication" is 95px, so long names hyphenate —
   lang="en-GB" is set on <html>, which is what makes hyphens:auto resolve —
   and only break mid-word if hyphenation cannot help. */
.phv__k,
.phv__v,
.phv__mod,
.phv__mh,
.phv__mk,
.phv__step,
.phv__line span,
.phv__bus-core,
.phv__join-half,
.phv__root {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* ---- Plate: ledger (services hub, Our Work) ----------------------------
   A contents index, not a chart: nothing here implies volume or ranking. The
   numerals are CSS-painted from data-n, so they never enter the text stream. */
.phv--ledger .phv__rows { display: grid; padding: var(--s-3) 0; gap: 0.1rem; }
.phv__line {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: 0.35rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(47, 107, 51, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}
.phv__line::before {
  content: attr(data-n);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--ph-accent, var(--brand-primary));
}
.phv__line span {
  font-size: var(--t-sm);
  overflow-wrap: break-word;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink-strong);
  overflow-wrap: break-word;
}
.phv__line::after { content: none; }
.phv__line--on {
  border-color: rgba(47, 107, 51, 0.28);
  background: var(--brand-soft);
}
.phv__line--on span { color: var(--brand-primary); }

/* ---- Plate: frame (Web & Digital Products) -----------------------------
   One product drawn across the surfaces it has to hold up on. Frames overlap
   rather than sit in a row, so the composition has depth without an image. */
.phv--frame .phv__frames {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding: var(--s-4) 0 var(--s-3);
}
.phv--frame .phv__frame {
  display: flex;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
  padding: 0.3rem;
}
.phv--frame .phv__glass {
  display: grid;
  flex: 1 1 auto;
  gap: 0.25rem;
  grid-template-columns: 1.4fr 3fr 3fr;
}
.phv--frame .phv__side,
.phv--frame .phv__blk {
  border-radius: 2px;
  background: var(--brand-soft);
  min-height: 1.4rem;
}
.phv--frame .phv__side { grid-row: span 3; background: var(--c-bg-sunken); }
.phv--frame .phv__blk--wide { grid-column: 2 / span 2; min-height: 2.1rem; background: var(--brand-soft-strong); }
.phv--frame .phv__frame--d { position: relative; z-index: 1; min-height: 8.5rem; }
.phv--frame .phv__frame--t,
.phv--frame .phv__frame--p { position: absolute; }
.phv--frame .phv__frame--t {
  right: 0.25rem;
  bottom: -0.35rem;
  z-index: 2;
  width: 34%;
  min-height: 4.75rem;
  border-color: var(--brand-primary);
}
.phv--frame .phv__frame--t .phv__glass { grid-template-columns: 1fr 1fr; }
.phv--frame .phv__frame--p {
  left: 50%;
  bottom: -0.6rem;
  z-index: 3;
  width: 17%;
  min-height: 3.1rem;
  transform: translateX(-50%);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
}
.phv--frame .phv__frame--p .phv__glass { grid-template-columns: 1fr; }
.phv--frame .phv__frame--p .phv__blk--wide { grid-column: auto; }

/* ---- Plate: flow (AI Integration & Automation) -------------------------
   The point of the drawing: the AI step is inserted into a path that already
   exists, and the dashed arc above it is the human still standing in it. */
.phv--flow { --phv-gap: 0.5rem; }
.phv--flow .phv__row { position: relative; }
.phv--flow .phv__node { position: relative; }
.phv--flow .phv__node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--phv-gap) * -1);
  width: var(--phv-gap);
  height: 1px;
  background: var(--c-border-strong);
}
.phv__loop {
  position: relative;
  height: 2.1rem;
  /* The negative bottom margin drops the arc onto the node row it brackets,
     and its open bottom edge becomes the two risers. */
  margin: var(--s-4) 0 -1px;
  border: 1px dashed var(--brand-primary);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  /* The arc spans the middle two nodes: where the model is, review is. */
  margin-inline: 22%;
}
.phv__loop-tag {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.4rem;
  background: var(--c-bg);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  white-space: nowrap;
}
.phv--flow .phv__legs { height: 0.9rem; margin-top: -1px; }

/* ---- Plate: bus (Business Systems & Integrations) ----------------------
   Two rows of systems meeting at one designed boundary, not a spider's web. */
.phv--bus .phv__row { padding: var(--s-3) 0; }
.phv--bus .phv__node { padding: 0.4rem 0.45rem; }
.phv__bus { position: relative; padding: 0.55rem 0; }
.phv__bus-bar {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-accent) 18%, var(--brand-primary) 50%, var(--brand-accent) 82%, transparent);
  transform: translateY(-50%);
}
.phv__bus-core {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--brand-primary);
  border-radius: 999px;
  background: var(--c-bg);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--brand-primary);
}
.phv--bus .phv__legs { height: 0.8rem; }

/* ---- Plate: slabs + gauge (Application Modernisation) ------------------
   Layers kept and improved against layers left alone. The gauge is a
   progress rail on the stack, never a percentage or a score. */
.phv--slabs .phv__slabs { position: relative; padding: var(--s-4) 0 var(--s-3) 1.4rem; }
.phv--gauge .phv__gauge {
  position: absolute;
  top: var(--s-4);
  bottom: var(--s-3);
  left: 0.4rem;
  width: 3px;
  border-radius: 2px;
  background: var(--c-border);
  overflow: hidden;
}
.phv--gauge .phv__gauge-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-accent), var(--brand-primary));
}
.phv--gauge .phv__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
.phv--gauge .phv__key-i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid var(--brand-primary);
  background: var(--brand-soft);
}
.phv--gauge .phv__key-i--on { border-color: var(--brand-primary); background: var(--brand-soft); }
.phv--gauge .phv__key-i--dim { border-style: dashed; border-color: var(--c-border-strong); background: none; }

/* ---- Plate: pulse (Managed Support & Maintenance) ----------------------
   A monitoring trace. The line is inline SVG so it stretches with the column
   instead of being scaled as a picture. */
.phv__wave {
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: var(--s-4) 0 var(--s-3);
  color: var(--brand-primary);
}
.phv--pulse .phv__row { padding-bottom: var(--s-3); }
.phv--pulse .phv__node { padding: 0.4rem; }
.phv__scan {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  padding-top: var(--s-2);
}
.phv__scan span {
  height: 3px;
  border-radius: 2px;
  background: var(--c-border-strong);
}
.phv__scan span:nth-child(2) { background: var(--brand-accent); }
.phv__scan span:nth-child(4) { background: var(--c-border); }

/* ---- Plate: matrix (Framework Expertise hub) --------------------------
   Four frameworks against the five layers they share. The lit cells are the
   hub's own claim: this is where the work happens. */
.phv__matrix {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) repeat(4, minmax(0, 1fr));
  /* Tighter column gap than the three-column original: four named columns in
     a plate about 24rem wide need the room. */
  gap: 0.3rem 0.25rem;
  align-items: center;
  padding: var(--s-4) 0;
}
.phv__mh {
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--c-ink-strong);
  text-align: center;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--c-border);
  overflow-wrap: break-word;
}
.phv__mh--k { border-bottom: 0; }
.phv__mk {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--c-muted);
  overflow-wrap: break-word;
}
.phv__ms {
  justify-self: center;
  width: 100%;
  max-width: 2.5rem;
  height: 0.85rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 2px;
  background: none;
}
.phv__ms--on {
  /* Filled, not tinted: at 14px a tint is indistinguishable from an empty
     cell for anyone with reduced contrast sensitivity, and the lit row is the
     whole point of the table. */
  border-color: var(--brand-primary);
  background: linear-gradient(180deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
}

/* ---- Plate: upgrade spine (ASP.NET Zero) ------------------------------
   An established platform moved forward one layer at a time: the spine is the
   upgrade path, the lit dot the step currently in hand. */
.phv--upgrade .phv__stackwrap { position: relative; padding: var(--s-4) 0 var(--s-3) 1.5rem; }
.phv--upgrade .phv__stackwrap .phv__slabs { gap: 0.4rem; }
.phv--upgrade .phv__spine {
  position: absolute;
  top: var(--s-4);
  bottom: var(--s-3);
  left: 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0;
}
.phv--upgrade .phv__spine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-border-strong);
}
.phv--upgrade .phv__spine-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
}
.phv--upgrade .phv__spine-dot--on {
  width: 9px;
  height: 9px;
  border-color: var(--brand-primary);
  background: var(--brand-accent);
}

/* ---- Plate: lattice (ABP.IO) -------------------------------------------
   A core with modules around it. Dashed cells are the framework's shape —
   modules slot in — not a claim about any particular project. */
.phv--modules .phv__lattice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  padding: var(--s-4) 0 var(--s-3);
}
.phv--modules .phv__mod {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.25rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: center;
  color: var(--c-ink-strong);
  overflow-wrap: break-word;
}
.phv--modules .phv__mod--dim { border-style: dashed; border-color: var(--c-border-strong); }
.phv--modules .phv__mod--core {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
  font-weight: 650;
  color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

/* ---- Plate: tree (Angular) --------------------------------------------
   Routing at the top, components in the middle, the service layer and the API
   beneath — the front end as a structure, not a screenshot. */
.phv__root {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  background: var(--c-bg);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--c-ink-strong);
}
.phv--tree .phv__row { padding: 0.4rem 0 0; }
.phv--tree .phv__node { padding: 0.4rem 0.35rem; }
.phv--tree .phv__legs { padding-top: 0.2rem; }
.phv__band {
  margin-top: 0.45rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--brand-soft), var(--c-bg));
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--brand-primary);
}
.phv__stem {
  width: 1px;
  height: 0.75rem;
  margin: 0.45rem auto 0;
  background: var(--c-border-strong);
}
.phv__root--api {
  margin: 0.45rem auto var(--s-2);
  border-style: dashed;
  color: var(--c-muted);
  font-weight: 600;
}

/* ---- Plate: join (Staff Augmentation) ---------------------------------
   The honest drawing of this offer: where one team ends, capacity is added.
   No faces, no headcounts — a joint is the real subject. */
.phv__join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.4rem;
  padding: var(--s-4) 0 var(--s-3);
}
.phv__join-half {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--c-muted);
  overflow-wrap: break-word;
}
.phv__join-half--on {
  border-color: var(--ph-accent, var(--brand-accent));
  background: var(--brand-soft);
  color: var(--brand-primary);
}
/* The dovetail: the two halves interlock rather than sit side by side. */
.phv__join-mark {
  position: relative;
  width: 1.1rem;
}
.phv__join-mark::before,
.phv__join-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid var(--c-border-strong);
  background: var(--c-bg-soft);
}
.phv__join-mark::before {
  top: 25%;
  bottom: 50%;
  border-radius: 3px 0 0 3px;
  border-right: 0;
}
.phv__join-mark::after {
  top: 50%;
  bottom: 25%;
  border-radius: 0 3px 3px 0;
  border-left: 0;
  background: var(--brand-soft);
  border-color: var(--ph-accent, var(--brand-accent));
}
.phv--join .phv__row { padding-bottom: var(--s-3); }
.phv--join .phv__node { padding: 0.4rem 0.35rem; }
.phv--join-slim { min-height: 12rem; }
.phv--join-slim .phv__slabs { padding: 0 var(--s-1); }
.phv--join-slim .phv__slab { min-height: 1.55rem; padding-block: 0.15rem; }

/* ---- Plate: pipeline (ASP.NET Core) -----------------------------------
   A request crossing the platform: in through middleware, out to the services
   and data behind them. Horizontal, because that is what a request pipeline
   is. The other three framework plates are vertical on purpose - spine,
   lattice, tree - so the four never read as one drawing with four captions. */
.phv--pipeline .phv__pipe { padding: var(--s-4) 0 0; }
.phv--pipeline .phv__node { padding: 0.45rem 0.3rem; }
.phv--pipeline .phv__band { margin-top: var(--s-4); }
.phv__pipe-line {
  position: relative;
  display: block;
  height: 1px;
  margin-top: 0.55rem;
  background: linear-gradient(90deg, transparent, var(--c-border-strong) 10%,
              var(--brand-primary) 55%, var(--c-border-strong) 90%, transparent);
}
.phv__pipe-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--brand-primary);
  border-right: 1px solid var(--brand-primary);
  transform: rotate(45deg);
}

/* ---- Plate: chain (Staff Augmentation) ---------------------------------
   The slice of the delivery cycle that a kind of capacity works on. Stages,
   not quantities: no counts, no percentages, no people and no faces. */
.phv__chain {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding: var(--s-2) 0 0;
}
.phv__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: 0.25rem 0.3rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--c-ink-strong);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.phv__cell:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -0.28rem;
  top: 50%;
  width: 0.36rem;
  height: 1px;
  background: var(--c-border-strong);
}
.phv__cell--on {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
  color: var(--brand-primary);
  font-weight: 700;
}
.phv__cell--dim {
  border-style: dashed;
  color: var(--c-muted);
}
.phv--join-slim .phv__chain { padding-top: var(--s-3); }

/* ---- Plate: mark (About) ----------------------------------------------
   Typographic, not technical. The wordmark, the three words the company is
   named for, and the one verified legal fact.                                   */
.phv--mark {
  align-items: center;
  padding: var(--s-5) var(--s-4) var(--s-4);
  text-align: center;
}
.phv--mark .phv__bar { width: 100%; }
.phv__mark {
  position: relative;
  margin-top: var(--s-5);
  font-size: var(--t-2xl);
  font-weight: 750;
  letter-spacing: 0.22em;
  text-indent: 0.22em;      /* optical: the trailing gap is not letter-spacing */
  color: var(--brand-dark);
}
.phv__mark-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: var(--brand-accent);
  transform: translateY(-0.35rem);
}
.phv__mark-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.phv__mark-line span:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85rem;
  margin-right: var(--s-3);
  background: var(--c-border-strong);
  vertical-align: -0.1rem;
}
.phv__mark-foot {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

/* ---- Plate: route (Contact) -------------------------------------------
   A client card, not a menu and not a numbered checklist. */
.phv--route {
  border-top: 2px solid var(--brand-primary);
  background: #fff;
  padding: 1.15rem 1.2rem 1rem;
}
.phv--route::before { display: none; }
.phv--route .phv__bar { padding-bottom: 0.85rem; }
.phv--route .phv__co {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.phv--route .phv__statement {
  max-width: none;
  margin: 1rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--c-ink-strong);
}
.phv--route .phv__scope {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.phv--route .phv__scope li {
  margin: 0;
  padding: 0.7rem 0.75rem 0.72rem 0.7rem;
  border: 1px solid var(--c-border);
  border-left: 2px solid var(--brand-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--c-bg-soft);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-ink);
}
.phv--route .phv__brief-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--c-border);
}
.phv--route .phv__brief-foot span:first-child {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.phv--route .phv__brief-foot span:last-child {
  color: var(--brand-primary);
  font-size: 0.84rem;
  font-weight: 650;
}
@media (max-width: 22rem) {
  .phv--route .phv__scope { grid-template-columns: 1fr; }
}
.phv__arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

/* ---- Responsive -------------------------------------------------------
   320-479: the plate reduces to its primary rows, and the parts that need
   space (arcs, gauges, side rails, secondary frames) go.
   480-767: same plate, full content, still stacked under the copy.
   768-991: horizontal recomposition, centred and width-capped.
   992+:    the plate takes the right column at full size.                  */
.page-hero__visual {
  position: relative;
  box-sizing: border-box;
  width: var(--page-hero-visual-width);
  height: var(--page-hero-visual-height);
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  justify-self: center;
  align-self: center;
}
.page-hero__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 10% -4% -6% 12%;
  background: radial-gradient(closest-side, rgba(133, 196, 65, 0.34), transparent 74%);
  filter: blur(10px);
  pointer-events: none;
}
.page-hero__visual > .phv { position: relative; z-index: 1; }

/* Phones: contact gets out of the way — the form IS the hero at that size. */
@media (max-width: 47.99em) {
  .phv {
    min-height: 0;
    padding: var(--s-3) var(--s-3) var(--s-2);
  }
  .phv--flow .phv__row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .phv__loop,
  .phv--flow .phv__legs,
  .phv--gauge .phv__gauge,
  .phv--gauge .phv__key,
  .phv--upgrade .phv__spine,
  .phv__foot,
  .phv--frame .phv__frame--t,
  .phv--tree .phv__legs,
  .phv--join-slim .phv__slabs,
  /* A chain survives 320px as two rows of stages; the connector ticks and the
     pipeline's travel line are the parts that cannot. */
  .phv__chain { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The landing plate names four capacities in one row; four columns at 320px
     would give each node 61px. Two rows of two keeps the words readable. */
  .phv--join .phv__row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phv__cell:not(:last-child)::after,
  .phv__pipe-line,
  .phv--route .phv__arrow { display: none; }
  .phv--pipeline .phv__row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phv__frame--d { min-height: 5.5rem; }
  .phv__frames { padding: var(--s-3) 0; }
  /* The hub's matrix cannot survive as a table at this width. What it is for
     - four named frameworks - still reads, so the table becomes a 2 x 2 of
     tiles rather than a shrunken grid. */
  .phv--matrix .phv__matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    padding: var(--s-3) 0 0;
  }
  .phv__mk,
  .phv__ms,
  .phv__mh--k { display: none; }
  .phv__mh {
    padding: 0.4rem 0.2rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    line-height: 1.25;
  }
  .phv--route { display: none; }   /* /contact/ on a phone: form first */
  .phv--pulse .phv__wave { height: 2.25rem; }
}
@media (max-width: 29.99em) {
  /* 320px: the ledger keeps every row (they are the hub's content) and the
     three-across rows keep their count, because the number of tiles is the
     message and hyphenation absorbs the tight fit. Only the joint stacks -
     two halves side by side is the one thing a narrow column cannot say. */
  .phv__join { grid-template-columns: minmax(0, 1fr); }
  .phv__join-mark { width: 100%; height: 1.1rem; }
  .phv--modules .phv__lattice { gap: 0.3rem; }
  .phv--modules .phv__mod { min-height: 2.2rem; }
}

/* Tablet: a horizontal composition, capped so the plate reads as one object
   rather than a full-bleed slab. */
@media (min-width: 48em) and (max-width: 61.99em) {
  :root {
    --page-hero-visual-width: min(100%, 32rem);
    --page-hero-visual-height: 17.5rem;
  }
  .page-hero--visual .page-hero__grid { max-width: 34rem; margin-inline: auto; }
  .phv { min-height: 12rem; }
  .phv--matrix .phv__matrix { grid-template-columns: minmax(0, 0.7fr) repeat(4, minmax(0, 1fr)); }
  .phv--ledger .phv__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
}

@media (min-width: 62em) {
  :root {
    --page-hero-visual-width: 24rem;
    --page-hero-visual-height: 18.75rem;
  }
  .page-hero--visual .page-hero__grid {
    grid-template-columns: minmax(0, 1fr) var(--page-hero-visual-width);
    column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
    row-gap: var(--s-6);
    align-items: center;
  }
  .page-hero__visual { justify-self: end; }
  /* Copy stays its own height. The visual does not stretch to match it. */
  .page-hero--visual .page-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 34rem;
  }
  .page-hero--visual .page-hero__actions { margin-top: auto; }
  .page-hero--visual .page-hero__inner .lead { max-width: 46ch; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__inner { animation: none; }
  .phv { animation: none; }
}
.breadcrumb { margin-bottom: var(--s-5); font-size: var(--t-xs); }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  color: var(--c-muted);
}
.breadcrumb li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-border-strong); }
.breadcrumb a {
  display: inline-block;
  padding-block: var(--s-2);   /* larger tap area, same visual position */
  margin-block: calc(var(--s-2) * -1);
  color: var(--c-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--c-accent); text-decoration: underline; }

/* ---------- 09b Global CTA component ------------------------------------
   One closing band, used on every page immediately above the footer.        */
.cta {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  background: var(--brand-dark);
  color: #fff;
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem 2rem;
}
.cta__copy { max-width: 38rem; }
.cta h2 {
  margin-bottom: 0.45rem;
  color: #fff;
  max-width: none;
  font-size: clamp(1.7rem, 0.7vw + 1.35rem, 2rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cta p {
  margin: 0;
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; }
.cta .btn {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
}

/* Decorative mark only — it does not carry text meaning. */
.cta__rule {
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-bottom: 0.8rem;
  border-radius: 2px;
  background: var(--brand-accent);
}

.btn--on-dark {
  background: #fff;
  border-color: #fff;
  color: var(--brand-dark);
}
.btn--on-dark:hover { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-dark); }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.62);
  color: #fff;
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

.cta :focus-visible { outline-color: #fff; }

@media (min-width: 52em) {
  .cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
  .cta__actions { flex-shrink: 0; justify-content: flex-end; }
}

/* A CTA directly above the footer already provides the breathing room.
   NOTE: the CTA is the last child of <main> and the footer is a sibling of
   <main>, so the old `.cta + .site-footer` adjacent selector never matched
   and left a dead ~86px white band between the dark CTA and the footer. */
main:has(> .cta:last-child) + .site-footer { margin-top: 0; border-top: 0; }

/* ==========================================================================
   12 HOMEPAGE (Phase 3)
   All visuals are CSS + inline SVG — no raster images, no extra requests.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------
   Text-first: the H1 is the intended LCP element. Nothing here depends on
   JavaScript; the entrance animation is CSS-only and additive.

   Composition (redesign): the headline runs across the full measure — it
   needs that width at display scale — and the lead, CTAs and spec list then
   share a row with the panel, so the two halves read as one instrument rather
   than "copy on the left, card on the right". The engineering grid moved
   INSIDE the panel, where a dark surface gives it something to catch on; a
   0.6-opacity grid behind the copy only cost the headline contrast.         */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.75rem) clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--c-border);
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-soft) 78%);
}
/* A single raking brand light over the panel side. Tints are the only free
   depth available without imagery, so this one is allowed to be seen — it is
   the hero's entire background argument, and nothing sits behind the copy. */
.hero::before {
  content: "";
  position: absolute;
  top: -30rem;
  right: -10rem;
  width: 52rem;
  height: 30rem;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, var(--brand-soft-strong) 0%, transparent 68%);
  pointer-events: none;
}
/* The band boundary is a designed moment: an accent rule runs out of the left
   margin and dissolves before the strip, echoing .cta__rule. */
.hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-accent) 0, var(--brand-primary) 18rem, transparent 46%);
  pointer-events: none;
}
.hero__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem);
  align-items: center;
}
/* Full-measure, left-aligned headline block. A centred hero reads generic; a
   wide left-aligned measure reads editorial and keeps the eye on the H1. */
.hero__head { grid-column: 1 / -1; }

.hero__eyebrow {
  margin: 0 0 var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
/* Signal dot in place of the old gradient dash: the same mark the integration
   node carries, so both halves of the hero share one motif instead of two
   unrelated decorations. */
.hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--brand-soft-strong);
}
.hero__title {
  font-size: var(--t-hero);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-5);
  /* 30ch: wide enough that line 1 ("Software, Web & AI Solutions") can never
     orphan a word, narrow enough that line 2 keeps a readable measure. */
  max-width: 30ch;
}
/* Two-tone headline: the qualifier steps back instead of competing with the
   claim in front of it. --brand-primary is 6.42:1 on white, so this is a
   legibility choice, not decoration. */
.hero__title-accent { color: var(--brand-primary); }
/* Controlled line break: only split the headline where there is room */
.hero__title-break { display: inline; }
@media (min-width: 30em) {
  .hero__title-break { display: block; height: 0; overflow: hidden; }
}
.hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  min-width: 0;
}
.hero__lead {
  font-size: var(--t-lg);
  color: var(--c-muted);
  max-width: 52ch;
  margin: 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn--lg { min-height: 3rem; padding-inline: var(--s-6); font-size: var(--t-base); }

/* The four capability areas as a ruled spec list that closes the column,
   instead of four labels trailing off underneath the CTAs. */
.hero__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  width: 100%;
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  list-style: none;
}
.hero__capabilities li { display: inline-flex; align-items: center; }
/* Dots only where the row is wide enough to keep them tidy; on small
   screens the items simply wrap as a clean list. */
.hero__capabilities li::before {
  content: "";
  width: 4px; height: 4px;
  margin-right: var(--s-2);
  border-radius: 50%;
  background: var(--brand-accent);
  flex: 0 0 auto;
}

/* Hero architecture visual — decorative, aria-hidden */
/* Below 48em the diagram would crowd the CTAs, so it is dropped; from 48em
   it appears full width under the copy, and from 62em it takes the right
   column beside the lead and CTAs. It is decorative (aria-hidden) so removing
   it loses no content. */
.hero__visual { display: none; }

/* --- Tablet (48em-62em): an intentional composition, not the desktop panel
   dropped underneath. The instrument is centred and width-capped so it reads
   as a deliberate object rather than a full-bleed slab, and the diagram
   tightens its internal spacing so the hero does not become over-tall. --- */
@media (min-width: 48em) {
  .hero__visual { display: block; }
}
@media (min-width: 48em) and (max-width: 61.99em) {
  .hero { padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 3.5vw, 3rem); }
  .hero__inner { gap: clamp(2rem, 3.5vw, 2.75rem); }
  .hero__visual {
    width: min(32rem, 100%);
    margin-inline: auto;
  }
  .hero__panel { padding: var(--s-4) var(--s-4) var(--s-3); }
  .arch { padding: var(--s-4) 0; }
  .arch__node { padding: var(--s-3) var(--s-4); }
  .arch__stem { height: 1.25rem; }
  .arch__fan { height: 1rem; margin-bottom: var(--s-2); }
  .arch__leaf { padding: var(--s-2); }
  /* Capability strip reads better as a single tidy row at this width */
  .hero__capabilities { gap: var(--s-2) var(--s-5); }
}

@media (min-width: 62em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    column-gap: clamp(2.5rem, 4vw, 4rem);
    row-gap: var(--s-7);
    align-items: stretch;
  }
  /* Equal-height columns: the copy centres against the instrument and the
     spec rule meets the panel's base line. */
  .hero__body { justify-content: center; }
  .hero__capabilities { margin-top: auto; }
}

/* The panel: a dark instrument surface. The diagram used to be a white card
   on a near-white page, carried by a shadow alone; on --surface-dark the
   nodes, connectors and grid all read at full strength, and the hero gains
   the one dark mass the brand otherwise reserves for the closing CTA. */
.hero__panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 20rem;
  padding: var(--s-4) var(--s-5) var(--s-3);
  overflow: hidden;
  border: 1px solid var(--brand-deep);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 85% at 100% 0%, rgba(133, 196, 65, 0.15), transparent 62%),
    linear-gradient(180deg, var(--surface-dark-ink) 0%, var(--surface-dark) 100%);
  box-shadow: var(--shadow-xl);
}
/* Engineering grid, masked from the top so the drawing stays the subject.
   Decorative only: no small text sits on it without a node surface behind it. */
.hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, rgba(0, 0, 0, 0.95) 22%, transparent 78%);
          mask-image: radial-gradient(130% 100% at 50% 0%, rgba(0, 0, 0, 0.95) 22%, transparent 78%);
  pointer-events: none;
}
/* The title strip carries the caption the standalone diagram used to own
   ("How the work fits together") — the same words, now structurally anchored. */
.hero__panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.hero__panel-title {
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-accent-text);
}
/* Three ticks, the first lit: a read-out, not an interface. */
.hero__panel-ticks { display: inline-flex; flex: 0 0 auto; gap: 4px; }
.hero__panel-ticks span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.hero__panel-ticks span:first-child { background: var(--brand-accent); }
/* Five bars for the five service lines, fading out — a measured footer rather
   than a caption that would need to be read to be understood. */
.hero__panel-rule {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: var(--s-3);
}
.hero__panel-rule span {
  flex: 1 1 0;
  height: 2px;
  border-radius: 1px;
  background: rgba(149, 206, 87, 0.55);
}
.hero__panel-rule span:nth-child(2) { background: rgba(149, 206, 87, 0.42); }
.hero__panel-rule span:nth-child(3) { background: rgba(149, 206, 87, 0.28); }
.hero__panel-rule span:nth-child(4) { background: rgba(255, 255, 255, 0.16); }
.hero__panel-rule span:nth-child(5) { background: rgba(255, 255, 255, 0.1); }

/* --------------------------------------------------------------------------
   Architecture diagram — hero-only component, aria-hidden
   ------------------------------------------------------------------------ */
.arch {
  display: grid;
  justify-items: stretch;
  gap: 0;
  padding: var(--s-5) 0;
}
.arch__node {
  display: grid;
  gap: 2px;
  padding: var(--s-4) var(--s-5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
}
.arch__label { font-size: var(--t-sm); font-weight: 650; color: #fff; }
.arch__meta  { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.78); }

/* The lead surface sits slightly raised */
.arch__node--lead { background: rgba(255, 255, 255, 0.075); }

/* The integration layer is the conceptual centre — brand-accented, and the
   only surface in the diagram carrying colour. */
.arch__node--core {
  position: relative;
  border-color: rgba(149, 206, 87, 0.5);
  background: linear-gradient(180deg, rgba(149, 206, 87, 0.16) 0%, rgba(149, 206, 87, 0.06) 100%);
}
.arch__node--core .arch__label { color: #fff; }
.arch__dot {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
}

/* Connectors */
.arch__stem {
  justify-self: center;
  width: 1px; height: 1.75rem;
  background: rgba(255, 255, 255, 0.32);
}
.arch__fan {
  position: relative;
  height: 1.25rem;
  /* The legs must land on the CENTRES of the three .arch__row columns.
     With a grid gap of --s-3, each column is (100% - 2*gap)/3 wide, so the
     first centre sits at (col/2) from the edge -- NOT at a flat 16.6667%,
     which ignores the gap and drifted the connectors by ~5px. */
  --arch-col: calc((100% - 2 * var(--s-3)) / 3);
  margin: 0 calc(var(--arch-col) / 2) var(--s-3);
}
/* horizontal spine joining the three legs */
.arch__fan::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
}
.arch__leg {
  position: absolute;
  width: 1px;
  background: rgba(255, 255, 255, 0.32);
}
.arch__leg--l { left: 0;   top: 50%; bottom: -0.75rem; }
.arch__leg--m { left: 50%; top: 0;   bottom: -0.75rem; }
.arch__leg--r { right: 0;  top: 50%; bottom: -0.75rem; }

.arch__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.arch__leaf {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  padding: var(--s-3);
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
}
.arch__leaf-label { font-size: var(--t-xs); font-weight: 650; color: #fff; }
.arch__leaf-meta  { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.78); }
.arch__leaf--ai { border-color: rgba(149, 206, 87, 0.5); background: rgba(149, 206, 87, 0.12); }
.arch__leaf--ai .arch__leaf-label { color: var(--brand-accent-text); }

/* CSS-only hero entrance (works without JS).
   IMPORTANT: the H1 is the intended LCP element, so it is NEVER faded in from
   opacity:0 — that would delay its paint and hand LCP to another element.
   It gets a transform-only entrance; opacity fades apply to later elements. */
.hero__title { animation: hero-rise var(--dur-slow) var(--ease) both; }
.hero__eyebrow { animation: hero-in var(--dur-slow) var(--ease) both; }
.hero__lead { animation: hero-in var(--dur-slow) var(--ease) 70ms both; }
.hero__actions { animation: hero-in var(--dur-slow) var(--ease) 140ms both; }
.hero__capabilities { animation: hero-in var(--dur-slow) var(--ease) 210ms both; }
@keyframes hero-rise {
  from { transform: translateY(8px); }
  to   { transform: none; }
}
.hero__visual { animation: hero-in 600ms var(--ease) both 160ms; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Capability strip --------------------------------------------------- */
.strip {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-soft);
}
.strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.strip__list li {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-muted);
  letter-spacing: -0.01em;
}

/* ---- Core services: 2 + 3 ---------------------------------------------- */
.svc-grid { display: grid; gap: var(--s-4); }
.svc-grid--top { margin-bottom: var(--s-4); }
@media (min-width: 48em) { .svc-grid--top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .svc-grid--bottom { grid-template-columns: repeat(3, 1fr); } }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.svc:hover, .svc:focus-within {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* The two lead services carry more commercial weight: a tinted surface, a
   brand rule along the top edge and larger type separate them from the three
   standard cards without cloning another component. */
.svc--feature {
  padding: var(--s-6);
  background:
    linear-gradient(var(--brand-soft), transparent 42%) ,
    var(--c-bg);
  border-color: var(--c-border-strong);
}
.svc--feature::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}
.svc--feature .svc__desc { font-size: var(--t-base); }

.svc__num {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  /* Was --c-border-strong (1.53:1 on white) — a Phase 13 regression. These
     numerals are read as content, so they need AA. --c-muted is 6.55:1 and
     still reads quieter than the featured cards' brand green. */
  color: var(--c-muted);
}
.svc--feature .svc__num { color: var(--brand-primary); }
.svc__title { margin-bottom: var(--s-3); font-size: var(--t-md); }
.svc--feature .svc__title { font-size: var(--t-lg); }
.svc__link { color: inherit; text-decoration: none; }
.svc__link:hover { color: var(--brand-primary); }
/* Whole-card target, no JS */
.svc__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.svc__desc { color: var(--c-muted); font-size: var(--t-sm); margin-bottom: var(--s-4); }

.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}
.svc__tags li {
  padding: 3px var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: 100px;
  background: var(--c-bg-soft);
  font-size: var(--t-xs);
  color: var(--c-muted);
}
.svc__cta { margin: auto 0 0; color: var(--brand-primary); font-size: var(--t-sm); }

.section__foot { margin: var(--s-7) 0 0; }

/* ---- Framework expertise (dark, distinct) ------------------------------- */
.fw-section {
  position: relative;
  isolation: isolate;
  background: var(--brand-dark);
  color: #fff;
}
.fw-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  -webkit-mask-image: radial-gradient(48rem 24rem at 12% 8%, #000, transparent 70%);
          mask-image: radial-gradient(48rem 24rem at 12% 8%, #000, transparent 70%);
}
.fw-section__head h2 {
  font-size: var(--t-4xl);
  line-height: 1.06;
  letter-spacing: -0.03em;
  /* Overrides the 20ch cap from .section__head h2 so the headline sets on
     its intended two lines via .h2-break rather than fragmenting. */
  max-width: 24ch;
}
.fw-section h2, .fw-section h3 { color: #fff; }
.fw-section .lead { color: rgba(255, 255, 255, 0.78); }
.eyebrow--on-dark { color: var(--brand-accent-text); }
.eyebrow--on-dark::before { background: var(--brand-accent); }
.fw-section :focus-visible { outline-color: #fff; }
.fw-section__head { max-width: 62rem; }
/* Responsive headline break: only split where the line has room */
.h2-break { display: inline; }
@media (min-width: 48em) { .h2-break { display: block; height: 0; overflow: hidden; } }

.fw-grid { display: grid; gap: var(--s-4); }
/* Four frameworks, two columns: a four-across row leaves each card too narrow
   for its own bullet list, and one card per row wastes half the section. Two
   columns from 48em keeps every card the same width and the rows level. */
@media (min-width: 48em) { .fw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fw {
  position: relative;
  padding: var(--s-5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  /* Kept very low: #95CE57 (--brand-accent-text) is 4.89:1 on the solid
     #285128 section, and every point of white tint erodes that. At 0.04 the
     numerals fell to 4.37:1; 0.02 holds 4.66:1 with room for the hover state. */
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.fw:hover, .fw:focus-within {
  border-color: var(--brand-accent);
  /* Hover tint capped at 0.03 so --brand-accent-text stays >=4.5:1 even in
     the raised state; the accent border carries most of the hover feedback. */
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-2px);
}
.fw__num {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--brand-accent-text);
}
.fw__title {
  margin-bottom: var(--s-3);
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
}
.fw__link { color: #fff; text-decoration: none; }
.fw__link:hover { color: var(--brand-accent-text); }
.fw__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fw__desc {
  margin-bottom: var(--s-4);
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--t-sm);
}
.fw__services {
  margin: 0;
  padding: var(--s-4) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.fw__services li {
  position: relative;
  padding-left: var(--s-4);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.9);
}
.fw__services li + li { margin-top: var(--s-2); }
.fw__services li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
}

.fw-augment {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
}
.fw-augment h3 { margin-bottom: var(--s-2); font-size: var(--t-md); }
.fw-augment p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: var(--t-sm); }
@media (min-width: 48em) {
  .fw-augment { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-6); }
  .fw-augment .btn { flex-shrink: 0; }
}

/* ---- AI & automation ---------------------------------------------------- */
.ai-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 64em) {
  .ai-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.ai-list {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-6) 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) { .ai-list { grid-template-columns: repeat(2, 1fr); } }
.ai-list li {
  display: grid;
  gap: 2px;
  padding-left: var(--s-5);
  position: relative;
}
.ai-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--brand-accent);
}
.ai-list strong { font-size: var(--t-sm); font-weight: 650; color: var(--c-ink-strong); }
.ai-list span { font-size: var(--t-xs); color: var(--c-muted); line-height: 1.5; }

.flow {
  margin: 0;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.flow__caption {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.flow__list { margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.flow__list li {
  position: relative;
  display: grid;
  gap: 1px;
  padding: var(--s-3) 0 var(--s-3) var(--s-6);
  counter-increment: flow;
}
.flow__list li::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  left: 0; top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--brand-primary);
}
/* Vertical connector between steps */
.flow__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px; top: 2.1rem; bottom: -0.25rem;
  width: 1px;
  background: var(--c-border-strong);
}
.flow__step { font-size: var(--t-sm); font-weight: 650; color: var(--c-ink-strong); }
.flow__note { font-size: var(--t-xs); color: var(--c-muted); }

/* ---- How we work -------------------------------------------------------- */
.steps {
  position: relative;
  display: grid;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 40em) { .steps { grid-template-columns: repeat(2, 1fr); } }
/* From 4 stages across, the steps read as a connected progression rather
   than four separate cards. The rail is a single line behind the markers. */
@media (min-width: 60em) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
  .steps::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      var(--brand-primary) 0%,
      var(--brand-accent) 55%,
      var(--c-border-strong) 100%);
    opacity: 0.55;
  }
}
@media (min-width: 64em) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--s-4); border-top: 2px solid var(--c-border); }
.step__num {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brand-primary);
}
.step__title { margin-bottom: var(--s-2); font-size: var(--t-lg); letter-spacing: -0.015em; }
@media (min-width: 60em) {
  /* Marker sits on the rail; the border-top is replaced by the shared line. */
  .step { border-top: 0; padding-top: var(--s-8); }
  .step::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--c-bg-soft);
    border: 2px solid var(--brand-primary);
  }
  .step::after {
    content: "";
    position: absolute;
    top: 0.875rem;
    left: 0.375rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--brand-primary);
  }
  .step:last-child::before { border-color: var(--c-border-strong); }
  .step:last-child::after { background: var(--c-border-strong); }
}
.step__desc { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }

/* ---- Technology expertise ----------------------------------------------- */
.tech-grid { display: grid; gap: var(--s-5); }
@media (min-width: 40em) { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
/* 5 groups: avoid a ragged trailing gap by pairing them deliberately.
   Row 1 = Microsoft (wide) + Frontend (wide); Row 2 = the three smaller sets. */
@media (min-width: 64em) {
  .tech-grid { grid-template-columns: repeat(6, 1fr); column-gap: var(--s-6); }
  .tech-group:nth-child(1) { grid-column: span 3; }
  .tech-group:nth-child(2) { grid-column: span 3; }
  .tech-group:nth-child(3) { grid-column: span 2; }
  .tech-group:nth-child(4) { grid-column: span 2; }
  .tech-group:nth-child(5) { grid-column: span 2; }
}
.tech-group__title {
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tech-tags li {
  padding: 4px var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: var(--t-sm);
  color: var(--c-ink);
}

/* ---- Why EKSTRUH -------------------------------------------------------- */
.why-grid { display: grid; gap: var(--s-5); }
@media (min-width: 40em) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
.why {
  padding-left: var(--s-5);
  border-left: 2px solid var(--brand-soft-strong);
}
.why__title { margin-bottom: var(--s-2); font-size: var(--t-md); }
.why__desc { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }
.why-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-7) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  max-width: none;
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ---- Reduced motion for homepage additions ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__eyebrow,
  .hero__lead,
  .hero__actions,
  .hero__capabilities,
  .hero__visual { animation: none; }
  .svc:hover, .fw:hover { transform: none; }
}

/* ==========================================================================
   13 SERVICES OVERVIEW (Phase 4)
   Reuses .page-hero .section .btn .tech-tags .steps .fw-section .cta.
   New: service-model nav, alternating service blocks, CSS-only diagrams.
   No JavaScript, no images.
   ========================================================================== */

/* ---- Service model nav -------------------------------------------------- */
.model {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 34em) { .model { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .model { grid-template-columns: repeat(5, 1fr); } }

.model__link {
  display: grid;
  gap: var(--s-1);
  height: 100%;
  padding: var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.model__link:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.model__step {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--brand-primary);
}
.model__name {
  font-size: var(--t-md);
  font-weight: 650;
  color: var(--c-ink-strong);
  letter-spacing: -0.01em;
}
.model__desc { font-size: var(--t-xs); color: var(--c-muted); line-height: 1.5; }

/* ---- Service blocks ----------------------------------------------------- */
.svc-blocks { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

.svc-block {
  display: grid;
  gap: var(--s-6);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--c-border);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.svc-block:last-child { padding-bottom: 0; border-bottom: 0; }

@media (min-width: 64em) {
  .svc-block { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-9); align-items: start; }
  /* Diagram hugs its content and follows the reader down long blocks */
  .svc-block__visual { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  /* Alternate on desktop only; mobile always reads content first */
  .svc-block--flip .svc-block__body { order: 2; }
  .svc-block--flip .svc-block__visual { order: 1; }
}

.svc-block__num {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brand-primary);
}
.svc-block__title { margin-bottom: var(--s-2); font-size: var(--t-xl); }
.svc-block__positioning {
  margin-bottom: var(--s-4);
  padding-left: var(--s-4);
  border-left: 2px solid var(--brand-accent);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.svc-block__desc { color: var(--c-muted); margin-bottom: var(--s-5); }

.svc-block__caps-title,
.svc-block__tech-title {
  margin: 0 0 var(--s-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.svc-block__caps {
  display: grid;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}
@media (min-width: 34em) { .svc-block__caps { grid-template-columns: repeat(2, 1fr); } }
.svc-block__caps li {
  position: relative;
  padding-left: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-ink);
}
.svc-block__caps li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
}

.svc-block__tech { margin-bottom: var(--s-5); }
.svc-block__cta { margin: 0; }

/* Framework cross-link inside the modernisation block */
.svc-block__aside {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.svc-block__aside-title {
  margin: 0 0 var(--s-3);
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--c-ink-strong);
}
.svc-block__aside-links { margin: 0; padding: 0; list-style: none; }
.svc-block__aside-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   /* comfortable touch target */
  font-size: var(--t-sm);
}

/* ---- CSS-only decorative diagrams --------------------------------------- */
.vis {
  padding: var(--s-5);
  align-self: start;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

/* Shared caption for the diagrams — says what the picture means */
.vis__caption {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Web: labelled application layers (top = what the user sees) */
.vis--stack { display: grid; gap: var(--s-2); }
.vis__layer {
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
}
.vis__layer--accent {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
}
.vis__layer-name {
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--c-ink-strong);
}
.vis__layer--accent .vis__layer-name { color: var(--brand-primary); }
.vis__layer-meta { font-size: var(--t-xs); color: var(--c-muted); }

/* AI: linear workflow chain */
.vis--chain { display: grid; gap: var(--s-2); justify-items: start; }
.vis__node {
  padding: var(--s-2) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: 100px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-ink);
}
.vis__node--accent {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
  color: var(--brand-primary);
}
.vis__arrow {
  width: 2px;
  height: 14px;
  margin-left: var(--s-5);
  background: var(--c-border-strong);
}

/* Systems: hub with satellites */
.vis--nodes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  align-items: center;
  text-align: center;
}
.vis__hub {
  grid-column: 1 / -1;
  justify-self: center;
  padding: var(--s-3) var(--s-5);
  background: var(--brand-dark);
  color: #fff;
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.vis__sat {
  padding: var(--s-2) var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  color: var(--c-muted);
}

/* Modernisation: before -> after */
.vis--progress { display: grid; gap: var(--s-3); }
.vis__stage {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
}
.vis__stage--old { border-style: dashed; }
.vis__stage--new { border-color: var(--brand-primary); background: var(--brand-soft); }
.vis__stage-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.vis__stage--new .vis__stage-label { color: var(--brand-primary); }
.vis__stage-text { font-size: var(--t-xs); color: var(--c-muted); line-height: var(--lh-snug); }
.vis__to {
  justify-self: center;
  width: 2px;
  height: 18px;
  background: var(--brand-accent);
}

/* Support: continuous lifecycle */
.vis--loop {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.vis__cycle {
  padding: var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-ink);
  text-align: center;
}
.vis__cycle--2 { border-color: var(--brand-primary); color: var(--brand-primary); }

/* ---- Compact framework cross-link --------------------------------------- */
.fw-compact { display: grid; gap: var(--s-6); }
@media (min-width: 64em) {
  .fw-compact { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-8); align-items: center; }
}
.fw-compact__copy > :last-child { margin-bottom: 0; }
.fw-compact__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; }

.fw-compact__list { margin: 0; padding: 0; list-style: none; }
.fw-compact__list li + li { margin-top: var(--s-3); }
.fw-compact__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: var(--t-md);
  font-weight: 650;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.fw-compact__list a:hover {
  border-color: var(--brand-accent);
  background: rgba(255, 255, 255, 0.07);
  transform: translateX(3px);
  color: #fff;
}
.fw-compact__list svg { flex: 0 0 auto; color: var(--brand-accent-text); }

@media (prefers-reduced-motion: reduce) {
  .model__link:hover,
  .fw-compact__list a:hover { transform: none; }
}

/* ==========================================================================
   14 SERVICE DETAIL PAGES (Phase 5)
   Generic, reusable components shared by all five service pages.
   Reuses .page-hero .section .steps .tech-grid/.tech-tags .cta .vis.
   No JavaScript, no images.
   ========================================================================== */

/* Hero CTAs on internal pages */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  max-width: none;
}

/* ---- Explanatory two-column block --------------------------------------- */
.explain { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 64em) {
  .explain { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  /* Short aside content only — sticky is safe because these asides are small */
  .explain__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.explain--single { grid-template-columns: minmax(0, 1fr); max-width: 62rem; }
.explain__copy > :last-child { margin-bottom: 0; }
.explain__copy h2 { margin-bottom: var(--s-5); }
.explain__copy p { color: var(--c-muted); }
.explain__copy p + p { margin-top: var(--s-4); }

/* ---- Paired explanations -------------------------------------------------
   Two related topics side by side instead of two stacked full-width prose
   sections. Not a card: separation comes from the column gap and a rule on
   the second column, keeping the page calm and the rhythm varied.          */
.pair { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 64em) {
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 4.5rem); }
  .pair__item + .pair__item {
    padding-left: clamp(3rem, 5vw, 4.5rem);
    border-left: 1px solid var(--c-border);
    margin-left: calc(-1 * clamp(3rem, 5vw, 4.5rem) / 2);
  }
}
.pair__item h2 { margin-bottom: var(--s-5); }
.pair__item p { color: var(--c-muted); }
.pair__item p + p { margin-top: var(--s-4); }
.pair__item > :last-child { margin-bottom: 0; }

/* ---- Capability grid ----------------------------------------------------- */
.cap-grid { display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }

.cap {
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.cap:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }
.cap__title {
  position: relative;
  margin-bottom: var(--s-2);
  padding-left: var(--s-4);
  font-size: var(--t-md);
}
.cap__title::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--brand-accent);
}
.cap__desc { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }

/* ---- "Good fit when..." checklist ---------------------------------------- */
/* Scenario list — deliberately NOT cards. A single-line statement does not
   benefit from a container; a shared rule and consistent indent group these
   far more calmly than six boxes. */
.fitlist {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-border);
}
@media (min-width: 48em) {
  .fitlist {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--s-8);
  }
}
.fitlist li {
  position: relative;
  padding: var(--s-4) 0 var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-md);
  color: var(--c-ink);
}
/* Tick drawn in CSS — decorative, meaning carried by the text */
.fitlist li::before,
.fitlist li::after {
  content: "";
  position: absolute;
  background: var(--brand-primary);
  border-radius: 1px;
}
.fitlist li::before { left: 2px; top: 50%; width: 6px;  height: 2px;
  transform: translateY(1px) rotate(45deg); transform-origin: left center; }
.fitlist li::after  { left: 6px; top: 50%; width: 11px; height: 2px;
  transform: translateY(3px) rotate(-45deg); transform-origin: left center; }

/* ---- Step grid widths ----------------------------------------------------
   The connector rail in .steps::before spans ONE row. Any step count that
   wraps onto a second row would leave the rail floating above an unconnected
   row, so 5- and 6-step processes get their own single-row track counts.  */
@media (min-width: 64em) {
  .steps--5 { grid-template-columns: repeat(5, 1fr); }
  .steps--6 { grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
  .steps--6 .step__title { font-size: var(--t-md); }
}
/* Below the single-row breakpoint the rail must not be drawn at all. */
@media (max-width: 63.99em) {
  .steps--5::before,
  .steps--6::before { display: none; }
  .steps--5 .step,
  .steps--6 .step {
    border-top: 2px solid var(--c-border);
    padding-top: var(--s-4);
  }
  .steps--5 .step::before, .steps--5 .step::after,
  .steps--6 .step::before, .steps--6 .step::after { display: none; }
}

/* ---- Flow diagram (vertical, decorative) --------------------------------- */
.flow-d {
  margin: 0;
  padding: var(--s-5);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.flow-d__caption {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.flow-d__list { margin: 0; padding: 0; list-style: none; counter-reset: fd; }
.flow-d__item {
  position: relative;
  display: grid;
  gap: 1px;
  padding: var(--s-3) 0 var(--s-3) var(--s-6);
  counter-increment: fd;
}
.flow-d__item::before {
  content: counter(fd, decimal-leading-zero);
  position: absolute;
  left: 0; top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--brand-primary);
}
.flow-d__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px; top: 2.1rem; bottom: -0.25rem;
  width: 1px;
  background: var(--c-border-strong);
}
.flow-d__label { font-size: var(--t-sm); font-weight: 650; color: var(--c-ink-strong); }
.flow-d__note { font-size: var(--t-xs); color: var(--c-muted); line-height: 1.5; }
.flow-d__item--accent .flow-d__label { color: var(--brand-primary); }

/* ---- Integration architecture visual ------------------------------------- */
.vis--arch { display: grid; justify-items: center; gap: 0; text-align: center; }
.vis__arch-top,
.vis__arch-node {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-ink);
}
.vis__arch-stem { width: 2px; height: 16px; background: var(--c-border-strong); }
.vis__arch-hub {
  padding: var(--s-3) var(--s-5);
  background: var(--brand-dark);
  color: #fff;
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.vis__arch-fan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 18px;
}
/* horizontal bus joining the three legs under the hub */
.vis__arch-fan::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16.666%;
  right: 16.666%;
  height: 2px;
  background: var(--c-border-strong);
}
.vis__arch-fan .vis__arch-leg {
  justify-self: center;
  width: 2px;
  height: 100%;
  background: var(--c-border-strong);
}
.vis__arch-row {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  width: 100%;
}
/* Narrow screens: three nodes side-by-side do not fit — stack them */
@media (max-width: 26em) {
  .vis__arch-fan { grid-template-columns: 1fr; height: 14px; }
  .vis__arch-fan::before { display: none; }
  .vis__arch-fan .vis__arch-leg { grid-column: 1; }
  .vis__arch-row { grid-template-columns: 1fr; }
}

.vis__caption {
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  color: var(--c-muted);
  line-height: 1.5;
}

/* ---- Framework link list (modernisation page) ---------------------------- */
.fw-links { margin: 0; padding: 0; list-style: none; }
.fw-links li + li { margin-top: var(--s-3); }
.fw-links a {
  display: flex;
  align-items: center;
  justify-content: s--c-ink-strong);
  font-size: var(--t-sm);
  font-weight: 650;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.fw-links a:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateX(3px);
}
.fw-links svg { flex: 0 0 auto; color: var(--brand-primary); }

/* ---- Related services ---------------------------------------------------- */
.rel-grid { display: grid; gap: var(--s-4); }
@media (min-width: 48em) { .rel-grid { grid-template-columns: repeat(3, 1fr); } }
.rel {
  position: relative;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.rel:hover, .rel:focus-within {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.rel__title { margin-bottom: var(--s-2); font-size: var(--t-md); }
.rel__link { color: inherit; text-decoration: none; }
.rel__link:hover { color: var(--brand-primary); }
.rel__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rel__desc { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }

@media (prefers-reduced-motion: reduce) {
  .rel:hover,
  .fw-links a:hover { transform: none; }
}

/* ==========================================================================
   15 SPECIALIST FRAMEWORK PAGES (Phase 6)
   Generic components shared by ASP.NET Zero / ABP.IO / Angular pages.
   No JavaScript, no images, no vendor logos.
   ========================================================================== */

/* ---- In-page service navigation (crawlable anchors, never tabs) ---------- */
.fw-nav {
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-soft);
}
.fw-nav__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) { .fw-nav__list { grid-template-columns: repeat(4, 1fr); } }

.fw-nav__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  min-height: 3.25rem;
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-ink-strong);
  font-size: var(--t-sm);
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
@media (min-width: 48em) {
  .fw-nav__link { border-bottom: 0; border-right: 1px solid var(--c-border); }
  .fw-nav__list > li:last-child .fw-nav__link { border-right: 0; }
}
.fw-nav__list > li:last-child .fw-nav__link { border-bottom: 0; }
/* Align the first item with the container text edge */
.fw-nav__list > li:first-child .fw-nav__link { padding-left: 0; }
.fw-nav__link:hover {
  background: var(--c-bg);
  box-shadow: inset 0 -2px 0 var(--brand-primary);
  color: var(--brand-primary);
}
.fw-nav__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--brand-primary);
}

/* ---- Specialist service block -------------------------------------------- */
.fw-svc { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 64em) {
  .fw-svc { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.fw-svc__num {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--brand-primary);
}
.fw-svc__copy h3 {
  margin-bottom: var(--s-5);
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.fw-svc__copy p { color: var(--c-muted); }
.fw-svc__copy p + p { margin-top: var(--s-4); }
.fw-svc__note {
  padding-left: var(--s-4);
  border-left: 2px solid var(--brand-accent);
}
.fw-svc__cta { margin: var(--s-6) 0 0; }

.fw-svc__aside {
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.section--soft .fw-svc__aside { background: var(--c-bg); }
.fw-svc__list-title {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.fw-svc__list { margin: 0; padding: 0; list-style: none; }
.fw-svc__list li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  font-size: var(--t-sm);
  color: var(--c-ink);
}
.fw-svc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.95em;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--brand-accent);
}

/* ---- Typography-only framework identifier (NOT a vendor logo) ------------ */
.fw-id {
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border);
  line-height: 1.05;
}
.fw-id__line {
  display: block;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand-dark);
}
/* #85C441 is 2.11:1 on white and fails even the 3:1 large-text threshold.
   The accessible interactive green keeps the two-tone effect legibly. */
.fw-id__line--2 { color: var(--brand-primary); }

/* ---- Conceptual layered stack visual ------------------------------------- */
.fw-stack {
  margin: 0;
  padding: var(--s-5);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.fw-stack__caption {
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.fw-stack__list { margin: 0; padding: 0; list-style: none; }
.fw-stack__layer {
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  text-align: center;
}
.fw-stack__label {
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--c-ink-strong);
}
.fw-stack__sub { font-size: var(--t-xs); color: var(--c-muted); }
/* Connector between layers */
.fw-stack__arrow {
  width: 2px;
  height: 14px;
  margin: 0 auto;
  background: var(--c-border-strong);
}
.fw-stack__note {
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-muted);
}

@media (min-width: 64em) {
  /* Aside is short relative to the copy column — sticky is safe here */
  .fw-svc__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* ---- Framework cards (Technologies overview) ------------------------------
   Four cards, two columns, two rows. Four across was rejected on purpose: at
   a 1440 container that leaves ~250px per card, narrower than the card title
   wants and too tight for a bullet list. 40em is the site's existing two-up
   breakpoint (the capability lists and the About split use the same one), so
   phones - including a 430px one - get full-width cards instead of two narrow
   columns, and the 2 x 2 shape begins where there is room for it. */
.fw-card-grid { display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .fw-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.fw-card:hover, .fw-card:focus-within {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.fw-card__title {
  margin-bottom: var(--s-3);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  letter-spacing: -0.02em;
}
.fw-card__link { color: inherit; text-decoration: none; }
.fw-card__link:hover { color: var(--brand-primary); }
/* Whole card is the click target; no nested links inside */
.fw-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fw-card__desc { margin: 0 0 var(--s-4); color: var(--c-muted); font-size: var(--t-sm); }
.fw-card__list {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--c-border);
  list-style: none;
}
.fw-card__list li {
  position: relative;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  font-size: var(--t-xs);
  color: var(--c-ink);
}
.fw-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 5px; height: 5px;
  border-radius: 2px;
  background: var(--brand-accent);
}
.fw-card__foot { margin: auto 0 0; }

@media (prefers-reduced-motion: reduce) {
  .fw-card:hover { transform: none; }
}
/* In a 2 x 2 grid the second row can end up shorter than the first. The cards
   already stretch to their row (align-items: stretch) and pin their own footer
   link with margin: auto, so the footers of a row always align; this makes the
   two rows themselves even, so the block reads as a grid rather than as two
   different heights stacked. */
@media (min-width: 40em) { .fw-card-grid .fw-card { height: 100%; } }

/* ==========================================================================
   16 STAFF AUGMENTATION AREA
   Capacity-oriented components. No photos, avatars, profiles or ratings.
   ========================================================================== */

/* ---- Specialist capacity cards --------------------------------------------
   Same 2 x 2 reasoning as the framework hub: four cards, two columns from
   40em, one column on a phone. */
.sa-card-grid { display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .sa-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40em) { .sa-card-grid .sa-card { height: 100%; } }

.sa-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sa-card:hover, .sa-card:focus-within {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
}
.sa-card__title {
  margin-bottom: var(--s-3);
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  letter-spacing: -0.02em;
}
.sa-card__desc { margin: 0 0 var(--s-4); color: var(--c-muted); font-size: var(--t-sm); }
.sa-card__list {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--c-border);
  list-style: none;
}
.sa-card__list li {
  position: relative;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  font-size: var(--t-xs);
  color: var(--c-ink);
}
.sa-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 5px; height: 5px;
  border-radius: 2px;
  background: var(--brand-accent);
}
.sa-card__cta { margin: auto 0 var(--s-3); }
.sa-card__alt { margin: 0; font-size: var(--t-xs); }
/* Standalone link — give it a practical touch target */
.sa-card__alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-muted);
}
.sa-card__alt a:hover { color: var(--brand-primary); }

/* ---- Capability list ------------------------------------------------------ */
.sa-work {
  display: grid;
  gap: var(--s-2) var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) { .sa-work { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .sa-work { grid-template-columns: repeat(3, 1fr); } }
.sa-work li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-sm);
  color: var(--c-ink);
}
.sa-work li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35em;
  width: 10px; height: 1px;
  background: var(--brand-primary);
}
.sa-note {
  max-width: 60ch;
  margin: var(--s-5) 0 0;
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ---- Abstract capacity visual (no people, no photos) --------------------- */
.sa-vis {
  margin: 0;
  padding: var(--s-5);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.sa-vis__caption {
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sa-vis__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s-3);
}
.sa-vis__box {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 650;
  color: var(--c-ink);
}
.sa-vis__box--accent { border-color: var(--brand-primary); color: var(--brand-primary); }
.sa-vis__op {
  align-self: center;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-muted);
}
.sa-vis__stem {
  display: block;
  width: 2px; height: 18px;
  margin: 0 auto;
  background: var(--c-border-strong);
}
.sa-vis__result {
  margin: 0;
  padding: var(--s-3);
  background: var(--brand-dark);
  color: #fff;
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sa-vis__note {
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-muted);
}

/* ---- Enquiry prompts (informational only — not a form) ------------------- */
.sa-prompts {
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.sa-prompts__title {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sa-prompts__list { margin: 0; padding: 0; list-style: none; counter-reset: sp; }
.sa-prompts__list li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  font-size: var(--t-sm);
  color: var(--c-ink);
  counter-increment: sp;
}
.sa-prompts__list li::before {
  content: counter(sp, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.75em;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--brand-primary);
}
.sa-prompts__foot { margin: var(--s-5) 0 0; }

/* ---- "Defined service instead?" cross-link ------------------------------- */
.sa-alt {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
@media (min-width: 60em) {
  .sa-alt { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4rem); }
}
.sa-alt__copy h2 { margin-bottom: var(--s-4); font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.sa-alt__copy p { max-width: 62ch; color: var(--c-muted); }
.sa-alt__copy p + p { margin-top: var(--s-3); }
.sa-alt__action { margin: 0; }

/* ==========================================================================
   17 ABOUT, OUR WORK & CONTACT (Phase 10)
   ========================================================================== */

/* ---- About: two ways we help --------------------------------------------- */
.about-split { display: grid; gap: var(--s-4); }
@media (min-width: 52em) { .about-split { grid-template-columns: repeat(2, 1fr); } }
.about-way {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.about-way__title { margin-bottom: var(--s-3); font-size: clamp(1.15rem, 2vw, 1.35rem); }
.about-way__desc { margin: 0 0 var(--s-4); color: var(--c-muted); font-size: var(--t-sm); }
.about-way__list {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--c-border);
  list-style: none;
}
.about-way__list li {
  position: relative;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  font-size: var(--t-sm);
  color: var(--c-ink);
}
.about-way__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.8em;
  width: 5px; height: 5px;
  border-radius: 2px;
  background: var(--brand-accent);
}
.about-way__cta { margin: auto 0 0; }
.about-note {
  max-width: 68ch;
  margin: var(--s-6) auto 0;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--c-muted);
}
.about-legal {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-sm);
  color: var(--c-muted);
  font-style: normal;          /* <address> defaults to italic */
  line-height: 1.7;
  overflow-wrap: anywhere;     /* a long registered office must wrap */
}
.about-legal strong { color: var(--c-ink); font-weight: 600; }
.about-legal-links {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ---- Our Work ------------------------------------------------------------ */
.work-note {
  max-width: 70ch;
  margin: 0;
  padding-left: var(--s-5);
  border-left: 2px solid var(--brand-accent);
  color: var(--c-muted);
}
.work-grid { display: grid; gap: var(--s-4); }
@media (min-width: 48em) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76em) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.work-card:hover, .work-card:focus-within {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-sm);
}
.work-card__title { margin-bottom: var(--s-3); font-size: var(--t-md); }
.work-card__desc { margin: 0 0 var(--s-4); color: var(--c-muted); font-size: var(--t-sm); }
.work-card__list {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--c-border);
  list-style: none;
}
.work-card__list li {
  position: relative;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  font-size: var(--t-xs);
  color: var(--c-ink);
}
.work-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 5px; height: 5px;
  border-radius: 2px;
  background: var(--brand-accent);
}
.work-card__foot { margin: auto 0 0; font-size: var(--t-sm); font-weight: 650; }
.work-card__foot a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  text-decoration: none;
}

/* ---- Contact layout ------------------------------------------------------ */
.contact-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 64em) {
  .contact-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
  .contact-aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.contact-main { min-width: 0; }

.contact-panel {
  padding: var(--s-5);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.contact-panel + .contact-panel { margin-top: var(--s-4); }
.contact-panel__title {
  margin: 0 0 var(--s-2);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-ink-strong);
}
.contact-panel__body { margin: 0; font-size: var(--t-sm); color: var(--c-muted); }

/* ---- Form ---------------------------------------------------------------- */
.form { max-width: 44rem; }
.field { margin-bottom: var(--s-5); }
.field__label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--c-ink-strong);
}
.field__req { font-weight: 400; color: var(--brand-primary); }
.field__opt { font-weight: 400; color: var(--c-muted); }

.field__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  font-size: 1rem; /* >=16px prevents iOS zoom-on-focus */
  color: var(--c-ink-strong);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input:hover { border-color: var(--c-ink-soft, var(--c-muted)); }
.field__input:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(47, 107, 51, 0.18);
}
.field__input[aria-invalid="true"] { border-color: var(--c-danger); }
.field__textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
/* Native arrow kept — no JS, no background image request */
.field__select { padding-right: var(--s-4); }

.field__help { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--c-muted); }
.field__error {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-danger);
}

/* Honeypot — removed from flow and from assistive tech */
.form-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-warning,
.form-privacy {
  max-width: 60ch;
  margin: 0 0 var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-muted);
}
.form-warning {
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg-soft);
  border-left: 2px solid var(--brand-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.form-actions { margin: var(--s-6) 0 0; }

/* ---- Server-rendered status messages ------------------------------------- */
.form-status {
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-lg);
  background: var(--c-bg-soft);
}
.form-status:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.form-status__title { margin: 0 0 var(--s-3); font-size: var(--t-md); }
.form-status--ok { border-left: 3px solid var(--brand-primary); }
.form-status--error { border-left: 3px solid var(--c-danger); }
.form-status--error .form-status__title { color: var(--c-danger); }
.form-status__list { margin: 0; padding-left: var(--s-5); font-size: var(--t-sm); }
.form-status__list li + li { margin-top: var(--s-2); }


/* ---------- 18 Legal pages ------------------------------------------------ */
/* Restrained, readable documents. No decoration, no new JS. */

.legal-meta {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-soft);
}
.legal-updated { margin: 0; font-size: var(--t-sm); color: var(--c-muted); }
.legal-updated strong { color: var(--c-ink); font-weight: 600; }

/* Table of contents */
.legal-toc {
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--c-border);
}
.legal-toc__title {
  margin: 0 0 var(--s-4);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.legal-toc__list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  display: grid;
  gap: var(--s-2) var(--s-6);
  font-size: var(--t-sm);
}
@media (min-width: 40em) {
  .legal-toc__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .legal-toc__list { grid-template-columns: repeat(3, 1fr); }
}
.legal-toc__list li { padding-left: .25rem; }
.legal-toc__list a {
  color: var(--c-accent);
  text-decoration: none;
  /* comfortable hit area without inflating line boxes */
  display: inline-block;
  padding-block: .2rem;
}
.legal-toc__list a:hover { text-decoration: underline; }

/* Same column as the rest of the site. .container already sets --container. */
.legal-container { max-width: var(--container); }
.legal-section { margin-top: var(--s-8); scroll-margin-top: 5rem; }
.legal-section:first-child { margin-top: 0; }
.legal-section > h2 {
  margin: 0 0 var(--s-4);
  font-size: var(--t-2xl);
  line-height: 1.25;
}
.legal-section h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--t-base);
  font-weight: 600;
}
.legal-section p { margin: 0 0 var(--s-3); max-width: none; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section code {
  font-family: var(--font-mono);
  font-size: .9em;
  padding: .1em .35em;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  /* long tokens must never force a horizontal scrollbar */
  overflow-wrap: anywhere;
}
.legal-list {
  margin: 0 0 var(--s-3);
  padding-left: 1.25rem;
  max-width: none;
  display: grid;
  gap: var(--s-2);
}
.legal-list li { padding-left: .25rem; }

/* External links carry a visible marker plus off-screen wording */
.legal-external { overflow-wrap: anywhere; }
.legal-external::after {
  content: " \2197";                /* north-east arrow */
  font-size: .85em;
  color: var(--c-muted);
}
.legal-external__hint {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Unresolved governing-law placeholder */
.legal-todo {
  display: inline-block;
  padding: .3rem .6rem;
  background: var(--c-bg-soft);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}

/* Company disclosure panel */
.legal-company {
  margin-top: var(--s-8);
  padding: var(--s-5);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.legal-company__title {
  margin: 0 0 var(--s-3);
  font-size: var(--t-base);
  font-weight: 600;
}
.legal-company > p,
.legal-company__note { max-width: none; }
.legal-company > p { margin: 0 0 var(--s-3); font-size: var(--t-sm); }
.legal-company__dl {
  margin: 0;
  display: grid;
  gap: var(--s-1) var(--s-4);
  font-size: var(--t-sm);
}
@media (min-width: 30em) {
  .legal-company__dl {
    grid-template-columns: minmax(8.5rem, auto) 1fr;
  }
}
.legal-company__dl dt { color: var(--c-muted); }
.legal-company__dl dd {
  margin: 0;
  color: var(--c-ink);
  /* a long registered office must wrap, never overflow */
  overflow-wrap: anywhere;
}
.legal-company__note {
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  color: var(--c-muted);
}

/* Cookie table */
.legal-table-wrap {
  margin: 0 0 var(--s-4);
  /* horizontal scroll is contained here, never on the document */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.legal-table {
  width: 100%;
  min-width: 43rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
  text-align: left;
}
/* Give each column a sensible share so the narrow ones stop squeezing.
   The Purpose column absorbs the remaining space. */
/* Fixed layout so the declared widths are honoured instead of being
   squeezed by the longest cell. Total = 44rem, matching min-width. */
.legal-table { table-layout: fixed; }
.legal-table th:nth-child(1), .legal-table td:nth-child(1) { width: 9rem; }
.legal-table th:nth-child(2), .legal-table td:nth-child(2) { width: 7rem; }
.legal-table th:nth-child(3), .legal-table td:nth-child(3) { width: 12.5rem; }
.legal-table th:nth-child(4), .legal-table td:nth-child(4) { width: 6rem; }
.legal-table th:nth-child(5), .legal-table td:nth-child(5) { width: 10rem; }
/* A cookie name is a single token — never break it across lines. */
.legal-table code { white-space: nowrap; overflow-wrap: normal; }
.legal-table__caption {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-muted);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.legal-table th,
.legal-table td {
  padding: var(--s-3) var(--s-4);
  vertical-align: top;
  border-bottom: 1px solid var(--c-border);
}
.legal-table thead th {
  font-weight: 600;
  color: var(--c-ink);
  background: var(--c-bg-soft);
  white-space: nowrap;
}
/* Tables read poorly at the prose measure, so on wide screens let the
   wrapper extend a little past it. Never wider than the container. */
@media (min-width: 64em) {
  /* the table needs a little more room than the prose measure */
  .legal-table-wrap { margin-inline: calc(-1 * var(--s-7)); }
}
.legal-table tbody th { font-weight: 600; }
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- 10 Utilities ------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mb-0 { margin-bottom: 0; }

/* ---- Phase 14.5 microinteractions ---------------------------------------
   Transform/opacity only, all disabled under prefers-reduced-motion by the
   global rule in section 11. Nothing here carries meaning.              */

/* Arrow links nudge on hover */
.link-arrow svg,
.btn svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg,
.btn:hover svg { transform: translateX(3px); }

/* Buttons gain a subtle press state */
.btn { transition: background-color var(--dur) var(--ease),
                   border-color var(--dur) var(--ease),
                   color var(--dur) var(--ease),
                   transform var(--dur-fast) var(--ease),
                   box-shadow var(--dur) var(--ease); }
.btn--primary:hover { box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); }

/* Framework cards lift on the dark band */
.fw { transition: border-color var(--dur) var(--ease),
                  background-color var(--dur) var(--ease),
                  transform var(--dur) var(--ease); }

/* The hero integration layer breathes very slowly. Decorative only, and the
   node is fully legible without it. */
@keyframes ek-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}
.arch__dot { animation: ek-pulse 3.2s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  .arch__dot { animation: none; }
  .link-arrow:hover svg, .btn:hover svg { transform: none; }
  .btn:active { transform: none; }
}

/* ---------- 11 Motion ---------------------------------------------------- */
/* Entrance: applied only when JS confirms support, so no-JS users see content. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Stagger without extra JS */
.js [data-reveal][data-reveal-delay="1"] { transition-delay: 60ms; }
.js [data-reveal][data-reveal-delay="2"] { transition-delay: 120ms; }
.js [data-reveal][data-reveal-delay="3"] { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .card--link:hover { transform: none; }
}

/* ==========================================================================
   19 HOMEPAGE — approved reference alignment
   The menu bar itself is global (.site-header): every page uses this
   lockup, type and button. Rules below stay on body.home so heroes,
   sections and the homepage measure are not copied onto inner pages.
   ========================================================================== */

/* One container for the header and the Framework/AI bands.
   Do not give the header its own max-width. 72rem = 1152px at 16px root.
   There is no 1400px container in this file. */
.home .site-header > .container,
.home .hero > .container,
.home #services > .container,
.home .fw-section > .container,
.home #ai > .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The page behind the sticky header is white. The pale wash is
   painted only on .hero, which starts after the header in normal flow. */
body.home { background-color: #ffffff; background-image: none; }

/* ---- Header: solid white bar, not part of the hero ---------------------- */
.home .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #ffffff;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid #CDD6C8;
  box-shadow: none;
}
.home .site-header__inner {
  min-height: 4.125rem;        /* 66px */
  padding-block: 0.5rem;
  background: transparent;
}
.home .brand--lockup {
  width: 140px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  line-height: 1;
}
.home .brand__logo { width: 100%; }
@media (min-width: 30em) { .home .brand--lockup { width: 142px; } }
@media (min-width: 62em) {
  .home .brand--lockup { width: 148px; }
  .home .site-nav__link,
  .home .site-nav__label,
  .home .nav-disclosure {
    min-height: 2.25rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1A211C;
  }
  .home .site-nav { gap: 1rem; }
  .home .site-nav__list { gap: 0.7rem; }
  .home .site-nav__cta .btn {
    min-height: 2.375rem;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
  }
}
@media (min-width: 62em) and (max-width: 73.75em) {
  .home .site-nav__label,
  .home .nav-disclosure { padding-inline: 0.4rem; font-size: 0.8125rem; }
  .home .site-nav__cta .btn { padding-inline: 0.7rem; }
}

/* ---- Hero: pale band begins only after the header ----------------------- */
.home .hero {
  position: relative;
  z-index: 0;
  margin: 0;
  /* Match .page-hero vertical padding. Type scale is unchanged. */
  padding: clamp(2.25rem, 4vw, 3.75rem) 0 clamp(2.75rem, 5.5vw, 5rem);
  border-bottom: 1px solid #D5DDD0;
  background-color: #EEF3E6;
  background-image: none;
  /* Contain the shared .hero::before (top: -30rem). overflow:visible let
     that wash paint into the header. */
  overflow: hidden;
  isolation: isolate;
}
.home .hero::before,
.home .hero::after {
  content: none;
  display: none;
  background: none;
  background-image: none;
}
.home .hero__inner {
  gap: 1.15rem;
  align-items: center;
}
.home .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
}
.home .hero__title {
  margin: 0;
  max-width: 16.2em;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #121612;
  text-wrap: wrap;
}
.home .hero__title-accent {
  color: var(--brand-primary);
  white-space: nowrap;
}
.home .hero__nl { display: inline; }
@media (min-width: 48em) {
  .home .hero__title { font-size: 2.125rem; }
}
@media (min-width: 62em) {
  .home .hero {
    display: flex;
    align-items: center;
    min-height: clamp(31.5rem, 39vw, 33rem);
  }
  .home .hero > .container { width: 100%; }
  .home .hero__title {
    max-width: none;
    font-size: 2.25rem;        /* 36px, fixed — does not grow with the viewport */
    line-height: 1.12;
  }
  .home .hero__line { white-space: normal; }
  .home .hero__nl {
    display: block;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }
  .home .hero__inner {
    grid-template-columns: minmax(0, 1fr) var(--page-hero-visual-width);
    column-gap: 1.75rem;
    row-gap: 0;
    align-items: center;
  }
  .home .hero__visual {
    justify-self: end;
    margin-inline: 0;
  }
  .home .arch__stem { height: 0.8rem; }
  .home .arch__fan { height: 0.85rem; margin-bottom: 0.7rem; }
  .home .arch__node { padding: 0.55rem 0.65rem; }
  .home .arch__leaf { padding: 0.42rem 0.28rem; }
}
@media (max-width: 22.99em) {
  .home .hero__title-accent { white-space: normal; }
}
.home .hero__lead {
  margin: 0;
  max-width: 31rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5C665F;
}
.home .hero__actions { gap: 0.6rem; margin-top: 0.1rem; }
.home .hero__actions .btn {
  min-height: 2.25rem;         /* 36px */
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}
.home .hero__visual {
  display: block;
  margin-inline: 0;
}

.home .hero__panel {
  color: var(--c-ink);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--page-hero-visual-pad);
  overflow: hidden;
  border: 1px solid rgba(40, 81, 40, 0.14);
  border-radius: var(--page-hero-visual-radius);
  background-color: #fff;
  background-image: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 36px -26px rgba(28, 58, 28, 0.45);
}
.home .hero__panel::before { content: none; display: none; background: none; }
.home .arch { padding: 0; }
.home .arch__node {
  justify-items: center;
  text-align: center;
  gap: 1px;
  padding: 0.42rem 0.55rem;
  background: #fff;
  border: 1px solid #E4E9E2;
  border-radius: 8px;
  box-shadow: none;
}
.home .arch__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-ink-strong);
}
.home .arch__meta { font-size: 0.625rem; color: #6A746E; }
.home .arch__node--lead {
  background: #fff;
  padding: 0.85rem 0.8rem;
}
.home .arch__node--lead .arch__label { font-size: 0.95rem; }
.home .arch__node--lead .arch__meta { font-size: 0.72rem; }
@media (min-width: 62em) {
  .home .arch__node--lead { padding: 1.05rem 0.95rem; }
}
.home .arch__node--core {
  border-color: #9BBF6A;
  background: #F4F8EE;
  box-shadow: none;
}
.home .arch__node--core .arch__label { color: var(--c-ink-strong); }
.home .arch__stem {
  height: 0.45rem;
  background: #D0D7CC;
}
.home .arch__fan { height: 0.55rem; margin-bottom: 0.5rem; }
.home .arch__fan::before,
.home .arch__leg { background: #D0D7CC; }
.home .arch__leaf {
  gap: 0;
  padding: 0.28rem 0.2rem;
  background: #fff;
  border: 1px solid #E4E9E2;
  border-radius: 8px;
  box-shadow: none;
}
.home .arch__leaf-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--c-ink-strong);
}
.home .arch__leaf-meta { font-size: 0.5625rem; color: #6A746E; }
.home .arch__leaf--ai {
  border-color: #D5E4C4;
  background: #F7FAF4;
}
.home .arch__leaf--ai .arch__leaf-label { color: var(--c-ink-strong); }

/* ---- Sections: compact professional density ------------------------------ */
.home .section { padding-block: clamp(2.35rem, 3.8vw, 3.6rem); }
.home .section__head {
  max-width: 46rem;
  margin-bottom: clamp(1.15rem, 2vw, 1.7rem);
}
.home .section__head h2,
.home .fw-section__head h2,
.home .ai-layout__copy h2 {
  max-width: none;
  font-size: clamp(1.65rem, 0.9vw + 1.25rem, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.home .section__head .lead,
.home .ai-layout__copy .lead {
  margin-top: 0.55rem;
  margin-bottom: 0;
  max-width: 62ch;
  font-size: 0.975rem;
  line-height: 1.6;
}
.home .fw-section__head { max-width: 44rem; }
.home .fw-section__head h2 { max-width: 18em; }

/* ---- What we build: white section, 2 + 3, aligned to the hero measure --- */
.home #services {
  background: #fff;
  padding-top: 3.5rem;         /* 56px; bottom padding stays on .home .section */
}
.home #services .section__head {
  max-width: none;
  margin-bottom: 2.15rem;      /* 34px between intro and cards */
}
.home #services .section__head h2 {
  max-width: none;
  margin-bottom: 0.7rem;
  font-size: 2rem;             /* 32px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.home #services .section__head .lead {
  max-width: 36.5rem;          /* wraps after "help" */
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.6;
}
.home .svc-grid { gap: 1.25rem; } /* 20px gutter, both rows */
.home .svc-grid--top { margin-bottom: 1.25rem; }
@media (min-width: 40em) and (max-width: 61.99em) {
  .home .svc-grid--bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
  .home #services .svc-grid--top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home #services .svc-grid--bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home .svc {
  min-height: 18.75rem;        /* 300px — third-row cards read taller than wide */
  padding: 1.25rem 1.15rem 1.15rem;
  border: 1px solid #E4E8E2;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.home .svc:hover,
.home .svc:focus-within {
  transform: none;
  border-color: #D5DDD4;
  box-shadow: none;
}
.home .svc--feature {
  min-height: 21rem;           /* 336px — tall relative to the half-width card */
  padding: 1.55rem 1.5rem 1.3rem;
  background: #fff;
  border-color: #E4E8E2;
  border-top: 2px solid var(--brand-primary);
}
.home .svc--feature::before { content: none; }
.home .svc--feature:hover,
.home .svc--feature:focus-within { border-top-color: var(--brand-primary); }
.home .svc--tint {
  background: #F2F7EC;
  border-color: #E0EAD6;
  border-top-color: var(--brand-primary);
}
.home .svc__num,
.home .svc--feature .svc__num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;              /* 36px on row 2 */
  height: 2.25rem;
  margin: 0 0 0.85rem;
  padding: 0;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.home .svc--feature .svc__num {
  width: 3.25rem;              /* 52px on row 1 */
  height: 3.25rem;
  margin-bottom: 1.15rem;
  font-size: 0.875rem;
}
.home .svc__title {
  margin-bottom: 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.home .svc--feature .svc__title { font-size: 1.125rem; } /* 18px */
.home .svc__desc,
.home .svc--feature .svc__desc {
  margin-bottom: 0.85rem;
  font-size: 0.875rem;         /* 14px */
  line-height: 1.55;
  color: #5C665F;
}
.home .svc__tags { gap: 0.35rem; margin-bottom: 0; }
.home .svc__tags li {
  padding: 0.16rem 0.55rem;
  border: 1px solid #E1E6DE;
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;          /* 12px */
  line-height: 1.3;
  color: #5A645E;
}
.home .svc--tint .svc__tags li { background: #fff; }
.home .svc__cta {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ---- Framework band: solid deep green, compact 2 x 2 -------------------- */
.home .fw-section { background: var(--brand-dark); }
.home .fw-section::before { display: none; }
.home .fw-grid { gap: 0.85rem; }
.home .fw {
  padding: 1.05rem 1.1rem 0.95rem;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.home .fw:hover,
.home .fw:focus-within {
  transform: none;
  border-color: rgba(149, 206, 87, 0.55);
  background: rgba(255, 255, 255, 0.03);
}
.home .fw__num {
  margin-bottom: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.home .fw__title {
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
}
.home .fw__desc {
  margin-bottom: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.home .fw__services { padding-top: 0.65rem; }
.home .fw__services li { font-size: 0.8125rem; }
.home .fw__services li + li { margin-top: 0.28rem; }

/* ---- AI band ------------------------------------------------------------ */
.home #ai { background: var(--surface-dark); }
.home .ai-layout {
  gap: clamp(1.35rem, 2.5vw, 2.5rem);
  align-items: center;
}
@media (min-width: 64em) {
  .home .ai-layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(15.5rem, 0.68fr);
  }
}
.home .ai-em { color: var(--brand-accent-text); }
.home .ai-list {
  gap: 0.75rem 1.15rem;
  margin: 1.05rem 0 0;
}
.home .ai-list li { padding-left: 1.15rem; }
.home .ai-list li::before {
  top: 0.42em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-accent);
}
.home .ai-list strong { font-size: 0.875rem; }
.home .ai-list span { font-size: 0.75rem; line-height: 1.45; }
.home .section--dark .flow {
  padding: 0.9rem 0.95rem 0.55rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}
.home .flow__caption {
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  letter-spacing: 0.07em;
}
.home .flow__list li { padding: 0.5rem 0 0.5rem 2rem; }
.home .flow__step { font-size: 0.875rem; }
.home .flow__note { font-size: 0.75rem; }

/* ---- How we work -------------------------------------------------------- */
.home .process-section { background: #fff; }
.home .process-section .section__head { margin-bottom: 1.35rem; }
.home .process-section .steps {
  grid-template-columns: 1fr;
  gap: 0;
}
.home .process-section .step {
  border-top: 0;
  padding: 0 0 1.15rem 1.7rem;
}
.home .process-section .step__num { margin-bottom: 0.25rem; }
.home .process-section .step__title { font-size: 1.05rem; margin-bottom: 0.25rem; }
.home .process-section .step__desc { font-size: 0.875rem; max-width: 36ch; }
@media (max-width: 59.99em) {
  .home .process-section .step::before {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--brand-primary);
    border-radius: 50%;
    background: #fff;
  }
  .home .process-section .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    bottom: 0.15rem;
    left: 0.36rem;
    width: 1px;
    height: auto;
    border-radius: 0;
    background: #D5DDD0;
  }
}
@media (min-width: 60em) {
  .home .process-section .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
  }
  .home .process-section .steps::before {
    top: 0.55rem;
    left: 0.45rem;
    right: calc(25% - 0.45rem);
    height: 1px;
    opacity: 1;
    background: #D5DDD0;
  }
  .home .process-section .step {
    padding: 1.85rem 0.75rem 0 0;
  }
  .home .process-section .step::before {
    top: 0.15rem;
    left: 0;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid var(--brand-primary);
    background: #fff;
  }
  .home .process-section .step::after {
    top: 0.4rem;
    left: 0.28rem;
    bottom: auto;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--brand-primary);
  }
  .home .process-section .step:last-child::before { border-color: var(--brand-primary); }
  .home .process-section .step:last-child::after { background: var(--brand-primary); }
}

/* ---- Technology expertise ----------------------------------------------- */
.home #technology { background: var(--surface-dark); }
.home #technology .section__head { margin-bottom: 1.25rem; }
.home #technology .tech-grid { gap: 1.05rem 1.5rem; }
.home #technology .tech-group__title {
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--brand-accent-text);
}
.home #technology .tech-tags { gap: 0.4rem; }
.home #technology .tech-tags li {
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.92);
}

/* ---- Built around the work: editorial 2 x 2, left rule only ------------- */
.home #why-ekstruh { background: #fff; }
.home .why-grid {
  gap: 0;
  border: 0;
}
.home .why {
  padding: 1.05rem 0 1.05rem var(--s-5);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 2px solid var(--brand-soft-strong);
}
.home .why__title { margin-bottom: 0.3rem; font-size: 1.02rem; }
.home .why__desc { font-size: 0.875rem; line-height: 1.55; max-width: 42ch; }
@media (min-width: 40em) {
  .home .why-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.75rem;
  }
  .home .why {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0.15rem;
    padding-left: var(--s-5);
  }
  .home .why:nth-child(n+3) {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
  }
}

/* Closing band uses the shared .cta rules so the homepage matches every page. */

/* Homepage footer uses the global .site-footer rules in section 08. */

@media (prefers-reduced-motion: reduce) {
  .home .svc:hover,
  .home .fw:hover,
  .home .svc:focus-within,
  .home .fw:focus-within { transform: none; }
}

/* ---------- Privacy choices ------------------------------------------------
   Banner and preferences only. Does not restyle the approved page chrome. */
.consent-banner[hidden],
.consent-backdrop[hidden],
.consent-dialog[hidden] { display: none !important; }

.consent-banner {
  position: fixed;
  z-index: 80;
  /* Match the site column. Do not pin both edges to the viewport: that
     stretches the bar wider than --container. */
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  width: auto;
  max-width: calc(var(--container) - (var(--gutter) * 2));
  min-width: 0;
  box-sizing: border-box;
  background: #fff;
  color: var(--c-ink);
  border: 1px solid var(--c-border-strong);
  border-top: 2px solid var(--brand-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-height: min(70vh, 18rem);
  overflow: auto;
}
.consent-banner__inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem 0.75rem;
}
.consent-banner h2 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--c-ink);
}
.consent-dialog h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--c-ink);
}
.consent-banner p {
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.45rem;
  color: var(--c-ink);
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.consent-dialog p {
  margin: 0 0 0.75rem;
  color: var(--c-ink);
  font-size: 0.875rem;
  line-height: 1.5;
}
.consent-banner__policy { margin-bottom: 0.5rem; }
.consent-banner__policy a { font-weight: 600; }
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.consent-banner .consent-actions .btn,
.consent-dialog .consent-actions .btn {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 100%;
  min-height: 2.125rem;
  padding: 0.35rem 0.7rem;
  border-color: var(--c-border-strong);
  background: #fff;
  color: var(--c-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
.consent-banner .consent-actions .btn:hover,
.consent-dialog .consent-actions .btn:hover {
  border-color: var(--c-ink);
  background: var(--c-bg-soft);
  color: var(--c-ink);
}
.consent-banner .btn--ghost,
.consent-dialog .btn--ghost {
  border-color: var(--c-border-strong);
  background: #fff;
  color: var(--c-ink);
}
.consent-banner .btn--ghost:hover,
.consent-dialog .btn--ghost:hover {
  border-color: var(--c-ink);
  background: var(--c-bg-soft);
  color: var(--c-ink);
}
.consent-backdrop {
  position: fixed;
  z-index: 190;
  inset: 0;
  background: rgba(15, 21, 17, 0.48);
}
.consent-dialog {
  position: fixed;
  z-index: 200;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: min(34rem, calc(100vh - 1.5rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.15rem 1.15rem 1.05rem;
  background: #fff;
  color: var(--c-ink);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.consent-dialog h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}
.consent-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem;
  background: var(--brand-soft);
  border-radius: var(--radius);
}
.consent-cat p { margin: 0; color: var(--c-muted); }
.consent-status {
  flex: 0 0 auto;
  margin: 0;
  color: var(--brand-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.consent-note { color: var(--c-muted); }
html.consent-modal-open { overflow: hidden; }
@media (max-width: 52em) {
  .consent-banner .consent-actions { flex-direction: column; }
  .consent-banner .consent-actions .btn {
    width: 100%;
    flex: 1 1 auto;
  }
}
@media (max-width: 40em) {
  .consent-banner {
    max-height: min(78vh, 22rem);
  }
  .consent-banner__inner { padding: 0.65rem 0.75rem 0.7rem; }
  .consent-dialog .consent-actions { flex-direction: column; }
  .consent-dialog .consent-actions .btn,
  .consent-actions .btn { width: 100%; flex-basis: auto; }
  .consent-cat { flex-direction: column; gap: 0.4rem; }
}
@media print {
  .consent-banner,
  .consent-backdrop,
  .consent-dialog,
  #consent-live { display: none !important; }
}

/* ---- Industries and collaborative models -------------------------------- */
.ind-index {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) { .ind-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ind-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ind-index a {
  display: block;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  color: var(--c-ink-strong);
  font-weight: 650;
  text-decoration: none;
}
.ind-index a:hover { border-color: var(--brand-primary); }

.ind-grid { display: grid; gap: var(--s-4); }
@media (min-width: 52em) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ind-card,
.model-article { scroll-margin-top: calc(var(--header-h) + 1rem); }
.ind-card h3 { margin-bottom: var(--s-2); font-size: var(--t-md); }
.ind-card h4 {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.ind-card p,
.ind-card li { color: var(--c-muted); font-size: var(--t-sm); }
.ind-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.model-article {
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--c-border);
}
.model-article:first-child { border-top: 0; padding-top: 0; }
.model-article h3 { margin-bottom: var(--s-2); }
.model-kicker {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--brand-primary);
}
.model-points {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
@media (min-width: 48em) { .model-points { grid-template-columns: 1fr 1fr; } }
.model-points h4 { margin-bottom: var(--s-2); font-size: var(--t-sm); }
.model-points p,
.model-points li { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }
.model-points ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.3rem;
}

.engage-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
}
.engage-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.engage-table th,
.engage-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--c-border);
}
.engage-table tr:last-child th,
.engage-table tr:last-child td { border-bottom: 0; }
.engage-table thead th {
  background: var(--c-bg-soft);
  font-weight: 650;
}
.engage-table tbody th {
  font-weight: 650;
  white-space: nowrap;
  background: var(--c-bg);
}
.engage-note { margin: var(--s-5) 0 0; color: var(--c-muted); }

.faq-list { display: grid; gap: var(--s-5); margin: 0; }
.faq-item h3 { margin-bottom: var(--s-2); font-size: var(--t-md); }
.faq-item p { margin: 0; color: var(--c-muted); max-width: 68ch; }

/* One size per heading level. Later component rules were shrinking or
   enlarging the same tag; this wins so every H1, every H2 and every H3 match.
   Footer column labels and the consent UI stay compact — they are interface
   labels, and the banner must not grow back into a full-size heading. */
h1 { font-size: var(--t-3xl) !important; }
h2 { font-size: var(--t-2xl) !important; }
h3 { font-size: var(--t-lg) !important; }
.site-footer h2 { font-size: 0.9375rem !important; }
.consent-banner h2 { font-size: 0.95rem !important; }
.consent-dialog h2 { font-size: 1.05rem !important; }
.consent-dialog h3 { font-size: 0.95rem !important; }

.footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.footer-list .footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-ink-strong);
  text-decoration: none;
}
.footer-list .footer-social__link:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  text-decoration: none;
}

/* ---- Shared hero visual system. Outer size is the variables above.
   Internal artwork differs by .hv--* . The box does not. -------------------- */
.page-hero__visual {
  padding: 0;
  overflow: hidden;
}
.page-hero__visual::before { content: none; }
.page-hero__visual > .hv {
  width: 100%;
  height: 100%;
}
.hv {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: #285128;
  font-family: var(--font-sans);
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}
.hv__glow,
.hv__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hv__glow {
  background: radial-gradient(closest-side at 62% 42%, rgba(133, 196, 65, 0.28), rgba(133, 196, 65, 0.06) 54%, transparent 76%);
}
.hv__grid {
  background-image:
    linear-gradient(rgba(40, 81, 40, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 81, 40, 0.055) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(72% 68% at 58% 42%, #000 12%, transparent 78%);
          mask-image: radial-gradient(72% 68% at 58% 42%, #000 12%, transparent 78%);
}
.hv__pane {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
  padding: 0.5rem 0.55rem 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(40, 81, 40, 0.1);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #F7F9F6 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 16px 30px -18px rgba(28, 58, 28, 0.42),
    0 2px 6px rgba(13, 17, 23, 0.04);
}
.hv__pane--a { z-index: 1; }
.hv__pane--b { z-index: 2; }
.hv__pane--c { z-index: 3; animation: hv-float 8.5s ease-in-out infinite; }
.hv__pane--d { z-index: 4; }
.hv__pane.is-dark {
  background: linear-gradient(165deg, #2C4A32 0%, #14251A 70%);
  border-color: rgba(133, 196, 65, 0.28);
  color: #fff;
  box-shadow:
    0 18px 30px -16px rgba(16, 26, 20, 0.62),
    0 0 0 1px rgba(133, 196, 65, 0.14);
}
.hv__pane.is-flat {
  background: #EEF0ED;
  border-color: rgba(40, 81, 40, 0.08);
  box-shadow: none;
}
.hv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 0.7rem;
}
.hv b {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}
.hv__mark {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 4px;
  background: #285128;
  box-shadow: 0 0 0 3px rgba(133, 196, 65, 0.28);
}
.is-dark .hv__mark { background: #85C441; box-shadow: none; }
.hv__live {
  width: 0.42rem;
  height: 0.42rem;
  margin-left: auto;
  border-radius: 50%;
  background: #85C441;
  box-shadow: 0 0 0 3px rgba(133, 196, 65, 0.22);
  animation: hv-pulse 3.4s ease-out infinite;
}
.hv__line,
.hv__ghost {
  display: block;
  height: 0.28rem;
  border-radius: 99px;
  background: #E4E8E2;
}
.hv__line--k { width: 42%; height: 0.38rem; background: #285128; }
.hv__line--m { width: 78%; }
.hv__line--s { width: 54%; }
.hv__line--on { width: 68%; background: #85C441; }
.is-dark .hv__line { background: rgba(255, 255, 255, 0.2); }
.is-dark .hv__line--on,
.is-dark .hv__line--k { background: #85C441; }
.is-flat .hv__line { background: #D5D8D4; }
.hv__ghost {
  width: 70%;
  margin-top: 0.8rem;
  background: rgba(40, 81, 40, 0.08);
}
.hv__split {
  display: grid;
  grid-template-columns: 0.32fr 1fr;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-height: 0;
}
.hv__rail,
.hv__tree {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0.15rem 0.1rem;
}
.hv__rail i,
.hv__tree i {
  display: block;
  height: 0.32rem;
  border-radius: 99px;
  background: #E4E8E2;
}
.hv__rail i.is-on,
.hv__tree i.is-on { width: 80%; background: #285128; }
.hv__rail i:nth-child(2) { width: 62%; }
.hv__rail i:nth-child(3) { width: 70%; }
.hv__rail i:nth-child(4) { width: 48%; }
.hv__tree i.is-in { width: 70%; margin-left: 0.35rem; }
.hv__canvas { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; min-height: 0; }
.hv__chart,
.hv__spark { display: block; width: 100%; flex: 1 1 auto; min-height: 1.6rem; margin-top: auto; }
.hv__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: 0.55rem 1fr 0.7fr;
  gap: 0.32rem;
  flex: 1 1 auto;
  min-height: 0;
}
.hv__block { border-radius: 7px; background: #F2F5EF; }
.hv__block--nav { grid-column: 1 / -1; background: #E7F0DC; }
.hv__block--hero { background: linear-gradient(160deg, rgba(133, 196, 65, 0.35), #F7F9F6 70%); }
.hv__block--accent { background: #285128; }
.hv__swatch {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  background: linear-gradient(135deg, #85C441, #285128);
}
.hv__code { justify-content: center; gap: 0.32rem; padding: 0.55rem 0.6rem; }
.hv__code i {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: rgba(133, 196, 65, 0.9);
}
.hv__code i:nth-child(2) { width: 64%; background: rgba(255, 255, 255, 0.28); }
.hv__code i:nth-child(3) { width: 80%; background: rgba(133, 196, 65, 0.4); }
.hv__prompt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hv__prompt span { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.38); }
.hv__prompt i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #85C441; }
.hv__out { display: flex; flex-direction: column; gap: 0.28rem; }
.hv__step,
.hv__row,
.hv__tests span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.hv__step::before,
.hv__row.is-on i { background: #85C441; box-shadow: 0 0 0 3px rgba(133, 196, 65, 0.2); }
.hv__row.is-on em { width: 86%; background: #D7E8C0; }
.hv__row i,
.hv__tests i,
.hv__tick {
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #E4E8E2;
}
.hv__step.is-on::before,
.hv__tests i,
.hv__tick { background: #85C441; box-shadow: 0 0 0 3px rgba(133, 196, 65, 0.2); }
.hv__step { height: 0.42rem; }
.hv__step::after,
.hv__row em,
.hv__tests em {
  content: "";
  display: block;
  height: 0.28rem;
  width: 70%;
  border-radius: 99px;
  background: #E6EBE3;
}
.hv__step.is-on::after { width: 82%; background: #D5E8BE; }
.hv__rows,
.hv__tests { display: flex; flex-direction: column; gap: 0.32rem; }
.hv__bus {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.hv__bus i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #85C441;
  box-shadow: 0 0 0 3px rgba(133, 196, 65, 0.18);
}
.hv__bus span { flex: 1; height: 2px; border-radius: 99px; background: rgba(40, 81, 40, 0.28); }
.hv__table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28rem;
  margin-top: 0.2rem;
}
.hv__table i { display: block; height: 0.7rem; border-radius: 5px; background: #F2F5EF; }
.hv__table i:first-child { background: #E7F0DC; }
.hv__mods,
.hv__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.32rem;
  flex: 1 1 auto;
}
.hv__mods i,
.hv__mosaic i {
  border-radius: 8px;
  background: #F2F5EF;
  min-height: 1.3rem;
}
.hv__mods i.is-on,
.hv__mosaic i.is-on {
  background: linear-gradient(160deg, rgba(133, 196, 65, 0.45), #F7F9F6 72%);
  box-shadow: inset 0 0 0 1px rgba(40, 81, 40, 0.08);
}
.hv__mosaic { grid-template-rows: 1.4fr 1fr; }
.hv__mosaic i.is-on { grid-row: span 2; }
.hv__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.32rem;
  flex: 1 1 auto;
  min-height: 0;
}
.hv__col {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.28rem;
  border-radius: 8px;
  background: rgba(40, 81, 40, 0.04);
}
.hv__col i {
  display: block;
  flex: 1 1 0.72rem;
  min-height: 0.72rem;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04);
}
.hv__col i.is-on { box-shadow: inset 2px 0 0 #85C441; }
.hv__people { display: flex; align-items: center; }
.hv__people i {
  width: 0.72rem;
  height: 0.72rem;
  margin-left: -0.22rem;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #8AA08A;
}
.hv__people i:first-child { margin-left: 0; background: #285128; }
.hv__people i:nth-child(2) { background: #85C441; }
.hv__mile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.hv__mile::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  top: 50%;
  height: 2px;
  background: rgba(40, 81, 40, 0.16);
}
.hv__mile i {
  position: relative;
  z-index: 1;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #E4E8E2;
  box-shadow: 0 0 0 3px #fff;
}
.hv__mile i.is-on { background: #85C441; }
.hv__pipe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  margin: 0.2rem 0;
}
.hv__pipe::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  height: 2px;
  background: rgba(40, 81, 40, 0.16);
}
.hv__pipe { position: relative; }
.hv__pipe i {
  position: relative;
  z-index: 1;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(40, 81, 40, 0.2);
}
.hv__pipe i.is-on { background: #85C441; border-color: #285128; }
.hv__diff { display: flex; flex-direction: column; gap: 0.26rem; }
.hv__diff i { display: block; height: 0.32rem; border-radius: 4px; background: #F2F5EF; }
.hv__diff i.is-add { width: 78%; background: rgba(133, 196, 65, 0.55); }
.hv__diff i:nth-child(odd) { width: 92%; }
.hv__phone { gap: 0.28rem; }
.hv__phone .hv__block { min-height: 1.1rem; flex: 1 1 auto; }
.hv__ring { width: 2.4rem; height: 2.4rem; margin: auto; }
.hv__wave {
  display: flex;
  align-items: flex-end;
  gap: 0.16rem;
  height: 1.7rem;
  margin-top: auto;
}
.hv__wave i {
  display: block;
  flex: 1 1 0;
  border-radius: 99px;
  background: rgba(133, 196, 65, 0.9);
}
.hv__wave i:nth-child(1) { height: 28%; background: rgba(255, 255, 255, 0.35); }
.hv__wave i:nth-child(2) { height: 62%; }
.hv__wave i:nth-child(3) { height: 100%; }
.hv__wave i:nth-child(4) { height: 44%; background: rgba(255, 255, 255, 0.45); }
.hv__wave i:nth-child(5) { height: 78%; }
.hv__wave i:nth-child(6) { height: 36%; }
.hv__wave i:nth-child(7) { height: 58%; background: rgba(255, 255, 255, 0.35); }
.hv__fields { display: flex; flex-direction: column; gap: 0.32rem; }
.hv__fields span {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: center;
}
.hv__fields i,
.hv__fields em { display: block; height: 0.36rem; border-radius: 99px; }
.hv__fields i { background: #285128; }
.hv__fields em { background: #E4E8E2; }
.hv__fields span:nth-child(1) em { width: 78%; background: #D7E8C0; }
.hv__fields span:nth-child(2) em { width: 62%; }
.hv__fields span:nth-child(3) em { width: 84%; }
.hv__fields span:nth-child(4) em { width: 48%; }
.hv__search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.2rem;
  padding: 0.2rem 0.45rem;
  border-radius: 99px;
  background: #F4F7F2;
  box-shadow: inset 0 0 0 1px rgba(40, 81, 40, 0.08);
}
.hv__search i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #285128;
}
.hv__search span {
  flex: 1;
  height: 0.28rem;
  border-radius: 99px;
  background: #D7E8C0;
}
.hv__bubble {
  display: block;
  width: 78%;
  height: 0.7rem;
  border-radius: 8px 8px 8px 3px;
  background: #F2F5EF;
}
.hv__bubble.is-me {
  width: 64%;
  margin-left: auto;
  border-radius: 8px 8px 3px 8px;
  background: #E7F0DC;
}
.hv__bubble.is-short { width: 46%; height: 0.55rem; }
.hv__tick {
  width: 0.7rem;
  height: 0.7rem;
  margin: 0.15rem auto 0;
  border-radius: 50%;
  background: #85C441;
  box-shadow: 0 0 0 4px rgba(133, 196, 65, 0.2);
}
.hv--contact .hv__pane--c {
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 50%;
}

/* Compositions. Positions only — the outer box size is shared. */
.hv--home .hv__pane--a { left: 28%; top: 7%; width: 54%; height: 34%; }
.hv--home .hv__pane--b { left: 5%; top: 24%; width: 66%; height: 68%; }
.hv--home .hv__pane--c { right: 4%; top: 8%; width: 36%; height: 34%; }

.hv--services .hv__pane--a { left: 18%; top: 6%; width: 58%; height: 28%; }
.hv--services .hv__pane--b { left: 6%; top: 16%; width: 78%; height: 70%; }
.hv--services .hv__pane--c { right: 5%; bottom: 8%; width: 38%; height: 30%; }

.hv--web .hv__pane--a { left: 16%; top: 4%; width: 60%; height: 26%; }
.hv--web .hv__pane--b { left: 7%; top: 8%; width: 74%; height: 60%; }
.hv--web .hv__pane--c { left: 4%; bottom: 6%; width: 44%; height: 34%; }
.hv--web .hv__pane--d { right: 4%; top: 16%; width: 30%; height: 26%; }

.hv--ai .hv__pane--a { left: 6%; top: 10%; width: 36%; height: 28%; }
.hv--ai .hv__pane--b { left: 12%; top: 16%; width: 72%; height: 62%; }
.hv--ai .hv__pane--c { right: 5%; bottom: 8%; width: 42%; height: 26%; justify-content: center; }

.hv--systems .hv__pane--a { left: 4%; top: 8%; width: 44%; height: 40%; }
.hv--systems .hv__pane--c { right: 4%; top: 14%; width: 40%; height: 36%; }
.hv--systems .hv__pane--b { left: 16%; top: 40%; width: 64%; height: 46%; z-index: 4; }

.hv--modernise .hv__pane--a { left: 6%; top: 14%; width: 58%; height: 62%; }
.hv--modernise .hv__pane--b { right: 5%; top: 22%; width: 58%; height: 62%; }

.hv--support .hv__pane--a { left: 22%; top: 6%; width: 52%; height: 28%; }
.hv--support .hv__pane--b { left: 6%; top: 16%; width: 70%; height: 68%; }
.hv--support .hv__pane--c { right: 4%; bottom: 8%; width: 38%; height: 30%; }

.hv--tech .hv__pane--a { left: 10%; top: 58%; width: 78%; height: 30%; }
.hv--tech .hv__pane--b { left: 14%; top: 40%; width: 72%; height: 28%; }
.hv--tech .hv__pane--c { left: 18%; top: 20%; width: 66%; height: 28%; }
.hv--tech .hv__pane--d { left: 24%; top: 8%; width: 54%; height: 18%; padding: 0.35rem 0.45rem; }
.hv--tech .hv__pane--d .hv__block { height: 100%; }

.hv--core .hv__pane--a { left: 16%; bottom: 6%; width: 68%; height: 28%; }
.hv--core .hv__pane--b { left: 6%; top: 8%; width: 72%; height: 66%; }
.hv--core .hv__pane--c { right: 4%; top: 18%; width: 34%; height: 22%; padding: 0.45rem 0.5rem; }

.hv--zero .hv__pane--a { left: 20%; top: 6%; width: 56%; height: 26%; }
.hv--zero .hv__pane--b { left: 6%; top: 16%; width: 70%; height: 68%; }
.hv--zero .hv__pane--c { right: 4%; bottom: 8%; width: 42%; height: 32%; }

.hv--abp .hv__pane--a { right: 6%; bottom: 8%; width: 48%; height: 32%; }
.hv--abp .hv__pane--b { left: 18%; top: 8%; width: 70%; height: 70%; }
.hv--abp .hv__pane--c { left: 4%; top: 14%; width: 22%; height: 68%; padding: 0.45rem 0.35rem; }
.hv--abp .hv__rail--tall { height: 100%; justify-content: space-between; }

.hv--angular .hv__pane--a { left: 20%; top: 6%; width: 48%; height: 24%; }
.hv--angular .hv__pane--b { left: 5%; top: 14%; width: 68%; height: 72%; padding: 0.4rem; }
.hv--angular .hv__pane--c { right: 4%; bottom: 8%; width: 30%; height: 48%; }

.hv--staff .hv__pane--a { left: 18%; top: 5%; width: 52%; height: 22%; }
.hv--staff .hv__pane--b { left: 5%; top: 14%; width: 78%; height: 68%; }
.hv--staff .hv__pane--c { right: 5%; bottom: 6%; width: 40%; height: 30%; }

.hv--dedicated .hv__pane--a { left: 16%; top: 6%; width: 50%; height: 22%; }
.hv--dedicated .hv__pane--b { left: 6%; top: 14%; width: 70%; height: 70%; }
.hv--dedicated .hv__pane--c { right: 4%; bottom: 8%; width: 40%; height: 32%; }

.hv--ai-talent .hv__pane--a { left: 4%; top: 16%; width: 48%; height: 62%; }
.hv--ai-talent .hv__pane--b { right: 5%; top: 10%; width: 52%; height: 58%; }
.hv--ai-talent .hv__pane--c { right: 8%; bottom: 8%; width: 32%; height: 24%; }

.hv--cloud .hv__pane--a { left: 12%; top: 8%; width: 60%; height: 24%; }
.hv--cloud .hv__pane--b { left: 6%; top: 18%; width: 76%; height: 62%; }
.hv--cloud .hv__pane--c { right: 4%; bottom: 7%; width: 38%; height: 28%; }

.hv--qa .hv__pane--a { left: 18%; top: 6%; width: 50%; height: 22%; }
.hv--qa .hv__pane--b { left: 5%; top: 14%; width: 68%; height: 70%; }
.hv--qa .hv__pane--c { right: 4%; bottom: 8%; width: 34%; height: 36%; align-items: center; justify-content: center; }

.hv--industries .hv__pane--a { left: 4%; top: 8%; width: 50%; height: 46%; }
.hv--industries .hv__pane--b { right: 4%; top: 8%; width: 44%; height: 36%; }
.hv--industries .hv__pane--c { left: 16%; bottom: 6%; width: 56%; height: 44%; }
.hv--industries .hv__block--accent { height: 0.7rem; margin-top: auto; border-radius: 6px; }

.hv--models .hv__pane--a { left: 14%; top: 5%; width: 58%; height: 22%; }
.hv--models .hv__pane--b { left: 5%; top: 16%; width: 74%; height: 64%; }
.hv--models .hv__pane--c { right: 4%; bottom: 6%; width: 42%; height: 32%; }
.hv--models .hv__cols { grid-template-columns: 1fr 1fr; }

.hv--work .hv__pane--a { left: 6%; top: 10%; width: 52%; height: 58%; }
.hv--work .hv__pane--b { right: 5%; top: 20%; width: 56%; height: 56%; }
.hv--work .hv__pane--c { right: 8%; bottom: 6%; width: 28%; height: 24%; align-items: center; justify-content: center; }

.hv--about .hv__pane--a { left: 12%; top: 12%; width: 62%; height: 46%; transform: rotate(-3deg); }
.hv--about .hv__pane--b { left: 22%; top: 24%; width: 58%; height: 48%; }
.hv--about .hv__pane--c { right: 8%; bottom: 10%; width: 36%; height: 28%; }

.hv--ai-app .hv__pane--a { left: 5%; top: 12%; width: 34%; height: 42%; }
.hv--ai-app .hv__pane--b { left: 14%; top: 16%; width: 72%; height: 66%; }
.hv--ai-app .hv__pane--c { right: 4%; bottom: 7%; width: 38%; height: 32%; }

.hv--agent .hv__pane--a { left: 8%; top: 8%; width: 40%; height: 28%; }
.hv--agent .hv__pane--b { left: 10%; top: 18%; width: 70%; height: 58%; }
.hv--agent .hv__rows { flex: 1 1 auto; justify-content: space-between; }
.hv--agent .hv__row { align-items: center; }
.hv--agent .hv__pane--c { right: 4%; bottom: 8%; width: 34%; height: 28%; align-items: center; justify-content: center; }

.hv--voice .hv__pane--a { right: 6%; top: 8%; width: 36%; height: 30%; }
.hv--voice .hv__pane--b { left: 6%; top: 22%; width: 68%; height: 58%; justify-content: center; }
.hv--voice .hv__pane--c { right: 5%; bottom: 8%; width: 42%; height: 28%; justify-content: flex-end; }

.hv--doc .hv__pane--a { left: 5%; top: 8%; width: 46%; height: 58%; }
.hv--doc .hv__pane--b { right: 5%; top: 16%; width: 58%; height: 48%; }
.hv--doc .hv__fields { flex: 1 1 auto; justify-content: space-between; }
.hv--doc .hv__pane--c { right: 10%; bottom: 8%; width: 3.2rem; height: 3.2rem; padding: 0; border-radius: 50%; align-items: center; justify-content: center; }

.hv--search .hv__pane--a { left: 8%; top: 6%; width: 42%; height: 30%; }
.hv--search .hv__pane--b { left: 6%; top: 14%; width: 70%; height: 54%; }
.hv--search .hv__rows { flex: 1 1 auto; justify-content: space-between; }
.hv--search .hv__pane--c { right: 4%; bottom: 8%; width: 36%; height: 34%; }

.hv--insight .hv__pane--a { left: 6%; top: 10%; width: 40%; height: 32%; }
.hv--insight .hv__pane--b { left: 12%; top: 14%; width: 74%; height: 62%; }
.hv--insight .hv__pane--c { right: 4%; bottom: 7%; width: 40%; height: 32%; }

.hv--contact .hv__pane--a { left: 10%; top: 10%; width: 62%; height: 42%; }
.hv--contact .hv__pane--b { left: 18%; top: 28%; width: 68%; height: 52%; justify-content: center; }
.hv--contact .hv__pane--c { right: 8%; bottom: 10%; }

@media (max-width: 47.99em) {
  .hv__pane--d { display: none; }
  .hv b { font-size: 0.58rem; letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
  .hv__pane--c,
  .hv__live { animation: none; }
}
@keyframes hv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes hv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(133, 196, 65, 0.38); }
  70% { box-shadow: 0 0 0 6px rgba(133, 196, 65, 0); }
}