/* Tensense website · Brand Guidelines Edition 2026 (revised 21 October 2026), which folded in the Signal direction
   One signal: the logo's cyan bar is the brand colour. Serif speaks, sans works.
   Real people, real sites. White working pages; navy for the hero, stats band,
   closing band and footer. Web layouts use the width: split headers, two- to
   five-column grids, full-bleed photography beside (never under) the words. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand Guidelines Edition 2026, revised 21 October 2026 */
  --signal: #00B4C8;      /* Mark Cyan: the logo's third bar. Only the headline rail and small functional marks
                             (2px top edge of menus and copy blocks, latest chart point,
                             link hover and focus ring on navy). Never type, never a fill or panel */
  --deep: #256670;        /* Deep Teal: accent type on white and Ice (emphasis, labels, numerals, links) */
  --navy: #16233B;        /* Cover Navy: hero, stats band, closing band, footer; headlines */
  --ink: #142440;         /* Headline Ink: item titles and bold lead-ins on light grounds */
  --graphite: #4A5A6E;    /* Body Ink: all body copy on white and Ice */
  --steel: #6B7FA3;       /* Slate: chart context and placeholder dashes. Marks only, never small type */
  --mist: #DDE4EF;        /* Hairline: 1px rules on white */
  --ice: #E3F5F8;         /* Ice: tinted sections, panels and cards */
  --navy-muted: #C3CCD8;  /* Navy-muted: rules on Ice; body copy on navy */
  --navy-rule: #2E3B52;   /* Navy rule: rules on navy */
  --pale-teal: #7FAEB6;   /* Pale Teal: accent type on navy (emphasis, labels, links). Navy grounds only */
  --signal-teal: #2E7D8A; /* Signal Teal: lens bar 1, chart series, statement box fill. Never type */
  --neutral: #F4F7F7;     /* Neutral panel: wells for report output */
  --white: #FFFFFF;
  --amber: #FBB13D;       /* Action Amber: filled buttons on white or navy only, navy text; also the active-page underline in the header. Never type, never near report or chart colours */
  --amber-deep: #F98E21;  /* button hover */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --content: 1200px;
  --gutter: clamp(16px, 4.5vw, 56px);
  --edge: max(var(--gutter), calc((100vw - var(--content)) / 2));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--graphite);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--deep); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.on-navy :focus-visible { outline-color: var(--signal); }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 16px; background: var(--white); color: var(--navy); font-weight: 700; }
.skip:focus { left: 16px; top: 16px; }

.wrap {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Type ---------- */
h1, h2, h3 { margin: 0; color: var(--navy); text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 500; font-optical-sizing: auto; }
h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -0.015em; }
h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.01em; }
h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; line-height: 1.35; }
h1 em, h2 em { font-style: normal; color: var(--deep); }
.on-navy h1, .on-navy h2, .on-navy h3 { color: var(--white); }
.on-navy h1 em, .on-navy h2 em { color: var(--pale-teal); }
.on-navy p { color: var(--navy-muted); }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 34em; }

.label {
  margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--deep);
}
.on-navy .label { color: var(--pale-teal); }
.quiet { color: var(--graphite); }

/* Signal rail beside a headline */
.railed { display: flex; gap: clamp(14px, 1.6vw, 22px); }
.railed::before { content: ""; flex: none; width: 6px; background: var(--signal); }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--mist); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 14px; }
.logo { display: block; padding-block: 8px; }
.logo img { width: 168px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover { color: var(--deep); }
.nav a[aria-current="page"] { font-weight: 700; border-bottom-color: var(--amber); }

/* ---------- Buttons ----------
   One filled button per block: amber on white or navy, navy on pale blue (see below).
   A second action, where one is useful, is a text link (.more), never a second button. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none;
  background: var(--amber); color: var(--navy); border: 1.5px solid var(--amber);
  cursor: pointer; /* form submit buttons otherwise show the arrow, unlike link buttons */
}
.btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: var(--navy); }
.nav .btn { min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; color: var(--navy); border-bottom-width: 1.5px; }
/* On the demo and thanks pages the header button is hidden but keeps its space, so the menu doesn't shift */
.nav .nav-spacer { visibility: hidden; }
.on-navy .btn { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.on-navy .btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: var(--navy); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.more { font-weight: 600; }

/* ---------- Hero: words left, photograph bleeding to the right edge ---------- */
.hero { background: var(--navy); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.hero-copy {
  display: flex; flex-direction: column; justify-content: center; gap: 28px; min-width: 0;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 64px) clamp(48px, 6vw, 96px) max(var(--edge), env(safe-area-inset-left, 0px));
}
.hero-media { position: relative; min-height: max(520px, min(34vw, 75vh)); margin: 0; } /* grows with the window (up to three quarters of its height), so wide screens crop the photo about as much as laptops */
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.no-media { grid-template-columns: 1fr; }
.hero.no-media .hero-copy > * { max-width: calc(var(--content) * 0.75); }

/* ---------- Stats band ---------- */
.stats { background: var(--navy); border-top: 1px solid var(--navy-rule); }
.stats .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; padding-block: 32px 40px; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat .num { font-size: clamp(32px, 4vw, 56px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat span:last-child { font-size: 14px; line-height: 1.45; color: var(--navy-muted); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 7vw, 96px); }
.section.ruled { border-top: 1px solid var(--mist); }
.section.tint { background: var(--ice); }
.section > .wrap { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }

/* Split header: label + headline left, short copy right */
.head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 64px; align-items: start; }
/* Side by side, the intro starts level with the heading's first line, however long either is:
   the label above the heading is 18px tall with a 14px gap, so the intro drops by the same 32px */
@media (min-width: 901px) {
  .head:has(> div > .label:first-child) > :last-child:not(:first-child),
  .split.align-heading > :last-child { padding-top: 32px; }
}
.head > div { display: flex; flex-direction: column; gap: 14px; }
.head p { max-width: 32em; }
/* A lone link beside the heading sits on the heading's baseline instead */
@media (min-width: 901px) {
  .head:has(> p > .more:only-child) { align-items: last baseline; }
  .head:has(> div > .label:first-child) > p:has(> .more:only-child) { padding-top: 0; }
}

/* Two-column split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 88px); align-items: center; }
.split.top { align-items: start; }
.split > div { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Grids of equals */
.grid { display: grid; gap: 32px 40px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 28px; }
.item { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--mist); }
.item p { font-size: 16px; line-height: 1.55; }
.item .n { font-size: 34px; font-weight: 300; line-height: 1; color: var(--deep); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.item .topics { font-size: 14px; color: var(--navy); font-weight: 500; }
/* Lens topics: a labelled two-by-two list, so they read as the lens's four topics */
.item .topics-label { margin-top: 8px; font-size: 12px; }
.item ul.topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: 15px; }
/* Panel headings site-wide: Newsreader in Cover Navy, like the lens names */
.item > h3, .item h3.serif { font-family: var(--serif); font-size: clamp(22px, 2vw, 26px); font-weight: 500; line-height: 1.15; color: var(--navy); }
/* Cards side by side share their row lines, so when one title wraps the text beneath every title in that row still
   starts level. Each card spans one row per child; the key item's label is lifted out of flow, so it counts two */
