/* SMarketing Solutions website
   Layout: editorial and left-aligned on a 1200 px measure. Pure white does most of the work, with one
   aubergine field per screen. Purple is only for the logo and what you click. Copper marks results:
   figures, labels and the "shelf line", used once or twice a page.
   All values come from the brand guide, version 1.6. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/schibsted-grotesk-700-800.woff2") format("woff2") }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/source-sans-3-400-600.woff2") format("woff2") }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-italic-400.woff2") format("woff2") }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2") }

:root {
  color-scheme: light;
  /* Core palette */
  --white: #FFFFFF;
  --aubergine: #160822;
  --purple: #6A3493;
  --copper: #B45309;
  /* Supporting shades */
  --copper-light: #F0A040;
  --aubergine-700: #4A2A6A;
  --aubergine-tint: #EEE8F2;
  --slate: #4B4553;
  --rule: #DEDAE3;
  --on-dark-soft: #DEDCE0;
  --error: #B3261E;

  --f-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --page: 1200px;
  --prose: 36em;
  /* Headline room: at least 96 px above a section headline, 48 px below, 64 px above a subheading */
  --above-section: clamp(96px, 9vw, 136px);
  --below-headline: 48px;
  --above-sub: 64px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 96px) }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }
body { margin: 0; background: var(--white); color: var(--aubergine); font: 400 1.125rem/1.61 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--white) }
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--aubergine); margin: 0; text-wrap: balance }
p, ul, ol, dl, dd, figure, blockquote { margin: 0 }
p, li { text-wrap: pretty }
ul, ol { padding-left: 0; list-style: none }
img { display: block; max-width: 100%; height: auto }
strong, b { font-weight: 600 }
em, i { font-style: italic }
a { color: var(--purple); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px }
@media (hover: hover) { a:hover { color: var(--aubergine-700); text-decoration-thickness: 2px } }
@media (prefers-reduced-motion: no-preference) { a, .btn, .menu-button, .yn span { transition: color .15s, background-color .15s, border-color .15s, text-decoration-color .15s, box-shadow .15s } }
html { -webkit-tap-highlight-color: transparent }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px }
.on-dark :focus-visible { outline-color: var(--white) }
::selection { background: var(--aubergine-tint); color: var(--aubergine) }
[hidden] { display: none !important }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.skip { position: absolute; left: 16px; top: -100px; z-index: 40; background: var(--aubergine); color: var(--white); padding: 12px 18px; font-weight: 600 }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); color: var(--white) }

.wrap { max-width: var(--page); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)) } }
@media (min-width: 1100px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)) } }

/* Type scale (brand guide chapter 05) */
.display { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); line-height: 1.03; font-weight: 800; letter-spacing: -0.03em }
h2, .h2, .h1 { font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em }
h3, .h3 { font-size: 1.375rem; line-height: 1.27; font-weight: 700 }
.lede { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.5; max-width: 32em }
.small { font-size: 1rem; line-height: 1.5 }
.muted { color: var(--slate) }
.label { font: 500 1rem/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper); text-wrap: balance }
.nowrap { white-space: nowrap }
/* Secondary labels inside a block read as quiet body text, so labels never stack three deep */
.label.sub, .panel .label, .side .label, .outcomes .label, .test .label, .record-context .label, .bridge-gap .label { font: 600 1rem/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--slate) }
.on-dark .label { color: var(--copper-light) }
.figure { font: 800 clamp(2.75rem, 2rem + 2.4vw, 3.75rem)/1 var(--f-display); color: var(--copper); letter-spacing: -0.025em }
.prose { max-width: var(--prose); display: grid; gap: 20px }
.prose > * { min-width: 0 }
.quote { font-style: italic }

/* The shelf line: 2 px copper, as wide as the content above it. One or two per page. */
.shelf { padding-bottom: 28px; border-bottom: 2px solid var(--copper) }
.on-dark .shelf { border-bottom-color: var(--copper-light) }

/* Lists */
.dash-list { display: grid; gap: 12px }
.dash-list li { position: relative; padding-left: 28px }
.dash-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: 2px; background: var(--aubergine) }
.on-dark .dash-list li::before { background: var(--white) }
.rule-list { border-top: 1px solid var(--rule) }
p.label:has(+ .rule-list, + .outcomes, + .uses, + .tick-list, + .evidence) { padding-bottom: 12px }
.rule-list li { padding-block: 16px; border-bottom: 1px solid var(--rule) }
.num-list { counter-reset: n; display: grid; gap: 0; border-top: 1px solid var(--rule) }
.num-list li { counter-increment: n; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 4px 16px; padding-block: 18px; border-bottom: 1px solid var(--rule) }
.num-list li::before { content: counter(n, decimal-leading-zero); font: 500 1rem/1.8 var(--f-mono); letter-spacing: 0.06em; color: var(--copper) }

/* Buttons. Sentence case, square corners. Purple on white; white on aubergine. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 26px; border: 2px solid var(--purple); background: var(--purple); color: var(--white); font: 600 1.125rem/1.2 var(--f-body); text-decoration: none; cursor: pointer; text-align: center }
.btn-secondary { background: var(--white); color: var(--purple) }
@media (hover: hover) {
  .btn:hover { background: var(--aubergine-700); border-color: var(--aubergine-700); color: var(--white) }
  .btn-secondary:hover { background: var(--purple); border-color: var(--purple); color: var(--white) }
  .on-dark .btn:hover { background: var(--aubergine); color: var(--white) }
  .on-dark .btn-secondary:hover { background: var(--white); color: var(--aubergine) }
}
.btn:active { transform: translateY(1px) }
.btn-small { min-height: 48px; padding: 10px 20px; font-size: 1rem }
.on-dark .btn { background: var(--white); border-color: var(--white); color: var(--aubergine) }
.on-dark .btn-secondary { background: transparent; color: var(--white) }
.on-dark a:not(.btn) { color: var(--white) }
.on-dark a:not(.btn):hover { color: var(--white) }
.arrow-link { font-weight: 600 }
/* Standalone links get a full-size tap target */
.arrow-link, .more a, .jump a, .copy-btn, .tally .reset, .proof-foot a, .after-grid a { display: inline-flex; align-items: center; min-height: 44px }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--white); border-bottom: 1px solid var(--rule) }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px }
.brand { display: block; flex: none; text-decoration: none; margin-left: -6px }
.footer-brand img { margin-left: -6px }
.brand img { width: 240px; height: auto }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px) }
.site-nav ul { display: flex; gap: clamp(18px, 2vw, 30px) }
.site-nav a:not(.btn) { color: var(--aubergine); text-decoration: none; font-weight: 600; font-size: 1.0625rem; padding-block: 8px; border-bottom: 2px solid transparent }
@media (hover: hover) { .site-nav a:not(.btn):hover { border-bottom-color: var(--rule) } }
.site-nav a[aria-current="page"] { border-bottom-color: var(--purple) }
.menu-button { display: none; min-height: 48px; padding: 10px 18px; border: 2px solid var(--purple); background: var(--white); color: var(--purple); font: 600 1rem/1 var(--f-body); cursor: pointer }
.menu-button[aria-expanded="true"] { background: var(--purple); color: var(--white) }
@media (max-width: 1060px) {
  .site-header .wrap { min-height: 76px; flex-wrap: wrap; gap: 0 16px }
  .brand { display: flex; align-items: center; min-height: 76px }
  .brand img { width: 200px }
  .menu-button { display: inline-flex; align-items: center }
  .site-nav { display: none; flex-direction: column; align-items: stretch; gap: 0 }
  .site-nav.is-open { display: flex; position: fixed; z-index: 25; inset: calc(env(safe-area-inset-top, 0px) + 77px) 0 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); background: var(--white) }
  html.menu-open { overflow: hidden }
  .site-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--rule) }
  .site-nav li a:not(.btn) { display: block; padding-block: 14px; border-bottom: 1px solid var(--rule); font-size: 1.125rem }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--rule); box-shadow: inset 4px 0 0 var(--purple); padding-left: 16px }
  .site-nav .btn { margin-top: 24px; align-self: stretch }
}
@media (max-width: 380px) { .brand img { width: 180px } }
.no-js .site-nav { display: flex }
.no-js .menu-button { display: none }

