/* ===========================================================
   VERAXIS · FOUNDATION STYLESHEET
   Single source of truth for page structure. Cowork links this
   and does not edit it. Page-specific CSS goes in the page,
   never in here, and never overrides a rule in here.

   Contents
   1  Reset and tokens
   2  Grid
   3  Type scale and measure
   4  Wrapping
   5  Intro block
   6  Cards and rows
   7  Buttons
   8  Sections and rhythm
   9  Tables
   10 Diagram utilities
   11 Site chrome
   12 Breakpoint
   13 Listing controls and detail pages
   14 Inline-markup compat
   =========================================================== */


/* --- 1. RESET AND TOKENS ---------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }        /* non-negotiable: percentage widths break without it */

:root {
  /* colour and type tokens live in brand.css. Diagram-only colours stay here. */
  --ice:    #C7EBFF;   /* occasional light band */
  --blue:   #2151FF;   /* diagrams only */
  --sky:    #21AFFF;   /* diagrams only */

  /* spacing. Five values. Every gap on the page is one of these. */
  --sp-section: 88px;
  --sp-block:   40px;
  --sp-group:   24px;
  --sp-el:      16px;
  --sp-tight:    8px;

  /* grid */
  --container: 1120px;
  --page-pad:    40px;
  --gutter:      32px;

  /* chrome. The logo is the constraint, not the bar.
     The blob mark breaks up below 70px: its swoosh hairlines
     thin out and the counters fill in. 70px is the floor.
     Nav height is therefore logo + clear space, and the footer
     padding is cut to keep the bottom band from ballooning. */
  --logo-h:    70px;
  --nav-h:     96px;
  --foot-pad:  26px;
}

html { scroll-behavior: smooth; }

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

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--link-light); text-decoration: none; }   /* violet on light; links on navy set var(--link-dark) */
a:hover { color: var(--navy); }

/* the signature: 5px pink rule at the very top of every page */
.edge { height: 5px; background: var(--pink); }


/* --- 2. GRID ---------------------------------------------- */
/* 1120 container, 40px page padding, 1040 of content,
   12 columns of 57.3px, 32px gutters.
   Every block spans whole columns and starts on a column edge.
   No decimal fr values. No per-section grid definitions. */

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.c12 { grid-column: 1 / -1; }
.c8  { grid-column: span 8; }
.c7  { grid-column: span 7; }
.c6  { grid-column: span 6; }
.c5  { grid-column: span 5; }
.c4  { grid-column: span 4; }
.c3  { grid-column: span 3; }

/* THE TRAP. An 8-column intro followed by 4-column cards lets
   auto-placement pull the first card up beside the heading.
   Card rows therefore always get their own full-width wrapper. */
.row {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--gutter);
  align-items: stretch;         /* cards in a row are the same height */
}
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* minmax(0,1fr) not 1fr: 1fr has a min-content floor, so long
   words push a column wider and the row stops being even. */


/* --- 3. TYPE SCALE AND MEASURE ---------------------------- */
/* Seven steps, no half-pixels, no clamp() with a vw term.
   Measures in ch so line count survives a type-size change.
   Measure against the RENDERED width, not the declared max-width:
   inside a 4-column card the padding leaves about 190px, so a
   22ch max-width never binds. When they disagree, step the type
   DOWN rather than cutting the copy further. */

.t-display { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 48px; line-height: 1.1; letter-spacing: var(--track-xl);  max-width: 26ch; }
.t-h2      { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 34px; line-height: 1.18; letter-spacing: var(--track-h2); max-width: 34ch; }
.t-h3      { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 22px; line-height: 1.2;  max-width: 26ch; }
.t-h4      { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 18px; line-height: 1.3;  max-width: 20ch; }
.t-lead    { font-size: 18px; line-height: 1.6;  max-width: 58ch; color: var(--grey); }
.t-body    { font-size: 16px; line-height: 1.6;  max-width: 70ch; }
.t-cap     { font-size: 14px; line-height: 1.5;  max-width: 60ch; color: var(--grey); }

.ey {
  font-family: var(--font-h);
  font-weight: var(--fw-heavy);
  font-size: 12px;
  letter-spacing: .16em;        /* the only place tracking is allowed */
  text-transform: uppercase;
  color: var(--label);
}