@media (min-width: 641px) {
  .grid:not(.levels) > .item:has(> h3) { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 8px; align-content: start; }
  .grid:not(.levels) > .item:has(> h3):has(> :nth-child(3)):not(.key-item) { grid-row: span 3; }
  .grid:not(.levels) > .item:has(> h3):has(> :nth-child(4)):not(.key-item) { grid-row: span 4; }
}
/* Where some cards in a row carry an extra tag line, the others leave that row empty so the titles still line up */
@media (min-width: 901px) {
  .grid:not(.levels):has(> .item > .ph-tag) > .item:not(:has(> .ph-tag)) { grid-row: span 4; }
  .grid:not(.levels):has(> .item > .ph-tag) > .item:not(:has(> .ph-tag)) > h3 { grid-row: 3; }
  .grid:not(.levels):has(> .item > .ph-tag) > .item:not(:has(> .ph-tag)) > h3 + p { grid-row: 4; }
}

/* Hairline rows */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mist); }
.rows li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 4px 24px; padding-block: 16px; border-bottom: 1px solid var(--mist); }
.rows li h3 { font-size: 16px; }
.rows li p { font-size: 16px; line-height: 1.55; }

/* Panels */
.panel { background: var(--ice); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.tint .panel { background: var(--white); } /* an ice panel would vanish on the ice tint */
.panel .say { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; color: var(--navy); }

/* Charts (illustrative) */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--sans); font-size: 13px; fill: var(--graphite); }
.chart .strong { font-weight: 700; fill: var(--navy); }
.chart .bar { fill: var(--steel); }
.chart .bar.key { fill: var(--deep); }
.chart .base { stroke: var(--mist); stroke-width: 1; }
/* Clarity by team: context bars muted so the key bar and the gap to the average stand out */
.chart.clarity text { font-size: 14px; }
.chart.clarity .bar { fill: var(--navy-muted); }
.chart.clarity .bar.key { fill: var(--deep); }
.chart.clarity .val { font-size: 13px; fill: var(--graphite); }
.chart.clarity .key-text { fill: var(--deep); font-weight: 700; font-size: 15px; }
.chart.clarity .avg { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart.clarity .avg-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--navy); }
@media (max-width: 640px) {
  .chart.clarity text { font-size: 18px; }
  .chart.clarity .val { font-size: 18px; }
  .chart.clarity .key-text { font-size: 18px; }
  .chart.clarity .avg-label { font-size: 16px; letter-spacing: 0.04em; }
}
.chart .ctx { fill: none; stroke: var(--steel); stroke-width: 1.5; }
.chart .key-line { fill: none; stroke: var(--deep); stroke-width: 3; }
.chart .dot { fill: var(--deep); stroke: var(--ice); stroke-width: 2; }
.chart .end { fill: var(--signal); stroke: var(--deep); stroke-width: 2; }

/* Photographs */
.photo { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.photo img { width: 100%; object-fit: cover; background: var(--mist); aspect-ratio: 4 / 3; }
.photo.tall img { aspect-ratio: 4 / 5; }
.photo.wide img { aspect-ratio: 21 / 8; }
.photo .credit { margin: -4px 0 0; font-size: 11px; line-height: 1.4; color: var(--graphite); }
.photo .credit a { color: inherit; }
.strip .report-fig .well img { aspect-ratio: 4 / 3; object-fit: contain; }
.photo figcaption { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Quotes */
.quote { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; color: var(--navy); }
.quote.small blockquote { font-size: clamp(19px, 1.6vw, 22px); }
.quote figcaption { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.figure-num { font-size: clamp(48px, 5vw, 72px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--deep); white-space: nowrap; }
.panel .figure-num { font-size: clamp(36px, 3.2vw, 46px); } /* one figure in a side panel, not a row of headline stats */

/* Comparison */
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--mist); font-size: 15px; line-height: 1.5; font-weight: 400; }
.compare thead th { border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); padding-bottom: 10px; }
.compare tbody th { width: 34%; font-weight: 600; color: var(--navy); }
.compare .us { color: var(--navy); font-weight: 600; background: var(--ice); padding-left: 16px; }
.compare thead .us { color: var(--deep); }
.compare tbody tr:last-child > * { border-bottom: 1px solid var(--mist); }

/* Doors: image cards */
.door { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); background: var(--ice); color: inherit; text-decoration: none; }
.door img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.door > div { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.door h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; }
.door p { font-size: 15px; }
.door .more { margin-top: auto; color: var(--deep); text-decoration: underline; text-underline-offset: 4px; }
/* Side-by-side doors share their rows through subgrid, so the label, heading, text and link
   line up across each row even when one label wraps; gaps become margins so the subgrids
   don't inherit the outer grid's row gap. Each .doors holds one row of two: the link row is
   flexible so spare height goes above the link, and flexible rows all share one size, so a
   second row of doors in the same grid would be stretched to match the first */
.doors { row-gap: 0; grid-auto-rows: auto auto auto 1fr; }
.doors + .doors { margin-top: 16px; } /* adds to .who-group's 16px gap to match the 32px grid gap */
.doors .door { grid-row: span 4; grid-template-rows: subgrid; }
.doors .door img { grid-row: 1 / -1; }
.doors .door > div { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; gap: 0; }
.doors .door > div > :not(:last-child) { margin-bottom: 10px; }
.doors .door .more { margin-top: 0; align-self: end; }.door:hover h3 { color: var(--deep); }

/* Copy blocks and questions */
.copyblock { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; background: var(--white); border-top: 2px solid var(--signal); }
.copyblock p { font-size: 15px; color: var(--navy); }
.faq { border-top: 1px solid var(--mist); }
.faq details { border-bottom: 1px solid var(--mist); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: 16px 40px 16px 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 24px; font-weight: 300; color: var(--deep); }
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding-bottom: 18px; font-size: 16px; }

.todo { background: var(--ice); border-top: 2px solid var(--signal); padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; max-width: 48rem; }
.todo p { color: var(--navy); }

/* ---------- Closing band and footer ---------- */
.close { background: var(--navy); }
.close .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: clamp(48px, 6vw, 72px); }
.close .railed h2 { max-width: 16em; }
.close .side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.contact-line { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--navy-muted); }
.contact-line a { color: var(--white); text-decoration: none; } /* matches the footer links below it */
.contact-line a:hover { text-decoration: underline; }

.site-footer { background: var(--navy); color: var(--white); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 56px; padding-block: 36px 40px; border-top: 1px solid var(--navy-rule); }
.footer-brand { gap: 14px; flex: 1 1 260px; }
.footer-brand img { width: 184px; }
.footer-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; line-height: 1.6; color: var(--navy-muted); }
.footer-col a { color: var(--white); }
.footer-col a:hover { color: var(--signal); }
/* Footer links in three groups that match the main menu */
.footer-links { flex: 3 1 560px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.footer-head { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-muted); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
@media (max-width: 640px) { .footer-links { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } }
.footer-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-top: 20px; border-top: 1px solid var(--navy-rule); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--navy-muted); }
/* The trademark notice runs to two sentences, so it takes its own line in lighter, plainer type */
.footer-legal > span + span { flex-basis: 100%; font-weight: 400; letter-spacing: 0.01em; line-height: 1.6; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .hero-media { min-height: 0; aspect-ratio: 4 / 3; }
  .stats .wrap { gap: 20px 20px; }
  .head, .split { grid-template-columns: 1fr; }
  .split > .photo, .split > .panel { order: 2; }
  .grid.three, .strip { grid-template-columns: 1fr; }
  .strip { gap: 24px; }
  .door { grid-template-columns: 1fr; }
  .door img { min-height: 0; aspect-ratio: 16 / 9; }
  /* The image moves above the text, so it takes the first of five shared rows */
  /* With the image in its own row there is no spare height to place */
  .doors { grid-auto-rows: auto; }
  .doors .door { grid-row: span 5; }
  .doors .door img { grid-row: 1; }
  .doors .door > div { grid-row: 2 / -1; }}
@media (max-width: 640px) {
  .grid.two, .grid.four, .grid.five { grid-template-columns: 1fr; }
  .doors .door:nth-child(n+2) { margin-top: 32px; }  .rows li { grid-template-columns: 1fr; }
  .compare tbody th { width: 30%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Book a demo form (plain HTML; handled by Netlify Forms) ---------- */
.hero-form {
  display: flex; align-items: center; min-width: 0;
  padding: clamp(32px, 5vw, 80px) max(var(--edge), env(safe-area-inset-right, 0px)) clamp(32px, 5vw, 80px) clamp(24px, 3vw, 48px);
}
.demo-form { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 20px; background: var(--white); padding: clamp(24px, 3vw, 40px); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; color: var(--navy); }
.field input {
  width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid var(--graphite); border-radius: 0;
  background: var(--white); color: var(--navy); font-family: var(--sans); font-size: 17px;
}
.field input:focus { outline: 3px solid var(--deep); outline-offset: 0; border-color: var(--deep); }
.on-navy .demo-form .btn { width: 100%; background: var(--amber); border-color: var(--amber); color: var(--navy); }
.on-navy .demo-form .btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.on-navy .demo-form p.form-note { font-size: 14px; color: var(--graphite); }
.hp { display: none; }
.demo-form .form-h { font-family: var(--serif); font-size: clamp(22px, 2vw, 26px); font-weight: 500; line-height: 1.2; color: var(--navy); }
/* The confirmation that replaces a form once it has sent (js/forms.js) */
.hero-form .form-done { align-self: flex-start; } /* starts where the form started, whatever the height of the hero copy */
.demo-form[hidden], .before-send[hidden] { display: none; }
.on-navy .form-done p { color: var(--ink); }
.form-done .form-h:focus { outline: none; }
.on-navy .demo-form .form-error { font-size: 15px; color: var(--ink); }
@media (max-width: 900px) {
  .hero-form { padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 48px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .demo-form { max-width: none; }
}
.item p.label { font-size: 12px; line-height: 1.5; }

/* Testimonial with portrait (square, never cropped at the eye line) */
.voice-card { margin: 0; gap: 28px; }
.voice-card .by { display: flex; align-items: center; gap: 18px; }
.voice-card .by img { flex: none; width: 112px; height: 112px; object-fit: cover; object-position: 50% 30%; }
.voice-card .by span { line-height: 1.7; }
.voice-card .by strong { color: var(--navy); font-weight: 700; }
@media (max-width: 640px) { .voice-card .by img { width: 84px; height: 84px; } }


/* Partner datasheet links and gated downloads */
.item .dl { margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 600; color: var(--deep); }
.item .dl::after { content: " \2193"; }
.grid.five .item { height: 100%; }

/* Insights Discovery page */
.steps { list-style: none; margin: 0; padding: 0; }
.hero-voice { width: 100%; max-width: 480px; background: var(--white); color: var(--graphite); }
.on-navy .hero-voice .label { color: var(--deep); }
.hero-voice .by span { color: var(--graphite); }
.compare.pair td { width: 50%; padding-left: 16px; }
.compare.pair thead th { padding-left: 16px; }

/* Illustrative chart: Tensense and Insights Discovery, used together */
.chart-img { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.chart-scroll { overflow-x: auto; background: var(--white); border: 1px solid var(--mist); padding: clamp(16px, 2.5vw, 32px); }
.chart-img svg { width: 100%; min-width: 760px; height: auto; display: block; }
.chart-img figcaption { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.chart.together text { font-size: 16px; fill: var(--graphite); }
.chart.together .strong { font-weight: 700; fill: var(--navy); }
.chart.together .key { font-weight: 700; fill: var(--deep); }
.chart.together .cap { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--deep); }
.chart.together .cap.practice { fill: var(--navy); }
.chart.together .marker { stroke: var(--graphite); stroke-width: 1.5; stroke-dasharray: 2 5; }
.chart.together .marker-box { fill: var(--navy); }
.chart.together .alone { fill: none; stroke: var(--steel); stroke-width: 3; stroke-dasharray: 9 8; }
.chart.together .key-line { fill: none; stroke: var(--deep); stroke-width: 4; stroke-linejoin: round; }
.chart.together .hollow { fill: var(--white); stroke: var(--deep); stroke-width: 3; }
.chart.together .end { fill: var(--signal); stroke: var(--deep); stroke-width: 3; }
.chart.together .phase { fill: var(--deep); }
.chart.together .phase.practice { fill: var(--navy); }
.chart.together.m, .chart-legend { display: none; }
.chart.together.m text { font-size: 15px; }
.chart.together.m .cap { font-size: 12px; }
.chart-legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mist); }
.chart-legend li { padding-block: 10px; border-bottom: 1px solid var(--mist); font-size: 15px; line-height: 1.45; }
.chart-legend strong { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); }
@media (max-width: 640px) {
  .chart.together { display: none; }
  .chart-img svg.chart.together.m { display: block; min-width: 0; }
  .chart-legend { display: block; }
  .chart-scroll { overflow: visible; }
  .nav { gap: 0 14px; }
  .nav a { font-size: 14px; }
  .nav .btn { padding: 0 14px; font-size: 14px; }
}

/* Client voices (home) */
.voices .voice { background: var(--white); padding: clamp(24px, 2.5vw, 32px); height: 100%; gap: 16px; }
.voices .voice blockquote { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.35; }
.voices .voice figcaption { margin-top: auto; }
.voices .voice .label a { color: inherit; }
@media (min-width: 901px) { .voices .voice > .label { min-height: 3em; } } /* labels that wrap or not, panels below still line up */
/* Where one card has no case study button, the cards share rows through subgrid so captions still line up */
@media (min-width: 901px) {
  .voices.aligned .voice { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; height: auto; }
  .voices.aligned .voice > .label { grid-row: 1; }
  .voices.aligned .voice > .video { grid-row: 2; }
  .voices.aligned .voice > blockquote { grid-row: 3; }
  .voices.aligned .voice > figcaption { grid-row: 4; margin-top: 0; }
  .voices.aligned .voice > .actions { grid-row: 5; }
}
/* Click-to-play video: a navy poster until pressed, then the Vimeo player */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--navy); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* .video-still: the same navy panel without a player, linking to a case study until a video exists */
.video-still:hover .video-who, .video-play:hover .video-who { text-decoration: underline; text-underline-offset: 4px; }
.video-still:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
.video-play, .video-still { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 16px 18px; color: var(--white); text-decoration: none; }
.video-icon { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -48px 0 0 -28px; background: var(--amber); }
.video-icon::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--navy); }
.video-play:hover .video-icon { background: var(--amber-deep); }
.video-play:hover, .video-still:hover { color: var(--white); } /* keeps the name white: the site-wide link hover would turn it navy on the navy panel */
.video-play:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
.video-who { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.2; }
.video-feature .video-play { padding: 22px 26px; }
.video-feature .video-who { font-size: clamp(20px, 2vw, 28px); }
.video-feature .video-icon { width: 72px; height: 72px; margin: -52px 0 0 -36px; }
.video-meta { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pale-teal); }

/* After the report page: report images and clearly marked placeholders */
.report-shot { margin: 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.report-shot img { width: 100%; height: auto; display: block; background: var(--white); }
.report-shot figcaption { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-muted); }
.levels .item { height: 100%; }
/* Side by side, the three cards share their six rows through subgrid, so each description, audience line
   and report image starts level with its neighbours; the grid's row gap becomes the gap within each card */
@media (min-width: 901px) {
  .levels { row-gap: 8px; }
  .levels .item { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
}
/* Reporting cards: the same people grouped three ways. No reporting lines, so nothing reads as an org chart */
.level-fig { margin: 4px 0 8px; background: var(--white); padding: 16px; }
.level-fig svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.level-fig circle { fill: var(--deep); }
.level-fig circle.faded { fill: var(--navy-muted); }
.level-fig .box { fill: none; stroke: var(--navy-muted); stroke-width: 1; }
.level-fig .box.key { stroke: var(--deep); stroke-width: 2; }
.level-fig text { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; fill: var(--graphite); }
.level-fig text.key { fill: var(--deep); }
.report-page { margin: auto 0 0; padding-top: 8px; }
.report-page img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: var(--white); border: 1px solid var(--mist); display: block; }
.note { max-width: 48rem; }
.rows.numbered li { grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; }
.rows.numbered .n { font-size: 20px; font-weight: 300; color: var(--deep); }
.rows.numbered li p { font-weight: 600; color: var(--navy); }
.rows.questions li { grid-template-columns: 1fr; padding-block: 12px; }
.rows.questions li p { font-weight: 600; color: var(--navy); }
.ph-panel { background: var(--white); border: 2px dashed var(--steel); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 24px; }
.ph-tag { align-self: flex-start; background: var(--navy); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 12px; line-height: 1.5; }
.ph-note { color: var(--deep); }
.rating { background: var(--ice); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) { .rows.numbered li { grid-template-columns: 40px minmax(0, 1fr); } }

/* HR and People page */
.stats.four .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats.four .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.say-lead { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; color: var(--navy); }
.quote-panel { background: var(--white); }

/* Case studies page */
.serif-h { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.2; color: var(--navy); }
.rule-top { padding-top: 20px; border-top: 1px solid var(--mist); margin-top: 8px; }
.figures .item { gap: 8px; }

/* Header: stays in view on larger screens, so "Book a demo" is always one click away */
@media (min-width: 901px) { .site-header { position: sticky; top: 0; z-index: 20; } }

/* "Who it's for" menu: CSS only (opens on hover, tap or keyboard focus) */
.navmenu { position: relative; display: inline-flex; }
.navtrigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--navy); cursor: pointer; }
.navtrigger::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.navmenu.current .navtrigger { font-weight: 700; border-bottom-color: var(--amber); }
.navlist { display: none; position: absolute; top: calc(100% + 6px); left: -16px; z-index: 30; min-width: 230px; flex-direction: column; padding: 8px 0; background: var(--white); border: 1px solid var(--mist); border-top: 2px solid var(--signal); box-shadow: 0 8px 24px rgba(22, 35, 59, 0.12); }
.navlist a { padding: 0 16px; min-height: 44px; border-bottom: 0; }
.navlist a[aria-current="page"] { border-bottom: 0; color: var(--deep); }
.navmenu:hover .navlist, .navmenu:focus-within .navlist { display: flex; }
/* A menu kept open by focus (after a click) closes when the pointer moves to another menu, so two never overlap */
@media (min-width: 901px) {
  .nav:has(.navmenu:hover) .navmenu:not(:hover) .navlist { display: none; }
  .nav:has(.navmenu:hover) .navmenu:not(:hover) .navtrigger::after { transform: translateY(-2px) rotate(45deg); }
}
/* The menu sits 6px below the trigger so its top edge stays clear of an active-page underline;
   this strip bridges the gap so the menu stays open while the pointer moves down to it */
.navlist::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }

/* Forms: select and textarea, optional marker */
.field select, .field textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--graphite); border-radius: 0; background: var(--white); color: var(--navy); font-family: var(--sans); font-size: 17px; }
.field select { min-height: 50px; }
.field textarea { resize: vertical; min-height: 96px; max-height: 320px; } /* taller if needed, never wider than the form or longer than a short note */
.field select:focus, .field textarea:focus { outline: 3px solid var(--deep); outline-offset: 0; border-color: var(--deep); }
.optional { font-weight: 400; color: var(--graphite); }
.join { border-top: 1px solid var(--navy-rule); }
.join .contact-line { display: block; }

/* Placeholders: dashed, labelled, impossible to miss */
.ph-item { border: 2px dashed var(--steel); border-top-width: 2px; padding: 18px; }
.ph-item .ph-tag { margin-bottom: 4px; }
.ph-panel.on-dark { background: transparent; border-color: var(--navy-muted); padding: 18px 20px; gap: 10px; }
.ph-panel.on-dark .ph-note { color: var(--navy-muted); }
.ph-panel.on-dark .ph-tag { background: var(--white); color: var(--navy); }

/* Member pages: logo placeholder */
.logo-ph { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; min-height: 120px; justify-content: center; background: var(--white); border: 2px dashed var(--steel); }
.logo-ph strong { font-size: 20px; font-weight: 700; color: var(--navy); }
.logo-ph .ph-tag { font-size: 11px; padding: 6px 10px; }
.demo-form .logo-ph { min-height: 0; padding: 14px 16px; background: var(--ice); }
@media (min-width: 901px) { html { scroll-padding-top: 96px; } }
@media (max-width: 640px) { .navlist { left: auto; right: 0; min-width: 220px; } }
.navlist a { white-space: nowrap; }
.head .intro { gap: 12px; }
.head .intro p { max-width: 34em; }
.intro-lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--navy); }
.head.top { align-items: start; }
/* Side by side, a section intro ends as near as it can to where the rule below does: longer intros fill the column,
   and a one-line intro shrinks to its text and sits against the edge */
@media (min-width: 901px) {
  .head > p, .head > .intro p { max-width: none; }
  .head > :last-child:not(:first-child) { justify-self: end; }
}
.how-more { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.how-more .more { color: var(--deep); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) { .nav > .navmenu:first-child .navlist { left: 0; right: auto; } }
/* Phones: menus open below the whole nav, aligned left, so they never run off screen */
@media (max-width: 640px) {
  .nav { position: relative; }
  .navmenu { position: static; }
  .navlist, .nav > .navmenu:first-child .navlist { left: 0; right: auto; top: 100%; }
  .navlist::before { display: none; }
}

/* Chapters: numbered section headings in their own left-hand column (case studies, privacy policy).
   The heading column carries the structure; the serif line beneath is a standfirst, not a heading. */
.chapters { border-bottom: 1px solid var(--navy-muted); }
.chapter { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 16px clamp(32px, 4vw, 64px); padding-block: clamp(28px, 3vw, 40px); border-top: 1px solid var(--navy-muted); }
.chapter-head { display: flex; flex-direction: column; gap: 6px; }
.chapter-head .n { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--deep); font-variant-numeric: tabular-nums; }
.chapter-head h2, .chapter-head h3 { font-family: var(--sans); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--navy); }
.chapter-body { display: flex; flex-direction: column; gap: 16px; max-width: 46rem; min-width: 0; }
.chapter-body .serif-h { margin: 0; }
.chapter-body .grid.two { gap: 24px 40px; }
.chapter-head .n { line-height: 24px; }
/* Side by side, the body starts level with the chapter title rather than its number (number line + head gap) */
@media (min-width: 901px) { .chapter-head { position: sticky; top: 104px; align-self: start; } .chapter-body { padding-top: 30px; } }
/* Without a number above the heading, the body starts level with the heading */
@media (min-width: 901px) { .chapter:not(:has(.chapter-head .n)) .chapter-body { padding-top: 0; } }
@media (max-width: 900px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter-head { flex-direction: row; align-items: baseline; gap: 12px; }
}
/* A single heading inside body content, in the same style as a chapter heading */
.sub-h { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.rows li h4, .row-h { margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--navy); }
.chapter-body > .rows:first-child { border-top: 0; }
.chapter-body > .rows:first-child li:first-child { padding-top: 0; }
.chapter-body .rows li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Rules on tinted sections: mist disappears on ice, so use the stronger navy-muted rule */
.tint .item, .tint .rows, .tint .rows li { border-color: var(--navy-muted); }

/* Case studies hub: one card per case study, each opening its full page */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.case-card { background: var(--ice); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.case-card h2 { font-size: clamp(26px, 2.4vw, 34px); }
.case-card .quote { padding-top: 16px; border-top: 1px solid var(--navy-muted); flex: 1; }
.case-card .quote figcaption { margin-top: auto; } /* names and photos line up across each row */
.case-card .quote blockquote { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.35; }
.case-card .actions { margin-top: auto; padding-top: 8px; }
/* Headshot beside the person quoted: square, cropped to cover, never cut at the eye line */
.by-photo { display: flex; align-items: center; gap: 16px; }
.by-photo img { flex: none; width: 72px; height: 72px; object-fit: cover; object-position: 50% 30%; background: var(--neutral); }
.by-photo span { line-height: 1.6; }
@media (max-width: 640px) { .by-photo img { width: 60px; height: 60px; } }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }
/* Side by side, the cards share rows through subgrid so headings, quotes and buttons line up */
@media (min-width: 901px) {
  .case-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; align-content: start; }
}
.more-case { color: inherit; text-decoration: none; }
.more-case:hover h3 { color: var(--deep); }
.more-case .more { margin-top: 4px; }
.quote-panel .actions { margin-top: 8px; }

/* The science page */
.item.key-item { position: relative; border-top: 2px solid var(--deep); padding-top: 17px; }
/* The key item's label sits above its rule, so its title lines up with the other items' titles */
@media (min-width: 641px) {
  .item.key-item > .label:first-child { position: absolute; left: 0; bottom: calc(100% + 8px); margin: 0; }
  .grid:has(> .key-item) { margin-top: 24px; } /* room for the lifted label, so it keeps the usual gap from the intro above */
}
.prompts .prompt { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; color: var(--navy); }
.close .side > p { max-width: 24em; }
/* Between 901px and 1060px the header wraps to two rows, so anchors and sticky headings sit lower */
@media (min-width: 901px) and (max-width: 1060px) {
  html { scroll-padding-top: 140px; }
  .chapter-head { top: 148px; }
}
.more-case .more { color: var(--deep); text-decoration: underline; text-underline-offset: 4px; }

/* Amber buttons sit only on white or navy. On pale blue (tinted sections, case cards, pale blue panels)
   the filled button turns navy with white text, deep teal on hover. */
.tint .btn, .case-card .btn, .panel:not(.quote-panel) .btn { background: var(--navy); border-color: var(--navy); color: var(--white); }
.tint .btn:hover, .case-card .btn:hover, .panel:not(.quote-panel) .btn:hover { background: var(--deep); border-color: var(--deep); color: var(--white); }


/* ---------- Brand Guidelines revision, 21 October 2026 ---------- */
/* Item titles and bold lead-ins in Headline Ink on light grounds */
h3, .row-h, strong { color: var(--ink); }
.on-navy h3, .on-navy strong { color: var(--white); }
.on-navy .demo-form strong, .on-navy .demo-form h3, .on-navy .hero-voice strong, .on-navy .logo-ph strong { color: var(--ink); }
/* Links on navy in Pale Teal, Mark Cyan on hover */
.on-navy a:not(.btn), .site-footer a { color: var(--pale-teal); }
.on-navy a:not(.btn):hover, .site-footer a:hover { color: var(--signal); }
.on-navy .label a { color: inherit; }
/* links inside white cards on navy stay Deep Teal (Pale Teal fails on white) */
.on-navy .demo-form a, .on-navy .hero-voice a, .on-navy .quote-panel a { color: var(--deep); }
.on-navy .demo-form a:hover, .on-navy .hero-voice a:hover, .on-navy .quote-panel a:hover { color: var(--navy); }
/* Typesetting: no single word left alone on the last line of a short block */
p, li, figcaption { text-wrap: pretty; }
/* Rules inside Ice panels are Navy-muted (Hairline disappears on Ice) */
.panel:not(.quote-panel) .rows, .panel:not(.quote-panel) .rows li, .panel:not(.quote-panel) .item, .ice .rows, .ice .rows li { border-color: var(--navy-muted); }
/* Cards and rows use 15-16px body */
.case-card > p:not(.label) { font-size: 16px; }
/* Serif speaks: section headings in Newsreader; the line beside them is a sans lead */
.chapter-head h2, .chapter-head h3 { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; color: var(--navy); }
.chapter-body .serif-h, .serif-h { font-family: var(--sans); font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.45; color: var(--ink); }
/* Lens colour bars: 4px above each lens name, in lens order */
.item.lens, .tint .item.lens { border-top: 4px solid var(--signal-teal); padding-top: 16px; }
.item.lens:nth-child(2), .tint .item.lens:nth-child(2) { border-top-color: var(--deep); }
.item.lens:nth-child(3), .tint .item.lens:nth-child(3) { border-top-color: var(--steel); }
.item.lens:nth-child(4), .tint .item.lens:nth-child(4) { border-top-color: var(--navy); }
.lens .lens-name { font-family: var(--serif); font-size: clamp(22px, 2vw, 26px); font-weight: 500; line-height: 1.15; color: var(--navy); }
.prompts .prompt { font-family: var(--sans); font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--ink); }
/* Report output: a white card with 16px padding in a Neutral panel well */
.well { background: var(--neutral); padding: 16px; }
.well img { background: var(--white); padding: 16px; width: 100%; height: auto; display: block; border: 0; }
.report-page .well img { aspect-ratio: 16 / 10; object-fit: contain; }
.report-page img { border: 0; }
.report-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.report-page figcaption { margin-top: 10px; }
/* Reading the story: the 16 topics by lens, with two lit topics joined to show they are read together */
.story-map { margin: 0 0 48px; display: grid; grid-template-columns: minmax(150px, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 10px 24px; align-items: stretch; }
.story-map .lens-name { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.2; color: var(--navy); border-top: 4px solid var(--signal-teal); padding-top: 8px; }
.story-map .lens-name.l2 { border-top-color: var(--deep); }
.story-map .lens-name.l3 { border-top-color: var(--steel); }
.story-map .lens-name.l4 { border-top-color: var(--navy); }
.story-map .topic { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 8px; background: var(--white); border: 1px solid var(--navy-muted); font-size: 15px; line-height: 1.25; text-align: center; color: var(--graphite); }
.story-map .topic.lit { background: var(--deep); border-color: var(--deep); color: var(--white); font-weight: 700; }
.story-map .link-from::after { content: ""; position: absolute; left: 100%; top: 50%; width: 12px; height: calc(100% + 12px); box-sizing: border-box; border-top: 2px dashed var(--deep); border-right: 2px dashed var(--deep); }
.story-map .link-to::before { content: ""; position: absolute; right: 100%; top: 50%; width: 12px; border-top: 2px dashed var(--deep); }
/* Neighbouring pairs: across the 24px column gap, or down the 10px row gap */
.story-map .link-right::after { content: ""; position: absolute; left: 100%; top: 50%; width: 24px; border-top: 2px dashed var(--deep); }
.story-map .link-down::after { content: ""; position: absolute; top: 100%; left: 50%; height: 10px; border-left: 2px dashed var(--deep); }
.story-steps { margin-bottom: 40px; }
/* Small print under the chart, wrapped with it so the section's gap doesn't fall between them: pulled up into the
   chart's 48px bottom margin to sit 16px below it, then keeps that margin's space before the steps */
.story-note { margin: -32px 0 48px; max-width: 48rem; font-size: 14px; line-height: 1.55; color: var(--graphite); }
.story-teaser { margin: 0; display: flex; flex-wrap: wrap; align-items: last baseline; gap: 8px 20px; padding-top: 24px; border-top: 1px solid var(--navy-muted); }
.story-teaser ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.story-teaser li { font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); font-weight: 500; line-height: 1.25; color: var(--navy); }
.story-teaser a { font-weight: 600; color: var(--deep); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.story-teaser a:hover { color: var(--navy); }
@media (max-width: 900px) {
  .story-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  .story-map .lens-name { grid-column: 1 / -1; margin-top: 12px; }
  .story-map .link-from::after, .story-map .link-to::before, .story-map .link-right::after, .story-map .link-down::after { display: none; }
}
.enlarge { display: block; cursor: zoom-in; }
.enlarge:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
/* Lightbox (js/lightbox.js): the enlarged image over a dimmed page, closed by the button, Escape or the backdrop */
.lightbox { max-width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 48px 24px 20px; border: 0; background: var(--white); box-shadow: 0 20px 60px rgba(22, 35, 59, 0.35); }
.lightbox::backdrop { background: rgba(22, 35, 59, 0.82); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; margin: 0 auto; object-fit: contain; }
.lightbox figcaption { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.lightbox-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; font: 400 30px/1 var(--sans); color: var(--navy); cursor: pointer; }
.lightbox-close:hover { color: var(--deep); }
.lightbox-close:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
/* Video viewer (js/video.js): a 16:9 player as large as fits, up to 960px wide */
.video-box .video-frame { width: min(960px, calc(100vw - 80px), calc((100vh - 160px) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--navy); }
.video-box iframe { display: block; width: 100%; height: 100%; border: 0; }
/* On phones a shrunk chart is unreadable, so it keeps a legible width and scrolls sideways instead */
@media (max-width: 640px) {
  .lightbox { padding: 48px 12px 16px; }
  .lightbox figure { overflow-x: auto; }
  .lightbox img { width: 720px; max-width: none; max-height: none; margin: 0; }
}
.report-fig figcaption, .report-shot figcaption, .report-page figcaption { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.on-navy .report-shot figcaption { color: var(--navy-muted); }
/* The footer carries no second logo: the header already has it */
.footer-brand .label { color: var(--navy-muted); }
/* Who it's for menu: group labels (By role, By situation) */
.navlist .navgroup { display: block; padding: 10px 16px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deep); white-space: nowrap; }
.navlist .navgroup:not(:first-child) { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--mist); }
/* Serif heading inside an Ice panel */
.panel .panel-h { font-family: var(--serif); font-size: clamp(22px, 2vw, 26px); font-weight: 500; line-height: 1.2; color: var(--navy); }
/* A link that follows a grid */
.follow { margin-top: 32px; }
/* Home "Who it's for": by role, by organisation, by situation, matching the navigation menu */
.hero-sub { font-size: 16px; line-height: 1.6; max-width: 34em; }
.stack { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* First debrief: a full-width Ice panel under the debrief section, intro left and questions right */
.first-debrief, .panel-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(40px, 6vw, 88px); align-items: start; }
.first-debrief > div, .panel-split > div { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) { .first-debrief, .panel-split { grid-template-columns: 1fr; } }
.aside-note { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } /* a little more air below the panel above */
.proof-figure { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--navy-muted); }
.proof-figure p { font-size: 16px; }
.who-group { display: flex; flex-direction: column; gap: 16px; }
.group-label { margin: 0; }
#who .follow { margin-top: 0; }
/* Filled buttons on white quote cards inside tinted sections stay Action Amber (navy is for buttons on Ice) */
.tint .voice .btn { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.tint .voice .btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: var(--navy); }
.voice .actions { margin-top: 4px; }
/* Panels on a tinted section are white, so their buttons stay amber */
.tint .panel .btn { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.tint .panel .btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: var(--navy); }
/* Our story: archive photos keep their own shape; product graphics sit in a Neutral well */
.photo.native img { aspect-ratio: auto; height: auto; }
.chapter-body .report-fig.well { padding: 16px; }
.chapter-body .report-fig.well img { padding: 12px; }
.chapter-body .grid.two .photo img { aspect-ratio: 4 / 3; }

/* Compact header on phones and small tablets: logo and a Menu button; the menu opens as a simple list.
   Without scripts (no .js on <html>) the full menu shows as before. */
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .js .site-header { position: sticky; top: 0; z-index: 20; }
  .js .site-header .wrap { padding-block: 10px; row-gap: 0; }
  .js .logo img { width: 140px; }
  .js .menu-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--navy); background: none; font: 600 15px/1 var(--sans); color: var(--navy); cursor: pointer; }
  .js .nav { display: none; width: 100%; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; margin-top: 10px; padding: 4px 0 16px; border-top: 1px solid var(--mist); max-height: calc(100vh - 80px); overflow-y: auto; }
  .js .nav.open { display: flex; }
  .js .nav a { min-height: 48px; font-size: 16px; border-bottom: 1px solid var(--mist); }
  .js .nav a[aria-current="page"] { color: var(--deep); font-weight: 700; border-bottom-color: var(--mist); }
  .js .nav .navmenu { display: block; position: static; }
  .js .nav .navtrigger { min-height: 36px; margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep); border: 0; pointer-events: none; }
  .js .nav .navtrigger::after { display: none; }
  .js .nav .navlist { display: flex; position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; }
  .js .nav .navlist::before { display: none; }
  .js .nav .navlist a { padding: 0; }
  .js .nav .navgroup { margin-top: 10px; padding: 10px 0 4px; border-top: 0; }
  .js .nav > a:not(.btn) { margin-top: 0; }
  .js .nav .btn { margin-top: 18px; justify-content: center; border-bottom: 1.5px solid var(--amber); }
  .js .nav .nav-spacer { display: none; }
}

/* Partner news: a channel partner's announcement, flagged in the hero and featured on the Business consultancies page */
.hero-news { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 18px; border-top: 1px solid var(--navy-rule); font-size: 16px; line-height: 1.5; }
.hero-news .label { font-size: 12px; }
.hero-news a { text-decoration: none; } /* like the other links on navy: underlined only on hover */
.hero-news a:hover { color: var(--signal); text-decoration: underline; text-underline-offset: 4px; }
.partner-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.partner-q { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 40px); background: var(--ice); }
.partner-q .n { font-size: 34px; font-weight: 300; line-height: 1; color: var(--deep); font-variant-numeric: tabular-nums; }
.partner-q h3 { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.2; color: var(--navy); }
.partner-q .answer { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--navy-muted); }
.partner-q .answer p:not(.label) { font-size: 16px; line-height: 1.55; }
.release .release-title { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.2; color: var(--navy); }
@media (max-width: 640px) { .partner-qs { grid-template-columns: 1fr; } }
.partner-voices { align-items: start; }
.partner-card { display: flex; gap: clamp(20px, 3vw, 36px); align-items: flex-start; }
.partner-logo { flex: none; width: 104px; height: auto; }
.partner-team { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.partner-team strong { color: var(--navy); }
/* A partner’s team on a pale card (Partners page): logo and label across the top, the people side by side, then the link */
.team-card { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 3vw, 36px); background: var(--ice); }
.team-card-head { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--navy-muted); }
.team-card-head .partner-logo { width: 56px; }
/* A partner logo beside its section heading, the eyebrow and heading stacked to its right */
.head > .head-brand { flex-direction: row; align-items: center; gap: clamp(16px, 2vw, 24px); }
.head-brand > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.head-brand .partner-logo { width: clamp(64px, 7vw, 88px); }
.team-card-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.team-card-people strong { color: var(--navy); }
.team-card .btn { align-self: flex-start; background: var(--navy); border-color: var(--navy); color: var(--white); }
.team-card .btn:hover { background: var(--deep); border-color: var(--deep); color: var(--white); }
@media (max-width: 480px) { .team-card-people { grid-template-columns: 1fr; } }

/* ---------- Motion ----------
   Short, quiet and functional: 150 to 250ms with an ease-out, no bounce, no shadows.
   All of it is switched off for visitors who ask their device for reduced motion (bottom of this block). */
:root { --ease: cubic-bezier(0.2, 0.7, 0.2, 1); }

/* 1. Buttons: the hover colour fades rather than snapping */
.btn { transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease); }

/* 2. Header menus: the dropdown fades in and drops 4px into place, and the chevron turns;
   on phones the opened menu fades in */
@media (min-width: 901px) {
  .navlist { transition: opacity 180ms var(--ease), translate 180ms var(--ease), display 180ms allow-discrete; }
  @starting-style { .navmenu:hover .navlist, .navmenu:focus-within .navlist { opacity: 0; translate: 0 -4px; } }
  .navtrigger::after { transition: transform 180ms var(--ease); }
  .navmenu:hover .navtrigger::after, .navmenu:focus-within .navtrigger::after { transform: translateY(1px) rotate(225deg); }
}
@media (max-width: 900px) {
  .js .nav { transition: opacity 200ms var(--ease), display 200ms allow-discrete; }
  @starting-style { .js .nav.open { opacity: 0; } }
}

/* 3. FAQ answers slide open and closed, and the + turns into a dash (browsers without
   ::details-content support simply open them instantly, as before) */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size 240ms var(--ease), content-visibility 240ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq summary::after { transition: transform 240ms var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }

/* 4. Image and video viewers: the panel fades and scales in, and the backdrop fades */
.lightbox { opacity: 0; scale: 0.97; transition: opacity 220ms var(--ease), scale 220ms var(--ease), display 220ms allow-discrete, overlay 220ms allow-discrete; }
.lightbox[open] { opacity: 1; scale: 1; }
@starting-style { .lightbox[open] { opacity: 0; scale: 0.97; } }
.lightbox::backdrop { opacity: 0; transition: opacity 220ms var(--ease), display 220ms allow-discrete, overlay 220ms allow-discrete; }
.lightbox[open]::backdrop { opacity: 1; }
@starting-style { .lightbox[open]::backdrop { opacity: 0; } }

/* 5. Form confirmation fades in where the form was */
@keyframes rise-in { from { opacity: 0; translate: 0 6px; } }
.form-done:not([hidden]) { animation: rise-in 260ms var(--ease); }

/* 6. Image cards: the photo eases in very slightly on hover, inside its own frame */
.door { overflow: hidden; }
.door > div { position: relative; z-index: 1; background: inherit; }
.door img { transition: scale 400ms var(--ease); }
.door:hover img { scale: 1.03; }
.door h3, .more-case h3 { transition: color 150ms var(--ease); }

/* 7. Links: colours fade, and links that are underlined only on hover draw their underline in */
a { transition: color 150ms var(--ease); }
.site-footer a, .contact-line a, .hero-news a {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: color 150ms var(--ease), background-size 220ms var(--ease);
}
.site-footer a:hover, .contact-line a:hover, .hero-news a:hover { text-decoration: none; background-size: 100% 1px; }
.footer-col a { align-self: flex-start; } /* footer columns would otherwise stretch each link, and its underline, across the column */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::details-content, ::backdrop { transition: none !important; animation: none !important; }
  .door:hover img { scale: 1; }
}