/* Sections */
.sec { padding-top: var(--above-section) }
main > .sec:last-child { padding-bottom: var(--above-section) }
.sec + .band, .sec + .side-door { margin-top: var(--above-section) }
.sec-head { display: grid; gap: 20px; max-width: 46em; margin-bottom: var(--below-headline) }
.sec-head .lede { max-width: 30em }
.sec-head > p:not(.label):not(.lede) { max-width: 38em }
.sub + .sub, .sub-gap { margin-top: var(--above-sub) }
.sub > h3 { margin-bottom: 20px }
.band { background: var(--aubergine); color: var(--white) }
.band h1, .band h2, .band h3 { color: var(--white) }
.band .muted, .band .soft { color: var(--on-dark-soft) }
.divider { border: 0; border-top: 1px solid var(--rule); margin: 0 }

/* Page head (inner pages) */
.page-head { padding-block: clamp(64px, 7vw, 104px) 0 }
.page-head .wrap > div { display: grid; gap: 28px; max-width: 52em }
.page-head .display { max-width: 15em }
.page-head .shelf { width: fit-content }
.page-head .wrap > div > p:not(.lede):not(.label) { max-width: 38em }
.page-head .lede { max-width: 34em }
.page-head .shelf { padding-bottom: 32px }

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start }
.split-rev { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 72px; align-items: start }
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .split > .sec-head { margin-bottom: 0 }
}
@media (max-width: 719px) {
  .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 0 }
  .split, .split-rev { grid-template-columns: minmax(0, 1fr) }
}
@media (min-width: 720px) and (max-width: 960px) {
  .grid-3 { gap: 32px 24px }
  .split, .split-rev { gap: 40px 40px }
  .situations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
/* Headings travel with long text beside them */
@media (min-width: 961px) { .split > .sec-head { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 128px) } }
@media (max-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); gap: 0 }
}
.col { display: grid; gap: 14px; align-content: start; padding-block: 24px 32px; border-top: 2px solid var(--aubergine); min-width: 0 }
.col h3 { margin-bottom: 2px }
.col p:not(.label) { color: var(--aubergine) }
.col .more { margin-top: 6px }
.band .col { border-top-color: var(--white) }

/* Home: hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 64px; align-items: stretch; min-height: min(calc(100svh - 89px), 860px) }
.hero-copy { display: grid; gap: 28px; align-content: center; padding-block: 56px 64px; min-width: 0 }
.hero-copy .display { font-size: clamp(2.25rem, 1.2rem + 3.3vw, 3.5rem); max-width: none }
.hero-copy .lede { max-width: 30em }
.hero-copy .intro { max-width: 36em; color: var(--slate) }
.hero-photo { position: relative; min-width: 0; margin: 0 }
.hero-photo img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; object-position: 50% 16% }
.hero-award { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 1rem; line-height: 1.35; color: var(--slate) }
.hero-award b { font: 700 1rem/1.25 var(--f-display); color: var(--aubergine) }
@media (min-width: 1100px) { .hero-photo { margin-right: calc(-1 * (max(0px, (100vw - var(--page)) / 2) + 48px)) } }
@media (min-width: 720px) and (max-width: 1099px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 0 40px; min-height: 0 }
  .hero-photo { margin-right: -32px }
}
@media (max-width: 719px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0 }
  .hero-copy { display: flex; flex-direction: column; gap: 22px; padding-block: 28px 48px }
  .hero-copy .label { order: 1 }
  .hero-copy .display { order: 2; font-size: clamp(2rem, 1.2rem + 3.6vw, 2.5rem) }
  .hero-copy .lede { order: 3 }
  .hero-copy .actions { order: 4 }
  .hero-copy .actions .btn { flex: 1 1 100% }
  .hero-copy .intro { order: 5 }
  .hero-award { order: 6 }
  .hero-photo { order: -1; margin-inline: -16px }
  .hero-photo img { min-height: 0; height: auto; aspect-ratio: 3 / 2; object-position: 50% 14% }
}

/* Home: proof strip, the first screen's one aubergine field */
.proof .wrap { padding-block: clamp(64px, 6vw, 96px) 48px }
.proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 32px }
.proof-list li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 20px; align-content: start; color: var(--on-dark-soft); font-size: 1.125rem; line-height: 1.45 }
.proof-list .figure { font-size: clamp(3.25rem, 1.6rem + 4.4vw, 5.5rem); letter-spacing: -0.035em; color: var(--copper-light); padding-bottom: 20px; border-bottom: 2px solid var(--copper-light) }
.proof-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--aubergine-700); font-size: 1rem; color: var(--on-dark-soft) }
@media (max-width: 760px) { .proof-list { grid-template-columns: minmax(0, 1fr); gap: 32px } .proof-list li { grid-row: auto; grid-template-rows: none; row-gap: 14px } }

/* Home: the plan-to-shelf diagram */
.gap-diagram { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 2fr); border-bottom: 2px solid var(--copper); margin-top: 8px }
.gap-diagram > div { padding: 24px 24px 28px 0; display: grid; gap: 10px; align-content: start; min-width: 0 }
.gap-diagram .gap { padding-inline: 24px; border-inline: 1px dashed var(--slate) }
.gap-diagram .end { padding-left: 24px; padding-right: 0 }
.gap-diagram h3 { font-size: 1.375rem }
.lenses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin-top: 8px }
.lenses li { display: grid; gap: 6px; align-content: start }
.lenses b { font: 700 1.25rem/1.2 var(--f-display) }
.lenses span { font-size: 1rem; line-height: 1.5; color: var(--slate) }
@media (max-width: 860px) {
  .gap-diagram { grid-template-columns: minmax(0, 1fr) }
  .gap-diagram > div, .gap-diagram .end { padding: 20px 0 }
  .gap-diagram .gap { padding-inline: 0; border-inline: 0; border-block: 1px dashed var(--slate) }
  .lenses { grid-template-columns: minmax(0, 1fr) }
}

/* Photos */
.photo { display: grid; gap: 12px; min-width: 0 }
.photo img { width: 100%; object-fit: cover }
.photo figcaption { font-size: 1rem; line-height: 1.5; color: var(--slate) }
.ratio-4-5 img { aspect-ratio: 4 / 5 }
.ratio-1 img { aspect-ratio: 1 }
.ratio-4-3 img { aspect-ratio: 4 / 3 }

/* Closing call to action */
.cta-band .wrap { padding-block: clamp(80px, 8vw, 112px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end }
.cta-band h2 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; max-width: 16em }
.cta-band .cta-copy { display: grid; gap: 20px }
.cta-band .cta-side { display: grid; gap: 18px; justify-items: start }
.cta-band .email { font-size: 1rem; color: var(--on-dark-soft) }
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr) } }
.cta-quiet .wrap { padding-block: var(--above-section); display: grid; gap: 24px; max-width: var(--page) }
.cta-quiet .inner { border-top: 2px solid var(--aubergine); padding-top: 40px; display: grid; gap: 20px; max-width: 46em }

/* Quiet line for beauty brands, above the footer */
.side-door .wrap { padding-block: 32px }
.side-door p { font-size: 1rem; color: var(--slate) }

/* Footer */
.site-footer { background: var(--white); border-top: 1px solid var(--rule) }
.site-footer .wrap { padding-block: 56px 40px; display: grid; gap: 48px }
.footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 40px 56px }
.footer-brand { display: grid; gap: 16px; align-content: start }
.footer-brand img { width: 240px }
.footer-brand p { font-size: 1rem; color: var(--slate); max-width: 22em; padding-top: 16px; border-top: 1px solid var(--rule) }
.footer-col { display: grid; gap: 14px; align-content: start }
.footer-col ul { display: grid; gap: 10px }
.footer-col a { color: var(--aubergine); font-size: 1rem }
.footer-col a:hover { color: var(--purple) }
.footer-col p { font-size: 1rem }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 1rem; color: var(--slate) }
.footer-bottom a { color: var(--slate) }
@media (max-width: 860px) { .footer-top { grid-template-columns: minmax(0, 1fr) 1fr } .footer-brand { grid-column: 1 / -1 } }
@media (max-width: 600px) {
  .site-footer .wrap { padding-block: 40px 32px; gap: 32px }
  .footer-top { gap: 28px 24px }
  .footer-brand img { width: 180px }
  .footer-col ul { gap: 0 }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px }
}

/* In-page navigation (Expertise) */
.jump { border-block: 1px solid var(--rule); margin-top: 56px }
.jump .wrap { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-block: 18px }
.jump span { font: 500 1rem/2.75 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate) }
.jump a { font-weight: 600; font-size: 1rem }

/* Offer sections (Expertise) */
.offer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 72px; align-items: start }
.offer-main { display: grid; gap: 24px; min-width: 0 }
.offer-main .prose { gap: 18px }
.offer-aside { display: grid; gap: 32px; min-width: 0 }
@media (max-width: 960px) { .offer { grid-template-columns: minmax(0, 1fr) } }
.outcomes { display: grid; gap: 0; border-top: 2px solid var(--aubergine) }
.outcomes li { display: grid; gap: 6px; padding-block: 16px; border-bottom: 1px solid var(--rule) }
.outcomes .label { color: var(--slate) }
.uses { display: grid; gap: 0; border-top: 1px solid var(--rule) }
.uses li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 20px; padding-block: 16px; border-bottom: 1px solid var(--rule) }
.uses .label { font: 700 1.125rem/1.45 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--aubergine) }
@media (max-width: 520px) { .uses li { grid-template-columns: minmax(0, 1fr) } }

/* 30/70 balance bar */
.balance { display: grid; gap: 12px }
.balance-bar { display: grid; grid-template-columns: 3fr 7fr; height: 56px; border: 2px solid var(--aubergine) }
.balance-bar span { display: flex; align-items: center; padding-inline: 14px; font: 700 1.125rem/1 var(--f-display); font-variant-numeric: tabular-nums }
.balance-bar span:first-child { background: var(--white); color: var(--aubergine) }
.balance-bar span:last-child { background: var(--aubergine); color: var(--white) }
.balance-key { display: grid; grid-template-columns: 3fr 7fr; gap: 0; font-size: 1rem; line-height: 1.4; color: var(--slate) }
.balance-key span { padding-inline: 16px 12px }

/* Capability areas */
.areas .col h3 { font: 500 1rem/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper) }
.areas .col .area-name { font: 700 1.375rem/1.27 var(--f-display); color: var(--aubergine) }
.areas .col p { color: var(--slate); font-size: 1rem; line-height: 1.55 }

/* Commercial chain */
.chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--aubergine); counter-reset: c }
.chain li { counter-increment: c; display: grid; gap: 10px; align-content: start; padding: 20px 20px 24px 0; border-right: 1px solid var(--rule); min-width: 0 }
.chain li + li { padding-left: 20px }
.chain li:last-child { border-right: 0 }
.chain li::before { content: counter(c); font: 500 1rem/1 var(--f-mono); color: var(--copper) }
.chain b { font: 700 1.125rem/1.3 var(--f-display) }
.chain span { font-size: 1rem; line-height: 1.5; color: var(--slate) }
@media (max-width: 960px) {
  .chain { grid-template-columns: minmax(0, 1fr) }
  .chain li, .chain li + li { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--rule) }
}

/* Situations */
.situations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 2px solid var(--aubergine) }
.situations li { display: grid; gap: 8px; padding-block: 22px 26px; border-bottom: 1px solid var(--rule) }
.situations b { font: 700 1.25rem/1.3 var(--f-display) }
@media (max-width: 760px) { .situations { grid-template-columns: minmax(0, 1fr) } }

/* Symptoms table (Expertise "where it shows up") */
.symptoms { display: grid; border-top: 2px solid var(--aubergine) }
.symptoms li { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4px 24px; padding-block: 16px; border-bottom: 1px solid var(--rule) }
.symptoms b { font-weight: 600 }
@media (max-width: 640px) { .symptoms li { grid-template-columns: minmax(0, 1fr) } }
.costs { font: 700 clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem)/1.3 var(--f-display); letter-spacing: -0.01em; max-width: 30em }

/* Approach: lenses, steps, measures */
.lens { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 56px; padding-block: 32px 36px; border-top: 2px solid var(--aubergine) }
.lens:last-child { border-bottom: 1px solid var(--rule) }
.lens h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em }
.lens-body { display: grid; gap: 18px; min-width: 0 }
.lens-body dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px 20px; border-top: 1px solid var(--rule); padding-top: 18px }
.lens-body dt { font: 700 1rem/1.6 var(--f-display); color: var(--aubergine) }
@media (max-width: 760px) { .lens { grid-template-columns: minmax(0, 1fr) } .lens-body dl { grid-template-columns: minmax(0, 1fr); gap: 4px } .lens-body dd { margin-bottom: 12px } }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; border-top: 2px solid var(--aubergine) }
.steps li { counter-increment: s; display: grid; gap: 12px; align-content: start; padding: 22px 24px 28px 0; min-width: 0 }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--rule) }
.steps li::before { content: "Step " counter(s); font: 500 1rem/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper) }
.steps b { font: 800 1.75rem/1.1 var(--f-display); letter-spacing: -0.015em }
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0 }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--rule) }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr) }
  .steps li, .steps li + li { padding: 20px 0; border-left: 0 }
  .steps li + li { border-top: 1px solid var(--rule) }
}
.pull { font: 700 clamp(1.5rem, 1.15rem + 1.2vw, 2rem)/1.28 var(--f-display); letter-spacing: -0.015em; max-width: 26em }
.pull-cite { font-size: 1rem; color: var(--slate) }

/* Career and impact */
.records { display: grid; border-top: 2px solid var(--aubergine) }
.record { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 16px 48px; padding-block: 36px 40px; border-bottom: 1px solid var(--rule) }
.record-context { display: grid; gap: 8px; align-content: start }
.record-context .where { color: var(--slate); font-size: 1rem }
.record-body { display: grid; gap: 14px; align-content: start; min-width: 0 }
.record-figures { display: grid; gap: 22px; align-content: start }
.record-figures div { display: grid; gap: 8px }
.record-figures .figure + span { font-size: 1rem; line-height: 1.45; color: var(--slate) }
.figure.is-input { font-size: 1.75rem; color: var(--aubergine); letter-spacing: -0.01em }
.record-figures .figure:not(.is-input) { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); letter-spacing: -0.035em }
@media (max-width: 960px) { .record { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) } .record-figures { grid-column: 2 } }
@media (max-width: 640px) { .record { grid-template-columns: minmax(0, 1fr) } .record-figures { grid-column: auto } }
.employers { display: grid; border-top: 2px solid var(--aubergine) }
.employers li { font: 700 clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem)/1.3 var(--f-display); letter-spacing: -0.01em; padding-block: 14px; border-bottom: 1px solid var(--rule) }
.note { font-size: 1rem; line-height: 1.5; color: var(--slate); max-width: 46em }
.functions { columns: 2; column-gap: 40px }
.functions li { break-inside: avoid; padding-block: 10px; border-bottom: 1px solid var(--rule) }
@media (max-width: 560px) { .functions { columns: 1 } }

/* About */
.about-head .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 72px; align-items: end; padding-top: clamp(56px, 6vw, 96px) }
.about-head .head-copy { display: grid; gap: 24px; padding-bottom: clamp(32px, 4vw, 64px) }
.about-head .photo img { aspect-ratio: 4 / 5; object-position: 50% 10% }
@media (max-width: 860px) { .about-head .wrap { grid-template-columns: minmax(0, 1fr) } .about-head .photo { max-width: 360px; order: -1 } .about-head .head-copy { padding-bottom: 0 } }
.records-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding-block: 16px; border-bottom: 1px solid var(--rule); align-items: baseline }
.records-list { border-top: 2px solid var(--aubergine) }
.records-list .when { font: 500 1rem/1.4 var(--f-mono); color: var(--slate); white-space: nowrap }
@media (max-width: 560px) { .records-list li { grid-template-columns: minmax(0, 1fr) } }
.awards { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 56px; align-items: start }
.award-photos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start }
.award-photos .photo:first-child img { aspect-ratio: 4 / 3 }
.award-photos .photo:last-child img { aspect-ratio: 8 / 9; object-position: 50% 30% }
figure.photo:has(img[src*="panel-speaking"]) { max-width: 320px; justify-self: end }
@media (max-width: 960px) { .offer-aside .photo { max-width: 440px } figure.photo:has(img[src*="panel-speaking"]) { justify-self: start } }
@media (max-width: 960px) { .awards { grid-template-columns: minmax(0, 1fr) } }

/* Insights: diagnostic */
.diag { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 56px; padding-block: 36px 40px; border-top: 2px solid var(--aubergine) }
.diag-head { display: grid; gap: 12px; align-content: start }
.diag-head h2, .diag-head h3 { font-size: clamp(1.625rem, 1.3rem + 0.9vw, 1.875rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.015em }
.diag-head .lede { font-size: 1.125rem }
.diag-body { display: grid; gap: 24px; min-width: 0 }
.test { border-left: 2px solid var(--aubergine); padding: 4px 0 4px 20px; display: grid; gap: 8px }
.test p:last-child { font-weight: 600 }
@media (max-width: 760px) { .diag { grid-template-columns: minmax(0, 1fr) } }

/* Insights: the 10-question check */
.check { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px 56px; align-items: start }
@media (max-width: 960px) { .check { grid-template-columns: minmax(0, 1fr) } }
.check fieldset { border: 0; margin: 0; padding: 0; min-width: 0 }
.check-group + .check-group { margin-top: 40px }
.check-group legend { padding: 0; margin-bottom: 12px; font: 800 1.5rem/1.2 var(--f-display); letter-spacing: -0.015em }
.check-group ol { border-top: 2px solid var(--aubergine) }
.q { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--rule) }
.q.is-no { background: var(--aubergine-tint) }
.q-num { align-self: start; font: 500 1rem/1.6 var(--f-mono); color: var(--slate); padding-left: 4px }
.q-text { min-width: 0 }
.yn { display: flex; gap: 0 }
.yn label { position: relative; display: inline-flex }
.yn input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.yn span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 48px; padding: 8px 14px; border: 2px solid var(--purple); color: var(--purple); background: var(--white); font: 600 1rem/1 var(--f-body); cursor: pointer }
.yn label + label span { border-left-width: 0 }
.yn input:checked + span { background: var(--purple); color: var(--white) }
.yn input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px }
@media (max-width: 640px) { .q { grid-template-columns: 2rem minmax(0, 1fr) } .yn { grid-column: 2 } }
.tally { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 112px); display: grid; gap: 18px; padding: 24px; border: 2px solid var(--aubergine) }
.tally h3 { font-size: 1.25rem }
.tally ul { display: grid; border-top: 1px solid var(--rule) }
.tally li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding-block: 12px; border-bottom: 1px solid var(--rule); align-items: baseline }
.tally li b { font-weight: 600 }
.tally .count { font: 500 1rem/1.4 var(--f-mono); color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap }
.tally li.has-no .count { color: var(--copper) }
.tally li a { grid-column: 1 / -1; font-size: 1rem }
.tally .reset { justify-self: start; background: none; border: 0; padding: 0; color: var(--purple); font: 600 1rem/1.4 var(--f-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer }
@media (max-width: 960px) { .tally { position: static } }

/* Forms */
.form { display: grid; gap: 24px; max-width: 40em }
.field { display: grid; gap: 8px; min-width: 0 }
.field label, .field legend { font-weight: 600; font-size: 1.0625rem }
.field .opt { font-weight: 400; color: var(--slate) }
.field .hint { font-size: 1rem; color: var(--slate) }
.field input, .field select, .field textarea { width: 100%; min-height: 56px; padding: 14px 16px; border: 1px solid #BDB5C6; border-bottom: 2px solid var(--aubergine); border-radius: 0; background: var(--white); color: var(--aubergine); font: 400 1.125rem/1.4 var(--f-body); appearance: none }
.field input::placeholder, .field textarea::placeholder { color: #6E6876 }
.field textarea { min-height: 160px; resize: vertical }
.field textarea.short { min-height: 88px }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--aubergine) 50%), linear-gradient(135deg, var(--aubergine) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--purple); outline-offset: 0 }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 4px 0 0 var(--error) }
.field .error { color: var(--error); font-size: 1rem; font-weight: 600 }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
@media (max-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr) } .form-foot { justify-items: stretch } .form-foot .btn { width: 100% } }
.check-field { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 1rem; line-height: 1.5 }
.check-field input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--purple) }
.form-foot { display: grid; gap: 14px; justify-items: start }
.form-foot .small { color: var(--slate) }
.form-status { display: grid; gap: 16px; padding: 28px; border: 2px solid var(--aubergine); max-width: 40em }
.form-status h3 { font-size: 1.5rem }
.form-status .preview-note { font-size: 1rem; color: var(--slate); padding-top: 14px; border-top: 1px solid var(--rule) }
.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px }
.copy-line code { font: 500 1rem/1.4 var(--f-mono); color: var(--aubergine); user-select: all; overflow-wrap: anywhere }
.copy-btn { background: none; border: 0; padding: 0; color: var(--purple); font: 600 1rem/1.4 var(--f-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer }
.on-dark .copy-line code { color: var(--white) }
.on-dark .copy-btn { color: var(--white) }

/* Framework download page */
.download { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "copy form" "cover form"; gap: 40px 72px; align-items: start }
.download-copy { grid-area: copy }
.download-form { grid-area: form }
.download-cover { grid-area: cover; max-width: 360px }
.download-cover img { width: 100%; border: 1px solid var(--rule) }
@media (max-width: 960px) { .download { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "cover" "form" } .download-cover { max-width: 280px } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px 72px; align-items: start }
.contact-aside { display: grid; gap: 40px }
.contact-aside .block { display: grid; gap: 12px; padding-top: 20px; border-top: 2px solid var(--aubergine) }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr) } }

/* Beauty advisory: the side door, used more quietly */
.hour { display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); border: 2px solid var(--aubergine); max-width: 40em }
.hour .price { font: 800 2rem/1 var(--f-display); font-variant-numeric: tabular-nums }
.sources { font-size: 1rem; color: var(--slate); display: grid; gap: 6px }

/* Legal and utility pages */
.legal { max-width: 44em; display: grid; gap: 20px }
.legal h2 { margin-top: 40px }
.legal ul { display: grid; gap: 10px }
.legal li { position: relative; padding-left: 28px }
.legal li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: 2px; background: var(--aubergine) }

@media print {
  .site-header, .site-footer, .side-door, .cta-band, .menu-button, .jump { display: none !important }
  body { font-size: 12pt }
  .band { background: none; color: var(--aubergine) }
}

/* Small layout helpers */
.wide { max-width: none }
.chain-intro { margin-block: 12px 28px; max-width: var(--prose); color: var(--slate) }
.after-pull { margin-top: 20px }
.offer { padding-top: 40px; border-top: 2px solid var(--aubergine) }
.offer + .offer { margin-top: var(--above-section) }
.offer .pull { max-width: 22em }
.sec.first { padding-top: clamp(56px, 6vw, 96px) }
.form-panel { display: grid; gap: 20px; padding: clamp(24px, 3vw, 40px); border: 2px solid var(--aubergine) }
.form-panel .form-status { border: 0; padding: 0 }
.about-head .shelf + .lede { margin-top: 20px }
.hour .form { margin-top: 8px }
.hour .form-status { border: 0; padding: 0 }

.after-grid { margin-top: 32px }

/* ---------------------------------------------------------------------------------------------
   Visuals. Icons are aubergine line drawings with one copper square, the square that ends the logo.
   Charts: results in copper, the base in a quiet lilac grey, values always written out.
   --------------------------------------------------------------------------------------------- */
:root { --viz-base: #CFC7D8; --viz-panel: var(--aubergine-tint) }
.icon { display: block; flex: none; color: var(--aubergine); width: var(--icon, 48px); height: var(--icon, 48px) }
.icon :is(path, circle, rect, line, polyline, ellipse) { vector-effect: non-scaling-stroke }
.icon .ac { fill: var(--copper); stroke: none }
.on-dark .icon { color: var(--white) }
.on-dark .icon .ac { fill: var(--copper-light) }
.icon-lg { --icon: 64px }
.icon-sm { --icon: 40px }
.viz-note { font-size: 1rem; line-height: 1.45; color: var(--slate) }
.on-dark .viz-note { color: var(--on-dark-soft) }
.key-sq { display: inline-block; width: 14px; height: 14px; background: var(--copper); margin-right: 10px; vertical-align: -1px }

/* Indexed bars */
.bars { display: grid; gap: 14px }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; gap: 6px 12px; align-items: end }
.bar-row .bar-label { grid-area: label }
.bar-row .bar-value { grid-area: value }
.bar-row .bar-track { grid-area: track }
.bar-label { font-size: 1rem; line-height: 1.25; color: var(--slate) }
.bar-track { display: block; height: 24px }
.bar { display: block; height: 100%; background: var(--viz-base) }
.is-acc .bar { background: var(--copper) }
.bar-value { font: 700 1.125rem/1 var(--f-display); font-variant-numeric: tabular-nums; text-align: right }
.on-dark .bar-label { color: var(--on-dark-soft) }
.on-dark .bar { background: rgba(255, 255, 255, 0.34) }
.on-dark .is-acc .bar { background: var(--copper-light) }

/* Square counts: outlets and share points */
.sq { display: flex; flex-wrap: wrap; gap: 4px }
.sq i { display: block; width: 14px; height: 14px; background: var(--viz-base) }
.sq i.a { background: var(--copper) }
.outlets { display: grid; gap: 12px }
.outlet-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; gap: 6px 12px; align-items: end }
.outlet-row .bar-label { grid-area: label }
.outlet-row .bar-value { grid-area: value }
.outlet-row .sq { grid-area: track; flex-wrap: nowrap }
.outlet-row .sq i { flex: 0 1 14px; min-width: 6px; height: 14px; width: auto }
.waffle-wrap { display: grid; gap: 12px; justify-items: start }
.waffle { display: grid; grid-template-columns: repeat(10, 14px); gap: 4px }
.waffle i { display: block; width: 14px; height: 14px; background: var(--viz-base) }
.waffle i.a { background: var(--copper) }

/* Plan versus actual */
.gap-chart { display: grid; gap: 12px; min-width: 0 }
.gap-plot { position: relative; aspect-ratio: 2 / 1; margin-right: 76px }
.gap-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.gap-plot path { fill: none; vector-effect: non-scaling-stroke }
.gap-plot .g-grid { stroke: var(--rule); stroke-width: 1 }
.gap-plot .g-axis { stroke: var(--aubergine); stroke-width: 2 }
.gap-plot .g-area { fill: var(--copper); fill-opacity: 0.16; stroke: none }
.gap-plot .g-plan { stroke: var(--aubergine); stroke-width: 2; stroke-dasharray: 7 6 }
.gap-plot .g-actual { stroke: var(--aubergine); stroke-width: 3 }
.g-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--aubergine); box-shadow: 0 0 0 2px var(--white) }
.g-dot.plan { background: var(--white); box-shadow: inset 0 0 0 2px var(--aubergine), 0 0 0 2px var(--white) }
.g-tag { position: absolute; left: calc(100% + 16px); transform: translateY(-50%); font: 700 1rem/1 var(--f-display); white-space: nowrap }
.g-gap { position: absolute; left: 96%; top: 46%; transform: translate(-100%, -50%); font: 800 1.25rem/1.1 var(--f-display); color: var(--copper); white-space: nowrap }
@media (max-width: 560px) { .gap-plot { margin-right: 64px; aspect-ratio: 4 / 3 } .g-gap { top: 47%; font-size: 1.125rem } }

/* Small report charts */
.spark { display: block; width: 100%; height: auto; overflow: visible }
.spark .s-axis { stroke: var(--aubergine); stroke-width: 2; fill: none }
.spark .s-bar { fill: var(--aubergine) }
.spark .s-bar2 { fill: var(--copper) }
.spark .s-plan { stroke: var(--aubergine); stroke-width: 4; fill: none }
.spark .s-line { stroke: var(--aubergine); stroke-width: 3; fill: none; stroke-linejoin: round }
.spark .s-line2 { stroke: var(--copper); stroke-width: 3; fill: none; stroke-linejoin: round }
.spark .s-plan-line { stroke: var(--viz-base); stroke-width: 3; fill: none }
.spark .s-end { fill: var(--copper); stroke: var(--white); stroke-width: 2 }

/* Venn */
.venn { display: grid; gap: 16px; justify-items: center; min-width: 0 }
.venn svg { width: 100%; max-width: 420px; height: auto }
.venn .v-c { fill: var(--aubergine); fill-opacity: 0.06; stroke: var(--aubergine); stroke-width: 2 }
.venn .v-t { font: 800 22px var(--f-display); fill: var(--aubergine) }
.venn .v-ac { fill: var(--copper) }
.venn figcaption { font-size: 1rem; color: var(--slate) }

/* Dot-matrix map */
.map { position: relative; min-width: 0 }
.map-svg { display: block; width: 100%; height: auto }
.map .m-land { fill: var(--rule) }
.map .m-na, .map .m-wa { fill: var(--aubergine) }
.map .m-ng { fill: var(--copper) }
.map-tag { position: absolute; transform: translate(-50%, -50%); background: var(--white); padding: 6px 10px; font: 700 1rem/1.1 var(--f-display); white-space: nowrap; box-shadow: 0 0 0 2px var(--aubergine) }
.map-tag.ng { box-shadow: 0 0 0 2px var(--copper) }
.map-key { display: none }
@media (max-width: 640px) {
  .map-tag { display: none }
  .map-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 1rem }
  .map-key li { display: flex; align-items: center; gap: 10px }
  .map-key i { width: 14px; height: 14px; background: var(--aubergine) }
  .map-key .mk-ng { background: var(--copper) }
}

.hero { position: relative; overflow: hidden }


/* Home: problem with the plan-versus-actual chart */
.problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; margin-bottom: var(--below-headline) }
.problem .sec-head { margin-bottom: 0 }
@media (max-width: 960px) { .problem { grid-template-columns: minmax(0, 1fr) } }

/* Cards and panels with icons */
.cards .col { gap: 14px; padding-top: 24px }
.cards .col h3 { font-size: 1.375rem }
@media (min-width: 720px) { .cards { grid-template-rows: auto auto } .cards .col { grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px } }
.panel { display: grid; gap: 14px; align-content: start; padding-top: 28px; border-top: 2px solid var(--aubergine); min-width: 0 }
.panel .icon { margin-bottom: 8px }
.panel h3 { margin-bottom: 4px }
@media (min-width: 720px) { .panels { grid-template-rows: repeat(5, auto); row-gap: 0 } .panels .panel { grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px } .panel .more { align-self: end; padding-top: 6px } }
@media (max-width: 719px) { .panels { gap: 40px } }

/* Plan to shelf bridge */
.bridge { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 2fr); gap: 0; align-items: stretch }
.bridge-end { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 24px; border: 2px solid var(--aubergine); min-width: 0 }
.bridge-end .icon { margin-bottom: 8px }
.bridge-end .small { color: var(--slate) }
.bridge-end.is-result { background: var(--aubergine); color: var(--white) }
.bridge-end.is-result h3 { color: var(--white) }
.bridge-end.is-result .small { color: var(--on-dark-soft) }
.bridge-gap { position: relative; display: grid; gap: 24px; align-content: start; padding: 28px 40px 32px; background: var(--aubergine-tint); min-width: 0 }
.bridge-gap::before, .bridge-gap::after { content: ""; position: absolute; top: 58px; width: 28px; height: 2px; background: var(--aubergine) }
.bridge-gap::before { left: 0 }
.bridge-gap::after { right: 0 }
.bridge-gap-head { display: grid; gap: 10px }
.bridge-lenses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.bridge-lenses li { display: grid; gap: 8px; align-content: start; padding: 22px 20px 24px; background: var(--white); min-width: 0 }
.bridge-lenses .icon { margin-bottom: 6px }
.bridge-lenses b { font: 800 1.375rem/1.15 var(--f-display) }
.bridge-lenses span { font-size: 1rem; line-height: 1.5; color: var(--slate) }
@media (max-width: 960px) {
  .bridge { grid-template-columns: minmax(0, 1fr) }
  .bridge-gap { padding: 28px 20px 24px }
  .bridge-gap::before, .bridge-gap::after { top: auto; left: 40px; right: auto; width: 2px; height: 20px }
  .bridge-gap::before { top: 0 }
  .bridge-gap::after { bottom: 0 }
  .check-split { grid-template-columns: minmax(0, 1fr) }
  .problem .gap-chart { max-width: 640px }
}
@media (max-width: 599px) { .bridge-lenses { grid-template-columns: minmax(0, 1fr) } }

/* Four steps */
.steps-line { display: grid; gap: 24px }
.steps-intro { font: 700 1.375rem/1.3 var(--f-display) }
.stepper { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.stepper li { position: relative; display: grid; gap: 6px; justify-items: start; align-content: start; min-width: 0 }
.stepper li:not(:last-child)::after { content: ""; position: absolute; top: 33px; left: 68px; right: -16px; height: 2px; background: var(--aubergine) }
.stepper .icon { box-sizing: content-box; padding: 8px; background: var(--white); border: 2px solid var(--aubergine); margin-bottom: 12px }
.stepper b { font: 800 1.5rem/1.1 var(--f-display); letter-spacing: -0.015em }
@media (max-width: 640px) {
  .stepper { grid-template-columns: minmax(0, 1fr); gap: 20px }
  .stepper li:not(:last-child)::after { left: 33px; right: auto; top: 68px; bottom: -20px; width: 2px; height: auto }
  .stepper li { grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center }
  .stepper .icon { grid-row: span 2; margin-bottom: 0 }
}

/* Photo collage */
.collage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0 }
.collage .c-main img { aspect-ratio: 4 / 3; object-position: 56% 30% }
.collage .c-inset img { aspect-ratio: 16 / 9; object-position: 50% 36% }
.collage-cap { font-size: 1rem; color: var(--slate); max-width: 28em }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; padding-block: 20px; border-block: 1px solid var(--rule) }
.stats li { display: grid; gap: 6px; align-content: start }
.stats b { font: 800 clamp(2.25rem, 1.8rem + 1.4vw, 3rem)/1 var(--f-display); color: var(--copper); letter-spacing: -0.01em }
.stats span { font-size: 1rem; line-height: 1.4; color: var(--slate) }
@media (max-width: 480px) { .stats { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 4px } .stats li { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; gap: 16px; padding-block: 12px } .stats li + li { border-top: 1px solid var(--rule) } }


/* Home: the check, shown as the framework cover with a question card */
.check-visual { position: relative; padding: 0 0 56px 0; min-width: 0; max-width: 520px }
.check-visual .cv-cover { width: 66%; margin-left: auto; box-shadow: 0 0 0 1px var(--rule) }
.cv-card { position: absolute; left: 0; bottom: 0; width: 64%; display: grid; gap: 12px; padding: 22px 22px 24px; background: var(--white); box-shadow: 0 0 0 2px var(--aubergine); color: var(--aubergine); text-decoration: none }
@media (hover: hover) { .cv-card:hover { box-shadow: 0 0 0 2px var(--purple); color: var(--aubergine) } }
.cv-q { font: 700 1.125rem/1.35 var(--f-display) }
.cv-q { display: block }
.cv-yn { display: flex }
.cv-yn span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; border: 2px solid var(--aubergine); font-weight: 600; font-size: 1rem }
.cv-yn span + span { border-left: 0 }
.cv-yn .is-on { background: var(--aubergine); color: var(--white) }
@media (max-width: 520px) { .cv-card { position: relative; width: auto; margin-top: -64px } .check-visual { padding: 0 } .check-visual .cv-cover { width: 70% } }

/* Career: employer wall */
.employer-wall { margin-top: 64px }
.employer-wall .employers-row { border-block: 2px solid var(--aubergine) }
.employers-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) }
.employers-row li { display: flex; align-items: center; min-height: 112px; padding: 20px; font: 800 clamp(1.25rem, 1rem + 0.7vw, 1.625rem)/1.15 var(--f-display); letter-spacing: -0.015em; border-left: 1px solid var(--rule) }
.employers-row li:first-child { border-left: 0; padding-left: 0 }
.employers-row li:last-child { padding-right: 0 }
@media (max-width: 960px) { .employers-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px } .employers-row li { min-height: 80px; border-left: 0; padding-inline: 0; border-bottom: 1px solid var(--rule) } .employers-row li:last-child { border-bottom: 0 } }

/* Career: the two sides of the commercial chain */
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px }
.side { display: grid; gap: 16px; align-content: start; padding-top: 22px; border-top: 2px solid var(--aubergine); min-width: 0 }
.side-head { display: flex; align-items: center; gap: 16px }
.side ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--rule) }
.side li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--rule); font: 700 1.125rem/1.25 var(--f-display) }
.side li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--aubergine) }
.side-span { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px 32px; padding: 28px 32px; border-top: 0; background: var(--aubergine); color: var(--white) }
.side-span .label { color: var(--on-dark-soft) }
.side-span .icon { color: var(--white) }
.side-span .icon .ac { fill: var(--copper-light) }
.side-span ul { border-top-color: var(--aubergine-700) }
.side-span li { color: var(--white); border-bottom-color: var(--aubergine-700) }
.side-span li::before { background: var(--white) }
@media (max-width: 760px) { .sides { grid-template-columns: minmax(0, 1fr) } .side ul { grid-template-columns: minmax(0, 1fr) } .side-span { grid-template-columns: minmax(0, 1fr) } }

/* Career: records with their charts */
.record { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); padding-block: 44px 48px }
.record-figures { gap: 20px }
.fig-sep { padding-top: 18px; border-top: 1px solid var(--rule) }
.journey { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding-top: 4px }
.j-node { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 18px; border: 2px solid var(--aubergine); font: 800 1.25rem/1 var(--f-display) }
.j-node.is-acc { background: var(--copper); border-color: var(--copper); color: var(--white) }
.j-line { position: relative; height: 2px; background: var(--aubergine); margin-inline: 0 10px }
.j-line::after { content: ""; position: absolute; right: 0; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--aubergine); border-right: 0 }
.j-line b { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font: 700 1rem/1 var(--f-display); color: var(--aubergine); white-space: nowrap }
.badge-line { display: flex; align-items: center; gap: 14px; font-size: 1rem; line-height: 1.4; color: var(--slate) }
.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.moves li { display: grid; gap: 4px; justify-items: start; padding: 16px 14px 18px; border: 2px solid var(--aubergine) }
.moves .icon { --icon: 40px; margin-bottom: 8px }
.moves b { font: 800 1.125rem/1.1 var(--f-display) }
.moves span { font-size: 1rem; color: var(--slate) }
.moves .is-acc { background: var(--copper); border-color: var(--copper); color: var(--white) }
.moves .is-acc b, .moves .is-acc span { color: var(--white) }
.moves .is-acc .icon { color: var(--white) }
.moves .is-acc .icon .ac { fill: var(--white) }
@media (max-width: 960px) { .record { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) } .record-figures { grid-column: 2 } }
@media (max-width: 640px) { .record { grid-template-columns: minmax(0, 1fr) } .record-figures { grid-column: auto } }

/* Expertise: the reports where it shows up */
.reports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.report { display: grid; grid-template-rows: auto auto auto 1fr; gap: 14px; padding: 24px 24px 28px; border: 1px solid var(--rule); border-top: 2px solid var(--aubergine); min-width: 0 }
.report b { font: 700 1.25rem/1.25 var(--f-display) }
.report .spark { padding: 8px 0 4px }
.report > span:last-child { font-size: 1rem; line-height: 1.5; color: var(--slate) }
.reports-note { margin: -24px 0 24px }
.s-key { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 1rem; line-height: 1.4; color: var(--aubergine) }
.report .s-key span { display: inline-flex; align-items: center; gap: 8px; color: var(--aubergine) }
.s-key i { flex: none; width: 18px; height: 4px; background: var(--aubergine) }
.s-key i.k-c { background: var(--copper) }
@media (max-width: 960px) { .reports { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) { .reports { grid-template-columns: minmax(0, 1fr) } }

/* Expertise: what it costs */
.costs-band .wrap { padding-block: clamp(72px, 7vw, 104px); display: grid; gap: 32px }
.costs-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 }
.costs-list li { display: grid; gap: 20px; align-content: start; padding: 28px 24px 8px 0; border-top: 2px solid var(--copper-light); font: 800 clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem)/1.2 var(--f-display); letter-spacing: -0.01em; color: var(--white) }
.costs-list li + li { padding-left: 24px; border-left: 1px solid var(--aubergine-700) }
.costs-last { font: 700 clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem)/1.35 var(--f-display); color: var(--on-dark-soft); max-width: 34em }
@media (max-width: 960px) { .costs-list { grid-template-columns: repeat(2, minmax(0, 1fr)) } .costs-list li:nth-child(3) { padding-left: 0; border-left: 0 } }
@media (max-width: 520px) { .costs-list { grid-template-columns: minmax(0, 1fr) } .costs-list li, .costs-list li + li { padding: 20px 0 16px; border-left: 0 } }
.band + .sec { padding-top: var(--above-section) }

/* Expertise: six situations as cards */
.situations-grid { row-gap: 8px }
.situations-grid .col h3 { font-size: 1.25rem; line-height: 1.3 }

/* Expertise: offers */
.offer-main > .icon { margin-bottom: 4px }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; align-items: stretch }
.flow li { position: relative; display: flex; align-items: center; padding: 18px 20px; font: 700 1.125rem/1.25 var(--f-display); min-width: 0 }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -26px; top: calc(50% - 6px); width: 24px; height: 12px; background: linear-gradient(var(--aubergine), var(--aubergine)) 0 5px / 16px 2px no-repeat; clip-path: polygon(0 5px, 16px 5px, 16px 0, 24px 6px, 16px 12px, 16px 7px, 0 7px) }
.flow .flow-in { border: 2px solid var(--aubergine) }
.flow .flow-mid { background: var(--aubergine-tint) }
.flow .flow-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px; padding: 0 }
.flow .flow-out span { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; background: var(--aubergine); color: var(--white); font-size: 1rem; hyphens: manual }
@media (max-width: 640px) { .flow { grid-template-columns: minmax(0, 1fr); gap: 24px } .flow li:not(:last-child)::after { right: auto; left: 24px; top: auto; bottom: -22px; width: 2px; height: 20px; background: var(--aubergine); clip-path: none } }

.outcomes li { padding: 16px 0 }

/* Expertise: capability areas and the commercial chain */
.chain li { gap: 12px }
.chain { border-top: 0; padding-top: 0 }
.chain li { position: relative; padding-top: 40px; border-top: 2px solid var(--aubergine) }
.chain li::before { position: absolute; top: -17px; left: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--aubergine); color: var(--white); font: 700 1rem/1 var(--f-display); letter-spacing: 0 }
.chain li + li::before { left: 20px }
@media (max-width: 960px) { .chain li, .chain li + li { padding-top: 40px; margin-top: 24px; border-bottom: 0 } .chain li + li::before { left: 0 } }

/* Expertise: the diagnostic flow beside the core offer */
.diag-flow { display: grid; gap: 0; justify-items: stretch }
.diag-flow > * { position: relative }
.df-step { padding: 18px 20px; border: 2px solid var(--aubergine); font: 700 1.125rem/1.25 var(--f-display) }
.df-step.is-out { background: var(--aubergine); color: var(--white) }
.df-q { padding: 28px 0 12px 20px; font-size: 1rem; color: var(--slate); border-left: 2px solid var(--aubergine); margin-left: 32px }
.df-lenses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; background: var(--aubergine-tint) }
.df-lenses span { display: grid; gap: 8px; justify-items: center; padding: 14px 8px; background: var(--white); font: 700 1.0625rem/1.2 var(--f-display) }
.df-lenses + .df-step { margin-top: 28px }
.df-lenses + .df-step::before { content: ""; position: absolute; left: 30px; top: -30px; width: 2px; height: 28px; background: var(--aubergine) }

/* Approach: symptoms above the line, causes below */
.iceberg { display: grid; gap: 0 }
.ice-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 0 0 28px }
.chips { display: flex; flex-wrap: wrap; gap: 10px }
.chips li { padding: 12px 18px; background: var(--aubergine-tint); font: 800 1.25rem/1 var(--f-display) }
.ice-line { display: flex; align-items: center; gap: 14px; padding: 14px 0 40px; border-top: 2px solid var(--copper); font: 700 1.125rem/1.3 var(--f-display); color: var(--aubergine) }
.ice-label { margin-bottom: 16px }
.ice-below { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--aubergine) }
.ice-below li { display: grid; align-content: start; padding: 20px 20px 24px 0; font: 700 1.125rem/1.35 var(--f-display); min-width: 0 }
.ice-below li + li { padding-left: 20px; border-left: 1px solid var(--rule) }
@media (max-width: 1060px) { .ice-below { grid-template-columns: minmax(0, 1fr) } .ice-below li, .ice-below li + li { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--rule) } }

/* Approach: quote with a photo */
.quote-block { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px 56px; align-items: start; padding-top: 40px; border-top: 2px solid var(--aubergine) }
.quote-block blockquote { display: grid; gap: 24px; margin: 0 }
.quote-photo { max-width: 280px }
.quote-photo img { object-position: 50% 8% }
@media (max-width: 760px) { .quote-block { grid-template-columns: minmax(0, 1fr) } .quote-photo { max-width: 200px } }

/* Approach: the framework */
.framework-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: center; margin-bottom: var(--below-headline) }
.framework-head .sec-head { margin-bottom: 0 }
@media (max-width: 960px) { .framework-head { grid-template-columns: minmax(0, 1fr) } .framework-head .venn { justify-items: start } }
.lens-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.lens-card { display: grid; grid-template-rows: auto auto auto 1fr; gap: 16px; padding-top: 28px; border-top: 4px solid var(--aubergine); min-width: 0 }
.lens-card h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em }
.lens-card dl { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--rule) }
.lens-card dl > div { display: grid; gap: 8px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule) }
.lens-card dt { display: flex; align-items: center; gap: 10px; font: 700 1rem/1.4 var(--f-display); color: var(--aubergine) }
.lens-card dt::before { content: ""; width: 12px; height: 12px; flex: none }
.lens-card .is-strong dt::before { background: var(--aubergine) }
.lens-card .is-weak dt::before { box-shadow: inset 0 0 0 2px var(--aubergine) }
.lens-card dd { margin: 0; font-size: 1rem; line-height: 1.5 }
@media (max-width: 960px) { .lens-cards { grid-template-columns: minmax(0, 1fr) } }

/* Approach: what the diagnostic looks at */
.evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.evidence { gap: 0 32px; border-top: 2px solid var(--aubergine) }
.evidence li { display: flex; align-items: center; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--rule); font: 700 1.0625rem/1.3 var(--f-display) }
@media (max-width: 520px) { .evidence { grid-template-columns: minmax(0, 1fr) } }

/* Approach: the four steps in full */
.stepper-full { gap: 24px }
.stepper-full li:not(:last-child)::after { right: -24px }
.stepper-full p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--slate) }
@media (max-width: 960px) and (min-width: 641px) { .stepper-full { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px } .stepper-full li:nth-child(2)::after { display: none } }
@media (max-width: 640px) { .stepper-full li { grid-template-columns: auto minmax(0, 1fr) } .stepper-full .icon { grid-row: span 3; align-self: start } .stepper-full p { grid-column: 2 } .stepper-full li:not(:last-child)::after { bottom: -28px } }

/* Approach: measures */
.measures { gap: 16px }
.tick-list { display: grid; gap: 0; border-top: 1px solid var(--rule) }
.tick-list li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--rule) }
.tick-list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 14px; height: 8px; border-left: 2px solid var(--aubergine); border-bottom: 2px solid var(--aubergine); transform: rotate(-45deg) }
.panel .tick-list { border-top-color: #D9D1E0 }
.panel .tick-list li { border-bottom-color: #D9D1E0 }

/* About */
.sub-title { margin-bottom: 24px }
.about-head .stats { margin-top: 8px }
.employer-box { display: grid; gap: 0; border-block: 2px solid var(--aubergine) }
.employer-box .employers-row li { min-height: 96px }
.markets { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 0; border-top: 1px solid var(--rule) }
.markets p:first-of-type { font: 700 1.125rem/1.3 var(--f-display); margin-right: auto }
.rule-list.dated li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline }
.when { font: 500 1rem/1.4 var(--f-mono); color: var(--slate); white-space: nowrap }
@media (max-width: 560px) { .rule-list.dated li { grid-template-columns: minmax(0, 1fr) } }
.award-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px }
.award-cards li { display: grid; gap: 12px; align-content: start; padding: 22px 0 28px; border-top: 2px solid var(--aubergine) }
.award-cards .year { font: 500 1rem/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--slate) }
.award-cards b { font: 800 1.375rem/1.25 var(--f-display); letter-spacing: -0.01em }
@media (max-width: 380px) { .award-cards { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 600px) { .award-cards b { font-size: 1.125rem } }
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px }
.timeline li { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 76px; border-top: 2px solid var(--aubergine); min-width: 0 }
.timeline .t-year { position: absolute; top: 20px; left: 0; font: 800 clamp(2rem, 1.6rem + 1.2vw, 2.75rem)/1 var(--f-display); color: var(--aubergine); letter-spacing: -0.02em }
.timeline b { font: 700 1.0625rem/1.35 var(--f-display) }

@media (max-width: 860px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0 }
  .timeline li { grid-template-columns: 5rem minmax(0, 1fr); column-gap: 20px; padding: 18px 0 20px; border-top: 1px solid var(--rule) }
  .timeline li:first-child { border-top: 2px solid var(--aubergine) }
  .timeline .t-year { position: static; grid-row: span 2; font-size: 1.75rem }
}

/* Insights */
.lens-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin-top: 56px }
.lens-jump a { display: grid; gap: 14px; align-content: start; padding: 22px 0 24px; border-top: 2px solid var(--aubergine); color: var(--aubergine); text-decoration: none; font: 700 1.125rem/1.3 var(--f-display) }
.lens-jump a span { color: var(--purple); text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 5px }
@media (hover: hover) { .lens-jump a:hover { border-top-color: var(--purple) } .lens-jump a:hover span { text-decoration-thickness: 3px } }
@media (max-width: 860px) { .lens-jump { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

.diag-head .icon { margin-bottom: 8px }
.test { padding: 4px 0 4px 22px; border-left: 2px solid var(--aubergine); background: none; gap: 10px }
.seq-list { counter-reset: sq; display: grid; gap: 8px }
.seq-list li { counter-increment: sq; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; border: 1px solid var(--rule) }
.seq-list li::before { content: counter(sq); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--aubergine); color: var(--white); font: 700 1rem/1 var(--f-display) }
.tally li { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center }
.meter { display: flex; gap: 4px }
.meter i { width: 16px; height: 16px; box-shadow: inset 0 0 0 2px var(--viz-base) }
.meter i.on { background: var(--copper); box-shadow: none }

/* Contact */
.contact-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center }
.contact-person img { width: 96px; aspect-ratio: 1; object-fit: cover; object-position: 50% 10% }
.contact-person figcaption { display: grid; gap: 2px }
.contact-person b { font: 700 1.125rem/1.25 var(--f-display) }
.contact-person span { font-size: 1rem; color: var(--slate) }
.next-steps { counter-reset: ns; display: grid; gap: 0; border-top: 1px solid var(--rule) }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--rule) }
.next-steps li::before { content: counter(ns); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--aubergine); color: var(--white); font: 700 1rem/1 var(--f-display) }

/* Beauty */
.market-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px }
.market-stats li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid var(--aubergine) }
.market-stats b { font: 800 2.25rem/1 var(--f-display); letter-spacing: -0.02em; color: var(--aubergine) }
.market-stats span { font-size: 1rem; line-height: 1.4; color: var(--slate) }
.share-bar { display: block; height: 8px; margin-top: 8px; background: var(--aubergine-tint) }
.share-bar i { display: block; height: 100%; background: var(--aubergine) }
@media (max-width: 560px) { .market-stats { grid-template-columns: minmax(0, 1fr) } }
.beauty-proof { display: grid; grid-template-columns: minmax(0, 1fr); border-block: 1px solid var(--rule) }
.beauty-proof > div { display: grid; gap: 8px; align-content: start; padding: 24px 0 }
.beauty-proof > div + div { border-top: 1px solid var(--rule) }
.beauty-proof .figure { white-space: nowrap }
.beauty-proof span:not(.figure) { font-size: 1rem; line-height: 1.45; color: var(--slate) }

/* Framework download page */
.download-cover { max-width: 460px; display: grid; gap: 16px }
.pages-stack { position: relative; padding: 0 0 6% 0 }
.pages-stack img { display: block; border: 1px solid var(--rule); background: var(--white); box-shadow: 0 2px 0 rgba(22, 8, 34, 0.04) }
.pages-stack .pg-cover { position: relative; z-index: 3; width: 56%; margin-left: 44% }
.pages-stack .pg-a { position: absolute; z-index: 2; width: 50%; left: 18%; top: 5% }
.pages-stack .pg-b { position: absolute; z-index: 1; width: 46%; left: 0; top: 11% }
@media (max-width: 960px) { .download-cover { max-width: 420px } }

/* Phones and tablets: long stacks of equal cards become a row you swipe through */
@media (max-width: 600px) {
  .reports, .panels { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-rows: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 12px; scroll-padding-inline: 16px; overscroll-behavior-x: contain }
  .reports > *, .panels > * { scroll-snap-align: start; grid-row: auto }
  .panels .panel { grid-template-rows: none }
  .award-cards, .lens-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px }
}
@media (max-width: 960px) {
  .lens-cards { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 420px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter, 16px)); padding: 0 var(--gutter, 16px) 12px; scroll-padding-inline: var(--gutter, 16px); overscroll-behavior-x: contain }
  .lens-cards > * { scroll-snap-align: start }
}
@media (min-width: 720px) { :root { --gutter: 32px } }

/* Insights: on small screens the running count sits at the bottom of the screen while you answer */
.tally-mini { display: none }
@media (max-width: 960px) {
  .tally-mini { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 24px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); margin-inline: -16px; background: var(--aubergine); color: var(--white); font-size: 1rem }
  .tally-mini b { font-weight: 600 }
  .tally-mini span { white-space: nowrap }
  .tally-mini i { margin-left: 4px; font: 500 1rem/1 var(--f-mono); font-style: normal; color: var(--copper-light) }
  .q { grid-template-columns: 2.5rem minmax(0, 1fr) }
  .yn { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; max-width: 320px }
  .yn label, .yn span { width: 100% }
  .yn span { min-height: 52px }
}
@media (min-width: 720px) and (max-width: 960px) { .tally-mini { margin-inline: -32px } }

/* Charts and bars ease in once, when they scroll into view */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .gap-plot svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1) }
  .js-anim .gap-plot .g-dot, .js-anim .gap-plot .g-tag, .js-anim .gap-plot .g-gap { opacity: 0; transition: opacity .4s ease .9s }
  .js-anim .gap-chart.is-in .gap-plot svg { clip-path: inset(0 0 0 0) }
  .js-anim .gap-chart.is-in .g-dot, .js-anim .gap-chart.is-in .g-tag, .js-anim .gap-chart.is-in .g-gap { opacity: 1 }
}