/* --- 4. WRAPPING ------------------------------------------ */
/* Balance every heading, pretty every paragraph, and bind the
   final two words of anything 34px or larger in the HTML:
   <h2 class="t-h2">Fix the right&nbsp;thing.</h2>
   Two lines maximum for a heading or lead, three for card body.
   If it wraps further the copy is too long: cut it. Never
   narrow the column and never widen past 75ch to force it. */

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, dd, figcaption   { text-wrap: pretty; hyphens: none; }


/* --- 5. INTRO BLOCK -------------------------------------- */
/* Same three parts in the same order at the top of every
   section: eyebrow, heading, lead. That repeated left edge is
   what makes a page read as built. Spans the full row so it
   cannot pull a card up beside it. */

.intro {
  grid-column: 1 / -1;
  margin-bottom: var(--sp-tight);
}
.intro .ey { display: block; }
.intro > :where(h1, h2) { margin: var(--sp-tight) 0 12px; }

/* an aside beside the intro is a deliberate 8 + 4, and only in
   the hero. Everywhere else the intro owns its row. */
.intro-8 { grid-column: span 8; margin-bottom: var(--sp-tight); }
.aside {
  grid-column: span 4;
  border-left: 1px solid var(--line);
  padding-left: var(--sp-group);
}
.s-navy .aside { border-left-color: rgba(var(--muted-rgb), .3); }


/* --- 6. CARDS AND ROWS ----------------------------------- */
/* Square corners, hairline border, no radius, ever.
   White on cream, cream on white, navy2 on navy. */

