/* CRM Strategy — the design.
   Lifted verbatim from site/design-v13.17-proto.html, with the Evidence page
   additions from site/evidence-v1.35-proto.html and the How we work additions from
   site/how-we-work-v4.19-proto.html and the Thank you page's from site/thank-you-v1.13-proto.html
   and the Start page's from site/start-v2.9-proto.html and the Community engagement page's
   from site/community-engagement-v3.20-proto.html and the Discussion papers pages' from
   site/papers-request-v1.16-proto.html and the Creatio page's from site/creatio-v1.5-proto.html
   at the end, by builds/theme-v2.36.0.py.
   Only the prototype banner rules are left out. Do not edit here: change the
   prototype and regenerate. */

:root {
  /* All six colours are the logo's own. */
  --paper:   #FFFFFF;
  --paper-2: #F4F5F9;
  --ink:     #0E1137;   /* logo navy */
  --ink-2:   #464B68;
  --ink-3:   #6E7390;
  --rule:    #E1E3EE;
  --accent:  #00468C;   /* logo water */
  --accent-h:#003570;
  --tint:    #EEF0F7;
  --lilac:   #DBDDEC;
  --sky:     #798ABB;
  --gold:    #F4AF23;   /* the waterline. Marks only, never text on white */

  --deep:    #0E1137;   /* iceberg navy */
  --deep-2:  rgba(255,255,255,.1);
  --abyss:   #0E1137;
  --on-deep: #FFFFFF;
  --on-deep-2:#C3C6DC;
  --on-deep-3:#8C91B3;

  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --wrap: 72rem;
  --gut:  clamp(1rem, 4vw, 2.5rem);
  --read: 38rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1.1875rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-h); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header ─────────────────────────────────────────── */
.hdr { border-bottom: 1px solid var(--rule); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.5rem; }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.brand svg { width: 2.2rem; height: 2.58rem; flex: none; }
.nav { display: flex; align-items: center; gap: 2rem; font-size: .9375rem; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: #fff !important; text-decoration: none;
  font: 600 .9375rem/1 var(--sans); padding: .85rem 1.2rem; border-radius: 6px; border: 0; cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--accent-h); }
.btn.sm { padding: .6rem .9rem; }
.link { font-weight: 600; font-size: .9375rem; text-decoration: none; }
.link:hover { text-decoration: underline; }
/* The header's four links and two buttons need about 1030px on one line, so
   below 1120px the text links fold into a menu behind the Menu button, and
   never wrap. Below 560px "Book a time" folds in too, and below 440px "Start a
   conversation". Open, the menu holds all five. */
.nav a { white-space: nowrap; }
.nav .btn.line { background: transparent; color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent); margin-right: -1.25rem; }
.nav .btn.line:hover { background: var(--tint); }
.menu-btn { display: none; }
@media (max-width: 1120px) {
  .nav a:not(.btn) { display: none; }
  .hdr { position: relative; z-index: 20; }
  .menu-btn { display: block; position: relative; flex: none; width: 2.5rem; height: 2.5rem; margin-left: -.75rem; padding: 0;
    border: 0; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
  .menu-btn:hover { background: var(--tint); }
  .menu-btn::before, .menu-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1.5px;
    margin: -.75px 0 0 -.625rem; background: currentColor; }
  .menu-btn::before { box-shadow: 0 -6px currentColor, 0 6px currentColor; }
  .menu-btn::after { display: none; }
  .hdr.open .menu-btn::before { box-shadow: none; transform: rotate(45deg); }
  .hdr.open .menu-btn::after { display: block; transform: rotate(-45deg); }
  .hdr.open .nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem;
    padding: .25rem var(--gut) 1.5rem; background: var(--paper); border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 24px -20px rgba(14,17,55,.35); }
  .hdr.open .nav a:not(.btn) { display: block; grid-column: 1 / -1; padding: .9rem 0; border-bottom: 1px solid var(--rule);
    font-size: 1.0625rem; color: var(--ink); }
  .hdr.open .nav .btn { display: flex; justify-content: center; margin: 1.5rem 0 0; padding: .85rem 1.2rem; }
}
@media (max-width: 560px) { .nav .btn.line { display: none; } }
@media (max-width: 440px) {
  .nav .btn:not(.line) { display: none; }
  .hdr.open .nav { grid-template-columns: 1fr; }
  .hdr.open .nav .btn + .btn { margin-top: .75rem; }
}

/* ── Hero ───────────────────────────────────────────
   The gold waterline is the hero's divider: headline above it, the
   explanation below it, and the logo's iceberg standing across it. Tip and
   body are two SVGs of equal width that meet exactly on the line. */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 3rem;
  grid-template-rows: auto auto auto; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.hero .top { grid-area: 1 / 1; align-self: end; padding-bottom: 1.75rem; }
.hero .bot { grid-area: 3 / 1; padding-top: 1.75rem; }
.kicker { font-size: .875rem; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; margin-bottom: 1.5rem; }
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 600;
  max-width: 12.5ch;
}
/* Three fixed lines, so the headline never reflows as the middle word changes. */
.hero h1 .hl, .hero h1 .hw { display: block; white-space: nowrap; }
/* The changing word. Letters sink into an invisible waterline one by one;
   the next word rises out of it as an outline, then fills in, the same
   lines-then-colour order as the iceberg's draw-on. */
.hw .ch { display: inline-block; color: var(--ink); -webkit-text-stroke: 1.4px transparent;
  clip-path: polygon(-12% -25%, 112% -25%, 112% 135%, -12% 135%);
  transition: clip-path 440ms cubic-bezier(.3,.7,.3,1) var(--d, 0ms), color 360ms ease var(--f, 0ms), -webkit-text-stroke-color 360ms ease var(--f, 0ms); }
.hw.outline .ch { color: transparent; -webkit-text-stroke-color: var(--ink); }
.hw.under .ch { clip-path: polygon(-12% 135%, 112% 135%, 112% 135%, -12% 135%); }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); max-width: 33rem; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }

.hero .wl { grid-area: 2 / 1 / 3 / -1; height: 3px; background: var(--gold); margin-right: calc(50% - 50vw); transform-origin: left center; }
.berg-air, .berg-sub { grid-column: 2; justify-self: end; width: min(100%, 21rem); margin-right: 1.5rem; }
.berg-air { grid-row: 1; align-self: end; margin-bottom: -1px; }
.berg-sub { grid-row: 3; align-self: start; margin-top: -1px; }
.berg-air svg, .berg-sub svg { display: block; width: 100%; height: auto; overflow: visible; }
.lines polygon { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lines.over polygon  { stroke-width: 1.5; }
.lines.under polygon { stroke-width: 1.3; }
/* The logo's own colours, at full strength. */
.f-w { fill: #FFFFFF; } .f-l { fill: var(--lilac); }
.f-g { fill: var(--gold); } .f-s { fill: var(--sky); } .f-n { fill: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .hero .wl { transform: scaleX(0); animation: sweep 1000ms cubic-bezier(.6,0,.2,1) 150ms forwards; }
  .lines.over polygon  { stroke-dashoffset: 1; animation: draw 900ms cubic-bezier(.4,0,.2,1) calc(550ms + var(--i) * 70ms) forwards; }
  .lines.under polygon { stroke-dashoffset: 1; animation: draw 1100ms cubic-bezier(.4,0,.2,1) calc(1100ms + var(--i) * 90ms) forwards; }
  .fills { opacity: 0; animation: fade 900ms ease 1800ms forwards; }
  @keyframes sweep { to { transform: scaleX(1); } }
  @keyframes draw  { to { stroke-dashoffset: 0; } }
  @keyframes fade  { to { opacity: 1; } }
}
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .berg-air, .berg-sub { display: none; }
}

/* ── Sections (light) ──────────────────────────────── */
.sec { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.sec-grid { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem 3rem; }
.rail { font-size: .875rem; font-weight: 600; color: var(--ink-3); padding-top: .55rem; }
.sec h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 600; max-width: 20ch; }
.sec .intro { margin-top: 1rem; color: var(--ink-2); max-width: var(--read); }
@media (max-width: 820px) { .sec-grid { grid-template-columns: 1fr; gap: .75rem; } .rail { padding-top: 0; } }

/* ── Self-test ─────────────────────────────────────── */
.qt { margin-top: 2.75rem; }
#qtStage { max-width: 46rem; }
.qt-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .875rem; color: var(--ink-3); margin-bottom: 1.25rem; }
.ticks { display: flex; gap: 4px; }
.ticks i { width: 1.6rem; height: 3px; background: var(--rule); border-radius: 2px; transition: background .2s; }
.ticks i.on { background: var(--gold); }
.qt-ask { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; font-weight: 600; letter-spacing: -.015em; margin-bottom: 1.5rem; }
.qt-opts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.qt-opt {
  width: 100%; display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; gap: .75rem;
  text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: 1.05rem .5rem 1.05rem 0; font: 400 1.0625rem/1.45 var(--sans); color: var(--ink); cursor: pointer;
  transition: background .12s, padding .12s;
}
.qt-opt:hover { background: var(--tint); padding-left: .75rem; }
.qt-opt .k { font-size: .8125rem; font-weight: 600; color: var(--accent); text-transform: uppercase; }
.qt-foot { display: flex; justify-content: space-between; margin-top: 1rem; font-size: .8125rem; color: var(--ink-3); }
.qt-back { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.qt-res { border-top: 3px solid var(--gold); padding-top: 1.75rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 2rem 3.5rem; align-items: start; }
.qt-res[hidden] { display: none; }
.qt-res .lbl { font-size: .875rem; font-weight: 600; color: var(--ink-3); }
.qt-verdict { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; margin-top: .4rem; }
.qt-verdict:focus { outline: none; }
.qt-body { margin-top: 1rem; color: var(--ink-2); max-width: var(--read); }
.qt-rec { margin-top: 1.75rem; padding: 1.25rem 1.4rem; background: var(--paper-2); border-radius: 8px; max-width: var(--read); }
.qt-rec .rl { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-3); margin-bottom: .2rem; }
.qt-rec b { display: block; font-size: 1.0625rem; }
.qt-rec p { font-size: 1rem; color: var(--ink-2); margin-top: .35rem; }
.qt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.75rem; }

/* The verdict graphic: your answers, plotted. Fit up, readiness across;
   the tinted corner is our work. Each leg of the traverse is one answer. */
.qt-plot { margin: 2.1rem 0 0; }
.qt-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.qt-plot text { font-family: var(--sans); font-weight: 600; }
.pl-quad  { fill: var(--lilac); }
.pl-grid  { stroke: var(--rule); stroke-width: .75; }
.pl-band  { stroke: var(--sky); stroke-width: .6; stroke-dasharray: 2 2; }
.pl-frame { stroke: var(--ink); stroke-width: 1; fill: none; }
.pl-tick  { stroke: var(--ink-3); stroke-width: .75; }
.pl-qlbl  { fill: var(--accent); font-size: 7.2px; letter-spacing: 1.2px; }
.pl-axis  { fill: var(--ink-3); font-size: 7.4px; letter-spacing: 1.4px; }
.pl-path  { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; opacity: .7; }
.pl-dots  { fill: var(--accent); }
.pl-cross { stroke: var(--ink-3); stroke-width: .6; stroke-dasharray: 2 2; }
.pl-ring  { fill: none; stroke: var(--gold); stroke-width: 2; }
.pl-dot   { fill: var(--gold); stroke: var(--ink); stroke-width: .9; }
.qt-ping { fill: none; stroke: var(--gold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center;
  animation: qt-ping 2600ms cubic-bezier(.22,.7,.2,1) infinite; }
@keyframes qt-ping { 0% { transform: scale(.5); opacity: 0; } 10% { opacity: .9; } 65% { transform: scale(2.7); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qt-ping { animation: none; opacity: 0; } }
.qt-plot-cap { font-size: .8125rem; line-height: 1.5; color: var(--ink-3); margin-top: .6rem; }
.qt-plot-cap b { color: var(--ink); font-weight: 600; }
@media (max-width: 960px) { .qt-res { grid-template-columns: 1fr; } .qt-plot { max-width: 24rem; margin-top: 0; } }

/* ── The deep ──────────────────────────────────────── */
.deep { background: var(--deep); color: var(--on-deep); }
.deep .rail { color: var(--on-deep-3); }
.deep .intro { color: var(--on-deep-2); }
.deep a:not(.btn) { color: #fff; }
.deep .btn { background: var(--gold); color: var(--abyss) !important; }
.deep .btn:hover { background: #FFC24A; }
.deep :focus-visible { outline-color: var(--gold); }
.why p + p { margin-top: 1rem; }
/* The iceberg band keeps its own, original colourway. */
.berg-sec :focus-visible { outline-color: var(--on-deep); }
.berg-sec {
  --deep: #0B1138; --deep-2: #141D52;
  --on-deep: #EDEFFC; --on-deep-2: #A9B0DE; --on-deep-3: #6E77B0;
}

.berg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(3rem, 6vw, 4.5rem); align-items: start; }
.fig { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; cursor: ns-resize; }
.fig svg { display: block; width: 100%; height: auto; }
.handle {
  position: absolute; right: 0; transform: translateY(-50%);
  display: flex; align-items: center; gap: .5rem;
  background: var(--on-deep); color: var(--deep); border: 0; border-radius: 999px;
  font: 600 .8125rem/1 var(--sans); padding: .55rem .8rem .55rem .7rem; cursor: grab;
  box-shadow: 0 0 0 6px rgba(237,239,252,.12);
}
.handle:active { cursor: grabbing; }
.handle svg { width: .75rem; height: .75rem; }
.fig-note { margin-top: 1rem; font-size: .875rem; color: var(--on-deep-3); }
.fig-note b { color: var(--on-deep); font-weight: 600; }

.layers { list-style: none; margin: 0; padding: 0; }
.layer { padding: 1rem 0; border-top: 1px solid rgba(169,176,222,.18); position: relative; }
.layer h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.layer p { font-size: .96875rem; line-height: 1.5; color: var(--on-deep-2); margin-top: .2rem; }
.layer .txt { transition: opacity .35s ease, transform .35s ease; }
.waterline-mark { display: flex; align-items: center; gap: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-deep); padding: .6rem 0; }
.waterline-mark::after { content: ""; flex: 1; height: 1px; background: var(--on-deep); opacity: .6; }
/* Occlusion: nothing under the line is readable until it's reached. */
.layer.hid .txt { opacity: 0; transform: translateY(6px); }
.layer.hid::before, .layer.hid::after {
  content: ""; position: absolute; left: 0; height: .7rem; border-radius: 3px; background: var(--deep-2);
}
.layer.hid::before { top: 1.4rem; width: 55%; }
.layer.hid::after  { top: 3.05rem; width: 80%; }
@media (prefers-reduced-motion: reduce) { .layer .txt { transition: none; } }
@media (max-width: 820px) {
  .berg { grid-template-columns: 1fr; }
  .fig { max-width: 26rem; }
}

/* ── Four steps ────────────────────────────────────── */
.steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem 3rem; max-width: 46rem; counter-reset: s; }
.steps li { border-top: 1px solid var(--ink); padding-top: 1.1rem; counter-increment: s; }
.steps li::before { content: counter(s); display: block; font-size: .875rem; font-weight: 600; color: var(--accent); margin-bottom: .75rem; }
.steps li:first-child { border-top: 3px solid var(--gold); padding-top: calc(1.1rem - 2px); }
.steps h3 { font-size: 1.1875rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.steps p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin-top: .6rem; }
.steps-more { margin-top: 2.5rem; }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ── Fold-outs: the skim stays on the page, the detail is one click away ── */
.more { margin-top: .7rem; }
.more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .875rem; font-weight: 600; color: var(--accent); }
.more summary::-webkit-details-marker { display: none; }
/* The plus and minus are drawn, not typed, so they sit exactly in the middle of the circle whatever the font. */
.more summary::before { content: ""; flex: none; box-sizing: border-box; width: 1.1rem; height: 1.1rem;
  border: 1px solid currentColor; border-radius: 50%;
  background: linear-gradient(currentColor, currentColor) center / .4rem 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px .4rem no-repeat; }
.more[open] summary::before { background: linear-gradient(currentColor, currentColor) center / .4rem 1.5px no-repeat; }
.more summary:hover .mo, .more summary:hover .mc { text-decoration: underline; }
.more .mc, .more[open] .mo { display: none; }
.more[open] .mc { display: inline; }
.more-body { margin-top: .8rem; padding-left: 1rem; border-left: 1px solid var(--rule); }
.more-body p, .steps .more-body p, .layer .more-body p { font-size: .96875rem; line-height: 1.55; color: var(--ink-2); margin-top: 0; }
.more-body p + p, .steps .more-body p + p, .layer .more-body p + p { margin-top: .75rem; }
.deep .more summary { color: var(--on-deep); }
.deep .more-body { border-left-color: rgba(169,176,222,.3); }
.deep .more-body p, .deep .layer .more-body p { color: var(--on-deep-2); }
.steps { align-items: start; }

/* ── Depth: the second half of the iceberg band ───── */
/* The layer copy now runs taller than the figure, so the figure stays alongside it. */
.berg > div:first-child { position: sticky; top: 2rem; }
@media (max-width: 820px) { .berg > div:first-child { position: static; } }
.depth { margin-top: clamp(4rem, 8vw, 6rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid rgba(169,176,222,.18); }

/* ── Close + footer (the deep, again) ──────────────── */
.close h2 { font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; }
.close .intro { font-size: 1.1875rem; }
.close .ctas { padding-bottom: 0; }
.close .tel { color: var(--on-deep-2); font-size: .9375rem; }
.close .tel a { color: var(--on-deep); font-weight: 600; text-decoration: none; }
.ftr { background: var(--abyss); border-top: 1px solid rgba(219,221,236,.14); padding: 2rem 0 2.5rem; font-size: .8125rem; color: #8C91B3; }
.ftr .mk { display: inline-flex; align-items: center; gap: .6rem; }
.ftr .mk svg { width: 1.2rem; height: 1.41rem; }
.ftr .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.ftr a { color: #C0C4DD !important; text-decoration: none; margin-left: 1.25rem; }
.ftr a:first-child { margin-left: 0; }
/* The ISO 27001 mark, reversed for the footer, linked to the Trust centre. */
.ftr .wrap { align-items: center; }
.ftr .iso { display: inline-flex; align-items: center; gap: .75rem; margin-left: 0; }
.ftr .iso img { display: block; width: auto; height: 2.5rem; }
.ftr .iso:hover span { color: #fff; }
/* Home: How we work follows the self-test on the tint band, so the two light sections read apart. The papers
   band uses the tint too. */
.band { background: var(--tint); }
/* A light closing band, where the section above it is navy (the home page's iceberg), so the iceberg, the close
   and the footer don't run together. */
.close:not(.deep) .tel { color: var(--ink-3); }
.close:not(.deep) .tel a { color: var(--ink); font-weight: 600; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent); }
.btn.ghost:hover { background: var(--tint); }

/* ══ Evidence page additions ═══════════════════════════ */
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* Sub-page headline: same face and tracking as the homepage, a size down. */
.hero.sub h1 { font-size: clamp(2.4rem, 5.2vw, 4.25rem); line-height: 1.04; max-width: 14ch; }

/* A case: the brief, the real problem, what it became. Gold marks the
   waterline, which here is the line between the brief and the real problem. */
.case + .case { border-top: 1px solid var(--rule); }
.beats { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; align-items: start; }
.beats li { border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.beats li.wl { border-top: 3px solid var(--gold); padding-top: calc(1.1rem - 2px); }
.beats .bl { display: block; font-size: .875rem; font-weight: 600; color: var(--accent); margin-bottom: .75rem; }
.beats p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.beats p + p { margin-top: .6rem; }
.beats .said { color: var(--ink); font-weight: 500; }
.case .more { margin-top: 2.25rem; max-width: var(--read); }
@media (max-width: 900px) { .beats { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Sector pictogram, top of the left column. Static. */
.rail .glyph { display: block; width: 2.5rem; height: 2.5rem; color: var(--ink); margin-bottom: .9rem; }
.rail .glyph.wide { width: 3.4rem; height: 1.8rem; margin-top: .35rem; }

/* Other work */
.pending { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; max-width: 46rem; }
.pending li { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.pending .bl { display: block; font-size: .875rem; font-weight: 600; color: var(--ink-3); margin-bottom: .6rem; }
.pending h3 { font-size: 1.1875rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.pending p { font-size: 1rem; line-height: 1.55; color: var(--ink-3); margin-top: .5rem; }
@media (max-width: 560px) { .pending { grid-template-columns: 1fr; } }

/* ══ How we work v4 additions ═══════════════════════════ */
.pending .more { margin-top: .9rem; }
.pending .more-body p { color: var(--ink-3); }
.case .more { margin-top: 2.25rem; }
.case .intro { max-width: var(--read); }
.ph { margin-top: 2.25rem; max-width: var(--read); border: 1.5px dashed var(--sky); border-radius: 4px; padding: 1.25rem 1.5rem; }
.ph .bl { display: block; font-size: .875rem; font-weight: 600; color: var(--ink-3); margin-bottom: .4rem; }
.ph p { font-size: 1rem; line-height: 1.55; color: var(--ink-3); }

/* Who has to agree: the September homepage's web (index.html Fig. 6), in the
   logo palette. Gold marks the top edge, as it marks "What you'll have". The
   numbers are real text; the drawing is SVG. */
.agree-intro { margin-top: 3.25rem; max-width: var(--read); }
.agree-intro h3 { font-size: 1.1875rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.agree-intro p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin-top: .5rem; }
.agree { margin: 1.5rem 0 0; background: var(--paper-2); border-top: 3px solid var(--gold); padding: clamp(1.25rem, 3vw, 2rem); }
.agree-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center; }
.agree-art svg { display: block; width: 100%; max-width: 27rem; margin-inline: auto; height: auto; }
/* The fade is on the group: each line's own opacity attribute shows or hides it. */
#agChords { opacity: .55; }
#agChords line { stroke: var(--sky); stroke-width: 1; }
.agree-node { fill: var(--ink); }
.agree-name { font: 600 15px var(--sans); fill: var(--ink-2); }
.agree-lab { font-size: .875rem; font-weight: 600; color: var(--ink-3); }
.agree-big { font-size: clamp(2.75rem, 5vw, 3.5rem); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); margin: .2rem 0 1.4rem; }
.agree-big.g { color: #B77A0C; margin-bottom: 0; }   /* deeper gold: gold as text on a light ground */
.agree-ctl { display: flex; align-items: center; gap: 2.75rem; margin-top: 1.75rem; }   /* room for the grip at either end */
.agree-end { font-size: .875rem; font-weight: 600; color: var(--ink-3); flex: none; }
.agree-track { position: relative; flex: 1 1 auto; height: 1px; background: var(--lilac); cursor: pointer; touch-action: pan-y; }
.agree-track::after { content: ""; position: absolute; inset: -18px 0; }
.agree-marks { position: absolute; inset: 0; }
.agree-marks i { position: absolute; top: -4px; width: 1px; height: 9px; background: var(--sky); transform: translateX(-50%); }
.agree-grip {
  position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: .5rem;
  background: var(--ink); color: #fff; border: 0; border-radius: 999px;
  font: 600 .8125rem/1 var(--sans); padding: .55rem .8rem .55rem .7rem; cursor: ew-resize; touch-action: none;
  box-shadow: 0 0 0 6px rgba(14,17,55,.08);
  transition: left 260ms cubic-bezier(.22,.7,.2,1);
}
.agree-grip::after { content: ""; position: absolute; inset: -14px -18px; }
.agree-grip svg { width: 13px; height: 9px; display: block; }
.agree-say { margin-top: 1.5rem; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--ink); max-width: var(--read); min-height: 3em; }
.agree-names { display: none; font-size: .875rem; line-height: 1.6; color: var(--ink-2); margin-top: .75rem; text-align: center; }
.agree-after { margin-top: 1.5rem; max-width: var(--read); font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 720px) {
  .agree-top { grid-template-columns: minmax(0, 1fr); }
  .agree-read { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .agree-read > div { display: flex; flex-direction: column; justify-content: flex-end; }   /* numbers level when a label wraps */
  .agree-art svg { max-width: 18rem; }
  .agree-big { margin-bottom: 0; }
}
@media (max-width: 620px) { .agree-name { display: none; } .agree-names { display: block; } }
@media (prefers-reduced-motion: reduce) { .agree-grip { transition: none; } }

/* ── The order of work: four steps on one line ───────── */
.flow { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.75rem; counter-reset: f; }
.flow li { position: relative; counter-increment: f; padding-top: 3.9rem; }
.flow li::before { content: counter(f); position: absolute; top: 0; left: 0; z-index: 1; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; box-sizing: border-box; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 1.0625rem; }
.flow li:first-child::before { background: var(--gold); border-color: var(--gold); color: var(--abyss); }
.flow li::after { content: ""; position: absolute; top: 1.375rem; left: 2.75rem; right: -1.75rem; height: 1.5px; background: var(--ink); }
.flow li:last-child::after { display: none; }
.flow h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.flow p { font-size: .96875rem; line-height: 1.5; color: var(--ink-2); margin-top: .5rem; }
.flow p.go { margin-top: .75rem; font-size: .875rem; font-weight: 600; }
@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; }
  .flow li { padding: .45rem 0 2rem 4rem; }
  .flow li::after { top: 2.75rem; bottom: 0; left: 1.3125rem; right: auto; width: 1.5px; height: auto; }
}
/* How we start: Paul's four points, two by two */
.beats.start { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; }
.beats.start + .more { margin-top: 2.25rem; max-width: var(--read); }
.beats.start ~ .pending { margin-top: 3rem; }
@media (max-width: 900px) { .beats.start { grid-template-columns: 1fr; } }

/* ══ Thank you page additions ══════════════════════════ */
/* Centred, with the logo large. The gold line under it is the waterline,
   as on every other page, drawn short. */
.thanks { min-height: calc(100vh - 12rem); display: flex; align-items: center; padding: clamp(4rem, 10vw, 7rem) 0; text-align: center; }
.thanks .wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
.thanks-mark { width: clamp(6rem, 12vw, 8.5rem); height: auto; }
/* The bounce: up 3% and 4px, down, then a smaller bounce, like a ball. Rising eases out, falling eases in. Once. */
.thanks-mark { animation: thanks-bump 700ms 250ms both; transform-origin: 50% 60%; }
@keyframes thanks-bump { 0% { transform: scale(1) translateY(0.0px); animation-timing-function: cubic-bezier(.25,.6,.4,1); } 31.2% { transform: scale(1.03) translateY(-4.0px); animation-timing-function: cubic-bezier(.6,0,.75,.4); } 62.5% { transform: scale(1) translateY(0.0px); animation-timing-function: cubic-bezier(.25,.6,.4,1); } 81.2% { transform: scale(1.01) translateY(-1.3px); animation-timing-function: cubic-bezier(.6,0,.75,.4); } 100% { transform: scale(1) translateY(0.0px); } }
@media (prefers-reduced-motion: reduce) { .thanks-mark { animation: none; } }
.thanks-wl { width: 4.5rem; height: 3px; background: var(--gold); margin: clamp(2rem, 4vw, 2.75rem) 0; }
.thanks h1 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 600; max-width: 14ch; }
.thanks .lede { margin-top: 1.5rem; max-width: 30rem; }

/* ══ Start page additions ══════════════════════════════ */
/* The self-test verdict, carried over. The gold rule marks it as the reader's own. */
.carry { margin-top: 2rem; max-width: var(--read); border-left: 3px solid var(--gold); padding: .2rem 0 .2rem 1.25rem; }
.carry[hidden] { display: none; }
.carry-l { font-size: .875rem; font-weight: 600; color: var(--accent); }
.carry-v { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; margin-top: .4rem; }
.carry-n { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin-top: .4rem; }
.carry-x { margin-top: .75rem; padding: 0; border: 0; background: none; font: 500 .875rem var(--sans); color: var(--accent); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* Gravity Forms, in the site's own look. Written against its own markup, so
   it holds with the plugin's styles on or off (Forms → Settings → Output CSS). */
.form-slot { margin-top: 2.25rem; max-width: var(--read); }
.form-slot .gform_wrapper { margin: 0; font-family: var(--sans); }
/* Twelve columns, as Gravity Forms lays them out: a field set to half width
   in the form editor takes six. */
.form-slot .gform_fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
.form-slot .gfield { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.form-slot .gfield--width-half { grid-column: span 6; }
.form-slot .gfield--width-third { grid-column: span 4; }
.form-slot .gfield--width-two-thirds { grid-column: span 8; }
.form-slot .gfield--width-quarter { grid-column: span 3; }
.form-slot .gfield--width-three-quarter { grid-column: span 9; }
.form-slot .gform_hidden, .form-slot .gfield--type-hidden { display: none; }
.form-slot .gfield_label { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); margin: 0 0 .45rem; padding: 0; }
.form-slot .gfield_required { color: var(--ink-3); font-weight: 400; margin-left: .35rem; font-size: .8125rem; }
.form-slot .gform_wrapper input[type=text], .form-slot .gform_wrapper input[type=email], .form-slot .gform_wrapper input[type=tel],
.form-slot .gform_wrapper textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  font: 400 1rem/1.5 var(--sans); color: var(--ink); background: #fff;
  border: 1px solid var(--lilac); border-radius: 4px; padding: .7rem .85rem; box-shadow: none;
}
.form-slot .gform_wrapper textarea { min-height: 11rem; resize: vertical; }
.form-slot .gform_wrapper input:focus, .form-slot .gform_wrapper textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form-slot .gfield_description { font-size: .8125rem; color: var(--ink-3); margin-top: .4rem; padding: 0; }
.form-slot .gform_footer { margin: 1.75rem 0 0; padding: 0; }
.form-slot .gform_button {
  display: inline-flex; align-items: center; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font: 600 1rem/1 var(--sans);
  padding: .95rem 1.35rem; border-radius: 4px;
}
.form-slot .gform_button:hover { background: var(--accent-h); }
.form-slot .gfield_error input, .form-slot .gfield_error textarea { border-color: #B3261E; }
.form-slot .validation_message, .form-slot .gform_validation_errors { font-size: .875rem; color: #B3261E; margin-top: .4rem; }
.form-slot .gform_validation_errors { border: 1px solid #B3261E; border-radius: 4px; padding: .75rem 1rem; margin: 0 0 1.5rem; background: #fff; box-shadow: none; }
.form-slot .gform_validation_errors h2 { font-size: .9375rem; font-weight: 600; color: #B3261E; margin: 0; }
.form-slot .ginput_recaptcha { margin-top: .25rem; }
@media (max-width: 560px) { .form-slot .gform_fields .gfield { grid-column: 1 / -1; } }
.form-after { margin-top: 1.25rem; font-size: .9375rem; color: var(--ink-3); max-width: var(--read); }
.talk { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); max-width: var(--read); }
.talk h3 { font-size: 1.1875rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.talk p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin-top: .5rem; }
.talk a { font-weight: 600; }

/* ══ Community engagement page additions ═══════════════ */
/* Placeholder box: dashed, so no one mistakes it for finished copy. */
.ph { margin-top: 2.25rem; max-width: var(--read); border: 1.5px dashed var(--sky); border-radius: 4px; padding: 1.25rem 1.5rem; }
.ph .bl { display: block; font-size: .875rem; font-weight: 600; color: var(--ink-3); margin-bottom: .4rem; }
.ph p { font-size: 1rem; line-height: 1.55; color: var(--ink-3); }
.hero .ph { margin-top: 0; }

/* ══ Community engagement v2 ═══════════════════════════ */
.hero.sub h1 { max-width: 13ch; }
.lede-2 { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-3); max-width: 33rem; margin-top: 1rem; }
.hero .ctas { margin-top: 1.75rem; }

.prose p, .prose-p { max-width: var(--read); color: var(--ink-2); }
.prose p + p { margin-top: 1rem; }
.sec h2 + .prose, .sec h2 + .beats { margin-top: 1.5rem; }
.after { margin-top: 1.75rem; max-width: var(--read); color: var(--ink-2); }
.lead-in { color: var(--ink-2); max-width: var(--read); }
.sec h3 { font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; }
.sub-block { margin-top: clamp(3.5rem, 7vw, 5rem); }
.sub-block > h3 + p, .sub-block > h3 + .lead-in { margin-top: .75rem; }
.sub-block.prose > h3 + p { margin-top: .75rem; }
.sub-block .beats { margin-top: 1.75rem; }

/* The thesis statement: the one sentence the page is built on. */
.stmt { margin-top: 2.5rem; max-width: 40rem; padding-left: 1.5rem; border-left: 3px solid var(--gold);
  font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.stmt + .more { margin-top: 1.75rem; }

.beats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
.beats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.plain { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.plain li + li { margin-top: .35rem; }
.beats .plain li { border-top: 0; padding-top: 0; }
.sub-block.cont { margin-top: 2.25rem; }
@media (max-width: 900px) { .beats.two, .beats.four { grid-template-columns: 1fr; gap: 1.75rem; } }
@media (min-width: 561px) and (max-width: 900px) { .beats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Findings */
.sec .intro + .finding { margin-top: 2.5rem; }
.finding { max-width: var(--read); }
.finding + .finding { margin-top: 3rem; }
.finding .bl { display: block; font-size: .875rem; font-weight: 600; color: var(--accent); margin-bottom: .5rem; }
.finding h3 { margin-bottom: .9rem; }
.finding p { color: var(--ink-2); }
.finding p + p, .finding .asked + p { margin-top: 1rem; }
.asked { list-style: none; margin: 1rem 0 0; padding: 0; }
.asked li { font-size: 1.1875rem; font-style: italic; color: var(--ink); padding: .5rem 0 .5rem 1.1rem; border-left: 1px solid var(--sky); }
.finding + .more { margin-top: 2.25rem; }

/* ── The turn: argument ends, product begins ─────────── */
.turn .traits { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.turn .traits li { border-top: 1px solid rgba(195,198,220,.4); padding-top: 1rem; color: var(--on-deep-2); font-size: 1.0625rem; line-height: 1.5; }
.turn .traits li p::first-letter { text-transform: uppercase; }
/* The announcement: the product's own wordmark, reversed, under the gold rule. */
.turn .named { margin-top: 3rem; padding-top: 1.5rem; border-top: 3px solid var(--gold); max-width: 30rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; font-weight: 500; color: var(--on-deep-2); }
.turn .named .rsn { display: block; width: min(100%, 26rem); height: auto; margin-top: 1.1rem; }
@media (max-width: 900px) { .turn .traits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .turn .traits { grid-template-columns: 1fr; gap: 1.25rem; } }
.turn + .case { border-top: 0; }

/* ── The chat: the page's one flourish ───────────────── */
#how h2 { max-width: 22ch; }
#how h2 + .intro { margin-top: 1rem; }
.demo { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.demo .steps { margin: 0; grid-template-columns: 1fr; gap: 1.5rem; max-width: none; }
.demo .steps li::before { margin-bottom: .5rem; }
.demo .steps h3 { font-size: 1.125rem; }
.demo .steps p { margin-top: .35rem; }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } }

.chat { margin: 0; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 18px; padding: 1.25rem 1.25rem 1rem; }
.chat-hd { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--ink-3); padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--rule); }
.chat-hd span:first-child { color: var(--ink); font-weight: 600; }
.chat-hd { align-items: center; }
.chat-logo { display: block; width: auto; height: 1.35rem; }
.chat-log { display: flex; flex-direction: column; gap: .9rem; }
.msg { max-width: 86%; }
.msg p { font-size: 1rem; line-height: 1.5; padding: .75rem 1rem; border-radius: 14px; }
.msg .who { display: block; font-size: .75rem; color: var(--ink-3); margin-top: .3rem; padding: 0 .35rem; }
.msg.me { align-self: flex-end; text-align: right; }
.msg.me p { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; text-align: left; }
.msg.bot p { background: #fff; color: var(--ink); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.typing { display: none; align-self: flex-start; gap: 4px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; border-bottom-left-radius: 4px; padding: .8rem 1rem; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); animation: dot 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.chat figcaption { margin-top: 1.1rem; font-size: .8125rem; color: var(--ink-3); display: flex; justify-content: space-between; gap: 1rem; }
.replay { background: none; border: 0; padding: 0; font: 600 .8125rem var(--sans); color: var(--accent); cursor: pointer; }
.replay:hover { text-decoration: underline; }
/* Playing: each line waits its turn. Without script, or with reduced motion, all of it simply shows. */
.chat.play [data-at] { display: none; }
.chat.play .msg.on { display: block; animation: rise .35s cubic-bezier(.2,.7,.2,1); }
.chat.play .typing.on { display: flex; animation: rise .25s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Forecast */
.forecast { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.forecast h3 + p { margin-top: .75rem; }
.forecast p { color: var(--ink-2); max-width: var(--read); }
.forecast p + p { margin-top: 1rem; }
.notice { margin: .25rem 0 0; }
.note-card { background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 1rem 1.15rem; box-shadow: 0 10px 30px -18px rgba(14,17,55,.35); }
.note-card p { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.note-card .note-hd { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-3); margin-bottom: .4rem; }
.note-hd span:first-child { font-weight: 600; color: var(--ink); }
.scale { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.scale li { font-size: .75rem; font-weight: 600; color: var(--ink-3); padding-top: .6rem; border-top: 6px solid var(--lilac); text-align: center; }
.scale li:nth-child(2) { border-top-color: #BCC3DE; }
.scale li:nth-child(3) { border-top-color: var(--sky); }
.scale li:nth-child(4) { border-top-color: var(--accent); }
.scale li:nth-child(5) { border-top-color: var(--ink); }
.scale li.on { color: var(--ink); position: relative; }
.scale li.on::before { content: ""; position: absolute; left: 50%; top: -15px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); box-sizing: border-box; }
.notice figcaption { margin-top: .9rem; font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 900px) { .forecast { grid-template-columns: 1fr; gap: 2rem; } .notice { max-width: 26rem; } }

.fo-list { margin: .75rem 0 0; padding-left: 1.1rem; }
.fo-list li { font-size: .96875rem; line-height: 1.55; color: var(--ink-2); }
.fo-list li + li { margin-top: .5rem; }
ol.fo-list { margin-top: 0; }
.fo-list b { color: var(--ink); font-weight: 600; }
.sub-block .after + .more, .sub-block .prose-p + .more { margin-top: 1.5rem; }

/* ── Comparison ──────────────────────────────────────── */
.cmp { margin-top: 2.5rem; width: 100%; max-width: 56rem; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--rule); }
.cmp thead th { font-size: 1.125rem; font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: .9rem; }
.cmp thead th span { display: block; font-size: .875rem; color: var(--accent); margin-bottom: .2rem; }
.cmp thead th.wl { border-top: 3px solid var(--gold); padding-top: .9rem; }
.cmp thead td { border-bottom: 1px solid var(--ink); }
.cmp tbody th { width: 11rem; font-size: .875rem; font-weight: 600; color: var(--ink-3); padding-top: 1.1rem; }
.cmp tbody td { color: var(--ink-2); }
.cmp tbody td:last-child { color: var(--ink); }
@media (max-width: 700px) {
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .cmp tbody th, .cmp td { border: 0; padding: 0; }
  .cmp tbody th { margin-bottom: .5rem; }
  .cmp td + td { margin-top: .6rem; }
  .cmp td::before { content: attr(data-l); display: block; font-size: .8125rem; font-weight: 600; color: var(--accent); }
  .cmp td:last-child { border-left: 3px solid var(--gold); padding-left: .75rem; }
}

/* ── Two systems ─────────────────────────────────────── */
.sys { margin: 1.75rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 15rem minmax(0, 1fr); align-items: stretch; max-width: 56rem; }
.sys-box { border: 1px solid var(--ink); border-radius: 10px; padding: 1.25rem 1.4rem; background: #fff; }
.sys-box .bl { display: block; font-size: .875rem; font-weight: 600; color: var(--accent); margin-bottom: .5rem; }
.sys-box .sys-h { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.sys-box p + p { margin-top: .5rem; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.sys-mid { list-style: none; margin: 0; padding: .5rem 0; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.sys-mid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--gold); }
.sig { position: relative; margin: 0 .75rem; text-align: center; padding: .35rem 0 .45rem; }
.sig b, .sig span { width: fit-content; margin-left: auto; margin-right: auto; background: #fff; padding: 0 .35rem; }
.nw { white-space: nowrap; }
.sig .arw { display: block; width: 100%; height: 12px; }
.sig .arw path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sig b { display: block; font-size: .9375rem; font-weight: 600; margin-top: .3rem; }
.sig span { display: block; font-size: .8125rem; line-height: 1.35; color: var(--ink-3); }
.sys figcaption { grid-column: 1 / -1; margin-top: 1rem; font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 760px) {
  .sys { grid-template-columns: 1fr; max-width: 26rem; }
  .sys-mid { padding: 1rem 0; }
  .sig .arw { width: 64px; height: 12px; margin: 0 auto; transform: rotate(90deg); margin-block: 26px; }
}

.asks { list-style: none; margin: 1.25rem 0 0; padding: 0; max-width: var(--read); }
.asks li { font-size: 1.125rem; font-weight: 500; color: var(--ink); padding: .8rem 0; border-top: 1px solid var(--rule); }
.asks li:last-child { border-bottom: 1px solid var(--rule); }
.folds { margin-top: 2.5rem; max-width: var(--read); }
.folds .more + .more { margin-top: 1rem; }

/* ── Questions ───────────────────────────────────────── */
.faq { margin-top: 2rem; max-width: 46rem; border-top: 1px solid var(--rule); }
.faq .q { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.1rem 0; font-size: 1.125rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; box-sizing: border-box; width: 1.25rem; height: 1.25rem; border: 1px solid var(--accent); border-radius: 50%;
  background: linear-gradient(var(--accent), var(--accent)) center / .45rem 1.5px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 1.5px .45rem no-repeat; }
.faq .q[open] summary::after { background: linear-gradient(var(--accent), var(--accent)) center / .45rem 1.5px no-repeat; }
.faq summary:hover { color: var(--accent); }
.faq .q p { padding: 0 2.75rem 1.25rem 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }

/* ── Papers band ─────────────────────────────────────── */
.band + .sec { border-top: 0; }
.band .ctas { margin-top: 1.75rem; }

/* ── Close ───────────────────────────────────────────── */
.deep .btn.ghost { background: transparent; color: var(--on-deep) !important; box-shadow: inset 0 0 0 1px rgba(237,239,252,.55); }
.deep .btn.ghost:hover { background: rgba(255,255,255,.08); }
.close .credit { margin-top: 2.5rem; font-size: .875rem; color: var(--on-deep-3); }

/* ══ Community engagement v3: the short page ═══════════ */
/* The recognition list reads as statements, a touch larger than the open questions. */
.known li { font-size: 1.1875rem; font-weight: 500; }
#problem .lead-in, #papers .lead-in { margin-top: 1.5rem; }
#papers .asks li { font-weight: 400; color: var(--ink-2); font-size: 1.1875rem; }
/* The navy band: text on dark, the wordmark, then the text beside the chat. */
.deep .prose p { color: var(--on-deep-2); }
.turn h2 + .prose { margin-top: 1.5rem; }
.turn .named { margin-top: 2.25rem; }
.turn .named + .prose { margin-top: 2rem; }
/* The chat: its own row under the text, centred on the page, so the band stays balanced. */
.turn .stage { margin-top: clamp(3rem, 6vw, 4.5rem); }
.turn .chat { max-width: 34rem; margin: 0 auto; border-color: transparent; box-shadow: 0 24px 48px -28px rgba(0,0,0,.6); }
#who .beats.four { margin-top: 2rem; }
/* The statement before our response: on white, so there is space before the navy band, in a gold frame
   in line with the headings. The frame draws itself clockwise when it scrolls into view (the script adds
   "armed", then "in"), and the lines rise in after it. Without the script, or with reduced motion, it is
   simply there. */
.callout { padding: clamp(4rem, 8vw, 6rem) 0; }
/* The Resonate band after it opens with the wordmark. */
.callout + .turn .named { margin-top: 0; }
.frame { padding: clamp(2rem, 4vw, 3.25rem);
  background: linear-gradient(var(--gold), var(--gold)) left top / 100% 3px no-repeat, linear-gradient(var(--gold), var(--gold)) right top / 3px 100% no-repeat,
              linear-gradient(var(--gold), var(--gold)) right bottom / 100% 3px no-repeat, linear-gradient(var(--gold), var(--gold)) left bottom / 3px 100% no-repeat; }
.frame { width: fit-content; max-width: 100%; margin: 0 auto; }   /* fits its text, centred on the page as the example chat is */
.co-lead { max-width: 38rem; text-wrap: balance; font-size: clamp(1.9rem, 3.8vw, 2.75rem); line-height: 1.15; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.co-text { max-width: 38rem; margin-top: 1.25rem; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); }
.frame.armed { background-size: 0 3px, 3px 0, 0 3px, 3px 0; }
.frame.armed > * { opacity: 0; transform: translateY(.6rem); }
.frame.in { animation: frame-draw 1.6s cubic-bezier(.5,0,.3,1) forwards; }
.frame.in > * { opacity: 1; transform: none; transition: opacity .7s ease .55s, transform .7s ease .55s; }
.frame.in > * + * { transition-delay: .95s; }
@keyframes frame-draw {
  0%   { background-size: 0 3px, 3px 0, 0 3px, 3px 0; }
  25%  { background-size: 100% 3px, 3px 0, 0 3px, 3px 0; }
  50%  { background-size: 100% 3px, 3px 100%, 0 3px, 3px 0; }
  75%  { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0; }
  100% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; }
}

/* ══ Discussion papers additions ═══════════════════════ */
/* Gravity Forms: the field types the contact form doesn't use — consent,
   checkboxes, radio buttons and drop-downs. */
.form-slot .gform_wrapper select {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  font: 400 1rem/1.5 var(--sans); color: var(--ink); background: #fff;
  border: 1px solid var(--lilac); border-radius: 4px; padding: .7rem .85rem; box-shadow: none;
}
.form-slot .gform_wrapper select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form-slot fieldset.gfield { min-width: 0; }
.form-slot legend.gfield_label { width: 100%; }
.form-slot .ginput_container_consent, .form-slot .gchoice { display: flex; align-items: flex-start; gap: .65rem; }
.form-slot .gchoice + .gchoice { margin-top: .5rem; }
.form-slot .gform_wrapper input[type=checkbox], .form-slot .gform_wrapper input[type=radio] {
  flex: none; width: 1.125rem; height: 1.125rem; margin: .2rem 0 0; accent-color: var(--accent);
}
.form-slot .gform-field-label--type-inline, .form-slot .gfield_consent_label {
  font-size: 1rem; line-height: 1.5; font-weight: 400; color: var(--ink-2); margin: 0; padding: 0;
}
/* A field whose label is set to hidden in the form editor keeps it for screen readers. */
.form-slot .hidden_label > .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-slot .gfield--type-consent { margin-top: -.25rem; }

#details h2 + .intro { margin-top: 1rem; }
#inside .beats.two { margin-top: 2rem; }

/* The papers: one card each, the download at its foot. */
.papers { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 56rem; }
.paper { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 1.75rem 1.75rem 1.5rem; }
.paper .bl { display: block; font-size: .875rem; font-weight: 600; color: var(--accent); }
.paper h3 { margin-top: .6rem; }
.paper .paper-sub { margin-top: .5rem; font-size: 1rem; line-height: 1.45; color: var(--ink-3); }
.paper p:not([class]) { margin-top: 1rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.paper .dl { margin-top: auto; padding-top: 1.75rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.dl-m { font-size: .875rem; color: var(--ink-3); }
#papers .papers + .after { margin-top: 1.5rem; }
@media (max-width: 760px) { .papers { grid-template-columns: 1fr; } .paper { padding: 1.5rem 1.25rem 1.25rem; } }

/* ══ Papers sent ═══════════════════════════════════════ */
/* Co-branded thanks: our mark beside Resonate's wordmark, a hairline between. */
.sent { padding: clamp(4.5rem, 10vw, 7.5rem) 0 clamp(4rem, 9vw, 6.5rem); text-align: center; }
.sent .wrap { display: flex; flex-direction: column; align-items: center; }
.lockup { display: flex; align-items: center; gap: clamp(1.5rem, 3.5vw, 2.5rem); }
.lockup .thanks-mark { width: clamp(4.25rem, 8vw, 5.5rem); height: auto; }
.lockup .sep { width: 1px; align-self: stretch; background: var(--rule); }
.lockup .rs { height: clamp(2.1rem, 4vw, 2.75rem); width: auto; display: block; }
.thanks-mark { animation: thanks-bump 700ms 250ms both; transform-origin: 50% 60%; }
@keyframes thanks-bump { 0% { transform: scale(1) translateY(0.0px); animation-timing-function: cubic-bezier(.25,.6,.4,1); } 31.2% { transform: scale(1.03) translateY(-4.0px); animation-timing-function: cubic-bezier(.6,0,.75,.4); } 62.5% { transform: scale(1) translateY(0.0px); animation-timing-function: cubic-bezier(.25,.6,.4,1); } 81.2% { transform: scale(1.01) translateY(-1.3px); animation-timing-function: cubic-bezier(.6,0,.75,.4); } 100% { transform: scale(1) translateY(0.0px); } }
@media (prefers-reduced-motion: reduce) { .thanks-mark { animation: none; } }
.lockup-cap { margin-top: 1.25rem; font-size: .875rem; color: var(--ink-3); }
.sent .thanks-wl { width: 4.5rem; height: 3px; background: var(--gold); margin: clamp(2rem, 4vw, 2.75rem) 0; }
.sent h1 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 600; max-width: 14ch; }
.sent .lede { margin-top: 1.5rem; max-width: 36rem; text-wrap: balance; }
@media (max-width: 560px) {
  .lockup { flex-direction: column; gap: 1.25rem; }
  .lockup .sep { width: 3rem; height: 1px; align-self: center; }
}

/* The observation: Resonate's app icon as the rail's pictogram. */
.rail .glyph.app { width: 3rem; height: 3rem; border-radius: 22%; }

/* ══ Creatio page additions ══════════════════════════════════════════ */
.hero .note { margin-top: 1.5rem; font-size: .9375rem; color: var(--ink-3); max-width: 33rem; }
.sec .intro + .intro { margin-top: .9rem; }
.ext { margin-top: 1.5rem; font-size: .9375rem; font-weight: 600; }
.fine { margin-top: 2.25rem; max-width: var(--read); font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
/* An analyst's graphic with its attribution (core Image block, style "analyst"). */
.analyst { margin: 2.25rem 0 0; max-width: 30rem; }
.analyst img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; }
.analyst figcaption { margin-top: .75rem; font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
.analyst + .intro { margin-top: 2rem; }

/* ── Testimonials: the clients' own words, under the logo strip, on the tint band ── */
.said { background: var(--tint); }
.said-list { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 52rem; }
.said-list li { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 1.75rem 1.75rem 1.5rem; }
.said-list figure { margin: 0; }
.said-list blockquote { margin: 0; }
.said-org { height: 3rem; display: flex; align-items: center; color: var(--sky); margin-bottom: 1.1rem; }
.said-list blockquote p { font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.4; font-weight: 500; color: var(--ink); letter-spacing: -.005em; text-indent: -.42em; }
.said-list figcaption { margin-top: 1.1rem; font-size: .875rem; line-height: 1.45; color: var(--ink-3); }
.said-list figcaption b { display: block; font-weight: 600; color: var(--ink); font-size: .9375rem; }
.said-list .more { margin-top: 1rem; }
.said-list .more-body p { font-size: .9375rem; }
@media (max-width: 720px) { .said-list { grid-template-columns: 1fr; } .said-list li { padding: 1.5rem 1.25rem 1.25rem; } }

/* ══ Logo strip ════════════════════════════════════════ */
/* Under the hero. Each logo is a one-colour cut-out the page paints, so all of
   them take the same colour; the second run of the list makes the loop seamless. */
.clients { color: var(--sky); padding: 2.25rem 0 2.5rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.clients + .sec { border-top: 0; }
.clients-l { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); font-size: .875rem; font-weight: 600; color: var(--ink-3); }
.mq { margin-top: 1.5rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: flex; width: max-content; animation: march var(--dur, 110s) linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq-run { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.mq-run li { flex: none; padding-right: 4.5rem; }
@keyframes march { to { transform: translateX(-50%); } }
.lg { display: block; width: calc(var(--w) * var(--s, 1)); height: calc(var(--h) * var(--s, 1)); background: currentColor;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat; }
@media (max-width: 560px) { .lg { --s: .8; } .mq-run li { padding-right: 2.75rem; } }
/* Reduced motion: the logos sit still, centred, and wrap. */
@media (prefers-reduced-motion: reduce) {
  .mq { -webkit-mask-image: none; mask-image: none; padding: 0 var(--gut); }
  .mq-track { animation: none; width: auto; justify-content: center; }
  .mq-run { flex-wrap: wrap; justify-content: center; gap: 1.75rem 2.5rem; max-width: var(--wrap); }
  .mq-run li { padding: 0; }
  .mq-run[aria-hidden] { display: none; }
}
.lg-envirosuite { -webkit-mask-image: url(../img/logos/envirosuite.png); mask-image: url(../img/logos/envirosuite.png); }
.lg-doctors { -webkit-mask-image: url(../img/logos/doctors.png); mask-image: url(../img/logos/doctors.png); }
.lg-jayco { -webkit-mask-image: url(../img/logos/jayco.png); mask-image: url(../img/logos/jayco.png); }
.lg-wasteflex { -webkit-mask-image: url(../img/logos/wasteflex.png); mask-image: url(../img/logos/wasteflex.png); }
.lg-visitvic { -webkit-mask-image: url(../img/logos/visitvic.png); mask-image: url(../img/logos/visitvic.png); }
.lg-police { -webkit-mask-image: url(../img/logos/police.png); mask-image: url(../img/logos/police.png); }
.lg-infrabuild { -webkit-mask-image: url(../img/logos/infrabuild.png); mask-image: url(../img/logos/infrabuild.png); }
.lg-tesselaar { -webkit-mask-image: url(../img/logos/tesselaar.png); mask-image: url(../img/logos/tesselaar.png); }
.lg-isuzu { -webkit-mask-image: url(../img/logos/isuzu.png); mask-image: url(../img/logos/isuzu.png); }
.lg-peoplecare { -webkit-mask-image: url(../img/logos/peoplecare.png); mask-image: url(../img/logos/peoplecare.png); }
.lg-seaswift { -webkit-mask-image: url(../img/logos/seaswift.png); mask-image: url(../img/logos/seaswift.png); }
.lg-cleanaway { -webkit-mask-image: url(../img/logos/cleanaway.png); mask-image: url(../img/logos/cleanaway.png); }
.lg-sequoia { -webkit-mask-image: url(../img/logos/sequoia.png); mask-image: url(../img/logos/sequoia.png); }
.lg-arc { -webkit-mask-image: url(../img/logos/arc.png); mask-image: url(../img/logos/arc.png); }
.lg-elaa { -webkit-mask-image: url(../img/logos/elaa.png); mask-image: url(../img/logos/elaa.png); }
.lg-tuh { -webkit-mask-image: url(../img/logos/tuh.png); mask-image: url(../img/logos/tuh.png); }
.lg-whirlpool { -webkit-mask-image: url(../img/logos/whirlpool.png); mask-image: url(../img/logos/whirlpool.png); }
.lg-snapes { -webkit-mask-image: url(../img/logos/snapes.png); mask-image: url(../img/logos/snapes.png); }
.lg-vrgf { -webkit-mask-image: url(../img/logos/vrgf.png); mask-image: url(../img/logos/vrgf.png); }
.lg-phoenix { -webkit-mask-image: url(../img/logos/phoenix.png); mask-image: url(../img/logos/phoenix.png); }
.lg-bitumill { -webkit-mask-image: url(../img/logos/bitumill.png); mask-image: url(../img/logos/bitumill.png); }
.lg-worrells { -webkit-mask-image: url(../img/logos/worrells.png); mask-image: url(../img/logos/worrells.png); }
.lg-payright { -webkit-mask-image: url(../img/logos/payright.png); mask-image: url(../img/logos/payright.png); }
.lg-genlife { -webkit-mask-image: url(../img/logos/genlife.png); mask-image: url(../img/logos/genlife.png); }
.lg-dutton { -webkit-mask-image: url(../img/logos/dutton.png); mask-image: url(../img/logos/dutton.png); }