.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: var(--sp-group);
  display: flex;
  flex-direction: column;
  min-width: 0;                 /* lets a long word wrap instead of widening the column */
}
.s-cream .card  { background: #fff;         border-color: var(--line); }
.s-white .card  { background: var(--surface); border-color: var(--line); }
.s-navy  .card  { background: var(--panel); border-color: rgba(var(--muted-rgb), .3); color: #fff; }

.card-lead  { border-top: 4px solid var(--violet); }   /* the emphasised card in a row */
.card-layer { border-left: 4px solid var(--violet); }  /* a step in a sequence */

/* the action or footnote pins to the bottom so a row ends level */
.card .act { margin-top: auto; padding-top: var(--sp-el); }

/* card headings in a row: give them all the same min-height so
   the row aligns whether a heading runs to one or two lines.
   Otherwise one long service name offsets every card beside it. */
.row .card > .t-h3 { min-height: 2.4em; }
.row .card > .t-h4 { min-height: 1.3em; }

/* card body measures, set from the real rendered width */
.card .t-body { max-width: 46ch; }              /* in a 6-column card */
.row-3 .card .t-body,
.row-4 .card .t-body { max-width: 34ch; }       /* in a 4- or 3-column card */

/* in 3- and 4-up cards the 22px heading cannot hold one line.
   Use .t-h4 (18px) there. This enforces it. */
.row-3 .card > .t-h3,
.row-4 .card > .t-h3 { font-size: 18px; line-height: 1.3; max-width: 20ch; }


/* --- 7. BUTTONS ------------------------------------------ */
/* A label is a single unwrappable unit. A button is sized BY its
   label, never pinned to a fixed height with a wrappable label
   inside: a wrapped word escapes the border. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;          /* non-negotiable */
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 24px;
  border: 0;
  border-radius: 0;             /* square. Hard rule. */
  cursor: pointer;
  text-decoration: none;
  transition: background .16s, color .16s, border-color .16s;
}

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

.btn-secondary { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; border-color: transparent; }

.btn-ghost     { background: transparent; color: #fff; border: 1.5px solid rgba(var(--muted-rgb), .5); }
.btn-ghost:hover { background: var(--violet); color: #fff; border-color: transparent; }

.btns { display: flex; gap: var(--sp-el); flex-wrap: wrap; align-items: center; }

/* form controls inherit the body face; square, hairline, pink focus */
button, input, textarea, select { font-family: inherit; border-radius: 0; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--violet); outline-offset: -2px; }
input::placeholder, textarea::placeholder { color: #a5b0bf; }


/* --- 8. SECTIONS AND RHYTHM ------------------------------ */
/* Alternate cream, white and navy so the page has pace.
   Never more than two or three light sections without a navy
   break. One padding value, not four. */

section { padding: var(--sp-section) 0; }

.s-cream { background: var(--surface); color: var(--navy); }
.s-white { background: #fff; color: var(--navy); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.s-navy  { background: var(--navy); color: #fff; }

.s-navy .ey       { color: var(--accent); }
.s-navy .t-lead   { color: #cdd8e6; }
.s-navy .t-body   { color: #cdd8e6; }
.s-navy .t-cap    { color: var(--muted); }
.s-navy a         { color: var(--accent); }

/* ONE AXIS PER SECTION. A section is left-aligned or centred,
   never both. A left-aligned heading over a centred diagram
   gives the reader two axes and nothing to track down.
   Centring is a whole-section opt-in, for the closing CTA only,
   where nothing sits beside it. */
section > .wrap { text-align: left; }

.s-centred > .wrap { text-align: center; }
.s-centred > .wrap > * { margin-left: auto; margin-right: auto; }
.s-centred .btns { justify-content: center; }


/* --- 9. TABLES ------------------------------------------- */
/* Navy header with white text, never yellow. Square corners. */

.tbl { width: 100%; border: 1px solid var(--line); border-collapse: collapse; }
.tbl thead th {
  background: var(--navy); color: #fff; text-align: left;
  font-family: var(--font-h); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 18px;
}
.tbl td { border-top: 1px solid var(--line); padding: 14px 18px; font-size: 15px; line-height: 1.5; }


/* --- 10. DIAGRAM UTILITIES ------------------------------- */
/* Diagrams are laid out on the grid, not centred with
   margin:auto. Decoration may taper the CONTAINER; the copy is
   then budgeted to the NARROWEST row. Never the other way
   round, and never nowrap or overflow:hidden on content. */

.diagram { grid-column: span 8; display: flex; flex-direction: column; gap: var(--sp-tight); }

.step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);   /* never a hard px column */
  gap: var(--sp-el);
  align-items: baseline;
  padding: 16px 22px;
  background: rgba(255, 255, 255, .06);
  border-left: 4px solid rgba(var(--accent-rgb), .6);
}
.step .n { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 16px; color: var(--accent); }
.step .l { font-size: 15px; color: var(--muted); min-width: 0; }
.step .l b { font-family: var(--font-h); font-weight: 700; font-size: 16px; color: #fff; }

.step-entry { background: var(--panel); border-left-color: var(--accent); }
.step-entry .n { color: var(--accent); }

/* the hull: taper the RIGHT edge only, so every row keeps the
   same left edge as the heading above it. Budget each row's
   copy to its own width, tightening as it narrows. */
.taper > :nth-child(1) { width: 100%; }   /* ~57 characters */
.taper > :nth-child(2) { width:  95%; }   /* ~54 */
.taper > :nth-child(3) { width:  90%; }   /* ~50 */
.taper > :nth-child(4) { width:  85%; }   /* ~47 */
.taper > :nth-child(5) { width:  80%; }   /* ~43 */

.connector { width: 1px; height: 20px; background: rgba(var(--muted-rgb), .4); margin-left: 12px; }


/* --- 11. SITE CHROME ------------------------------------- */
/* Nav and footer are structure, not page content, so they live
   here and no page redefines them. Both sit on navy and both
   carry the logo at --logo-h. Use the trimmed logo asset
   (assets/veraxis-logo-trim.png): the untrimmed file has about
   16% transparent padding, so a 70px box renders a 53px mark. */

.nav { background: var(--navy); }
.nav-sticky { position: sticky; top: 0; z-index: 50; }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

/* the mark is sized by HEIGHT only. Never set its width: the
   blob is 80:70 and pinning both axes stretches it. */
.logo { display: block; flex: none; }   /* flex: none stops a narrow bar squeezing the mark sideways */
.logo img,
img.logo { display: block; height: var(--logo-h); width: auto; }

.nav-links { display: flex; gap: 30px; align-items: center; margin-left: auto; }

/* CTA and burger sit outside the links so the CTA stays in the bar on mobile */
.nav-end { display: flex; align-items: center; gap: 12px; margin-left: 30px; flex: none; }
.nav-burger { display: none; }
.nav-links a { color: #e4ebf3; font-family: var(--font-b); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: #fff; }
.nav-links a[aria-current] {
  color: #fff;
  border-bottom: 2px solid var(--pink);
  padding-bottom: 3px;
}

/* dropdown under a nav item. Hover/focus opens; label still navigates. */
.nav-links .has-menu { position: relative; }
.nav-links .has-menu > a { display: inline-flex; align-items: center; gap: 6px; }
.menu-caret {
  display: inline-block; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .15s ease;
}
.has-menu:hover .menu-caret,
.has-menu:focus-within .menu-caret { transform: translateY(1px) rotate(225deg); }

.menu {
  position: absolute;
  top: 100%;
  left: -18px;
  background: var(--panel);
  border-top: 2px solid var(--pink);
  padding: 14px 0;
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  z-index: 60;
}
.has-menu:hover .menu,
.has-menu:focus-within .menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu a {
  display: block; padding: 10px 22px;
  color: #e4ebf3; font-family: var(--font-b);
  font-size: 15px; font-weight: 500;
  white-space: nowrap;
}
.menu a.menu-svc { display: flex; align-items: center; gap: 12px; }
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
/* current page inside a dropdown: pink pulse dot */
.menu a[aria-current] {
  position: relative; color: #fff;
  border-bottom: 0; padding-bottom: 10px;
  background: rgba(255, 255, 255, .04);
}
.menu a[aria-current]::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--accent);
  animation: menu-pulse 2s ease-out infinite;
}
@keyframes menu-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .menu a[aria-current]::before { animation: none; } }

.site-foot {
  background: var(--navy-deep);
  color: var(--muted);
  padding: var(--foot-pad) 0;
}
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: #fff; }

/* a footer that carries the newsletter block needs a top opening;
   the bottom stays at --foot-pad so the logo band reads tight. */
.site-foot-lead { padding-top: var(--sp-block); }
.site-foot-lead .foot-sign {
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(var(--muted-rgb), .2);
}
.site-foot .foot-base { align-items: center; }
.site-foot-lead .foot-base { padding-top: 22px; }

/* nav CTA is a size down from a body button so it sits inside the bar */
.nav-cta { height: 42px; padding: 0 18px; font-size: 14px; }

/* footer registration line, with the utility links above it */
.foot-reg { font-size: 14px; text-align: right; }
.foot-links { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.foot-links a { font-family: var(--font-h); font-weight: 700; font-size: 14px; color: #fff; }
.foot-links a:hover { color: var(--accent); }


/* --- 12. BREAKPOINT ------------------------------------- */
/* One switch, at 820px. Sizes step; they do not scale
   continuously. A heading that resizes continuously reflows
   continuously, which is where random orphans come from. */

@media (max-width: 820px) {
  :root { --sp-section: 56px; --page-pad: 24px; --gutter: 24px; --nav-h: 88px; }

  /* the logo does NOT shrink. 70px is a floor, not a starting
     point, so the links move into a panel behind the burger. */
  .nav-end { margin-left: auto; }
  .nav-cta { padding: 0 14px; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px; flex: none;
    background: transparent; border: 1.5px solid rgba(var(--muted-rgb), .5); cursor: pointer;
  }
  .nav-burger span { display: block; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
  .nav[data-open] .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav[data-open] .nav-burger span:nth-child(2) { opacity: 0; }
  .nav[data-open] .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--panel); border-top: 2px solid var(--pink);
    padding: 8px 0 24px;
    max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
  }
  .nav[data-open] .nav-links { display: flex; }
  .nav-links a { display: block; padding: 14px 24px; font-size: 18px; }
  .nav-links a[aria-current] { border-bottom: 0; padding-bottom: 14px; box-shadow: inset 3px 0 0 var(--pink); }
  .nav-links .has-menu > a { display: flex; }
  .nav-links .menu-caret { display: none; }
  .nav-links .menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border-top: 0; box-shadow: none; padding: 0 0 8px; min-width: 0;
  }
  .nav-links .menu a { padding: 11px 24px 11px 40px; font-size: 15px; color: var(--muted); white-space: normal; }
  .nav-links .menu a[aria-current] { color: #fff; box-shadow: none; padding-bottom: 11px; }
  .nav-links .menu a[aria-current]::before { left: 24px; }
  html.nav-locked { overflow: hidden; }
  .foot-reg { text-align: left; }
  .foot-links { justify-content: flex-start; }

  .grid > *,
  .row  > *      { grid-column: 1 / -1; }
  .row,
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr; }

  .intro-8, .aside, .diagram { grid-column: 1 / -1; }
  .aside {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: var(--sp-group);
  }
  .s-navy .aside { border-top-color: rgba(var(--muted-rgb), .3); }

  .t-display { font-size: 34px; }
  .t-h2      { font-size: 28px; }

  /* the hull squares up rather than tapering into nothing */
  .taper > * { width: 100% !important; }
}

@media print {
  .edge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  section { padding: 32px 0; }
}


/* [hidden] must beat an inline display, or a panel with display:flex
   on it can never be closed. */
[hidden] { display: none !important; }


/* --- 13. LISTING CONTROLS -------------------------------- */
/* Filter chips, card tags and layer badges. These carry a
   data-on attribute rather than a class so the filter script
   only ever sets one attribute per control. */

.vx-chip, .vx-tag, .vx-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  transition: background .16s, color .16s, border-color .16s;
}

.vx-chip {
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 500;
  padding: 9px 14px;
  background: #fff;
  color: var(--label);
  border: 1px solid var(--line);
}
.vx-chip[data-on="1"] { font-weight: 700; background: var(--navy); color: #fff; border-color: var(--navy); }

.vx-tag {
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 9px;
  background: var(--surface);
  color: var(--grey);
  border: 1px solid var(--line);
}
.vx-tag[data-on="1"] { font-weight: 700; background: var(--navy); color: #fff; border-color: var(--navy); }

.vx-badge {
  justify-content: center;
  padding: 4px 10px;
  font-family: var(--font-h);
  font-weight: var(--fw-heavy);
  font-size: 12px;
  background: #fff;
  color: var(--violet);
  border: 1.5px solid var(--violet);
}
.vx-badge[data-on="1"] { background: var(--violet); color:#fff; }

/* the detail page rail: 9 + 3, body 774px, rail 252px */
.detail-main { grid-column: span 9; min-width: 0; }
.detail-rail {
  grid-column: span 3;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  border-left: 1px solid var(--line);
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
@media (max-width: 820px) {
  .detail-main, .detail-rail { grid-column: 1 / -1; }
  .detail-rail {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 24px;
  }
}

/* article and case-study prose. The only place a content column
   is styled by element rather than inline: the body comes from
   markdown, so there are no attributes to hang a style on. */
.prose { max-width: 66ch; display: flex; flex-direction: column; gap: 26px; }
.prose > p { font-size: 18px; line-height: 1.7; color: var(--intro); }
.prose > p.lede { font-size: 20px; line-height: 1.65; font-weight: 500; color: var(--navy); }
.prose > h2 { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 28px; line-height: 1.2; margin-top: 14px; }
.prose > h3 { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 22px; line-height: 1.3; margin-top: 10px; }
.prose > ul, .prose > ol { display: flex; flex-direction: column; gap: 12px; padding-left: 22px; }
.prose > ul { list-style: disc; }
.prose > ol { list-style: decimal; }
.prose li { font-size: 18px; line-height: 1.7; color: var(--intro); }
.prose blockquote { border-left: 3px solid var(--violet); padding: 4px 0 4px 24px; }
.prose blockquote p { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 22px; line-height: 1.4; max-width: 34ch; }
.prose .callout { background: var(--surface); border: 1px solid var(--line); padding: 24px 28px; }
.prose .callout p { font-size: 18px; line-height: 1.65; font-style: italic; color: #41597a; max-width: 52ch; }
.prose img { width: 100%; height: auto; border: 1px solid var(--line); }
.prose .table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; line-height: 1.5; color: var(--intro); }
.prose th { background: var(--navy); color: #fff; text-align: left; font-family: var(--font-h); font-weight: 700; padding: 10px 12px; }
.prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:nth-child(even) td { background: var(--surface); }
.prose td:first-child { font-weight: 700; color: var(--navy); }
.prose .callout .btn { margin-top: 16px; font-style: normal; }
/* Phones: wide tables already scroll sideways inside .table-wrap. Say so, and keep
   the row labels pinned on the left so each row still makes sense mid-scroll. */
@media (max-width: 820px) {
  .prose .table-wrap::before {
    content: "Swipe to see all columns \2192"; display: block; position: sticky; left: 0;
    font-family: var(--font-h); font-weight: 700; font-size: 14px; color: var(--grey); margin-bottom: 8px;
  }
  .prose th:first-child, .prose td:first-child { position: sticky; left: 0; z-index: 1; min-width: 110px; box-shadow: 1px 0 0 var(--line); }
  .prose td:first-child { background: #fff; }
  .prose tbody tr:nth-child(even) td:first-child { background: var(--surface); }
}

/* Phones: bigger tap areas for footer links, and nothing smaller than 12px.
   (11px labels are written into the pages, so this lifts them here.) */
@media (max-width: 820px) {
  .foot-links { gap: 0 22px; }
  .foot-links a { display: inline-block; padding: 11px 0; }
  [style*="font-size:11px"] { font-size: 12px !important; }
  .cs-strip-label, .vx-fact-k, .vx-card-status, .aiv-badge, .aiv-anno .t { font-size: 12px !important; }
}

.prose details.text-version { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
.prose details.text-version summary { cursor: pointer; list-style: none; font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 18px; color: var(--navy); }
.prose details.text-version summary::-webkit-details-marker { display: none; }
.prose details.text-version summary::after { content: " +"; color: var(--violet); }
.prose details.text-version[open] summary::after { content: " \2212"; }
.prose .text-version > div { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.prose .text-version h2 { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 22px; line-height: 1.25; margin-top: 10px; }
.prose .text-version p { font-size: 16px; line-height: 1.7; color: var(--intro); }


/* --- 14. INLINE-MARKUP COMPAT ---------------------------- */
/* Page bodies converted from the mockups carry inline styles and
   data-* hooks rather than classes. These are the only rules that
   reach into them, and only at the breakpoint, where an inline
   style cannot respond. Anything new should use the classes above
   and this section should shrink over time, never grow. */

@media (max-width: 1080px) {
  [data-pillars] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 820px) {
  [data-grid]      { gap: 24px !important; }
  [data-grid] > *  { grid-column: 1 / -1 !important; }
  [data-sub],
  [data-pillars],
  [data-scope]     { grid-template-columns: 1fr !important; }
  [data-display]   { font-size: 34px !important; }
  [data-h2]        { font-size: 28px !important; }
  [data-section]   { padding: 56px 0 !important; }
  [data-wrap]      { padding: 0 24px !important; }
  [data-aside] {
    justify-content: flex-start !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(var(--muted-rgb), .3) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
  }
}

/* Hero heights. One fixed height per tier, content centred, so every page
   starts its content in the same place. Top nav pages use -top, service
   layer pages use -layer. Home has its own hero. Mobile heights stay flexible. */
header.vx-hero { display: flex; align-items: center; }
header.vx-hero > [data-wrap] { width: 100%; }
header.vx-hero-top   { min-height: 360px; }
header.vx-hero-layer { min-height: 320px; }
@media (max-width: 820px) {
  header.vx-hero-top, header.vx-hero-layer { min-height: 0; }
}

/* Homepage only: darker hero and nav. var(--navy-deep) is for the homepage hero,
   its nav and the footer. Nowhere else. */
.nav.nav-home { background: var(--navy-deep); }
.home-door { transition: transform .15s ease; }
.home-door:hover { transform: translateY(-3px); }
@media (max-width: 820px) { .home-boat, [data-hero-art], [data-desktop-only] { display: none !important; } }   /* hero illustrations and desktop-only extras */

/* Home hero three-point strip. Phones: a short stacked list with gold square
   bullets (pink is for actions only) instead of one wrapping line with dividers. */
@media (max-width: 820px) {
  .home-proof { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 22px 0 26px !important; }
  .home-proof > li[aria-hidden] { display: none !important; }
  .home-proof > li { display: flex; align-items: center; gap: 12px; }
  .home-proof > li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--accent); }
}

/* Tap-to-open sections (assets/fold.js). Phones only: the heading stays,
   the body opens on tap. Used for the Home "Why us" cards. */
@media (max-width: 820px) {
  [data-fold] { gap: 0 !important; }
  [data-fold-item] { padding: 0 !important; }
  [data-fold-item] + [data-fold-item] { border-top-width: 1px !important; border-top-color: var(--line) !important; }
  [data-fold-head] {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 0 !important; padding: 18px 20px; cursor: pointer; font-size: 18px !important;
  }
  [data-fold-head]::after {
    content: ""; flex: none; width: 8px; height: 8px;
    border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet);
    transform: translateY(-3px) rotate(45deg); transition: transform .15s ease;
  }
  [data-fold-item][data-open] [data-fold-head]::after { transform: translateY(2px) rotate(225deg); }
  [data-fold-body] { display: none; margin: 0 !important; padding: 0 20px 20px; }
  [data-fold-item][data-open] [data-fold-body] { display: block; }
}

/* Related work and writing (service, partner and sector pages). Mobile: a titles-only
   list. No image, no standfirst, rows joined into one block. Desktop keeps the cards. */
@media (max-width: 820px) {
  [data-rel] { gap: 0 !important; }
  [data-rel] [data-rel-img], [data-rel] [data-rel-sf] { display: none !important; }
  [data-rel] [data-rel-card] > div { padding: 16px 18px !important; gap: 6px !important; }
  [data-rel] [data-rel-card] + [data-rel-card] { border-top: 0 !important; }
}

/* The three advantage images (home and about). Desktop: three columns, image on top.
   Mobile: one compact row each, small image left, words right. Saves about 70% of the height. */
@media (max-width: 820px) {
  [data-usp] { gap: 12px !important; }
  [data-usp-item] {
    display: grid !important;
    grid-template-columns: 88px 1fr; column-gap: 18px; align-items: center; align-content: center;
    text-align: left !important; padding: 16px !important;
  }
  [data-usp-item] > img { grid-row: 1 / span 3; width: 88px !important; margin: 0 !important; }
  [data-usp-item] > div { min-height: 0 !important; }
}

/* Filter chips when they sit inside a navy hero */
header .vx-chip { background: transparent; color: #fff; border-color: rgba(var(--muted-rgb), .5); }
header .vx-chip[data-on="1"] { background: var(--violet); border-color: var(--violet); color:#fff; }
.vx-filterbar .vx-chip { background: transparent; color: #fff; border-color: rgba(var(--muted-rgb), .5); }
.vx-filterbar .vx-chip[data-on="1"] { background: var(--violet); border-color: var(--violet); color:#fff; }

/* List bullet: a solid pink square, sized to the text */
.vx-bullet { display: block; width: 8px; height: 8px; background: var(--violet); margin-top: .6em; margin-top: calc(.5lh - 4px); }


/* Keep a short line on one line on desktop; let it wrap on phones */
@media (min-width: 821px) { .vx-oneline { white-space: nowrap; } }

/* Home: why-us four cards drop to two on tablet */
@media (min-width: 821px) and (max-width: 1080px) { .home-why4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* AI page: service cards three across on tablet */
@media (min-width: 821px) and (max-width: 1080px) { .ai-svc { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* Case study page: context strip, one centred column, figures and quote inside the text */
.cs-strip { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0; }
.cs-strip-row { display: flex; flex-wrap: wrap; gap: 14px 40px; padding: 18px 0; font-size: 14px; color: var(--intro); }
.cs-strip-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-strip-label { font-family: var(--font-h); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8f9bad; }
.cs-strip-item a { color: var(--intro); border-bottom: 1px solid var(--line); }
.cs-strip-item a:hover { color: var(--navy); border-bottom-color: var(--violet); }
.cs-strip-share { margin-left: auto; }
.cs-body { max-width: 720px; margin: 0 auto; }
.cs-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--navy); color: #fff; padding: 26px 8px; margin: 10px 0; }
.cs-figure { padding: 0 20px; border-left: 1px solid rgba(var(--muted-rgb),.28); }
.cs-figure:first-child { border-left: 0; }
.cs-figure-value { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 28px; line-height: 1.1; color: var(--accent); }
.cs-figure-label { font-size: 14px; line-height: 1.45; color: #cdd8e6; margin-top: 8px; }
.cs-quote { background: var(--surface); border-left: 3px solid var(--violet); padding: 26px 30px; margin: 14px 0 0; }
.cs-quote p { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 22px; line-height: 1.4; color: var(--navy); }
.cs-quote-by { font-size: 15px; color: var(--grey); margin-top: 12px; }
@media (max-width: 720px) {
  .cs-figures { grid-template-columns: 1fr; padding: 8px 20px; }
  .cs-figure { border-left: 0; border-top: 1px solid rgba(var(--muted-rgb),.28); padding: 16px 0; }
  .cs-figure:first-child { border-top: 0; }
  .cs-strip-share { margin-left: 0; }
}
.cs-related { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.cs-related a { display: flex; flex-direction: column; gap: 4px; color: var(--navy); }
.cs-related-title { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 16px; line-height: 1.35; }
.cs-related-meta { font-size: 14px; color: #8391a4; }

/* ---------- Events: webinars and roundtables on the article layout ---------- */
.vx-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vx-fact-k { font-family: var(--font-h); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8f9bad; }
.vx-fact-v { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 18px; line-height: 1.3; color: var(--navy); }
.vx-ev-btn { display: inline-flex; align-items: center; white-space: nowrap; background: var(--pink); color:#fff; font-family: var(--font-h); font-weight: 700; font-size: 15px; padding: 14px 24px; }
.vx-ev-btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--navy); padding: 13px 23px; }
.vx-ev-block { margin-top: var(--sp-block); padding-top: var(--sp-block); border-top: 1px solid var(--line); max-width: 66ch; }
.vx-ev-h { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 28px; line-height: 1.2; margin-bottom: var(--sp-group); }
.vx-ev-p { font-size: 18px; line-height: 1.7; color: var(--intro); }
.vx-hosts { display: flex; flex-direction: column; gap: var(--sp-group); }
.vx-host { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; }
.vx-host img, .vx-host-ph { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); }
.vx-hosts-wide .vx-host { grid-template-columns: 120px 1fr; }
.vx-host img.vx-host-logo { width: 120px; height: 64px; object-fit: contain; background: #fff; padding: 10px; }
.vx-host-pair { display: flex; flex-direction: column; gap: 6px; }
.vx-host-pair img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); }
.vx-host-ph { display: flex; align-items: center; justify-content: center; background: var(--surface); font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 24px; color: var(--navy); }
.vx-host-name { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 18px; line-height: 1.3; }
.vx-host-role { font-size: 15px; color: var(--grey); margin-top: 2px; }
.vx-host-bio { font-size: 16px; line-height: 1.65; color: var(--intro); margin-top: 10px; }
.vx-downloads { display: flex; flex-direction: column; gap: 12px; }
.vx-download { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); padding: 16px 20px; color: var(--navy); background: #fff; }
.vx-download:hover { border-color: var(--navy); }
.vx-download-ext { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 12px; letter-spacing: .08em; background: var(--navy); color: #fff; text-align: center; padding: 8px 0; }
.vx-download-name { display: block; font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 18px; line-height: 1.3; }
.vx-download-note { display: block; font-size: 14px; color: var(--grey); margin-top: 2px; }
.vx-download-go { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 20px; color: var(--violet); }
.vx-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vx-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }
.vx-ev-cta { margin-top: var(--sp-block); background: var(--navy); color: #fff; padding: 32px; max-width: 66ch; }
.vx-ev-cta-h { font-family: var(--font-h); font-weight: var(--fw-heavy); font-size: 22px; line-height: 1.3; }
.vx-ev-cta p { font-size: 16px; line-height: 1.6; color: #cdd8e6; margin: 8px 0 20px; max-width: 46ch; }
.vx-card-status { font-family: var(--font-h); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; white-space: nowrap; }
.vx-card-status { display: inline-flex; align-items: center; gap: 6px; }
.vx-fmt-ico { display: block; flex: none; }
.vx-chip-fmt { gap: 8px; }
.vx-chip-fmt img { display: block; flex: none; }
.vx-card-status[data-up="1"] { background: var(--accent); color: var(--navy); }
.vx-card-status[data-up="0"] { border: 1px solid var(--line); color: var(--grey); }
/* sector photos: the warm grade is baked into the files (see README), so no filter here */
.vx-duo { position: relative; overflow: hidden; background: var(--navy); }
.vx-duo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sector-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-self: center; }
.sector-mosaic .tile { aspect-ratio: 1 / 1; }
.sector-mosaic[data-active] { grid-template-columns: 1fr; }
.sector-mosaic[data-active] .tile { display: none; }
.sector-mosaic[data-active] .tile.on { display: block; aspect-ratio: 4 / 3; }
/* case study cards with no image: navy tile with the star */
.vx-cs-tile { aspect-ratio: 16 / 9; background: var(--navy); border-bottom: 1px solid var(--line); position: relative; display: flex; align-items: center; justify-content: center; }
.vx-cs-chip { position: absolute; top: 12px; left: 12px; z-index: 1; background: #fff; color: var(--navy); }
@media (max-width: 820px) {
  .vx-gallery { grid-template-columns: 1fr; }
  .vx-ev-cta { padding: 24px; }
  .vx-ev-actions { margin-left: 0 !important; }
}

/* Featured partner card: they bring / we bring as short lists */
.pt-bring { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.pt-bring-h { font-family: var(--font-h); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-bottom: 14px; }
.pt-bring-h.pt-we { color: var(--label); }
.pt-bring ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pt-bring li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.55; color: var(--label); }
.pt-bring li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--violet); }
@media (max-width: 720px) { .pt-bring { grid-template-columns: 1fr; gap: 28px; } }

/* Line breaks: balanced headings, no lone words at the end of body text */
body { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }